/* ============================================================
   CULTURE — shared stylesheet
   Riso-print identity: indigo ink, coral, electric lime.
   ============================================================ */

:root{
  --bg:#EFEBDD; --bg-2:#E5E0CD; --surface:#F8F5EC;
  --text:#191A45; --text-dim:#5E5F82;
  --line:rgba(25,26,69,.16); --line-hard:rgba(25,26,69,.36);
  --shadow:rgba(25,26,69,.34);

  --band-bg:#191A45; --band-surface:#22245A; --band-text:#F2EEE1;
  --band-dim:#A5A5C6; --band-line:rgba(242,238,225,.20);

  --flare:#F5305A; --flare-ink:#FFF6F2;
  --volt:#C6EF26;  --volt-ink:#191A45;
  --sky:#2E5BE8;

  --ok:#1E8E4E; --ok-bg:rgba(30,142,78,.12);
  --warn:#B4740B; --warn-bg:rgba(180,116,11,.13);
  --bad:#C22743; --bad-bg:rgba(194,39,67,.12);

  --dot:rgba(25,26,69,.30);
  --radius:3px;
  --maxw:1140px;

  --d:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --b:'Archivo','Helvetica Neue',Arial,sans-serif;
  --m:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E0F2E; --bg-2:#141638; --surface:#1A1C46;
    --text:#EDEADC; --text-dim:#9E9FC0;
    --line:rgba(237,234,220,.16); --line-hard:rgba(237,234,220,.34);
    --shadow:rgba(0,0,0,.55);
    --band-bg:#1A1C4C; --band-surface:#252861; --band-text:#EDEADC;
    --band-dim:#9E9FC0; --band-line:rgba(237,234,220,.20);
    --flare:#FF5E7C; --flare-ink:#1C0810; --volt:#D6FF4A; --volt-ink:#141537;
    --sky:#6F92FF;
    --ok:#4ED88A; --ok-bg:rgba(78,216,138,.14);
    --warn:#F2B950; --warn-bg:rgba(242,185,80,.14);
    --bad:#FF7591; --bad-bg:rgba(255,117,145,.14);
    --dot:rgba(237,234,220,.22);
  }
}
:root[data-theme="dark"]{
  --bg:#0E0F2E; --bg-2:#141638; --surface:#1A1C46;
  --text:#EDEADC; --text-dim:#9E9FC0;
  --line:rgba(237,234,220,.16); --line-hard:rgba(237,234,220,.34);
  --shadow:rgba(0,0,0,.55);
  --band-bg:#1A1C4C; --band-surface:#252861; --band-text:#EDEADC;
  --band-dim:#9E9FC0; --band-line:rgba(237,234,220,.20);
  --flare:#FF5E7C; --flare-ink:#1C0810; --volt:#D6FF4A; --volt-ink:#141537;
  --sky:#6F92FF;
  --ok:#4ED88A; --ok-bg:rgba(78,216,138,.14);
  --warn:#F2B950; --warn-bg:rgba(242,185,80,.14);
  --bad:#FF7591; --bad-bg:rgba(255,117,145,.14);
  --dot:rgba(237,234,220,.22);
}

/* ---------------- base ---------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--b);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
.wrap-narrow{max-width:560px;margin:0 auto;padding-inline:20px}

h1,h2,h3,h4{font-family:var(--d);margin:0;text-wrap:balance}
h1{font-size:clamp(34px,5vw,54px);font-weight:900;line-height:.95;text-transform:uppercase}
h2{font-size:clamp(28px,4vw,44px);font-weight:900;line-height:.96;text-transform:uppercase}
h3{font-size:clamp(21px,2.8vw,28px);font-weight:800;line-height:1;text-transform:uppercase}
h4{font-size:19px;font-weight:800;text-transform:uppercase;line-height:1.05}

.eyebrow{
  font-family:var(--m);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-dim);margin:0 0 10px;
}
.dim{color:var(--text-dim)}
.mono{font-family:var(--m);font-variant-numeric:tabular-nums}
.center{text-align:center}
.mt0{margin-top:0}.mt1{margin-top:8px}.mt2{margin-top:16px}.mt3{margin-top:26px}.mt4{margin-top:38px}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--m);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:12px 22px;border:1.5px solid var(--text);border-radius:var(--radius);
  text-decoration:none;background:transparent;color:var(--text);cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--shadow)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-fill{background:var(--flare);border-color:var(--flare);color:var(--flare-ink)}
.btn-volt{background:var(--volt);border-color:var(--volt-ink);color:var(--volt-ink)}
.btn-ghost{border-color:var(--line-hard);color:var(--text-dim)}
.btn-sm{padding:8px 14px;font-size:11px}
.btn-block{width:100%}
.btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}

/* ---------------- header ---------------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(12px);border-bottom:1.5px solid var(--text);
}
.hdr-in{max-width:var(--maxw);margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mark{font-family:var(--d);font-weight:900;font-size:27px;line-height:1;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.mark span{color:var(--flare)}
.nav{display:flex;gap:18px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a{font-family:var(--m);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--text-dim)}
.nav a:hover,.nav a.on{color:var(--text)}
.nav a.on{border-bottom:2px solid var(--flare);padding-bottom:2px}
.nav a.btn-fill{color:var(--flare-ink)}
/* count of enquiries still waiting on someone */
.nav-dot{display:inline-block;min-width:16px;padding:0 4px;margin-left:4px;border-radius:9px;
  background:var(--flare);color:#fff;font-size:10px;line-height:16px;text-align:center;letter-spacing:0}

/* ---------------- cards & panels ---------------- */
.card{
  background:var(--surface);border:1.5px solid var(--text);border-radius:var(--radius);
  padding:22px;box-shadow:5px 5px 0 var(--shadow);
}
.panel{background:var(--surface);border:1px solid var(--line-hard);border-radius:var(--radius);padding:20px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}

/* ---------------- forms ---------------- */
.field{margin-bottom:16px}
.field label{
  display:block;font-family:var(--m);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:6px;
}
.input,select.input,textarea.input{
  width:100%;padding:12px 14px;font-family:var(--b);font-size:16px;
  color:var(--text);background:var(--bg);
  border:1.5px solid var(--line-hard);border-radius:var(--radius);
}
.input:focus{outline:none;border-color:var(--flare);box-shadow:0 0 0 3px color-mix(in srgb,var(--flare) 22%,transparent)}
.hint{font-size:13px;color:var(--text-dim);margin-top:6px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>*{flex:1 1 160px}

/* ---------------- alerts ---------------- */
.alert{
  border-left:4px solid var(--text);padding:12px 16px;margin-bottom:18px;
  border-radius:var(--radius);font-size:14.5px;background:var(--bg-2);
}
.alert-ok{border-color:var(--ok);background:var(--ok-bg)}
.alert-bad{border-color:var(--bad);background:var(--bad-bg)}
.alert-warn{border-color:var(--warn);background:var(--warn-bg)}

/* ---------------- pills ---------------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 11px;border-radius:100px;border:1px solid var(--line-hard);
}
.pill-ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.pill-bad{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.pill-warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.pill-live{background:var(--flare);color:var(--flare-ink);border-color:transparent}

/* ---------------- tables ---------------- */
.tbl-scroll{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
table.tbl th{
  text-align:left;font-family:var(--m);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-dim);font-weight:400;
  padding:10px 12px;border-bottom:1.5px solid var(--text);white-space:nowrap;
}
table.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl td.num,table.tbl th.num{text-align:right;font-family:var(--m);font-variant-numeric:tabular-nums}

/* ---------------- slot grid ---------------- */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px;margin-top:6px}
.slot{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:11px 6px;border:1.5px solid var(--line-hard);border-radius:var(--radius);
  background:var(--surface);cursor:pointer;text-align:center;
  font-family:var(--m);font-size:13px;transition:transform .1s ease;
}
.slot:hover{transform:translateY(-2px)}
.slot small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
.slot input{position:absolute;opacity:0;pointer-events:none}
.slot.taken{opacity:.4;cursor:not-allowed;background:var(--bg-2)}
.slot.taken:hover{transform:none}
.slot:has(input:checked){background:var(--flare);border-color:var(--flare);color:var(--flare-ink)}
.slot:has(input:checked) small{color:var(--flare-ink);opacity:.85}
.slot:has(input:focus-visible){outline:2.5px solid var(--flare);outline-offset:3px}

/* ---------------- choice chips ---------------- */
.choices{display:flex;flex-wrap:wrap;gap:9px}
.choice{
  position:relative;display:inline-flex;flex-direction:column;gap:2px;
  padding:11px 16px;border:1.5px solid var(--line-hard);border-radius:var(--radius);
  background:var(--surface);cursor:pointer;font-size:14.5px;
}
.choice small{font-family:var(--m);font-size:11px;color:var(--text-dim)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice:has(input:checked){background:var(--text);border-color:var(--text);color:var(--bg)}
.choice:has(input:checked) small{color:var(--bg);opacity:.75}
.choice:has(input:focus-visible){outline:2.5px solid var(--flare);outline-offset:3px}

/* ---------------- stat tiles ---------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px}
.stat{border:1.5px solid var(--text);border-radius:var(--radius);padding:16px 18px;background:var(--surface)}
.stat b{display:block;font-family:var(--d);font-weight:900;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.stat.pos b{color:var(--ok)}
.stat.neg b{color:var(--bad)}
.stat.accent{background:var(--flare);border-color:var(--flare);color:var(--flare-ink)}
.stat.accent span{color:var(--flare-ink);opacity:.8}

/* ---------------- receipt ---------------- */
.receipt{font-family:var(--m);font-size:13.5px}
.receipt .li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dotted var(--line-hard)}
.receipt .li:last-of-type{border-bottom:none}
.receipt .total{
  display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding-top:12px;
  border-top:2px solid var(--text);font-family:var(--d);font-weight:900;font-size:26px;
  text-transform:uppercase;font-variant-numeric:tabular-nums;
}

/* ---------------- live timer ---------------- */
.timer{
  font-family:var(--d);font-weight:900;font-size:42px;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}

/* ---------------- footer ---------------- */
.foot{border-top:1.5px solid var(--text);padding-block:26px;margin-top:56px}
.foot p{margin:0;font-family:var(--m);font-size:11.5px;letter-spacing:.05em;color:var(--text-dim)}

/* ---------------- empty state ---------------- */
.empty{
  text-align:center;padding:44px 20px;border:1.5px dashed var(--line-hard);
  border-radius:var(--radius);color:var(--text-dim);
}
.empty b{display:block;font-family:var(--d);font-size:23px;text-transform:uppercase;color:var(--text);margin-bottom:6px}

:focus-visible{outline:2.5px solid var(--flare);outline-offset:3px}

@media (max-width:640px){
  .nav{gap:12px}
  .card{padding:18px}
  h1{font-size:32px}
}
[hidden]{display:none !important}