/* One Across - the puzzle page of a weekend paper: newsprint, black grid ink, editor's blue pencil, highlighter yellow. */
:root { --bg: #f3eee2; --panel: #fbf8f1; --ink: #1d1b18; --sub: #5d584e; --line: #d9cfbc; --accent: #1f5a87; --accent-ink: #ffffff; --good: #24704a; --good-ink: #ffffff;
  --cell: #ffffff; --hi: #fbe7a1; --here: #f2c53d; --bad-bg: #f6d2cc; --bad: #9b2416; --shown: #1f5a87; --solved: #dcefdc;
  --warn-bg: #f9e3df; --warn-ink: #8a2316; --info-bg: #e5eef6; --info-ink: #1c4a70; --shadow: 0 1px 0 #d9cfbc; color-scheme: light; }
:root[data-theme="dark"] { --bg: #121416; --panel: #1b1e22; --ink: #efe9dc; --sub: #bdb6a7; --line: #383e46; --accent: #86bde6; --accent-ink: #0d1620; --good: #79d39d; --good-ink: #0d1a12;
  --cell: #262a30; --hi: #4a4224; --here: #806821; --bad-bg: #4a2420; --bad: #ffb3a8; --shown: #9fcdf0; --solved: #1f3a28;
  --warn-bg: #3b201d; --warn-ink: #ffb8ad; --info-bg: #1b2a38; --info-ink: #acd2f2; --shadow: 0 1px 0 #0b0c0e; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x: hidden; }
a { color: var(--accent); }
h1, h2, h3, .ph, .rtitle, .kicker { font-family: Georgia, "Times New Roman", serif; }
.hidden { display: none !important; }
.vh { 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(--sub); } .mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--ink); box-shadow: 0 3px 0 -1px var(--line); }
.back { text-decoration: none; font-weight: 700; white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.brand strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; }
.logo { width: 26px; height: 26px; flex: none; }
.lg-a { fill: var(--cell); stroke: var(--ink); stroke-width: 1.4; } .lg-b { fill: none; stroke: var(--ink); stroke-width: 1.1; } .lg-c { fill: var(--ink); }
.session { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--ink); background: var(--panel); color: var(--ink); border-radius: 6px; padding: 6px 13px; font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.2; }
.pill:hover:not(:disabled) { background: var(--bg); }
.pill.solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pill.solid:hover:not(:disabled) { background: var(--accent); filter: brightness(1.1); }
.pill.ghost { border-color: var(--line); cursor: default; } .pill.tiny { padding: 3px 9px; font-size: 0.8rem; } .pill.big { padding: 10px 20px; font-size: 1.05rem; }
.pill:disabled { opacity: .45; cursor: not-allowed; }
main { max-width: 1080px; margin: 0 auto; padding: 8px 16px 32px; }
.hero { padding: 22px 0 6px; border-bottom: 3px double var(--ink); margin-bottom: 4px; }
.kicker { margin: 0; color: var(--accent); font-weight: 700; font-style: italic; font-size: 1rem; }
h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1; margin: 6px 0 10px; letter-spacing: -0.01em; }
.h1b { display: block; font-size: clamp(1rem, 2.6vw, 1.3rem); color: var(--sub); font-weight: 400; font-style: italic; margin-top: 8px; }
.lede { max-width: 64ch; margin: 0 0 12px; }
.samples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.chip { border: 1.5px dashed var(--sub); background: transparent; color: var(--ink); border-radius: 6px; padding: 5px 11px; font: inherit; font-size: .88rem; cursor: pointer; }
.chip.tiny { padding: 3px 9px; font-size: .8rem; letter-spacing: .04em; }
.chip.on { border-style: solid; border-color: var(--accent); background: var(--panel); color: var(--accent); font-weight: 700; }
.panel { background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--ink); border-radius: 4px; padding: 16px; margin: 18px 0; box-shadow: var(--shadow); }
.ph { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 1.3rem; margin: 0 0 12px; }
.step-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--ink); background: var(--cell); color: var(--ink); font: 700 .9rem system-ui, sans-serif; }
.free { font: 700 .7rem system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--good); border: 1.5px solid var(--good); border-radius: 4px; padding: 1px 7px; }
.fld { margin: 0 0 12px; } .lab { display: block; font-weight: 700; margin-bottom: 4px; } .lenshint { display: block; font-weight: 400; font-size: .84rem; color: var(--sub); }
.inp { width: 100%; font: inherit; color: var(--ink); background: var(--cell); border: 1.5px solid var(--line); border-radius: 4px; padding: 9px 12px; }
.inp:focus { outline: 3px solid var(--here); outline-offset: 1px; } .inp.drop { border-color: var(--good); border-style: dashed; }
textarea.inp { resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92rem; }
.twocol { display: grid; grid-template-columns: 1fr 240px; gap: 12px; }
.seg { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 6px; overflow: hidden; }
.segb { border: 0; background: var(--cell); color: var(--ink); font: inherit; font-weight: 600; padding: 8px 16px; cursor: pointer; }
.segb + .segb { border-left: 1.5px solid var(--ink); }
.segb.on { background: var(--ink); color: var(--bg); }
.cardrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.filebtn { cursor: pointer; }
.note { background: var(--info-bg); color: var(--info-ink); border-radius: 4px; padding: 8px 10px; }
.srcbadge { font: 700 .72rem system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; border-radius: 4px; padding: 2px 8px; background: var(--line); color: var(--ink); }
.srcbadge.on { background: var(--accent); color: var(--accent-ink); }
.leadrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; } .leadchips { display: flex; flex-wrap: wrap; gap: 6px; }
/* The grid: one input per square, sized to fit the column (and the phone). */
.playgrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 8px; }
.boardwrap { min-width: 0; }
.cluebar { min-height: 2.9em; margin: 0 0 10px; padding: 8px 10px; background: var(--hi); border-left: 4px solid var(--here); font-weight: 600; border-radius: 2px; }
.board { --cs: clamp(24px, calc((min(100vw, 1080px) - 120px) * .52 / var(--cols, 10)), 44px); display: grid; grid-template-columns: repeat(var(--cols, 10), var(--cs)); grid-auto-rows: var(--cs);
  padding: 10px; background-image: radial-gradient(var(--line) 1.2px, transparent 1.4px); background-size: var(--cs) var(--cs); background-position: 10px 10px; width: max-content; max-width: 100%; }
.boardempty { grid-column: 1 / -1; width: 260px; }
.void { width: var(--cs); height: var(--cs); }
.cell { position: relative; width: var(--cs); height: var(--cs); background: var(--cell); outline: 1.5px solid var(--ink); outline-offset: -0.75px; }
.cell .num { position: absolute; top: 1px; left: 3px; font-size: max(9px, calc(var(--cs) * .26)); line-height: 1; color: var(--sub); pointer-events: none; font-weight: 600; }
.cell input.ch { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; background: transparent; color: var(--ink); text-align: center; text-transform: uppercase;
  font: 700 max(16px, calc(var(--cs) * .5)) system-ui, sans-serif; padding: calc(var(--cs) * .14) 0 0; caret-color: transparent; border-radius: 0; cursor: pointer; }
.cell input.ch:focus { outline: none; }
.cell.inword { background: var(--hi); } .cell.here { background: var(--here); }
.cell.wrong { background: var(--bad-bg); } .cell.wrong input.ch { color: var(--bad); }
.cell.shown input.ch { color: var(--shown); }
.board.solved .cell { background: var(--solved); transition: background .4s; }
.cluecols { display: grid; grid-template-columns: 1fr; gap: 6px; min-width: 0; }
.clh { margin: 4px 0 6px; font-size: 1.05rem; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.clues { list-style: none; padding: 0; margin: 0 0 8px; }
.clue { display: flex; gap: 8px; padding: 4px 6px; border-radius: 2px; cursor: pointer; overflow-wrap: anywhere; }
.clue:hover { background: var(--bg); } .clue.on { background: var(--hi); }
.cn { min-width: 1.6em; text-align: right; }
.runrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gate { background: var(--warn-bg); color: var(--warn-ink); border-radius: 4px; padding: 8px 10px; }
.steps { list-style: none; padding: 0; margin: 8px 0; } .step { padding: 3px 0; color: var(--sub); } .step.done { color: var(--good); } .step.active { color: var(--ink); font-weight: 700; }
.step-ic { display: inline-block; width: 1.2em; font-family: ui-monospace, Menlo, monospace; }
.raw { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); padding: 10px; border-radius: 4px; max-height: 300px; overflow: auto; }
.res-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.res-kick { margin: 0; font-weight: 700; color: var(--sub); }
.badge { font: 700 .72rem system-ui, sans-serif; letter-spacing: .06em; border-radius: 4px; padding: 3px 9px; background: var(--line); color: var(--ink); }
.badge.on { background: var(--good); color: var(--good-ink); }
.rtitle { font-size: 1.5rem; margin: 12px 0 2px; overflow-wrap: anywhere; } .rintro { margin: 0 0 10px; font-style: italic; color: var(--sub); }
.rclues, .recon, .saved { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.rclue { border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; background: var(--bg); }
.rclue p { margin: 4px 0 0; overflow-wrap: anywhere; }
.rchead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .rchead b { letter-spacing: .06em; }
.pos { font-size: .8rem; color: var(--sub); }
.src { margin-left: auto; font: 700 .68rem system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; border-radius: 4px; padding: 1px 7px; border: 1px solid var(--line); color: var(--sub); }
.src.run { border-color: var(--accent); color: var(--accent); }
.fromnote { font-size: .8rem; }
.result h4 { margin: 16px 0 6px; font-family: Georgia, "Times New Roman", serif; }
.recon li { border-radius: 4px; padding: 6px 10px; } .recon .warn { background: var(--warn-bg); color: var(--warn-ink); } .recon .info { background: var(--info-bg); color: var(--info-ink); }
li.none { color: var(--sub); font-style: italic; list-style: none; }
.exports { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hrow { display: flex; justify-content: space-between; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; flex-wrap: wrap; }
.hinfo { display: flex; flex-direction: column; min-width: 0; } .hinfo b { overflow-wrap: anywhere; } .hbtns { display: flex; gap: 6px; }
.foot { max-width: 1080px; margin: 0 auto; padding: 16px 16px 40px; color: var(--sub); font-size: .88rem; border-top: 3px double var(--ink); }
.toasts { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); display: grid; gap: 6px; z-index: 20; width: min(92vw, 440px); }
.toast { background: var(--ink); color: var(--bg); padding: 9px 14px; border-radius: 4px; transition: opacity .5s; font-size: .92rem; }
.toast.err { background: var(--warn-ink); color: var(--bg); } .toast.ok { background: var(--good); color: var(--good-ink); } .toast a { color: inherit; font-weight: 700; } .toast.gone { opacity: 0; }
.printsheet { display: none; }
@media (max-width: 800px) { .playgrid { grid-template-columns: 1fr; } .twocol { grid-template-columns: 1fr; } .board { --cs: clamp(22px, calc((100vw - 74px) / var(--cols, 10)), 42px); } }
@media (max-width: 480px) { .back-t { display: none; } .bar { gap: 6px; padding: 8px 10px; } .session { gap: 4px; } .session .pill { padding: 5px 8px; font-size: .82rem; } .brand strong { font-size: .98rem; } .panel { padding: 13px; } .board { padding: 6px; } }
@media (prefers-reduced-motion: reduce) { .board.solved .cell { transition: none; } }
@media print {
  @page { margin: 14mm; }
  html, body { background: #fff; color: #000; }
  body > *:not(.printsheet) { display: none !important; }
  .printsheet { display: block; font-family: Georgia, "Times New Roman", serif; color: #000; }
  .printsheet h1 { font-size: 26pt; margin: 0 0 4pt; } .printsheet p { margin: 0 0 10pt; font-style: italic; }
  .pgrid svg { width: 100%; max-width: 15cm; max-height: 13cm; height: auto; display: block; margin: 0 auto 12pt; }
  .pclues { display: grid; grid-template-columns: 1fr 1fr; gap: 16pt; font-size: 11pt; } .pclues h2 { font-size: 13pt; margin: 0 0 4pt; border-bottom: 1px solid #000; }
  .pclues ol { list-style: none; padding: 0; margin: 0; } .pclues li { margin: 0 0 4pt; break-inside: avoid; }
  .pkey { margin-top: 18pt; transform: rotate(180deg); width: 5.5cm; margin-left: auto; font-size: 8pt; } .pkey p { margin: 0 0 2pt; font-style: normal; } .pkey svg { width: 100%; height: auto; }
}