/* Tracker ODL v2 layer (ledger row 119, rollout #4).
   Scope: the signed-out gate ONLY. Everything here is under `.odl2`, and `.odl2` is applied to the
   gate's own root element in Auth.tsx, never to <body>, so the signed-in app is pixel-untouched.

   Per ARRIVAL.md: the gate takes the QUIET arrival for the credential card, and the FULL arrival for
   the product artefact shown beside it — "you are asked to sign in next to a working picture of the
   thing you are signing in to." Tracker's artefact is a net-worth line that DRAWS, with platform
   rows settling under it. The figures are sample data and are labelled as such on the surface. */

/* ── Shell ─────────────────────────────────────────────────────────────────── */
.odl2.o2-gate--split {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  background: var(--od-obsidian, #08070A);
}

@media (min-width: 1024px) {
  .odl2.o2-gate--split {
    /* Review fix 1: fixed track widths + justify-content centre, so the gutter is a decided
       150px instead of whatever is left over (it was reading as ~265px of dead centre), and the
       left and right page margins are symmetric. align-items:start puts both columns on ONE top
       line so the two eyebrows share a baseline; align-content centres the pair in the viewport. */
    grid-template-columns: minmax(0, 620px) minmax(0, 440px);
    justify-content: center;
    align-items: start;
    align-content: center;
    column-gap: 150px;
    padding-inline: 48px;
  }
  /* Both columns start at the same y: the credential column drops its mobile top padding. */
  .odl2.o2-gate--split .o2-gate__col { padding-top: 0; padding-bottom: 0; }
  /* The artefact follows the credential column in the DOM so the gate's own h1 is the first
     heading and the LCP element (review: the marketing h2 was beating it). `order` puts it back
     on the left visually without changing reading or heading order. */
  .odl2 .o2-artefact { order: -1; }
}

/* The credential column keeps its live width and spacing at every size. */
.odl2 .o2-gate__col {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .odl2 .o2-gate__col { margin-inline: 0; }
}

/* ── The artefact (left column on desktop, a band under the card on phone) ──── */
.odl2 .o2-artefact {
  /* Hidden below 1024px: on a phone the gate is the whole job and a second column would push the
     form under the fold. The compact band (.o2-artefact--band) carries the idea instead. */
  display: none;
}

@media (min-width: 1024px) {
  .odl2 .o2-artefact { display: block; max-width: 560px; }
}

.odl2 .o2-artefact__eyebrow {
  font-family: var(--o2-font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--od-gold, #F1B43E);
}

.odl2 .o2-artefact__title {
  font-family: var(--o2-font-display, Fraunces, Georgia, serif);
  font-size: clamp(2rem, 1.2rem + 1.8vw, 2.9rem);
  line-height: 1.04;
  /* Review fix: -.03em still read as default at this size. Foundable's crispness is largely
     negative tracking on the display face. */
  letter-spacing: -.035em;
  margin: 14px 0 0;
  color: var(--od-cream, #F4E9D7);
}

.odl2 .o2-artefact__lede {
  /* Review fix: was ~15px over a 345px measure and read as a footnote under a poster. */
  margin: 16px 0 0;
  max-width: 52ch;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--od-cream-dim, #C6BCA9);
}

/* ── The product stage: a real Tracker panel ───────────────────────────────── */
.odl2 .o2-stage--tracker {
  margin-top: 30px;
  padding: 20px 22px 18px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 42%),
    #0D0B10;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(241,180,62,.14),
    0 1px 2px rgba(0,0,0,.6),
    0 18px 44px -18px rgba(0,0,0,.9),
    0 0 42px -22px rgba(241,180,62,.10);
}

.odl2 .o2-stage__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.odl2 .o2-stage__label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8B8397;
}

/* Sample data must be readable as sample data. This is a finance surface: the label is a
   compliance requirement, not decoration, and it is never animated away. */
.odl2 .o2-stage__sample {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #A9A1B4;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.odl2 .o2-stage__figure {
  font-family: var(--o2-font-mono, ui-monospace, monospace);
  font-size: 1.95rem;
  letter-spacing: -.02em;
  color: var(--od-cream, #F4E9D7);
  margin: 10px 0 2px;
}

.odl2 .o2-stage__delta { font-size: 13px; color: var(--od-cream-dim, #C6BCA9); }

.odl2 .o2-stage__chart { display: block; width: 100%; height: 108px; margin-top: 12px; }

/* The DRAW. The shared verb for Tracker / Lab connectors / FinSim / Data Board (ARRIVAL.md §4).
   stroke-dasharray is set to the path length in the markup so this stays pure CSS. */
@keyframes o2-draw { from { stroke-dashoffset: var(--o2-len); } to { stroke-dashoffset: 0; } }

.odl2 .o2-stage__line {
  fill: none;
  stroke: var(--od-gold, #F1B43E);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--o2-len);
  animation: o2-draw 1200ms var(--o2-out, cubic-bezier(.16,1,.3,1)) 520ms both;
}

.odl2 .o2-stage__fill {
  fill: url(#o2-trk-fill);
  opacity: 0;
  animation: o2-dawn 700ms linear 1100ms both;
}

.odl2 .o2-stage__rows {
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.odl2 .o2-stage__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  animation: o2-rise 600ms var(--o2-out, cubic-bezier(.16,1,.3,1)) both;
}

.odl2 .o2-stage__row:last-child { border-bottom: 0; }
.odl2 .o2-stage__row:nth-child(1) { animation-delay: 900ms; }
.odl2 .o2-stage__row:nth-child(2) { animation-delay: 990ms; }
.odl2 .o2-stage__row:nth-child(3) { animation-delay: 1080ms; }

.odl2 .o2-stage__row span:first-child { color: var(--od-cream-dim, #C6BCA9); }
.odl2 .o2-stage__row span:last-child {
  font-family: var(--o2-font-mono, ui-monospace, monospace);
  color: var(--od-cream, #F4E9D7);
}

/* ── Phone band: the same idea, one line high, under the credential card ───── */
.odl2 .o2-artefact--band {
  order: -1;
  margin: 0 auto 4px;
  max-width: 440px;
  padding: 14px 16px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 50%), #0D0B10;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(241,180,62,.12), 0 12px 30px -16px rgba(0,0,0,.9);
}

@media (min-width: 1024px) { .odl2 .o2-artefact--band { display: none; } }

.odl2 .o2-artefact--band .o2-stage__chart { height: 44px; }
.odl2 .o2-artefact--band .o2-stage__figure { font-size: 1.4rem; }

/* On phone the shell is one column and the band is ordered ABOVE the credential block (review:
   below the form it sat after ~170 px of void, cropped, and sold nothing). The block's own top
   padding comes down from the live 64 px so band and form read as one unit, and the shell gets
   real top padding so the band is not flush against y=0. */
@media (max-width: 1023px) {
  .odl2.o2-gate--split { padding-block: 26px 32px; align-content: start; }
  .odl2.o2-gate--split .o2-gate__col { padding-top: 26px; padding-bottom: 24px; }
}

/* ── 44 px coarse-pointer targets ──────────────────────────────────────────── */
/* The audit measured 6 of 6 controls under 44 px on this gate. These are the gate's own controls;
   the rule is applied by size, not by restyling, so nothing shifts on a mouse pointer. */
@media (pointer: coarse) {
  .odl2 .o2-gate__col input,
  .odl2 .o2-gate__col button,
  .odl2 .o2-gate__col a[data-testid="link-continue-obsidian-account"] { min-height: 44px; }

  /* Inline links grow their hit area, not their visual box (SYSTEM.md §7).
     Button-shaped links already carry min-height 44px and are excluded: the
     negative margin pulled the community card's button up over its copy at
     390px (n022 2026-10-11, measured gap -10px). */
  .odl2 .o2-gate__col a:not([data-testid="link-continue-obsidian-account"]):not([data-testid="link-join-community"]) {
    display: inline-block;
    padding-block: 11px;
    margin-block: -11px;
  }
}

/* Reduced motion: the artefact is already finished. Nobody loses content. */
@media (prefers-reduced-motion: reduce) {
  .odl2 .o2-stage__line,
  .odl2 .o2-stage__fill,
  .odl2 .o2-stage__row { animation: o2-dawn 200ms linear both; stroke-dashoffset: 0; }
}

/* -- Brand mark: NOT ADDED, deliberately --------------------------------------
   The review asked for the hub's diamond mark here for family resemblance. Tracker ships no flat
   mark asset -- brand-mark.png and icon-192.png are both photographic 3D renders with their own
   backgrounds, which at 30px read as a dark smudge and also pushed the two columns' eyebrows off
   the shared baseline. Needs a real monoline mark from the brand set before it can go in. */