/* The web app's design tokens and token classes. app.css (HAM's, byte for byte) and gmp.css are unlayered, so they
   beat every layer declared here: components.css fills these layers, one per component, and pages.css comes last,
   unlayered. Every animation starts from a `from` keyframe, so an element at rest is already in its finished state,
   and reduced motion turns all of them off. */
@layer btn, avatar, logo, glyph, countdown, stack, card, chip, pill, segmented, tabs, fzf, terminal, empty, timeline, status, confirm, duration, cartline, decision, ticketrow, dialog, breakglass, oncall, timetrack, carousel, elevated;

/* Dark is the base, as in app.css; the light block repeats every token with its own value. */
:root,:root[data-theme="dark"]{
  --g-aws:#ff9900; --g-cloudflare:#f6821f; --g-kubernetes:#326ce5; --g-ssh:#34d399; --g-vault:#ffd814;
  --g-gmp:#a79ff5; --g-other:#7b8199;
  --g-ok:#4ade80; --g-wait:#facc15; --g-bad:#f87171; --g-done:#7b8199;
  --g-ok-ink:#062a16; --g-wait-ink:#2a2103; --g-bad-fill:#b91c1c;
  --g-surface:#0b1224; --g-surface-2:#0e1630; --g-surface-3:#131a33; --g-edge:#232a44; --g-edge-2:#39406a;
  --g-ink:#f3f3f9; --g-ink-2:#a6abbb; --g-ink-3:#7b8199; --g-tile:#fff;
  --g-glow:rgba(125,117,236,.25); --g-temp-glow:rgba(255,153,0,.45); --g-shadow:0 10px 28px rgba(0,0,0,.4);
  --g-term-bg:#050914; --g-term-edge:#1d2440; --g-term-bar:#151b33; --g-term-fg:#d7dbee; --g-term-head:#22d3ee;
  --g-term-dim:#4b5374; --g-term-ok:#4ade80; --g-term-wait:#facc15; --g-term-bad:#f87171; --g-term-mute:#7b8199;
  --g-term-light:#2a3150;
}
:root[data-theme="light"]{
  --g-aws:#c26a00; --g-cloudflare:#c45f0c; --g-kubernetes:#2456c4; --g-ssh:#047857; --g-vault:#8a6d00;
  --g-gmp:#5b4fd6; --g-other:#666c81;
  --g-ok:#15803d; --g-wait:#a16207; --g-bad:#b91c1c; --g-done:#666c81;
  --g-ok-ink:#fff; --g-wait-ink:#fff; --g-bad-fill:#b91c1c;
  --g-surface:#fff; --g-surface-2:#f7f7fb; --g-surface-3:#eef0f7; --g-edge:#e8eaee; --g-edge-2:#c9cde0;
  --g-ink:#000514; --g-ink-2:#5a6076; --g-ink-3:#666c81; --g-tile:#fff;
  --g-glow:rgba(19,0,235,.18); --g-temp-glow:rgba(194,106,0,.35); --g-shadow:0 8px 22px rgba(0,5,20,.12);
  --g-term-bg:#050914; --g-term-edge:#1d2440; --g-term-bar:#151b33; --g-term-fg:#d7dbee; --g-term-head:#22d3ee;
  --g-term-dim:#4b5374; --g-term-ok:#4ade80; --g-term-wait:#facc15; --g-term-bad:#f87171; --g-term-mute:#7b8199;
  --g-term-light:#2a3150;
}

/* Token classes: each sets one custom property, which the components read. A value comes to one of these only through
   an allowlist (token() in components/cx.js). */
.svc-aws{--svc:var(--g-aws)} .svc-kubernetes{--svc:var(--g-kubernetes)} .svc-cloudflare{--svc:var(--g-cloudflare)}
.svc-vault{--svc:var(--g-vault)} .svc-ssh{--svc:var(--g-ssh)} .svc-gmp{--svc:var(--g-gmp)} .svc-other{--svc:var(--g-other)}
.sev-0{--sev:var(--s0);--sev-bg:var(--s0b)} .sev-1{--sev:var(--s1);--sev-bg:var(--s1b)} .sev-2{--sev:var(--s2);--sev-bg:var(--s2b)}
.sev-3{--sev:var(--s3);--sev-bg:var(--s3b)} .sev-4{--sev:var(--s4);--sev-bg:var(--s4b)}
.tone-ok{--tone:var(--g-ok)} .tone-wait{--tone:var(--g-wait)} .tone-bad{--tone:var(--g-bad)} .tone-done{--tone:var(--g-done)}

/* Staggered entrances: the i-th item waits i steps, and from 23 on they arrive together. */
.d-0{animation-delay:0s} .d-1{animation-delay:.06s} .d-2{animation-delay:.12s} .d-3{animation-delay:.18s}
.d-4{animation-delay:.24s} .d-5{animation-delay:.3s} .d-6{animation-delay:.36s} .d-7{animation-delay:.42s}
.d-8{animation-delay:.48s} .d-9{animation-delay:.54s} .d-10{animation-delay:.6s} .d-11{animation-delay:.66s}
.d-12{animation-delay:.72s} .d-13{animation-delay:.78s} .d-14{animation-delay:.84s} .d-15{animation-delay:.9s}
.d-16{animation-delay:.96s} .d-17{animation-delay:1.02s} .d-18{animation-delay:1.08s} .d-19{animation-delay:1.14s}
.d-20{animation-delay:1.2s} .d-21{animation-delay:1.26s} .d-22{animation-delay:1.32s} .d-23{animation-delay:1.38s}

/* Page entrances: a page's main block (enter() in components/cx.js) rises 6px and fades in once, when its node is
   created, so a navigation plays it and a poll or a refresh, which keep the nodes, never does. Inside an entrance the
   d-N steps are 20ms apart and stop at the seventh, so the last block has landed 300ms after the page appeared. */
.g-enter{animation:g-rise .16s ease-out backwards}
.g-enter.d-1{animation-delay:.02s} .g-enter.d-2{animation-delay:.04s} .g-enter.d-3{animation-delay:.06s}
.g-enter.d-4{animation-delay:.08s} .g-enter.d-5{animation-delay:.1s} .g-enter.d-6{animation-delay:.12s}
.g-enter.d-7{animation-delay:.14s}

/* The one unlayered reset. app.css's a{color:inherit} is unlayered, so it beats every layer, and a component anchor
   (every class starts with g-) would draw in its parent's ink. revert-layer rolls the unlayered rules back, so the
   anchor takes the color its own layer gives it; the btn layer's fallback keeps one whose layer sets none from
   reverting to the browser's link color. */
a[class^="g-"],a[class*=" g-"]{color:revert-layer;text-decoration:none}

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