/* CatchLength console. Style: achromatic ledger (taste-skill app sheet, seed 709421002).
   Face: a cool meter-grey ground; the one chart hue (--data) only on the fish themselves and the agent's points.
   Grid: canvas = viewport - rail (56) - 2 x 32 gutter; cards in a row split it with one 12px gap. */
:root {
  /* Framed sheet (taste-skill app sheet, seed 775205665). Face: the frame takes a harbour teal-grey; the white sheet holds
     the work; the one data hue is ocean teal, on the fish and nowhere in the chrome. */
  --frame: #e6eeef;
  --ground: #ffffff;
  --surface: #ffffff;
  --raised: #f4f6f8;
  --active: #ebedee;
  --border: #e8eaec;
  --rule: #f0f1f2;
  --control: #cdced1;
  --text: #131416;
  --muted: #5d5f60;
  --accent: #131416;
  --data: #1b6c80;
  --data-photo: #4fd1e6;  /* the same teal, lifted so outlines read on the dark sheet in the photo */
  --positive: #1e7b4f;
  --negative: #c4242a;
  --warning: #92400e;
  --pill-positive-bg: #dcfae5; --pill-positive-ink: #04250e;
  --pill-negative-bg: #ffedea; --pill-negative-ink: #831c1e;
  --pill-warning-bg: #fffbeb; --pill-warning-ink: #92400e;
  --pill-neutral-bg: #ebedee; --pill-neutral-ink: #353736;
  --radius-card: 10px;
  --radius-control: 6px;
  --radius-sheet: 16px;
  --sheet-inset: 8px;
  --topbar: 48px;
  --gap: 20px;
  --pad: 24px;
  --rail: 60px;
  --gutter: 28px;
  --fs-title: 22px;
  --fs-section: 16px;
  --fs-kpi: 28px;
  --fs-body: 14px;
  --fs-small: 12px;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--frame); color: var(--text); font: 400 var(--fs-body)/1.5 "IBM Plex Sans", Inter, system-ui, sans-serif; }
h1, h2, p, dl, ol { margin: 0; }
button, a { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; }

/* rail */
.topbar { position: fixed; inset: 0 0 auto 0; height: var(--topbar); display: flex; align-items: center; gap: 12px; padding: 0 20px 0 18px;
  background: var(--frame); z-index: 3; }
.topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--text); text-decoration: none; }
.topbar .brand svg { width: 24px; height: 24px; color: var(--data); }
.topbar .scope { color: var(--muted); font-size: 13px; }
.topbar .scope::before { content: "/"; margin: 0 10px 0 2px; color: var(--control); }
.topbar .meta { margin-left: auto; color: var(--muted); font-size: 12px; font-family: var(--mono); }
.rail { position: fixed; inset: var(--topbar) auto 0 0; width: var(--rail); display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 4px 0 12px; background: var(--frame); z-index: 2; }
.rail a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-control); color: var(--muted); text-decoration: none; }
.rail a svg { width: 18px; height: 18px; }
.rail a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rail a:hover { background: var(--active); color: var(--text); }
.rail a[aria-current="page"] { color: var(--text); background: var(--surface); }

/* canvas */
main { margin: var(--topbar) var(--sheet-inset) var(--sheet-inset) var(--rail); min-height: calc(100vh - var(--topbar) - var(--sheet-inset));
  padding: 24px var(--gutter) 48px; background: var(--ground); border: 1px solid var(--border); border-radius: var(--radius-sheet); }
main > .view { max-width: 1560px; }
.view { display: flex; flex-direction: column; gap: var(--gap); }
.view[hidden] { display: none; }
.title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
h1 { font-size: var(--fs-title); font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.finding { margin-top: 4px; font-size: 15px; }
.finding .muted, .muted { color: var(--muted); }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.notice { background: var(--pill-warning-bg); color: var(--pill-warning-ink); border-radius: var(--radius-control); padding: 8px 12px; font-size: 13px; }
.notice[hidden] { display: none; }

button.primary { height: 36px; padding: 0 16px; border: 0; border-radius: var(--radius-control); background: var(--accent); color: #fff; font-weight: 500; cursor: pointer; }
button.primary:hover { background: #333; }
button.primary:active { transform: translateY(1px); }
button.primary:disabled { background: var(--control); color: var(--muted); cursor: default; }
.segmented { display: inline-flex; background: var(--raised); border-radius: var(--radius-control); padding: 3px; }
.segmented[hidden] { display: none; }
.segmented button { height: 30px; padding: 0 12px; border: 0; background: none; border-radius: 4px; color: var(--muted); cursor: pointer; }
.segmented button[aria-checked="true"] { background: var(--surface); color: var(--text); }
.segmented button:hover { color: var(--text); }

.grid { display: grid; gap: var(--gap); align-items: start; }
.run-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.two { grid-template-columns: 1fr 1fr; align-items: stretch; }
.lf-sum { margin-top: 10px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--pad); min-width: 0; }
.card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.card-h h2 { font-size: var(--fs-section); font-weight: 500; }
.sub { color: var(--muted); font-size: var(--fs-small); }

/* frame */
.frame { position: relative; border-radius: var(--radius-control); overflow: hidden; background: var(--raised); width: fit-content; max-width: 100%; margin: 0 auto; }
.frame img { display: block; max-width: 100%; max-height: min(64vh, 760px); width: auto; height: auto; }  /* the fish are the product: the frame fills its card */
.frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.frame .fishg { cursor: pointer; transition: opacity .15s; }
.frame .fishg.dim { opacity: .35; }
.frame .fish { fill: var(--data-photo); fill-opacity: .12; stroke: var(--data-photo); stroke-width: 2.5; vector-effect: non-scaling-stroke; transition: fill-opacity .15s; }
.frame .fishg:hover .fish, .frame .fishg.on .fish { fill-opacity: .28; }
.frame .fish.flagged { stroke: #f5a524; fill: #f5a524; }  /* the warning amber, lifted for the dark sheet */
.frame .lbl { font-family: var(--mono); font-weight: 500; fill: #fff; paint-order: stroke; stroke: var(--text); stroke-width: 6px; }
.frame .pt { fill: #fff; stroke: var(--text); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.frame .fl { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.frame .fishg.on .fl { stroke-width: 2.5; stroke-dasharray: none; }
/* the picked fish, magnified around its worse point: Spark's raw point, where it was moved to on SAM's outline, the gap */
.frame .zoom { position: absolute; inset: auto 10px 10px auto; width: 34%; max-width: 380px; height: auto; aspect-ratio: 1.45; border: 2px solid #fff; border-radius: 6px; background: var(--raised); box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.frame .zoom[hidden] { display: none; }
.frame .raw { fill: none; stroke: #f5a524; stroke-width: 2; vector-effect: non-scaling-stroke; }
.frame .gap { stroke: #f5a524; stroke-width: 2; vector-effect: non-scaling-stroke; }
.frame-cap { margin-top: 12px; min-height: 21px; font-size: 13px; font-variant-numeric: tabular-nums; }
.frame-cap .unit { color: var(--muted); font-size: 12px; margin-left: 1px; }

/* timeline */
.timeline { list-style: none; padding: 0; display: flex; flex-direction: column; max-height: 560px; overflow: auto; }
.timeline li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 0; border-top: 1px solid var(--rule); }
.timeline li:first-child { border-top: 0; }
.timeline .tool { font-weight: 500; }
.timeline .say { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.timeline .say b { color: var(--text); font-weight: 500; }
.timeline li.arrive { animation: arrive .25s ease-out; }
@keyframes arrive { from { opacity: 0; transform: translateY(4px); } }
.pill { font-size: var(--fs-small); padding: 1px 8px; border-radius: 99px; white-space: nowrap; align-self: start; }
.pill.ok { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.pill.no { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.pill.warn { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
.pill.n { background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); }

/* ledger */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: var(--fs-small); padding: 0 12px 8px 0; }
td { padding: 11px 12px 11px 0; border-top: 1px solid var(--rule); vertical-align: top; }
.num { text-align: right; }
td .unit { color: var(--muted); font-size: var(--fs-small); margin-left: 2px; }
tbody tr { cursor: pointer; }
tbody tr:hover td, tbody tr.on td { background: #f6f8fb; }
td .why { display: block; color: var(--muted); font-size: 13px; max-width: 60ch; margin-top: 4px; line-height: 1.4; }
.ledger th { white-space: nowrap; }
td.rule { white-space: nowrap; }
td.rule { color: var(--muted); font-size: 13px; max-width: 320px; }

/* receipt + kv */
.receipt, .kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; }
.receipt dt, .kv dt { color: var(--muted); }
.receipt dd, .kv dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kv dt { color: var(--text); font-weight: 500; }

/* charts */
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid-line { stroke: var(--rule); }
.chart .axis { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart .bar { fill: var(--data); }
.chart .dot { fill: var(--data); }
.chart .dot.flagged { fill: none; stroke: var(--warning); stroke-width: 1.5; }
.chart .ideal { stroke: var(--text); stroke-width: 1; stroke-dasharray: 4 4; }
.empty { color: var(--muted); padding: 24px 0; }
.kpis { display: flex; gap: 40px; flex-wrap: wrap; margin-bottom: 18px; }
.kpi .v { font-size: var(--fs-kpi); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kpi .v .unit { font-size: 15px; color: var(--muted); margin-left: 3px; }
.kpi .l { color: var(--muted); font-size: 13px; }

.prose p { max-width: 68ch; margin-bottom: 12px; font-size: 15px; }
.prose h2 { font-size: var(--fs-section); font-weight: 500; margin: 18px 0 8px; }
.prose h2:first-child { margin-top: 0; }
.about .kv { margin-bottom: 8px; }

@media (min-width: 1081px) {
  /* the frame sets the row's height; the timeline scrolls inside it, so the two cards share a bottom edge */
  .run-grid { align-items: stretch; }
  .timeline-card { contain: size; display: flex; flex-direction: column; }
  .timeline { flex: 1 1 0; min-height: 0; max-height: none; }
}
@media (max-width: 1080px) { .run-grid { grid-template-columns: 1fr; } .timeline { max-height: none; } }
@media (max-width: 760px) {
  :root { --gutter: 16px; --pad: 16px; }
  .rail { inset: auto 0 0 0; width: auto; height: 60px; flex-direction: row; justify-content: space-around; border-right: 0;
    border-top: 1px solid var(--border); padding: 0 8px; background: var(--surface); }
  main { margin: var(--topbar) 0 0; border: 0; border-radius: 0; }
  .topbar .scope, .topbar .meta { display: none; }
  .rail a { width: auto; height: 52px; padding: 0 14px; display: flex; flex-direction: column; gap: 2px; }
  .rail a span { position: static; width: auto; height: auto; clip: auto; font-size: 11px; }
  main { padding-bottom: 96px; }
  .two { grid-template-columns: 1fr; }
  .title-row { align-items: stretch; }
  .actions { width: 100%; flex-direction: column; align-items: stretch; }  /* tabs, then the button, then the tape link, each full width */
  td { padding-top: 12px; padding-bottom: 12px; }  /* a one-line row reaches 44 px */
  .chart .axis { font-size: 16px; }  /* the SVG shrinks to about two thirds, so this lands near 11 px */
  .ledger th:nth-child(4), .ledger td:nth-child(4), .ledger th:nth-child(5), .ledger td:nth-child(5), .ledger th:nth-child(7), .ledger td:nth-child(7) { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* the title row's sample line and the verdict: the screen's answer, in figures */
.sample-line { margin-top: 6px; color: var(--muted); font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.verdict { display: grid; grid-template-columns: repeat(3, max-content) 1fr; gap: 8px 48px; align-items: end; margin: 4px 0 10px; }
.verdict > div { display: flex; flex-direction: column-reverse; }
.verdict dd { margin: 0; font-size: 44px; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.verdict dd .of { font-size: 18px; color: var(--muted); font-weight: 400; }
.verdict dd .small { font-size: 16px; font-weight: 500; }
.verdict dt { color: var(--muted); font-size: 13px; margin-top: 2px; }
.verdict .warn dd { color: var(--warning); }
.verdict .status { justify-self: end; text-align: right; }

/* the stage strip: the agent's whole job at a glance, filling in as it runs */
.stages { list-style: none; padding: 0; margin: 0 0 6px; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.st { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); min-width: 0; }
.st .mark { height: 4px; border-radius: 2px; background: var(--control); transition: background .2s; }
.st .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.st.ok { color: var(--text); } .st.ok .mark { background: var(--text); }
.st.warn { color: var(--warning); } .st.warn .mark { background: var(--warning); }
.st.no, .st.esc { color: var(--negative); } .st.no .mark, .st.esc .mark { background: var(--negative); }
.st.current .mark { background: var(--data); }
.st.current .nm { color: var(--text); font-weight: 500; }

/* timeline: passes are a quiet tick; only problems get a pill */
.timeline li { grid-template-columns: 1fr auto; }
.timeline .tag { justify-self: end; display: flex; align-items: center; }
.tick { width: 16px; height: 16px; color: var(--positive); }
.timeline .ms { grid-column: 1 / -1; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.timeline li.now .tool::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--data);
  margin-right: 8px; vertical-align: 1px; animation: pulse 1s ease-in-out infinite; }
.timeline li.idle { border: 0; }
@keyframes pulse { 50% { opacity: .25; } }
body.running #run-btn { cursor: progress; }

/* ledger */
td.strong { font-weight: 500; }
tbody tr:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
tr.idle td { cursor: default; }
.cited sup { font-size: 11px; color: var(--muted); vertical-align: 2px; }
.cited { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13px; }
.cited h3 { font-size: 13px; font-weight: 500; margin: 0 0 8px; }
.cited ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cited sup { margin-right: 6px; }
.cited .q { color: var(--text); }
.cited a { color: var(--text); text-underline-offset: 3px; }
.cited a:hover { color: var(--data); }

@media (max-width: 1080px) {
  .verdict { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .verdict .status { grid-column: 1 / -1; justify-self: start; text-align: left; }
}
@media (max-width: 760px) {
  .verdict { gap: 8px 16px; }
  .verdict dd { font-size: 26px; }
  .stages { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; min-width: 0; }  /* a flex item's min-width is auto, which would widen the page */
  .actions .segmented { display: flex; flex-wrap: wrap; }
  .actions .segmented button { flex: 1 1 auto; white-space: nowrap; }
  td .why { display: none; }  /* on a phone the reason shows under the photo, and in the row once the fish is picked */
  tr.on td .why { display: block; }
  .st { flex: 0 0 78px; }
  /* phone order: verdict, photo, checks (the timeline scrolls inside its card), sign-off, then the fish and the receipts */
  .run-grid { order: 1; }
  .signoff { order: 2; }  /* the notice keeps its place under the button that raised it */
  #view-run > .card, #view-run > .two { order: 3; }
  .timeline { max-height: 320px; }
  /* thumb-sized controls */
  .segmented button, .guide button, button.primary, button.secondary, .signoff select, .signoff input { min-height: 44px; }
  .tape-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* officer sign-off: the screen's main job once a report is filed */
.signoff { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 12px 16px; margin-bottom: 4px; }
.signoff[hidden] { display: none; }
.signoff p { font-size: 14px; }
.signoff-actions[hidden] { display: none; }
.signoff select { height: 36px; padding: 0 8px; border: 1px solid var(--control); border-radius: var(--radius-control); font: inherit; background: var(--surface); }
.lang-note { flex-basis: 100%; font-size: 12px; }
.signoff-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.signoff input { height: 36px; width: 260px; padding: 0 10px; border: 1px solid var(--control); border-radius: var(--radius-control); font: inherit; background: var(--surface); }
.signoff input:focus-visible { outline: 2px solid var(--text); outline-offset: 0; }
button.secondary { height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-control); background: #e5e5e5; color: var(--text); font-weight: 500; cursor: pointer; }
button.secondary:hover { background: #dadada; }
button.secondary:active { transform: translateY(1px); }
.signoff.done { border-color: transparent; background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.signoff.back { border-color: transparent; background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
@media (max-width: 760px) { .signoff input { width: 100%; } .signoff-actions { width: 100%; } .signoff-actions button { flex: 1; } }
.marks { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
#bm-body { display: grid; gap: var(--gap); }

/* start-here line, stage legend, checks panel (4 Nov) */
.lede { margin-top: 6px; max-width: 72ch; color: var(--muted); font-size: 15px; }
.tape-link { align-self: center; color: var(--data); font-weight: 500; text-decoration: none; padding: 0 6px; }
.tape-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.legend { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; margin: -2px 0 2px; color: var(--muted); font-size: 12px; }
.legend .k { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 4px; vertical-align: middle; background: var(--control); }
.legend .k.ok { background: var(--text); } .legend .k.warn { background: var(--warning); } .legend .k.no { background: var(--negative); }
.checks { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; }
.ck { display: grid; grid-template-columns: 22px 1fr auto; gap: 2px 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 13px; }
.ck:first-child { border-top: 0; }
.ck .ic { font-weight: 600; text-align: center; border-radius: 4px; line-height: 18px; }
.ck.ok .ic { color: var(--positive); } .ck.warn .ic { color: var(--pill-warning-ink); background: var(--pill-warning-bg); }
.ck.no .ic { color: var(--pill-negative-ink); background: var(--pill-negative-bg); } .ck.todo .ic { color: var(--muted); }
.ck .n { font-weight: 500; } .ck .lim { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
.ck .r { text-align: right; font-variant-numeric: tabular-nums; max-width: 24ch; }
.ck.warn .r { color: var(--pill-warning-ink); } .ck.no .r { color: var(--negative); }
.tl-head { margin-top: 4px; }
td.id { font-family: var(--mono); }
i.lat { color: var(--muted); font-size: 12px; margin-left: 4px; }

/* a picked fish: its snap distances in the row, a focus ring on its outline; a failed load gets a Retry */
td .detail { color: var(--text); }
.frame .fishg:focus { outline: none; }
.frame .fishg:focus-visible .fish { stroke-width: 5; fill-opacity: .28; }
.notice button.secondary { height: 30px; padding: 0 12px; margin-left: 8px; background: var(--surface); }
.prose ul.plain { list-style: none; margin: 0 0 12px; padding: 0; max-width: 68ch; font-size: 15px; display: flex; flex-direction: column; gap: 6px; }
.prose a { color: var(--text); text-underline-offset: 3px; }
.prose a:hover { color: var(--data); }

/* the states a reviewer should see, one click each; the cards they land on clear the fixed top bar */
.guide { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.guide button { height: 30px; padding: 0 12px; border: 1px solid var(--control); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.guide button:hover { border-color: var(--text); }
.guide button[hidden] { display: none; }
#frame, #checks { scroll-margin-top: calc(var(--topbar) + 12px); }

/* the officer's script: Plex has no Sinhala or Tamil, so a judge's machine would otherwise show boxes */
:lang(si) { font-family: "Noto Sans Sinhala", "IBM Plex Sans", sans-serif; }
:lang(ta) { font-family: "Noto Sans Tamil", "IBM Plex Sans", sans-serif; }