/* Spcxtaa design system: Contour, Graphite version. The one shared copy.
   This file, contour.js and fonts/ are kept in the company repository (design/system/shared) and
   copied into the website, Work, Core and Cloud by design/system/sync.py. Change the design there
   and run the script; a product's copy is never edited by hand, and each product has a check
   (tools/design/check.mjs) that fails if its copy is not what the script put there.

   One continuous cool-graphite surface. Sections are split by hairlines and tone steps, not cards;
   only a few things are framed, and those frames carry the Contour corner (a 45° facet joined to
   each edge by a smooth blend; contour.js draws it from each component's --r).
   Three type voices, each with one job:
   - Geist reads: headlines, body, controls.
   - Spcxtaa Display counts and labels: codes, figures, small capital labels.
   - Spcxtaa Wordmark names: "spcxtaa" and its divisions and products, nothing else.
   Color means something: red is the mark and what needs you (or failed), amber is waiting or near
   a limit, green is done or healthy, ice is live data and focus. All but red appear only as small
   marks. The main action is a bone fill, not red. */

/* 1. Fonts. The files sit beside this one, so nothing is fetched from another site. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/geist-cyrillic-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/geist-cyrillic-wght-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/geist-vietnamese-wght-normal.woff2') format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/geist-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/geist-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/geist-mono-cyrillic-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/geist-mono-cyrillic-wght-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/geist-mono-symbols2-wght-normal.woff2') format('woff2'); unicode-range: U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/geist-mono-vietnamese-wght-normal.woff2') format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/geist-mono-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/geist-mono-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Spcxtaa Display'; font-weight: 400; font-display: swap; src: url('./fonts/SpcxtaaDisplay-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Spcxtaa Display'; font-weight: 700; font-display: swap; src: url('./fonts/SpcxtaaDisplay-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Spcxtaa Wordmark'; font-weight: 400; font-display: block; src: url('./fonts/SpcxtaaWordmark-Regular.woff2') format('woff2'); }

/* 2. Tokens */
:root {
  --ground: #07080a;
  --s1: #0b0d10;
  --s2: #0e1013;
  --s3: #161a1f;
  --s4: #1d2228;
  --ink: #eeebe6;
  --ink-2: #8b929b;
  --ink-3: #5e656e;
  --line: rgba(233, 236, 239, .08);
  --line-2: rgba(233, 236, 239, .15);
  --accent: #ff3322;
  --accent-hi: #ff5242;
  --accent-ink: #140504;
  --danger-text: #ff8577;
  --ice: #a9d4e8;
  --ok: #8fdcb0;
  --warn: #ecc66f;
  --info: var(--ice);
  --on-art: #f3f1ec;
  --on-art-2: #b9bfc6;
  --glass: rgba(14, 16, 19, .62);
  --edge: linear-gradient(180deg, rgba(233, 236, 239, .2), rgba(233, 236, 239, .08) 32%, rgba(233, 236, 239, .05));
  --glow: rgba(169, 212, 232, .9);
  /* A field's outline, which contour.js draws as a picture: at rest, under the pointer, in focus. */
  --field-line: rgba(233, 236, 239, .15);
  --field-line-hover: rgba(233, 236, 239, .28);
  --field-line-focus: var(--ice);
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --tech: 'Spcxtaa Display', 'Eurostile', 'Bank Gothic', 'Geist', sans-serif;
  --name: 'Spcxtaa Wordmark', 'Geist', sans-serif;
  --t-instant: 90ms;
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 480ms;
  --t-cine: 1600ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: linear(0, .039, .134, .258, .393, .524, .644, .748, .833, .901, .952, .989, 1.013, 1.028, 1.036, 1.038, 1.037, 1.034, 1.029, 1.024, 1.019, 1.014, 1.01, 1.007, 1.004, 1.002, 1.001, 1, .999, .999, .999, .999, .999, .999, .999, .999, .999, 1, 1, 1, 1);
  color-scheme: dark;
}

/* 3. The Contour shape and its edge light. contour.js clips each shaped element to the corner
   drawn from its --r and sets --ring to a one-pixel band inside that outline; the band is painted
   here, lit from above, and brightens under the pointer on .lit elements. */
.cx { position: relative; isolation: isolate; }
.cx::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: var(--edge-paint, var(--edge)); clip-path: var(--ring, inset(50%)); }
.cx.lit::after { background: radial-gradient(180px circle at var(--mx, -999px) var(--my, -999px), var(--glow), transparent 70%), var(--edge-paint, var(--edge)); }
.cx:focus-visible { outline: none; --edge-paint: var(--ice); }
.cx:focus-visible::after { clip-path: var(--ring2, var(--ring)); }

/* 4. Shared pieces */
.label { margin: 0; font: 400 10.5px/1.4 var(--tech); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
/* A name set in the logo's lettering: "spcxtaa" plus a division or product. */
.lockup { display: inline-flex; gap: .42em; margin: 0; font: 400 18px/1.3 var(--name); white-space: nowrap; color: var(--ink); }
.lockup b { font-weight: 400; color: var(--ink-2); }
/* Status marks: the mark's diamond. Red by default; the other signals by class. */
.gem { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; transform: rotate(45deg); background: var(--accent); }
.gem.ok { background: var(--ok); }
.gem.warn { background: var(--warn); }
.gem.ice { background: var(--ice); }