/* Creator OS prototype: tokens and the two shell grids (spec sections 2.1 and 3).
   CASCADE RULE: the 20 colour tokens, --grain and --grain-blend are declared on :root ONLY, and never
   redeclared on .screen, a shell class or a component, so an override on #world (canvas) or :root
   (standalone) reaches every frame. Derived tokens go on ':root, .screen' so each frame re-resolves them. */

:root {
  /* colour tokens = preset 1 "reference" (shared/palettes.json) */
  --paper: #f3efe9;
  --paper-2: #dcd5cb;
  --ink: #0a0a0a;
  --ink-soft: #6b6766;
  --muted: #979ba1;
  --rule: #c5c7c8;
  --mark: #3d9ad6;
  --accent: #023caf;
  --on-accent: #f3efe9;
  --accent-soft: #c5ccdc;
  --accent-2: #fc7a6c;
  --accent-2-ink: #f9564f;
  --on-accent-2: #0a0a0a;
  --accent-2-soft: #fbd2cb;
  --success: #1d7a46;
  --warn: #c98500;
  --danger: #d2342b;
  --duotone-dark: #0b3fb3;
  --duotone-light: #f3efe9;
  --selection: #fcd5d2;
  /* non-colour palette fields */
  --grain: 0.1;
  --grain-blend: multiply;

  /* type */
  --font-display: 'Anton', Impact, sans-serif;
  --font-sans: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --t-masthead: 155px; --t-masthead-lg: 170px; --t-hero: 119px; --t-name: 74px; --t-counter: 51px;
  --t-headline: 67px; --t-slash: 26px; --t-head-l: 29px; --t-head: 18px; --t-stat: 22px;
  --t-body-l: 22px; --t-body: 13px; --t-body-s: 12px; --t-label: 10px; --t-status: 9.5px;
  --sq-masthead: .853; --ls-masthead: -5.2px; --sq-masthead-lg: .87; --sq-hero: .80; --sq-name: 1; --sq-counter: .84; --sq-count: .90; --sq-head: .82;
  --tr-label: .2em; --tr-wide: .3em; --tr-btn: .18em;
  --lh-display: .82; --lh-tight: 1.05; --lh-body: 1.3;

  /* spacing, rules, radii, shadows */
  --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px; --s-5: 12px; --s-6: 16px;
  --s-7: 20px; --s-8: 24px; --s-9: 32px; --s-10: 40px; --s-11: 48px; --s-12: 64px;
  --w-hair: 1px; --w-band: 2px; --w-outline: 1.5px;
  --r-0: 0; --r-1: 2px; --r-2: 4px; --r-pill: 999px;
  --shadow-0: none;
  --shadow-lift: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);

  /* rails */
  --rail-l: 142px;
  --rail-r: 340px;
}

/* derived colours: re-resolved on every frame from the --ink and --paper it inherits */
:root, .screen {
  --track: color-mix(in srgb, var(--ink) 16%, var(--paper));
  --silhouette-bg: color-mix(in srgb, var(--ink) 18%, var(--paper));
  --silhouette-fig: color-mix(in srgb, var(--ink) 50%, var(--paper));
  --rule-strong: var(--ink);
  --rule-mark: color-mix(in srgb, var(--mark) 38%, var(--rule));
}

.screen.is-l-closed { --rail-l: 48px; }
.screen.is-r-closed { --rail-r: 48px; }

::selection { background: var(--selection); }

/* ---------- Shell A, "editorial" (ref 05): 1586 x 992 ----------
   cols: margin 18 | rail-l | gap 12 | main | gap 7 | rail-r | margin 18
   rows: masthead 172 (band rule at y170-171) | counters 80 | main 653 | locked 68 | margin 19 */
.shell-a {
  --grain-scale: 1.4;
  --main-x: calc(18px + var(--rail-l) + 12px);
  display: grid;
  grid-template-columns: 18px var(--rail-l) 12px minmax(0, 1fr) 7px var(--rail-r) 18px;
  grid-template-rows: 172px 80px 653px 68px 19px;
}
.shell-a > .masthead { grid-column: 1 / -1; grid-row: 1; }
.shell-a > .rail-l { grid-column: 2; grid-row: 1 / -1; margin: 14px 0 12px; }
.shell-a > .counters { grid-column: 4; grid-row: 2; }
.shell-a > .main { grid-column: 4; grid-row: 3; }
.shell-a > .locked { grid-column: 4; grid-row: 4; }
.shell-a > .rail-r { grid-column: 6; grid-row: 2 / 5; margin: 4px 0 -2px; }
/* no locked strip: the main panel runs to y 973; no counter band: it starts at y 172 */
.shell-a:not(:has(> .locked)) > .main { grid-row: 3 / 5; }
.shell-a:not(:has(> .counters)) > .main { grid-row: 2 / 4; }
.shell-a:not(:has(> .locked)):not(:has(> .counters)) > .main { grid-row: 2 / 5; }
/* A0: no rails, main spans x 18-1568 */
.shell-a--bare {
  --main-x: 18px;
  grid-template-columns: 18px 0 0 minmax(0, 1fr) 0 0 18px;
}
/* the two 2px accent band rules: y 170-171 and y 973-974, from the main column to x 1568 */
.shell-a::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(var(--accent), var(--accent)) var(--main-x) 170px / calc(100% - var(--main-x) - 18px) 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) var(--main-x) 973px / calc(100% - var(--main-x) - 18px) 2px no-repeat;
}

/* ---------- Shell B, "getting started" (ref 13): no rails ----------
   margins 22 / 20; masthead band to y 195, headline band to y 287, card row to y 965, bottom margin 27 */
.shell-b {
  --grain-scale: 1.2;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 20px;
  grid-template-rows: 195px 92px 678px 27px;
}
.shell-b > .masthead { grid-column: 1 / -1; grid-row: 1; }
.shell-b > .headline { grid-column: 2; grid-row: 2; }
.shell-b > .cards { grid-column: 2; grid-row: 3; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 16px; min-height: 0; }
/* the base screen keeps the measured columns x 23-530, 545-1035, 1051-1564 */
.cards--base { grid-template-columns: 508px 491px 515px; column-gap: 15px; }