/* At a glance (js/sections/glance.js): the glass edge tab on the opening banner, the scrim and the slide-in panel,
   then the ledger inside it (mockup C, mockups/glance/c-ledger.css, without the target/status styling). */

/* ---------- Page while the panel is open: no page scroll (the gutter stays, so nothing shifts); the banner recedes ---------- */
html.glance-open { overflow: hidden; scrollbar-gutter: stable; }
/* Transform only: a filter here (and a blurred scrim) halved the frame rate of the open / close animation. */
.section--hero .hero { transform-origin: 30% 50%; transition: transform 700ms cubic-bezier(.16, 1, .3, 1); }
.glance-open .section--hero .hero { transform: translateX(-2.5vw) scale(.985); }

/* ---------- Edge tab: soft glass hugging the banner's right edge; the label slides out on hover / focus ---------- */
.glance-trigger {
  position: absolute; z-index: 4; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 0; height: 76px; padding: 0 13px 0 15px;
  border: 0; border-radius: 24px 0 0 24px;
  background: rgb(255 255 255 / .38);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 1px 0 0 rgb(255 255 255 / .7), inset 0 0 0 1px rgb(255 255 255 / .35), 0 14px 34px -20px rgb(13 15 28 / .5);
  color: var(--ink-2); font: inherit; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 240ms, padding 420ms cubic-bezier(.16, 1, .3, 1), gap 420ms cubic-bezier(.16, 1, .3, 1);
}
.glance-trigger__label {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  font-size: 14px; font-weight: 650; letter-spacing: -.01em;
  transition: max-width 460ms cubic-bezier(.16, 1, .3, 1), opacity 260ms;
}
.glance-trigger__chevron {
  width: 12px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; transition: transform 320ms cubic-bezier(.16, 1, .3, 1);
}
.glance-trigger:hover, .glance-trigger:focus-visible { background: rgb(255 255 255 / .7); gap: 10px; padding-left: 20px; }
.glance-trigger:hover .glance-trigger__label, .glance-trigger:focus-visible .glance-trigger__label { max-width: 120px; opacity: 1; }
.glance-trigger:hover .glance-trigger__chevron { transform: translateX(-2px); }
.glance-trigger:active .glance-trigger__chevron { transform: translateX(-5px); }
.glance-trigger:focus-visible { outline-offset: -4px; }

/* ---------- Scrim + panel (above the dock) ---------- */
.glance-scrim {
  position: fixed; inset: 0; z-index: 60; background: rgb(13 15 28 / .26);
  opacity: 0; pointer-events: none; transition: opacity 560ms cubic-bezier(.2, .8, .2, 1);
}
.glance-open .glance-scrim { opacity: 1; pointer-events: auto; }
.glance {
  --glance-bg: #f5f5f7; --glance-ink: var(--ink); --glance-ink-2: var(--ink-2); --glance-line: rgb(13 15 28 / .1);
  --drag: 0px;
  position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: min(1280px, 94vw);
  overflow: hidden; border-radius: 30px 0 0 30px;
  background: var(--glance-bg); color: var(--glance-ink);
  box-shadow: -40px 0 90px -50px rgb(13 15 28 / .55), -1px 0 0 rgb(255 255 255 / .4);
  transform: translateX(calc(100% + 48px)); visibility: hidden;
  transition: transform 560ms cubic-bezier(.4, 0, .2, 1), visibility 0s 560ms;
  touch-action: pan-y;
}
.glance[data-state="open"] {
  transform: translateX(var(--drag)); visibility: visible;
  transition: transform 720ms cubic-bezier(.16, 1, .3, 1), visibility 0s;
}
.glance.is-dragging { transition: none; }
.glance__body {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(40px, 6vh, 72px) clamp(28px, 4vw, 64px) clamp(56px, 8vh, 96px);
}
.glance__close {
  position: absolute; z-index: 3; top: 20px; right: 22px;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in oklab, var(--glance-ink) 8%, transparent); color: var(--glance-ink); cursor: pointer;
  transition: background-color 200ms, transform var(--dur-press) var(--ease-out);
}
.glance__close:hover { background: color-mix(in oklab, var(--glance-ink) 14%, transparent); }
.glance__close:active { transform: scale(.92); }
.glance__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ---------- Ledger ---------- */
.ledger { color: var(--glance-ink); --ledger-columns: minmax(0, 1.54fr) minmax(0, 1fr) minmax(0, 1fr); }
.ledger__header {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px; align-items: center;
  min-height: 132px; padding-right: 16px; margin-bottom: 20px;
}
.ledger__eyebrow { margin: 0 0 14px; color: var(--glance-ink-2); font-size: 11px; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; }
.ledger__intro h1 { margin: 0; font-size: clamp(45px, 4.65vw, 67px); line-height: .96; font-weight: 760; letter-spacing: -.065em; white-space: nowrap; }
.ledger__vehicles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ledger__vehicle { margin: 0; min-width: 0; }
.ledger__vehicle figcaption { display: flex; align-items: baseline; gap: 9px; padding-left: 12px; }
.ledger__vehicle .vname { font-size: 32px; line-height: 1; letter-spacing: -.055em; }
.ledger__class { font-size: 10px; color: var(--glance-ink-2); white-space: nowrap; }
.ledger__vehicle svg { width: 100%; height: 102px; margin-top: 7px; overflow: visible; }
.ledger__spread { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; }
.ledger__column { min-width: 0; }
.ledger__column + .ledger__column { position: relative; }
.ledger__column + .ledger__column::before { content: ''; position: absolute; top: 0; bottom: 0; left: -22px; width: 1px; background: var(--glance-line); }
.ledger__column-head {
  display: grid; grid-template-columns: var(--ledger-columns); gap: 14px; align-items: center;
  height: 23px; border-bottom: 1px solid var(--glance-ink); font-size: 10px; font-weight: 600; letter-spacing: .04em;
}
.ledger__column-head > :first-child { color: var(--glance-ink-2); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.ledger__column-head > :not(:first-child) { padding-left: 2px; }
.ledger__group { margin-top: 10px; }
.ledger__group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 24px; padding-top: 1px; }
.ledger__group-head h2 { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 750; letter-spacing: -.02em; }
.ledger__scope { color: var(--glance-ink-2); font-size: 9px; font-weight: 550; line-height: 1.4; white-space: nowrap; }
.ledger__row {
  display: grid; grid-template-columns: var(--ledger-columns); align-items: center; gap: 14px;
  min-height: 40px; border-bottom: 1px solid var(--glance-line); padding: 5px 0 6px;
}
.ledger__label { font-size: 12px; font-weight: 570; line-height: 1.2; letter-spacing: -.02em; }
.ledger__inline-note { color: var(--glance-ink-2); font-size: 10px; font-weight: 470; white-space: nowrap; }
.ledger__detail { display: block; margin-top: 3px; color: var(--glance-ink-2); font-size: 9px; font-weight: 450; letter-spacing: -.01em; }
.ledger__difference { display: block; margin-top: 3px; color: var(--c-ink); font-size: 9px; font-weight: 600; letter-spacing: -.01em; }
.ledger__cell { min-width: 0; padding-left: 2px; }
.ledger__value { display: flex; align-items: baseline; gap: 4px; color: var(--c-ink); white-space: nowrap; line-height: 1.05; }
.ledger__number { font-size: 20px; font-weight: 630; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.ledger__unit { font-size: 9px; font-weight: 500; letter-spacing: -.01em; }
.ledger__track { display: block; height: 3px; margin-top: 5px; width: 100%; background: color-mix(in oklab, var(--c) 10%, transparent); border-radius: 9px; overflow: hidden; }
.ledger__bar { display: block; width: calc(var(--length) * 100%); height: 100%; border-radius: inherit; background: var(--c); transform-origin: left; }
.ledger__row--drive .ledger__value { gap: 3px; }
.ledger__row--drive .ledger__number { font-size: 16px; }
.ledger__axis { display: block; position: relative; height: 0; margin: 9px 4px 4px; }
.ledger__axis::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: color-mix(in oklab, var(--c) 12%, transparent); }
.ledger__span { position: absolute; top: -1px; left: calc(var(--start) * 100%); width: calc(var(--length) * 100%); height: 2px; background: var(--c); transform-origin: left; }
.ledger__point { position: absolute; top: -4px; left: calc(var(--at) * 100%); width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--c); }
.ledger__row--height .ledger__number { font-size: 16px; letter-spacing: -.045em; }
.ledger__row--height .ledger__value { gap: 3px; }
.ledger__or { font-size: 13px; font-weight: 450; }
.ledger__max { font-size: 8px; font-weight: 550; letter-spacing: .01em; }
.ledger__port { font-size: 13px; font-weight: 650; color: var(--c-ink); letter-spacing: -.015em; }
.ledger__feature { display: flex; align-items: center; gap: 5px; color: var(--c-ink); font-size: 11px; line-height: 1.2; letter-spacing: -.025em; font-weight: 600; white-space: nowrap; }
.ledger__feature[data-status="unavailable"], .ledger__feature[data-status="unconfirmed"] { color: var(--glance-ink-2); font-weight: 450; }
.ledger__mark { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--c-soft); font-size: 10px; font-weight: 750; flex: none; }
.ledger__feature[data-status="unavailable"] .ledger__mark, .ledger__feature[data-status="unconfirmed"] .ledger__mark { background: color-mix(in oklab, var(--glance-ink) 6%, transparent); }
.ledger__row--feature .ledger__label { font-size: 11px; }

/* Entrance, replayed on each opening. */
.ledger.is-entering .ledger__row { opacity: 0; transform: translateY(8px); }
.ledger.is-entering .ledger__bar, .ledger.is-entering .ledger__span { transform: scaleX(0); }
.ledger.is-entering .ledger__point { transform: scale(0); }
.ledger.is-entering.is-revealed .ledger__row {
  opacity: 1; transform: none;
  transition: opacity 380ms var(--ease-out), transform 640ms var(--ease-spring);
  transition-delay: calc(var(--order) * 22ms);
}
.ledger.is-entering.is-revealed .ledger__bar, .ledger.is-entering.is-revealed .ledger__span {
  transform: scaleX(1);
  transition: transform 850ms var(--ease-spring);
  transition-delay: calc(var(--order) * 22ms + 90ms);
}
.ledger.is-entering.is-revealed .ledger__point {
  transform: scale(1);
  transition: transform 500ms var(--ease-out);
  transition-delay: calc(var(--order) * 22ms + 180ms);
}

@media (max-width: 1200px) {
  .ledger__header { grid-template-columns: .8fr 1.2fr; gap: 18px; min-height: 120px; }
  .ledger__spread { gap: 30px; }
  .ledger__column + .ledger__column::before { left: -16px; }
  .ledger__vehicles { gap: 10px; }
  .ledger__vehicle figcaption { display: block; }
  .ledger__class { display: block; margin-top: 4px; font-size: 9px; }
  .ledger__vehicle .vname { font-size: 28px; }
  .ledger__row, .ledger__column-head { gap: 9px; }
  .ledger__scope { font-size: 8px; }
  .ledger__number { font-size: 19px; }
  .ledger__row--drive .ledger__number { font-size: 15px; }
  .ledger__row--height .ledger__number { font-size: 14px; }
  .ledger__label { font-size: 11px; }
  .ledger__inline-note { font-size: 9px; }
  .ledger__feature { font-size: 10px; gap: 3px; }
}
@media (max-width: 1050px) {
  .ledger { --ledger-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); }
  .ledger__intro h1 { font-size: 43px; }
  .ledger__spread { gap: 26px; }
  .ledger__column + .ledger__column::before { left: -14px; }
  .ledger__row { min-height: 42px; }
  .ledger__number { font-size: 18px; }
  .ledger__row--drive .ledger__number { font-size: 14px; }
  .ledger__unit { font-size: 8px; }
  .ledger__row--height .ledger__number { font-size: 12px; }
  .ledger__row--height .ledger__value { gap: 2px; }
  .ledger__feature { font-size: 9px; }
  .ledger__mark { width: 14px; height: 14px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .section--hero .hero, .glance, .glance[data-state="open"], .glance-scrim, .glance-trigger, .glance-trigger__label { transition: none; }
  .glance-open .section--hero .hero { transform: none; }
  .ledger.is-entering .ledger__row, .ledger.is-entering .ledger__bar,
  .ledger.is-entering .ledger__span, .ledger.is-entering .ledger__point { opacity: 1; transform: none; transition: none; }
}