@font-face {
  font-family: "Rale Web";
  src: url("assets/fonts/CharisSIL-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Rale Web";
  src: url("assets/fonts/CharisSIL-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Rale Web";
  src: url("assets/fonts/CharisSIL-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Rale Web";
  src: url("assets/fonts/CharisSIL-BoldItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #142536;
  --muted: #657483;
  --navy: #17324d;
  --navy-deep: #10283f;
  --teal: #2a6f73;
  --cream: #f4f0e7;
  --paper: #fffdf8;
  --line: #d9d4c9;
  --good: #287452;
  --issue: #a54b3e;
  --shadow: 0 12px 32px rgb(20 37 54 / 9%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--cream);
  color: var(--ink);
  overflow: hidden;
}

button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

.app-shell {
  display: grid;
  grid-template-columns: 306px minmax(0, 1fr);
  height: 100dvh;
}

.sidebar {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 15px;
  padding: 25px 18px 16px;
  background: #eee7d8;
  color: var(--ink);
  border-right: 1px solid var(--line);
}

.back-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  flex-shrink: 0;
  width: 191px;
  min-height: 45px;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
}
.back-mark img { display: block; width: 177px; max-width: 100%; height: auto; }
.back-mark:hover { border-color: var(--teal); }
.back-mark:focus-visible { outline: 3px solid #70c2b5; outline-offset: 3px; }

.brand h1 {
  margin: 5px 0 0;
  font: 600 24px/1.06 Georgia, "Times New Roman", serif;
  letter-spacing: -.02em;
}

.eyebrow {
  margin: 0;
  color: #7e8b98;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sidebar .eyebrow { color: #596b69; }
.sidebar label { font-size: 11px; font-weight: 750; color: #45565d; }

.progress-block { font-size: 11px; color: #45565d; }
.progress-block > div:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; }
.progress-track { height: 4px; overflow: hidden; border-radius: 99px; background: rgb(255 255 255 / 14%); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #70c2b5; transition: width .18s ease; }

.search {
  width: 100%;
  margin-top: -8px;
  padding: 10px 11px;
  border: 1px solid #c9c1b2;
  border-radius: 7px;
  outline: none;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
}
.search::placeholder { color: #68716f; }
.search:focus { border-color: #73b9bb; box-shadow: 0 0 0 2px rgb(115 185 187 / 22%); }

.filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.filter {
  min-width: 0;
  padding: 6px 2px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #596b69;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.filter:hover, .filter.is-active { background: #ded6c6; color: var(--ink); }

.entry-list {
  min-height: 0;
  margin: 0 -7px;
  padding: 0 5px 10px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #52687c transparent;
}

.entry-item {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 8px;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 10px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.entry-item:hover { background: #e5ddcd; }
.entry-item.is-active { background: #dcd4c3; box-shadow: inset 2px 0 var(--teal); }
.entry-number { color: #626d6b; font-size: 10px; font-variant-numeric: tabular-nums; }
.entry-name { display: block; overflow: hidden; font: 600 13px/1.25 Georgia, "Times New Roman", serif; text-overflow: ellipsis; white-space: nowrap; }
.entry-english { display: block; overflow: hidden; margin-top: 3px; color: #45565d; font: 600 12px/1.25 Inter, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.entry-page { display: block; margin-top: 3px; color: #626d6b; font: 9px/1.2 Inter, sans-serif; }
.entry-dot { width: 6px; height: 6px; border-radius: 50%; background: #6b7b88; }
.entry-item[data-state="checked"] .entry-dot { background: #64c695; }
.entry-item[data-state="issue"] .entry-dot { background: #ef8b79; }
.empty-list { padding: 28px 12px; color: #626d6b; font-size: 12px; text-align: center; }

.workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  padding: 18px;
}

.entry-header {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0 2px 15px;
}
.entry-title { min-width: 220px; }
.entry-title h2 { overflow: hidden; margin: 3px 0 2px; font: 600 24px/1.14 Georgia, "Times New Roman", serif; text-overflow: ellipsis; white-space: nowrap; }
.source-line { margin: 0; color: var(--muted); font-size: 11px; }
.header-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }

.header-actions button, .pdf-link, .review-footer button, .panel header button, .dialog-shell button, .build-dialog button {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #cdd2d4;
  border-radius: 6px;
  background: #fff;
  color: #283b4b;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}
.header-actions button:hover, .pdf-link:hover, .review-footer button:hover, .panel header button:hover { border-color: #90a0a8; background: #f8faf9; }
.icon-button { width: 32px; padding: 0 !important; font-size: 16px !important; }
.status-button.correct[aria-pressed="true"] { border-color: var(--good); background: var(--good); color: white; }
.status-button.issue[aria-pressed="true"] { border-color: var(--issue); background: var(--issue); color: white; }
.rebuild { border-color: #99b9bb !important; color: var(--teal) !important; }
.local-only { display: none !important; }
body.local-mode .local-only { display: inline-flex !important; align-items: center; }
body.local-mode .progress-block { display: block !important; }
body.local-mode .review-footer { display: flex !important; }
body:not(.local-mode) .workspace { grid-template-rows: auto minmax(0, 1fr); }
body:not(.local-mode) .entry-item { grid-template-columns: 32px minmax(0, 1fr); }

.comparison-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.08fr) minmax(360px, 1fr);
  gap: 12px;
  min-height: 0;
}

.panel {
  display: grid;
  grid-template-rows: 45px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.panel-scan { grid-template-rows: 45px 40px minmax(0, 1fr); }
.panel > header {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 0 13px;
  border-bottom: 1px solid var(--line);
  background: #faf8f2;
}
.panel > header > span { color: var(--teal); font-size: 9px; font-weight: 850; letter-spacing: .11em; }
.panel > header h3 { margin: 0; font-size: 12px; letter-spacing: .01em; }
.panel > header small { margin-left: auto; color: #879098; font-size: 9px; }
.panel > header > button { min-height: 27px; margin-left: auto; padding: 4px 8px; }
.edition-switch {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
  padding: 2px;
  border: 1px solid #cbd2d0;
  border-radius: 7px;
  background: #eceeea;
}
.edition-switch button {
  min-height: 25px;
  padding: 3px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #617078;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.edition-switch button.is-active { background: white; color: var(--navy); box-shadow: 0 1px 4px rgb(20 37 54 / 14%); }
.panel-text.is-reader { border-top-color: #8db6ad; }
.panel-body { min-height: 0; overflow: auto; }

.prose {
  padding: clamp(18px, 2.3vw, 32px);
  font: 17px/1.62 "Rale Web", "Charis SIL", "Gentium Plus", Georgia, serif;
  overflow-wrap: anywhere;
}
.prose h3 { margin: 0 0 21px; color: var(--navy); font-size: 16px; line-height: 1.45; }
.prose p { margin: 0 0 15px; }
.prose .entry-line { display: grid; grid-template-columns: 12px 1fr; gap: 6px; }
.prose blockquote { margin: 16px 0; padding: 3px 0 3px 15px; border-left: 2px solid #80aaa5; color: #425763; }
.panel-text.is-reader .prose { background: #fbfcf8; }

.scan-toolbar {
  display: grid;
  grid-template-columns: minmax(150px, auto) 30px minmax(90px, 1fr) 30px 48px 42px;
  gap: 7px;
  align-items: center;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  background: #f3f1eb;
}
.scan-source-picker {
  display: grid;
  grid-template-columns: auto minmax(96px, 1fr);
  gap: 7px;
  align-items: center;
  color: #52626d;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.scan-source-picker select {
  min-width: 0;
  height: 28px;
  padding: 0 25px 0 8px;
  border: 1px solid #cbd1d1;
  border-radius: 5px;
  background: white;
  color: var(--navy);
  font-size: 11px;
  font-weight: 750;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.scan-toolbar button {
  height: 28px;
  padding: 0;
  border: 1px solid #cbd1d1;
  border-radius: 5px;
  background: white;
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.scan-toolbar button:hover { border-color: #85999b; }
.scan-toolbar input { width: 100%; accent-color: var(--teal); cursor: pointer; }
.scan-toolbar output { color: #52626d; font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; }

.scan-stage {
  display: block;
  padding: 18px;
  background-color: #d8d6d0;
  background-image: linear-gradient(45deg, rgb(255 255 255 / 20%) 25%, transparent 25%), linear-gradient(-45deg, rgb(255 255 255 / 20%) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgb(255 255 255 / 20%) 75%), linear-gradient(-45deg, transparent 75%, rgb(255 255 255 / 20%) 75%);
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  background-size: 14px 14px;
}
.scan-stage canvas { display: block; width: 100%; max-width: none; height: auto; margin: 0 auto; background: white; box-shadow: 0 4px 18px rgb(0 0 0 / 18%); cursor: zoom-in; }
.scan-message { padding-top: 50px; color: #4c5962; font-size: 13px; text-align: center; }

.review-footer {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto auto;
  gap: 9px;
  align-items: center;
  padding: 12px 2px 0;
}
.review-footer label { font-size: 11px; font-weight: 800; }
.review-footer textarea {
  resize: none;
  min-height: 34px;
  max-height: 100px;
  padding: 7px 9px;
  border: 1px solid #ccd1d1;
  border-radius: 6px;
  background: rgb(255 255 255 / 75%);
  color: var(--ink);
  font-size: 12px;
}
.review-footer textarea:focus { outline: 2px solid rgb(42 111 115 / 22%); border-color: var(--teal); }
#saveStatus { color: var(--muted); font-size: 10px; white-space: nowrap; }

dialog { padding: 0; border: 0; border-radius: 10px; box-shadow: 0 30px 90px rgb(7 20 32 / 35%); }
dialog::backdrop { background: rgb(12 26 38 / 64%); backdrop-filter: blur(2px); }
.editor-dialog { width: min(870px, calc(100vw - 32px)); }
.dialog-shell { display: grid; grid-template-rows: auto minmax(300px, 62vh) auto; }
.dialog-shell > header, .dialog-shell > footer { display: flex; gap: 12px; align-items: center; padding: 15px 18px; }
.dialog-shell > header { justify-content: space-between; border-bottom: 1px solid #dde0df; }
.dialog-shell > header h2 { margin: 3px 0; font: 600 20px Georgia, serif; }
.dialog-shell > header p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.dialog-shell > header button { width: 34px; min-height: 34px; padding: 0; font-size: 20px; }
.dialog-shell textarea { resize: none; width: 100%; padding: 22px; border: 0; outline: 0; background: #fbfaf6; color: #172938; font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; }
.dialog-shell > footer { justify-content: flex-end; border-top: 1px solid #dde0df; }
.dialog-shell > footer span { margin-right: auto; color: var(--muted); font-size: 11px; }
.dialog-shell .primary { border-color: var(--teal); background: var(--teal); color: #fff; }

.image-dialog { max-width: min(92vw, 1100px); max-height: 92vh; background: #252a2d; }
.image-dialog img { display: block; max-width: 88vw; max-height: 88vh; object-fit: contain; }
.image-dialog button { position: fixed; z-index: 2; top: 16px; right: 22px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgb(0 0 0 / 70%); color: white; font-size: 22px; cursor: pointer; }
.build-dialog { width: min(680px, calc(100vw - 32px)); }
.build-dialog > div { padding: 22px; }
.build-dialog h2 { margin: 0 0 13px; font: 600 21px Georgia, serif; }
.build-dialog pre { min-height: 100px; max-height: 50vh; overflow: auto; padding: 14px; border-radius: 6px; background: #132638; color: #d8eee9; font: 11px/1.5 ui-monospace, monospace; white-space: pre-wrap; }

@media (max-width: 1120px) {
  body { overflow: auto; }
  .app-shell { grid-template-columns: 230px minmax(0, 1fr); height: auto; min-height: 100dvh; }
  .sidebar { position: sticky; top: 0; height: 100dvh; }
  .workspace { display: block; }
  .entry-header { align-items: flex-start; }
  .comparison-grid { grid-template-columns: 1fr; }
  .panel { min-height: 460px; margin-bottom: 12px; }
  .panel-scan { min-height: 540px; }
  .review-footer { grid-template-columns: auto 1fr auto; padding-bottom: 14px; }
  #saveStatus { grid-column: 2 / -1; }
}

@media (max-width: 720px) {
  .app-shell { display: block; }
  .sidebar { position: relative; height: auto; padding-bottom: 10px; }
  .entry-list { display: flex; max-height: 150px; gap: 4px; overflow-x: auto; }
  .entry-item { flex: 0 0 190px; }
  .workspace { padding: 12px; }
  .entry-header { display: block; }
  .header-actions { justify-content: flex-start; margin-top: 12px; }
  .panel { min-height: 380px; }
  .review-footer { grid-template-columns: 1fr auto; }
  .review-footer label, #saveStatus { grid-column: 1 / -1; }
}

@media print {
  .sidebar, .entry-header, .review-footer { display: none !important; }
  body { overflow: visible; background: white; }
  .app-shell, .workspace, .comparison-grid { display: block; height: auto; padding: 0; }
  .panel { break-inside: avoid; min-height: 0; margin-bottom: 12px; box-shadow: none; }
  .panel-body { overflow: visible; }
}

@media (max-width: 1050px) {
  .scan-toolbar { grid-template-columns: minmax(135px, 1fr) 30px minmax(70px, 1fr) 30px 45px 40px; }
  .scan-source-picker span { display: none; }
  .scan-source-picker { grid-template-columns: minmax(105px, 1fr); }
}
[hidden] { display: none !important; }
.panel-scan:has(#manuscriptNav:not([hidden])) { grid-template-rows: 45px 40px auto minmax(0, 1fr); }
#manuscriptNav { display:flex; flex-wrap:wrap; gap:6px 10px; font-size:11px; min-width:0; }
#manuscriptNav label { display:flex; align-items:center; gap:6px; }
#manuscriptNav select { max-width:240px; padding:5px; border:1px solid #cbd1d1; border-radius:4px; background:white; }
#manuscriptNav button { padding:0 8px; }
#manuscriptNav small { flex-basis:100%; line-height:1.4; }
#manuscriptMatch { color:#385d5a; }