/* ==========================================================================
   reset.css — modern minimal reset + the global utility set

   Two layers: `reset` (first in the cascade, so anything can override it)
   and `utilities` (last, so a utility class always wins over a component).

   Four utilities, and each of them earns its place by being used: `.sr-only`,
   `.truncate`, `.mono` and `.icon`. A utility layer is where a design system
   goes to die by a thousand escape hatches, and this one had twenty-eight
   classes that no template and no module had ever written — a whole parallel
   type scale (`.t-xs`…`.t-3xl`, `.w-*`, `.caps`), a colour pair (`.muted`,
   `.faint`) duplicating `.fg-muted`/`.fg-faint`, and a layout kit (`.row`,
   `.stack*`, `.spacer`, `.scroll-x`, `.clamp-2/3`, `.nowrap`, `.icon-sm/lg`,
   `.tabular`, `.sr-only-focusable`). They are gone. Anything that needs a
   size, a weight or a colour names the token in the component's own rule,
   which is the only way the four text scales stay coherent.
   ========================================================================== */

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

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -moz-tab-size: 2;
    tab-size: 2;
  }

  body,
  h1, h2, h3, h4, h5, h6,
  p, figure, blockquote, dl, dd, pre, fieldset {
    margin: 0;
  }

  /* Only lists that carry a class are ours to strip; a list authored inside
     prose keeps its markers. */
  ul[class],
  ol[class] {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body {
    min-block-size: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    max-inline-size: 100%;
  }

  img, video {
    block-size: auto;
  }

  svg {
    flex-shrink: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  strong, b {
    font-weight: var(--weight-semibold);
  }

  code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9375em;   /* mono runs large next to Inter; pull it back */
  }

  pre {
    overflow: auto;
  }

  /* A rule between two blocks is a divider, and a divider is the hairline —
     the same line a card is drawn in, not the heavier one a floating panel or
     a form control needs. */
  hr {
    block-size: 0;
    border: 0;
    border-block-start: 1px solid var(--border-subtle);
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  th {
    text-align: start;
    font-weight: var(--weight-semibold);
  }

  input, button, textarea, select, optgroup {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    margin: 0;
  }

  button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: inherit;
  }

  button, [role="button"], summary {
    -webkit-tap-highlight-color: transparent;
  }

  textarea {
    resize: vertical;
  }

  ::placeholder {
    color: var(--fg-faint);
    opacity: 1;
  }

  [type="search"]::-webkit-search-decoration,
  [type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }

  fieldset {
    padding: 0;
    border: 0;
  }

  legend {
    padding: 0;
  }

  summary {
    cursor: pointer;
    list-style: none;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  dialog {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    max-inline-size: 100%;
    max-block-size: 100%;
  }

  [hidden] {
    display: none !important;
  }

  [disabled],
  [aria-disabled="true"] {
    cursor: not-allowed;
  }

  /* One focus treatment for the whole product. Components may recolour the
     ring; none of them may remove it. `:focus-visible` only, so a mouse click
     never draws one and a keyboard tab always does. */
  :focus-visible {
    outline: var(--focus-ring-width) solid var(--border-focus);
    outline-offset: var(--focus-ring-offset);
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  /* Picker inputs are not "text fields" to the :focus-visible heuristic —
     Blink guarantees the state for text/search/url/tel/email/password/number
     and for nothing else — so a keyboard user could land on the date filter
     beside a search box that rings and get no ring at all. Measured on
     /activity: seven of eight stops drew the outline, the date input reported
     `outline: 0px none`. The ring is not optional; specificity (0,2,1) beats
     the reset above it in the same layer. */
  input[type="date"]:focus,
  input[type="time"]:focus,
  input[type="datetime-local"]:focus,
  input[type="month"]:focus,
  input[type="week"]:focus,
  input[type="file"]:focus {
    outline: var(--focus-ring-width) solid var(--border-focus);
    outline-offset: var(--focus-ring-offset);
  }

  ::selection {
    background: var(--accent-subtle);
    color: var(--fg-primary);
  }

  /* Motion is decoration here — never the only signal that something moved,
     appeared or finished. Killing it must leave the interface fully usable. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 1ms !important;
      animation-delay: 0ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      transition-delay: 0ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* A label that wraps a hidden control (a chip's radio, a "Take" file input)
     is that control's positioning box.  Without it the absolute input is
     placed against <body>, outside the panel that scrolls; clicking the label
     focuses it, and the browser scrolls the WINDOW to show it -- the app frame
     slides off-screen and the page looks blank (21 Oct, the Vehicle colours). */
  label:has(> .sr-only) {
    position: relative;
  }

  .truncate {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mono { font-family: var(--font-mono); }

  /* Inline product icons: 16px stroke drawings that inherit their colour.
     Templates emit <svg class="icon" viewBox="0 0 16 16" aria-hidden="true">
     with paths and no hardcoded stroke. */
  .icon {
    /* The template tag emits width/height attributes from its size argument.
       A fixed inline-size here silently overrode every one of them, so
       `{% icon "x" 24 %}` rendered at 16px product-wide. Defer to the
       attribute when it is present and only fall back to the token when the
       SVG carries no size of its own. */
    inline-size: attr(width px, var(--icon-md));
    block-size: attr(height px, var(--icon-md));
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

  /* attr() with a type is not everywhere yet. Where it is unsupported the
     declaration above is simply dropped and the SVG's own width/height
     attributes apply — which is the behaviour we wanted anyway. This block
     only restores the token default for a sizeless icon in those engines. */
  @supports not (inline-size: attr(width px, 16px)) {
    .icon:not([width]) { inline-size: var(--icon-md); block-size: var(--icon-md); }
  }
}