/* =============================================================================
 * stintbox.dk — apex hub ("split-doors") landing.
 *
 * Standalone page, NOT part of the results-app chrome. Two full-bleed doors,
 * side-by-side on desktop, stacked on mobile. Each door wears its product's
 * OWN skin so the two brands read instantly:
 *   - left  = light timing flade   → results.stintbox.dk  (newspaper/timing)
 *   - right = dark telemetry flade  → stintbox.app         (video overlay)
 *
 * The doors are deliberately fixed light / dark (they represent the two
 * products) — they do NOT follow prefers-color-scheme. No top bar: the two
 * full-height doors are the entire page.
 *
 * Aesthetic per CLAUDE.md "no AI-design tropes": hard edges, hairline rules,
 * tabular numerals, density over comfort. NO rounded cards, NO drop-shadows on
 * content, NO rounded-card + left-accent combo. Period (.) in lap times.
 * ===========================================================================*/

:root {
  --ink: #0e1116;          /* near-black text / dark canvas */
  --paper: #FAFAF7;        /* off-white — pure white burns in sun */
  --paper-hi: #ffffff;
  --navy: #0a4d8c;         /* results accent */
  --line-light: #d8d8d2;   /* hairline on paper */
  --muted-light: #4a525a;
  --faint-light: #6b727a;

  --app-bg: #0e1116;
  --app-hi: #12171e;
  --app-surface: #161b22;
  --app-ink: #e6edf3;
  --app-muted: #9aa4af;
  --app-line: #2a3340;
  --app-accent: #38e1ff;   /* electric cyan — stintbox.app DNA */

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body.hub {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--app-ink);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -----------------------------------------------------------------------------
 * Doors — the two big "buttons". Each whole panel is the link.
 * ---------------------------------------------------------------------------*/
.hub-doors {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}
.door {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  padding: clamp(28px, 5vw, 76px);
  min-width: 0;
  min-height: 0;
  transition: background-color .18s ease;
}
.door-results { background: var(--paper); color: var(--ink); }
.door-app     { background: var(--app-bg); color: var(--app-ink); border-left: 1px solid var(--app-line); }

.door-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  max-width: 31rem;
  margin: 0 auto;
}

.door-kicker {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.door-results .door-kicker { color: var(--navy); }
.door-app     .door-kicker { color: var(--app-accent); }

.door-title {
  margin: 0 0 16px;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.door-sub {
  margin: 0;
  font-size: clamp(.95rem, 1.35vw, 1.12rem);
  line-height: 1.5;
  max-width: 32ch;
}
.door-results .door-sub { color: var(--muted-light); }
.door-app     .door-sub { color: var(--app-muted); }

/* ---- graphics (decorative, aria-hidden) ---- */
.door-graphic { margin: clamp(24px, 4.5vh, 44px) 0 0; }

/* results: an authentic mini timing board */
.graphic-table {
  width: 100%;
  max-width: 23rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.graphic-table th {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint-light);
  font-weight: 700;
  text-align: left;
  padding: 0 10px 7px;
  border-bottom: 1px solid var(--ink);
}
.graphic-table td {
  font-size: 13.5px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-light);
  color: var(--ink);
  white-space: nowrap;
}
.graphic-table tr:last-child td { border-bottom: 0; }
.graphic-table .c-pos  { color: var(--faint-light); width: 1%; }
.graphic-table .c-nr   { font-family: var(--mono); color: var(--faint-light); width: 1%; }
.graphic-table .c-time { text-align: right; font-family: var(--mono); }
/* "me" row — echoes pick-yourself + class-color stripe on the cell, not the tr */
.graphic-table tr.is-me td {
  background: rgba(10, 77, 140, .09);
  font-weight: 700;
}
.graphic-table tr.is-me td:first-child {
  box-shadow: inset 3px 0 0 var(--navy);
}
.graphic-table tr.is-me .c-tag {
  color: var(--navy);
  font-size: 9px;
  letter-spacing: .08em;
  font-weight: 800;
}

/* app: a telemetry HUD overlay */
.graphic-hud {
  max-width: 23rem;
  border: 1px solid var(--app-line);
  background:
    linear-gradient(180deg, rgba(56, 225, 255, .05), rgba(56, 225, 255, 0)),
    var(--app-surface);
  padding: 14px 16px 15px;
}
.hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--app-muted);
}
.hud-rec { display: inline-flex; align-items: center; gap: 6px; color: var(--app-accent); }
.hud-rec i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--app-accent);
  box-shadow: 0 0 0 3px rgba(56, 225, 255, .18);
}
.hud-readout {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 12px 0 4px;
  font-family: var(--mono);
}
.hud-value { font-size: 42px; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1; }
.hud-unit  { font-size: 13px; color: var(--app-accent); letter-spacing: .12em; }
.hud-bar {
  position: relative;
  height: 8px;
  margin: 12px 0 14px;
  background: #0c1116;
  border: 1px solid var(--app-line);
  overflow: hidden;
}
.hud-bar > i { position: absolute; inset: 0 38% 0 0; background: var(--app-accent); display: block; }
.hud-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--app-muted);
}
.hud-metrics b { color: var(--app-ink); font-weight: 700; }
.hud-metrics small { font-size: .82em; color: var(--app-muted); font-weight: 600; }

/* ---- call to action ---- */
.door-foot { padding-top: clamp(24px, 4.5vh, 44px); }
.door-cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  font-weight: 700;
}
.door-results .door-cta { color: var(--navy); }
.door-app     .door-cta { color: var(--app-accent); }
.door-arrow { width: 1.05em; height: 1.05em; flex: 0 0 auto; transition: transform .18s ease; }
.door-url {
  display: block;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .03em;
}
.door-results .door-url { color: var(--faint-light); }
.door-app     .door-url { color: var(--app-muted); }

/* ---- interaction ---- */
@media (hover: hover) {
  .door-results:hover { background: var(--paper-hi); }
  .door-app:hover     { background: var(--app-hi); }
  .door:hover .door-arrow { transform: translateX(6px); }
  .door:hover .door-cta-label {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
}
.door:focus-visible { outline-offset: -7px; }
.door-results:focus-visible { outline: 3px solid var(--navy); }
.door-app:focus-visible     { outline: 3px solid var(--app-accent); }

/* -----------------------------------------------------------------------------
 * Mobile — stack the doors, split the viewport height between them.
 * ---------------------------------------------------------------------------*/
@media (max-width: 760px) {
  .hub-doors {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(min-content, 1fr);
  }
  .door { padding: 34px 22px 38px; }
  .door-app { border-left: 0; border-top: 1px solid var(--app-line); }
  .door-inner { max-width: none; }
  .door-title { font-size: clamp(1.95rem, 9vw, 2.7rem); }
  .door-sub { max-width: 40ch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}