:root {
      --bg: #f4f1ea;
      --paper: #fffcf6;
      --ink: #1c1914;
      --muted: #5c574e;
      --line: #d4cfc3;
      --in: #1f5c3a;
      --in-press: #17462c;
      --out: #8a2f24;
      --out-bg: #f8ece9;
      --guest: #6b5e3a;
      --warn: #8a5a12;
      --closed: #5c574e;
      --focus: #1f5c3a;
      --radius: 10px;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
      background: var(--bg);
      color: var(--ink);
      line-height: 1.35;
      min-height: 100dvh;
    }
    button, input, select {
      font: inherit;
      color: inherit;
    }
    button {
      cursor: pointer;
    }
    button:focus-visible, input:focus-visible {
      outline: 3px solid var(--focus);
      outline-offset: 2px;
    }
    .wrap {
      max-width: 440px;
      margin: 0 auto;
      padding: 20px 16px 96px;
    }
    .wrap.wide { max-width: 920px; }
    .board {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 16px;
      align-items: start;
      margin-top: 8px;
    }
    .pane h3 { margin-top: 0; }
    .pane-body {
      max-height: min(70vh, 640px);
      overflow-y: auto;
      padding-right: 4px;
    }
    h1 {
      font-size: 28px;
      font-weight: 600;
      margin: 0 0 4px;
      letter-spacing: -0.02em;
    }
    .sub {
      color: var(--muted);
      margin: 0 0 16px;
      font-size: 16px;
    }
    .count {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 14px 16px;
      margin-bottom: 16px;
    }
    .count .heads {
      font-size: 32px;
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1;
    }
    .count .heads span {
      font-size: 16px;
      font-weight: 400;
      color: var(--muted);
      letter-spacing: 0;
    }
    .need {
      margin-top: 8px;
      font-size: 16px;
    }
    .need.short { color: var(--warn); font-weight: 600; }
    .need.clean { color: var(--in); font-weight: 600; }
    .badge {
      display: inline-block;
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--muted);
      margin-bottom: 8px;
    }
    .badge.closed {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
    }
    label.field {
      display: block;
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 12px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0 0 6px;
    }
    input[type="search"], input[type="text"] {
      width: 100%;
      min-height: 48px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--paper);
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 17px;
    }
    .roster {
      list-style: none;
      margin: 8px 0 0;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: var(--paper);
      max-height: 280px;
      overflow-y: auto;
    }
    .roster li button {
      width: 100%;
      text-align: left;
      min-height: 48px;
      padding: 10px 12px;
      border: 0;
      border-bottom: 1px solid var(--line);
      background: transparent;
      font-size: 18px;
    }
    .roster li:last-child button { border-bottom: 0; }
    .roster li button:active { background: #efe8d8; }
    .roster li button.in-already { color: var(--in); }
    .empty {
      padding: 12px;
      color: var(--muted);
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 14px;
    }
    .me {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 14px 16px;
      margin: 16px 0;
    }
    .me h2 {
      margin: 0 0 10px;
      font-size: 20px;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 10px 16px;
      border-radius: 8px;
      border: 1px solid transparent;
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 16px;
      font-weight: 600;
      width: 100%;
      margin-top: 8px;
    }
    .btn-in { background: var(--in); color: #fff; }
    .btn-in:active { background: var(--in-press); }
    .btn-in:disabled { background: var(--closed); }
    .btn-out { background: var(--out-bg); color: var(--out); border-color: #e2c4be; }
    .btn-ghost {
      background: transparent;
      border-color: var(--line);
      font-weight: 500;
    }
    .guest-row {
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 8px;
      margin-top: 8px;
    }
    .guest-row .btn { width: auto; margin-top: 0; min-width: 72px; }
    .guest-list { margin: 10px 0 0; padding: 0; list-style: none; }
    .guest-list li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
      border-top: 1px solid var(--line);
      font-size: 16px;
    }
    .guest-list button {
      background: none;
      border: 0;
      color: var(--out);
      min-height: 44px;
      padding: 0 8px;
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 14px;
    }
    h3 {
      margin: 24px 0 8px;
      font-size: 14px;
      font-family: ui-sans-serif, system-ui, sans-serif;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
    }
    .ins {
      list-style: none;
      margin: 0;
      padding: 0;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }
    .ins > li {
      padding: 12px 16px;
      border-bottom: 1px solid var(--line);
    }
    .ins > li:last-child { border-bottom: 0; }
    .ins > li.roster-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
    }
    .roster-row span { flex: 1; min-width: 0; }
    .roster-row button {
      background: none;
      border: 0;
      color: var(--out);
      min-height: 44px;
      padding: 0 8px;
      width: auto;
      margin: 0;
      flex-shrink: 0;
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 14px;
      font-weight: 600;
    }
    .host { font-size: 18px; }
    .g {
      display: block;
      color: var(--guest);
      font-size: 15px;
      padding-left: 14px;
      margin-top: 4px;
    }
    .admin h2 { font-size: 18px; margin: 0 0 12px; }
    .admin .actions { margin-bottom: 8px; }
    .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .note {
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 13px;
      color: var(--muted);
      margin: 8px 0 0;
    }
    .note:has(+ .sub) { margin-bottom: 12px; }
    .toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%);
      background: var(--ink);
      color: var(--paper);
      padding: 10px 16px;
      border-radius: 999px;
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 14px;
      display: none;
      z-index: 5;
    }
    .hidden { display: none !important; }
    .hint {
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 13px;
      color: var(--muted);
      margin: 0 0 8px;
    }
    .hint.pick { color: var(--in); font-weight: 600; }
    .clumps { display: flex; flex-direction: column; gap: 8px; }
    .clumps > * { flex-shrink: 0; } /* fb15: never squeeze a card below its content */
    .clump {
      display: block;
      width: 100%;
      text-align: left;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px 12px;
      min-height: 48px;
      font-size: 17px;
    }
    .clump.sel {
      border-color: var(--in);
      box-shadow: inset 0 0 0 2px var(--in);
    }
    .clump .g { padding-left: 8px; }
    .gcard {
      background: var(--paper);
      border: 1px dashed var(--line);
      border-radius: var(--radius);
      padding: 10px 12px;
      margin-bottom: 10px;
    }
    .gcard.drop {
      border-style: solid;
      border-color: var(--in);
    }
    .gcard.full { opacity: 0.85; }
    .gcard .gtitle {
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 8px;
    }
    .gcard .gtitle strong { color: var(--ink); letter-spacing: 0; text-transform: none; font-size: 16px; }
    body.gated .wrap { visibility: hidden; }
    .gate {
      position: fixed;
      inset: 0;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 20;
      padding: 24px;
    }
    .gate[hidden] { display: none; }
    .gate-card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 20px;
      width: min(100%, 360px);
    }
    .gate-card h2 { margin: 0 0 8px; }
    .gate-card input {
      width: 100%;
      margin: 8px 0 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--paper);
    }
    .gate-card .btn { width: 100%; }
    .start-gate {
      background: rgba(20, 20, 18, 0.55);
    }
    .copy-gate .gate-card {
      width: min(100%, 420px);
      max-height: 92dvh;
      overflow: auto;
    }
    .copy-gate .gate-card .copy-done {
      width: auto;
      min-width: 8em;
      margin: 12px auto 0;
      display: flex;
    }
    .copy-preview {
      white-space: pre-wrap;
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 13px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      margin: 12px 0 0;
    }
    .time-picks {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin: 12px 0;
    }
    .time-picks .btn { width: 100%; margin: 0; }
    a { color: var(--in); }
    .faq h2 {
      font-size: 20px;
      font-family: inherit;
      letter-spacing: -0.02em;
      text-transform: none;
      color: var(--ink);
      font-weight: 600;
      margin: 28px 0 8px;
    }
    .faq p { margin: 0 0 10px; }
    .faq ol, .faq ul { margin: 0 0 12px; padding-left: 1.25em; }
    .faq li { margin: 0 0 6px; }
    .faq .warn {
      color: var(--out);
      font-weight: 600;
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 14px;
      margin: 8px 0 0;
    }

    /* Cart pairing (add order) — same attached look as host + guest */
    .carts { display: flex; flex-direction: column; gap: 8px; }
    .cart {
      background: var(--paper);
      border: 1px solid var(--line);
      border-left: 4px solid var(--in);
      border-radius: 8px;
      padding: 6px 10px 8px;
    }
    .cart-label {
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
    }
    .cart-seat {
      display: block; width: 100%; text-align: left;
      background: transparent; border: 0; border-radius: 6px;
      padding: 6px 4px; min-height: 40px; font-size: 17px; color: var(--ink);
    }
    .cart-seat.mate { padding-left: 18px; position: relative; }
    .cart-seat.mate::before { content: "\21B3"; position: absolute; left: 2px; color: var(--muted); }
    .cart-seat.is-guest { color: var(--guest); font-size: 15px; }
    .cart-seat .seat-tag { font-size: 12px; color: var(--muted); }
    .cart-seat.sel { box-shadow: inset 0 0 0 2px var(--in); }
    .seat-open { display: block; padding: 4px 4px 0 18px; font-size: 13px; color: var(--muted); font-style: italic; }
    .cart-empty { margin: 0; }

/* ---- Pairing requests, coming-soon, reset dialog (2026-10-16) ---- */
.plan{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--in-soft,#e6f2e9);color:var(--in,#1d6b3a);border:1px solid #6aa57a;vertical-align:2px;margin-left:6px}
.soon{opacity:.45;cursor:not-allowed}
.tagsoon{font-size:11px;font-weight:700;background:#e4e4de;color:#555;border-radius:999px;padding:2px 8px;margin-left:6px}
.soon-box{border:1px dashed var(--line,#ccc);border-radius:10px;padding:10px;margin-top:10px}
.soon-box h3{margin:0}
#upgradeMultiGame{opacity:1;cursor:auto}#upgradeMultiGame>:not(.tile-cta){opacity:.45;cursor:not-allowed}.tile-cta{margin:10px 0 0}
.locked-note{border:1px dashed var(--line,#ccc);border-radius:8px;padding:8px;margin-bottom:8px}
.locked-note .note{margin:0}
.pill{font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:#ecebe4;color:var(--muted,#666)}
.pill.in{background:var(--in,#1d6b3a);color:#fff}
.roster-row .ra{display:flex;gap:10px;align-items:center}
.rqhead{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#666);margin:8px 0 0;width:100%}
.clump.linked{display:block;border:2px solid var(--in,#1d6b3a);background:#f3f8f2;padding:8px 10px;cursor:pointer;text-align:left}
.clump.linked.sel{outline:3px solid var(--in,#1d6b3a);outline-offset:2px}
.clump.linked span{display:block;padding:2px 0;overflow-wrap:anywhere}
.clump.linked .g{color:var(--guest,#7a5b00);padding-left:12px}
.clump.linked small{font-size:12px;color:var(--muted,#666)}
.lk-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:var(--in,#1d6b3a);margin-bottom:4px}
.x{background:none;border:0;color:var(--muted,#666);font-size:13px;text-decoration:underline;cursor:pointer;padding:2px 4px}
.ok{color:#1f9d55;font-size:12px;font-weight:700;margin-left:4px}
.alert{background:#fff6e3;border:1px solid #efc56b;border-radius:10px;padding:10px;font-size:14px;color:#6b4a00;margin:8px 0}
.req-box{border-top:1px solid var(--line,#ddd);margin-top:12px;padding-top:10px}
.req-box h3{margin:0 0 4px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:4px 10px;background:var(--in-soft,#e6f2e9);color:var(--in,#1d6b3a);font-weight:600}
.chip-x{background:none;border:0;cursor:pointer;color:inherit;font-size:14px;padding:0 2px}
.req-q{width:100%;box-sizing:border-box}
.req-q:disabled{background:#eef0ee;color:var(--muted,#666)}
.req-hits{list-style:none;margin:4px 0;padding:0}
.req-hits button{width:100%;text-align:left;padding:8px;border:1px solid var(--line,#ddd);border-radius:8px;background:#fff;margin:2px 0;cursor:pointer}
.tag-g{font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:#eef0ee;color:var(--guest,#7a5b00)}
.small{font-size:13px;color:var(--muted,#666)}
.btn-danger{background:#b3261e;color:#fff;border-color:#b3261e}
.btn-danger:disabled{opacity:.45;cursor:not-allowed}
.btn-danger-ghost{color:#b3261e;border-color:#e3a19c}
.reset-list{margin:4px 0 8px 1.2rem;padding:0}
[hidden]{display:none!important}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* fb24: room between the token hint (and the email hint) and the next label on /desk/setup */
#setupForm > label.field { margin-top: 20px; }