/* Cut the Line - a lakeside tackle shop: misty lake-grey ground, a deep-water header, cream letter paper, a red and
 * white float, brass fittings. Dark mode is the lake at night: deep teal water, the letter under a head torch, every
 * bait colour lifted so its text still reads. */
:root {
  --bg: #e8efee; --bg-2: #d8e4e3; --card: #f8fbfa; --ink: #0f2529; --ink-2: #44595d; --line: #c2d2d1;
  --accent: #0d5a61; --accent-ink: #ffffff; --deep: #0a3a40; --brass: #8a6212; --red: #b8322a;
  --paper: #fffdf6; --paper-edge: #d4c9a8; --rule: #e3dcc4;
  --water: #bcd9dc; --water-2: #9cc6ca; --river: #cfe5e7; --bank: #e7dfc8; --bank-ink: #3f3418;
  --float-top: #c8372d; --float-bot: #ffffff; --line-c: #29484d; --hook: #5a6b6e; --rod: #6b4a1f;
  --tray: #2f5f57; --tray-floor: #e2ebe4; --cell: #ffffff; --cell-off: #eef2ef; --cell-ink: #0f2529; --cell-muted: #5a6b6b;
  --lure: #c8372d; --lure-mark: #f4d35e; --lure-line: #0f2529;
  --f-away: #b8322a; --f-toward: #1e7a46; --f-none: #6a7b7d; --coin: #d9a520;
  --b-fee: #f9d3cf; --b-flattery: #f7d6e6; --b-urgency: #fde0bd; --b-prestige: #f6e7a8; --b-secrecy: #e3dbf6; --b-greeting: #d8e3f5; --b-sender: #cdeee9; --b-other: #e2e6e6;
  --b-fee-ink: #8e1f17; --b-flattery-ink: #8a1f55; --b-urgency-ink: #8a4300; --b-prestige-ink: #6b5200; --b-secrecy-ink: #4b2d8f; --b-greeting-ink: #23467e; --b-sender-ink: #11605a; --b-other-ink: #3f4b4c;
  --v-cut: #a3241c; --v-check: #8a5500; --v-clear: #1d6b3e; --v-none: #44595d;
  --warn-bg: #fbe6e3; --warn-ink: #8a1c1c; --note-bg: #fbf0d4; --note-ink: #6b4305; --ok-bg: #e0f0e6; --ok-ink: #1d5a33;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --letter: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #08181b; --bg-2: #0f2428; --card: #10262a; --ink: #e4efee; --ink-2: #a3b9bb; --line: #24434a;
  --accent: #6cc7cc; --accent-ink: #062024; --deep: #051315; --brass: #e2b955; --red: #ff8a7d;
  --paper: #15302f; --paper-edge: #3c5a52; --rule: #234240;
  --water: #123c44; --water-2: #1b525b; --river: #10363d; --bank: #2b3a2f; --bank-ink: #e8e0c4;
  --float-top: #ff6f61; --float-bot: #f2f2f2; --line-c: #b7d3d5; --hook: #a9bcbe; --rod: #c79a5a;
  --tray: #3f7f74; --tray-floor: #0c2023; --cell: #163236; --cell-off: #0f2629; --cell-ink: #e4efee; --cell-muted: #93abad;
  --lure: #ff7a6b; --lure-mark: #f4d35e; --lure-line: #062024;
  --f-away: #ff8a7d; --f-toward: #7fdca2; --f-none: #93abad; --coin: #e8bf45;
  --b-fee: #4d1d1a; --b-flattery: #4a1d36; --b-urgency: #4a2e10; --b-prestige: #43380f; --b-secrecy: #31264f; --b-greeting: #1c2f4d; --b-sender: #10403b; --b-other: #2b3536;
  --b-fee-ink: #ffc2bb; --b-flattery-ink: #ffc1de; --b-urgency-ink: #ffd09a; --b-prestige-ink: #f3dc86; --b-secrecy-ink: #d8cbff; --b-greeting-ink: #bcd3ff; --b-sender-ink: #a6eee4; --b-other-ink: #d3dcdc;
  --v-cut: #ff8f84; --v-check: #f2c063; --v-clear: #86e0aa; --v-none: #a3b9bb;
  --warn-bg: #3b1a17; --warn-ink: #ffcdc5; --note-bg: #362a12; --note-ink: #ffdda1; --ok-bg: #12301f; --ok-ink: #bdebcc;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--sans); overflow-x: hidden; }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--sans); line-height: 1.2; overflow-wrap: anywhere; letter-spacing: -0.01em; }
.hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: 0.88rem; }
.muted { color: var(--ink-2); }
.mono { font-family: var(--mono); }

/* Header: deep water with a wave edge */
.bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px 14px; background: var(--deep); color: #eaf6f5; flex-wrap: wrap; position: relative; }
.bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 8px; background: radial-gradient(circle at 10px -4px, transparent 9px, var(--bg) 10px) 0 0 / 20px 8px repeat-x; }
.bar .back { color: inherit; opacity: 0.85; text-decoration: none; font-size: 0.9rem; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 1.18rem; flex: 1; min-width: 0; white-space: nowrap; }
.logo { width: 28px; height: 28px; flex: none; }
.lg-line { stroke: #eaf6f5; stroke-width: 1.4; }
.lg-top { fill: #ff6f61; } .lg-bot { fill: #ffffff; }
.lg-cut { stroke: #f4d35e; stroke-width: 2.2; stroke-linecap: round; }
.lg-water { fill: none; stroke: #6cc7cc; stroke-width: 1.6; }
.session { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bar .pill { background: transparent; border-color: rgba(234, 246, 245, 0.7); color: inherit; }
.bar .pill.solid { background: #f4d35e; border-color: #f4d35e; color: #062024; }

/* Buttons */
.pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 6px 14px; font: 600 0.88rem var(--sans); cursor: pointer; text-decoration: none; }
.pill:hover:not(:disabled) { border-color: var(--accent); }
.pill.solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pill.ghost { cursor: default; }
.pill.big { padding: 10px 22px; font-size: 1rem; }
.pill.tiny { padding: 3px 10px; font-size: 0.8rem; }
.pill:disabled { opacity: 0.55; cursor: not-allowed; }
.chip { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 5px 12px 5px 26px; font: 0.86rem var(--sans); cursor: pointer; position: relative; }
.chip::before { content: ""; position: absolute; left: 10px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%; background: linear-gradient(var(--float-top) 50%, var(--float-bot) 50%); box-shadow: 0 0 0 1px var(--line-c); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Layout */
main { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; }
.hero { padding: 24px 0 8px; }
.kicker { font-size: 0.86rem; color: var(--ink-2); margin: 0 0 8px; max-width: 780px; }
.hero h1 { font-size: clamp(1.7rem, 4.4vw, 2.8rem); margin: 4px 0 10px; max-width: 860px; }
.lede { max-width: 780px; margin: 0 0 14px; }
.samples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; margin-top: 16px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-top: 16px; min-width: 0; }
.layout .panel { margin-top: 0; }
.ph { font-size: 1.3rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.step-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--card); border: 3px solid var(--float-top); border-bottom-color: var(--line-c); color: var(--ink); font: 800 0.8rem var(--sans); flex: none; }
.lbl { display: block; font-size: 0.82rem; font-weight: 600; margin: 8px 0 4px; color: var(--ink-2); }
input, select, textarea { width: 100%; font: 0.95rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; min-width: 0; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.drop { border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.drop.over { border-color: var(--accent); background: var(--bg-2); }
.filelbl { color: var(--accent); text-decoration: underline; cursor: pointer; }
.note { background: var(--note-bg); color: var(--note-ink); border-radius: 6px; padding: 6px 10px; }

/* The letter: cream paper with faint rules, bait marked like a highlighter, a little tag after each mark */
.letter { background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 4px; padding: 18px 20px 18px 34px; font: 1rem/1.75 var(--letter); white-space: pre-wrap; overflow-wrap: anywhere;
  background-image: linear-gradient(transparent calc(1.75em - 1px), var(--rule) calc(1.75em - 1px)); background-size: 100% 1.75em; background-position: 0 17px; position: relative; max-height: 560px; overflow: auto; box-shadow: 0 2px 0 var(--paper-edge); }
.letter::before { content: ""; position: absolute; left: 18px; top: 0; bottom: 0; width: 1px; background: var(--float-top); opacity: 0.45; }
.letter-empty { margin: 0; color: var(--ink-2); font-style: italic; }
mark.bait { border-radius: 3px; padding: 0 2px; color: inherit; }
.bait-tag { display: inline-block; font: 700 0.62rem/1.4 var(--sans); text-transform: uppercase; letter-spacing: 0.05em; border-radius: 3px; padding: 0 4px; margin: 0 3px 0 2px; vertical-align: 0.35em; white-space: nowrap; }
.b-fee { background: var(--b-fee); } mark.b-fee + .bait-tag { background: var(--b-fee-ink); color: var(--b-fee); }
.b-flattery { background: var(--b-flattery); } mark.b-flattery + .bait-tag { background: var(--b-flattery-ink); color: var(--b-flattery); }
.b-urgency { background: var(--b-urgency); } mark.b-urgency + .bait-tag { background: var(--b-urgency-ink); color: var(--b-urgency); }
.b-prestige { background: var(--b-prestige); } mark.b-prestige + .bait-tag { background: var(--b-prestige-ink); color: var(--b-prestige); }
.b-secrecy { background: var(--b-secrecy); } mark.b-secrecy + .bait-tag { background: var(--b-secrecy-ink); color: var(--b-secrecy); }
.b-greeting { background: var(--b-greeting); } mark.b-greeting + .bait-tag { background: var(--b-greeting-ink); color: var(--b-greeting); }
mark.bait { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12); }

/* The tackle tray */
.tray-row { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: stretch; }
.tray-host svg, .current-host svg, .float-host svg { width: 100%; height: auto; display: block; }
.tray-shell { fill: var(--tray); }
.tray-floor { fill: var(--tray-floor); }
.cell .cell-bg { fill: var(--cell); stroke: var(--line); stroke-width: 1.5; }
.cell.off .cell-bg { fill: var(--cell-off); stroke-dasharray: 4 4; }
.cell.off .lure-body, .cell.off .lure-worm, .cell.off .lure-mark, .cell.off .lure-eye { opacity: 0.28; }
.cell.off .hook, .cell.off .lure-line { opacity: 0.35; }
.cell-name { font: 700 18px var(--sans); fill: var(--cell-ink); }
.cell-count { font: 600 15px var(--sans); fill: var(--cell-muted); }
.cell.on .cell-count { fill: var(--cell-ink); }
.lure-body { fill: var(--lure); stroke: var(--lure-line); stroke-width: 1.2; }
.lure-worm { fill: none; stroke: var(--lure); stroke-width: 5; stroke-linecap: round; }
.lure-mark { fill: var(--lure-mark); stroke: var(--lure-line); stroke-width: 1; }
.lure-eye { fill: var(--lure-line); }
.lure-line { fill: none; stroke: var(--lure-line); stroke-width: 1.4; stroke-linecap: round; }
.hook { fill: none; stroke: var(--hook); stroke-width: 2; stroke-linecap: round; }
.cell.on .cell-bg { stroke-width: 3; }
.c-fee .cell-bg { stroke: var(--b-fee-ink); } .c-flattery .cell-bg { stroke: var(--b-flattery-ink); } .c-urgency .cell-bg { stroke: var(--b-urgency-ink); }
.c-prestige .cell-bg { stroke: var(--b-prestige-ink); } .c-secrecy .cell-bg { stroke: var(--b-secrecy-ink); } .c-greeting .cell-bg { stroke: var(--b-greeting-ink); }
.c-sender .cell-bg { stroke: var(--b-sender-ink); } .c-other .cell-bg { stroke: var(--b-other-ink); }
.float-card { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; }
.float-verdict { margin: 6px 4px 2px; }
.float-verdict b { display: block; font-size: 1.15rem; }
.v-cut { color: var(--v-cut); } .v-check { color: var(--v-check); } .v-clear { color: var(--v-clear); } .v-none { color: var(--v-none); }
.water { fill: var(--water); }
.rod { stroke: var(--rod); stroke-width: 4; stroke-linecap: round; }
.line { fill: none; stroke: var(--line-c); stroke-width: 1.4; }
.line.under { stroke-dasharray: 3 3; }
.hook.under { stroke: var(--line-c); }
.float-top { fill: var(--float-top); stroke: var(--line-c); stroke-width: 1; }
.float-bot { fill: var(--float-bot); stroke: var(--line-c); stroke-width: 1; }
.ring { fill: none; stroke: var(--water-2); stroke-width: 2; }
.sc-ring { fill: none; stroke: var(--brass); stroke-width: 3; }
.sc-blade { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.lens { fill: rgba(255, 255, 255, 0.25); stroke: var(--brass); stroke-width: 3; }
.lens-handle { stroke: var(--brass); stroke-width: 5; stroke-linecap: round; }
.sub { font-size: 1.05rem; margin: 18px 0 6px; }
.current-host { max-width: 720px; margin: 0 auto; }
.river { fill: var(--river); }
.ripple { fill: none; stroke: var(--water-2); stroke-width: 1.5; }
.bank { fill: var(--bank); stroke: var(--paper-edge); }
.bank-name { font: 800 20px var(--sans); fill: var(--bank-ink); }
.bank-sub { font: 13px var(--sans); fill: var(--bank-ink); }
.flow { stroke-width: 4; fill: none; }
.flow.f-away { stroke: var(--f-away); } .flow.f-toward { stroke: var(--f-toward); } .flow.f-none { stroke: var(--f-none); stroke-dasharray: 8 8; }
.flow-head.f-away { fill: var(--f-away); } .flow-head.f-toward { fill: var(--f-toward); }
.coin { fill: var(--coin); stroke-width: 2.5; }
.coin.f-away { stroke: var(--f-away); } .coin.f-toward { stroke: var(--f-toward); }
.flow-note { font: italic 14px var(--sans); fill: var(--ink-2); }

/* Run */
.runrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
.gate { background: var(--note-bg); color: var(--note-ink); border-radius: 6px; padding: 8px 10px; margin: 10px 0 6px; }
.progress .steps { list-style: none; padding: 0; margin: 8px 0; }
.step { padding: 3px 0; color: var(--ink-2); }
.step.active { color: var(--ink); font-weight: 600; }
.step.done { color: var(--v-clear); }
.step-ic { display: inline-block; width: 1.2em; font-family: var(--mono); }
.raw { white-space: pre-wrap; overflow-wrap: anywhere; font: 0.8rem var(--mono); background: var(--bg); padding: 10px; border-radius: 6px; max-height: 420px; overflow: auto; }

/* The read */
.result { border-top: 6px solid var(--accent); }
.res-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.res-head h2 { margin: 0; font-size: 1.5rem; min-width: 0; }
.stamp { display: inline-flex; align-items: center; gap: 6px; font: 800 0.8rem var(--sans); text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 12px 5px 8px; border: 2px solid currentColor; border-radius: 999px; color: var(--v-none); }
.stamp::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(var(--float-top) 50%, var(--float-bot) 50%); box-shadow: 0 0 0 1px var(--line-c); }
.stamp.v-cut { color: var(--v-cut); } .stamp.v-check { color: var(--v-check); } .stamp.v-clear { color: var(--v-clear); }
.summary { font-size: 1.05rem; max-width: 820px; }
.result h3 { font-size: 1.1rem; margin: 18px 0 8px; }
.paidbox { background: var(--warn-bg); color: var(--warn-ink); border-radius: 10px; padding: 4px 14px 10px; border-left: 6px solid var(--v-cut); }
.paidbox h3 { margin: 10px 0 4px; }
.paidbox p { margin: 0; }
.lures { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lure-row { background: var(--bg); border-radius: 10px; padding: 8px 12px; border-left: 5px solid var(--b-other-ink); }
.lure-row q { display: block; font: italic 1rem var(--letter); quotes: "\201C" "\201D"; margin: 4px 0 2px; overflow-wrap: anywhere; }
.lure-row p { margin: 2px 0 0; }
.lures li.none, .verify li.none { background: none; border: 0; padding-left: 0; color: var(--ink-2); list-style: none; }
.tag { display: inline-block; font: 700 0.72rem var(--sans); text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 8px; border-radius: 999px; }
.t-fee { background: var(--b-fee); color: var(--b-fee-ink); } .l-fee { border-left-color: var(--b-fee-ink); }
.t-flattery { background: var(--b-flattery); color: var(--b-flattery-ink); } .l-flattery { border-left-color: var(--b-flattery-ink); }
.t-urgency { background: var(--b-urgency); color: var(--b-urgency-ink); } .l-urgency { border-left-color: var(--b-urgency-ink); }
.t-prestige { background: var(--b-prestige); color: var(--b-prestige-ink); } .l-prestige { border-left-color: var(--b-prestige-ink); }
.t-secrecy { background: var(--b-secrecy); color: var(--b-secrecy-ink); } .l-secrecy { border-left-color: var(--b-secrecy-ink); }
.t-greeting { background: var(--b-greeting); color: var(--b-greeting-ink); } .l-greeting { border-left-color: var(--b-greeting-ink); }
.t-sender { background: var(--b-sender); color: var(--b-sender-ink); } .l-sender { border-left-color: var(--b-sender-ink); }
.t-other { background: var(--b-other); color: var(--b-other-ink); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cols p { margin: 0 0 4px; }
.verify { margin: 0; padding-left: 1.4em; }
.verify li { margin: 0 0 6px; }
.draft { background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 6px; padding: 12px 16px; position: relative;
  background-image: repeating-linear-gradient(135deg, var(--float-top) 0 10px, transparent 10px 20px, var(--accent) 20px 30px, transparent 30px 40px); background-size: 100% 6px; background-repeat: no-repeat; padding-top: 18px; }
.draft-subj { margin: 0 0 8px; border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
.draft-body { white-space: pre-wrap; font: 1rem/1.6 var(--letter); margin: 0; overflow-wrap: anywhere; }
.recon { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.recon li { padding: 6px 10px; border-radius: 6px; font-size: 0.88rem; }
.recon li.warn { background: var(--warn-bg); color: var(--warn-ink); }
.recon li.note { background: var(--note-bg); color: var(--note-ink); }
.recon li.none { background: var(--ok-bg); color: var(--ok-ink); }
.exports, .cardrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* The logbook */
.logbook { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.logbook li.none { color: var(--ink-2); }
.hrow { display: flex; align-items: center; gap: 12px; background: var(--bg); border-radius: 10px; padding: 8px 10px; border: 1px solid var(--line); }
.hrow .mini { width: 34px; height: 34px; flex: none; border-radius: 6px; overflow: hidden; }
.hinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hinfo b { overflow-wrap: anywhere; }
.hbtns { display: flex; gap: 6px; flex-wrap: wrap; }

/* Footer, toasts */
.aboutbox p { max-width: 900px; }
.foot { max-width: 1180px; margin: 0 auto; padding: 8px 16px 40px; color: var(--ink-2); font-size: 0.86rem; }
.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 20; max-width: calc(100vw - 32px); }
.toast { background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 8px; font-size: 0.88rem; transition: opacity 0.5s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.toast.err { background: var(--warn-ink); color: var(--warn-bg); }
.toast a { color: inherit; }
.toast.gone { opacity: 0; }

@media (max-width: 860px) {
  .layout, .tray-row, .cols { grid-template-columns: minmax(0, 1fr); }
  .float-card { flex-direction: row; align-items: center; gap: 10px; }
  .float-host { width: 120px; flex: none; }
}
@media (max-width: 520px) {
  .bar { gap: 8px; }
  .bar .back { display: none; }
  .three { grid-template-columns: minmax(0, 1fr); }
  .letter { padding: 14px 12px 14px 26px; font-size: 0.95rem; }
  .letter::before { left: 13px; }
  .hrow { flex-wrap: wrap; }
}