/* Kin Chronicle - archival: cream paper with a faint linen weave, oxblood and
 * deep teal ink, a transitional serif for titles and dates, small-caps sans for
 * lane labels. Dark keeps the archive, by lamplight. */
:root {
  --paper: #f7f0df; --paper-2: #f1e8d3; --card: #fffcf4; --ink: #2b2118; --ink-2: #5a4834; --muted: #7d6b55; --rule: #d8c9aa; --rule-2: #e9dfc8;
  --ox: #7a2e2a; --ox-soft: rgba(122, 46, 42, .12); --teal: #1f5c5a; --teal-soft: rgba(31, 92, 90, .12); --gold: #8a6a2a; --warn: #a2601a; --bad: #b0302a;
  --lane-a: #fbf6ea; --lane-b: #f5eddb; --label-bg: #f1e7d0; --tab: #efe2c5; --tab-line: #c4ae86;
  --l0: #7a2e2a; --l1: #1f5c5a; --l2: #8a6a2a; --l3: #4a4a7a; --l4: #5f6f2f; --l5: #94466a; --l6: #2f6588; --l7: #7a5636;
  --serif: Baskerville, "Libre Baskerville", "Baskerville Old Face", "Iowan Old Style", "Hoefler Text", Georgia, "Times New Roman", serif;
  --sans: "Avenir Next", "Gill Sans", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --mono: "SF Mono", Menlo, Consolas, monospace;
  --shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 18px -12px rgba(60, 40, 20, .45);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #1c1712; --paper-2: #231d16; --card: #2a231b; --ink: #ece2cf; --ink-2: #cdbd9f; --muted: #a8977b; --rule: #4a3d2d; --rule-2: #3a3024;
  --ox: #d98a7c; --ox-soft: rgba(217, 138, 124, .16); --teal: #79bdb5; --teal-soft: rgba(121, 189, 181, .15); --gold: #d0ad62; --warn: #e2a256; --bad: #ee7d6f;
  --lane-a: #211b15; --lane-b: #261f18; --label-bg: #2b241b; --tab: #3a2f22; --tab-line: #6b5a41;
  --l0: #d98a7c; --l1: #79bdb5; --l2: #d0ad62; --l3: #a3a3db; --l4: #b2c26d; --l5: #dc8fb2; --l6: #82b8dc; --l7: #cfa27a;
  --shadow: 0 8px 22px -14px rgba(0, 0, 0, .8);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 15px/1.5 var(--serif); color: var(--ink);
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(120, 90, 50, .035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120, 90, 50, .03) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, .35), transparent 60%);
  min-height: 100vh;
}
:root[data-theme="dark"] body { background-image: repeating-linear-gradient(0deg, rgba(255, 230, 190, .025) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255, 230, 190, .02) 0 1px, transparent 1px 4px); }
a { color: var(--ox); }
.hidden { display: none !important; }
.mono { font-family: var(--mono); font-size: .82em; }
.hint { color: var(--muted); font-size: .86em; }
.none { color: var(--muted); font-style: italic; margin: .3em 0; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin: 0; }
h2 { font-size: 1.12rem; }
h3 { font-size: .78rem; font-family: var(--sans); font-variant: small-caps; letter-spacing: .08em; text-transform: lowercase; color: var(--ink-2); margin: 1.1em 0 .4em; font-weight: 600; }
h3 .hint { text-transform: none; letter-spacing: 0; font-variant: normal; font-weight: 400; }

/* buttons */
.btn { font: 600 .84rem var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: .42em .8em; cursor: pointer; line-height: 1.2; }
.btn:hover:not(:disabled) { border-color: var(--ox); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--ox); border-color: var(--ox); color: #fffaf0; }
:root[data-theme="dark"] .btn.primary { color: #1c1712; }
.btn.small { font-size: .78rem; padding: .3em .6em; }
.btn.quiet { background: transparent; border-color: transparent; }
.btn.quiet:hover:not(:disabled) { border-color: var(--rule); }
.btn.icon { min-width: 2.1em; padding-left: .45em; padding-right: .45em; }
.btn.danger { color: var(--bad); }
.btn.tool { background: transparent; border-color: transparent; font-weight: 600; }
.btn.tool:hover:not(:disabled) { background: var(--card); border-color: var(--rule); }
.btn.accent { color: var(--ox); }
.mini { font: 600 .74rem var(--sans); border: 1px solid var(--rule); background: var(--card); color: var(--ink-2); border-radius: 5px; padding: .15em .5em; cursor: pointer; }
.mini.no { color: var(--muted); }
.mini:hover { border-color: var(--ox); color: var(--ox); }
.linkish { background: none; border: 0; padding: 0; color: var(--ox); cursor: pointer; font: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.idlink { font: .72rem var(--mono); border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink-2); border-radius: 4px; padding: 0 .35em; margin: 0 .15em; cursor: pointer; }
.idlink:hover { border-color: var(--ox); color: var(--ox); }
input[type="text"], select, textarea {
  font: .92rem var(--serif); color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 5px; padding: .4em .55em; width: 100%;
}
input[type="text"]:focus, select:focus, textarea:focus, .btn:focus-visible, .scroller:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
input.bad { border-color: var(--bad); }
textarea { resize: vertical; }

/* header and toolbar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px 8px; border-bottom: 1px solid var(--rule); background: linear-gradient(var(--paper-2), transparent); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-width: 0; }
.mark { width: 30px; height: 30px; color: var(--ox); flex: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text strong { font: 600 1.22rem/1.1 var(--serif); letter-spacing: .01em; }
.doc-line { font: italic .86rem var(--serif); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.session { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.chip-link { font: 600 .8rem var(--sans); color: var(--ink-2); text-decoration: none; padding: .3em .55em; border-radius: 5px; }
.chip-link:hover { background: var(--card); }
.credits { font: 600 .8rem var(--mono); color: var(--teal); border: 1px solid var(--teal); border-radius: 999px; padding: .15em .6em; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--rule-2); flex-wrap: wrap; }
.tool-group, .zoom-group { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.sep { width: 1px; height: 20px; background: var(--rule); margin: 0 6px; }
.zq { display: inline-flex; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; margin-left: 6px; }
.zq button { font: 600 .74rem var(--sans); font-variant: small-caps; letter-spacing: .05em; background: var(--card); color: var(--ink-2); border: 0; border-right: 1px solid var(--rule); padding: .35em .6em; cursor: pointer; }
.zq button:last-child { border-right: 0; }
.zq button:hover { color: var(--ox); }
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 270px; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow); padding: 5px; display: flex; flex-direction: column; }
.mi { text-align: left; background: none; border: 0; padding: .5em .6em; border-radius: 5px; font: .9rem var(--serif); color: var(--ink); cursor: pointer; }
.mi small { display: block; color: var(--muted); font: .76rem var(--sans); }
.mi:hover { background: var(--ox-soft); }
.phone-tabs { display: none; }
.badge { font: 700 .66rem var(--sans); background: var(--ox); color: #fffaf0; border-radius: 999px; padding: 0 .45em; margin-left: .2em; }

/* workspace */
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 14px; padding: 12px 14px 4px; align-items: start; }
.stage { min-width: 0; }
.stage-frame { position: relative; border: 1px solid var(--rule); border-radius: 10px; background: var(--lane-a); box-shadow: var(--shadow); overflow: hidden; }
.scroller { height: calc(100vh - 250px); min-height: 380px; max-height: 900px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.axis { position: sticky; top: 0; z-index: 3; display: block; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.lanes { display: block; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.lanes.panning { cursor: grabbing; }
.empty-note { position: absolute; left: 200px; right: 20px; top: 110px; text-align: center; font-style: italic; color: var(--muted); pointer-events: none; }
.under { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.minimap { display: block; width: 100%; cursor: pointer; touch-action: none; }
.stage-hint { margin: 0; font: .75rem var(--sans); color: var(--muted); }
.vlist { display: none; }
.tray { margin-top: 10px; }
.tray h3 { margin-top: .4em; }
.count { font: 700 .72rem var(--sans); color: var(--ox); }
.undated { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.und { font: .84rem var(--serif); background: var(--card); border: 1px dashed var(--tab-line); border-radius: 6px; padding: .3em .6em; color: var(--ink); cursor: pointer; text-align: left; }
.und.sel, .und:hover { border-color: var(--ox); }
.und-lane { font: 600 .7rem var(--sans); font-variant: small-caps; letter-spacing: .06em; color: var(--ox); }

/* the SVG timeline */
.lane-bg { fill: var(--lane-a); }
.lane-bg.odd { fill: var(--lane-b); }
.era { fill: var(--l0); opacity: .055; }
.era.e1 { fill: var(--l1); } .era.e2 { fill: var(--l2); } .era.e3 { fill: var(--l3); }
.grid { stroke: var(--rule); stroke-width: 1; }
.grid.minor { stroke: var(--rule-2); }
.gap { fill: url(#hatch); opacity: .6; }
.hatch-line { stroke: var(--tab-line); stroke-width: 1.6; opacity: .7; }
.cov-track { fill: var(--rule-2); }
.cov-seg { fill: var(--l0); opacity: .75; }
.bar.span { fill: var(--ink-2); opacity: .75; }
.bar.fuzzy { fill: var(--ox); opacity: .14; }
.bar.open { opacity: .55; }
.fade-0 { stop-color: var(--ox); stop-opacity: 0; }
.fade-1 { stop-color: var(--ox); stop-opacity: .4; }
.ev { cursor: grab; }
.ev .tab { fill: var(--tab); stroke: var(--tab-line); stroke-width: .8; }
.ev .tab-t { font: 600 9.6px var(--serif); fill: var(--ink-2); letter-spacing: .01em; }
.ev .card { fill: var(--card); stroke: var(--tab-line); stroke-width: 1; }
.ev .stripe { fill: var(--l0); }
.ev .card-t { font: 11.6px var(--serif); fill: var(--ink); }
.ev:hover .card { stroke: var(--ox); }
.ev.sel .card { stroke: var(--ox); stroke-width: 2; }
.ev.hl .card { stroke: var(--teal); stroke-width: 2.4; }
.ev.dragging { cursor: grabbing; opacity: .92; }
.ev.dragging .tab { fill: var(--ox); }
.ev.dragging .tab-t { fill: #fffaf0; }
.ev.ctx .card { stroke-dasharray: 3 2; fill: var(--paper-2); }
.ev.ctx .card-t { font-style: italic; fill: var(--muted); }
.ev.ghost { cursor: default; opacity: .9; }
.ev.ghost .card { fill: transparent; stroke: var(--teal); stroke-dasharray: 4 3; stroke-width: 1.3; }
.ev.ghost .tab { fill: var(--teal-soft); stroke: var(--teal); stroke-dasharray: 3 2; }
.ev.ghost .tab-t { fill: var(--teal); font-style: italic; }
.ev.ghost .card-t { fill: var(--teal); font-style: italic; }
.ev.ghost .stripe { fill: var(--teal); opacity: .5; }
.gbtn { cursor: pointer; }
.gbtn rect { fill: var(--card); stroke: var(--teal); }
.gbtn text { font: 700 11px var(--sans); text-anchor: middle; fill: var(--teal); }
.gbtn.no rect { stroke: var(--rule); } .gbtn.no text { fill: var(--muted); }
.gbtn:hover rect { fill: var(--teal-soft); }
.ph-ring { fill: none; stroke: var(--ink-2); stroke-width: .8; }
.flagdot { fill: var(--warn); }
.ev.flag-conflict .flagdot { fill: var(--bad); }
.ev.flag-conflict .card { stroke: var(--bad); }
.qm { cursor: pointer; }
.qm circle { fill: var(--ox); stroke: var(--card); stroke-width: 1.5; }
.qm text { fill: #fffaf0; font: 700 11px var(--serif); text-anchor: middle; pointer-events: none; }
:root[data-theme="dark"] .qm text { fill: #1c1712; }
.qm-br { fill: none; stroke: var(--ox); stroke-width: 1.3; stroke-dasharray: 3 2; }
.qm.done circle { fill: var(--teal); } .qm.done .qm-br { stroke: var(--teal); }
.qm.sel circle { stroke: var(--ink); stroke-width: 2.5; }
.today { stroke: var(--teal); stroke-dasharray: 4 3; stroke-width: 1.2; }
.lane-label { cursor: pointer; }
.ll-bg { fill: var(--label-bg); }
.lane-label.sel .ll-bg { fill: var(--ox-soft); }
.lane-label.virtual .ll-name { fill: var(--teal); font-style: italic; }
.ll-name { font: 600 12.6px var(--sans); font-variant: small-caps; letter-spacing: .05em; fill: var(--ink); }
.ll-sub { font: italic 10.8px var(--serif); fill: var(--muted); }
.ll-cov { font: 10px var(--sans); fill: var(--muted); letter-spacing: .03em; }
.ll-mark { fill: var(--l0); }
.lane-sep { stroke: var(--rule); }
.label-edge { stroke: var(--tab-line); }
.l1 .stripe, .ll-mark.l1, .cov-seg.l1 { fill: var(--l1); } .l2 .stripe, .ll-mark.l2, .cov-seg.l2 { fill: var(--l2); }
.l3 .stripe, .ll-mark.l3, .cov-seg.l3 { fill: var(--l3); } .l4 .stripe, .ll-mark.l4, .cov-seg.l4 { fill: var(--l4); }
.l5 .stripe, .ll-mark.l5, .cov-seg.l5 { fill: var(--l5); } .l6 .stripe, .ll-mark.l6, .cov-seg.l6 { fill: var(--l6); }
.l7 .stripe, .ll-mark.l7, .cov-seg.l7 { fill: var(--l7); }
.era-band { fill: var(--l0); opacity: .14; } .era-band.e1 { fill: var(--l1); } .era-band.e2 { fill: var(--l2); } .era-band.e3 { fill: var(--l3); }
.era-t { font: italic 10.6px var(--serif); fill: var(--ink-2); }
.tick { stroke: var(--ink-2); opacity: .7; } .tick.minor { stroke: var(--tab-line); }
.tick-t { font: 11.5px var(--serif); fill: var(--ink-2); }
.today-t { font: 9.5px var(--sans); fill: var(--teal); }
.ax-step { font: 600 10.5px var(--sans); font-variant: small-caps; letter-spacing: .06em; fill: var(--ink-2); }
.ax-zoom { font: 10px var(--sans); fill: var(--muted); }
.mm-bg { fill: var(--paper-2); stroke: var(--rule); }
.mm-lane { stroke: var(--rule-2); }
.mm-ev { fill: var(--l0); opacity: .7; }
.mm-ev.l1 { fill: var(--l1); } .mm-ev.l2 { fill: var(--l2); } .mm-ev.l3 { fill: var(--l3); } .mm-ev.l4 { fill: var(--l4); } .mm-ev.l5 { fill: var(--l5); } .mm-ev.l6 { fill: var(--l6); } .mm-ev.l7 { fill: var(--l7); }
.mm-win { fill: var(--ox-soft); stroke: var(--ox); stroke-width: 1.4; }

/* side panel */
.side { position: sticky; top: 8px; max-height: calc(100vh - 24px); overflow-y: auto; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow); }
.side-tabs { display: flex; position: sticky; top: 0; z-index: 2; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.stab { flex: 1; font: 600 .76rem var(--sans); font-variant: small-caps; letter-spacing: .06em; background: none; border: 0; border-bottom: 2px solid transparent; padding: .7em .3em; color: var(--muted); cursor: pointer; }
.stab[aria-selected="true"] { color: var(--ox); border-bottom-color: var(--ox); }
.pane { padding: 12px 14px 16px; }
.pane h2 { display: flex; align-items: baseline; gap: 8px; }
.free, .paid { font: 700 .62rem var(--sans); text-transform: uppercase; letter-spacing: .1em; border-radius: 3px; padding: .1em .45em; }
.free { color: var(--teal); border: 1px solid var(--teal); }
.paid { color: var(--ox); border: 1px solid var(--ox); }
.form { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.lbl { font: 600 .7rem var(--sans); font-variant: small-caps; letter-spacing: .07em; text-transform: lowercase; color: var(--ink-2); margin-top: 6px; display: block; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.date-note { margin: 2px 0 0; font: italic .8rem var(--serif); color: var(--muted); }
.date-note.ok { color: var(--teal); } .date-note.bad { color: var(--bad); }
.lanes-pick { border: 0; padding: 0; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font: .78rem var(--sans); border: 1px solid var(--rule); background: var(--paper); color: var(--muted); border-radius: 999px; padding: .2em .65em; cursor: pointer; }
.chip.on { color: var(--ink); border-color: var(--l0); background: var(--ox-soft); font-weight: 600; }
.chip.on.l1 { border-color: var(--l1); background: var(--teal-soft); }
.photo-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.photo-slot { width: 64px; height: 64px; border-radius: 12px; border: 1px solid var(--tab-line); background: var(--paper-2); overflow: hidden; display: inline-block; }
.photo-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctx-note { font: italic .82rem var(--serif); color: var(--teal); border-left: 3px solid var(--teal); padding-left: 8px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.lane-list, .era-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lane-row { border: 1px solid var(--rule-2); border-left: 4px solid var(--l0); border-radius: 6px; padding: 6px; background: var(--paper); }
.lane-row.l1 { border-left-color: var(--l1); } .lane-row.l2 { border-left-color: var(--l2); } .lane-row.l3 { border-left-color: var(--l3); }
.lane-row.l4 { border-left-color: var(--l4); } .lane-row.l5 { border-left-color: var(--l5); } .lane-row.l6 { border-left-color: var(--l6); } .lane-row.l7 { border-left-color: var(--l7); }
.lane-row.sel { box-shadow: 0 0 0 2px var(--ox-soft); }
.lr-top, .lr-bot, .era-row { display: flex; gap: 5px; align-items: center; }
.lr-bot { margin-top: 5px; }
.lr-top input { flex: 2; } .lr-top select { flex: 1; } .lr-bot select { flex: 1; font-size: .8rem; }
.lr-id { color: var(--muted); }
.era-row input:first-child { flex: 1.3; } .era-row input:nth-child(2) { flex: 1; }
.add-row { display: flex; gap: 6px; margin-top: 8px; }
.add-row input { flex: 2; } .add-row select { flex: 1; }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .88rem; }
.check-list li { padding: 6px 8px; border-radius: 6px; background: var(--paper); border: 1px solid var(--rule-2); }
.check-list li.none { background: none; border: 0; padding: 0; }
.check-list li.conflict { border-left: 3px solid var(--bad); }
.check-list li.check { border-left: 3px solid var(--warn); }
.lvl { font: 700 .62rem var(--sans); text-transform: uppercase; letter-spacing: .08em; border-radius: 3px; padding: .05em .4em; margin-right: 4px; }
.lvl.conflict { color: var(--bad); border: 1px solid var(--bad); } .lvl.check, .lvl.lead { color: var(--warn); border: 1px solid var(--warn); }
.cov-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cov-list li { display: grid; grid-template-columns: 9em 1fr 3em; gap: 8px; align-items: center; font-size: .82rem; }
.cv-name { font: 600 .78rem var(--sans); font-variant: small-caps; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-bar { height: 6px; background: var(--rule-2); border-radius: 3px; overflow: hidden; }
.cv-fill { display: block; height: 100%; background: var(--l0); }
.cov-list .l1 .cv-fill { background: var(--l1); } .cov-list .l2 .cv-fill { background: var(--l2); } .cov-list .l3 .cv-fill { background: var(--l3); }
.cov-list .l4 .cv-fill { background: var(--l4); } .cov-list .l5 .cv-fill { background: var(--l5); } .cov-list .l6 .cv-fill { background: var(--l6); } .cov-list .l7 .cv-fill { background: var(--l7); }
.cv-pct { font: .76rem var(--mono); color: var(--muted); text-align: right; }

/* the question pass */
.run-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; }
.meter { font: .8rem var(--sans); color: var(--muted); margin: 4px 0; }
.gate, .replay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: .84rem var(--serif); background: var(--paper); border: 1px dashed var(--tab-line); border-radius: 6px; padding: 7px 9px; margin: 6px 0; }
.replay { border-color: var(--teal); }
.progress { border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; margin: 8px 0; background: var(--paper); }
.pg-top { display: flex; justify-content: space-between; font-size: .88rem; }
.pg-steps { margin: 6px 0 0; padding-left: 1.2em; font: .82rem var(--sans); color: var(--muted); }
.pg-steps li.done { color: var(--teal); } .pg-steps li.now { color: var(--ox); font-weight: 600; }
.summary { font-style: italic; border-left: 3px solid var(--ox); padding-left: 10px; margin: 8px 0; }
.q-group h4 { font: 600 .82rem var(--sans); font-variant: small-caps; letter-spacing: .06em; margin: 10px 0 4px; color: var(--ox); }
.q-row, .x-row, .c-row { border: 1px solid var(--rule-2); border-radius: 7px; padding: 7px 9px; margin: 6px 0; background: var(--paper); }
.q-row.sel { box-shadow: 0 0 0 2px var(--ox); }
.q-row.answered { border-left: 3px solid var(--teal); opacity: .85; }
.c-row { border-style: dashed; border-color: var(--teal); }
.c-row.accepted, .c-row.dismissed { opacity: .6; }
.q-top, .x-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: .74rem var(--sans); color: var(--muted); }
.q-id { color: var(--ink-2); }
.q-ask { font-variant: small-caps; letter-spacing: .05em; }
.q-ask.record { color: var(--teal); } .q-ask.relative { color: var(--ox); }
.q-range, .scope, .lane-name { font-family: var(--serif); font-style: italic; }
.st { font: 700 .62rem var(--sans); text-transform: uppercase; letter-spacing: .07em; border: 1px solid currentColor; border-radius: 3px; padding: 0 .35em; }
.st.answered { color: var(--teal); } .st.open { color: var(--warn); } .st.new { color: var(--ox); }
.q-text { margin: 4px 0 2px; font-size: .95rem; }
.c-title { margin: 4px 0 2px; font-style: italic; color: var(--teal); }
.q-why, .q-hint { margin: 2px 0; font-size: .82rem; color: var(--ink-2); }
.acts { display: flex; gap: 6px; margin-top: 6px; align-items: center; flex-wrap: wrap; }
.state { font: italic .8rem var(--serif); color: var(--muted); }
.res-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; }
.notes { margin: 0; padding-left: 1.1em; font-size: .82rem; }
.notes li.warn { color: var(--warn); } .notes li.info { color: var(--muted); }
.notes-warn { color: var(--warn); }

/* footer, dialogs, toasts */
.foot { padding: 14px 18px 24px; font-size: .82rem; color: var(--muted); border-top: 1px solid var(--rule-2); margin-top: 14px; }
.foot p { margin: .3em 0; }
.dlg { border: 1px solid var(--rule); border-radius: 10px; padding: 0; background: var(--card); color: var(--ink); width: min(620px, calc(100vw - 32px)); box-shadow: var(--shadow); }
.dlg::backdrop { background: rgba(30, 20, 10, .35); }
.dlg-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.dlg-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dlg-row.end { justify-content: flex-end; }
.drop { border: 2px dashed transparent; border-radius: 8px; }
.drop.over { border-color: var(--teal); }
.drop textarea { font: .82rem var(--mono); }
.history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.history li { display: flex; gap: 6px; }
.h-open { flex: 1; text-align: left; background: var(--paper); border: 1px solid var(--rule-2); border-radius: 6px; padding: .5em .7em; cursor: pointer; font: .92rem var(--serif); color: var(--ink); display: flex; flex-direction: column; }
.h-open.cur { border-color: var(--ox); }
.h-sub { font: .74rem var(--sans); color: var(--muted); }
.h-del { background: none; border: 1px solid var(--rule-2); border-radius: 6px; color: var(--muted); cursor: pointer; }
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 6px; z-index: 50; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--teal); border-radius: 7px; padding: .55em .8em; font-size: .86rem; box-shadow: var(--shadow); transition: opacity .5s; }
.toast.warn { border-left-color: var(--warn); } .toast.err { border-left-color: var(--bad); }
.toast a { margin-left: .5em; }
.toast.gone { opacity: 0; }
.print-area { display: none; }

/* tablets: the side panel drops below the stage */
@media (max-width: 1100px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; max-height: none; }
  .scroller { height: 60vh; }
}

/* phones: the timeline becomes a vertical list per lane with a sticky year rail */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .topbar { padding: 8px 16px; flex-wrap: wrap; }
  .doc-line { max-width: 60vw; }
  .chip-link#home { display: none; }
  .toolbar { padding: 4px 16px; }
  .zoom-group, .sep { display: none; }
  .tool-group { gap: 0; }
  .btn.tool { padding: .4em .5em; font-size: .8rem; }
  .menu-pop { min-width: 0; width: calc(100vw - 32px); position: fixed; left: 16px; top: auto; }
  .phone-tabs { display: flex; position: sticky; top: 0; z-index: 20; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
  .ptab { flex: 1; font: 600 .8rem var(--sans); font-variant: small-caps; letter-spacing: .06em; background: none; border: 0; border-bottom: 2px solid transparent; padding: .7em .2em; color: var(--muted); cursor: pointer; }
  .ptab[aria-selected="true"] { color: var(--ox); border-bottom-color: var(--ox); }
  .workspace { padding: 10px 16px 4px; gap: 10px; }
  .stage-frame, .under { display: none; }
  .vlist { display: block; }
  .side-tabs { display: none; }
  body[data-tab="checks"] .stage, body[data-tab="ask"] .stage { display: none; }
  .row2 { grid-template-columns: 1fr; }
  .cov-list li { grid-template-columns: 7em 1fr 3em; }
  .foot { padding: 12px 16px 20px; }
}
.vl-lane { margin: 0 0 14px; border: 1px solid var(--rule); border-left: 4px solid var(--l0); border-radius: 8px; background: var(--lane-a); }
.vl-lane.l1 { border-left-color: var(--l1); } .vl-lane.l2 { border-left-color: var(--l2); } .vl-lane.l3 { border-left-color: var(--l3); }
.vl-lane.l4 { border-left-color: var(--l4); } .vl-lane.l5 { border-left-color: var(--l5); } .vl-lane.l6 { border-left-color: var(--l6); } .vl-lane.l7 { border-left-color: var(--l7); }
.vl-head { display: flex; flex-direction: column; padding: 8px 10px; margin: 0; font: 600 .95rem var(--sans); font-variant: small-caps; letter-spacing: .05em; text-transform: none; color: var(--ink); background: var(--label-bg); border-radius: 8px 8px 0 0; }
.vl-head small { font: italic .78rem var(--serif); color: var(--muted); letter-spacing: 0; font-variant: normal; }
.vl-years { list-style: none; margin: 0; padding: 0 8px 8px 0; }
.vl-year { display: grid; grid-template-columns: 3.6em 1fr; align-items: start; border-top: 1px solid var(--rule-2); }
.vl-yr { position: sticky; top: 44px; padding: 8px 6px; font: 600 .9rem var(--serif); color: var(--ox); text-align: right; background: linear-gradient(var(--lane-a) 70%, transparent); }
.vl-evs { list-style: none; margin: 0; padding: 6px 0; display: flex; flex-direction: column; gap: 5px; }
.vl-ev { width: 100%; text-align: left; background: var(--card); border: 1px solid var(--tab-line); border-radius: 6px; padding: 6px 8px; cursor: pointer; color: var(--ink); display: flex; flex-direction: column; font: .9rem var(--serif); }
.vl-ev.sel { border-color: var(--ox); box-shadow: 0 0 0 1px var(--ox); }
.vl-ev.flag-conflict { border-color: var(--bad); }
.vl-ev.ctx { border-style: dashed; color: var(--muted); font-style: italic; }
.vl-date { font: 600 .74rem var(--serif); color: var(--ink-2); }
.vl-place { font: .76rem var(--sans); color: var(--muted); }
.vl-ghost { border: 1px dashed var(--teal); border-radius: 6px; padding: 6px 8px; color: var(--teal); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-style: italic; }
.vl-ghost .vl-date { color: var(--teal); width: 100%; }
.vl-q .vl-qb { width: 100%; text-align: left; background: var(--ox-soft); border: 1px dashed var(--ox); border-radius: 6px; padding: 6px 8px; color: var(--ox); font: .86rem var(--serif); cursor: pointer; }
.vl-q.done .vl-qb { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }

/* the printable poster: landscape, the timeline across the sheet, questions below */
@media print {
  @page { size: landscape; margin: 9mm; }
  body { background: #fff; color: #000; }
  body > *:not(.print-area) { display: none !important; }
  .print-area { display: block !important; }
  .pr-head h1 { font: 600 20pt Georgia, serif; margin: 0 0 2pt; }
  .pr-head p { font: 9pt Helvetica, Arial, sans-serif; color: #555; margin: 0 0 6pt; }
  .pr-svg svg { width: 100%; height: auto; display: block; }
  .pr-qs { columns: 3; column-gap: 8mm; font: 8.5pt Georgia, serif; margin-top: 6pt; }
  .pr-qs section { break-inside: avoid; }
  .pr-qs h2 { font: 600 9pt Helvetica, Arial, sans-serif; font-variant: small-caps; letter-spacing: .05em; margin: 4pt 0 2pt; }
  .pr-qs ol { margin: 0; padding-left: 12pt; }
}