/* N tokens (N-SYSTEM.md). Every value the parts use, in one place. Each colour is written once, for light and dark
   together, with light-dark(): the page follows the system unless the menu's Appearance sets data-theme. Nothing here
   comes from the old site's styles any more. */

@property --pt { syntax: "<length>"; inherits: true; initial-value: 1px; }

:root {
  color-scheme: light dark;

  /* ---------- the point: 1px on a phone and an iPad, growing from 1024 to the cap at 2560 ---------- */
  --pt: clamp(1px, 0.7333px + 0.02604vw, 1.4px);

  /* ---------- type: one family, five sizes, each with its own line on the 4pt grid ---------- */
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-d: calc(48 * var(--pt)); --l-d: calc(52 * var(--pt));
  --t-t: calc(28 * var(--pt)); --l-t: calc(36 * var(--pt));
  --t-h: calc(22 * var(--pt)); --l-h: calc(28 * var(--pt));
  --t-b: calc(17 * var(--pt)); --l-b: calc(24 * var(--pt));
  --t-s: calc(14 * var(--pt)); --l-s: calc(20 * var(--pt));

  /* ---------- space: nine steps on a 4pt grid ---------- */
  --s1: calc(4 * var(--pt));  --s2: calc(8 * var(--pt));  --s3: calc(12 * var(--pt)); --s4: calc(16 * var(--pt));
  --s5: calc(24 * var(--pt)); --s6: calc(32 * var(--pt)); --s7: calc(48 * var(--pt)); --s8: calc(64 * var(--pt));
  --s9: calc(96 * var(--pt));

  /* ---------- the frame: one fixed fade at each end of the screen, so everything leaves it the same way. Eased, so it has no hard start ---------- */
  --frame-h: calc(48 * var(--pt));
  --frame-stops: #000 calc(100% - var(--frame-h)), rgb(0 0 0 / .86) calc(100% - var(--frame-h) * .75), rgb(0 0 0 / .5) calc(100% - var(--frame-h) * .5), rgb(0 0 0 / .16) calc(100% - var(--frame-h) * .25), transparent;
  --frame-top: calc(var(--head-y, var(--s4)) + var(--c-reg) + var(--frame-h)); --frame-bot: var(--frame-h);

  /* ---------- the grid: phone (compact) first ---------- */
  --cols: 4; --margin: calc(20 * var(--pt)); --gutter: calc(16 * var(--pt)); --section: var(--s8);
  --bar-edge: var(--margin);   /* the phone bar sits the same distance from the bottom as from the sides, so it follows the screen's corners */

  /* ---------- controls: three heights ---------- */
  --c-reg: calc(44 * var(--pt)); --c-lg: calc(52 * var(--pt)); --c-row: calc(56 * var(--pt));

  /* ---------- corners (D, 3 Nov): concentric, an inner corner is the outer one less the space between them.
     Panel 30, 12 in, section 18, 6 in, item 12. Booking 40, so its 52pt pills sit 14 in. Squircles take 1.6 x
     the radius (below), so they land on the same curve as a round corner of that radius. ---------- */
  --r-pill: 999px;
  --r-field: calc(14 * var(--pt)); --r-plate: calc(20 * var(--pt)); --r-sheet: calc(32 * var(--pt));
  --r-panel: calc(30 * var(--pt)); --r-group: calc(18 * var(--pt)); --r-item: calc(12 * var(--pt)); --r-book: calc(40 * var(--pt));
  --sqk: 1;
  /* radius and inset, set together (4 Nov, after Marvin Schwaibold's grids: "24px radius + inset 24px"). A box with words
     at its edge has an inset equal to its radius, so text never crowds the curve. A box holding rounded parts is
     concentric: its inset is its radius less theirs. Insets stay on the 4pt grid and never take the squircle factor. */
  --r-card: calc(24 * var(--pt));    --i-card: calc(24 * var(--pt));      /* a card of words */
  --r-card-lg: calc(40 * var(--pt)); --i-card-lg: calc(40 * var(--pt));   /* the big plan cards and the Audit band */
  --i-book: calc(28 * var(--pt));                                         /* booking 40, its 12pt picks 28 in */
  --i-panel: calc(12 * var(--pt));                                        /* panel 30, its 18pt sections 12 in */
  --panel-in: var(--i-card);                                               /* a panel's inset, the same on all four sides: 24 for words, 12 when it holds sections (parts.css sets which) */
  --section-gap: var(--s2);                                                /* between sections in a panel: they are one family */
  /* the row grid: section inset, words in from the left, the trailing column in from the right, its width */
  --gp: calc(6 * var(--pt)); --rpl: calc(12 * var(--pt)); --rpr: calc(6 * var(--pt)); --slot: calc(36 * var(--pt));

  /* ---------- motion (Stageshow): UI feedback is as quick as a real product; only story slows down ---------- */
--ease-settle: cubic-bezier(.2, .75, .2, 1); --dur-panel: 340ms; --dur-panel-out: 170ms;   /* what moves with a panel: the words arriving, and the page fading behind it */
    --ease-respond: cubic-bezier(0.3, 0.75, 0.1, 1);   /* sheets, drawers, toasts, taps */
  --ease-travel: cubic-bezier(0.45, 0, 0.1, 1);      /* a thing that moves across the page */
  --ease-arrive: cubic-bezier(0.25, 0.8, 0.25, 1);   /* a thing that appears from nowhere */
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-sheet: var(--ease-respond); --dur-sheet: 500ms; --dur-tap: 150ms;
  --rise: calc(16 * var(--pt));
  --glass-blur: 20px;

  /* ---------- layers (N-SYSTEM.md 7): page 0, content 1, controls 2, panels 3, messages 4 ---------- */
  --z-controls: 40; --z-bar: 45; --z-scrim: 70; --z-panel: 80; --z-toast: 90; --z-tip: 100;

  /* ---------- colour: warm neutrals drawn from one canvas (hue 80) ---------- */
  --canvas: light-dark(oklch(0.94 0.008 80), oklch(0.245 0.008 80));
  --paper: light-dark(oklch(0.985 0.0016 80), oklch(0.2 0.008 80));
  --ink: light-dark(oklch(0.2 0.0048 80), oklch(0.94 0.0032 80));
  --grey: light-dark(oklch(0.47 0.0072 80), oklch(0.74 0.0056 80));
  --hairline: light-dark(#e4e2de, #2f2e2b);
  --x-tint: color-mix(in oklab, var(--ink) 6%, var(--paper));
  --x-tint-2: color-mix(in oklab, var(--ink) 10%, var(--paper));
  /* fills for things on the content layer: a section, an item at rest, an item under the pointer */
  --fill-0: light-dark(color-mix(in oklab, var(--ink) 2.5%, transparent), color-mix(in oklab, var(--ink) 3.5%, transparent));
  --fill-1: light-dark(color-mix(in oklab, var(--ink) 4.5%, transparent), color-mix(in oklab, var(--ink) 6%, transparent));
  --fill-2: light-dark(color-mix(in oklab, var(--ink) 8%, transparent), color-mix(in oklab, var(--ink) 11%, transparent));
  /* buttons: every quiet button, chip and pick, everywhere, one fill (Owen 4 Nov: "all our buttons are being treated differently";
     "I don't like this darker grey"). The light grey is fill-1's; dark mode keeps its layered dark tone. */
  --btn-quiet: light-dark(color-mix(in oklab, var(--ink) 4.5%, transparent), var(--dk-2));
  --btn-quiet-hover: light-dark(color-mix(in oklab, var(--ink) 6.5%, transparent), color-mix(in oklab, var(--dk-2), white 4%));
  --btn-quiet-press: light-dark(color-mix(in oklab, var(--ink) 9%, transparent), color-mix(in oklab, var(--dk-2), white 7%));
  /* a button that floats over the page is the raised surface, never a grey (Owen 6 Nov): white in light; in dark a step above the panel it sits on */
  --btn-float: light-dark(var(--raised), color-mix(in oklab, var(--paper), white 13%));
  --btn-float-hover: light-dark(color-mix(in oklab, var(--ink) 2.5%, var(--raised)), color-mix(in oklab, var(--paper), white 16%));
  --btn-float-press: light-dark(color-mix(in oklab, var(--ink) 4.5%, var(--raised)), color-mix(in oklab, var(--paper), white 18%));
  --btn-on-media: color-mix(in oklab, var(--paper) 86%, transparent);   /* a button over a film or picture */
  --ring: color-mix(in oklab, var(--ink) 55%, transparent);
  /* dark mode is layered tones of dark, each step a little lighter: wells, controls and cards, panels, the one primary
     action (Owen 3 Nov: never light surfaces in dark) */
  --dk-1: color-mix(in oklab, var(--paper), white 4%);
  --dk-2: color-mix(in oklab, var(--paper), white 7%);
  --dk-hi: color-mix(in oklab, var(--paper), white 19%);
  --dk-hi-2: color-mix(in oklab, var(--paper), white 24%);
  --raised: light-dark(#ffffff, color-mix(in oklab, var(--paper), white 10%));

  /* ---------- elevation: anything above the page is lighter, has a fine rim and a shadow that grows with height ---------- */
  --rim: 0 0 0 1px light-dark(color-mix(in oklab, var(--ink) 8%, transparent), rgb(255 255 255 / .09));
  --rim-light: inset 0 1px 0 light-dark(rgb(255 255 255 / .9), rgb(255 255 255 / .07));
  --lift-2: var(--rim), 0 1px 2px light-dark(rgb(20 18 16 / .06), transparent), 0 4px 14px -4px light-dark(rgb(20 18 16 / .12), rgb(0 0 0 / .5));
  --lift-3: var(--rim), 0 1px 2px light-dark(rgb(20 18 16 / .05), transparent), 0 10px 28px -8px light-dark(rgb(20 18 16 / .16), transparent),
    0 12px 32px -8px light-dark(transparent, rgb(0 0 0 / .55)), 0 28px 64px -20px light-dark(rgb(20 18 16 / .24), transparent), 0 30px 70px -20px light-dark(transparent, rgb(0 0 0 / .6));
  --lift-4: var(--rim), 0 2px 4px light-dark(rgb(20 18 16 / .08), transparent), 0 14px 36px -10px light-dark(rgb(20 18 16 / .26), rgb(0 0 0 / .6));
  --dim: light-dark(rgb(20 18 16 / .16), rgb(0 0 0 / .4));

  /* ---------- meaning: red for destroying something or anything that went wrong, green for done (OKLCH, tuned per theme) ---------- */
  --danger: light-dark(oklch(0.53 0.22 27), oklch(0.72 0.16 25));
  --danger-bg: light-dark(color-mix(in oklab, var(--danger) 17%, transparent), color-mix(in oklab, var(--danger) 16%, transparent));
  --danger-bg-hover: light-dark(color-mix(in oklab, var(--danger) 25%, transparent), color-mix(in oklab, var(--danger) 24%, transparent));
  --ok: light-dark(oklch(0.47 0.15 152), oklch(0.80 0.18 152));
  --ok-bg: light-dark(color-mix(in oklab, var(--ok) 15%, transparent), color-mix(in oklab, var(--ok) 16%, transparent));
  --ok-solid: light-dark(oklch(0.62 0.19 152), oklch(0.72 0.19 152));
  --ok-on: light-dark(#fff, oklch(0.2 0.03 152));
  --live: oklch(0.62 0.15 150);   /* the "taking work" dot */
  --tip-bg: light-dark(var(--ink), var(--dk-hi));
  --tip-fg: light-dark(var(--paper), var(--ink));
}
/* an ink panel in light mode (booking, grown from a black button). The fills above are worked out from the page's ink, which
   vanishes on black, so here they are worked out again from the panel's own ink (sheet.js sets it, and this class). */
.x-sheet.x-on-ink {
  --fill-0: color-mix(in oklab, var(--ink) 5%, transparent);
  --fill-1: color-mix(in oklab, var(--ink) 10%, transparent);
  --fill-2: color-mix(in oklab, var(--ink) 15%, transparent);
  --btn-quiet: var(--fill-1); --btn-quiet-hover: var(--fill-2); --btn-quiet-press: color-mix(in oklab, var(--ink) 20%, transparent);
  --ring: color-mix(in oklab, var(--ink) 55%, transparent);
  --ok: oklch(0.80 0.18 152);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-cap="1.3"] { --pt: clamp(1px, 0.8px + 0.01953vw, 1.3px); }

@media (width >= 600px)  { :root { --cols: 8;  --margin: calc(32 * var(--pt)); --gutter: calc(20 * var(--pt)); --section: var(--s9); } }
@media (width >= 1200px) { :root { --cols: 12; --margin: calc(48 * var(--pt)); --gutter: calc(24 * var(--pt)); } }
/* on a phone or an upright iPad the page fades away behind a panel, rather than dimming: only the panel and its two options are left (Owen 5 Nov) */
@media (width < 900px)   { :root { --frame-top: calc(var(--s2) + var(--frame-h)); --frame-bot: calc(var(--bar-now, var(--bar-h, calc(60 * var(--pt)))) + var(--bar-edge) + var(--frame-h)); } }
@media (width < 900px)   { :root { --dim: color-mix(in oklab, var(--paper) var(--page-fade, 100%), transparent); } }
@media (width < 600px)   { :root { --t-d: calc(34 * var(--pt)); --l-d: calc(40 * var(--pt)); --t-t: calc(22 * var(--pt)); --l-t: calc(28 * var(--pt)); } }

/* the iOS continuous corner, where the browser has it */
@supports (corner-shape: superellipse(var(--sq, 1.8))) {
  :root:not(.x-sq-fallback) {
    --r-field: calc(14 * 1.6 * var(--pt)); --r-plate: calc(20 * 1.6 * var(--pt)); --r-sheet: calc(32 * 1.6 * var(--pt));
    --r-panel: calc(30 * 1.6 * var(--pt)); --r-group: calc(18 * 1.6 * var(--pt)); --r-item: calc(12 * 1.6 * var(--pt)); --r-book: calc(40 * 1.6 * var(--pt));
    --r-card: calc(24 * 1.6 * var(--pt)); --r-card-lg: calc(40 * 1.6 * var(--pt));
    --sqk: 1.6;
  }
}