/* ============================================================
   outoftokens.fun
   Day: the waiting room, lit. Night: same room, lights lowered.
   Only the token block below changes between the two.
   ============================================================ */

:root{
  /* surfaces */
  --ground:#D7DBCD;          /* the walls */
  --ground-2:#CBD0C0;        /* recessed panel */
  --enamel:#15170F;          /* the board */
  --enamel-edge:#232619;

  /* text on ground */
  --fg:#191B14;
  --fg-2:#4A4E3D;
  --fg-3:#6E7361;
  --line:rgba(25,27,20,.22);

  /* the ticket — printed, so it stays paper at any hour */
  --paper:#EFEDE4;
  --paper-fg:#191B14;
  --paper-fg-2:#6E7361;
  --paper-line:rgba(25,27,20,.22);
  --paper-link:#8E4106;      /* the ticket is light in both schemes, so this never shifts */

  /* actions */
  --btn-bg:#191B14;          /* selection fills — chips, tags */
  --btn-fg:#EFEDE4;
  --btn-hover:#2F3427;

  --cta-bg:#A64E08;          /* the one button on the machine — painted, not lit */
  --cta-fg:#EFEDE4;
  --cta-hover:#8E4106;       /* presses darken; brightening would sink the label */
  --cta-active:#773605;
  --cta-edge:#5E2B04;
  --link:#8E4106;            /* the amber family, dark enough for body text */

  /* the lit display */
  --amber:#FF8A1E;
  --amber-dim:#7A4713;
  --amber-glow:rgba(255,138,30,.28);
  --board-label:#797F69;
  --board-side:#A8AE96;
  --mast-fg:#D7DBCD;
  --mast-branch:#8C927C;
  --mast-edge:transparent;

  --sign:"Archivo",Helvetica,Arial,sans-serif;
  --body:"Public Sans",Helvetica,Arial,sans-serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --ground:#12140E;
    --ground-2:#1B1E15;
    --enamel:#0A0C06;
    --enamel-edge:#1D2016;

    --fg:#DCE0D0;
    --fg-2:#A0A694;
    --fg-3:#7C8270;
    --line:rgba(220,224,208,.17);

    --paper:#E7E4D6;
    --paper-fg:#191B14;
    --paper-fg-2:#6E7361;
    --paper-line:rgba(25,27,20,.22);

    --btn-bg:#DCE0D0;
    --btn-fg:#12140E;
    --btn-hover:#C2C7B3;

    --cta-bg:#A64E08;
    --cta-fg:#EFEDE4;
    --cta-hover:#B4560A;     /* on a dark ground the press lifts instead */
    --cta-active:#C25E0A;
    --cta-edge:#3D1C02;
    --link:#E8760F;

    --amber-glow:rgba(255,138,30,.34);
    --board-label:#6A7059;
    --board-side:#8B917A;
    --mast-fg:#B9BFAB;
    --mast-branch:#6E7460;
    --mast-edge:rgba(220,224,208,.12);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground);color:var(--fg);
  font-family:var(--body);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
.kicker{
  font-weight:600;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-3);
}

/* masthead */
.mast{
  background:var(--enamel);color:var(--mast-fg);
  border-bottom:1px solid var(--mast-edge);
  display:flex;align-items:center;gap:14px;
  padding:11px clamp(18px,5vw,32px);
}
.mast .name{
  font-family:var(--sign);font-weight:600;font-stretch:112%;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
}
.mast .grow{flex:1}
.mast .branch{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mast-branch)}
.lamp{width:7px;height:7px;background:var(--amber);flex:none}

.wrap{
  width:100%;max-width:640px;margin:0 auto;
  padding:clamp(26px,5vw,44px) clamp(18px,5vw,32px) 40px;
  display:flex;flex-direction:column;flex:1;
}

/* the board */
.board{
  background:var(--enamel);
  padding:20px clamp(18px,4vw,26px) 22px;
  border-bottom:3px solid var(--enamel-edge);
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.board .lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--board-label);margin-bottom:6px}
.digits{
  font-family:var(--sign);font-weight:700;font-stretch:118%;
  font-variant-numeric:tabular-nums;
  font-size:clamp(52px,13vw,76px);line-height:.86;letter-spacing:.07em;
  color:var(--amber);text-shadow:0 0 22px var(--amber-glow);
}
.digits.idle{color:var(--amber-dim);text-shadow:none}
.board .side{text-align:right}
.board .side .v{
  font-family:var(--sign);font-weight:600;font-stretch:110%;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--board-side);
}
.flip{animation:flip .26s ease both}
@keyframes flip{from{opacity:.25;transform:translateY(-7px)}to{opacity:1;transform:none}}

/* notice */
.notice{padding:30px 0 26px;border-bottom:1px solid var(--line)}
h1{
  font-family:var(--sign);font-weight:600;font-stretch:106%;
  font-size:clamp(27px,5.4vw,38px);line-height:1.08;letter-spacing:-.015em;
  margin:12px 0;
}
.notice p{margin:0;max-width:47ch;color:var(--fg-2);font-size:14.5px;text-wrap:pretty}

/* form 429-A */
.form{padding:26px 0 4px}
.form-head{display:flex;align-items:baseline;gap:10px;margin-bottom:22px}
.form-head .rule{flex:1;height:1px;background:var(--line)}
.field{margin-bottom:20px}
.field .q{font-size:14px;font-weight:500;margin-bottom:10px;display:block}
.opts{display:flex;flex-wrap:wrap;gap:7px}
.opt{
  font-family:var(--body);font-size:13px;font-weight:500;
  white-space:nowrap;
  background:transparent;color:var(--fg-2);
  border:1px solid var(--line);border-radius:0;
  padding:9px 13px;cursor:pointer;
  transition:background .13s,color .13s,border-color .13s;
}
.opt:hover{border-color:var(--fg);color:var(--fg)}
.opt[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}

.actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px}
.take{
  font-family:var(--sign);font-weight:600;font-stretch:110%;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--cta-bg);color:var(--cta-fg);
  border:0;border-radius:0;
  border-bottom:3px solid var(--cta-edge);   /* a button you press, not a link */
  padding:15px 26px 13px;cursor:pointer;
  transition:background .13s;
}
.take:hover{background:var(--cta-hover)}
.take:active{
  background:var(--cta-active);
  border-bottom-width:1px;
  padding-bottom:15px;                        /* travels down, like a real one */
}
:where(button,a):focus-visible{outline:2px solid var(--fg);outline-offset:3px}

.allow{display:flex;align-items:center;gap:9px}
.punch{display:flex;gap:5px}
.punch i{
  width:9px;height:9px;background:var(--fg);display:block;
  box-shadow:inset 0 0 0 1px transparent;
  transition:background .45s ease,box-shadow .45s ease;
}
.punch i.spent{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.pro-tag{
  font-family:var(--sign);font-weight:600;font-size:10px;
  letter-spacing:.16em;padding:3px 7px;background:var(--btn-bg);color:var(--btn-fg);
}

/* the department's own observations */
.memo{
  margin:26px 0 0;padding-left:13px;
  border-left:2px solid var(--cta-bg);
  font-size:12.5px;line-height:1.45;color:var(--fg-3);
  max-width:52ch;
}
.memo[hidden]{display:none}

/* ticket */
.out{margin-top:26px}
.ticket{
  background:var(--paper);color:var(--paper-fg);
  padding:20px clamp(18px,4vw,24px) 30px;
  box-shadow:0 14px 30px -22px rgba(0,0,0,.7);
  -webkit-mask:
    linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,
    radial-gradient(circle 5px at 50% 0,#0000 96%,#000) bottom/17px 9px repeat-x;
  mask:
    linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,
    radial-gradient(circle 5px at 50% 0,#0000 96%,#000) bottom/17px 9px repeat-x;
  animation:issue .34s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes issue{from{clip-path:inset(0 0 100% 0);transform:translateY(-10px)}to{clip-path:inset(0 0 0 0);transform:none}}
.ticket .kicker{color:var(--paper-fg-2)}
.t-top{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-bottom:15px;border-bottom:1px dashed var(--paper-line);
}
.t-body{
  font-family:var(--sign);font-weight:500;font-stretch:104%;
  font-size:clamp(20px,4.1vw,26px);line-height:1.3;letter-spacing:-.01em;
  margin:20px 0 18px;text-wrap:pretty;
}
.t-link{
  display:inline-block;margin:0 0 20px;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-fg);text-decoration:none;
  border-bottom:1px solid var(--paper-fg);padding-bottom:2px;
}
.t-link:hover{color:var(--paper-fg-2);border-color:var(--paper-fg-2)}
.t-foot{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:14px;border-top:1px dashed var(--paper-line);
}
.t-print{
  margin-top:12px;font-size:11px;letter-spacing:.06em;
  color:var(--paper-fg-2);text-align:right;
}
.t-print a{color:var(--paper-link);text-decoration:none;border-bottom:1px solid var(--paper-link)}
.t-print a:hover{color:var(--paper-fg);border-color:var(--paper-fg)}

/* suspension */
.susp h2{
  font-family:var(--sign);font-weight:600;font-stretch:106%;
  font-size:clamp(24px,4.8vw,32px);margin:14px 0 12px;letter-spacing:-.015em;
}
.susp p{margin:0 0 26px;max-width:48ch;color:var(--fg-2);font-size:14.5px;text-wrap:pretty}
.plan{background:var(--ground-2);padding:clamp(20px,4vw,28px);margin-top:6px}
.plan .row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:10px 0 18px}
.plan .tier{font-family:var(--sign);font-weight:700;font-stretch:112%;font-size:30px;letter-spacing:-.01em}
.plan .cost{font-size:14px;color:var(--fg-2)}
.plan ul{list-style:none;margin:0 0 22px;padding:0}
.plan li{
  font-size:14px;padding:9px 0;border-bottom:1px solid var(--line);
  display:flex;gap:11px;align-items:center;
}
.plan li::before{content:"";width:11px;height:2px;background:var(--fg);flex:none}
.fine{font-size:12px;color:var(--fg-3);margin:16px 0 0}

/* issuing authority */
.issued{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--fg-2);max-width:50ch;
}
.issued a{color:var(--link);text-decoration:none;border-bottom:1px solid var(--link);padding-bottom:1px;font-weight:500}
.issued a:hover{color:var(--fg);border-color:var(--fg)}

/* footer */
footer{margin-top:auto;padding-top:56px}
.authority{
  background:var(--ground-2);
  border-left:3px solid var(--cta-bg);
  padding:22px clamp(18px,4vw,26px) 24px;
}
.authority-name{
  font-family:var(--sign);font-weight:600;font-stretch:108%;
  font-size:clamp(21px,4vw,26px);letter-spacing:-.01em;
  margin:9px 0 10px;
}
.authority-name a{
  color:var(--link);text-decoration:none;
  border-bottom:2px solid var(--link);padding-bottom:2px;
}
.authority-name a:hover{color:var(--fg);border-color:var(--fg)}
.authority-line{margin:0;font-size:13.5px;line-height:1.5;color:var(--fg-2);max-width:52ch;text-wrap:pretty}
.footline{
  margin-top:22px;display:flex;justify-content:space-between;
  gap:12px;flex-wrap:wrap;align-items:center;
}
.stamp{
  border:1px solid var(--fg);padding:5px 11px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}

/* keep the five-step ladder on one row on narrow phones */
@media (max-width:430px){
  .opt{font-size:12px;padding:8px 8px;letter-spacing:-.005em}
  .opts{gap:4px}
}

@media (max-width:520px){
  .board{align-items:flex-start;flex-direction:column;gap:10px}
  .board .side{text-align:left}
  footer{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}