/* Cascade layers, lowest first (design system 7.6.0; pages 7.9.0): reset
   (core.css and the page resets), docs (the library shell), kit (this
   system), pages (every page sheet and template <style> block), so pages
   rank above the kit by the declared order. Every sheet that can load first
   repeats this statement; the first one seen fixes the order. */
@layer reset, docs, kit, pages;

@layer reset {
/* core.css -- the reset layer every product, landing and interview page links
   with the design kit: the element reset (margins, box sizing, form
   controls, links, `[hidden]`), the body's type and ground, the .sr-only
   utility and the reduced-motion clamp. It defines no tokens, no faces and no
   components; those are the kit's (design-system/css/tokens.css, whose
   @font-face rules every page that links this sheet also loads, and the
   @layer kit sheets). Its own Inter face went on 2026-11-03: the kit's
   unlayered face took precedence over it, so the product shell's preload of
   its copy was a second download of the same file. */

/* ==========================================================================
   CSS RESET
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Form controls inherit the page's font, tracking and colour (the kit's
   base.css recipe). Zero specificity, so every kit control class (.pk-btn--sm's
   size and weight, .pk-input's colour) still wins over it. */
:where(button, input, select, textarea, optgroup) {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Inheriting the colour drops the browser's grey on a disabled control, so a
   disabled unclassed control would look live. It reads in the kit's muted
   gray instead; kit controls draw their own disabled state over this. */
:where(button, input, select, textarea, optgroup):where(:disabled) {
  color: var(--pk-muted);
}

a {
  text-decoration: none;
}

/* `hidden` always hides. Any author `display` outranks the UA's
   `[hidden] { display: none }`, so every page used to restate it under its own
   scope; this one rule replaces those copies. It sits in the lowest layer but
   is `!important`, and a layered `!important` outranks every normal
   declaration and every `!important` in a later layer (kit, pages), so no page rule can show a
   hidden element by accident. `until-found` keeps the browser's own
   behaviour. An element that must keep its box while hidden (invisible,
   still taking its space) opts out with `data-keep-box` and draws its own
   `[hidden]` state: the landing page's How/Why step bodies and the job
   profile head's reserved controls. */
[hidden]:not([hidden="until-found"], [data-keep-box]) {
  display: none !important;
}

/* The original palette (--panel*, --border, --accent*, --font-*, ...), the
   "Cohere" set (--ink, --slate, --hairline, --canvas, ...) and the
   .glass-panel's --radius-ui, --grad-a / --grad-b and --glass-* went on
   2026-11-02, with the .glass-panel itself (landing/templates/base.html's
   default content block, which every page overrides): nothing read them any
   more. Pages draw on the --pk-* tokens in design-system/css/tokens.css. The
   chart colours frontend/shared/charts.ts reads in tokens() carry the same
   values as their fallbacks, so the charts are unchanged. */

/* ==========================================================================
   BASE TYPOGRAPHY
   ========================================================================== */

html {
  color-scheme: light;
}

/* The system's body: Inter Regular in ink on the page ground. Every page that
   links this sheet also links design-system/css/tokens.css. */
body {
  font-family: var(--pk-font-body);
  font-weight: var(--pk-fw-regular);
  background: var(--pk-ground);
  color: var(--pk-ink);
  min-height: 100vh;
  position: relative;
}

/* The `breathe` keyframes lived here for the gradient dot beside the old text
   wordmark. Every surface now draws the shipped lockup instead, and nothing
   referenced the animation any more. */

/* ==========================================================================
   ACCESSIBILITY UTILITIES
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

} /* @layer reset */