/* =====================================================================
   ShiftPocket v0.4 - BASE LAYER
   DESIGN PROTOTYPE ONLY. Not production code.

   Reset, document scaffolding, type primitives, layout primitives.
   RULE: no literal colour, size or timing value. Everything reads a token.
   ===================================================================== */

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

/* An author `display` rule outranks the UA stylesheet's
   `[hidden] { display: none }`, so this guard is required for the hidden
   attribute to be reliable. Screens depend on it for state switching. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Every element inherits the sans stack. Nothing may introduce a serif. */
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, table, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Long unbreakable strings (file paths, ids) must not widen the page. */
code {
  font-family: var(--font-mono); font-size: 0.92em;
  overflow-wrap: anywhere; word-break: break-word;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-xs);
}

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

svg { display: block; }
.icon {
  width: 1.375rem; height: 1.375rem; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.icon-sm { width: 1.0625rem; height: 1.0625rem; stroke-width: 1.9; }
.icon-xs { width: 0.875rem; height: 0.875rem; stroke-width: 2.1; }
.icon-lg { width: 1.625rem; height: 1.625rem; }

/* ---------------------------------------------------------------------
   Type primitives
   --------------------------------------------------------------------- */
.t-hero {
  font-size: var(--fs-hero); font-weight: var(--fw-heavy);
  line-height: var(--lh-tight); letter-spacing: var(--ls-hero);
  font-variant-numeric: tabular-nums;
}
.t-amount {
  font-size: var(--fs-amount); font-weight: var(--fw-bold);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}
.t-title {
  font-size: var(--fs-title); font-weight: var(--fw-bold);
  line-height: var(--lh-snug); letter-spacing: var(--ls-tight);
}
.t-heading {
  font-size: var(--fs-heading); font-weight: var(--fw-semibold);
  line-height: var(--lh-snug); letter-spacing: var(--ls-tight);
}
.t-body  { font-size: var(--fs-body); }
.t-sub   { font-size: var(--fs-sub); line-height: var(--lh-snug); }
.t-label { font-size: var(--fs-label); font-weight: var(--fw-semibold); }
.t-micro { font-size: var(--fs-micro); }

.t-eyebrow {
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--fg-muted);
}

.t-fg { color: var(--fg); }            .t-fg2 { color: var(--fg-2); }
.t-muted { color: var(--fg-muted); }   .t-accent { color: var(--accent-ink); }
.t-cyan { color: var(--cyan-ink); }    .t-danger { color: var(--danger-ink); }
.t-success { color: var(--success-ink); } .t-warn { color: var(--warn-ink); }

.t-num { font-variant-numeric: tabular-nums; }
.t-cur {
  font-size: 0.52em; font-weight: var(--fw-bold);
  letter-spacing: 0; vertical-align: 0.4em; margin-right: 0.1em;
}
.t-strike { text-decoration: line-through; }
.t-wrap-none { white-space: nowrap; }

/* ---------------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------------- */
.row    { display: flex; align-items: center; gap: var(--sp-3); }
.row-sb { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.row-bl { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.col    { display: flex; flex-direction: column; }
.grow   { flex: 1; min-width: 0; }
.center { text-align: center; }
.wrap   { flex-wrap: wrap; }
.justify-center { justify-content: center; }

.stack-1 > * + * { margin-top: var(--sp-1); }
.stack-2 > * + * { margin-top: var(--sp-2); }
.stack-3 > * + * { margin-top: var(--sp-3); }
.stack-4 > * + * { margin-top: var(--sp-4); }
.stack-5 > * + * { margin-top: var(--sp-5); }
.stack-6 > * + * { margin-top: var(--sp-6); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--sp-3);
}

.mt-0 { margin-top: 0; }   .mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }  .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }  .mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.measure { max-width: 54ch; margin-left: auto; margin-right: auto; }

@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;
  }
}