/* ————————————————————————————————————————————————
   UNDERCUT — crisp, white, editorial.
   Ink on paper, one accent, hairline rules, tabular numerals.
   ———————————————————————————————————————————————— */

:root {
  --paper: #ffffff;
  --ink: #0a0a0a;
  --muted: #757575;
  --faint: #ababab;
  --hair: #e7e7e7;
  --wash: #f6f6f4;
  --accent: #ff4400;         /* the falling price */
  --ok: #0a7d33;
  --sans: "Helvetica Neue", Helvetica, "Inter", ui-sans-serif, system-ui, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

/* ——— masthead ——— */

header.site {
  border-bottom: 1px solid var(--ink);
}
.site-top {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 20px 0 14px;
}
.wordmark {
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
}
.wordmark .tick { color: var(--accent); }
.site-nav { display: flex; gap: 28px; align-items: baseline; }
.site-nav a, .site-nav button {
  background: none; border: 0;
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.site-nav a:hover, .site-nav button:hover { color: var(--ink); }
.site-nav .who { color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }

/* ——— hero ——— */

.hero { padding: 96px 0 84px; border-bottom: 1px solid var(--hair); }
.hero h1 {
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.94; letter-spacing: -0.045em; font-weight: 700;
  max-width: 12ch;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .dek {
  margin-top: 28px; max-width: 52ch;
  font-size: 19px; line-height: 1.55; color: var(--muted);
}
.hero .dek strong { color: var(--ink); font-weight: 600; }
.hero-cta { margin-top: 40px; display: flex; gap: 16px; align-items: center; }

/* ——— buttons ——— */

.btn {
  display: inline-block; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: 13px 26px; font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 0.12s ease, color 0.12s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn:disabled:hover { background: var(--ink); border-color: var(--ink); }

/* ——— how-it-works strip ——— */

.mech { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--hair); }
.mech > div { padding: 30px 24px 34px 0; }
.mech > div + div { border-left: 1px solid var(--hair); padding-left: 24px; }
.mech .n {
  font-family: var(--mono); font-size: 12px; color: var(--accent); display: block; margin-bottom: 12px;
}
.mech h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.mech p { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* ——— section labels ——— */

.sect {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 44px 0 18px;
}
.sect h2 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
}
.sect .count { font-family: var(--mono); font-size: 12px; color: var(--faint); }

/* ——— listing grid ——— */

.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  border-top: 1px solid var(--ink);
}
.card {
  border-bottom: 1px solid var(--hair); border-right: 1px solid var(--hair);
  padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 0;
  transition: background 0.12s ease; position: relative; min-height: 300px;
}
.card:hover { background: var(--wash); }
.card .status-row {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px;
}
.pill {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 9px; border: 1px solid var(--hair); color: var(--muted); border-radius: 999px;
}
.pill.live { border-color: var(--accent); color: var(--accent); }
.pill.live::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 6px; vertical-align: 1px;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.25; } }
.pill.done { border-color: var(--ok); color: var(--ok); }

/* Heat: how alive a brief is. Accent is reserved for live state, and a board
   this small only needs three rungs, so the bands are coarse on purpose. */
.heat {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  font-family: var(--mono); padding: 4px 8px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.heat.warm { color: var(--muted); border-color: var(--hair); }
.heat.hot { color: var(--accent); border-color: var(--accent); }
.heat.blazing { color: var(--paper); background: var(--accent); border-color: var(--accent); }
.heat.blazing::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; margin-right: 6px; vertical-align: 1px;
  animation: pulse 1.1s ease-in-out infinite;
}

.card h3 {
  font-size: 21px; line-height: 1.22; letter-spacing: -0.022em; font-weight: 650;
  margin-bottom: 10px;
}
.card .byline { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.card .byline b { color: var(--ink); font-weight: 550; }

.price-block { margin-top: auto; }
.price-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); display: block; margin-bottom: 2px;
}
.price {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 38px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.05;
}
.price.falling { color: var(--accent); }
.price .was {
  font-size: 15px; color: var(--faint); text-decoration: line-through;
  margin-left: 10px; letter-spacing: 0;
}

.meta-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair);
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ——— brief page ——— */

.crumb { padding: 22px 0 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.crumb a:hover { color: var(--ink); }

.brief-head { padding: 30px 0 40px; border-bottom: 1px solid var(--ink); }
.brief-head h1 {
  font-size: clamp(34px, 5vw, 58px); line-height: 1.04; letter-spacing: -0.035em;
  font-weight: 700; max-width: 22ch;
}
.brief-head .sub { margin-top: 14px; font-size: 15px; color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap; }
.brief-head .sub b { color: var(--ink); font-weight: 550; }

.brief-cols { display: grid; grid-template-columns: 1fr 400px; gap: 0; }
.brief-main { padding: 36px 44px 80px 0; border-right: 1px solid var(--hair); }
.brief-side { padding: 36px 0 80px 44px; }

.prose { max-width: 58ch; }
.prose h4 {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint); margin: 30px 0 10px;
}
.prose h4:first-child { margin-top: 0; }
.prose p { font-size: 16.5px; line-height: 1.62; color: #2c2c2c; white-space: pre-wrap; }
.prose .proof {
  background: var(--wash); border-left: 2px solid var(--ink);
  padding: 16px 20px; font-size: 15px; line-height: 1.6;
}

/* the big live module */
.tape {
  border: 1px solid var(--ink); padding: 28px;
}
.tape .price-label { color: var(--muted); }
.tape .price { font-size: 56px; }
.tape .clockline {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between; align-items: baseline;
}
.tape .clockline .t {
  font-family: var(--mono); font-size: 26px; font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.tape .hint { margin-top: 14px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.tape .hint b { color: var(--ink); }

.meter { height: 3px; background: var(--hair); margin-top: 18px; position: relative; overflow: hidden; }
.meter > i { position: absolute; inset: 0 auto 0 0; background: var(--accent); display: block; }

/* undercut form */
.bidform { margin-top: 26px; }
.bidform .row { display: flex; border: 1px solid var(--ink); }
.bidform .cur {
  display: flex; align-items: center; padding: 0 0 0 16px;
  font-family: var(--mono); font-size: 20px; color: var(--muted);
}
.bidform input[type="text"] {
  flex: 1; border: 0; outline: none; padding: 16px 12px;
  font-family: var(--mono); font-size: 20px; font-variant-numeric: tabular-nums;
  min-width: 0; background: transparent;
}
.bidform .btn { border: 0; border-left: 1px solid var(--ink); }
.bidform .note-in {
  width: 100%; border: 1px solid var(--hair); border-top: 0; padding: 12px 16px;
  font: inherit; font-size: 14px; outline: none;
}
.bidform .stake-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.formerr { margin-top: 12px; font-size: 13.5px; color: var(--accent); line-height: 1.5; }

/* bid ladder */
.ladder { border-top: 1px solid var(--ink); }
.ladder .rung {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 18px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--hair);
}
.ladder .amt { font-family: var(--mono); font-size: 17px; font-variant-numeric: tabular-nums; }
.ladder .rung.leader .amt { color: var(--accent); font-weight: 600; }
.ladder .who { font-size: 14px; }
.ladder .who .note { color: var(--muted); font-size: 13px; display: block; }
.ladder .tag {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
  font-family: var(--mono);
}
.ladder .rung.leader .tag { color: var(--accent); }
.ladder .rung.dead { opacity: 0.45; }
.ladder .rung.dead .amt { text-decoration: line-through; }

/* history feed */
.feed { list-style: none; }
.feed li {
  display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--hair);
  font-size: 13px; color: var(--muted);
}
.feed li .k { font-family: var(--mono); font-size: 11px; color: var(--faint); min-width: 74px; }

/* ——— post form ——— */

.post-panel { max-width: 720px; padding: 48px 0 100px; }
.post-panel h1 { font-size: 42px; letter-spacing: -0.035em; margin-bottom: 6px; }
.post-panel .lede { color: var(--muted); margin-bottom: 40px; font-size: 16px; }
.field { margin-bottom: 26px; }
.field label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: 8px;
}
.field label small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--faint); margin-left: 8px; }
.field input, .field textarea {
  width: 100%; border: 1px solid var(--hair); padding: 13px 15px; font: inherit;
  outline: none; background: var(--paper);
}
.field input:focus, .field textarea:focus { border-color: var(--ink); }
.field textarea { min-height: 110px; resize: vertical; }
.field .money { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.attest {
  display: flex; gap: 12px; align-items: flex-start; background: var(--wash);
  padding: 18px 20px; margin: 34px 0 26px; font-size: 14px; line-height: 1.55;
}
.attest input { margin-top: 3px; accent-color: var(--ink); }
.policy-note { font-size: 12.5px; color: var(--muted); margin-top: 18px; line-height: 1.6; }

/* ——— footer ——— */

footer.site {
  border-top: 1px solid var(--ink); margin-top: 90px; padding: 30px 0 60px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--muted); letter-spacing: 0.06em;
}
footer.site .fee { font-family: var(--mono); }

/* ——— user switcher ——— */
dialog#whoami {
  border: 1px solid var(--ink); padding: 0; max-width: 380px; width: 90vw;
}
dialog#whoami::backdrop { background: rgba(10,10,10,0.35); }
#whoami .dhead { padding: 20px 24px 14px; border-bottom: 1px solid var(--hair); font-weight: 650; letter-spacing: -0.01em; }
#whoami .dlist { list-style: none; }
#whoami .dlist button {
  width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--hair);
  padding: 14px 24px; display: flex; justify-content: space-between; font-size: 15px;
}
#whoami .dlist button:hover { background: var(--wash); }
#whoami .dlist .rel { font-family: var(--mono); font-size: 12px; color: var(--muted); }

@media (max-width: 900px) {
  .wrap { padding: 0 20px; }
  .mech { grid-template-columns: 1fr 1fr; }
  .mech > div { border-left: 0 !important; padding-left: 0 !important; }
  .brief-cols { grid-template-columns: 1fr; }
  .brief-main { border-right: 0; padding-right: 0; }
  .brief-side { padding-left: 0; }
  .hero { padding: 64px 0 56px; }
}

/* ————————————————————————————————————————————————
   MOTION. The paper stays white; everything on it moves.
   ———————————————————————————————————————————————— */

/* entrance: everything staggers up as it hits the viewport */
.rv { opacity: 0; transform: translateY(26px); }
.rv.in { opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.rv.in.d1 { transition-delay: 0.06s; } .rv.in.d2 { transition-delay: 0.12s; }
.rv.in.d3 { transition-delay: 0.18s; } .rv.in.d4 { transition-delay: 0.24s; }

/* hero words drop in like bids */
.hero h1 .w { display: inline-block; animation: worddrop 0.85s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes worddrop {
  from { opacity: 0; transform: translateY(-0.9em) rotate(-2deg); }
  60%  { opacity: 1; transform: translateY(0.08em) rotate(0.4deg); }
  to   { opacity: 1; transform: none; }
}
.hero h1 em { position: relative; display: inline-block; }
.hero h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.02em; height: 0.08em;
  background: var(--accent); transform-origin: left;
  animation: underdraw 1s 0.9s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes underdraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* the giant falling arrow that haunts the hero */
.fall-arrow {
  position: absolute; right: 4vw; top: 0; font-size: clamp(120px, 22vw, 320px);
  line-height: 1; font-weight: 700; color: var(--accent); opacity: 0.1;
  animation: arrowfall 3.2s cubic-bezier(0.6,0,0.4,1) infinite; pointer-events: none;
  user-select: none;
}
@keyframes arrowfall {
  0%   { transform: translateY(-46%); opacity: 0; }
  35%  { opacity: 0.12; }
  70%  { opacity: 0.12; }
  100% { transform: translateY(66%); opacity: 0; }
}
.hero { position: relative; overflow: hidden; }

/* ticker tape — the market never shuts up */
.tape-strip {
  border-bottom: 1px solid var(--ink); overflow: hidden; white-space: nowrap;
  background: var(--ink); color: var(--paper);
}
.tape-strip .lane {
  display: inline-block; padding: 11px 0;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em;
  animation: tape 28s linear infinite; will-change: transform;
}
.tape-strip:hover .lane { animation-play-state: paused; }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tape-strip .item { margin-right: 48px; }
.tape-strip .down { color: var(--accent); font-weight: 700; }
.tape-strip .up { color: #7dffa9; }

/* odometer: digits roll like a split-flap board */
.odo { display: inline-flex; overflow: hidden; }
.odo .dg { display: inline-block; }
.odo .dg.roll { animation: dgroll 0.55s cubic-bezier(0.16,1,0.3,1); }
@keyframes dgroll {
  0%   { transform: translateY(-110%); opacity: 0; }
  55%  { transform: translateY(8%); opacity: 1; }
  100% { transform: none; }
}

/* price-drop flash: the whole card blinks when someone undercuts */
.flash-drop { animation: flashdrop 0.9s ease-out; }
@keyframes flashdrop {
  0%  { background: #fff3ec; box-shadow: inset 0 0 0 2px var(--accent); }
  100%{ background: transparent; box-shadow: inset 0 0 0 0 transparent; }
}

/* cards breathe on hover */
.card { transition: background 0.12s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(10,10,10,0.35); z-index: 2; }
.card:hover .price.falling { animation: pricenudge 0.5s cubic-bezier(0.16,1,0.3,1); }
@keyframes pricenudge { 30% { transform: translateY(3px); } }
.card:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* the last hour: clock goes hot; the last minute: it shakes */
@keyframes hotpulse { 50% { opacity: 0.55; } }
@keyframes panic {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-1.5px) rotate(-0.4deg); }
  75% { transform: translateX(1.5px) rotate(0.4deg); }
}

/* live meter drains with a hot edge */
.meter > i { transition: width 0.25s linear; }
.meter > i::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 26px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75));
  animation: shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer { 50% { opacity: 0.2; } }

/* UNDERCUT!! stamp when a new low lands while you watch */
.stamp {
  position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 50;
}
.stamp span {
  font-weight: 700; font-size: clamp(48px, 10vw, 130px); letter-spacing: -0.04em;
  color: var(--paper); background: var(--accent); padding: 0.05em 0.35em;
  transform: rotate(-4deg);
  animation: stamp 1.15s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes stamp {
  0%   { transform: rotate(-4deg) scale(2.6); opacity: 0; }
  22%  { transform: rotate(-4deg) scale(1); opacity: 1; }
  70%  { transform: rotate(-4deg) scale(1); opacity: 1; }
  100% { transform: rotate(-4deg) scale(0.94); opacity: 0; }
}

/* section headers slide a rule across as they enter */
.sect { position: relative; }
.sect::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; border-bottom: 1px solid var(--ink);
  transition: right 0.9s cubic-bezier(0.16,1,0.3,1);
}
.sect.in::after { right: 0; }

/* mech steps count themselves in */
.mech .n { position: relative; overflow: hidden; }
.mech .n::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.7s 0.2s ease;
}
.mech > div.in .n::after { transform: scaleX(1); }

/* marquee CTA button pulse */
.btn.throb { animation: throb 2.4s ease-in-out infinite; }
@keyframes throb { 50% { box-shadow: 0 0 0 6px rgba(255,68,0,0.12); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
}

/* ————————————————————————————————————————————————
   POSTER TILES — every brief is a print on the wall.
   ———————————————————————————————————————————————— */

.poster {
  aspect-ratio: 5 / 3; overflow: hidden; position: relative;
  border-bottom: 1px solid var(--hair); background: var(--wash);
  margin: -26px -26px 18px; /* bleed to the card edges */
}
.poster svg { width: 100%; height: 100%; display: block; }
.card:hover .poster svg { transform: scale(1.045) rotate(0.4deg); }
.poster svg { transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }

/* brief page: wide banner print above the title */
.brief-poster {
  height: clamp(150px, 24vw, 250px); overflow: hidden;
  border: 1px solid var(--ink); border-bottom: 0; margin-top: 18px;
}
.brief-poster svg { width: 100%; height: 100%; display: block; }

/* post form live preview */
.poster-preview {
  aspect-ratio: 5 / 2; border: 1px solid var(--ink); overflow: hidden; margin-bottom: 26px;
}
.poster-preview svg { width: 100%; height: 100%; display: block; }
.poster-preview-cap {
  font-family: var(--mono); font-size: 11px; color: var(--faint);
  letter-spacing: 0.1em; text-transform: uppercase; margin: 8px 0 26px;
}

/* full-bleed divider band of marching arrows */
.tileband { height: 72px; overflow: hidden; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.tileband svg { width: 100%; height: 100%; display: block; }

/* motion inside the art */
.art-spin { animation: artspin 14s linear infinite; }
@keyframes artspin { to { transform: rotate(360deg); } }
.art-fall { animation: artfall 2.6s cubic-bezier(0.55,0,0.85,0.6) infinite; }
@keyframes artfall { from { transform: translateY(-12%); } to { transform: translateY(12%); } }
.art-breathe { animation: artbreathe 7s ease-in-out infinite alternate; }
@keyframes artbreathe { from { transform: scale(1) } to { transform: scale(1.06) rotate(1.2deg); } }
.art-march { animation: artmarch 16s linear infinite; }
@keyframes artmarch { to { transform: translateX(var(--march, -1200px)); } }

@media (prefers-reduced-motion: reduce) {
  .art-spin, .art-fall, .art-breathe, .art-march { animation: none !important; }
}

/* ——— evidence rule builder + display ——— */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.modes .mode {
  text-align: left; background: var(--paper); border: 1px solid var(--hair);
  padding: 13px 15px; display: block; transition: border-color 0.12s ease, background 0.12s ease;
}
.modes .mode:hover { border-color: var(--muted); }
.modes .mode.on { border-color: var(--ink); background: var(--wash); box-shadow: inset 3px 0 0 var(--accent); }
.modes .mode b { display: block; font-size: 14px; font-weight: 650; margin-bottom: 3px; }
.modes .mode span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.modecfg { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-bottom: 14px; }
.cfg { display: flex; align-items: center; gap: 9px; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.cfg span { color: var(--muted); }
.cfg input[type="number"] {
  width: 84px; border: 1px solid var(--hair); padding: 7px 9px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.cfg.bool input { accent-color: var(--ink); }
.rulepreview {
  background: var(--wash); border-left: 2px solid var(--accent); padding: 12px 16px;
  font-size: 14px; line-height: 1.5;
}
.proofrule { background: var(--wash); border-left: 2px solid var(--ink); padding: 16px 20px; }
.proofrule .badge {
  display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.proofrule p { font-size: 15.5px; line-height: 1.55; }
.proofrule .proofnote { margin-top: 8px; font-size: 14px; color: var(--muted); }
.proofrule .proofnote:empty { display: none; }

/* ————————————————————————————————————————————————
   THE SUGGESTER — sector x moment x how far you'll go.
   ———————————————————————————————————————————————— */

.suggester {
  border: 1px solid var(--ink); background: var(--wash);
  padding: 24px 26px 26px; margin-bottom: 40px;
}
.sug-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.sug-head h2 { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.sug-moment {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}

.sug-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: end; }
.sug-field { display: block; }
.sug-field > span {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.sug-field > span b { color: var(--accent); font-weight: 700; }
.sug-field select:focus-visible, .sug-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The dial. Four stops, so it snaps rather than slides. */
.sug-field.dial input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%;
  background: transparent; height: 22px; margin: 0; cursor: pointer;
}
.sug-field.dial input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: var(--ink);
}
.sug-field.dial input[type="range"]::-moz-range-track { height: 2px; background: var(--ink); }
.sug-field.dial input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%; margin-top: -7px;
  background: var(--accent); border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--accent);
}
.sug-field.dial input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--paper);
  background: var(--accent); box-shadow: 0 0 0 1px var(--accent);
}
.sug-field > span.dial-ends {
  display: flex; justify-content: space-between; margin-top: 2px; margin-bottom: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint);
}
.dial-ends i { font-style: normal; }

.sug-blurb { margin-top: 14px; font-size: 14px; color: var(--muted); min-height: 1.4em; }

.sug-results { display: grid; gap: 0; margin-top: 18px; border-top: 1px solid var(--ink); }
.sug-card {
  display: grid; gap: 5px; text-align: left; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--hair);
  padding: 16px 14px 16px 0; position: relative;
  transition: background 0.12s ease, padding-left 0.12s ease;
}
.sug-card:hover, .sug-card:focus-visible { background: var(--paper); padding-left: 14px; outline: none; }
.sug-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform 0.14s ease;
}
.sug-card:hover::before, .sug-card:focus-visible::before { transform: scaleY(1); }
.sug-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}
.sug-title { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.sug-meta, .sug-timing {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sug-timing { color: var(--faint); }
.sug-results[aria-busy="true"] { opacity: 0.45; }

/* The dial escalates the panel itself, so the top rung feels like the top rung. */
.suggester[data-level="bold"] { border-color: var(--accent); }
.suggester[data-level="unhinged"] { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--accent); }

@media (max-width: 720px) {
  .sug-controls { grid-template-columns: 1fr; gap: 18px; }
  .sug-head { flex-direction: column; gap: 6px; }
}

/* ————————————————————————————————————————————————
   SIGN IN / WALLET — the session lives up in the masthead.
   ———————————————————————————————————————————————— */

.site-nav .who.out { border-bottom-color: var(--muted); color: var(--muted); }

dialog#authdlg {
  border: 1px solid var(--ink); padding: 0; max-width: 400px; width: 92vw;
  background: var(--paper); color: var(--ink);
}
dialog#authdlg::backdrop { background: rgba(10, 10, 10, 0.35); }
#authdlg .dhead {
  padding: 20px 24px 14px; border-bottom: 1px solid var(--hair);
  font-weight: 650; letter-spacing: -0.01em;
}
#authdlg .authform, #authdlg .wallet { padding: 20px 24px 22px; display: grid; gap: 14px; }

.afield { display: block; }
.afield > span {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.afield input {
  width: 100%; font: inherit; font-size: 15px; padding: 10px 11px;
  border: 1px solid var(--hair); background: var(--paper); color: var(--ink); border-radius: 0;
}
.afield input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ahint { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.alink {
  background: none; border: 0; padding: 0; text-align: left;
  font-size: 13px; color: var(--muted); text-decoration: underline;
}
.alink:hover { color: var(--accent); }

/* Wallet. Escrow is money you still own but cannot spend, so it reads as a
   separate line rather than being folded into one balance. */
.wrow {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 10px; border-bottom: 1px solid var(--hair);
}
.wrow span {
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.wrow b {
  font-family: var(--mono); font-size: 21px; font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.topups { display: flex; gap: 8px; flex-wrap: wrap; }
.topups .btn { padding: 9px 14px; font-size: 11px; letter-spacing: 0.1em; }

/* ————————————————————————————————————————————————
   URGENCY LADDER — the clock is the product, so the last
   minute has to feel nothing like the last hour.

   Six rungs, driven by one data-urgency attribute set in
   app.js. Every rung reads on its own: colour, then motion,
   then weight, then the surrounding surface.
   ———————————————————————————————————————————————— */

/* > 6h: no motion at all. Restraint is what makes the top rungs land. */
[data-urgency="calm"] { }

/* < 6h: the number warms up, still no movement. */
.clock[data-urgency="soon"],
.tape .clockline .t[data-urgency="soon"] { color: var(--ink); }

/* < 1h: a slow breath. */
.clock[data-urgency="hot"],
.tape .clockline .t[data-urgency="hot"] {
  color: var(--accent); animation: hotpulse 1s ease-in-out infinite;
}

/* < 10m: faster, heavier, and the digits stop being decorative. */
.clock[data-urgency="urgent"],
.tape .clockline .t[data-urgency="urgent"] {
  color: var(--accent); font-weight: 700;
  animation: hotpulse 0.55s ease-in-out infinite;
}

/* < 1m: it shakes, and each second lands (see .beat). */
.clock[data-urgency="panic"],
.tape .clockline .t[data-urgency="panic"] {
  color: var(--accent); font-weight: 700;
  animation: panic 0.35s linear infinite;
}

/* < 10s: the shake tightens and the number inverts on every tick. */
.clock[data-urgency="final"],
.tape .clockline .t[data-urgency="final"] {
  color: var(--accent); font-weight: 800;
  animation: panic 0.2s linear infinite;
}
.clock[data-urgency="over"],
.tape .clockline .t[data-urgency="over"] { color: var(--muted); animation: none; }

/* One second landing. Restarted from JS so it fires per tick, not per class. */
.beat { animation: beat 0.42s cubic-bezier(0.16, 1, 0.3, 1) !important; }
@keyframes beat {
  0% { transform: scale(1.16); }
  60% { transform: scale(0.99); }
  100% { transform: scale(1); }
}

/* The surface reacts too, so a card in its final minute is findable from
   across the board rather than needing to be read. */
.card[data-urgency="urgent"] { background: #fffaf8; }
.card[data-urgency="panic"], .card[data-urgency="final"] {
  background: #fff6f3; box-shadow: inset 0 0 0 1px var(--accent);
}
.card[data-urgency="final"] { animation: cardflash 1s ease-in-out infinite; }
@keyframes cardflash { 50% { box-shadow: inset 0 0 0 2px var(--accent); } }

.tape[data-urgency="panic"], .tape[data-urgency="final"] {
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* The drain bar escalates with it: thicker, then pulsing. */
.meter { transition: height 0.2s ease; }
.meter[data-urgency="urgent"] { height: 5px; }
.meter[data-urgency="panic"], .meter[data-urgency="final"] { height: 7px; }
.meter[data-urgency="final"] > i { animation: meterflash 0.4s steps(2) infinite; }
@keyframes meterflash { 50% { opacity: 0.45; } }

/* The blanket reduce rule at the top of this file already kills every
   animation above. These rungs still read without motion, because each one
   changes colour and weight as well as moving. */


/* ————————————————————————————————————————————————
   SELECTS — the native arrow sits wherever the platform puts it and
   long options run underneath it. Draw our own, then reserve the room
   for it, so the label never collides with the chevron.
   ———————————————————————————————————————————————— */

select {
  width: 100%;
  font: inherit; font-size: 14px; line-height: 1.3;
  color: var(--ink); background-color: var(--paper);
  border: 1px solid var(--hair); border-radius: 0;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  /* right padding clears the chevron; the extra 10px is the gap beside it */
  padding: 10px 38px 10px 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 L6 6.4 L11 1.6' fill='none' stroke='%230a0a0a' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px 8px;
  cursor: pointer;
}
select:hover { border-color: var(--muted); }
select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
select:disabled { opacity: 0.45; cursor: not-allowed; }
/* Firefox draws a focus ring inside the field; the outline above covers it. */
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--ink); }
/* Some platforms render the option list with the page background. */
select option { color: var(--ink); background: var(--paper); }

/* ——— suggester: read my site ——— */

.sug-lookup { margin-bottom: 20px; }
.sug-field > span small {
  display: inline; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--faint); margin-left: 8px; font-size: 11px;
}
.lookrow { display: flex; gap: 8px; }
.lookrow input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14px; padding: 10px 11px;
  border: 1px solid var(--hair); background: var(--paper); color: var(--ink); border-radius: 0;
}
.lookrow input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lookrow .btn { flex: 0 0 auto; padding: 10px 16px; font-size: 11px; letter-spacing: 0.1em; }
.sug-found {
  margin-top: 10px; font-size: 13.5px; color: var(--muted);
  padding: 9px 12px; background: var(--paper); border-left: 3px solid var(--accent);
}
.sug-found b { color: var(--ink); font-weight: 600; }
.sug-found .alink { font-size: 12px; margin-left: 6px; }

/* ——— payouts, only shown once card payments are live ——— */
.payout { padding-top: 12px; border-top: 1px solid var(--hair); display: grid; gap: 10px; }
.payout-ok { font-size: 13px; color: var(--ok); font-weight: 550; }
.payout .btn { justify-self: start; padding: 9px 14px; font-size: 11px; letter-spacing: 0.1em; }

/* ——— withdrawing back to the card ——— */
.withdraw { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--hair); }
.withdraw .btn { justify-self: start; padding: 9px 14px; font-size: 11px; letter-spacing: 0.1em; }