/* Tim & Ugo: shared look for every page. Ivory paper, evergreen ink, brass. */
@font-face { font-family: "Cormorant"; font-weight: 500; font-style: normal; font-display: swap;
  src: url(/static/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant"; font-weight: 500; font-style: italic; font-display: swap;
  src: url(/static/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2"); }
@font-face { font-family: "Cormorant"; font-weight: 600; font-style: normal; font-display: swap;
  src: url(/static/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Karla"; font-weight: 400; font-display: swap;
  src: url(/static/fonts/karla-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Karla"; font-weight: 600; font-display: swap;
  src: url(/static/fonts/karla-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Karla"; font-weight: 700; font-display: swap;
  src: url(/static/fonts/karla-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "DSEG7"; font-display: block;
  src: url(/static/fonts/DSEG7Classic-Bold.woff2) format("woff2"); }

:root {
  --paper: #f6f1e8; --paper-2: #efe7d9; --card: #fffdf8; --ink: #1c2622; --muted: #6b6f68;
  --line: #e2d8c6; --green: #1f3a32; --green-2: #2f5d50; --brass: #a07a38; --brass-soft: #c9a96a;
  --plum: #8a4f6b; --warn: #b5532f; --on-green: #f6f1e8;
  --display: "Cormorant", "Cormorant Garamond", Georgia, serif;
  --body: "Karla", system-ui, -apple-system, sans-serif;
  --lcd: "DSEG7", ui-monospace, monospace;
  --radius: 18px; --shadow: 0 1px 0 #fff8 inset, 0 18px 40px -24px #3a2c1466, 0 2px 6px -3px #3a2c1426;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #0f1613; --paper-2: #16201c; --card: #18221e; --ink: #ece6da; --muted: #a2a89f;
  --line: #2a3530; --green: #9fc8b8; --green-2: #7fb3a2; --brass: #d6b475; --brass-soft: #a88a52;
  --plum: #d79bb7; --warn: #e98a63; --on-green: #0f1613;
  --shadow: 0 18px 40px -24px #000c, 0 1px 0 #ffffff0a inset; color-scheme: dark;
} }
:root[data-theme="dark"] {
  --paper: #0f1613; --paper-2: #16201c; --card: #18221e; --ink: #ece6da; --muted: #a2a89f;
  --line: #2a3530; --green: #9fc8b8; --green-2: #7fb3a2; --brass: #d6b475; --brass-soft: #a88a52;
  --plum: #d79bb7; --warn: #e98a63; --on-green: #0f1613; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--paper); color: var(--ink);
  font: 16px/1.5 var(--body); -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--brass) 10%, transparent), transparent 60%); }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.05; margin: 0; letter-spacing: -.01em; }
a { color: var(--green-2); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; }
input, progress { accent-color: var(--green-2); }

.wrap { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font: 700 .72rem/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.muted { color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) var(--gutter) 6px; max-width: 560px; margin: 0 auto; }
.topbar a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--muted); font-size: .9rem; }
.topbar .mono { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--ink); }
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px;
  border-radius: 999px; border: 0; background: var(--green); color: var(--on-green); font-weight: 600;
  text-decoration: none; transition: transform .15s, filter .15s; }
.btn:active { transform: scale(.98); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.small { padding: 8px 14px; font-size: .9rem; }

.rule { display: flex; align-items: center; gap: 12px; color: var(--brass); }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--brass-soft), transparent); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Floor plan (shared by /seat and /plan) */
svg.floor { width: 100%; height: auto; display: block; user-select: none; -webkit-user-select: none; touch-action: none; }
.grid-dot { fill: var(--muted); opacity: .35; }
.room { fill: var(--card); stroke: var(--ink); stroke-opacity: .6; stroke-width: .35; filter: drop-shadow(0 .4px .6px #0002); }
.parq-a { fill: color-mix(in srgb, var(--brass) 13%, var(--card)); }
.parq-b { fill: color-mix(in srgb, var(--brass) 24%, var(--card)); }
.plank-a { fill: color-mix(in srgb, var(--brass) 9%, var(--paper)); }
.plank-line { stroke: color-mix(in srgb, var(--brass) 22%, var(--paper)); stroke-width: .06; fill: none; }
.cloth-hi { stop-color: var(--card); }
.cloth-lo { stop-color: color-mix(in srgb, var(--brass) 9%, var(--paper)); }
.fixture { fill: color-mix(in srgb, var(--brass) 8%, transparent); stroke: var(--brass); stroke-width: .15; stroke-dasharray: .6 .4; }
.fixture.dance { fill: url(#parquet); stroke: var(--brass); stroke-dasharray: none; }
.deck { stroke: var(--green-2); stroke-opacity: .45; stroke-width: .15; }
.deck-hit { fill: transparent; }
.entrance { fill: var(--paper); stroke: none; }
.entrance-mark { fill: var(--plum); }
.fixture-label { font: 600 1.15px var(--body); fill: var(--brass); text-anchor: middle; dominant-baseline: middle; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.entrance-label { fill: var(--plum); }
.table .hit { fill: transparent; }
.table .top { stroke: var(--green-2); stroke-width: .14; filter: drop-shadow(0 .25px .35px #3a2c1430); }
.chair { fill: var(--card); stroke: color-mix(in srgb, var(--muted) 70%, transparent); stroke-width: .09; }
.chair-back { fill: color-mix(in srgb, var(--muted) 30%, var(--card)); stroke: none; }
.chair.taken { fill: var(--green-2); stroke: var(--green-2); }
.chair-back.taken { fill: var(--green); }
.chair-ini { font: 700 .5px var(--body); fill: var(--on-green); text-anchor: middle; dominant-baseline: central; pointer-events: none; letter-spacing: .02em; }
.chair-name { font: 600 .55px var(--body); fill: var(--ink); dominant-baseline: middle; pointer-events: none; paint-order: stroke; stroke: var(--card); stroke-width: .18px; }
.chair.drop { fill: var(--brass-soft); stroke: var(--brass); stroke-width: .2; }
.chair.focus { stroke: var(--brass); stroke-width: .28; }
.chair.me { fill: var(--plum); stroke: var(--plum); }
.table.full .top { stroke: var(--green); stroke-width: .22; }
.table.over .top { stroke: var(--warn); stroke-width: .35; }
.table .conflict-ring { fill: none; stroke: var(--warn); stroke-width: .18; stroke-dasharray: .5 .35; }
.floor.dim .table:not(.hl) { opacity: .38; }
.table.hl .top { stroke: var(--brass); stroke-width: .3; }
.table.hl .chair { fill: var(--brass-soft); stroke: var(--brass); }
.table.hl .chair.me { fill: var(--plum); stroke: var(--plum); }
.table .pulse { fill: none; stroke: var(--brass); stroke-width: .25; transform-box: fill-box; transform-origin: center; animation: pulse 2s ease-out infinite; }
@keyframes pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
.table.sel .top { stroke: var(--brass); stroke-width: .4; }
.table.sel .hit { fill: color-mix(in srgb, var(--brass) 8%, transparent); stroke: var(--brass); stroke-width: .1; stroke-dasharray: .4 .3; }
.fixture-g.sel .fixture, .fixture-g.sel .deck-hit { stroke: var(--plum); stroke-width: .3; stroke-dasharray: none; }
.table.drop .top { stroke: var(--brass); stroke-width: .5; }
.tname { font: 700 1.4px var(--body); fill: var(--ink); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.tcount { font: .8px var(--body); fill: var(--muted); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }