/* ══ Timberline — components ══════════════════════════════════════════════ */

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 20px;
  border-radius: 999px;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
  color: var(--bone);
  background: color-mix(in oklab, var(--bone) 5%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
  transition: transform .5s var(--spring), box-shadow var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}
.btn span, .btn svg { position: relative; z-index: 1; }
.btn svg { width: 17px; height: 17px; transition: transform .5s var(--spring); }
.btn::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(140px 60px at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--accent) 26%, transparent), transparent 72%);
  opacity: 0; transition: opacity var(--t) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 42%, transparent); }
.btn:hover::before { opacity: 1; }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(.97); }

.btn--solid {
  color: #0a0f0c;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 30px -14px var(--accent), inset 0 1px 0 #fff6;
}
.btn--solid::before { background: linear-gradient(100deg, var(--accent-2), var(--accent)); }
.btn--solid:hover { box-shadow: 0 18px 40px -16px var(--accent), inset 0 1px 0 #fff8; }

.btn--ghost { height: 38px; padding: 0 15px; font-size: 13.5px; color: var(--fog); background: none; box-shadow: inset 0 0 0 1px var(--line-soft); }
.btn--ghost:hover { color: var(--bone); }

/* ── panels ───────────────────────────────────────────────────────────── */
.panel { margin: clamp(30px, 5vw, 60px) 0 0; }
.panel__head {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.panel__head .muted { flex: 1; min-width: 200px; }

/* ── stat strip ───────────────────────────────────────────────────────── */
.stats {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.stat {
  position: relative;
  padding: 20px 20px 18px;
  border-radius: var(--r-l);
  background: linear-gradient(168deg, color-mix(in oklab, var(--bark-700) 88%, transparent), color-mix(in oklab, var(--bark-900) 92%, transparent));
  box-shadow: var(--shadow-card);
  overflow: hidden;
  isolation: isolate;
}
.stat::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 12% 0%, var(--accent-wash), transparent 62%);
  opacity: .9;
}
.stat::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 60%, transparent), transparent);
  transform: scaleX(var(--sweep, 0)); transform-origin: left;
  animation: sweepIn 1.4s var(--ease-out) forwards; animation-delay: calc(var(--i) * .08s);
}
@keyframes sweepIn { to { --sweep: 100%; transform: scaleX(1) } }
.stat__v { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.stat__v small { font-size: .5em; font-weight: 600; color: var(--fog); margin-left: 3px; letter-spacing: 0; }
.stat__k { margin-top: 9px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fog-dim); }
.stat__spark { position: absolute; right: 14px; bottom: 12px; width: 74px; height: 26px; opacity: .55; }
.stat__spark path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 1.6s var(--ease-out) .3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0 } }

/* ── ticker ───────────────────────────────────────────────────────────── */
.ticker {
  position: relative; overflow: hidden;
  border-radius: var(--r-l);
  padding: 14px 0;
  background: linear-gradient(100deg, color-mix(in oklab, var(--bark-800) 84%, transparent), transparent 70%);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track { display: flex; gap: 12px; width: max-content; animation: roll 68s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes roll { to { transform: translateX(-50%) } }
.tick {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 16px 9px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--bark-700) 76%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  white-space: nowrap;
  transition: transform .4s var(--spring), box-shadow var(--t) var(--ease);
}
.tick:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent); }
.tick__art { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 34%, var(--accent-wash), transparent 70%); flex: none; }
.tick__art img { width: 30px; height: 30px; object-fit: contain; }
.tick__n { font-size: 13.5px; font-weight: 600; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; }
.tick__d { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.tick__d svg { width: 13px; height: 13px; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--fog-dim); }

/* ── gateway cards ────────────────────────────────────────────────────── */
.gateway { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: clamp(30px, 5vw, 60px); }
.gate {
  position: relative; text-align: left;
  padding: 26px 24px 24px;
  border-radius: var(--r-l);
  background: linear-gradient(162deg, color-mix(in oklab, var(--bark-700) 90%, transparent), color-mix(in oklab, var(--bark-900) 94%, transparent));
  box-shadow: var(--shadow-card);
  overflow: hidden; isolation: isolate;
  transition: transform .55s var(--spring), box-shadow var(--t) var(--ease);
}
.gate::before {
  content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: conic-gradient(from var(--angle), transparent 62%, var(--accent) 82%, var(--accent-2) 90%, transparent 98%);
  opacity: 0; transition: opacity .5s var(--ease);
  animation: rotate 5s linear infinite;
}
.gate::after {
  content: ''; position: absolute; inset: 1px; z-index: -1; border-radius: inherit;
  background: linear-gradient(162deg, #0f1713, #090e0b);
}
@keyframes rotate { to { --angle: 360deg } }
.gate:hover { transform: translateY(-5px); }
.gate:hover::before { opacity: .8; }
.gate__ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--accent); background: var(--accent-wash); margin-bottom: 18px; transition: transform .55s var(--spring); }
.gate__ico svg { width: 21px; height: 21px; }
.gate:hover .gate__ico { transform: rotate(-8deg) scale(1.08); }
.gate__t { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
.gate__d { display: block; margin-top: 6px; color: var(--fog); font-size: 13.5px; line-height: 1.55; }
.gate__ico, .gate__n { display: grid; }
.gate__n { position: absolute; top: 22px; right: 22px; font-family: var(--font-mono); font-size: 12px; color: var(--fog-dim); }

/* ── notes ────────────────────────────────────────────────────────────── */
.notes__list { display: grid; gap: 10px; }
.notes__list li {
  position: relative;
  padding: 16px 20px 16px 50px;
  border-radius: var(--r-m);
  background: color-mix(in oklab, var(--bark-800) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  color: var(--fog); font-size: 14.5px; line-height: 1.62;
}
.notes__list li::before {
  content: ''; position: absolute; left: 20px; top: 23px;
  width: 9px; height: 9px; border-radius: 3px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  transform: rotate(45deg);
}

/* ── toolbar / field ──────────────────────────────────────────────────── */
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }

.field {
  position: relative; flex: 1 1 260px; min-width: 220px; max-width: 460px;
  display: flex; align-items: center; gap: 11px;
  height: 48px; padding: 0 14px;
  border-radius: var(--r-m);
  background: color-mix(in oklab, var(--bark-800) 82%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: box-shadow var(--t) var(--ease), background var(--t) var(--ease);
  overflow: hidden;
}
.field:focus-within { background: color-mix(in oklab, var(--bark-700) 90%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 34%, transparent); }
.field__icon { width: 18px; height: 18px; color: var(--fog-dim); flex: none; transition: color var(--t) var(--ease), transform .5s var(--spring); }
.field:focus-within .field__icon { color: var(--accent); transform: scale(1.08); }
.field input { flex: 1; min-width: 0; font-size: 15px; caret-color: var(--accent); }
.field input::placeholder { color: var(--fog-dim); }
.field__clear {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--fog-dim);
  background: color-mix(in oklab, var(--bone) 6%, transparent);
  opacity: 0; scale: .6; pointer-events: none;
  transition: opacity var(--t) var(--ease), scale .4s var(--spring), color var(--t) var(--ease);
}
.field__clear svg { width: 12px; height: 12px; }
.field.has-value .field__clear { opacity: 1; scale: 1; pointer-events: auto; }
.field__clear:hover { color: var(--bone); }
.field__line {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.field:focus-within .field__line { transform: scaleX(1); }

/* ── segmented control ────────────────────────────────────────────────── */
.seg {
  position: relative; display: flex; gap: 2px;
  padding: 4px; height: 48px;
  border-radius: var(--r-m);
  background: color-mix(in oklab, var(--bark-800) 82%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.seg button {
  position: relative; z-index: 1;
  padding: 0 15px; border-radius: 11px;
  font-size: 13.5px; font-weight: 600;
  color: var(--fog-dim);
  transition: color var(--t) var(--ease);
}
.seg button.is-on { color: var(--accent-ink); }
.seg button:hover { color: var(--bone); }
.seg__pill {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0;
  border-radius: 11px;
  background: linear-gradient(120deg, color-mix(in oklab, var(--accent) 24%, transparent), color-mix(in oklab, var(--accent-2) 20%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 34%, transparent);
  transition: transform .48s var(--spring), width .48s var(--spring);
}
.seg--mini { height: 34px; padding: 3px; border-radius: 11px; }
.seg--mini button { padding: 0 11px; font-size: 11.5px; border-radius: 8px; letter-spacing: .04em; text-transform: uppercase; }
.seg--mini .seg__pill { top: 3px; bottom: 3px; border-radius: 8px; }

/* ── dropdown ─────────────────────────────────────────────────────────── */
.drop { position: relative; }
.drop__btn {
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 15px;
  border-radius: var(--r-m);
  background: color-mix(in oklab, var(--bark-800) 82%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  font-size: 13.5px;
  transition: box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.drop__btn:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent); }
.drop__lbl { color: var(--fog-dim); }
.drop__val { font-weight: 600; }
.drop__btn svg { width: 15px; height: 15px; color: var(--fog-dim); transition: transform .45s var(--spring); }
.drop.is-open .drop__btn svg { transform: rotate(180deg); }
.drop.is-open .drop__btn { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 44%, transparent); }
.drop__menu {
  position: absolute; z-index: 30; top: calc(100% + 8px); right: 0;
  min-width: 218px; padding: 6px;
  border-radius: var(--r-m);
  background: color-mix(in oklab, var(--bark-700) 96%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: 0 26px 60px -22px #000e, inset 0 0 0 1px var(--line);
  opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: top right;
  pointer-events: none;
  transition: opacity .26s var(--ease), transform .38s var(--spring);
}
.drop.is-open .drop__menu { opacity: 1; transform: none; pointer-events: auto; }
.drop__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 10px 12px; border-radius: 10px;
  font-size: 13.5px; color: var(--fog);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.drop__opt:hover { background: color-mix(in oklab, var(--bone) 6%, transparent); color: var(--bone); }
.drop__opt.is-on { color: var(--accent-ink); background: var(--accent-wash); }
.drop__opt i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.drop__opt.is-on i { opacity: 1; }

/* ── chips ────────────────────────────────────────────────────────────── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: var(--fog);
  background: color-mix(in oklab, var(--bark-800) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: transform .45s var(--spring), color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.chip b { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--fog-dim); transition: color var(--t) var(--ease); }
.chip:hover { transform: translateY(-2px); color: var(--bone); }
.chip.is-on {
  color: var(--accent-ink);
  background: linear-gradient(120deg, color-mix(in oklab, var(--accent) 20%, transparent), color-mix(in oklab, var(--accent-2) 14%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 42%, transparent), 0 8px 22px -14px var(--accent);
}
.chip.is-on b { color: color-mix(in oklab, var(--accent-ink) 70%, transparent); }

/* ── item grid + cards ────────────────────────────────────────────────── */
.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  align-items: start;
}
.grid--wood { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 16px 16px 14px;
  border-radius: var(--r-l);
  background: linear-gradient(168deg, color-mix(in oklab, var(--bark-700) 82%, transparent), color-mix(in oklab, var(--bark-900) 90%, transparent));
  box-shadow: var(--shadow-card);
  text-align: left; overflow: hidden; isolation: isolate;
  content-visibility: auto; contain-intrinsic-size: auto 330px;
  transition: transform .5s var(--ease-out), box-shadow .4s var(--ease);
  animation: cardIn .6s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.97) } to { opacity: 1; transform: none } }
.card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(360px 220px at var(--mx, 50%) var(--my, 0%), var(--accent-wash), transparent 68%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: 0 1px 0 #ffffff12 inset, 0 34px 60px -30px #000, 0 0 0 1px color-mix(in oklab, var(--accent) 26%, transparent); }
.card:hover::before { opacity: 1; }

.card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); padding: 4px 9px; border-radius: 7px;
  background: var(--accent-wash);
}
.year { font-family: var(--font-mono); font-size: 11.5px; color: var(--fog-dim); }

.card__art {
  position: relative; height: 128px;
  display: grid; place-items: center;
  margin: 4px 0 10px;
}
.card__art img {
  max-height: 118px; max-width: 82%; width: auto; object-fit: contain;
  filter: drop-shadow(0 14px 18px #000a);
  transition: transform .6s var(--ease-out), filter .5s var(--ease);
}
.card:hover .card__art img { transform: translateY(-6px) scale(1.07); filter: drop-shadow(0 20px 26px #000c) drop-shadow(0 0 22px color-mix(in oklab, var(--accent) 34%, transparent)); }
.card__halo {
  position: absolute; z-index: -1; width: 145px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-wash), transparent 66%);
  opacity: .8;
  transition: transform .7s var(--ease-out), opacity .5s var(--ease);
}
.card:hover .card__halo { transform: scale(1.24); opacity: 1; }
.card__art--empty { color: var(--bark-500); }
.card__art--empty svg { width: 44px; height: 44px; }

.card__name {
  font-family: var(--font-display); font-size: 16.5px; font-weight: 600;
  letter-spacing: -.022em; line-height: 1.24;
  margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.ladder { display: grid; gap: 5px; margin-top: auto; }
.rung {
  position: relative;
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 9px;
  padding: 8px 10px;
  border-radius: 11px;
  background: color-mix(in oklab, var(--bark-900) 60%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  overflow: hidden;
}
.rung__bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%);
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 26%, transparent), transparent);
  transform-origin: left; transform: scaleX(0);
  animation: growBar .9s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 22ms + .18s);
}
@keyframes growBar { to { transform: scaleX(1) } }
.rung--one { grid-template-columns: 46px 1fr; }
.rung--one .rung__v { color: var(--fog); font-size: 12px; }
.rung__k { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fog-dim); position: relative; }
.rung__v { font-family: var(--font-mono); font-size: 13px; font-weight: 500; position: relative; }
.rung__t { font-family: var(--font-mono); font-size: 11.5px; color: var(--fog); position: relative; white-space: nowrap; }
.rung__t small { color: var(--fog-dim); font-size: .86em; }

.card__foot { display: flex; align-items: center; gap: 9px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line-soft); }
.pips { display: flex; gap: 3px; }
.pips i { width: 4px; height: 12px; border-radius: 2px; background: var(--bark-500); transition: background .4s var(--ease); }
.pips i.on { background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.card__rate { font-size: 11.5px; color: var(--fog-dim); font-family: var(--font-mono); }

/* ── wood card ────────────────────────────────────────────────────────── */
.wood__stage { position: relative; height: 168px; display: grid; place-items: center; margin: 6px 0 12px; }
.wood__stage img {
  position: absolute; max-height: 156px; max-width: 84%; object-fit: contain;
  filter: drop-shadow(0 16px 22px #000b);
  opacity: 0; transform: scale(.9) rotate(-4deg); pointer-events: none;
  transition: opacity .45s var(--ease), transform .6s var(--ease-out);
}
.wood__stage img.is-live { opacity: 1; transform: none; }
.card:hover .wood__stage img.is-live { transform: translateY(-5px) scale(1.05); }
.wood__none {
  position: absolute;
  display: grid; place-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bark-500);
  opacity: 0; transform: scale(.94); pointer-events: none;
  transition: opacity .45s var(--ease), transform .6s var(--ease-out);
}
.wood__none svg { width: 36px; height: 36px; }
.wood__none.is-live { opacity: 1; transform: none; }
.wood__pedestal {
  position: absolute; bottom: 6px; width: 62%; height: 14px; border-radius: 50%;
  background: radial-gradient(ellipse, var(--accent-wash), transparent 70%);
  filter: blur(3px);
}
.wood__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.cellv {
  padding: 10px 11px; border-radius: 12px;
  background: color-mix(in oklab, var(--bark-900) 58%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.cellv__k { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fog-dim); }
.cellv__v { font-family: var(--font-mono); font-size: 13.5px; margin-top: 4px; }

/* ── service lanes ────────────────────────────────────────────────────── */
.lanes { display: grid; gap: 10px; }
.lane {
  position: relative;
  display: grid; grid-template-columns: 62px minmax(0, 1.5fr) minmax(0, 1fr) 176px 40px;
  align-items: center; gap: 18px;
  padding: 14px 18px;
  border-radius: var(--r-l);
  background: linear-gradient(100deg, color-mix(in oklab, var(--bark-700) 78%, transparent), color-mix(in oklab, var(--bark-900) 86%, transparent));
  box-shadow: var(--shadow-card);
  overflow: hidden; isolation: isolate;
  animation: cardIn .6s var(--ease-out) both; animation-delay: calc(var(--i) * 40ms);
  transition: transform .45s var(--ease-out), box-shadow .4s var(--ease);
}
.lane::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--accent-wash), transparent 48%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.lane:hover { transform: translateX(6px); box-shadow: 0 26px 50px -30px #000, inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent); }
.lane:hover::before { opacity: 1; }
.lane__art { width: 62px; height: 56px; display: grid; place-items: center; }
.lane__art img { max-height: 54px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px #000a); transition: transform .5s var(--spring); }
.lane:hover .lane__art img { transform: scale(1.1) rotate(-4deg); }
.lane__art .glyph { display: grid; place-items: center; width: 34px; height: 34px; color: var(--accent); opacity: .5; }
.lane__art .glyph svg { width: 100%; height: 100%; }
.lane__n { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.lane__c { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fog-dim); margin-top: 5px; }
.lane__p { font-family: var(--font-mono); font-size: 14px; color: var(--bone); }
.lane__go {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  color: var(--fog-dim); background: color-mix(in oklab, var(--bone) 5%, transparent);
  transition: color var(--t) var(--ease), background var(--t) var(--ease), transform .5s var(--spring);
}
.lane__go svg { width: 17px; height: 17px; }
.lane__go:hover { color: var(--accent-ink); background: var(--accent-wash); transform: scale(1.08); }

.meter { display: grid; gap: 6px; }
.meter__t { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--fog-dim); font-family: var(--font-mono); }
.meter__t span:first-child { letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-ui); font-weight: 700; font-size: 9.5px; }
.meter__t span:last-child { white-space: nowrap; }
.meter__bar { height: 5px; border-radius: 99px; background: color-mix(in oklab, var(--bone) 6%, transparent); overflow: hidden; }
.meter__bar i {
  display: block; height: 100%; width: var(--w, 0%); border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform-origin: left; transform: scaleX(0);
  animation: growBar 1s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 40ms + .2s);
}

/* ── timeline ─────────────────────────────────────────────────────────── */
.timeline { position: relative; display: grid; gap: 10px; padding-left: 26px; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--bark-500) 8%, var(--bark-500) 92%, transparent);
}
.tl-head { position: relative; margin: 20px 0 4px; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fog); }
.tl-head:first-child { margin-top: 0; }
.tl-head::before {
  content: ''; position: absolute; left: -26px; top: 50%; translate: 0 -50%;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--void);
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 16px -2px var(--accent);
}
.tl {
  position: relative;
  display: grid; grid-template-columns: 54px minmax(0, 1.4fr) minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center; gap: 16px;
  padding: 13px 18px;
  border-radius: var(--r-m);
  background: color-mix(in oklab, var(--bark-800) 66%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  animation: cardIn .5s var(--ease-out) both; animation-delay: calc(var(--i) * 26ms);
  transition: transform .4s var(--ease-out), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.tl:hover { transform: translateX(5px); background: color-mix(in oklab, var(--bark-700) 80%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 26%, transparent); }
.tl::before {
  content: ''; position: absolute; left: -19px; top: 50%; translate: 0 -50%;
  width: 7px; height: 7px; border-radius: 50%; background: var(--bark-500);
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.tl:hover::before { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.tl__art { width: 54px; height: 48px; display: grid; place-items: center; }
.tl__art img { max-height: 46px; max-width: 100%; object-fit: contain; }
.tl__art span { font-family: var(--font-mono); font-size: 10px; color: var(--bark-500); }
.tl__n { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.tl__q { margin-top: 4px; font-size: 11.5px; color: var(--fog-dim); font-family: var(--font-mono); }
.shift { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 13px; flex-wrap: wrap; }
.shift__o { color: var(--fog-dim); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--down) 60%, transparent); }
.shift__a { width: 16px; height: 16px; color: var(--fog-dim); flex: none; }
.shift__n { color: var(--bone); font-weight: 500; }
.delta {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
}
.delta svg { width: 13px; height: 13px; }
.delta.up { background: color-mix(in oklab, var(--up) 15%, transparent); }
.delta.down { background: color-mix(in oklab, var(--down) 15%, transparent); }
.delta.flat { background: color-mix(in oklab, var(--bone) 6%, transparent); }

/* ── ledger (archive) ─────────────────────────────────────────────────── */
.ledger { display: grid; gap: 8px; }
.led-head {
  margin: 22px 0 6px; font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fog-dim);
  display: flex; align-items: center; gap: 12px;
}
.led-head:first-child { margin-top: 0; }
.led-head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.led {
  display: grid; grid-template-columns: 46px minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  align-items: center; gap: 14px;
  padding: 11px 16px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--bark-800) 56%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  content-visibility: auto; contain-intrinsic-size: auto 66px;
  transition: transform .35s var(--ease-out), background var(--t) var(--ease);
}
.led:hover { transform: translateX(4px); background: color-mix(in oklab, var(--bark-700) 76%, transparent); }
.led__art { width: 46px; height: 42px; display: grid; place-items: center; }
.led__art img { max-height: 40px; max-width: 100%; object-fit: contain; }
.led__n { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.led__c { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fog-dim); margin-top: 3px; }
.led__v { font-family: var(--font-mono); font-size: 12.5px; }
.led__v span { display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fog-dim); font-family: var(--font-ui); font-weight: 700; margin-bottom: 3px; }
.led__v.old { color: var(--fog-dim); }

/* ── empty state ──────────────────────────────────────────────────────── */
.empty { display: grid; place-items: center; gap: 14px; padding: 80px 0; text-align: center; color: var(--fog-dim); }
.empty svg { width: 40px; height: 40px; opacity: .5; animation: bob 3s var(--ease) infinite alternate; }
@keyframes bob { to { transform: translateY(-8px) } }

/* ── about ────────────────────────────────────────────────────────────── */
.about { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.slab {
  padding: 26px 24px;
  border-radius: var(--r-l);
  background: linear-gradient(168deg, color-mix(in oklab, var(--bark-700) 84%, transparent), color-mix(in oklab, var(--bark-900) 92%, transparent));
  box-shadow: var(--shadow-card);
}
.slab h3 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--fog-dim); font-weight: 700; font-family: var(--font-ui); }
.slab ul { margin-top: 16px; display: grid; gap: 9px; }
.slab li { display: flex; align-items: center; gap: 11px; font-size: 15px; }
.avatar {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 14px; font-weight: 700; color: #0a0f0c;
  background: linear-gradient(140deg, oklch(80% .15 var(--h)), oklch(70% .16 calc(var(--h) + 50)));
}
.slab p { margin-top: 14px; color: var(--fog); font-size: 14.5px; line-height: 1.66; }
.linkrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* ── detail sheet ─────────────────────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in oklab, var(--void) 72%, transparent);
  backdrop-filter: blur(9px);
  opacity: 0; transition: opacity .42s var(--ease);
}
.scrim.is-live { opacity: 1; }

.sheet {
  position: fixed; z-index: 61; top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  display: flex; flex-direction: column;
  background: linear-gradient(200deg, #101a15, #080d0a 62%);
  box-shadow: -40px 0 90px -40px #000, inset 1px 0 0 var(--line);
  transform: translateX(100%);
  transition: transform .6s var(--ease-out);
  overflow: hidden;
}
.sheet.is-live { transform: none; }
.sheet::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 46% at 76% 0%, var(--accent-wash), transparent 66%);
}
.sheet__close {
  position: absolute; z-index: 3; top: 18px; right: 18px;
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; color: var(--fog);
  background: color-mix(in oklab, var(--bone) 6%, transparent);
  transition: color var(--t) var(--ease), background var(--t) var(--ease), transform .5s var(--spring);
}
.sheet__close svg { width: 15px; height: 15px; }
.sheet__close:hover { color: var(--bone); background: color-mix(in oklab, var(--bone) 12%, transparent); transform: rotate(90deg); }
.sheet__body { position: relative; z-index: 2; overflow-y: auto; padding: 30px clamp(20px, 4vw, 36px) 44px; }

.sheet__cat { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.sheet__title { font-size: clamp(26px, 4vw, 36px); font-weight: 700; letter-spacing: -.035em; margin: 10px 0 6px; }
.sheet__meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--fog-dim); font-size: 12.5px; font-family: var(--font-mono); }

.vlist { display: grid; gap: 12px; margin-top: 26px; }
.vcard {
  display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: center;
  padding: 16px;
  border-radius: var(--r-l);
  background: color-mix(in oklab, var(--bark-800) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  animation: slideIn .55s var(--ease-out) both; animation-delay: calc(var(--i) * 80ms + .12s);
}
@keyframes slideIn { from { opacity: 0; transform: translateX(26px) } to { opacity: 1; transform: none } }
.vcard__art { position: relative; height: 96px; display: grid; place-items: center; }
.vcard__art img { max-height: 92px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 12px 18px #000b); }
.vcard__art::before {
  content: ''; position: absolute; width: 90px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-wash), transparent 68%);
}
.vcard__kind { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.vcard__n { font-size: 15px; font-weight: 600; margin: 5px 0 12px; line-height: 1.3; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px; }
.kv > div span { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fog-dim); margin-bottom: 4px; }
.kv > div b { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }

.sheet h4 { margin: 30px 0 12px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--fog-dim); font-family: var(--font-ui); font-weight: 700; }
.compare { display: grid; gap: 9px; }
.crow { display: grid; grid-template-columns: 88px 1fr 64px; align-items: center; gap: 12px; font-size: 12.5px; }
.crow__k { color: var(--fog-dim); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.crow__bar { height: 8px; border-radius: 99px; background: color-mix(in oklab, var(--bone) 5%, transparent); overflow: hidden; }
.crow__bar i {
  display: block; height: 100%; width: var(--w); border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform-origin: left; transform: scaleX(0);
  animation: growBar .9s var(--ease-out) forwards; animation-delay: calc(var(--i) * 90ms + .3s);
}
.crow__v { font-family: var(--font-mono); text-align: right; color: var(--fog); }

/* ── tooltip ──────────────────────────────────────────────────────────── */
.tip {
  position: fixed; z-index: 80; pointer-events: none;
  padding: 6px 11px; border-radius: 9px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: color-mix(in oklab, var(--bark-600) 96%, transparent);
  box-shadow: 0 12px 30px -14px #000e, inset 0 0 0 1px var(--line);
  opacity: 0; transform: translate(-50%, -4px) scale(.94);
  transition: opacity .2s var(--ease), transform .34s var(--spring);
}
.tip.is-live { opacity: 1; transform: translate(-50%, -8px) scale(1); }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lane { grid-template-columns: 52px 1fr auto; gap: 14px; }
  .lane .meter { display: none; }
  .lane__p { grid-column: 2 / 3; }
  .tl { grid-template-columns: 46px 1fr; }
  .tl > .shift { grid-column: 1 / -1; }
  .tl > .delta { position: absolute; top: 13px; right: 16px; }
  .led { grid-template-columns: 42px 1fr 1fr; gap: 10px; }
  .led .hide-sm { display: none; }
}
@media (max-width: 560px) {
  .toolbar { gap: 8px; }
  .field { max-width: none; }
  .seg button { padding: 0 11px; font-size: 12.5px; }
  .vcard { grid-template-columns: 1fr; }
  .vcard__art { height: 120px; }
}