/* =============================================================================
 * os.css — THE PRODUCT'S OWN MATERIAL, CARRIED ONTO THE MARKETING SURFACE.
 *
 * Direction B, "The Operating System". The thesis is that the site IS the instrument
 * it sells, so this file is not a marketing stylesheet that resembles the product —
 * it is a port of the product's token layer and card vocabulary out of
 * apps/os/src/app/globals.css and apps/os/src/components/system.module.css.
 *
 * Every colour below is a value that already exists in globals.css. Nothing here is
 * a new colour, a new radius, or a new elevation. Where a name differs it is because
 * the marketing surface has no theme switcher and reads one ground at a time:
 *
 *   [data-ground="dark"]   the ink ground, #0d1019 — Michael's pick of 2026-08-24
 *   [data-ground="paper"]  the cream ground, #f7f4ee — the one inverted section
 *
 * The type scale IS new, and deliberately: the product's scale tops out at 42px
 * because a cockpit is a working screen. A marketing page has a different job and a
 * different reading distance. The FACES are the product's — Comfortaa for display,
 * Lato for text — because a marketing page in a different typeface is a different
 * product's marketing page.
 * ========================================================================== */

/* ---------- faces, self-hosted from apps/os/src/app/fonts ---------- */

@font-face {
  font-family: 'Comfortaa';
  src: url('fonts/comfortaa-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Comfortaa';
  src: url('fonts/comfortaa-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('fonts/lato-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('fonts/lato-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('fonts/lato-900-latin.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- the ground: dark ---------- */

:root,
[data-ground='dark'] {
  color-scheme: dark;

  --canvas: #0d1019;
  --surface: #171b2b;
  --sunken: #0c0f1a;
  --raised: #1c2133;
  --well: #2a3145;

  --ink: #eceef5;
  --muted: #939ab1;
  /* --d-anchor-muted. The one neutral bright enough to carry 11.5px caps on this ground. */
  --micro: #c3c9dc;
  /*
   * SECONDARY TEXT WITH NOTHING BETWEEN IT AND THE GROUND.
   *
   * `--muted` is the secondary ink INSIDE a card, where the card is between it and the
   * light. This is its open-ground half, and it exists for the reason globals.css gives
   * for `--ground-ink`: the aurora runs stronger here than in the cockpit, and #939ab1
   * measured 3.79:1 on the warm light's own hot spot — sampled off the rendered page,
   * not derived against the flat canvas.
   */
  --on-ground: #bcc2d3;

  --line: #242a3d;
  --line-2: #333a52;
  --edge: #727a92;

  --accent: #95adfa;
  --accent-hover: #abbeff;
  --accent-ink: #0f1220;
  --accent-soft: #222a49;

  --bright: #ec864c;
  --bright-hover: #ef9764;
  --bright-ink: #1e1006;
  --bright-soft: #301e0c;

  --ok: #4cbb80;
  --warn: #d09545;
  --danger: #e0705c;

  --contour: rgb(255 255 255 / 0.1);
  --elev-1: 0 1px 2px rgb(4 7 18 / 0.3), 0 16px 40px rgb(4 7 18 / 0.38);
  --elev-2: 0 2px 4px rgb(4 7 18 / 0.34), 0 18px 44px rgb(4 7 18 / 0.44);
  --elev-3: 0 2px 6px rgb(4 7 18 / 0.4), 0 24px 56px rgb(4 7 18 / 0.5);

  /*
   * CLEAR (Optical), not FROST. globals.css names three switchable card materials;
   * Michael's standing requirement for this deck is "clear glass, never frosted-opaque
   * panels", which is that third one: thin polished optical glass, light blur, high
   * saturation. The fill is held at 0.56 rather than the product's 0.62 so the aurora
   * behind it is visibly IN the card rather than merely near it — and the floors below
   * are what carry the reading text, which is how the contrast is paid for.
   */
  --frost: rgb(11 16 31 / 0.4);
  --frost-filter: blur(14px) saturate(200%) brightness(112%);
  --frost-gradient: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.16) 0%,
    rgb(var(--cool) / 0.08) 30%,
    rgb(var(--warm) / 0.08) 70%,
    transparent 100%
  );
  --frost-line: rgb(255 255 255 / 0.14);
  --frost-line-top: rgb(255 255 255 / 0.42);
  --frost-line-bottom: rgb(0 0 0 / 0.4);
  --frost-shadow:
    0 28px 64px -16px rgb(0 0 0 / 0.62),
    0 0 0 1px rgb(0 0 0 / 0.45),
    inset 0 1.5px 0 0 rgb(255 255 255 / 0.42),
    inset 0 0 0 1px rgb(255 255 255 / 0.07);

  /* the opaque floor rows sit on, inside a card — always opaque, in both grounds */
  --floor: rgb(6 10 20 / 0.72);
  --floor-line: rgb(255 255 255 / 0.12);
  --floor-line-top: rgb(255 255 255 / 0.22);

  --chrome-glass: rgb(11 14 25 / 0.72);
  --chrome-glass-line: rgb(255 255 255 / 0.12);
  --chrome-filter: blur(22px) saturate(1.7) brightness(1.04);

  --anchor: rgb(52 61 96 / 0.72);
  --anchor-solid: #343d60;
  --anchor-line: rgb(255 255 255 / 0.16);
  --anchor-floor: #2f3859;
  --anchor-ink: #f2f4fa;
  --anchor-muted: #c3c9dc;

  /*
   * The two aurora lights, as bare channels — CoreFusion's own navy and orange.
   *
   * STRONGER THAN THE PRODUCT'S, AND ON PURPOSE. globals.css caps the cockpit's
   * lights at the point where a mid-navy link sitting directly on the ambient layer
   * still clears 4.5:1. This surface has no links on open ground: every piece of
   * reading text here is on a card or on a floor, and the headings are near-white.
   * The cap that binds the cockpit does not bind a page with no link on the aurora —
   * so the lights run at the strength that makes a 0.4 pane visibly refract, which
   * is the whole point of clear glass over frosted-opaque.
   */
  --warm: 236 134 76;
  --cool: 149 173 250;
  --aurora-warm: 0.4;
  --aurora-cool: 0.44;
  --aurora-deep: 0.3;

  --radius: 12px;
  --radius-card: 20px;
  --radius-pill: 999px;
  --radius-floor: 14px;

  --space-0: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 26px;
  --space-7: 32px;

  --sans: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Comfortaa', 'Lato', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* the marketing type scale — see the header note for why it is not the product's */
  --t-mega: clamp(37px, 5vw, 70px);
  --t-h2: clamp(28px, 3.8vw, 48px);
  --t-h3: clamp(19px, 1.7vw, 25px);
  --t-lead: clamp(17px, 1.4vw, 21px);
  --t-body: clamp(15px, 1.05vw, 17px);
  --t-small: 13.5px;
  --t-micro: 11.5px;
}

/* ---------- the ground: paper (the one inverted section) ---------- */

[data-ground='paper'] {
  color-scheme: light;

  --canvas: #f7f4ee;
  --surface: #fffdf9;
  --sunken: #f1ede4;
  --raised: #fffdf9;
  --well: #ebe4d5;

  --ink: #262017;
  --muted: #6e6252;
  --micro: #524634;
  --on-ground: #524634;

  --line: #e4ded1;
  --line-2: #d2cabb;
  --edge: #857c6c;

  --accent: #345ac3;
  --accent-hover: #29499f;
  --accent-ink: #ffffff;
  --accent-soft: #edf1ff;

  --bright: #d86728;
  --bright-hover: #c95816;
  --bright-ink: #2a1608;
  --bright-soft: #f8eae1;

  --ok: #2f7d52;
  --warn: #915f18;
  --danger: #b8422f;

  --contour: rgb(58 48 26 / 0.12);
  --elev-1: 0 1px 2px rgb(58 48 26 / 0.05), 0 16px 40px rgb(58 48 26 / 0.08);
  --elev-2: 0 2px 4px rgb(58 48 26 / 0.07), 0 18px 44px rgb(58 48 26 / 0.1);
  --elev-3: 0 2px 6px rgb(44 36 20 / 0.15), 0 20px 44px rgb(44 36 20 / 0.17);

  --frost: rgb(255 253 249 / 0.6);
  --frost-filter: blur(16px) saturate(180%) brightness(104%);
  --frost-gradient: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.85) 0%,
    rgb(52 90 195 / 0.05) 30%,
    rgb(216 103 40 / 0.06) 70%,
    transparent 100%
  );
  --frost-line: rgb(255 255 255 / 0.9);
  --frost-line-top: #ffffff;
  --frost-line-bottom: rgb(58 48 26 / 0.1);
  --frost-shadow:
    0 20px 48px -12px rgb(58 48 26 / 0.14),
    0 0 0 1px rgb(58 48 26 / 0.06),
    inset 0 1.5px 0 0 #ffffff,
    inset 0 0 0 1px rgb(255 255 255 / 0.6);

  --floor: rgb(255 253 249 / 0.92);
  --floor-line: rgb(58 48 26 / 0.1);
  --floor-line-top: #ffffff;

  /*
   * The chrome's own material on this ground. It has to be restated: the top bar and
   * the rail take `data-ground` from the section passing under them (see
   * groundCrossing in site.js), and without these they kept the ink ground's near-black
   * glass while wearing the paper ground's near-black ink.
   */
  --chrome-glass: rgb(255 253 249 / 0.78);
  --chrome-glass-line: rgb(58 48 26 / 0.12);
  --chrome-filter: blur(22px) saturate(1.5) brightness(1.02);

  --anchor: rgb(21 26 45 / 0.92);
  --anchor-solid: #151a2d;
  --anchor-line: rgb(255 255 255 / 0.12);
  --anchor-floor: #232840;
  --anchor-ink: #f4f6fa;
  --anchor-muted: #b9c0d4;
}

/* =============================================================================
 * THE CARD VOCABULARY — ported from system.module.css.
 *
 * A card is glass. Rows inside it sit on an opaque floor, always. One card per
 * composition carries weight and it is the one that asks for work: the anchor.
 * The three meter shapes draw a proportion, a window, or a split — and each is
 * aria-hidden, because it is a picture of numbers the rows already state.
 * ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  color: var(--ink);
  border-radius: var(--radius-card);
  position: relative;
  -webkit-backdrop-filter: var(--frost-filter);
  backdrop-filter: var(--frost-filter);
  background-color: var(--frost);
  background-image: var(--frost-gradient);
  border: 1px solid var(--frost-line);
  border-top-color: var(--frost-line-top);
  border-bottom-color: var(--frost-line-bottom);
  box-shadow: var(--frost-shadow);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.card-anchor {
  --surface: var(--anchor-floor);
  --floor: var(--anchor-floor);
  --floor-line: rgb(255 255 255 / 0.12);
  --floor-line-top: rgb(255 255 255 / 0.2);
  --ink: var(--anchor-ink);
  --muted: var(--anchor-muted);
  --micro: var(--anchor-muted);
  --sunken: rgb(255 255 255 / 0.14);
  color: var(--anchor-ink);
  background-color: var(--anchor);
  background-image: none;
  border-color: var(--anchor-line);
  box-shadow: var(--elev-3);
}

.card-title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.figure {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.figure-value {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.figure-label {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* the opaque floor rows sit on */
.floor {
  background: var(--floor);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  color: var(--ink);
  border: 1px solid var(--floor-line);
  border-top-color: var(--floor-line-top);
  border-radius: var(--radius-floor);
  padding: var(--space-0) var(--space-3);
  min-width: 0;
  box-shadow: inset 0 1.5px 3px rgb(0 0 0 / 0.32);
}

[data-ground='paper'] .floor {
  box-shadow: inset 0 1px 2px rgb(58 48 26 / 0.05);
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 9px 0;
  border-top: 1px solid var(--floor-line);
  min-width: 0;
}
.row:first-child {
  border-top: 0;
}

.row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.row-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-meta {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-tag {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.row-tag[data-tone='warn'] {
  color: var(--warn);
}
.row-tag[data-tone='ok'] {
  color: var(--ok);
}
.row-tag[data-tone='bright'] {
  color: var(--bright);
}

/* --- meter shape 1: the pip track. A window, and where in it each thing falls. --- */
.track {
  position: relative;
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--sunken);
  margin: var(--space-2) 0 var(--space-3);
}
.pip {
  position: absolute;
  top: -2px;
  width: 6px;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transform: translateX(-50%);
}
.pip-soon {
  top: -4px;
  height: 16px;
  width: 7px;
  background: var(--bright);
}

/* --- meter shape 2: the proportion bar --- */
.bar {
  display: flex;
  gap: var(--space-0);
  height: 10px;
}
.bar-part {
  flex-basis: 0;
  min-width: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.bar-end {
  background: var(--bright);
}

/* --- meter shape 3: the split --- */
.split {
  display: flex;
  gap: var(--space-1);
}
.split-part {
  flex-basis: 0;
  min-width: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.split-bright {
  background: var(--bright);
  color: var(--bright-ink);
}
.split-quiet {
  background: var(--sunken);
  color: var(--muted);
}
.card-anchor .split-quiet {
  color: var(--anchor-ink);
}

/* --- the way out of a card --- */
.handoff {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  height: 34px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--sunken);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.handoff:hover {
  border-color: var(--line-2);
}

/* --- status pill --- */
.pill-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--sunken);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill-state::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}
.pill-state[data-tone='warn']::before {
  background: var(--warn);
}
.pill-state[data-tone='danger']::before {
  background: var(--danger);
}
.pill-state[data-tone='accent']::before {
  background: var(--accent);
}