/* ===========================================================================
   Black Capital Technology — events surface.
   Tokens lifted from blackcapitaltechnology.com: lime #C7FF3A, the 67deg
   black/indigo gradient, 3px radii, and Yuji Boku carrying the one emphasised
   word. The surface is dark: black with a blue cast, lit by lime. Articulat CF
   is licensed through Adobe Fonts, so Hanken Grotesk stands in for it here.
   =========================================================================== */

@font-face{
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/hanken-grotesk-latin.a6b899943e31.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/hanken-grotesk-latin-ext.a3a0917757d7.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Yuji Boku'; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/yuji-boku-latin.4a38b32d66c2.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

*,*::before,*::after{box-sizing:border-box}
/* Author display rules (.btn, .field...) otherwise beat the UA rule for [hidden]. */
[hidden]{display:none !important}

:root{
  /* Elevation: the page is the floor, panels rise out of it. Never the reverse. */
  --void:#05070e;         /* page */
  --surface:#0b1120;      /* cards, panels, inputs */
  --raised:#131b2c;       /* chips, table heads, counters — a step above a card */
  --line:#1c2637;
  --line-strong:#2c3a52;
  --line-live:#465a80;    /* hover only */

  --ink:#f4f6fb;          /* headings and primary text */
  --body:#aeb8cc;         /* running text */
  --muted:#8e99b0;        /* 4.5:1 on --void and on --surface; never lighten past this */

  --lime:#c7ff3a;         /* the one accent; always carries --on-lime on top */
  --lime-deep:#b2f014;
  --on-lime:#060a12;
  --indigo:#1c2d7c;       /* the gradient's mid-stop, not a UI colour */
  --lilac:#eccbff;        /* the emphasised word */

  --danger:#ff7a70;
  --danger-soft:rgba(255,122,112,.12);
  --danger-line:rgba(255,122,112,.42);
  --warn:#ffc24d;
  --warn-soft:rgba(255,194,77,.11);
  --warn-line:rgba(255,194,77,.38);
  --ok-soft:rgba(199,255,58,.12);
  --ok-line:rgba(199,255,58,.44);

  --brand-dark:linear-gradient(67deg,#000 0%,var(--indigo) 66%,#0b1120 100%);

  /* Spacing: 4-base. Layout uses these, never a one-off value. */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:72px;

  --col:880px;            /* one column; chrome and content share its edges */
  --gutter:20px;

  --r:3px;                /* BCT radius. Everything squares off. */
  --r-lg:6px;
  --shadow:0 2px 4px rgba(0,0,0,.45),0 18px 40px -22px rgba(0,0,0,.9);
  --ease:cubic-bezier(.16,1,.3,1);
}

html{-webkit-text-size-adjust:100%; background:var(--void)}
body{
  margin:0; background:var(--void); color:var(--body); min-height:100vh;
  font:400 16px/1.6 'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line-live)}
a:hover{text-decoration-color:var(--lime)}
:focus-visible{outline:2px solid var(--lime); outline-offset:2px; border-radius:2px}

/* The column. Chrome, content and footer all resolve to the same two edges. */
.wrap{max-width:var(--col); margin:0 auto; padding:var(--s7) var(--gutter) var(--s10)}

/* ------------------------------------------------------------------ chrome */
.topbar{
  background:#02040a; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.topbar-inner{
  max-width:var(--col); margin:0 auto; padding:var(--s3) var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3) var(--s4); flex-wrap:wrap;
}
.brand{
  display:flex; align-items:center; gap:11px; font-weight:600; color:var(--ink);
  text-decoration:none; letter-spacing:-.01em;
}
.brand:hover{text-decoration:none}
.brand-mark{
  display:grid; place-items:center; width:30px; height:30px; flex:none;
  background:var(--lime); color:var(--on-lime); border-radius:var(--r);
  font-weight:700; font-size:.82rem; letter-spacing:-.04em;
}
.topbar nav{display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap}
.who{color:var(--muted); font-size:.84rem; white-space:nowrap}

/* --------------------------------------------------------------- headings */
h1,h2,h3{color:var(--ink); font-weight:500; letter-spacing:-.02em; text-wrap:balance}
h1{font-size:clamp(2rem,1.5rem + 2.2vw,3.05rem); line-height:1.1; margin:0 0 var(--s3)}
h2{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem); line-height:1.2; margin:var(--s8) 0 var(--s4)}
h3{font-size:1.06rem; line-height:1.3; margin:0 0 var(--s3); font-weight:600}
p{margin:0 0 var(--s4); max-width:68ch}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.lede{color:var(--body); font-size:1.03rem; margin-bottom:var(--s6); max-width:62ch}

/* The BCT signature: one word set in Yuji Boku. Used once per page, never twice. */
.accent{font-family:'Yuji Boku',Georgia,serif; font-weight:400; letter-spacing:0; color:var(--lilac)}

/* ------------------------------------------------------------------- hero */
.hero{
  position:relative; overflow:hidden; background:var(--brand-dark); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s8) var(--s6); margin-bottom:var(--s7);
}
.hero h1{margin-bottom:0}
.hero p{color:#c9cbd6; margin:var(--s2) 0 0; max-width:46ch}
/* The pixel field from bct's own hero, drawn rather than imaged. */
.hero::after{
  content:''; position:absolute; right:-40px; top:-30px; width:260px; height:260px;
  background-image:
    linear-gradient(var(--lime) 0 0),linear-gradient(var(--lime) 0 0),
    linear-gradient(var(--lilac) 0 0),linear-gradient(var(--lilac) 0 0),
    linear-gradient(#fff 0 0);
  background-repeat:no-repeat;
  background-size:26px 26px,26px 26px,26px 26px,26px 26px,26px 26px;
  background-position:120px 40px,172px 92px,146px 144px,198px 40px,94px 92px;
  opacity:.9; pointer-events:none;
}
@media(max-width:700px){ .hero::after{display:none} }
@media(max-width:560px){ .hero{padding:var(--s6) var(--s5)} }

/* ------------------------------------------------------------------ cards */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s5); margin-bottom:var(--s3);
}
a.card{display:block; color:inherit; text-decoration:none;
  transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease)}
a.card:hover{border-color:var(--line-live); background:#0d1426; box-shadow:var(--shadow)}

/* An invite-code card is the gate: clicking it opens the code field in place
   rather than sending the visitor off to a separate page. */
details.card.locked{padding:0;
  transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease)}
details.card.locked:hover{border-color:var(--line-live); background:#0d1426; box-shadow:var(--shadow)}
details.card.locked > summary{display:block; padding:var(--s5); cursor:pointer; list-style:none}
details.card.locked > summary::-webkit-details-marker{display:none}
details.card.locked > summary:focus-visible{outline:2px solid var(--lime); outline-offset:-3px}
details.card.locked .unlock{padding:var(--s4) var(--s5) var(--s5); border-top:1px solid var(--line)}
details.card.locked .unlock p{margin:0 0 var(--s3)}
.ico-lock{vertical-align:-1px; margin-right:3px}
.card-head{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s4)}
.card-head .tag{margin-top:2px}
.card-thumb{display:block; width:100%; height:132px; object-fit:cover;
  border-radius:2px; margin-bottom:var(--s4)}
.card.danger-zone{border-color:var(--danger-line); margin-top:var(--s7)}
.meta-lead{margin:var(--s3) 0 var(--s5)}
.tags{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
td .tags,.meta .tags{justify-content:flex-start}
.meta .tag{align-self:center}
.actions{display:flex; gap:var(--s2); flex-wrap:wrap}
.arrived{font-weight:400}
.split-labels{display:flex; gap:var(--s3) var(--s6); flex-wrap:wrap; margin-bottom:var(--s3)}
.meta{display:flex; flex-wrap:wrap; gap:var(--s2) 18px; color:var(--muted);
  font-size:.9rem; margin-top:var(--s3)}
.meta span{display:inline-flex; gap:7px; align-items:center}
.ico{flex:none; opacity:.7; margin-top:-1px}

/* ------------------------------------------------------------------- tags */
.tag{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:4px 8px; border-radius:2px; white-space:nowrap;
  background:var(--raised); color:var(--body);
}
.tag.gold{background:transparent; color:var(--lime); box-shadow:inset 0 0 0 1px var(--ok-line)}
.tag.ok{background:var(--ok-soft); color:var(--lime); box-shadow:inset 0 0 0 1px var(--ok-line)}
.tag.warn{background:var(--warn-soft); color:var(--warn); box-shadow:inset 0 0 0 1px var(--warn-line)}
.tag.off{background:transparent; color:var(--muted); box-shadow:inset 0 0 0 1px var(--line-strong)}
.tag.draft{background:var(--raised); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-live)}

/* ------------------------------------------------------------------ forms */
form{margin:0}
label{display:block; font-weight:600; color:var(--ink); margin-bottom:6px; font-size:.92rem}
.hint{font-weight:400; color:var(--muted); font-size:.86rem; margin:-2px 0 7px}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],input[type=datetime-local],input[type=date],input[type=file],select,textarea{
  width:100%; padding:11px var(--s3); border-radius:var(--r); color:var(--ink);
  background:#080d1a; border:1px solid var(--line-strong);
  font:inherit; font-size:.96rem;
}
input::placeholder,textarea::placeholder{color:#7a849a}
textarea{min-height:96px; resize:vertical}
input[type=file]{padding:9px var(--s3); color:var(--body)}
select{
  appearance:none; padding-right:38px; background-repeat:no-repeat;
  background-position:calc(100% - 14px) 55%;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238e99b0' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--lime); outline-offset:1px;
  border-color:var(--lime)}
.field{margin-bottom:var(--s5)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--danger)}
.err{color:var(--danger); font-size:.86rem; margin-top:6px; font-weight:500}
.helptext{color:var(--muted); font-size:.86rem; display:block; margin-top:6px}

.choices{display:grid; gap:var(--s2)}
.choices > div{display:grid; gap:var(--s2)}
.choices label,label.choice{
  display:flex; gap:11px; align-items:flex-start; padding:11px 13px; cursor:pointer; margin:0;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r);
  font-weight:400; color:var(--body);
}
.choices label:hover,label.choice:hover{border-color:var(--line-live); color:var(--ink)}
.choices input,label.choice input{margin:3px 0 0; accent-color:var(--lime);
  width:16px; height:16px; flex:none}
.note-field{margin:calc(var(--s3) * -1) 0 var(--s5) var(--s4); padding-left:var(--s4);
  border-left:1px solid var(--line-strong)}
.note-field label{font-weight:500; font-size:.88rem; color:var(--muted)}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:11px 19px; border-radius:var(--r); border:1px solid transparent;
  background:var(--lime); color:var(--on-lime); font:inherit; font-weight:600; font-size:.95rem;
  cursor:pointer; text-align:center; text-decoration:none; line-height:1.3;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.btn:hover{background:var(--lime-deep); text-decoration:none}
.btn.block{display:flex; width:100%}
.btn.ghost{background:transparent; border-color:var(--line-strong); color:var(--ink)}
.btn.ghost:hover{background:rgba(255,255,255,.05); border-color:var(--line-live)}
.btn.danger{background:transparent; border-color:var(--danger-line); color:var(--danger)}
.btn.danger:hover{background:var(--danger-soft); border-color:var(--danger)}
.btn.sm{min-height:36px; padding:7px var(--s3); font-size:.86rem}
/* Google's mark keeps its own colours; the button around it is ours. */
.btn.google{gap:10px; background:#02040a; color:var(--ink); border-color:var(--line-strong)}
.btn.google:hover{background:#0a1020; border-color:var(--line-live)}
.btn.google svg{flex:none}

/* ---------------------------------------------------------------- notices */
.notice{
  border:1px solid var(--line-strong); background:var(--surface);
  border-radius:var(--r); padding:13px 15px; margin-bottom:18px; color:var(--ink);
}
.notice.good{background:var(--ok-soft); border-color:var(--ok-line)}
.notice.bad{background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger)}

/* ----------------------------------------------------------------- tables */
.scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
table{width:100%; border-collapse:collapse; font-size:.91rem}
th,td{padding:11px 13px; text-align:left; border-bottom:1px solid var(--line)}
th{color:var(--muted); font-size:.71rem; text-transform:uppercase; letter-spacing:.07em;
  font-weight:700; background:var(--raised); white-space:nowrap}
td{color:var(--body)}
tbody tr:last-child td{border-bottom:none}
.empty{text-align:center; padding:var(--s9) var(--s6); color:var(--muted);
  border:1px dashed var(--line-strong); border-radius:var(--r); background:var(--surface)}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--raised);
  border:1px solid var(--line-strong); padding:3px 7px; border-radius:2px;
  font-size:.88rem; color:var(--ink)}
.foot{color:var(--muted); font-size:.82rem; border-top:1px solid var(--line); margin-top:var(--s8)}
.foot-inner{max-width:var(--col); margin:0 auto; padding:var(--s6) var(--gutter) var(--s8)}

/* ---------------------------------------------------------------- layout */
.row{display:flex; gap:var(--s3); flex-wrap:wrap}
.row>*{flex:1 1 210px; min-width:0}
.split{display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; justify-content:space-between}
/* The heading in a split row owns no margin; the row spaces itself. */
.split h1,.split h2,.split h3,.split p{margin:0}
.split + .scroll,.split + .tally,.split + .person{margin-top:var(--s4)}
.section{margin-top:var(--s8)}
.inline{display:inline-flex; gap:9px; align-items:center; font-weight:600; font-size:.9rem;
  cursor:pointer; margin:0 var(--s4) 0 0; color:var(--ink)}
.inline input{width:16px; height:16px; accent-color:var(--lime)}
.inline.del{color:var(--danger)}
.order-wrap{display:none}

/* --------------------------------------------------------- field builder */
.fb-row{border:1px solid var(--line); border-radius:var(--r); padding:var(--s5);
  margin-bottom:var(--s3); background:var(--surface)}
.fb-row .bar{display:flex; gap:9px; align-items:center; margin-bottom:var(--s4)}
.fb-row .bar strong{flex:1; font-size:.71rem; color:var(--muted); letter-spacing:.07em;
  text-transform:uppercase; font-weight:700}
.fb-row .field{margin-bottom:var(--s4)}

/* -------------------------------------------------------------- check-in */
.counter{display:flex; align-items:baseline; gap:var(--s2)}
.counter strong{font-size:2rem; letter-spacing:-.03em; color:var(--ink); font-weight:600}
.order-line{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.95rem;
  background:#02040a; color:var(--lime); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px; margin:0 0 18px; overflow-wrap:anywhere; max-width:none;
}
.tally{display:grid}
.tally-row{display:flex; gap:var(--s4); align-items:flex-start; padding:var(--s3) 0;
  border-top:1px solid var(--line)}
.tally-row:first-child{border-top:none}
.tally-count{
  flex:none; width:42px; height:42px; border-radius:var(--r); display:grid; place-items:center;
  background:var(--raised); color:var(--ink); font-weight:600;
}
.tally-row:has([data-count]:not(:empty)) .tally-count{transition:background .2s var(--ease)}
.tally-body{min-width:0; flex:1}
.tally-name{font-weight:600; color:var(--ink)}
.tally-notes{display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s2)}
.note-chip{font-size:.79rem; padding:3px 9px; border-radius:2px;
  background:var(--lime); color:var(--on-lime); font-weight:500}
.note-chip.pending{background:transparent; color:var(--muted); box-shadow:inset 0 0 0 1px var(--line-strong)}
/* Grid, not flex: the +/- marker must stay on the title's row when the summary
   line wraps, instead of dropping to a line of its own on a phone. */
.tally-card summary{
  cursor:pointer; list-style:none;
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--s1) var(--s3); align-items:baseline;
}
.tally-card summary [data-sum-line]{text-align:right}
.tally-card summary::-webkit-details-marker{display:none}
.tally-card summary::after{content:'+'; color:var(--muted); font-size:1.1rem; line-height:1}
.tally-card[open] summary::after{content:'\2212'}
.tally-card .sum-title{font-weight:600; font-size:1.06rem; color:var(--ink)}

.filter{max-width:260px}
.person{margin-bottom:var(--s2)}
.person-btn{
  width:100%; display:flex; gap:var(--s4); align-items:center; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px; color:var(--body); font:inherit;
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.person-btn:hover{border-color:var(--line-live)}
.tick{flex:none; width:26px; height:26px; border-radius:2px;
  border:1.5px solid var(--line-strong); background:#080d1a; position:relative}
.person.in .tick{background:var(--lime); border-color:var(--lime)}
.person.in .tick::after{
  content:''; position:absolute; left:8px; top:3px; width:6px; height:12px;
  border:solid var(--on-lime); border-width:0 2.5px 2.5px 0; transform:rotate(45deg);
}
.person.in .person-btn{border-color:var(--ok-line); background:var(--ok-soft)}
.person-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.person-name{font-weight:600; color:var(--ink); display:flex; align-items:center;
  gap:var(--s2); flex-wrap:wrap}
.person-answers{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px}
.chip{font-size:.79rem; padding:3px 9px; border-radius:2px; background:var(--raised); color:var(--body)}
.chip em{font-style:normal; color:var(--ink); font-weight:600}
.person-state{flex:none; font-size:.71rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted)}
.person.in .person-state{color:var(--lime)}

/* --------------------------------------------------------------- scanner */
.scanner{padding:var(--s5)}
.scan-tools{display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center}
.code-form{display:flex; gap:var(--s2); flex:1 1 270px; min-width:0}
.code-form input{
  flex:1; min-width:0; text-transform:uppercase; letter-spacing:.09em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.code-form input::placeholder{text-transform:none; letter-spacing:0;
  font-family:'Hanken Grotesk',sans-serif}
.scan-stage{position:relative; margin-top:var(--s4); border-radius:var(--r);
  overflow:hidden; background:#000; border:1px solid var(--line)}
.scan-stage video{display:block; width:100%; max-height:52vh; object-fit:cover}
.scan-frame{
  position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%);
  width:min(62%,250px); aspect-ratio:1; border-radius:var(--r);
  border:2px solid var(--lime); box-shadow:0 0 0 100vmax rgba(2,4,10,.7);
}
.scan-feedback{
  margin-top:15px; padding:13px 15px; border-radius:var(--r); font-weight:600;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
}
.scan-feedback.ok{background:var(--lime); border-color:var(--lime); color:var(--on-lime)}
.scan-feedback.already{background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn)}
.scan-feedback.error{background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger)}
.scan-feedback.hint{color:var(--muted); font-weight:400; background:var(--surface)}

/* ---------------------------------------------------------------- ticket */
.ticket{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--surface); margin-bottom:var(--s3); box-shadow:var(--shadow);
}
.ticket-hero{display:block; width:100%; height:auto; max-height:230px; object-fit:cover}
.ticket-body{padding:var(--s6)}
.ticket-title{margin:0 0 var(--s1); font-size:1.35rem}
/* The QR keeps a white plate: scanners want the quiet zone, and inverting a
   code is the one thing that stops a phone reading it across a dark room. */
.ticket-qr{
  display:flex; gap:var(--s5); align-items:center; flex-wrap:wrap; margin:var(--s6) 0;
  padding:var(--s5); background:#fff; border-radius:var(--r);
}
.ticket-qr svg{display:block; width:148px; height:148px}
.ticket-ref .muted{color:#5b6070}
.ticket-ref strong{display:block; font-size:1.5rem; letter-spacing:.09em; color:#0b1120;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:600}
.ticket-table{width:100%; font-size:.93rem}
.ticket-table th{background:none; text-transform:none; letter-spacing:0; font-size:.93rem;
  color:var(--muted); font-weight:400; width:38%}
.event-hero{display:block; width:100%; height:auto; max-height:300px; object-fit:cover;
  border-radius:var(--r); margin-bottom:var(--s5)}

.scan-result{text-align:center; padding:var(--s7) var(--s6); border-radius:var(--r);
  border:1px solid var(--line-strong); background:var(--surface); margin-bottom:18px}
.scan-result.ok{background:var(--lime); border-color:var(--lime); color:var(--on-lime)}
.scan-result.ok h1,.scan-result.ok .lede{color:var(--on-lime)}
.scan-result.warn{background:var(--warn-soft); border-color:var(--warn-line)}
.scan-result h1{margin:0}
.scan-mark{
  width:60px; height:60px; margin:0 auto var(--s4); border-radius:var(--r); display:grid;
  place-items:center; font-size:1.8rem; font-weight:700; background:#02040a; color:var(--lime);
}
.scan-result.warn .scan-mark{background:var(--warn); color:#2a1c00}

/* The one authored moment: a row confirms itself when the door marks it here. */
@keyframes checked-in{
  0%{background:var(--lime); border-color:var(--lime)}
  100%{background:var(--ok-soft); border-color:var(--ok-line)}
}
.person.flash .person-btn{animation:checked-in .9s var(--ease)}

@media(max-width:560px){
  :root{--gutter:16px}
  .wrap{padding:var(--s6) var(--gutter) var(--s9)}
  /* The signed-in address is reference, not navigation: it costs a whole row. */
  .who{display:none}
  .card-head{flex-direction:column; gap:var(--s3)}
  .card-head .tags{justify-content:flex-start}
  .tally-card summary{grid-template-columns:1fr auto}
  .tally-card summary [data-sum-line]{grid-column:1/-1; text-align:left}
  .filter{max-width:100%; width:100%}
  .scan-tools > .btn{flex:1 1 100%}
  .code-form{flex:1 1 100%}
  .code-form .btn{flex:0 0 auto}
  th,td{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

.ticket-actions{display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s6)}
@media(max-width:560px){ .ticket-actions .btn{flex:1 1 100%} }

/* ------------------------------------------------- installed-app update */
/* The worker has a newer copy of the site than the one on screen. Offered,
   never forced: a reload mid-sign-up would cost somebody their answers. */
.sw-update{
  position:fixed; left:50%; bottom:var(--s5); transform:translateX(-50%);
  z-index:40; display:flex; align-items:center; gap:var(--s3);
  max-width:min(94vw,420px); padding:var(--s3) var(--s3) var(--s3) var(--s4);
  background:var(--raised); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--r); box-shadow:var(--shadow);
  animation:sw-rise .2s var(--ease);
}
.sw-update span{font-size:.93rem}
.sw-update .btn{flex:none}
.sw-update-close{
  flex:none; width:32px; height:32px; padding:0; border:0; border-radius:var(--r);
  background:none; color:var(--body); font-size:1.2rem; line-height:1; cursor:pointer;
}
.sw-update-close:hover{background:rgba(255,255,255,.06); color:var(--ink)}
@keyframes sw-rise{from{opacity:0; transform:translate(-50%,10px)} to{opacity:1}}