/* System Lab ODL v2 layer (ledger row 119, rollout #5).
   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." System Lab's artefact is a real money-system DIAGRAM: the nodes settle, then the
   connectors DRAW between them in sequence. The product is a system builder, so the arrival
   builds a system. Shapes only, no figures, so there is no money to mislabel. */

/* ── 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);
}

/* ── 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). */
  .odl2 .o2-gate__col a:not([data-testid="link-continue-obsidian-account"]) {
    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. */

/* ── The product stage: a real money-system diagram ────────────────────────── */
/* ARRIVAL.md §4: nodes SETTLE, then connectors DRAW between them in sequence. "Draw" is the same
   shared verb Tracker uses for its net-worth line; reusing it on purpose is what makes the suite
   read as designed rather than decorated. */
.odl2 .o2-stage--lab {
  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;
}
/* "Example system", not "sample data": this diagram shows STRUCTURE, not anyone's figures, so the
   finance-copy risk is different from Tracker's. The label still says plainly that it is an
   example rather than the visitor's own system. */
.odl2 .o2-stage__tag {
  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-sysmap { display: block; width: 100%; height: 190px; margin-top: 14px; }

/* nodes settle in, 90 ms apart */
.odl2 .o2-sysmap__node {
  animation: o2-rise 620ms var(--o2-out, cubic-bezier(.16,1,.3,1)) both;
  transform-box: fill-box; transform-origin: 50% 50%;
}
.odl2 .o2-sysmap__node:nth-of-type(1) { animation-delay: 480ms; }
.odl2 .o2-sysmap__node:nth-of-type(2) { animation-delay: 570ms; }
.odl2 .o2-sysmap__node:nth-of-type(3) { animation-delay: 660ms; }
.odl2 .o2-sysmap__node:nth-of-type(4) { animation-delay: 750ms; }
.odl2 .o2-sysmap__node:nth-of-type(5) { animation-delay: 840ms; }

/* then the connectors draw, in flow order */
@keyframes o2-draw { from { stroke-dashoffset: var(--o2-len); } to { stroke-dashoffset: 0; } }
.odl2 .o2-sysmap__link {
  fill: none; stroke: var(--od-gold, #F1B43E); stroke-width: 1.5; stroke-linecap: round;
  opacity: .72;
  stroke-dasharray: var(--o2-len);
  animation: o2-draw 520ms var(--o2-out, cubic-bezier(.16,1,.3,1)) both;
}
.odl2 .o2-sysmap__link:nth-of-type(1) { animation-delay: 900ms; }
.odl2 .o2-sysmap__link:nth-of-type(2) { animation-delay: 1000ms; }
.odl2 .o2-sysmap__link:nth-of-type(3) { animation-delay: 1100ms; }
.odl2 .o2-sysmap__link:nth-of-type(4) { animation-delay: 1200ms; }

.odl2 .o2-sysmap__box { fill: #15121B; stroke: rgba(255,255,255,.14); stroke-width: 1; }
.odl2 .o2-sysmap__box--accent { stroke: rgba(241,180,62,.45); }
.odl2 .o2-sysmap__text {
  fill: var(--od-cream, #F4E9D7); font-size: 11px;
  font-family: var(--o2-font-body, "Hanken Grotesk", system-ui, sans-serif);
}
.odl2 .o2-sysmap__sub { fill: #8B8397; font-size: 9.5px;
  font-family: var(--o2-font-mono, ui-monospace, monospace); }

/* Phone band: the same diagram, shorter, under the credential block. */
/* The phone band's own card styling AND its desktop display:none. Both were lost when this layer
   was sliced out of tracker-v2.css: without the display:none the band became a third grid item at
   1440 and shoved the credential column onto a second row. The hygiene suite passed 21/21 on that
   broken layout -- composition is not something these assertions can see, only the frame is. */
.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-sysmap { height: 118px; }

@media (prefers-reduced-motion: reduce) {
  .odl2 .o2-sysmap__node,
  .odl2 .o2-sysmap__link { animation: o2-dawn 200ms linear both; stroke-dashoffset: 0; }
}