/* ═══════════════════════════════════════════════════════════ THE LEDGER ═══
   OutbidMacApp — an auction price sheet for Mac & iOS apps.
   Warm paper, hairline rules, editorial serif, tabular figures, one ink accent.
   ═════════════════════════════════════════════════════════════════════════ */

:root{
  /* paper + ink, every neutral tinted warm — no #fff, no #000 */
  --paper:      oklch(97.9% 0.008 84);
  --paper-sunk: oklch(95.6% 0.011 82);
  --paper-card: oklch(99.2% 0.005 86);
  --ink:        oklch(24.8% 0.006 40);     /* brand #212121, a hair warm */
  --ink-2:      oklch(47% 0.016 58);
  --ink-3:      oklch(64% 0.013 62);
  --rule:       oklch(88.5% 0.011 78);
  --rule-firm:  oklch(80% 0.014 74);

  /* one committed accent: printer's vermilion */
  --accent:     oklch(67.8% 0.208 37.7);   /* brand #FC5A21 */
  --accent-ink: oklch(55% 0.190 36);       /* darkened for text on paper (AA) */
  --accent-tint:oklch(95.6% 0.032 42);
  --accent-edge:oklch(85% 0.080 40);
  --green:      oklch(52% 0.115 152);

  --display: "Outfit", "Poppins", ui-sans-serif, system-ui, sans-serif;  /* matches the wordmark */
  --sans:    "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease:  cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);

  --pad: clamp(20px, 5vw, 64px);
  --max: 1240px;
  --r: 4px;           /* the ledger is square; radius is a whisper, not a pill */
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}

/* paper grain — fixed, never repainted by scroll */
body::after{
  content:""; position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
[hidden]{ display:none !important }
h1,h2,h3{ margin:0; font-weight:400; letter-spacing:-.02em; line-height:1.02 }
h1,h2{ font-family:var(--display); font-weight:600 }
p{ margin:0 }
::selection{ background:var(--accent-tint); color:var(--accent-ink) }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--paper); padding:12px 18px; font-size:14px;
}
.skip:focus{ left:12px; top:12px }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad) }

/* ══════════════════════════════════════════════════════════════ notice ═══ */
.notice{
  background:var(--ink); color:var(--paper);
  font-size:13px; letter-spacing:.01em; text-align:center; padding:9px 18px;
}
.notice b{ font-weight:600; color:oklch(88% 0.09 60) }

/* ═════════════════════════════════════════════════════════════════ nav ═══ */
.nav{
  position:sticky; top:0; z-index:20;
  background:color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav-in{
  max-width:var(--max); margin-inline:auto; padding:0 var(--pad);
  height:62px; display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-.03em }
.brand-mark{ width:26px; height:20px; flex:none }
.brand b{ font-weight:600 }
.brand small{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--rule); padding:2px 5px; align-self:center;
}
.nav-links{ display:flex; align-items:center; gap:26px }
.nav-links a{
  font-size:14.5px; color:var(--ink-2); padding:4px 0; position:relative;
  transition:color 160ms var(--ease);
}
.nav-links a:hover{ color:var(--ink) }
.nav-links a[aria-current]{ color:var(--ink) }
.nav-links a[aria-current]::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent);
}

/* ══════════════════════════════════════════════════════════════ button ═══ */
.btn{
  --bg:var(--ink); --fg:var(--paper);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-size:15px; font-weight:500; letter-spacing:-.005em;
  padding:12px 20px; border:1px solid var(--bg); border-radius:var(--r);
  background:var(--bg); color:var(--fg); cursor:pointer; white-space:nowrap;
  transition:transform 140ms var(--ease), background 180ms var(--ease),
             border-color 180ms var(--ease), color 180ms var(--ease);
}
.btn:active{ transform:scale(.97) }
.btn-accent{ --bg:var(--accent); --fg:oklch(99% 0.01 60) }
.btn-line{ --bg:transparent; --fg:var(--ink); border-color:var(--rule-firm) }
.btn-lg{ padding:15px 26px; font-size:16px }
.btn-sm{ padding:8px 14px; font-size:13.5px }
@media (hover:hover) and (pointer:fine){
  .btn:hover{ background:var(--accent-ink); border-color:var(--accent-ink); color:oklch(99% 0.01 60) }
  .btn-line:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
}

/* ═══════════════════════════════════════════════════════════════ intro ═══ */
.intro{ border-bottom:1px solid var(--rule) }
.intro-in{
  max-width:var(--max); margin-inline:auto; padding:26px var(--pad) 28px;
  display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
}
.intro h1{ font-size:clamp(24px,3.2vw,34px); letter-spacing:-.03em }
.intro p{ margin-top:9px; max-width:64ch; font-size:15px; color:var(--ink-2); line-height:1.6 }
.intro p a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px }
.intro .btn{ flex:none }

/* ════════════════════════════════════════════════════ ledger stat line ═══ */
.tape{
  border-bottom:1px solid var(--rule); background:var(--paper-sunk);
  font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--ink-2);
}
.tape-in{
  max-width:var(--max); margin-inline:auto; padding:11px var(--pad);
  display:flex; flex-wrap:wrap; gap:8px 30px;
}
.tape b{ color:var(--ink); font-weight:500 }
.tape-live{ margin-left:auto }
.tape span{ color:var(--ink-3) }

/* ═══════════════════════════════════════════════════════════════ board ═══ */
.board-sec{ padding-block:clamp(28px,4vw,44px) clamp(48px,6vw,80px) }
.sec-hd{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding-bottom:14px; border-bottom:2px solid var(--ink);
}
.sec-hd h2{ font-size:clamp(26px,3.4vw,38px); letter-spacing:-.028em }
.sec-hd p{ font-size:13.5px; color:var(--ink-3) }

.board{ list-style:none; margin:0; padding:0 }
.line{
  position:relative; display:grid; align-items:center;
  grid-template-columns:52px 48px minmax(0,1fr) auto auto;
  gap:18px; padding:15px 12px 16px;
  border-bottom:1px solid var(--rule);
  transition:background 180ms var(--ease);
}
/* stagger the first paint only — the live poller re-renders these rows every few
   seconds, and replaying the entrance each time reads as a flicker */
.board.intro-anim .line{
  animation:rise 400ms var(--ease) backwards;
  animation-delay:calc(var(--i,0) * 30ms);
}
@keyframes rise{ from{ opacity:0; transform:translateY(6px) } }
@media (hover:hover) and (pointer:fine){ .line:hover{ background:var(--paper-card) } }
.line.top{ background:var(--accent-tint) }
.line.top .no{ color:var(--accent) }

/* the measured heat rule — a printed bar, not a glow */
.line::after{
  content:""; position:absolute; left:12px; bottom:-1px; height:2px;
  width:var(--heat,0%); background:var(--accent); opacity:.5;
  transition:width 700ms var(--ease-io);
}
.no{
  font-family:var(--display); font-weight:600; font-size:30px; line-height:1; color:var(--ink-3);
  text-align:right; letter-spacing:-.03em;
}
.shot{
  display:grid; place-items:center;
  width:48px; height:48px; border-radius:11px; overflow:hidden; background:var(--paper-sunk);
  border:1px solid var(--rule); flex:none;
}
.shot img{ width:100%; height:100%; object-fit:cover }
.shot-none{
  width:100%; height:100%; display:grid; place-items:center; background:var(--paper-sunk);
  font-family:var(--display); font-weight:600; font-size:20px; color:var(--ink-3);
}
.cell{ min-width:0 }
.title{ font-size:16.5px; font-weight:600; letter-spacing:-.015em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
@media (hover:hover) and (pointer:fine){ .title:hover{ color:var(--accent) } }
.sub{ font-size:14px; color:var(--ink-2); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.marks{ display:flex; gap:7px; margin-top:7px; flex-wrap:wrap }
.mark{
  font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--rule); padding:2px 6px;
}
.mark-heat{ display:none }
.figure{ text-align:right }
.figure b{ font-family:var(--mono); font-size:16px; font-weight:500; display:block }
.figure span{ font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3) }
.act{ display:flex; flex-direction:column; align-items:flex-end; gap:5px }
.act .btn{ min-width:118px }
.act small{ font-size:11.5px; color:var(--ink-3); max-width:150px; text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* empty board — a composed invitation, not a shrug */
.vacant{
  border:1px dashed var(--rule-firm); padding:clamp(38px,6vw,64px) var(--pad); text-align:center;
}
.vacant h3{ font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,38px); letter-spacing:-.025em }
.vacant p{ margin:12px auto 24px; max-width:44ch; color:var(--ink-2); font-size:15.5px; line-height:1.6 }

/* ════════════════════════════════════════════════════════════════ tape ═══ */
.feed-sec{ padding-bottom:clamp(52px,6vw,84px) }
.feed{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule) }
.feed li{
  display:flex; align-items:baseline; gap:12px; padding:11px 12px;
  border-bottom:1px solid var(--rule); font-size:14.5px; color:var(--ink-2);
}
.feed b{ color:var(--ink); font-weight:600 }
.feed .amt{ font-family:var(--mono); font-size:13.5px; color:var(--accent) }
.feed .at{ margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); white-space:nowrap }
.feed .none{ color:var(--ink-3); justify-content:center }

/* ═══════════════════════════════════════════════════════════════ pages ═══ */
.page{ padding-block:clamp(44px,6vw,78px) clamp(56px,7vw,96px) }
.page-narrow{ max-width:760px }
.page h1{ font-size:clamp(36px,5.6vw,62px); letter-spacing:-.032em; text-wrap:balance }
.page-lede{ margin-top:18px; font-size:17px; color:var(--ink-2); line-height:1.62; max-width:60ch }
.crumb{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); display:inline-block; margin-bottom:26px }
@media (hover:hover) and (pointer:fine){ .crumb:hover{ color:var(--accent) } }
.prose h2{ font-size:clamp(23px,2.8vw,30px); letter-spacing:-.025em; margin-top:44px; padding-bottom:10px;
  border-bottom:1px solid var(--rule) }
.prose p{ margin-top:14px; font-size:15.5px; color:var(--ink-2); line-height:1.72; max-width:68ch }
.prose code{ font-family:var(--mono); font-size:13.5px; background:var(--paper-sunk);
  border:1px solid var(--rule); padding:1px 5px; color:var(--accent-ink) }

/* ════════════════════════════════════════════════════════════════ form ═══ */
.form{ margin-top:34px; display:grid; gap:20px }
.f{ display:grid; gap:7px }
.f > label{ font-size:14px; font-weight:600; letter-spacing:-.01em }
.f > label em{ font-style:normal; font-weight:400; color:var(--ink-3); margin-left:7px; font-size:13px }
.f input, .f select{
  font-family:var(--sans); font-size:15.5px; color:var(--ink);
  padding:12px 14px; border:1px solid var(--rule-firm); border-radius:var(--r);
  background:var(--paper-card); width:100%;
  transition:border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.f input::placeholder{ color:var(--ink-3) }
.f input:focus, .f select:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-tint);
}
.f input[aria-invalid="true"]{ border-color:var(--accent) }
.f small{ font-size:13px; color:var(--ink-3); min-height:1.2em }
.f small.good{ color:var(--green) }
.f small.bad{ color:var(--accent) }
.f-pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.f-inline{ display:flex; gap:9px }
.f-inline input{ flex:1; min-width:0 }
.f-icon{ width:56px; height:56px; border-radius:13px; border:1px solid var(--rule); margin-top:9px; object-fit:cover }
.fine{ font-size:13px; color:var(--ink-3); line-height:1.65; max-width:62ch }
.alert{
  margin-top:24px; padding:13px 16px; border:1px solid var(--accent-edge);
  background:var(--accent-tint); color:var(--accent-ink); font-size:14.5px;
}

/* ══════════════════════════════════════════════════════════════ detail ═══ */
.head{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:26px; align-items:center;
  padding-bottom:28px; border-bottom:2px solid var(--ink) }
.head .shot{ width:88px; height:88px; border-radius:20px }
.head .shot-none{ font-size:38px }
.head h1{ font-size:clamp(30px,4.4vw,46px); margin-top:8px }
.head-sub{ margin-top:9px; font-size:16.5px; color:var(--ink-2); max-width:52ch }
.standing{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent) }
.head-act{ display:grid; gap:8px; justify-items:end; text-align:right }
.head-act small{ font-size:12.5px; color:var(--ink-3); max-width:190px }
.ledger{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) }
.ledger li{ padding:20px 0; border-bottom:1px solid var(--rule) }
.ledger b{ font-family:var(--mono); font-size:23px; font-weight:500; display:block; letter-spacing:-.02em }
.ledger span{ font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3) }
.runs{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule) }
.runs li{ display:flex; align-items:baseline; gap:14px; padding:12px 0; border-bottom:1px solid var(--rule); font-size:14.5px }
.runs b{ font-family:var(--mono); font-weight:500; color:var(--accent); min-width:76px }
.runs span{ color:var(--ink-2) }
.runs .at{ margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--ink-3) }

/* ══════════════════════════════════════════════════════════════ result ═══ */
.result{ max-width:520px; padding-block:clamp(40px,7vw,80px) }
.seal{ width:54px; height:54px; border:1px solid var(--rule-firm); display:grid; place-items:center; margin-bottom:26px }
.seal svg{ width:24px; height:24px }
.seal.win{ border-color:var(--green); color:var(--green) }
.seal.hold{ border-color:var(--accent-edge); color:var(--accent) }
.result h1{ font-size:clamp(34px,5vw,50px) }
.result .page-lede{ margin-bottom:30px }
.result-actions{ display:flex; gap:12px; flex-wrap:wrap }

/* ══════════════════════════════════════════════════════════════ footer ═══ */
.foot{ border-top:1px solid var(--rule); background:var(--paper-sunk); padding-block:34px 40px }
.foot-in{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:baseline }
.foot p{ font-size:13.5px; color:var(--ink-3); max-width:40ch; line-height:1.6 }
.foot nav{ display:flex; gap:22px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-2) }
@media (hover:hover) and (pointer:fine){ .foot nav a:hover{ color:var(--accent) } }

/* ═════════════════════════════════════════════════════════ responsive ═══ */
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; align-items:start }
  .book{ max-width:460px }
  .laws-in{ grid-template-columns:1fr; gap:26px }
}
@media (max-width:720px){
  /* one compact line per app: rank, icon, what it is, what it costs to take.
     the old layout stacked price and action onto their own rows, which pushed
     each entry past 200px and left only three visible on a phone. */
  .line{
    grid-template-columns:26px 40px minmax(0,1fr) auto;
    gap:10px; padding:11px 6px 12px; align-items:center;
  }
  .line::after{ left:6px }
  .no{ font-size:19px }
  .shot{ width:40px; height:40px; border-radius:9px }
  .shot-none{ font-size:17px }
  .title{ font-size:15px }
  .sub{ font-size:13px }
  .marks{ margin-top:5px; gap:5px }
  .mark{ font-size:9.5px; padding:2px 5px }
  .mark-heat{ display:inline; color:var(--accent-ink); border-color:var(--accent-edge) }
  .figure{ display:none }
  .act{ align-items:flex-end; gap:0 }
  .act small{ display:none }
  .act .btn{ min-width:0; padding:9px 13px; font-size:13.5px }

  .intro-in{ padding-block:20px 22px }
  .head{ grid-template-columns:1fr; gap:18px }
  .head-act{ justify-items:stretch; text-align:center }
  .head-act .btn{ width:100% }
  .f-pair{ grid-template-columns:1fr }
  .nav-links{ gap:16px }
  .foot-in{ flex-direction:column; gap:16px }
}

@media (max-width:520px){
  .brand b{ display:none }          /* mark alone; the bar cannot fit both */
  .brand-mark{ width:30px; height:23px }
  .nav-in{ height:58px }
}

@media (max-width:430px){
  .sub{ display:none }              /* name and price carry the row at this size */
  .marks .mark:not(.mark-heat){ display:none }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important }
}