/* =========================================================================
   Reset and element defaults
   ========================================================================= */

@layer reset {

  *, *::before, *::after { box-sizing: border-box; }

  * { margin: 0; }

  /* A modal <dialog> centres itself through the user-agent's
     `inset: 0; margin: auto`, and the line above wipes the margin half of it —
     which pins every dialog to the top-left corner. Putting it back HERE,
     rather than on each dialog class, is what keeps the next one somebody adds
     centred too (the messenger's was the one that wasn't). A dialog that wants
     to sit elsewhere, like the command palette, sets its own margin. */
  dialog { margin: auto; }

  html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;

    /* The top bar is sticky, so anything scrolled to — an anchor, a field the
       browser jumped to on a validation error, a row focused by keyboard —
       lands underneath it and looks like it is missing. Reserving the bar's
       height plus a little air stops every one of those cases at once. */
    scroll-padding-top: calc(var(--topbar-h) + 1rem);
    scroll-behavior: smooth;
  }

  body {
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--t-base);
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img, svg, video, canvas { display: block; max-width: 100%; }

  /* The `hidden` attribute has to beat every display rule in the stylesheet.
     The user-agent's `[hidden] { display: none }` loses to any author class —
     `.field { display: flex }` is enough — so an element JavaScript has just
     hidden stays on screen, which is how a form ends up showing a quantity box
     and a serial picker at the same time. This is the one place !important is
     the correct tool: the attribute means "not displayed", full stop. */
  [hidden] { display: none !important; }

  input, button, textarea, select { font: inherit; color: inherit; }

  button { background: none; border: 0; padding: 0; cursor: pointer; }

  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

  h1, h2, h3, h4 { font-weight: 600; line-height: var(--lh-tight); text-wrap-style: balance; }

  /* The LONGHAND, deliberately. `text-wrap` is a shorthand that also resets
     text-wrap-mode to `wrap`, which quietly overrode every `white-space:
     nowrap` inherited by a list item — the breadcrumb wrapped "WO-2026-00001"
     over three lines on a phone. text-wrap-style changes how a line breaks,
     never whether it may. */
  p, li { text-wrap-style: pretty; }

  ul, ol { padding: 0; list-style: none; }

  table { border-collapse: collapse; width: 100%; }

  /* Nobody asked for a scrollbar to be styled, but an interface this dense
     ends up with a lot of them and the default width eats a whole column on
     Windows. */
  * { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }

  /* Respect the operating system setting. Everything below the animation
     layer still works — nothing here is load-bearing. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer base {

  /* One focus treatment everywhere, and it is never removed. A dispatcher
     working a queue by keyboard has to be able to see where they are. */
  :focus-visible {
    outline: none;
    box-shadow: var(--focus);
    border-radius: var(--r-sm);
  }

  ::selection { background: var(--brand); color: var(--brand-on); }

  /* Skip link — visible only once focused. */
  .skip-link {
    position: absolute;
    top: var(--s2);
    left: var(--s2);
    z-index: 100;
    padding: var(--s2) var(--s4);
    background: var(--brand);
    color: var(--brand-on);
    border-radius: var(--r);
    font-weight: 500;
    transform: translateY(-200%);
    transition: transform 0.15s var(--ease);
  }
  .skip-link:focus { transform: translateY(0); }

  /* --- typographic roles ------------------------------------------------ */

  /* The eyebrow / column-header voice: small, wide-tracked, quiet. Borrowed
     from the printed service form this application replaces. */
  .label {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .lead { font-size: var(--t-md); color: var(--ink-muted); }

  .muted { color: var(--ink-muted); }
  .faint { color: var(--ink-faint); }

  .num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  /* Screen-reader-only, for the labels that a column header carries visually
     but an icon-only control does not. */
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}