/* Brand (design-concept/V2.png): navy for identity and primary actions, cyan
   accent (the Q, the selected item, the box in view), slate secondary, light
   background, charcoal text. Each kind of issue has its own colour (Check). */
:root {
  --bg: #f4f7fa;
  --panel: #ffffff;
  --ink: #202b36;
  --ink-soft: #4e5d70;
  --ink-faint: #6b7c93;
  --line: #e1e7ee;
  --navy: #142b45;
  --accent: #142b45;
  --accent-dark: #0c1c2e;
  --accent-bg: #eaf8fa;
  --cyan: #35c6d9;
  --sel: #39ff14;
  --flag: #f59e0b;
  --issue: #c0392b;
  --issue-bg: #fdecea;
  --ok: #157f5b;
  --ok-bg: #e7f6ef;
  --radius: 6px;
  color-scheme: light;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 "Inter", system-ui, sans-serif;
}
h1, h2 { font-family: "Montserrat", "Inter", system-ui, sans-serif; color: var(--navy); }
h1 { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
a { color: var(--accent); }
.muted { color: var(--ink-faint); font-weight: 400; }
.error { color: var(--issue); }
.he { font-family: "Frank Ruhl Libre", serif; font-size: 18px; }
code { font-family: ui-monospace, monospace; font-size: 13px; }

/* Navy sidebar (V2): logo, nav with the open screen in cyan, SoferTrack at the foot. */
body.app { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px;
  padding: 20px 14px; background: var(--navy); color: #fff;
}
.sidebar .brand { text-decoration: none; font-size: 24px; padding: 0 8px 18px; }
.sidebar .logo, .sidebar .logo-q { color: #fff; }
.sidebar nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius);
  color: #c8d3e0; text-decoration: none; font-weight: 500; font-size: 14px;
}
.sidebar nav a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; flex: none; }
.sidebar nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar nav a.on { background: var(--cyan); color: var(--navy); font-weight: 600; }
.sidebar .link { color: #c8d3e0; padding: 8px 10px; font-size: 14px; }
.sidebar .powered { margin: 8px 10px 0; font-size: 11px; color: #8fa1b8; }
.count { background: var(--flag); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 12px; }
@media (max-width: 800px) {
  body.app { display: block; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 16px; }
  .sidebar .brand { padding: 0 12px 0 0; font-size: 20px; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar .powered { display: none; }
}

/* The wordmark: Montserrat bold; the Q is the magnifying glass. */
.logo { font: 700 1em/1 "Montserrat", "Inter", system-ui, sans-serif; color: var(--navy); letter-spacing: -.02em; white-space: nowrap; }
.logo-q { display: inline-block; width: .98em; height: .98em; margin: 0 -.03em 0 0; vertical-align: -.18em; color: var(--navy); }
.login-brand { font-size: 36px; text-align: center; margin: 4px 0 6px; }
.tagline { text-align: center; text-transform: uppercase; letter-spacing: .3em; font: 600 12px "Montserrat", sans-serif; color: var(--cyan); margin: 0; }
.subline { text-align: center; color: var(--ink-faint); margin: 2px 0 16px; }

main { width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 24px 60px; }
@media (max-width: 800px) {
  main { padding: 16px 16px 60px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 1px 2px rgba(20, 43, 69, .04); padding: 16px; margin-bottom: 16px; }
.narrow { max-width: 360px; margin: 80px auto; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }

label { display: block; margin: 8px 0; color: var(--ink-soft); font-size: 13px; }
label.check { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--ink); }
input:not([type=checkbox]):not([type=file]), select, textarea {
  display: block; width: 100%; margin-top: 4px;
  font: inherit; color: var(--ink);
  padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, .button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.row input, .row select { width: auto; margin-top: 0; }
button, .button {
  font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-block;
  padding: 6px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
button:hover, .button:hover { border-color: var(--ink-faint); }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover, .button.primary:hover { background: var(--accent-dark); }
button.danger { color: var(--issue); }
button.link { border: 0; background: none; padding: 0; color: var(--accent); }

.tag { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: var(--radius); background: var(--bg); color: var(--ink-soft); }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.issue { background: var(--issue-bg); color: var(--issue); }

table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; font-weight: 500; color: var(--ink-faint); }
table.layout td.he { text-align: right; }
tr.break td { background: var(--accent-bg); }
.warnings { background: var(--issue-bg); color: var(--issue); border-radius: var(--radius); padding: 8px 8px 8px 28px; }
details summary { cursor: pointer; color: var(--accent); margin: 12px 0 4px; }

.upload { display: grid; grid-template-columns: 2fr 1fr auto 2fr auto; gap: 12px; align-items: end; }
.upload label { margin: 0; }
@media (max-width: 800px) { .upload { grid-template-columns: 1fr; } }

.grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.grid a { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); text-decoration: none; }
.grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--bg); }
.grid .meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 8px; font-size: 13px; }

.review-list { list-style: none; padding: 0; }
.review-list li { display: flex; gap: 16px; }
.review-list img { width: 140px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }

.break-form { display: grid; grid-template-columns: 1fr 1fr 1fr 2fr auto; gap: 12px; align-items: end; }
.break-form fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 6px; }
.break-form legend { font-size: 13px; color: var(--ink-soft); margin-bottom: 4px; }
.break-form label { margin: 0; }
@media (max-width: 900px) { .break-form { grid-template-columns: 1fr; } }

.key-shown { border-color: var(--accent); }
.key-shown code { display: block; padding: 8px; background: var(--bg); border-radius: var(--radius); user-select: all; word-break: break-all; }

/* Teach */
.teach { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .teach { grid-template-columns: 1fr; } }
.toolbar { display: flex; justify-content: space-between; margin-bottom: 8px; }
.seg { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.seg button { border: 0; border-radius: 0; }
.seg button.on { background: var(--navy); color: #fff; }
.seg span { padding: 0 8px; font-size: 13px; color: var(--ink-soft); min-width: 48px; text-align: center; }
.stage { overflow: auto; max-height: calc(100vh - 110px); background: var(--navy); border-radius: var(--radius); }
.canvas-wrap { position: relative; width: 100%; touch-action: none; cursor: crosshair; }
.canvas-wrap img { display: block; width: 100%; height: auto; user-select: none; }
.canvas-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.canvas-wrap svg .mark { fill: rgba(245, 158, 11, .12); stroke: var(--flag); stroke-width: 2; vector-effect: non-scaling-stroke; }
.canvas-wrap svg .mark.suggested { stroke-dasharray: 5 3; }
.canvas-wrap svg .mark.sel { stroke: #35c6d9; stroke-width: 3; fill: rgba(53, 198, 217, .14); }
.canvas-wrap svg .draft { fill: rgba(53, 198, 217, .10); stroke: #35c6d9; stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.side .panel { margin-bottom: 12px; }

/* Crop & turn */
.crop-wrap { position: relative; touch-action: none; }
.crop-wrap img { display: block; width: 100%; height: auto; user-select: none; }
.crop-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.crop-wrap .quad { fill: rgba(53, 198, 217, .08); stroke: #35c6d9; stroke-width: 2; vector-effect: non-scaling-stroke; }
.crop-wrap .top-edge { stroke: #f59e0b; stroke-width: 6; vector-effect: non-scaling-stroke; }
.crop-wrap .handle { fill: #fff; stroke: var(--accent); stroke-width: 3; cursor: grab; }
.legend-top { display: inline-block; width: 18px; height: 4px; background: #f59e0b; vertical-align: middle; margin-right: 4px; }
.marks { padding-left: 20px; margin: 0; }
.marks li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.marks li.sel { background: #fef9e7; }
.marks select { width: auto; flex: 1; margin-right: 8px; }
.marks .why { color: var(--ink-soft); font-size: 13px; }

/* Check */
/* A colour for each kind of issue: the box, its letters above the photo, and
   its dot in the list. Text errors in reds and blues, misshapes in amber,
   orange and teal, loose ink brown, crowns slate; the box in view lime. */
:root {
  --k-missing: #e5484d; --k-extra: #d6409f; --k-wrong: #b42318; --k-space_in_word: #8e4ec6; --k-words_close: #3e63dd;
  --k-break: #a8325e; --k-touching: #f59e0b; --k-broken: #ea580c; --k-shape: #0f766e; --k-missing_tag: #6b7c93; --k-stray: #8a5a2b;
}
.k-missing { --k: var(--k-missing); } .k-extra { --k: var(--k-extra); } .k-wrong { --k: var(--k-wrong); } .k-space_in_word { --k: var(--k-space_in_word); }
.k-words_close { --k: var(--k-words_close); } .k-break { --k: var(--k-break); } .k-touching { --k: var(--k-touching); }
.k-broken { --k: var(--k-broken); } .k-shape { --k: var(--k-shape); } .k-missing_tag { --k: var(--k-missing_tag); } .k-stray { --k: var(--k-stray); }
.canvas-wrap svg .flag { fill: none; stroke: var(--k); stroke-width: 2.5; vector-effect: non-scaling-stroke; cursor: pointer; opacity: .75; transition: opacity .15s; }
.canvas-wrap svg .flag:hover { opacity: 1; }
.canvas-wrap svg .flag.not { stroke-dasharray: 4 3; opacity: .35; }
/* A real problem stays in full sight, decided or not. */
.canvas-wrap svg .flag.real { stroke-width: 3.5; opacity: 1; }
/* The box in view: bright lime with a dark edge, so it shows on parchment and ink alike. */
.canvas-wrap svg .flag.sel { stroke: var(--sel); stroke-width: 4; opacity: 1; stroke-dasharray: none; filter: drop-shadow(0 0 1.5px #000) drop-shadow(0 0 1.5px #000); }
.canvas-wrap svg.has-sel .flag:not(.sel) { opacity: .08; }
.canvas-wrap svg.has-sel .flag:not(.sel):hover { opacity: .5; }
.dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--k); margin-right: 6px; vertical-align: baseline; }
/* Line numbers in a strip right of the photo, level with each line's start. */
.canvas-wrap.numbered { width: calc(100% - 30px); }
.line-no { position: absolute; left: 100%; transform: translateY(-50%); width: 30px; text-align: center; color: #e5e7eb; font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none; }
.line-no.sel { color: var(--sel); font-weight: 700; }
.flags { max-height: 50vh; overflow: auto; }
.flags li { cursor: pointer; font-size: 14px; }
.flags li.not { color: var(--ink-soft); }
.seg button[data-kind] { font-size: 13px; padding: 4px 8px; white-space: nowrap; }
.toolbar:has(.seg) { flex-wrap: wrap; gap: 8px; }
.seg:has(.dot) { flex-wrap: wrap; }
.seg .dot { min-width: 0; padding: 0; }
.lookalikes textarea { flex: 1; min-width: 240px; margin-top: 0; }
.lookalikes .test { margin-top: 6px; font-size: 0.9em; gap: 6px; }
.lookalikes .test.off > span:first-child { opacity: 0.6; }

/* Check: the words of the text round the flag in view, above the photo. */
.context-bar { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; margin-bottom: 8px; }
.context-words { font-size: 30px; line-height: 1.3; margin: 0; text-align: center; color: #8593a5; }
.context-what { font-size: 13px; margin: 2px 0 0; text-align: center; }
.context-bar + .stage { max-height: calc(100vh - 200px); }
.context-bar.done { border-color: var(--ok); background: var(--ok-bg); }
.context-bar.done .context-words { color: var(--ok); font-family: "Montserrat", "Inter", sans-serif; font-size: 24px; }
/* The text round it light; the letters in question dark in the kind's colour, bold and underlined. */
.hot { font-weight: 700; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 7px; }
.hot { color: color-mix(in srgb, var(--k) 70%, #000); }
.hot.missing { text-decoration-style: dashed; }
.hot.words_close, .hot.space_in_word { background: color-mix(in srgb, var(--k) 14%, transparent); border-radius: 4px; }
.hot.plus { text-decoration: none; font-family: "Inter", sans-serif; font-size: .7em; vertical-align: super; }

/* Check fits the screen on a desktop or iPad: the page itself never scrolls; the
   photo fits a near-square frame and only the findings list scrolls. */
@media (min-width: 700px) {
  main.fit { height: 100vh; max-width: none; padding: 16px 20px; overflow: hidden; display: flex; flex-direction: column; }
  main.fit .teach { flex: 1; min-height: 0; grid-template-columns: minmax(0, calc(100vh - 150px)) minmax(300px, 1fr); align-items: stretch; }
  main.fit .photo-side { display: flex; flex-direction: column; min-height: 0; }
  main.fit .stage, main.fit .context-bar + .stage { flex: 1; min-height: 0; max-height: none; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  main.fit .canvas-wrap { flex: none; }
  main.fit .canvas-wrap.numbered { margin-right: 30px; }
  main.fit .side { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  main.fit .side .panel { flex: none; padding: 10px 12px; margin-bottom: 8px; }
  main.fit .side .list-panel { flex: 1; min-height: 0; overflow: auto; margin-bottom: 0; }
  main.fit .side h1 { font-size: 18px; margin: 0; }
  main.fit .side h2 { margin-bottom: 4px; }
  main.fit .side p { margin: 6px 0; }
  main.fit .side label { margin: 6px 0 0; }
  main.fit .flags { max-height: none; }
}
@media (min-width: 700px) and (max-width: 1000px) {
  main.fit { padding: 12px; }
  main.fit .teach { grid-template-columns: minmax(0, calc(100vh - 130px)) minmax(260px, 1fr); gap: 12px; }
  main.fit .context-words { font-size: 24px; }
}
main.fit .flags { padding-left: 2.4em; }
.panel-head { justify-content: space-between; }
.small { font-size: 12px; }
/* Tablet widths: the sidebar keeps only its icons (the Q for the logo), so the
   screens get the room. */
@media (min-width: 801px) and (max-width: 1100px) {
  body.app { grid-template-columns: 64px minmax(0, 1fr); }
  .sidebar { padding: 16px 8px; align-items: center; }
  .sidebar .brand { padding: 0 0 14px; }
  .sidebar .logo { font-size: 0; }
  .sidebar .logo-q { width: 30px; height: 30px; margin: 0; }
  .sidebar nav a { font-size: 0; justify-content: center; padding: 10px; }
  .sidebar nav a .count { font-size: 11px; }
  .sidebar .link { font-size: 12px; padding: 6px 0; }
  .sidebar .powered { display: none; }
}

/* Feedback: what sofrim sent back, each with a close-up of its spot. */
.feedback-list { list-style: none; padding: 0; margin: 0 0 24px; }
.feedback-list li { display: flex; gap: 14px; align-items: flex-start; }
.feedback-list li.done { opacity: .6; }
.feedback-list h3 { margin: 0 0 4px; font-size: 15px; display: flex; gap: 6px; align-items: center; }
.feedback-list p { margin: 4px 0; }
.feedback-list .crop { flex: none; width: 96px; height: 96px; border-radius: var(--radius); background-color: var(--bg); background-repeat: no-repeat; border: 1px solid var(--line); }
.feedback-list form input { flex: 1; min-width: 160px; margin-top: 0; }
.sofer-said { background: var(--accent-bg); border-radius: var(--radius); padding: 6px 10px; font-size: 14px; }
label.inline { display: flex; gap: 8px; align-items: center; margin: 0; }
label.inline input { width: auto; margin-top: 0; }