/* built by stamp.py: style.css + app.css, so an app page asks for one stylesheet instead of two */
/* =========================================================
   TORPOR - warm dark, serif display over mono.
   The ground is a near black with a brown cast, not a true black, so the
   cream type sits warm on it rather than glaring. Metals (silver, gold,
   platinum) are the only other colours and they mean something: they are
   the rarity of a code, never decoration.
   ========================================================= */

/* Self hosted, on purpose. Loading these from Google cost two extra origins
   to resolve, connect to and shake hands with, and on a connection where a
   round trip is 270ms that was most of a second before any text could paint.
   Same files, served from here, on a connection the browser already has. */
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-normal-400.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-italic-400.woff2") format("woff2");
}
@font-face {
  font-family: "Martian Mono"; font-style: normal; font-weight: 300;
  font-display: swap;
  src: url("/fonts/martian-mono-normal-300.woff2") format("woff2");
}
@font-face {
  font-family: "Martian Mono"; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url("/fonts/martian-mono-normal-500.woff2") format("woff2");
}

:root {
  --paper:   #14130f;   /* the room, warm near black */
  --raise:   #181712;   /* panel */
  --rise:    #1f1c15;   /* panel, lifted */
  --rule:    #211e17;   /* hairline */
  --edge:    #2e2a20;   /* visible border */
  --ink:     #ece5d2;   /* cream type */
  --mute:    #8b8273;   /* secondary type */
  --faint:   #5d574b;   /* tertiary, stamps */
  --bone:    #ece5d2;   /* fills: cream block, dark text on top */
  --signal:  #d4603f;   /* errors and live counts only */
  --eth:     #a8dae3;   /* the glow inside the machine */
  --tile:    #ffffff;   /* the art's own ground */

  --silver:   #b9bcc2;
  --gold:     #d8a445;
  --platinum: #9fe4ef;

  --pad: clamp(14px, 2.2vw, 26px);
  --s: min(36vw, 41dvh);

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
img, .lyr { -webkit-user-drag: none; user-select: none; }

/* a single warm light source, high and slightly left */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 40% at 50% 44%, rgba(236, 229, 210, .045), transparent 72%),
    radial-gradient(circle at 1px 1px, rgba(236, 229, 210, .055) 1px, transparent 0);
  background-size: auto, 22px 22px;
}

.frame {
  position: relative; z-index: 2;
  height: 100dvh; width: 100%; max-width: 100%; overflow: hidden;
  padding: var(--pad); display: flex; flex-direction: column;
}
.frame::before {
  content: ""; position: absolute; inset: var(--pad);
  border: 1px solid var(--rule); pointer-events: none;
}
.reg { position: absolute; width: 9px; height: 9px; pointer-events: none; z-index: 2; }
.reg::before, .reg::after { content: ""; position: absolute; background: var(--edge); }
.reg::before { left: 0; right: 0; top: 4px; height: 1px; }
.reg::after { top: 0; bottom: 0; left: 4px; width: 1px; }
.reg.tl { top: calc(var(--pad) - 4px); left: calc(var(--pad) - 4px); }
.reg.tr { top: calc(var(--pad) - 4px); right: calc(var(--pad) - 4px); }
.reg.bl { bottom: calc(var(--pad) - 4px); left: calc(var(--pad) - 4px); }
.reg.br { bottom: calc(var(--pad) - 4px); right: calc(var(--pad) - 4px); }

.lbl {
  font-size: clamp(8px, .72vw, 10px); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
  white-space: nowrap;
}

.bar {
  position: relative; z-index: 3; flex: none; min-width: 0; max-width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: clamp(12px, 1.5vw, 18px) clamp(16px, 1.9vw, 24px);
}

.mark { display: block; width: clamp(132px, 16.5vw, 224px); height: auto; color: var(--ink); flex: none; }
.mark text {
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: "wdth" 125;
  font-weight: 900; font-size: 200px; letter-spacing: -.035em;
  fill: currentColor;
}

main {
  position: relative; z-index: 2;
  overflow: hidden;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 1.3vh, 18px);
  padding: 0 clamp(16px, 1.9vw, 24px);
}

/* ---------------- the dice ---------------- */
.stage {
  position: relative;
  width: min(calc(var(--s) * 1.58), 100%);
  aspect-ratio: 1;
  display: grid; place-items: center;
  perspective: 1400px;
  touch-action: none;
  cursor: grab;
  flex: 0 1 auto;
}
.stage:active { cursor: grabbing; }

.cube {
  position: relative;
  width: var(--s); height: var(--s);
  transform-style: preserve-3d;
  will-change: transform;
}
.face {
  position: absolute; inset: 0;
  background: var(--tile);
  backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 0 60px rgba(232,220,192,.06);
}
.lyr {
  position: absolute; inset: 0;
  background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
  pointer-events: none;
}
.f0 { transform: translateZ(calc(var(--s) / 2)); }
.f1 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.f2 { transform: rotateY(90deg)  translateZ(calc(var(--s) / 2)); }
.f3 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.f4 { transform: rotateX(90deg)  translateZ(calc(var(--s) / 2)); }
.f5 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }

.guard { position: absolute; inset: 0; z-index: 4; }

/* light pooling under the object, not a drop shadow */
.shadow {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--s) * 1.5); height: calc(var(--s) * 0.42);
  transform: translate(-50%, calc(var(--s) * 0.66));
  background: radial-gradient(ellipse at center, rgba(232,220,192,.10), rgba(232,220,192,0) 66%);
  pointer-events: none;
}

.tag {
  margin: 0; text-align: center; flex: none;
  font-size: clamp(11px, 1.25vw, 16px); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.4;
  color: var(--ink);
}

/* ---------------- controls ---------------- */
.apply {
  flex: none;
  font-family: inherit; font-size: clamp(10px, .95vw, 12px); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper); background: var(--ink); border: 1px solid var(--ink);
  padding: clamp(12px, 1.35vw, 17px) clamp(28px, 3.2vw, 46px);
  cursor: pointer; transition: background .16s, border-color .16s, color .16s;
}
.apply:hover { background: var(--bone); border-color: var(--bone); color: var(--paper); }
a.apply { display: inline-block; text-decoration: none; }
button.apply:disabled { opacity: .4; cursor: default; }

a.quiet {
  font-family: inherit; font-size: clamp(8px, .72vw, 10px);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute); text-decoration: none; white-space: nowrap;
}
a.quiet:hover { color: var(--ink); }
.bar a { display: inline-flex; align-items: center; }

.count { display: flex; align-items: baseline; gap: 9px; }
.count .n {
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: "wdth" 110; font-weight: 800;
  font-size: clamp(15px, 1.8vw, 23px); letter-spacing: -.01em;
  color: var(--signal); font-variant-numeric: tabular-nums;
}
.dot {
  display: inline-block; width: 6px; height: 6px;
  background: var(--signal); border-radius: 50%; margin-right: 8px;
  animation: pulse 1.9s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

/* ---------------- forms ---------------- */
.field { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 520px; }
.field input {
  font-family: inherit; font-size: clamp(11px, 1.05vw, 14px);
  padding: clamp(11px, 1.3vw, 15px) 0;
  border: 0; border-bottom: 1px solid var(--edge);
  background: none; color: var(--ink); border-radius: 0;
  width: 100%; min-width: 0;
}
.field input::placeholder { color: var(--mute); }
.field input:focus { outline: none; border-bottom-color: var(--bone); }
.field label { cursor: pointer; }
.row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.err {
  color: var(--signal); font-size: clamp(8px, .72vw, 10px);
  letter-spacing: .1em; text-transform: uppercase; min-height: 1em;
}

:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } * { transition: none !important; } }

@media (max-width: 900px), (max-aspect-ratio: 10/9) {
  :root { --s: min(56vw, 33dvh); }
  .bar { padding: 10px 14px; }
  .tag { margin-top: clamp(22px, 7vh, 62px); }
}
@media (max-height: 460px) { :root { --s: min(26vw, 38dvh); } }

/* =========================================================
   apply page
   ========================================================= */
body.scroll { overflow: auto; }
.frame.tall { height: auto; min-height: 100dvh; }
.sheet-main {
  position: relative; z-index: 2; flex: 1 1 auto;
  display: flex; justify-content: center;
  padding: clamp(24px, 5vh, 64px) clamp(16px, 1.9vw, 24px);
}
.col { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 20px); }
.col > p { margin: 0; }

.brandlink { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.barmark { width: clamp(22px, 2.4vw, 30px); height: auto; display: block; }

.big {
  margin: 0;
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: "wdth" 125; font-weight: 900;
  font-size: min(13vw, 84px); line-height: .85; letter-spacing: -.03em;
}
.sub { color: var(--mute); font-size: clamp(11px, 1.05vw, 13px); }
.fine { color: var(--mute); font-size: 10px; letter-spacing: .06em; margin: 10px 0 0; }
.panel { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.8vw, 20px); }
#s2 { align-items: stretch; }
.panel .row { width: 100%; }
#claim { display: flex; flex-direction: column; align-items: stretch; gap: clamp(14px, 1.8vw, 20px); width: 100%; }

/* stepper */
.steps { list-style: none; margin: 0 0 4px; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.steps li { display: flex; align-items: center; gap: 7px; opacity: .3; }
.steps li.now, .steps li.done { opacity: 1; }
.steps .num {
  width: 19px; height: 19px; border-radius: 50%; flex: none;
  border: 1px solid var(--edge); display: grid; place-items: center;
  font-size: 9px; font-weight: 500; color: var(--mute);
}
.steps li.now .num { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.steps li.done .num { background: var(--bone); color: var(--paper); border-color: var(--bone); font-size: 0; }
.steps li.done .num::after { content: "\2713"; font-size: 10px; }
.steps li + li::before { content: ""; width: 16px; height: 1px; background: var(--rule); margin-right: 3px; }

/* x button */
.xbtn { display: inline-flex; align-items: center; gap: 11px; }
.xbtn svg { width: 1.05em; height: 1.05em; flex: none; }
.xbtn[aria-disabled="true"] { opacity: .35; pointer-events: none; }

.who-row {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: clamp(10px, 1.4vw, 16px); border-bottom: 1px solid var(--rule);
}
.handle {
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: "wdth" 110; font-weight: 800;
  font-size: clamp(14px, 1.5vw, 19px); letter-spacing: -.01em;
}

/* task list, read as an instrument rather than a form */
.tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.task {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
}
.task:first-child { border-top: 1px solid var(--rule); }
.idx {
  font-size: 10px; letter-spacing: .1em; color: var(--edge);
  font-variant-numeric: tabular-nums; flex: none; width: 18px;
}
.tick {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  border: 1px solid var(--edge); background: transparent;
}
.task.done .tick { background: var(--bone); border-color: var(--bone); box-shadow: 0 0 10px rgba(232,220,192,.45); }
.tbody { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.tbody b {
  font-weight: 500; font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: .14em;
}
.how {
  font-size: 8px; letter-spacing: .14em; text-transform: uppercase;
  padding: 2px 5px; border: 1px solid var(--rule); color: var(--mute); flex: none;
}
.how.a { border-color: var(--edge); }
.how.m { color: var(--signal); border-color: rgba(224,84,58,.4); }
.stamp {
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--bone); flex: none;
}
.task.done .tbody b { color: var(--mute); }

/* while a check is in flight */
.tasks.scanning .task:not(.done) .tick { animation: scan .9s ease-in-out infinite; }
.tasks.scanning .task:nth-child(2) .tick { animation-delay: .12s; }
.tasks.scanning .task:nth-child(3) .tick { animation-delay: .24s; }
.tasks.scanning .task:nth-child(4) .tick { animation-delay: .36s; }
@keyframes scan {
  0%, 100% { border-color: var(--edge); }
  50% { border-color: var(--bone); box-shadow: 0 0 8px rgba(232,220,192,.35); }
}

.ghost {
  font-family: inherit; font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 12px; border: 1px solid var(--edge); background: none; color: var(--ink);
  cursor: pointer; text-decoration: none; white-space: nowrap; flex: none;
  transition: background .16s, border-color .16s, color .16s;
}
.ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ghost.off {
  color: var(--edge); border-color: var(--rule); cursor: default;
  background: none;
}
.ghost.off:hover { background: none; border-color: var(--rule); color: var(--edge); }

/* verify row */
.verifybar { display: flex; align-items: center; gap: 14px; width: 100%; }
.meter { flex: 1 1 auto; height: 1px; background: var(--rule); position: relative; overflow: hidden; }
.meter span {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--bone); transition: width .45s ease;
}
.ratio {
  font-size: 10px; letter-spacing: .12em; color: var(--mute);
  font-variant-numeric: tabular-nums; flex: none;
}

.who-row {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: clamp(10px, 1.4vw, 16px); border-bottom: 1px solid var(--rule);
}
.xswap { font-size: 11px; letter-spacing: 0; }

.qhead { display: flex; justify-content: space-between; align-items: baseline; width: 100%; gap: 12px; }

.quotebox {
  border: 1px solid var(--edge); background: var(--raise);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  position: relative;
}
.quotebox::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--bone);
}
.phrase {
  margin: 0; font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: "wdth" 110; font-weight: 800;
  font-size: clamp(15px, 1.9vw, 21px); line-height: 1.25; letter-spacing: -.01em;
  color: var(--bone);
}

/* the live count ticks when it changes */
.count .n .bump, .count .n.bump { display: inline-block; }
@keyframes bump { 0% { transform: translateY(0) } 35% { transform: translateY(-3px) } 100% { transform: translateY(0) } }
#applied.bump, #left.bump { display: inline-block; animation: bump .42s ease-out; }
@media (prefers-reduced-motion: reduce) { #applied.bump, #left.bump { animation: none; } }

/* ================= admin review panel ================= */
.admincol { max-width: 1040px; }
.adminword {
  font-family: Archivo, system-ui, sans-serif; font-variation-settings: "wdth" 125;
  font-weight: 900; font-size: clamp(15px, 1.7vw, 20px); letter-spacing: -.02em;
}
.statrow { display: flex; flex-wrap: wrap; gap: 8px; }
.stat {
  display: inline-flex; align-items: baseline; gap: 7px;
  border: 1px solid var(--rule); padding: 7px 11px;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute);
}
.stat b {
  font-family: Archivo, system-ui, sans-serif; font-variation-settings: "wdth" 110;
  font-weight: 800; font-size: 15px; color: var(--ink); letter-spacing: -.01em;
}
.stat.sep { margin-left: auto; }

.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters .chip {
  font-family: inherit; font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  padding: 8px 13px; border: 1px solid var(--rule); background: none; color: var(--mute);
  cursor: pointer; transition: color .14s, border-color .14s;
}
.filters .chip:hover { color: var(--ink); border-color: var(--edge); }
.filters .chip.on { color: var(--paper); background: var(--ink); border-color: var(--ink); }

.rows { display: flex; flex-direction: column; }
.arow {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 62px minmax(0,1.5fr) 110px 120px auto;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
}
.arow:first-child { border-top: 1px solid var(--rule); }
.acol { min-width: 0; }
.acol.pos { font-size: 10px; color: var(--edge); font-variant-numeric: tabular-nums; }
.acol.id { display: flex; flex-direction: column; gap: 3px; }
.acol.id b { font-weight: 500; font-size: 12px; }
.acol.id .mono { font-size: 10px; color: var(--mute); overflow-wrap: anywhere; }
.acol.tasks { display: flex; align-items: center; gap: 8px; }

.chips4 { display: inline-flex; gap: 3px; }
.c4 {
  width: 17px; height: 17px; display: grid; place-items: center;
  font-size: 8px; border: 1px solid var(--rule); color: var(--edge);
}
.c4.on { background: var(--bone); border-color: var(--bone); color: var(--paper); }

.pill {
  display: inline-block; font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 9px; border: 1px solid var(--rule); color: var(--mute); white-space: nowrap;
}
.pill.review { color: var(--ink); border-color: var(--edge); }
.pill.approved { color: var(--paper); background: var(--bone); border-color: var(--bone); }
.pill.rejected { color: var(--signal); border-color: rgba(224,84,58,.45); }
.pill b { font-weight: 700; }

.acol.acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tgroup { display: inline-flex; }
.tbtn {
  font-family: Archivo, system-ui, sans-serif; font-weight: 800; font-size: 11px;
  width: 28px; height: 28px; border: 1px solid var(--edge); background: none;
  color: var(--ink); cursor: pointer; margin-left: -1px;
  transition: background .14s, color .14s, border-color .14s;
}
.tbtn:first-child { margin-left: 0; }
.tbtn:hover { background: var(--bone); border-color: var(--bone); color: var(--paper); }
.tbtn.on { background: var(--bone); border-color: var(--bone); color: var(--paper); }
.mini {
  font-family: inherit; font-size: 8px; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 10px; border: 1px solid var(--edge); background: none; color: var(--ink);
  cursor: pointer; white-space: nowrap; transition: background .14s, color .14s;
}
.mini:hover { background: var(--ink); color: var(--paper); }
.mini.bad { color: var(--signal); border-color: rgba(224,84,58,.4); }
.mini.bad:hover { background: var(--signal); border-color: var(--signal); color: var(--paper); }
.mini:disabled, .tbtn:disabled { opacity: .4; cursor: default; }

@media (max-width: 860px) {
  .arow { grid-template-columns: 54px minmax(0,1fr) auto; row-gap: 10px; }
  .acol.tasks { grid-column: 2; }
  .acol.state { grid-column: 3; text-align: right; }
  .acol.acts { grid-column: 1 / -1; justify-content: flex-start; }
  .stat.sep { margin-left: 0; }
}

/* tier, deliberately quiet next to the status */
.statusrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tierbadge {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(232,220,192,.35); padding: 4px 9px;
  font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: var(--bone);
  white-space: nowrap;
}
.tierbadge b {
  font-family: Archivo, system-ui, sans-serif; font-weight: 900;
  font-size: 12px; letter-spacing: 0;
}

/* links must not tint the wordmark */
.brandlink, .brandlink:visited { color: var(--ink); }
.brandlink:hover { color: var(--ink); }
/* a long queue reads top down, not vertically centred */
body.admin .sheet-main { justify-content: flex-start; align-items: center; padding-top: clamp(18px, 3vh, 34px); }
body.admin .admincol { gap: clamp(12px, 1.6vw, 18px); }

/* a task waiting on the announcement post, not a broken one */
.task.paused { opacity: .42; }
.task.paused .how { border-style: dashed; }
.paused-note { color: var(--bone); letter-spacing: .1em; text-transform: uppercase; }

/* the task you should be doing right now */
.task.now { position: relative; }
.task.now::before {
  content: ""; position: absolute; left: -14px; top: 50%;
  width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: var(--bone); box-shadow: 0 0 8px rgba(232,220,192,.8);
}
.task.now .tbody b { color: var(--ink); }
.task:not(.now):not(.done):not(.paused) .tbody b { color: var(--mute); }
.tacts { display: inline-flex; gap: 6px; align-items: center; flex: none; }
.ghost.solid { background: var(--bone); border-color: var(--bone); color: var(--paper); }
.ghost.solid:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* paste the quote link instead of waiting on a timeline sweep */
.qsubmit { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 4px;
           border-top: 1px solid var(--rule); padding-top: 14px; }
.qrow { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.qrow input {
  flex: 1 1 260px; min-width: 0;
  font-family: inherit; font-size: 12px; color: var(--ink);
  background: none; border: 1px solid var(--edge); border-radius: 0;
  padding: 10px 12px;
}
.qrow input::placeholder { color: var(--mute); }
.qrow input:focus { outline: none; border-color: var(--bone); }


/* ================= the status card =================
   Three genuinely different objects, not one card with a different word in it.
   PENDING   restrained, dashed, provisional
   REVIEW    sharpened, white, active
   APPROVED  bone, lit, with a holographic sweep. It should feel won.
   Named .pass, not .tag, so it never collides with the landing tagline.    */
.col.board { max-width: 640px; }

/* A ticket: a stub holding the art and the number, then a tear, then the
   decision. Wide enough and the two sit side by side with the tear running
   down between them, which is the shape a real ticket has and the shape
   that previews properly when it is posted. Narrow, it stacks and the tear
   turns horizontal. Nothing is clipped, because the notches have to hang
   over the edges to read as punched out. */
.pass {
  --accent: var(--mute);
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; margin: 0;
  text-align: left; text-transform: none; font-size: 13px;
  letter-spacing: 0; line-height: 1.5; color: var(--ink);
  filter: drop-shadow(0 18px 44px rgba(0, 0, 0, .55));
}
.pass-stub, .pass-body {
  position: relative; z-index: 1; background: #070605;
  border: 1px solid var(--edge);
  padding: clamp(20px, 3.4vw, 28px);
  display: flex; flex-direction: column; gap: clamp(13px, 2vw, 18px);
}
.pass-stub { border-radius: 4px 4px 0 0; border-bottom: 0; }
.pass-body { border-radius: 0 0 4px 4px; border-top: 0; }
/* the coloured spine, one continuous stroke down the whole ticket */
.pass-stub::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); z-index: 2; border-radius: 4px 0 0 0;
}
.pass > * { position: relative; z-index: 1; }

/* the tear: a dashed rule between two punched holes */
.perf {
  position: relative; z-index: 2; height: 0;
  border-top: 1px dashed var(--edge);
  margin: 0 17px;
}
.perf .notch {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--edge);
  top: 50%; margin-top: -9px;
}
.perf .notch.nl { left: -27px; }
.perf .notch.nr { right: -27px; }

@media (min-width: 720px) {
  .col.board { max-width: 920px; }
  .pass { flex-direction: row; align-items: stretch; }
  /* the stub is the fixed half: the art decides its width */
  .pass-stub {
    flex: 0 0 42%; border-radius: 4px 0 0 4px;
    border-bottom: 1px solid var(--edge); border-right: 0;
  }
  .pass-body {
    flex: 1 1 auto; min-width: 0; border-radius: 0 4px 4px 0;
    border-top: 1px solid var(--edge); border-left: 0;
  }
  .pass-stub::before { border-radius: 4px 0 0 4px; }
  .perf {
    height: auto; width: 0; margin: 17px 0;
    border-top: 0; border-left: 1px dashed var(--edge);
  }
  .perf .notch { top: auto; margin-top: 0; left: -9px; }
  .perf .notch.nl { top: -27px; }
  .perf .notch.nr { bottom: -27px; }
  /* Side by side, the stub sets the height of the whole ticket, so the art
     is capped rather than filling its column. Letting it fill made a card
     half as tall again as it was wide, which is not a ticket and does not
     preview as one either. */
  .pass-art { width: min(100%, 216px); align-self: flex-start; }
  .serial { font-size: clamp(44px, 5vw, 62px); }
  .pass-stub { justify-content: space-between; }
  /* the body reads top down and the footer is pinned, rather than the
     whole column being spread out with holes between every line */
  .pass-body { gap: 20px; }
  /* the verdict group sits at the top and the record at the bottom, so the
     slack between them reads as two groups rather than one hole */
  .pass-body .specs { margin-top: auto; }
  /* the record spreads out instead of stacking two to a row */
  .specs { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
}

.holo { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; }

/* The accent is the tier when there is one, because the tier is the thing
   the holder actually cares about, and the status otherwise. */
.pass[data-status="pending"] .pass-stub,
.pass[data-status="pending"] .pass-body { border-style: dashed; }
.pass[data-status="pending"] .pass-stub { border-bottom: 0; }
.pass[data-status="pending"] .pass-body { border-top: 0; }
.pass[data-status="review"]   { --accent: var(--ink); }
.pass[data-status="approved"] { --accent: var(--bone); }
.pass[data-status="rejected"] { --accent: var(--signal); }
.pass[data-tier="A"] { --accent: var(--platinum); }
.pass[data-tier="B"] { --accent: var(--gold); }
.pass[data-tier="C"] { --accent: var(--silver); }

.pass[data-status="approved"] .pass-stub,
.pass[data-status="approved"] .pass-body { border-color: rgba(232, 220, 192, .3); }
.pass[data-status="approved"] .holo {
  opacity: 1;
  background:
    radial-gradient(70% 60% at 14% 0%, rgba(232, 220, 192, .13), transparent 62%),
    linear-gradient(104deg, transparent 40%, rgba(232, 220, 192, .07) 49%, transparent 58%);
}

.pass-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pass-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: Archivo, system-ui, sans-serif; font-variation-settings: "wdth" 125;
  font-weight: 900; font-size: 14px; letter-spacing: -.01em;
}
.pass-brand img { width: 20px; height: auto; display: block; }
.pass-kind {
  font-size: 8px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent);
}

/* the art, framed and square, on its own ground so the frog reads */
.pass-art {
  margin: 0; position: relative; align-self: center;
  width: min(300px, 74%); aspect-ratio: 1;
  border: 1px solid var(--edge); border-radius: 3px;
  background: var(--tile, #fff);
  display: grid; place-items: center; overflow: hidden;
}
.pass-art img { width: 100%; height: 100%; object-fit: cover; display: none; }
.pass-art.has img { display: block; }
.pass-art.has .pass-artnone { display: none; }
.pass-art:not(.has) { background: #0c0b09; border-style: dashed; }
.pass-artnone {
  font-size: 8px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--faint);
}

.pass-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.klabel { font-size: 8px; letter-spacing: .26em; text-transform: uppercase; color: var(--mute); }
.serial {
  font-family: Archivo, system-ui, sans-serif; font-variation-settings: "wdth" 110;
  font-weight: 900; font-size: clamp(50px, 13vw, 84px); line-height: .84;
  letter-spacing: -.045em; font-variant-numeric: tabular-nums;
}
.pass[data-status="approved"] .serial { color: var(--bone); }
.pass-who {
  margin-top: 5px; font-size: 11px; letter-spacing: .06em; color: var(--mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.verdict { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.state {
  font-family: Archivo, system-ui, sans-serif; font-variation-settings: "wdth" 110;
  font-weight: 900; font-size: clamp(26px, 7vw, 40px); line-height: 1;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--accent);
}
.tierline {
  font-size: 8px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute); max-width: 190px;
}

.code { display: flex; align-items: stretch; gap: 3px; height: 36px; overflow: hidden; }
.code b { display: block; min-width: 1px; background: var(--accent); }

/* the record */
.specs {
  margin: 0; display: grid; gap: 14px 18px;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  border-top: 1px solid var(--rule); padding: 16px 0 0;
}
.specs > div { min-width: 0; }
.specs dt { font-size: 8px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
.specs dd {
  margin: 0; font-size: 12px; font-weight: 500; overflow-wrap: anywhere;
  font-family: Archivo, system-ui, sans-serif; font-variation-settings: "wdth" 110;
}
.specs dd.mono { font-family: "Martian Mono", monospace; font-size: 10px; font-weight: 400; }

.rail { list-style: none; margin: 0; padding: 0; display: flex; }
.rail li {
  flex: 1 1 0; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
  font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: var(--edge);
}
.rail li i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--edge); display: block; flex: none; }
.rail li::before {
  content: ""; position: absolute; left: 9px; right: 0; top: 4px; height: 1px; background: var(--rule);
}
.rail li:last-child::before { display: none; }
.rail li.done { color: var(--mute); }
.rail li.done i { background: var(--mute); border-color: var(--mute); }
.rail li.done::before { background: var(--mute); }
.rail li.now { color: var(--ink); }
.rail li.now i {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
}

.pass-foot {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--rule); padding-top: 14px;
  font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute);
}

.boardacts { margin-top: 6px; }
.pickline { margin: 6px 0 0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.pickline b { color: var(--bone); font-weight: 500; }

@media (max-width: 480px) {
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pass-art { width: min(260px, 82%); }
}

/* Narrow screens: the row ran out of width and the buttons landed on top of
   the AUTO chip, so the actions drop to their own line and get a tap target
   worth the name. */
@media (max-width: 560px) {
  .task {
    display: grid; align-items: center;
    grid-template-columns: 18px 9px minmax(0, 1fr);
    grid-template-areas: "idx tick body"
                         "idx acts acts";
    column-gap: 10px; row-gap: 9px; padding: 14px 0;
  }
  .idx  { grid-area: idx; align-self: start; padding-top: 3px; }
  .tick { grid-area: tick; }
  .tbody { grid-area: body; }
  .tacts { grid-area: acts; justify-self: start; gap: 8px; flex-wrap: wrap; }
  .task .ghost { padding: 13px 18px; font-size: 10px; }
  .task.done .tacts, .task.paused .tacts { justify-self: start; }
  .task.now::before { left: -11px; top: 22px; margin-top: 0; }
}

/* The rooms, shown on the landing page only once someone is signed in. */
.frame .rooms { display: flex; gap: 2px; margin-left: auto; }
.frame .rooms a {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute); text-decoration: none; padding: 7px 11px;
  border: 1px solid transparent; border-radius: 2px;
}
.frame .rooms a:hover { color: var(--ink); border-color: var(--rule); }

/* the one line on the allowlist card that says where someone stands */
.standline {
  font-size: 11px; line-height: 1.8; color: var(--mute);
  margin: 14px 0 0; max-width: 46ch;
}

/* what actually moves a pending application along */
.talkline {
  font-size: 11px; line-height: 1.85; color: var(--mute);
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--rule);
  max-width: 46ch;
}
.talkline a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.talkline a:hover { color: var(--bone); }

/* =========================================================
   TORPOR app - the signed in side of the site.
   Four rooms behind one gate: apply, codes, users, profile.
   Everything here assumes style.css has already set the tokens.
   ========================================================= */

/* ---------------------------------------------------------------- shell */
body.app {
  overflow: auto;
  font-family: var(--mono);
}
.app .wrap {
  position: relative; z-index: 1;
  max-width: 1120px; margin: 0 auto;
  padding: 0 var(--pad) 80px;
}

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  padding: 14px 0 12px;
  background: linear-gradient(var(--paper) 72%, transparent);
  backdrop-filter: blur(6px);
}
.topbar .mark { height: 26px; width: auto; display: block; }
.brandlink { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brandlink b {
  font-family: var(--serif); font-size: 22px; font-weight: 400;
  letter-spacing: .01em;
}

/* the four rooms */
.rooms { display: flex; gap: 2px; margin-left: auto; }
.rooms a {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute); text-decoration: none;
  padding: 9px 14px; border: 1px solid transparent; border-radius: 2px;
  transition: color .15s, background .15s, border-color .15s;
}
.rooms a:hover { color: var(--ink); border-color: var(--rule); }
.rooms a.on { color: var(--paper); background: var(--bone); border-color: var(--bone); }

.me { display: flex; align-items: center; gap: 9px; }
.me img { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--edge); }
.me .h { font-size: 10px; letter-spacing: .1em; color: var(--mute); }

/* ---------------------------------------------------------------- type */
.app h1, .app .display {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 7vw, 76px); line-height: .96;
  letter-spacing: -.012em; margin: 26px 0 10px; color: var(--ink);
}
.app h1 em { font-style: italic; }
.app h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 3vw, 31px); letter-spacing: -.005em;
  margin: 0 0 4px;
}
.lede {
  color: var(--mute); font-size: 12px; line-height: 1.85;
  max-width: 54ch; margin: 0 0 26px;
}
.kicker {
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 10px;
}

/* ---------------------------------------------------------------- panels */
.slab {
  background: var(--raise); border: 1px solid var(--rule);
  border-radius: 3px; padding: 22px;
}
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.tilerow { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.tile {
  flex: 1 1 130px; background: var(--raise);
  border: 1px solid var(--rule); border-radius: 3px; padding: 13px 15px;
}
.tile b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: 30px; line-height: 1; color: var(--ink); margin-bottom: 6px;
}
.tile span {
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
}

/* ---------------------------------------------------------------- machine */
.machine {
  position: relative; display: grid; place-items: center;
  padding: 10px 0 4px;
}
.machine img {
  width: min(420px, 78vw); height: auto; display: block;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55));
  transition: transform .4s cubic-bezier(.2, .8, .3, 1);
}
.machine.ready img { cursor: pointer; }
.machine.ready:hover img { transform: translateY(-5px); }
.machine.working img { animation: shake .42s ease-in-out 3; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-5px, 1px) rotate(-.7deg); }
  75% { transform: translate(5px, -1px) rotate(.7deg); }
}
/* the glow behind the glass, lit only while it runs */
.machine::before {
  content: ""; position: absolute; width: 46%; aspect-ratio: 1;
  left: 9%; top: 12%; border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 218, 227, .5), transparent 68%);
  opacity: 0; transition: opacity .35s; pointer-events: none;
}
.machine.working::before { opacity: 1; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.machine.empty img { filter: grayscale(.85) brightness(.5); }

.machinebar {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 10px; flex-wrap: wrap;
}

/* ---------------------------------------------------------------- code */
/* A code is drawn as a block: a header strip, a hash, and the payload. */
.cblk {
  --metal: var(--silver);
  background: var(--raise); border: 1px solid var(--edge);
  border-top: 2px solid var(--metal);
  border-radius: 3px; padding: 0; overflow: hidden;
  width: 100%; max-width: 360px; margin-inline: auto;
}
.cblk.gold { --metal: var(--gold); }
.cblk.platinum { --metal: var(--platinum); }

.cblk .chead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--rule);
  background: linear-gradient(var(--rise), var(--raise));
}
.cblk .metal {
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--metal);
}
.cblk .blockno { font-size: 9px; letter-spacing: .14em; color: var(--faint); }
.cblk .chash {
  font-size: 9px; color: var(--faint); padding: 8px 14px;
  border-bottom: 1px solid var(--rule); word-break: break-all;
}
.cblk .barwrap {
  position: relative; padding: 18px 14px 12px; background: #0b0a08;
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 0 44px rgba(0, 0, 0, .6) inset;
  height: 108px;
}
.cblk .bars { display: block; height: 100%; }
/* the bars carry their own metal gradient, set in the svg */
.cblk .barwrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    transparent 0 3px, rgba(0, 0, 0, .35) 3px 4px);
}
.cblk .token {
  font-size: 14px; letter-spacing: .2em; text-align: center;
  padding: 12px 14px 4px; color: var(--ink);
}
.cblk.spent { opacity: .42; }
.cblk.spent .bars { filter: grayscale(1) brightness(.7); }

/* ---------------------------------------------------------------- card */
/* The frog is generated per card, never taken from the collection, so the
   4,444 stay unseen until mint. The card frame, the tier and the progress are
   all drawn here, which keeps a C to B promotion a class change. */
.tcard {
  --frame: var(--silver);
  --aura: rgba(185, 188, 194, .3);
  position: relative; width: 100%; aspect-ratio: 5 / 7;
  perspective: 1100px; background: none; border: 0; padding: 0;
}
.tcard.b { --frame: var(--gold); --aura: rgba(216, 164, 69, .34); }
.tcard.a { --frame: var(--platinum); --aura: rgba(159, 228, 239, .4); }

.tcard .flip {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.3, .9, .25, 1);
}
.tcard.down .flip { transform: rotateY(180deg); }

.tcard .face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border: 1px solid var(--frame); border-radius: 7px;
  padding: 11px 12px; display: flex; flex-direction: column;
  background: linear-gradient(168deg, var(--rise), var(--raise) 60%, #100f0c);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .4) inset;
  overflow: hidden;
}
.tcard .back {
  transform: rotateY(180deg);
  align-items: center; justify-content: center; gap: 14px;
  background:
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(236,229,210,.028) 7px 14px),
    linear-gradient(168deg, var(--rise), #0e0d0a);
}
.tcard .back .bmark {
  width: 46%; aspect-ratio: 1;
  background: url("/brand/logo/torpor-mark-white.svg") center/contain no-repeat;
  opacity: .16;
}
.tcard .back .blabel {
  font-size: 9px; letter-spacing: .4em; color: var(--faint); text-indent: .4em;
}

/* a top light that follows the tier */
.tcard .front::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--frame); opacity: .85;
}
.tcard.a .front::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, transparent 36%,
              rgba(159, 228, 239, .14) 47%, transparent 58%);
}

.tcard .chrome {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.tcard .serial {
  font-size: 7.5px; letter-spacing: .18em; color: var(--faint);
}
.tcard .tier {
  font-size: 9px; letter-spacing: .1em; padding: 2px 7px; flex: none;
  border: 1px solid var(--frame); color: var(--frame); border-radius: 2px;
}
.tcard.a .tier { background: var(--frame); color: #0d1416; }

/* the chamber the specimen is held in */
.tcard .art {
  position: relative; margin: 9px 0 10px; aspect-ratio: 1;
  border-radius: 4px; overflow: hidden;
  background: var(--tile);
  box-shadow: 0 0 0 1px rgba(236, 229, 210, .07) inset;
  display: grid; place-items: center;
}
.tcard .art img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.tcard .stasis {
  position: absolute; right: 6px; bottom: 5px;
  font-size: 6px; letter-spacing: .2em; text-transform: uppercase;
  color: #0c0b09; opacity: .4;
}

.tcard .cname {
  font-family: var(--serif); font-size: clamp(13px, 2.3vw, 18px);
  line-height: 1.05; color: var(--ink); margin-bottom: 7px;
}
.tcard .stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px;
  font-size: 7.5px; letter-spacing: .08em; color: var(--mute);
}
.tcard .stats b { color: var(--ink); float: right; font-weight: 500; }
.tcard .pbar {
  height: 2px; background: var(--rule); margin-top: 7px; border-radius: 2px;
  overflow: hidden; flex: none;
}
.tcard .pbar i { display: block; height: 100%; background: var(--frame); }
.tcard .cfootr {
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 6px;
  font-size: 7px; letter-spacing: .06em; color: var(--faint);
  white-space: nowrap; overflow: hidden;
}

.cards {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* ------------------------------------------------------- opening a box */
/* The machine has to look like it did something. Four beats: it wakes, the
   chamber charges, the slot throws light, and the code prints out of the
   slot into the page. The last one is the trick: the block is clipped from
   the top so it reads as paper being fed, not as a div fading in. */

.machine { position: relative; }

/* the dispensing slot, over the tray at the foot of the cabinet */
.slot {
  position: absolute; left: 47%; bottom: 10%;
  width: 24%; height: 7px; transform: translateX(-50%);
  border-radius: 2px; background: #07060500;
  pointer-events: none; transition: background .3s;
}
.machine.working .slot { background: #070605; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }

/* light spilling out of the slot while it runs */
.slot::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 150%; height: 70px; transform: translateX(-50%);
  background: linear-gradient(rgba(168, 218, 227, .45), transparent 76%);
  clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%);
  opacity: 0; transition: opacity .3s;
}
.machine.working .slot::after { opacity: 1; animation: beam 1.1s ease-in-out infinite; }
@keyframes beam { 50% { opacity: .45; } }

.machine.working img { animation: judder .42s ease-in-out 4; }
@keyframes judder {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  22% { transform: translate(-5px, 2px) rotate(-.8deg); }
  64% { transform: translate(5px, -2px) rotate(.8deg); }
}

/* the chamber charging behind the glass */
.machine::before {
  content: ""; position: absolute; width: 46%; aspect-ratio: 1;
  left: 9%; top: 12%; border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 218, 227, .5), transparent 68%);
  opacity: 0; transition: opacity .35s; pointer-events: none;
}
.machine.working::before { opacity: 1; animation: charge 1.6s ease-in forwards; }
@keyframes charge {
  0% { opacity: .15; transform: scale(.7); }
  70% { opacity: 1; transform: scale(1.2); }
  100% { opacity: .9; transform: scale(1.06); }
}
.machine.empty img { filter: grayscale(.85) brightness(.5); }
.machine.ready img { cursor: pointer; }
.machine.ready:hover img { transform: translateY(-5px); }
.machine img {
  width: min(420px, 78vw); height: auto; display: block;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55));
  transition: transform .4s cubic-bezier(.2, .8, .3, 1);
}

.machinebar {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 10px; flex-wrap: wrap;
}

/* the flash that hides the cut */
.flashlayer {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, #fff, rgba(168,218,227,.5) 32%, transparent 62%);
  opacity: 0;
}
.flashlayer.go { animation: flash .55s ease-out forwards; }
@keyframes flash {
  0% { opacity: 0; }
  12% { opacity: .92; }
  100% { opacity: 0; }
}

/* the code being fed out of the machine */
.cblk.arrive {
  animation: printout 1.05s cubic-bezier(.22, .85, .3, 1) both;
  transform-origin: top center;
}
@keyframes printout {
  0% { clip-path: inset(100% 0 0 0); transform: translateY(-54px) rotate(-1.4deg); }
  55% { clip-path: inset(18% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); transform: translateY(0) rotate(0); }
}
.cblk.arrive .barwrap::before {
  content: ""; position: absolute; left: 0; right: 0; height: 40%;
  background: linear-gradient(rgba(168,218,227,.55), transparent);
  animation: scanline 1.1s ease-out .5s both; pointer-events: none;
}
@keyframes scanline {
  0% { opacity: .85; transform: translateY(-100%); }
  100% { opacity: 0; transform: translateY(160%); }
}

/* platinum and gold deserve more than a fade */
.cblk.platinum.arrive { animation: printout 1.05s cubic-bezier(.22,.85,.3,1) both, shine 1.6s ease-out .6s; }
@keyframes shine {
  0%, 100% { box-shadow: 0 0 0 0 rgba(159, 228, 239, 0); }
  35% { box-shadow: 0 0 44px 4px rgba(159, 228, 239, .5); }
}
.cblk.gold.arrive { animation: printout 1.05s cubic-bezier(.22,.85,.3,1) both, shineg 1.6s ease-out .6s; }
@keyframes shineg {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216, 164, 69, 0); }
  35% { box-shadow: 0 0 40px 3px rgba(216, 164, 69, .42); }
}

/* what the machine says while it works */
.mstage {
  text-align: center; font-size: 9px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--eth); min-height: 14px;
  margin-top: 10px;
}

/* the fresh one sits right under the machine, so it reads as having come
   out of it rather than appearing somewhere else on the page */
#reveal { margin-top: 4px; }
#revealslot { display: flex; justify-content: center; }
#revealslot > .cblk, #revealslot > div { margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .machine.working img, .machine.working::before, .machine.working .slot::after,
  .cblk.arrive, .flashlayer.go { animation: none !important; }
  .tcard .flip { transition: none; }
}

/* ---------------------------------------------------------------- users */
.users { display: flex; flex-direction: column; gap: 1px; }
.urow {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 30px 34px minmax(0, 1fr) repeat(4, minmax(56px, 72px)) 42px 50px;
  padding: 12px 14px; background: var(--raise);
  border: 1px solid var(--rule); border-radius: 3px;
}
/* the four counts travel together, which is what lets them drop to their own
   line on a phone instead of each fighting for a column */
.nums { display: contents; }
.urow:hover { border-color: var(--rule); }
.urow .rank {
  font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums;
}
.urow .pfp {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--edge); object-fit: cover; background: var(--rise);
}
.urow .who { min-width: 0; }
.urow .who b {
  display: block; font-size: 12px; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.urow .who span {
  display: block; font-size: 9px; color: var(--faint); letter-spacing: .06em;
  /* a long handle plus an applicant number used to wrap and make one row
     taller than the rest, which is what made the list look ragged */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.urow .who a { color: inherit; text-decoration: none; }
.urow .who a:hover { color: var(--ink); text-decoration: underline; }
.urow .num { text-align: right; font-size: 11px; color: var(--ink); font-variant-numeric: tabular-nums; }
.urow .num i { display: block; font-size: 8px; font-style: normal; color: var(--faint); letter-spacing: .12em; }
/* tier and score are separate facts and were sharing one cell, which read
   as one overwriting the other */
.urow .best {
  text-align: right; font-size: 12px; letter-spacing: .08em; color: var(--faint);
}
.urow .best.tA { color: var(--platinum); }
.urow .best.tB { color: var(--gold); }
.urow .best.tC { color: var(--silver); }
.urow .score { font-size: 13px; color: var(--ink); }
.uhead {
  display: grid; gap: 12px; padding: 0 14px 10px;
  grid-template-columns: 30px 34px minmax(0, 1fr) repeat(4, minmax(56px, 72px)) 42px 50px;
  font-size: 8px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint);
}
.uhead > span:nth-child(n+4), .uhead .nums > span { text-align: right; }
.urow .num, .uhead .nums > span { min-width: 0; }

.sorts { display: flex; gap: 2px; margin: 0 0 14px; flex-wrap: wrap; }
.sorts button {
  font-family: inherit; font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 13px; border: 1px solid var(--rule); border-radius: 2px;
  background: none; color: var(--mute); cursor: pointer;
}
.sorts button.on { background: var(--bone); border-color: var(--bone); color: var(--paper); }

/* ---------------------------------------------------------------- bits */
.fill {
  font-family: inherit; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  padding: 13px 22px; border: 1px solid var(--bone); border-radius: 2px;
  background: var(--bone); color: var(--paper); cursor: pointer; text-decoration: none;
  display: inline-block; transition: opacity .15s;
}
.fill:hover { opacity: .86; }
.fill:disabled { opacity: .4; cursor: default; }
.line {
  font-family: inherit; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  padding: 13px 22px; border: 1px solid var(--edge); border-radius: 2px;
  background: none; color: var(--ink); cursor: pointer; text-decoration: none;
  display: inline-block;
}
.line:hover { border-color: var(--ink); }
.note { font-size: 10px; color: var(--mute); letter-spacing: .06em; line-height: 1.8; }
.app .bad { color: var(--signal); }
.empty {
  border: 1px dashed var(--edge); border-radius: 3px; padding: 34px 22px;
  text-align: center; color: var(--mute); font-size: 11px; line-height: 1.9;
}

@media (max-width: 780px) {
  .rooms { order: 3; width: 100%; margin: 6px 0 0; justify-content: space-between; }
  .rooms a { flex: 1; text-align: center; padding: 10px 6px; }
  .topbar { flex-wrap: wrap; }
  /* On a phone the board stops pretending to be a table. Identity on the
     first line, the counts as a strip underneath, which reads far better
     than nine columns fighting over 390 pixels. */
  .uhead { display: none; }
  .urow {
    grid-template-columns: 24px 34px minmax(0, 1fr) 30px 44px;
    grid-template-areas: "rank pfp who tier score"
                         "nums nums nums nums nums";
    row-gap: 10px; column-gap: 10px; padding: 13px 14px;
  }
  .urow .rank  { grid-area: rank; }
  .urow .pfp   { grid-area: pfp; }
  .urow .who   { grid-area: who; }
  .urow .best  { grid-area: tier; }
  .urow .score { grid-area: score; }
  .nums {
    grid-area: nums; display: flex; gap: 16px; flex-wrap: wrap;
  }
  .urow .num {
    min-width: 0; text-align: left; font-size: 11px;
    display: flex; align-items: baseline; gap: 5px;
  }
  .urow .num i { display: inline; font-size: 8px; }
  .urow .who b { font-size: 13px; }
  .urow .hidesm, .uhead .hidesm { display: none; }
}

/* ---------------------------------------------------------------- control */
.app .mono { font-size: 9px; color: var(--faint); letter-spacing: .04em; }
.arow2, .ahead2 { grid-template-columns: 46px minmax(0, 1fr) 118px 104px 104px auto; }
.arow2 .acts { display: flex; gap: 5px; justify-content: flex-end; flex-wrap: wrap; }
.ahead2 > span:nth-child(n+3) { text-align: right; }
/* the handle opens the account on X. It carries a standing underline rather
   than only showing one on hover, because nothing else in the row is a link
   and a reviewer should not have to go looking for it */
.arow2 .who a {
  text-decoration: underline; text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.arow2 .who a:hover { text-decoration-color: currentColor; }

/* how far an applicant carries, and from where. Two facts that are only
   useful next to each other, so they share one cell. */
.urow .reach b { display: block; font-weight: 500; font-size: 12px; }
.urow .reach .ctry {
  display: block; margin-top: 2px; font-size: 9px; font-style: normal;
  letter-spacing: .04em; color: var(--mute); text-transform: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* worked out from a city rather than stated, so it is held a shade back */
.urow .reach .ctry.guess { color: var(--faint); }
/* only what they typed about themselves, with no address to check it against */
.urow .reach .ctry.claim { color: var(--faint); font-style: italic; }
/* a vpn, a data centre, or an address shared with other applicants */
.urow .reach .ctry.warn { color: var(--signal); }
/* whatever they actually typed, when it is not a place at all */
.urow .reach .ctry.odd { color: var(--faint); opacity: .62; font-size: 8.5px; }
.urow .reach .odd { color: var(--faint); }

.lookrow {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; margin: 0 0 10px;
}
.lookrow .note { margin: 0; font-size: 9px; letter-spacing: .1em; }
/* the second row of buttons under the status tabs: same shape, quieter, so
   the two rows read as filter then order rather than two sets of filters */
.subsort { margin: -6px 0 10px; }
.subsort button { font-size: 8.5px; padding: 6px 11px; opacity: .85; }
.subsort button.on { opacity: 1; }
/* what the person actually said, above the answer the bot drafted */
.qsaid {
  margin: 0 0 10px; padding: 10px 12px;
  border-left: 2px solid var(--rule); background: var(--paper);
  font-size: 11px; line-height: 1.5; color: var(--mute);
}
.lookgap { flex: 1 1 auto; }
.morerow { display: flex; justify-content: center; margin: 14px 0 0; }
.tbtn, .mini {
  font-family: inherit; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 10px; border: 1px solid var(--edge); border-radius: 2px;
  background: none; color: var(--mute); cursor: pointer;
}
.tbtn:hover, .mini:hover { color: var(--ink); border-color: var(--ink); }
.tbtn.on { background: var(--bone); border-color: var(--bone); color: var(--paper); }
.mini.bad { color: var(--signal); border-color: rgba(212, 96, 63, .4); }

.chips4 { display: inline-flex; gap: 3px; }
.c4 {
  width: 15px; height: 15px; display: grid; place-items: center;
  font-size: 7px; border: 1px solid var(--rule); color: var(--faint); border-radius: 2px;
}
.c4.on { background: var(--bone); border-color: var(--bone); color: var(--paper); }
/* passed the check, then took it back. Filled like a pass, because it was
   one, but in the colour the rest of the panel uses for a problem */
.c4.undone {
  background: var(--signal); border-color: var(--signal); color: var(--paper);
}

.mname { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.mname.silver { color: var(--silver); }
.mname.gold { color: var(--gold); }
.mname.platinum { color: var(--platinum); }

.oddsgrid { display: grid; gap: 9px; }
.oddline { display: flex; align-items: center; gap: 12px; }
.oddline .mname { flex: 1 1 auto; }
.oddline input, .tcell input {
  width: 74px; background: var(--paper); border: 1px solid var(--edge);
  color: var(--ink); font-family: inherit; font-size: 13px;
  padding: 9px 10px; border-radius: 2px; text-align: right;
}
.tierrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
}
.tierrow:last-child { border-bottom: 0; }
.tierrow .mname { flex: 0 0 86px; }
.tcell { display: flex; align-items: center; gap: 7px; }
.tcell span { font-size: 10px; color: var(--mute); }

.mixrow { display: grid; gap: 11px; }
.mixcell { position: relative; padding: 9px 0 13px; }
.mixcell b {
  font-family: var(--serif); font-size: 27px; line-height: 1; color: var(--ink);
  margin-right: 9px;
}
.mixcell span { font-size: 9px; letter-spacing: .16em; color: var(--faint); }
.mixcell i {
  display: block; height: 2px; margin-top: 8px; border-radius: 2px; background: var(--mute);
}
.mixcell.tA i { background: var(--platinum); }
.mixcell.tB i { background: var(--gold); }
.mixcell.tC i { background: var(--silver); }

@media (max-width: 780px) {
  .arow2 { grid-template-columns: 40px minmax(0, 1fr); }
  .arow2 .acts { grid-column: 1 / -1; justify-content: flex-start; }
  .arow2 .num, .arow2 .best { grid-column: 1 / -1; }
  /* the header is a map of columns that no longer exist down here */
  .ahead2 { display: none; }
  /* stacked, the reach cell reads as a sentence rather than a column */
  .arow2 .reach { display: flex; align-items: baseline; gap: 8px; text-align: left; }
  .arow2 .reach b { display: inline; }
  .urow .reach .ctry { display: inline; margin: 0; }
}

/* the one sentence that says where someone stands */
.standing {
  font-family: var(--serif); font-size: clamp(17px, 2.4vw, 23px);
  line-height: 1.4; color: var(--ink); margin: 0;
}
.factline {
  display: flex; gap: 26px; flex-wrap: wrap; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--rule);
}
.factline span { font-size: 12px; color: var(--ink); }
.factline i {
  display: block; font-style: normal; font-size: 8px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 5px;
}

/* a card and what you can do with it */
.cardcell { display: flex; flex-direction: column; gap: 9px; }
.cardbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cardbar .line { padding: 8px 12px; font-size: 9px; }
.cardbar .offered {
  font-size: 8px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}

/* a switch row in the control panel */
.swrow {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  font-size: 11px; color: var(--ink); cursor: pointer;
}
.swrow input { accent-color: var(--bone); width: 15px; height: 15px; }
.swrow input:disabled + span { color: var(--faint); }

/* ---------------------------------------------------- scanning a code */
/* The code is being read, so it should look read: a beam crosses the bars,
   the token stutters the way a scanner does when it is still deciding. */
.cblk.reading { border-color: var(--eth); }
.cblk.reading .barwrap::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 26%; pointer-events: none; z-index: 2;
  background: linear-gradient(rgba(168,218,227,0), rgba(168,218,227,.75),
              rgba(168,218,227,0));
  box-shadow: 0 0 24px 6px rgba(168, 218, 227, .35);
  animation: beamdown .85s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes beamdown {
  0% { transform: translateY(-110%); }
  100% { transform: translateY(420%); }
}
.cblk.reading .bars { filter: brightness(1.5) saturate(.6); }
.cblk.reading .token { animation: stutter .3s steps(2) infinite; }
@keyframes stutter { 50% { opacity: .35; letter-spacing: .24em; } }
.cblk.reading .cfoot { opacity: .4; pointer-events: none; }

/* ---------------------------------------------------- the reveal */
.shade {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 20px;
  background: rgba(8, 7, 5, .86);
  backdrop-filter: blur(9px);
  animation: shadein .32s ease-out both;
  overflow: auto;
}
@keyframes shadein { from { opacity: 0; } }
.shadebox {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  max-width: 100%;
}
.shadehead {
  font-family: var(--serif); font-size: clamp(22px, 4vw, 34px);
  color: var(--ink); margin: 0; text-align: center; line-height: 1.15;
}
.shadesub {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--faint); margin: -8px 0 0; text-align: center;
}
.bigcard {
  width: min(330px, 78vw);
  animation: landing .6s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes landing {
  from { transform: scale(.82) translateY(18px); opacity: 0; }
}
/* the glow behind it, coloured by what they got */
.shade[data-tier="A"] .bigcard { filter: drop-shadow(0 0 36px rgba(159,228,239,.5)); }
.shade[data-tier="B"] .bigcard { filter: drop-shadow(0 0 30px rgba(216,164,69,.42)); }
.shade[data-tier="C"] .bigcard { filter: drop-shadow(0 0 22px rgba(185,188,194,.3)); }

.shadeacts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.shadex {
  font-family: inherit; font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; background: none; border: 0; color: var(--faint);
  cursor: pointer; padding: 8px 10px; margin-top: 2px;
}
.shadex:hover { color: var(--ink); }
.shadenote { font-size: 10px; color: var(--mute); text-align: center; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .cblk.reading .barwrap::before, .cblk.reading .token { animation: none; }
  .shade, .bigcard { animation: none; }
}

/* ---------------------------------------------------------------- weight */
/* The complaint was fair: everything was a hairline box floating on a dark
   wall. Headings now carry a rule across the page, panels have a real edge
   and a lit top lip, and the counters are anchored by a bar. Structure you
   can see, rather than air. */
.app h2 {
  display: flex; align-items: baseline; gap: 16px;
  font-size: clamp(24px, 3.4vw, 34px);
  margin: 0 0 6px;
}
.app h2::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--edge);
  transform: translateY(-6px);
}

.app section > h2 + .note,
.app section > h2 + .lede { margin-top: 10px; }

.slab {
  position: relative;
  border: 1px solid var(--edge);
  background: linear-gradient(var(--rise), var(--raise) 70%);
}
.slab::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236,229,210,.13), transparent);
}

.tile {
  position: relative; border: 1px solid var(--edge);
  background: linear-gradient(var(--rise), var(--raise) 70%);
  padding: 15px 16px 14px;
}
.tile::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 2px; background: var(--edge);
}
.tile b { font-size: 34px; }

.kicker { color: var(--mute); }

/* the rooms read as a control strip rather than four loose words */
.rooms {
  border: 1px solid var(--rule); border-radius: 3px; padding: 2px;
  background: var(--raise);
}
.rooms a { border-radius: 2px; }

/* section spacing with a rhythm instead of arbitrary margins */
.app main > section, .app .wrap > section { margin-top: 44px; }

@media (max-width: 760px) {
  .app h2 { font-size: 26px; }
  .app h2::after { display: none; }
  .tile b { font-size: 28px; }
  .app main > section, .app .wrap > section { margin-top: 34px; }
}

/* what has to be set up in the X portal before connecting can work */
.setup {
  margin-top: 14px; padding: 14px; border: 1px dashed var(--edge);
  border-radius: 3px; background: var(--paper);
}
.cburl {
  display: block; font-family: var(--mono); font-size: 11px;
  color: var(--eth); word-break: break-all; padding: 9px 10px;
  background: #0b0a08; border: 1px solid var(--rule); border-radius: 2px;
}

/* ================================================================ layout
   Real components instead of inline styles. Inline styles cannot answer a
   media query, which is exactly why the standing block dropped below the
   avatar and sat on the wrong side of the card on a phone. */

/* ---------------------------------------------------------- identity card */
.idcard {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  grid-template-areas: "pfp who standing";
  align-items: center; gap: 18px;
  margin: 26px 0 18px;
}
.idcard .ipfp {
  grid-area: pfp; width: 72px; height: 72px; border-radius: 50%;
  border: 1px solid var(--edge); object-fit: cover; background: var(--rise);
}
.idcard .iwho { grid-area: who; min-width: 0; }
.idcard .iwho h2 { margin: 0; }
.idcard .iwho h2::after { display: none; }
.idcard .iwho .note { margin: 5px 0 0; }
.idcard .istanding { grid-area: standing; text-align: right; }
.idcard .istanding b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: 46px; line-height: 1; color: var(--ink);
}
.idcard .istanding span {
  display: block; font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--faint); margin-top: 4px;
}

/* ---------------------------------------------------------------- forms */
.formgrid { display: grid; gap: 12px; }
.formrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.formrow > .grow { flex: 1 1 200px; min-width: 0; }
.fld {
  width: 100%; background: var(--paper); border: 1px solid var(--edge);
  color: var(--ink); font-family: inherit; font-size: 13px;
  padding: 12px 13px; border-radius: 2px;
}
.fld:focus { outline: none; border-color: var(--mute); }
.fld::placeholder { color: var(--faint); }
select.fld { font-size: 12px; padding: 11px; }
.fldlabel {
  display: block; font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 6px;
}

/* ---------------------------------------------------------------- phone */
@media (max-width: 760px) {
  .app .wrap { padding-left: 16px; padding-right: 16px; }

  /* the header: brand and handle on one line, rooms as a full width strip */
  .topbar { gap: 10px; padding: 12px 0 10px; }
  .topbar .mark { height: 22px; }
  .brandlink b { font-size: 19px; }
  .me .h { font-size: 9px; }
  .me img { width: 22px; height: 22px; }
  .rooms a { font-size: 9px; letter-spacing: .1em; padding: 9px 4px; }

  /* identity: the standing belongs beside the name, not under the avatar */
  .idcard {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 12px; margin: 18px 0 14px; padding: 16px;
  }
  .idcard .ipfp { width: 54px; height: 54px; }
  .idcard .iwho h2 { font-size: 21px; }
  .idcard .iwho .note { font-size: 10px; line-height: 1.6; }
  .idcard .istanding b { font-size: 34px; }
  .idcard .istanding span { font-size: 8px; letter-spacing: .16em; }

  /* counters: two up, tighter, still legible */
  .tilerow { gap: 8px; margin-bottom: 16px; }
  .tile { flex: 1 1 calc(50% - 4px); padding: 12px 13px; }
  .tile b { font-size: 26px; margin-bottom: 4px; }
  .tile span { font-size: 8px; letter-spacing: .14em; }

  /* the board: one tap target per person, nothing ragged */
  .urow {
    grid-template-columns: 20px 30px minmax(0, 1fr) auto;
    grid-template-areas: "rank pfp who meta" "nums nums nums nums";
    row-gap: 8px; column-gap: 10px; padding: 11px 12px;
  }
  .urow .pfp { width: 30px; height: 30px; }
  .urow .who b { font-size: 12.5px; }
  .urow .who span { font-size: 9px; }
  .urow .best, .urow .score { grid-area: meta; }
  .urow .best {
    justify-self: end; align-self: center; font-size: 12px;
    padding-right: 34px;
  }
  .urow .score { justify-self: end; align-self: center; font-size: 14px; }
  .nums { gap: 10px; font-size: 9px; }
  .urow .num { font-size: 10px; }
  .urow .num i { font-size: 8px; margin-left: 3px; }

  /* cards: two across on a phone reads better than one giant one */
  .cards { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px; }
  .cardbar { gap: 5px; }
  .cardbar .line { padding: 7px 9px; font-size: 8px; letter-spacing: .1em; }

  /* codes fill the width they are given */
  .cblk { max-width: none; }
  .g2 { grid-template-columns: 1fr; }

  /* tabs and filters scroll rather than wrap into a ragged block */
  .sorts {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  .sorts::-webkit-scrollbar { display: none; }
  .sorts button { flex: 0 0 auto; }

  .standing { font-size: 16px; line-height: 1.45; }
  .factline { gap: 18px; }
  .slab { padding: 16px; }
  .formrow > .grow { flex: 1 1 100%; }
  .formrow .fill, .formrow .line { width: 100%; }
}

@media (max-width: 380px) {
  .cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .idcard { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .idcard .ipfp { width: 46px; height: 46px; }
  .idcard .iwho h2 { font-size: 19px; }
  .idcard .istanding b { font-size: 30px; }
}

/* the odds and ends the pages used to carry as inline styles */
.wallet .kicker { margin: 0 0 4px; }
.wallet .note { margin: 0 0 12px; }
.wallet .formrow { margin: 0; }
.wallet #walout { margin: 10px 0 0; }
.signout { margin-top: 40px; }
.mnote { text-align: center; margin-top: 14px; }
.lede-sm { margin: 0 0 14px; }
.walletask { margin-top: 18px; border-color: var(--gold); }
.walletask .kicker { color: var(--gold); margin: 0 0 6px; }
.walletask .note { margin: 0 0 12px; }

/* the hand crank: posts the account owes, ready to send by hand */
.queued { margin-bottom: 12px; }
/* why the account is silent, said where the switch is */
.cantpost {
  border: 1px solid rgba(212, 96, 63, .4); border-radius: 3px;
  background: rgba(212, 96, 63, .06); padding: 16px 18px; margin: 0 0 14px;
}
.cantpost .kicker { color: var(--signal); }
.needlist { margin: 0; padding-left: 18px; }
.needlist li {
  font-size: 11px; line-height: 1.9; color: var(--mute);
}
.needlist code {
  font-size: 10px; color: var(--ink); background: var(--paper);
  padding: 2px 6px; border-radius: 2px;
}
.note.posting { color: var(--platinum); }

/* Named .qtop, not .qhead: style.css already has a .qhead for the quote box
   and its justify-content leaked in here, shoving the handle to the far
   right of every queued row. Two components, two names. */
.qtop { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.qkind {
  font-size: 8px; letter-spacing: .2em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 2px; border: 1px solid var(--edge);
  color: var(--mute);
}
.qkind.approval { color: var(--platinum); border-color: var(--platinum); }
.qkind.pull { color: var(--gold); border-color: var(--gold); }
.qtext {
  font-size: 12px; line-height: 1.8; color: var(--ink); margin: 0 0 12px;
  white-space: pre-wrap;
}
.qimg {
  display: block; width: 100%; max-width: 300px; border-radius: 4px;
  border: 1px solid var(--rule); margin-bottom: 12px;
}
.qacts { display: flex; gap: 8px; flex-wrap: wrap; }
.qacts .line, .qacts .fill { padding: 9px 14px; font-size: 9px; }

/* how many posts are waiting, without having to open the tab to find out */
.badge {
  display: inline-block; margin-left: 7px; min-width: 16px; padding: 1px 5px;
  border-radius: 9px; background: var(--gold); color: var(--paper);
  font-size: 9px; line-height: 14px; text-align: center; font-weight: 500;
}
.sorts button.on .badge { background: var(--paper); color: var(--bone); }