/* Reset and element defaults. */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  /* Offsets anchored headings so a sticky header does not cover them. */
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  /* Stops long product names and customer emails blowing out a table cell. */
  overflow-wrap: break-word;
}

h1 { font-size: var(--text-2xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-xl); letter-spacing: -0.015em; }
h3 { font-size: var(--text-lg); letter-spacing: -0.01em; }
h4 { font-size: var(--text-md); }

p { overflow-wrap: break-word; }

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

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

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

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

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

code, pre, .mono, .tabular {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Money and quantity columns must line up digit for digit. */
.tabular-nums { font-variant-numeric: tabular-nums; }

hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-6) 0;
}

/* --- Focus -----------------------------------------------------------------
   Visible focus is never removed, only replaced with something clearer.
   :focus-visible keeps it off mouse clicks while keeping it for keyboards. */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* --- Accessibility helpers ------------------------------------------------- */

/* Visually hidden but still announced by a screen reader. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Becomes visible when focused, so keyboard users can skip the sidebar. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-weight: var(--weight-medium);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* Honour a reduced-motion preference rather than animating regardless. */
@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;
  }
}

/* --- Utilities -------------------------------------------------------------
   A deliberately small set. Anything used more than a few times becomes a
   component class instead. */
.stack   { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.row     { display: flex; align-items: center; gap: var(--space-3); }
.row-2   { display: flex; align-items: center; gap: var(--space-2); }
.spread  { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.wrap    { flex-wrap: wrap; }
.grow    { flex: 1 1 auto; min-width: 0; }

.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }
.text-muted  { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-danger { color: var(--danger-text); }
.text-right  { text-align: right; }
.medium      { font-weight: var(--weight-medium); }
.semibold    { font-weight: var(--weight-semibold); }

/* Truncates to one line; requires a constrained parent (hence .grow's min-width). */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The `hidden` attribute must win.
 *
 * A browser hides [hidden] through its own stylesheet, and *any* author rule
 * setting `display` beats it - so `.thing { display: flex }` silently makes
 * `hidden` do nothing. That is how the command palette came to be drawn over
 * every admin screen while it believed itself closed.
 *
 * !important because the whole point is to outrank the component rule that
 * caused it, whichever one that turns out to be. */
[hidden] { display: none !important; }