/* Light Left - an old celestial atlas: cream laid paper with ink-navy type and gilt rules in the light theme, a night
 * plate of deep navy with cream type in the dark one. The star plate itself always stays a dark printed plate. */
:root {
  --bg: #efe7d5; --panel: #fbf7ec; --ink: #1d2740; --soft: #56607a; --line: #d6cbb1; --chip: #f4eddc;
  --acc: #1d3f7a; --acc-ink: #ffffff; --focus: #8a5a10; --field: #ffffff; --gilt: #9c6d1a; --gilt-ink: #6e4b0e;
  --plate: #0f1a33; --plate-line: #2c3a5e; --plate-ink: #f4ead2; --plate-soft: #8f9bb8; --plate-gilt: #e6b95c; --plate-never: #000814;
  --t-on: #1f5a3a; --t-on-bg: #dcefe2; --t-near: #6b4a05; --t-near-bg: #f6e8c2; --t-stand: #7a2a1a; --t-stand-bg: #f7ddd5; --t-coming: #2a3f7a; --t-coming-bg: #dfe5f6;
  --v-true: #1f5a3a; --v-mostly: #8a5a10; --v-stand: #7a2a1a; --v-ink: #ffffff;
  --warn-bg: #f6e8c2; --warn-ink: #5a3c03; --info-bg: #dfe5f6; --info-ink: #1d3366; --ok-bg: #dcefe2; --ok-ink: #1b4a2f; --err-bg: #f7ddd5; --err-ink: #6e2112;
  --shadow: 0 1px 0 rgba(30, 30, 60, .05), 0 6px 18px rgba(30, 30, 60, .1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b1222; --panel: #131c33; --ink: #efe6cf; --soft: #aab3c9; --line: #2b3655; --chip: #18223d;
  --acc: #e6b95c; --acc-ink: #1a1204; --focus: #9cc0ff; --field: #0f172b; --gilt: #e6b95c; --gilt-ink: #f0cd86;
  --t-on: #bfe8cf; --t-on-bg: #173726; --t-near: #ffe2a0; --t-near-bg: #3d2f0d; --t-stand: #ffcdbf; --t-stand-bg: #4a1f17; --t-coming: #cdd9ff; --t-coming-bg: #1f2c52;
  --v-true: #8fd6ab; --v-mostly: #f0c56b; --v-stand: #ff9f8a; --v-ink: #12100a;
  --warn-bg: #3d2f0d; --warn-ink: #ffe2a0; --info-bg: #1f2c52; --info-ink: #cdd9ff; --ok-bg: #173726; --ok-ink: #bfe8cf; --err-bg: #4a1f17; --err-ink: #ffcdbf;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background-color: var(--bg); background-image: repeating-linear-gradient(0deg, rgba(120, 100, 60, .05) 0 1px, transparent 1px 5px); color: var(--ink); font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow-x: hidden; }
:root[data-theme="dark"] body { background-image: radial-gradient(rgba(255, 240, 200, .16) .8px, transparent 1px); background-size: 23px 19px; }
a { color: var(--acc); }
h1, h2, h3, h4 { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; letter-spacing: .005em; }
.hidden { display: none !important; }
.small { font-size: .88rem; }
.muted { color: var(--soft); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.none { color: var(--soft); font-style: italic; }

/* Header */
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--panel); border-bottom: 2px solid var(--gilt); box-shadow: 0 3px 0 -1px var(--panel), 0 4px 0 -1px var(--gilt); }
.back { text-decoration: none; color: var(--soft); font-size: .92rem; white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.brand strong { font-family: Georgia, "Iowan Old Style", serif; font-size: 1.15rem; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo { width: 28px; height: 28px; flex: none; }
.lg-bg { fill: #0f1a33; stroke: var(--gilt); stroke-width: 1.2; }
.lg-ln { fill: none; stroke: #e6b95c; stroke-width: 1; stroke-dasharray: 2 1.5; }
.lg-st { fill: #f4ead2; }
.session { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* Controls */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: .88rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pill:hover { border-color: var(--acc); }
.pill.solid { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-weight: 600; }
.pill.solid:hover { filter: brightness(1.08); }
.pill.ghost { background: transparent; cursor: default; }
.pill.tiny { padding: 3px 10px; font-size: .8rem; }
.pill.big { padding: 10px 20px; font-size: 1rem; }
.pill:disabled { opacity: .5; cursor: not-allowed; }
.chip { padding: 5px 12px; border-radius: 4px; border: 1px solid var(--gilt); background: var(--chip); color: var(--ink); font: inherit; font-size: .86rem; cursor: pointer; font-family: Georgia, serif; }
.chip.on { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
input[type="text"], input[type="number"], input[type="date"], select, textarea { font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; max-width: 100%; min-width: 0; }
input[type="text"], input[type="number"], input[type="date"], select { min-height: 42px; width: 100%; }
textarea { width: 100%; line-height: 1.55; resize: vertical; min-height: 64px; }
input:focus-visible, select:focus-visible, textarea:focus, .pill:focus-visible, .chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.lbl { display: block; font-weight: 600; font-size: .9rem; margin: 12px 0 4px; }
.lbl .muted { font-weight: 400; }

/* Layout */
main { max-width: 1000px; margin: 0 auto; padding: 18px 16px 40px; }
.hero { padding: 10px 2px 6px; }
.kicker { font-size: .9rem; color: var(--soft); margin: 0 0 6px; border-left: 3px solid var(--gilt); padding-left: 10px; }
h1 { font-size: 2.4rem; line-height: 1.1; margin: 8px 0 10px; overflow-wrap: anywhere; letter-spacing: .03em; }
.h1b { display: block; font-size: 1.15rem; font-weight: 500; font-style: italic; color: var(--soft); margin-top: 6px; letter-spacing: 0; }
.lede { max-width: 760px; }
.samples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px; margin: 16px 0; box-shadow: var(--shadow); outline: 1px solid var(--line); outline-offset: -6px; }
.ph { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; margin: 0 0 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.step-no { font-family: Georgia, serif; font-weight: 700; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--gilt); color: var(--gilt-ink); font-size: .95rem; }
.free { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; background: var(--ok-bg); color: var(--ok-ink); padding: 2px 8px; border-radius: 3px; font-family: -apple-system, "Segoe UI", sans-serif; }
.note { background: var(--warn-bg); color: var(--warn-ink); padding: 6px 10px; border-radius: 4px; }
.sub { font-size: 1rem; margin: 14px 0 6px; }
.twocol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }

/* The people list */
.people { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 8px; }
.person { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--chip); }
.p-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #0f1a33; color: #f4ead2; font: 700 .9rem Georgia, serif; margin-top: 6px; box-shadow: 0 0 0 2px var(--gilt); }
.p-body { min-width: 0; display: grid; gap: 6px; }
.p-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1fr); gap: 6px; }
.p-rm { margin-top: 8px; }
select.p-star { font-size: .9rem; }

/* The plate, the ruler, the matches */
.platebox, .rulerbox { width: 100%; overflow: hidden; border-radius: 6px; }
.plate, .ruler { display: block; width: 100%; height: auto; }
.pl-bg, .ru-bg { fill: var(--plate); }
.pl-never { fill: var(--plate-never); opacity: .55; }
.pl-grid line { stroke: var(--plate-line); stroke-width: .5; }
.pl-grid line.eq { stroke-width: 1; }
.pl-ax, .ru-ax { fill: var(--plate-soft); font: 9px Georgia, serif; }
.st-b { fill: #a9c1ff; } .st-w { fill: #f4f1e6; } .st-yw { fill: #fbf0c8; } .st-y { fill: #ffe39a; } .st-o { fill: #ffc27a; } .st-r { fill: #ff9a6e; }
.pl-field .st { opacity: .75; }
.pl-line { fill: none; stroke: var(--plate-gilt); stroke-width: 1.3; stroke-dasharray: 5 4; }
.pl-mine .ring { fill: none; stroke: var(--plate-gilt); stroke-width: 1.4; }
.pl-mine.tag-near .ring { stroke-dasharray: 3 2; }
.pl-mine.tag-stand_in .ring { stroke-dasharray: 1.5 2.5; }
.pl-name { fill: var(--plate-ink); font: 600 11px Georgia, serif; }
.pl-star { fill: var(--plate-gilt); font: italic 10px Georgia, serif; }
.pl-coming { fill: var(--plate-gilt); font: italic 10px Georgia, serif; }
.ru-base { stroke: var(--plate-soft); stroke-width: 1; }
.ru-tick { stroke: var(--plate-soft); stroke-width: 1; }
.ru-pin { stroke: var(--plate-ink); stroke-width: 1; opacity: .7; }
.ru-head { fill: var(--plate-ink); }
.ru-name { fill: var(--plate-ink); font: 600 10px Georgia, serif; }
.ru-err { stroke: var(--plate-gilt); stroke-width: 2; }
.ru-star { fill: var(--plate-gilt); }
.ru-link { stroke: var(--plate-gilt); stroke-width: .8; stroke-dasharray: 2 2; opacity: .8; }
.ru-p.tag-still_coming .ru-head { fill: var(--plate-gilt); }
.matches { list-style: none; padding: 0; margin: 12px 0 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.match { border: 1px solid var(--line); border-left: 4px solid var(--gilt); border-radius: 4px; padding: 10px 12px; background: var(--chip); min-width: 0; }
.m-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.m-name { font-family: Georgia, serif; font-size: 1.05rem; overflow-wrap: anywhere; }
.m-line, .m-sky { margin: 6px 0 0; overflow-wrap: anywhere; }
.tag { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; white-space: nowrap; }
.tg-on_the_year { background: var(--t-on-bg); color: var(--t-on); }
.tg-near { background: var(--t-near-bg); color: var(--t-near); }
.tg-stand_in { background: var(--t-stand-bg); color: var(--t-stand); }
.tg-still_coming { background: var(--t-coming-bg); color: var(--t-coming); }
.exports { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.swipe { display: none; margin: 4px 0 0; }

/* Ask, progress, result */
.runrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.gate { background: var(--warn-bg); color: var(--warn-ink); padding: 8px 12px; border-radius: 4px; }
.gate .pill { margin-left: 6px; }
.steps { list-style: none; padding: 0; margin: 6px 0; }
.step { padding: 3px 0; color: var(--soft); }
.step.active { color: var(--ink); font-weight: 600; }
.step.done { color: var(--ok-ink); }
.step-ic { display: inline-block; width: 1.2em; font-family: ui-monospace, Menlo, monospace; }
.raw { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--chip); padding: 10px; border-radius: 4px; font-size: .82rem; }
.res-kick { text-transform: uppercase; letter-spacing: .1em; color: var(--soft); margin: 0 0 6px; }
.cardsheet { background: var(--plate); color: var(--plate-ink); border-radius: 6px; padding: 18px; border: 1px solid var(--plate-gilt); outline: 1px solid var(--plate-gilt); outline-offset: -8px; }
.cartouche { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--plate-gilt); padding-bottom: 8px; }
.cs-title { margin: 0; font-size: 1.4rem; letter-spacing: .04em; overflow-wrap: anywhere; min-width: 0; flex: 1 1 200px; color: var(--plate-ink); }
.cs-head { font-family: Georgia, serif; font-style: italic; color: var(--plate-gilt); margin: 10px 0; }
.cs-stars { list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cs-panel { border: 1px solid var(--plate-line); border-radius: 4px; padding: 10px 12px; min-width: 0; }
.cs-ph { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.cs-who { font-family: Georgia, serif; font-size: 1.05rem; }
.cs-star { color: var(--plate-gilt); font-style: italic; font-family: Georgia, serif; overflow-wrap: anywhere; }
.cardsheet .tg-on_the_year { background: #173726; color: #bfe8cf; } .cardsheet .tg-near { background: #3d2f0d; color: #ffe2a0; }
.cardsheet .tg-stand_in { background: #4a1f17; color: #ffcdbf; } .cardsheet .tg-still_coming { background: #1f2c52; color: #cdd9ff; }
.cs-cap { margin: 6px 0 0; overflow-wrap: anywhere; }
.cs-find { margin: 6px 0 0; color: var(--plate-soft); overflow-wrap: anywhere; }
.cs-foot { color: var(--plate-soft); border-top: 1px solid var(--plate-line); padding-top: 8px; overflow-wrap: anywhere; }
.cs-sky { font-family: Georgia, serif; font-style: italic; text-align: center; margin: 12px 0 4px; overflow-wrap: anywhere; }
.cardsheet .muted { color: var(--plate-soft); }
.cardsheet .note { background: #3d2f0d; color: #ffe2a0; }
.badge { font: 800 .78rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; padding: 5px 10px; border-radius: 3px; background: #8fd6ab; color: #12100a; white-space: nowrap; }
.badge.v-mostly_true { background: #f0c56b; } .badge.v-stand_ins { background: #ff9f8a; }
.recon { list-style: none; padding: 0; margin: 4px 0 8px; }
.recon li { padding: 6px 10px; border-radius: 4px; margin: 4px 0; font-size: .9rem; overflow-wrap: anywhere; }
.recon li.warn { background: var(--warn-bg); color: var(--warn-ink); }
.recon li.info { background: var(--info-bg); color: var(--info-ink); }
.recon li.none { background: var(--ok-bg); color: var(--ok-ink); font-style: normal; }
.cardrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }

/* Saved cards */
.saved { list-style: none; padding: 0; margin: 10px 0 0; }
.hrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.hrow.none { color: var(--soft); font-style: italic; }
.hdot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--line); }
.hdot.v-true_light { background: var(--v-true); } .hdot.v-mostly_true { background: var(--v-mostly); } .hdot.v-stand_ins { background: var(--v-stand); }
.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 */
.foot { max-width: 1000px; margin: 0 auto; padding: 10px 16px 40px; color: var(--soft); font-size: .88rem; }
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; max-width: calc(100vw - 32px); }
.toast { padding: 10px 14px; border-radius: 4px; box-shadow: var(--shadow); font-size: .9rem; transition: opacity .5s; }
.toast.ok { background: var(--ok-bg); color: var(--ok-ink); }
.toast.err { background: var(--err-bg); color: var(--err-ink); }
.toast.gone { opacity: 0; }
.toast a { color: inherit; font-weight: 700; }

@media (max-width: 560px) {
  .bar { padding: 8px 10px; gap: 8px; }
  .back-t { display: none; }
  .brand strong { font-size: 1rem; }
  .logo { width: 24px; height: 24px; }
  .session .pill { padding: 5px 10px; font-size: .82rem; }
  h1 { font-size: 1.9rem; }
  .panel { padding: 14px 12px; }
  .twocol { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .p-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .p-top .p-name { grid-column: 1 / -1; }
  .person { grid-template-columns: 28px minmax(0, 1fr); }
  .p-rm { grid-column: 2; justify-self: start; margin-top: 0; }
  select.p-star { font-size: .85rem; }
  .cardsheet { padding: 14px 12px; }
  .matches, .cs-stars { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .platebox, .rulerbox { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .plate { min-width: 640px; }
  .ruler { min-width: 560px; }
  .swipe { display: block; }
}
/* Print: the star plate, the ruler and the matches, plus the card's words when they answer the list on screen. Always on
 * light paper; the plate keeps its dark printed ground. */
@media print {
  :root, :root[data-theme="dark"] {
    --bg: #ffffff; --panel: #ffffff; --ink: #1d2740; --soft: #56607a; --line: #d6cbb1; --chip: #f4eddc;
    --acc: #1d3f7a; --acc-ink: #ffffff; --gilt: #9c6d1a; --gilt-ink: #6e4b0e;
    --t-on: #1f5a3a; --t-on-bg: #dcefe2; --t-near: #6b4a05; --t-near-bg: #f6e8c2; --t-stand: #7a2a1a; --t-stand-bg: #f7ddd5; --t-coming: #2a3f7a; --t-coming-bg: #dfe5f6;
    --v-true: #1f5a3a; --v-mostly: #8a5a10; --v-stand: #7a2a1a; --v-ink: #ffffff;
    --warn-bg: #f6e8c2; --warn-ink: #5a3c03; --info-bg: #dfe5f6; --info-ink: #1d3366;
    color-scheme: light;
  }
  body, :root[data-theme="dark"] body { background: #ffffff !important; background-image: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bar, .hero, .foot, .toasts, main > .panel:not(.board):not(#result), .exports, .swipe, #result h4, #rRecon, #rMeta, #result .cardrow, .res-kick { display: none !important; }
  body:not(.print-words) #result, .board > h2.ph { display: none !important; }
  main { max-width: none; padding: 0; }
  .panel { box-shadow: none; outline: 0; border: 0; padding: 0; margin: 0 0 12px; }
  .platebox, .rulerbox { overflow: visible; }
  .plate, .ruler { min-width: 0 !important; }
  .matches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .matches li, .cs-stars li { break-inside: avoid; }
  select { -webkit-appearance: none; appearance: none; border: 0; background: none; }
}