@font-face { font-family: "Barlow"; src: url("fonts/Barlow-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "BarlowSC"; src: url("fonts/BarlowSemiCondensed-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "BarlowSC"; src: url("fonts/BarlowSemiCondensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --bg: #050507; --solid: #0e0d0f; --card: rgba(255, 236, 218, 0.05); --card-hi: rgba(255, 236, 218, 0.08); --line: rgba(255, 214, 180, 0.11);
  --ink: #efe4d6; --dim: rgba(239, 228, 214, 0.64); --faint: rgba(239, 228, 214, 0.38);
  --amber: #f28c45; --hot: #ffb27a; --amber-glass: rgba(242, 140, 69, 0.12); --amber-line: rgba(242, 140, 69, 0.5); --leak-bg: #1a110b;
  --up: #8fdca8; --down: #ff8a75; --up-glass: rgba(143, 220, 168, .06); --up-line: rgba(143, 220, 168, .32);
  --bar-off: rgba(239, 228, 214, .15); --fill: rgba(239, 228, 214, .30); --glass: rgba(9, 8, 10, .95); --on-amber: #120803; --scrim: rgba(0, 0, 0, .55);
  --r: 24px; --gap: 22px;
  --head: "BarlowSC", "Barlow", -apple-system, system-ui, sans-serif;
  --body: "Barlow", -apple-system, system-ui, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f3f1ec; --solid: #fdfcfa; --card: rgba(40, 24, 10, 0.045); --card-hi: rgba(40, 24, 10, 0.08); --line: rgba(40, 24, 10, 0.10);
    --ink: #1b1612; --dim: rgba(27, 22, 18, 0.66); --faint: rgba(27, 22, 18, 0.45);
    --amber: #e0712a; --hot: #b9531a; --amber-glass: rgba(224, 113, 42, 0.10); --amber-line: rgba(200, 96, 30, 0.45); --leak-bg: #fdf1e7;
    --up: #1d7f47; --down: #c23b25; --up-glass: rgba(29, 127, 71, .06); --up-line: rgba(29, 127, 71, .30);
    --bar-off: rgba(40, 24, 10, .12); --fill: rgba(40, 24, 10, .26); --glass: rgba(251, 250, 247, .97); --on-amber: #fff; --scrim: rgba(30, 20, 10, .25);
  }
  .shield, .gate-shield { filter: none !important; }
  .stage, .year { box-shadow: 0 1px 2px rgba(40, 24, 10, .05), 0 10px 30px rgba(40, 24, 10, .05); }
  .bars .b.now .v { box-shadow: none !important; }
}
html { font-variant-numeric: tabular-nums; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.4 var(--body); }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); min-height: 100vh; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
input { font: inherit; color: var(--ink); }

/* phones: not here */
.phone { display: none; position: fixed; inset: 0; z-index: 50; background: var(--bg); flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; }
.phone h1 { font: 600 40px/1 var(--head); margin: 18px 0 10px; } .phone h1 span { color: var(--amber); }
.phone p { color: var(--dim); font-size: 17px; line-height: 1.5; }
@media (max-width: 699px) { .phone { display: flex; } .app, .gate { display: none !important; } }
body.is-phone .phone { display: flex; } body.is-phone .app, body.is-phone .gate { display: none !important; }

/* header */
.top { display: grid; grid-template-columns: 1fr minmax(380px, 720px) 1fr; align-items: center; gap: 24px; padding: 26px 36px 10px; max-width: 1760px; margin: 0 auto; }
.brandrow { display: flex; align-items: center; gap: 12px; }
.shield { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(242, 140, 69, .35)); }
.brand { font: 600 32px/1 var(--head); letter-spacing: .5px; } .brand span { color: var(--amber); }
.right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.fresh { font-size: 14px; color: var(--faint); display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.fresh i { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); }
.fresh.stale i { background: var(--down); box-shadow: 0 0 8px var(--down); }
.me { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--amber-line); font: 600 17px/1 var(--head); color: var(--hot); text-align: center; }
.ask { display: flex; gap: 10px; }
.ask input { flex: 1; min-width: 0; height: 60px; border-radius: 30px; border: 1px solid var(--amber-line); background: var(--amber-glass); padding: 0 26px; font-size: 19px; outline: none; caret-color: var(--amber); }
.ask input::placeholder { color: var(--faint); transition: opacity .3s; }
.ask input:focus { box-shadow: 0 0 26px rgba(242, 140, 69, .22); }
.ask button { width: 60px; height: 60px; border-radius: 50%; background: var(--amber); color: var(--on-amber); display: grid; place-items: center; flex: none; }

.wrap { max-width: 1760px; margin: 0 auto; padding: 26px 36px 40px; min-height: calc(100vh - 100px); display: flex; flex-direction: column; }

/* the river */
.river { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
.river.loading { min-height: 420px; }
.river::before { content: ""; position: absolute; left: 4%; right: 4%; top: 100px; height: 2px; border-radius: 2px; z-index: 0;
  background: linear-gradient(90deg, transparent, var(--amber-line) 6%, var(--amber-line) 94%, transparent); }
.col { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.stage { position: relative; z-index: 1; height: 200px; border-radius: var(--r); background: var(--solid); border: 1px solid var(--line); padding: 22px 22px 20px;
  display: flex; flex-direction: column; transition: border-color .15s, transform .1s; }
.stage:hover { border-color: var(--amber-line); }
.stage:active, .leak:active { transform: scale(.985); }
.stage .nm { height: 26px; font: 600 13px/1 var(--head); letter-spacing: 1.8px; text-transform: uppercase; color: var(--faint); display: flex; justify-content: space-between; align-items: center; }
.stage .nm b { font-weight: 600; color: var(--amber); margin-right: 8px; }
.stage .big { font: 600 52px/1 var(--head); letter-spacing: -.5px; margin-top: auto; white-space: nowrap; }
.stage .sub { font-size: 14.5px; color: var(--dim); margin-top: 10px; line-height: 1.3; min-height: 38px; }
.col:not(:last-child) .stage::after { content: ""; position: absolute; z-index: 3; top: 50%; right: calc(-1 * var(--gap) / 2 - 11px); width: 22px; height: 22px; margin-top: -11px;
  border-radius: 50%; background: var(--bg); border: 1.5px solid var(--amber-line);
  -webkit-mask: none; box-shadow: 0 0 0 4px var(--bg); }
.col:not(:last-child) .stage::before { content: ""; position: absolute; z-index: 4; top: 50%; right: calc(-1 * var(--gap) / 2 - 3px); width: 6px; height: 6px; margin-top: -3px;
  border-top: 2px solid var(--amber); border-right: 2px solid var(--amber); transform: translateX(-1px) rotate(45deg); }
.delta { font: 600 14px/1 var(--head); padding: 6px 10px; border-radius: 12px; background: rgba(143, 220, 168, .13); color: var(--up); white-space: nowrap; letter-spacing: 0; }
.delta.down { background: rgba(255, 138, 117, .13); color: var(--down); }

.drip { width: 0; height: 22px; margin: 0 auto; border-left: 2px dashed var(--amber-line); }
.leak { flex: 1; position: relative; z-index: 1; border-radius: 20px; background: var(--leak-bg); border: 1.5px dashed var(--amber-line); padding: 18px 20px; min-height: 130px;
  display: flex; flex-direction: column; transition: border-color .15s, transform .1s, box-shadow .15s; }
.leak:hover { border-style: solid; border-color: var(--amber); box-shadow: 0 0 28px rgba(242, 140, 69, .18); }
.leak .lb { font: 600 38px/1 var(--head); color: var(--hot); }
.leak .ll { font: 600 17px/1.15 var(--head); margin-top: 8px; }
.leak .ls { font-size: 13.5px; color: var(--dim); margin-top: 6px; line-height: 1.3; }
/* close the loop: what the leak's offers brought back */
.lf { margin-top: auto; padding-top: 12px; display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.3; color: var(--dim); }
.leak:has(.lf) .ls { margin-bottom: 14px; }
.lf i { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--amber); animation: blink 2.4s infinite; }
.lf.won { color: var(--ink); }
.lf.won i { background: var(--up); box-shadow: 0 0 10px var(--up); animation: none; margin-top: 7px; }
.lf b { font: 600 22px/1 var(--head); color: var(--up); white-space: nowrap; letter-spacing: -.2px; }
.lf small { display: block; font-size: 12.5px; color: var(--dim); margin-top: 3px; }
.leak:has(.lf) { padding-bottom: 16px; }
.leak .lf { border-top: 1.5px dashed var(--line); margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }

/* the year */
.year { flex: 1; margin-top: 30px; border-radius: var(--r); background: var(--solid); border: 1px solid var(--line); padding: 26px 30px 22px; display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr; gap: 36px; align-items: stretch; }
.year .eyebrow { font: 600 13px/1 var(--head); letter-spacing: 1.8px; text-transform: uppercase; color: var(--faint); }
.year .big { font: 600 64px/1 var(--head); margin-top: 14px; letter-spacing: -1px; }
.year .row { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.year .vs { color: var(--dim); font-size: 15px; }
.year .legend { margin-top: auto; padding-top: 18px; font-size: 13px; color: var(--faint); display: flex; align-items: center; gap: 8px; }
.year .legend i { display: inline-block; width: 18px; border-top: 2px solid var(--faint); }
.year .left { display: flex; flex-direction: column; }
.bars { display: flex; align-items: flex-end; gap: 12px; min-height: 210px; }
.bars .b { flex: 1; position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.bars .ly { position: absolute; left: -2px; right: -2px; border-top: 2px solid var(--faint); opacity: .85; }
.bars .v { width: 100%; border-radius: 7px 7px 3px 3px; background: var(--bar-off); }
.bars .b.now .v { background: linear-gradient(var(--hot), var(--amber)); box-shadow: 0 0 22px rgba(242, 140, 69, .35); }
.bars .b.now.partial .v { background: repeating-linear-gradient(-45deg, var(--amber) 0 7px, rgba(242,140,69,.55) 7px 12px); }
.bars .m { font: 500 12px/1 var(--head); color: var(--faint); margin-top: 8px; height: 12px; }
.bars .b.now .m { color: var(--hot); }

/* rows */
.rows { margin-top: 6px; }
.r { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.r:first-child { border-top: 0; }
.ph { width: 66px; height: 48px; border-radius: 10px; flex: none; background: var(--card-hi) center/cover no-repeat; display: grid; place-items: center; color: var(--faint); }
.ph svg { opacity: .55; }
.r .t { flex: 1; min-width: 0; }
.r .t b { display: block; font-weight: 500; font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r .t span { display: block; font-size: 14px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r .side { text-align: right; flex: none; }
.r .amt { font: 600 18px/1 var(--head); }
.r .chip { font-size: 13px; color: var(--faint); margin-top: 4px; white-space: nowrap; }
.r .chip.hot { color: var(--hot); }
.act { flex: none; height: 42px; padding: 0 18px; border-radius: 21px; background: var(--amber-glass); border: 1px solid var(--amber-line); color: var(--hot);
  font: 600 15px/40px var(--head); text-decoration: none; letter-spacing: .3px; white-space: nowrap; }
.act:hover { background: var(--amber); color: var(--on-amber); }
.act.sent { background: transparent; border-color: var(--up-line); color: var(--up); }
.act.sent:hover { background: var(--up-glass); color: var(--up); }

/* the loop panel at the top of a leak's drawer */
.loop { margin-top: 24px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); padding: 18px 20px 14px; }
.loop.won { border-color: var(--up-line); background: var(--up-glass); }
.loop .label { margin: 0 0 12px; }
.loop .lrow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.loop .lbig { font: 600 44px/1 var(--head); letter-spacing: -.3px; }
.loop.won .lbig { color: var(--up); }
.loop .lof { color: var(--dim); font-size: 16px; }
.seg { display: flex; gap: 4px; height: 12px; margin-top: 16px; }
.seg i { border-radius: 6px; min-width: 12px; }
.seg .sb, .segl .sb { background: var(--up); } .seg .sw, .segl .sw { background: var(--amber); } .seg .sx, .segl .sx { background: var(--bar-off); }
.seg .sw { opacity: .6; }
.segl { display: flex; gap: 20px; margin-top: 10px; font-size: 14px; color: var(--dim); }
.segl i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.loop .rows { margin-top: 12px; border-top: 1px solid var(--line); }
.loop .r:first-child { border-top: 0; }
.loop .chip.hot { color: var(--up); }

/* every name is a door */
.r.tap { cursor: pointer; border-radius: 12px; transition: background .12s; margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
.r.tap:hover { background: var(--card); }
.r.tap:active { background: var(--card-hi); }
.r.tap .t b { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .12s; }
.r.tap:hover .t b { text-decoration-color: var(--amber-line); }
.drawer-bar .back { margin-right: 2px; }

/* the person card */
.hero { height: 230px; border-radius: 20px; background: var(--card-hi) center/cover no-repeat; margin-top: 2px; box-shadow: inset 0 -60px 60px -30px rgba(0,0,0,.35); }
.pline { color: var(--dim); font-size: 16px; margin-top: 14px; }
.pacts { display: flex; gap: 10px; margin-top: 14px; }
.pacts .btn { margin-top: 0; flex: 1; }
.know { display: flex; flex-wrap: wrap; gap: 9px; }
.kchip { height: 46px; padding: 0 18px; border-radius: 23px; border: 1px solid var(--amber-line); background: var(--amber-glass); color: var(--ink); font: 500 16px/44px var(--body); white-space: nowrap; }
.kchip.k-team { background: transparent; border-style: dashed; }
.kchip.k-heads-up { border-color: rgba(255, 138, 117, .55); background: rgba(255, 138, 117, .08); }
.kchip.k-family, .kchip.k-life { border-color: var(--amber); }
.kchip.on { background: var(--amber); color: var(--on-amber); }
.kdetail { margin-top: 12px; border-left: 3px solid var(--amber); padding: 6px 0 6px 16px; }
.kq { font-size: 17px; line-height: 1.45; font-style: italic; }
.kfrom { color: var(--faint); font-size: 13.5px; margin-top: 6px; }
.kx { width: auto; display: inline-block; padding: 0 22px; height: 44px; line-height: 42px; margin-top: 12px; }
.kwait { display: flex; align-items: center; gap: 12px; color: var(--dim); }
.kwait .thinking { padding: 10px 0; }
.kadd { display: flex; gap: 10px; margin-top: 14px; }
.kadd .field { flex: 1; height: 54px; border-radius: 27px; font-size: 16px; }
.kgo { height: 54px; padding: 0 24px; border-radius: 27px; background: var(--amber); color: var(--on-amber); font: 600 17px/54px var(--head); text-align: center; flex: none; }
.garage { display: flex; flex-direction: column; gap: 12px; }
.car { display: flex; gap: 16px; border: 1px solid var(--line); border-radius: 18px; padding: 14px; background: var(--card); }
.cph { width: 128px; height: 92px; border-radius: 12px; flex: none; background: var(--card-hi) center/cover no-repeat; display: grid; place-items: center; color: var(--faint); }
.cbody { flex: 1; min-width: 0; }
.cbody > b { display: block; font: 600 19px/1.15 var(--head); }
.cbody > span { display: block; color: var(--dim); font-size: 14px; margin-top: 3px; }
.has { margin-top: 10px; display: grid; gap: 3px; font-size: 14px; color: var(--dim); }
.has i { font-style: normal; color: var(--ink); display: inline-block; min-width: 92px; font-weight: 500; }
.next { margin-top: 6px; font-size: 14px; color: var(--hot); }
.insp { margin-top: 12px; width: 100%; height: 48px; border-radius: 24px; border: 1.5px dashed var(--amber-line); padding: 0 18px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--dim); }
.insp b { font: 600 16px/1 var(--head); color: var(--hot); }
.insp.set { border-style: solid; border-color: var(--up-line); background: var(--up-glass); }
.insp.set b { color: var(--up); }
.months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.mo { height: 56px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); font: 600 17px/1 var(--head); text-align: center; }
.mo small { display: block; font: 500 11px/1 var(--body); color: var(--faint); margin-top: 4px; }
.mo.on { background: var(--amber); color: var(--on-amber); border-color: var(--amber); } .mo.on small { color: var(--on-amber); }
.mo.clear { grid-column: span 4; height: 46px; color: var(--dim); }
.nowk { width: 12px; height: 12px; border-radius: 50%; flex: none; margin: 0 6px; background: var(--amber); }
.nowk.k-quote { background: transparent; border: 2px solid var(--amber); } .nowk.k-owed { background: var(--down); }
.tl { position: relative; margin-top: 4px; }
.tl::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; border-left: 2px solid var(--line); }
.ti { position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 0 9px 28px; }
.ti i { position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--glass); }
.ti.k-quote i { background: var(--glass); border: 2px solid var(--amber); }
.ti.k-pay i { background: var(--up); } .ti.k-text i { background: var(--glass); border: 2px solid var(--up); } .ti.k-x i { background: var(--bar-off); }
.ti.k-x .tt b { color: var(--faint); text-decoration: line-through; }
.tt { flex: 1; min-width: 0; } .tt b { display: block; font-weight: 500; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt span, .ta span { display: block; font-size: 13px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta { text-align: right; flex: none; } .ta b { font: 600 16px/1.1 var(--head); }
a.r.doc { color: inherit; text-decoration: none; }

/* every car is a door */
.ph[data-v] { cursor: zoom-in; transition: transform .12s; } .ph[data-v]:hover { transform: scale(1.04); }
.car[data-v] { cursor: pointer; transition: border-color .12s; } .car[data-v]:hover { border-color: var(--amber-line); }

/* the car page */
.hero.tall { height: 280px; }
.hero.none { display: grid; place-items: center; color: var(--faint); height: 140px; }
.hero.none svg { width: 56px; height: 56px; }
.cspec { font: 600 19px/1.3 var(--head); margin-top: 16px; }
.cbuilt { color: var(--dim); font-size: 14.5px; margin-top: 4px; }
.owner { display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; margin-top: 14px; padding: 0 20px; border-radius: 28px; border: 1px solid var(--line); background: var(--card); text-align: left; }
.owner span { color: var(--faint); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.owner b { flex: 1; font: 600 18px/1 var(--head); }
.owner i { font-style: normal; font-size: 26px; color: var(--amber); line-height: 1; }
.owner:hover { border-color: var(--amber-line); }
.prot { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pc { border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: var(--card); display: flex; flex-direction: column; gap: 8px; border-top: 4px solid var(--up); }
.pc.s-soon { border-top-color: var(--amber); } .pc.s-off { border-top-color: var(--bar-off); }
.pch b { display: block; font: 600 21px/1 var(--head); }
.pch span { display: block; font-size: 13.5px; color: var(--dim); margin-top: 5px; }
.pcn { font-size: 13.5px; color: var(--ink); display: grid; gap: 2px; }
.pcn div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcc { margin-top: auto; font: 600 15px/1.2 var(--head); color: var(--up); }
.pc.s-soon .pcc { color: var(--hot); } .pc.s-off .pcc { color: var(--faint); }
.follow { margin-top: 12px; font-size: 14px; color: var(--dim); padding-left: 14px; border-left: 2px solid var(--line); }
.cinsp { margin-top: 18px; }
.insp.big { height: 58px; border-radius: 29px; font-size: 16px; margin-top: 0; }
.insp.big b { font-size: 18px; }
.visits { display: flex; flex-direction: column; gap: 10px; }
.visit { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: var(--card); }
.visit.x { opacity: .5; }
.vh { display: flex; align-items: baseline; gap: 10px; }
.vh b { font: 600 17px/1 var(--head); } .vh span { color: var(--dim); font-size: 13.5px; flex: 1; }
.vh em { font: 600 18px/1 var(--head); font-style: normal; }
.vl { margin-top: 10px; display: grid; gap: 4px; font-size: 14.5px; }
.vl div { display: flex; gap: 12px; } .vl span { flex: 1; min-width: 0; } .vl small { color: var(--faint); font-size: 12.5px; }
.vl i { font-style: normal; color: var(--dim); font-variant-numeric: tabular-nums; }
.vn { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--dim); font-style: italic; border-left: 3px solid var(--amber-line); padding-left: 12px; white-space: pre-line; }
/* photos: real <img>, lazy, cropped to fill */
.ph, .cph, .hero { overflow: hidden; }
.ph img, .cph img, .hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.err + .btn[data-retry] { margin-top: 14px; }

/* every bar is a door */
.bars .b[data-d] { cursor: pointer; }
.bars .b[data-d]:hover .v { filter: brightness(1.35); }
.bars .b[data-d]:hover .m { color: var(--hot); }
.hb.tap { cursor: pointer; border-radius: 10px; padding: 5px 8px; margin: 6px -8px; transition: background .12s; }
.hb.tap:hover { background: var(--card); }
.hb.tap:hover .lbl { color: var(--ink); }
.bars.cols { min-height: 0; height: 190px; gap: 7px; margin-top: 6px; }
.colkey { font-size: 12.5px; color: var(--faint); display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.colkey i { display: inline-block; width: 18px; border-top: 2px solid var(--faint); }
.sold { display: grid; gap: 13px; }
.so { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 14px; align-items: baseline; }
.son { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.son b { font-weight: 500; font-size: 15px; } .son span { font-size: 12.5px; color: var(--faint); margin-left: 8px; }
.sov { font: 600 16px/1 var(--head); }
.sot { grid-column: span 2; height: 8px; border-radius: 4px; background: var(--card); overflow: hidden; }
.sot i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--amber), var(--hot)); }
.vin { margin: 22px 0 6px; font: 500 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--faint); letter-spacing: .04em; }

/* drawer */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 20; animation: fade .18s ease-out; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(660px, 94vw); z-index: 21; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid var(--line); overflow-y: auto; animation: slide .22s ease-out; padding-bottom: 48px; }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.drawer-bar { position: sticky; top: 0; display: flex; align-items: center; gap: 12px; padding: 24px 28px 14px; background: var(--glass); z-index: 2; }
.drawer-title { flex: 1; font: 600 26px/1.1 var(--head); }
.x { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--dim); flex: none; }
.drawer-body { padding: 0 28px; }
.answer .big { font: 600 76px/1 var(--head); margin-top: 4px; }
.answer .sub { color: var(--dim); font-size: 16px; margin-top: 10px; }
.answer .q { color: var(--faint); font-size: 14px; }
.answer .basis { display: inline-block; margin-top: 12px; font-size: 12.5px; color: var(--dim); border: 1px solid var(--line); border-radius: 12px; padding: 5px 10px; }
.dstats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.dstat { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.dstat b { font: 600 22px/1 var(--head); } .dstat span { display: block; font-size: 12.5px; color: var(--faint); margin-top: 4px; }
.label { font: 600 13px/1.2 var(--head); letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint); margin: 30px 0 8px; }
.cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.cal .dh { font: 500 12px/1 var(--head); letter-spacing: 1px; color: var(--faint); text-transform: uppercase; text-align: center; }
.cell { position: relative; height: 54px; border-radius: 12px; background: var(--card); border: 1px solid transparent; overflow: hidden; padding: 8px 10px; }
.cell .bar { position: absolute; left: 0; bottom: 0; top: 0; background: var(--fill); opacity: .5; }
.cell .dn { position: relative; font: 600 17px/1 var(--head); }
.cell .dn small { font: 500 11px/1 var(--head); color: var(--faint); margin-left: 3px; }
.cell .jc { position: absolute; right: 10px; bottom: 8px; font: 500 12px/1 var(--head); color: var(--dim); }
.cell.light { border: 1.5px dashed var(--amber-line); background: var(--leak-bg); }
.cell.light .bar { background: var(--amber); opacity: .3; }
.cell.light .dn { color: var(--hot); }
.cell.past { opacity: .35; }
.cell.today { box-shadow: inset 0 0 0 2px var(--amber); }
.cell.closed { background: repeating-linear-gradient(-45deg, var(--card) 0 5px, transparent 5px 10px); }
.cell:hover { border-color: var(--amber-line); }
.hb { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 12px; margin: 11px 0; font-size: 14.5px; }
.hb .lbl { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb .track { position: relative; height: 16px; border-radius: 8px; background: var(--card); }
.hb .fillh { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(90deg, var(--amber), var(--hot)); }
.hb .lyl { position: absolute; top: -5px; bottom: -5px; border-left: 2px solid var(--ink); opacity: .5; }
.hb .val { font: 600 16px/1 var(--head); min-width: 66px; text-align: right; }
.hb .val small { display: block; font: 500 12px/1 var(--body); margin-top: 4px; color: var(--up); }
.hb .val small.down { color: var(--down); }
.thinking { display: flex; gap: 6px; padding: 30px 0; }
.thinking i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: blink 1s infinite; }
.thinking i:nth-child(2) { animation-delay: .15s } .thinking i:nth-child(3) { animation-delay: .3s }
@keyframes blink { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
.muted { color: var(--dim); }
.err { color: var(--down); padding: 20px 0; }
.empty { color: var(--faint); padding: 20px 0; }

/* people */
.people .p { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.people .p .t { flex: 1; } .people .p .t span { display: block; font-size: 13px; color: var(--faint); }
.pill-row { display: flex; gap: 8px; margin: 12px 0; }
.pill { flex: 1; height: 48px; border-radius: 24px; border: 1px solid var(--line); color: var(--dim); font: 500 16px/48px var(--head); text-align: center; }
.pill.on { border-color: var(--amber); color: var(--hot); background: var(--amber-glass); }
.field { width: 100%; height: 52px; border-radius: 26px; border: 1px solid var(--amber-line); background: var(--amber-glass); padding: 0 18px; outline: none; caret-color: var(--amber); }
.btn { display: block; width: 100%; height: 52px; border-radius: 26px; background: var(--amber); color: var(--on-amber); font: 600 17px/52px var(--head); text-align: center; text-decoration: none; margin-top: 12px; }
.btn.ghost { background: transparent; color: var(--hot); border: 1px solid var(--amber-line); }
.invite-out { background: var(--card); border: 1px solid var(--amber-line); border-radius: 16px; padding: 14px; margin-top: 14px; word-break: break-all; font-size: 14px; }
.invite-out .code { font: 600 30px/1 var(--head); letter-spacing: 3px; color: var(--hot); margin: 6px 0 10px; word-break: normal; }

/* gate */
.gate { position: fixed; inset: 0; z-index: 30; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.gate-shield { width: 92px; filter: drop-shadow(0 0 22px rgba(242,140,69,.4)); }
.gate h1 { font: 600 46px/1 var(--head); margin: 18px 0 8px; } .gate h1 span { color: var(--amber); }
.gate p { color: var(--dim); max-width: 360px; }
.gate form { display: flex; gap: 8px; margin-top: 18px; width: 100%; max-width: 360px; }
.gate input { flex: 1; min-width: 0; height: 54px; border-radius: 27px; border: 1px solid var(--amber-line); background: var(--amber-glass); padding: 0 18px; text-align: center;
  font: 600 22px/1 var(--head); letter-spacing: 3px; outline: none; caret-color: var(--amber); }
.gate form button { height: 54px; padding: 0 22px; border-radius: 27px; background: var(--amber); color: var(--on-amber); font: 600 17px/1 var(--head); text-align: center; }
.gate-err { color: var(--down); margin-top: 14px; min-height: 20px; }

/* iPad portrait / small laptop: river in two rows of three */
@media (max-width: 1199px) {
  .top { grid-template-columns: auto 1fr auto; padding: 20px 24px 6px; gap: 16px; }
  .wrap { padding: 20px 24px 44px; }
  .fresh { display: none; }
  .river { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  .river::before { display: none; }
  .col:nth-child(3) .stage::after, .col:nth-child(3) .stage::before { display: none; }
  .stage .big { font-size: 48px; }
  .year { grid-template-columns: 1fr; gap: 20px; flex: none; } .bars { height: 230px; }
}
@media (min-width: 1600px) {
  .stage { height: 220px; } .stage .big { font-size: 60px; } .river::before { top: 110px; }
  .leak .lb { font-size: 42px; }
}