/* Table Truce - a linen tablecloth, cranberry and sage, gold for the good china. Light and dark share one token set. */
:root {
  --bg: #f6f1e7; --weave: rgba(120, 90, 50, .05); --card: #fffcf6; --ink: #2a2328; --muted: #6c6268; --line: #e2d7c6; --line2: #cdbfa9;
  --accent: #9b2242; --accent-ink: #fff; --accent-soft: #f6dde3;
  --sage: #4f7a5a; --sage-soft: #dcebdf; --sage-ink: #fff; --gold: #b07c1f; --gold-soft: #f5e8cc;
  --high: #c0283f; --high-soft: #f9d9de; --medium: #c9701a; --medium-soft: #fbe6cf; --low: #8a7a2a; --low-soft: #f1ecc9;
  --ok: #2f7a45; --ok-soft: #dcefe0; --warn: #9a5b00; --warn-soft: #fbecd2; --bad: #b3261e; --bad-soft: #f9dcd9;
  --table: #e9dcc6; --table-edge: #c9b393; --plate: #fffdf9; --plate-edge: #d6c8b2;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --shadow: 0 1px 0 rgba(80, 40, 30, .06), 0 10px 24px -16px rgba(80, 40, 30, .35);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #18141a; --weave: rgba(255, 255, 255, .025); --card: #221c24; --ink: #efe6ea; --muted: #b0a3aa; --line: #3a313c; --line2: #514553;
    --accent: #e7577a; --accent-ink: #1a0f13; --accent-soft: #3c1a25;
    --sage: #86bf92; --sage-soft: #1d3324; --sage-ink: #10241a; --gold: #e2b357; --gold-soft: #3a2d14;
    --high: #ff6b80; --high-soft: #44202a; --medium: #f2a052; --medium-soft: #3f2a17; --low: #d8c66a; --low-soft: #35301a;
    --ok: #7fd09a; --ok-soft: #1a3324; --warn: #f2c063; --warn-soft: #3a2c13; --bad: #ff8077; --bad-soft: #3f1d1b;
    --table: #3a2f35; --table-edge: #5b4a52; --plate: #2b242d; --plate-edge: #5a4d58;
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 10px 24px -14px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #18141a; --weave: rgba(255, 255, 255, .025); --card: #221c24; --ink: #efe6ea; --muted: #b0a3aa; --line: #3a313c; --line2: #514553;
  --accent: #e7577a; --accent-ink: #1a0f13; --accent-soft: #3c1a25;
  --sage: #86bf92; --sage-soft: #1d3324; --sage-ink: #10241a; --gold: #e2b357; --gold-soft: #3a2d14;
  --high: #ff6b80; --high-soft: #44202a; --medium: #f2a052; --medium-soft: #3f2a17; --low: #d8c66a; --low-soft: #35301a;
  --ok: #7fd09a; --ok-soft: #1a3324; --warn: #f2c063; --warn-soft: #3a2c13; --bad: #ff8077; --bad-soft: #3f1d1b;
  --table: #3a2f35; --table-edge: #5b4a52; --plate: #2b242d; --plate-edge: #5a4d58;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 10px 24px -14px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 16px/1.55 var(--sans); color: var(--ink); background-color: var(--bg);
  background-image: repeating-linear-gradient(0deg, var(--weave) 0 2px, transparent 2px 7px), repeating-linear-gradient(90deg, var(--weave) 0 2px, transparent 2px 7px);
}
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.mono { font-family: var(--mono); }
.warn { color: var(--warn); }

/* Header */
.bar { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--card) 88%, transparent); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(6px); flex-wrap: wrap; }
.back { color: var(--muted); text-decoration: none; font-size: .9rem; }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 1.2rem; margin-right: auto; }
.logo { width: 28px; height: 28px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
.session { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line2); background: var(--card); border-radius: 999px; padding: 6px 14px; cursor: pointer; text-decoration: none; color: var(--ink); font-size: .92rem; line-height: 1.2; }
.pill:hover:not(:disabled) { border-color: var(--accent); }
.pill.solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pill.solid:hover:not(:disabled) { filter: brightness(1.08); color: var(--accent-ink); }
.pill.ghost { border-style: dashed; cursor: default; }
.pill.tiny { padding: 2px 10px; font-size: .8rem; }
.pill.big { padding: 10px 22px; font-size: 1rem; }
.pill:disabled { opacity: .5; cursor: not-allowed; }

/* Page */
.wrap { max-width: 1180px; margin: 0 auto; padding: 18px 20px 40px; }
.hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.15; margin: 14px 0 8px; letter-spacing: -.01em; }
.hero h1 em { color: var(--accent); font-style: italic; }
.lede { max-width: 760px; margin: 0 0 12px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.chips-label { font-size: .86rem; color: var(--muted); }
.chip { border: 1px solid var(--line2); background: var(--card); border-radius: 8px; padding: 5px 12px; cursor: pointer; font-size: .9rem; }
.chip.on { background: var(--gold-soft); border-color: var(--gold); }
.grid { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); margin-bottom: 18px; min-width: 0; }
.card h2 { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.card h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 8px; display: flex; align-items: center; gap: 10px; }
.num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--sans); font-size: .85rem; font-weight: 700; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.row2 { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; }
.lbl, label { font-size: .88rem; font-weight: 600; }
label select { display: block; margin-top: 4px; }
textarea, input[type="text"], select { width: 100%; border: 1px solid var(--line2); border-radius: 10px; padding: 9px 11px; background: var(--plate); }
select { width: auto; min-width: 70px; }
textarea { resize: vertical; font-family: var(--mono); font-size: .88rem; line-height: 1.5; }
textarea:focus, input:focus, select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; margin-top: 4px; }
.segbtn { border: 0; background: var(--plate); padding: 7px 16px; cursor: pointer; }
.segbtn.on { background: var(--sage); color: var(--sage-ink); }
.drop { border: 1px dashed transparent; border-radius: 12px; }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; margin-top: 4px; }
.filebtn { color: var(--accent); cursor: pointer; font-size: .86rem; font-weight: 600; text-decoration: underline; }
.filebtn input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.legend b { font-family: var(--mono); font-weight: 600; padding: 0 4px; border-radius: 4px; }
.k-feud { background: var(--high-soft); color: var(--high); }
.k-together { background: var(--sage-soft); color: var(--sage); }
.k-likes { background: var(--gold-soft); color: var(--gold); }
.notes { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.notes li { padding: 6px 10px; border-radius: 8px; font-size: .88rem; }
.notes li.warn { background: var(--warn-soft); color: var(--warn); }
.notes li.bad { background: var(--bad-soft); color: var(--bad); }
.notes li.ok { background: var(--ok-soft); color: var(--ok); }

/* The table */
.table-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.table-head h2 { margin: 0; }
.tools { display: flex; gap: 8px; flex-wrap: wrap; }
.hint { margin: 8px 0 4px; }
.svgwrap { width: 100%; overflow-x: auto; border-radius: 12px; background: color-mix(in srgb, var(--bg) 60%, var(--card)); border: 1px solid var(--line); padding: 6px; }
#tableSvg { display: block; width: 100%; max-height: 520px; min-width: 300px; margin: 0 auto; }
.tabletop { fill: var(--table); stroke: var(--table-edge); stroke-width: 3; }
.table-label { font-family: var(--serif); font-size: 17px; fill: var(--muted); }
.table-sub { font-size: 12px; fill: var(--muted); }
.kitchen-mark { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; fill: var(--gold); font-weight: 700; }
.seat { cursor: pointer; outline: none; }
.seat .plate { fill: var(--plate); stroke: var(--plate-edge); stroke-width: 2; }
.seat .rim { fill: none; stroke: var(--line); stroke-width: 1.5; }
.seat .seat-name { font-size: 13.5px; font-weight: 600; fill: var(--ink); pointer-events: none; }
.seat .seat-id { font-size: 10px; fill: var(--muted); font-family: var(--mono); pointer-events: none; }
.seat.empty .seat-name { fill: var(--muted); font-weight: 400; }
.seat.empty .plate { stroke-dasharray: 4 3; }
.seat.lvl-low .plate { stroke: var(--low); stroke-width: 3; fill: var(--low-soft); }
.seat.lvl-medium .plate { stroke: var(--medium); stroke-width: 3.5; fill: var(--medium-soft); }
.seat.lvl-high .plate { stroke: var(--high); stroke-width: 4; fill: var(--high-soft); }
.seat.selected .plate { stroke: var(--accent); stroke-width: 4; stroke-dasharray: none; }
.seat.selected .rim { stroke: var(--accent); }
.seat.lit .plate { stroke: var(--gold); stroke-width: 5; }
.seat:focus-visible .plate { stroke: var(--accent); stroke-width: 4; }
.seat .pin { fill: var(--sage); stroke: var(--card); stroke-width: 1.5; }
.seat .kid-dot { fill: var(--gold); }
.hot { stroke-width: 3; stroke-linecap: round; }
.hot.feud { stroke: var(--high); stroke-dasharray: 6 5; }
.hot.feud.lvl-low { stroke: var(--low); }
.hot.feud.lvl-medium { stroke: var(--medium); }
.hot.split { stroke: var(--sage); stroke-dasharray: 2 5; }
.hot.talkers { stroke: var(--low); stroke-dasharray: 1 4; }
.swap-arc { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 7 5; }
.tension { margin: 12px 0 0; }
.tension-top { font-size: .95rem; }
.tension-top b { font-family: var(--serif); font-size: 1.6rem; }
.tbar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 4px; }
.tbar span { display: block; height: 100%; width: 0; background: var(--ok); transition: width .3s; }
.tbar span.low { background: var(--low); }
.tbar span.medium { background: var(--medium); }
.tbar span.high { background: var(--high); }
.card h3.sub { margin-top: 14px; }
.hotlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hotlist li { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; border-radius: 10px; background: var(--plate); border: 1px solid var(--line); font-size: .92rem; cursor: pointer; }
.hotlist li.none { cursor: default; color: var(--muted); }
.hotlist li.lit { border-color: var(--gold); }
.hid { font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--muted); }
.lvl { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: 1px 7px; border-radius: 99px; }
.hot.lvl-high .lvl { background: var(--high-soft); color: var(--high); }
.hot.lvl-medium .lvl { background: var(--medium-soft); color: var(--medium); }
.hot.lvl-low .lvl { background: var(--low-soft); color: var(--low); }

/* Ask */
.runrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.gate { background: var(--gold-soft); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.gate .pill { margin-left: 4px; }
.progress { margin-top: 14px; border: 1px dashed var(--line2); border-radius: 12px; padding: 12px 14px; }
.ptitle { font-weight: 600; margin: 0 0 6px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }
.step { color: var(--muted); font-size: .92rem; }
.step.active { color: var(--ink); font-weight: 600; }
.step.done { color: var(--ok); }
.step-ic { font-family: var(--mono); display: inline-block; width: 1em; }
.how { background: var(--warn-soft); border-radius: 10px; padding: 8px 12px; margin-top: 10px; }
.raw { white-space: pre-wrap; word-break: break-word; background: var(--plate); border: 1px solid var(--line); border-radius: 10px; padding: 10px; max-height: 320px; overflow: auto; font-size: .82rem; }

/* The read */
.rhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rhead h2 { margin: 0; }
.stamp { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; padding: 5px 12px; border-radius: 6px; border: 2px solid currentColor; transform: rotate(-2deg); }
.stamp.v-calm { color: var(--ok); background: var(--ok-soft); }
.stamp.v-watch { color: var(--medium); background: var(--medium-soft); }
.stamp.v-reshuffle { color: var(--high); background: var(--high-soft); }
.stamp.v-none { color: var(--muted); }
.summary { font-family: var(--serif); font-size: 1.08rem; margin: 10px 0 4px; }
.rgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; }
.lines { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.lines li.none, .none { color: var(--muted); list-style: none; margin-left: -18px; }
.swap b { color: var(--accent); }
#applySwaps { margin-top: 10px; }
.topicchips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.topicchips li { background: var(--sage-soft); color: var(--sage); border-radius: 99px; padding: 3px 12px; font-size: .9rem; }
.topicchips li.none { background: none; margin: 0; }
.spots { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.spot { border: 1px solid var(--line); border-left: 5px solid var(--line2); border-radius: 12px; padding: 12px 14px; background: var(--plate); }
.spot.lvl-high { border-left-color: var(--high); }
.spot.lvl-medium { border-left-color: var(--medium); }
.spot.lvl-low { border-left-color: var(--low); }
.spot-head { display: flex; gap: 8px; align-items: baseline; font-weight: 600; font-size: .92rem; }
.spot-read { margin: 6px 0; color: var(--muted); font-size: .92rem; }
.spot-line { margin: 6px 0; display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; font-size: .95rem; }
.say { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--gold); padding-top: 3px; }
.spot-line q { font-family: var(--serif); font-style: italic; }
.moves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.move-col { border-top: 3px solid var(--sage); padding-top: 6px; }
.move-col h4 { margin: 0 0 6px; font-size: .88rem; }
.move-col .lines { font-size: .92rem; }
.grouptext { margin: 0; padding: 14px 16px; border-radius: 14px 14px 14px 4px; background: var(--sage-soft); white-space: pre-wrap; font-size: .98rem; max-width: 640px; }
.cites { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.cite { font-family: var(--mono); font-size: .72rem; border: 1px solid var(--line2); background: var(--card); border-radius: 5px; padding: 0 5px; cursor: pointer; color: var(--muted); }
.cite:hover { border-color: var(--accent); color: var(--accent); }
.cite.bad { text-decoration: line-through; cursor: help; color: var(--bad); }
.recon { margin-top: 6px; }

/* History */
.hist { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.hrow { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--plate); }
.hinfo { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.hist li.none { color: var(--muted); }

.foot { max-width: 1180px; margin: 0 auto; padding: 8px 20px 40px; color: var(--muted); font-size: .88rem; }

/* Toasts */
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 20; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: var(--card); padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); font-size: .9rem; transition: opacity .5s; }
.toast.err { background: var(--bad); color: #fff; }
.toast a { color: inherit; font-weight: 700; }
.toast.gone { opacity: 0; }

/* Docs pages */
.doc { max-width: 900px; margin: 0 auto; padding: 18px 20px 40px; }
.doc h1 { font-family: var(--serif); }
.doc pre { background: var(--plate); border: 1px solid var(--line); border-radius: 10px; padding: 12px; overflow-x: auto; font-size: .82rem; }
.doc code { font-family: var(--mono); font-size: .88em; }
.doc table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; font-size: .9rem; }
.doc th, .doc td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.codegroup { margin: 10px 0 18px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.tab { border: 1px solid var(--line2); background: var(--card); border-radius: 8px; padding: 3px 10px; cursor: pointer; font-size: .85rem; }
.tab.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.statebox { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--card); }
.tokenrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.tokenbox { font-family: var(--mono); background: var(--plate); border: 1px solid var(--line); border-radius: 10px; padding: 10px; word-break: break-all; width: 100%; }

.sheet { display: none; }
@media print {
  body { background: #fff; }
  body > *:not(.sheet) { display: none !important; }
  .sheet { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0; color: #000; }
  .pcard { border: 1px dashed #999; height: 2.6in; display: grid; grid-template-rows: 1fr 1fr; break-inside: avoid; }
  .pc-half { display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 1px dotted #ccc; }
  .pc-half.flip { transform: rotate(180deg); }
  .pc-name { font-family: var(--serif); font-size: 26pt; }
  .pc-seat { font-family: var(--mono); font-size: 9pt; color: #555; }
}

@media (max-width: 900px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .rgrid { grid-template-columns: minmax(0, 1fr); }
  .moves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wrap { padding: 12px 16px 32px; }
  .bar { padding: 8px 16px; }
  .card { padding: 14px; border-radius: 14px; }
  .moves { grid-template-columns: minmax(0, 1fr); }
  .spots { grid-template-columns: minmax(0, 1fr); }
  .spot-line { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .back { display: none; }
  #tableSvg { min-width: 0; }
  .toast { font-size: .82rem; padding: 8px 12px; }
}