/* Reset, typography and the primitives every screen shares. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: var(--leading);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;

  /* Installed apps must clear notches and home indicators. */
  padding:
    env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: var(--leading-tight);
  font-weight: 650;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
li + li { margin-top: var(--space-2); }

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}
a:hover { color: var(--accent-hover); }

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

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
kbd {
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  padding: 0.1em 0.45em;
}

/* --- Focus ---------------------------------------------------------- */
/* Visible on every interactive element. Never removed, only restyled. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* --- Screen-reader only --------------------------------------------- */

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

/* Skip link: hidden until focused, then pinned to the top-left. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* --- Buttons -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-5);

  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;

  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;

  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.btn:hover:not(:disabled) { background: var(--surface-sunken); border-color: var(--accent); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-muted); }
.btn--ghost:hover:not(:disabled) { background: var(--surface); color: var(--ink); border-color: transparent; }

.btn--danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn--danger:hover:not(:disabled) { background: var(--danger-soft); }

.btn--sm { min-height: 36px; padding: var(--space-1) var(--space-3); font-size: var(--step--1); }
.btn--block { width: 100%; }

/* On touch, hover states are meaningless and sticky — suppress them. */
@media (pointer: coarse) {
  .btn:hover:not(:disabled) { background: var(--surface-raised); border-color: var(--border-strong); }
  .btn--primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
}

/* --- Surfaces ------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.panel {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15em 0.7em;
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 650;
  background: var(--surface-raised);
  color: var(--ink-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.pill--gold { background: var(--gold-soft); color: var(--gold); border-color: transparent; }
.pill--ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill--accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* --- Notices -------------------------------------------------------- */
/* Every one carries an icon or a label, so meaning is never colour alone. */

.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid;
  font-size: var(--step--1);
}
.notice--info { background: var(--accent-soft); border-color: var(--accent); }
.notice--ok { background: var(--ok-soft); border-color: var(--ok); }
.notice--warn { background: var(--warn-soft); border-color: var(--warn); }
.notice--danger { background: var(--danger-soft); border-color: var(--danger); }

/* --- Utilities ------------------------------------------------------ */

.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-6); }

.row { display: flex; align-items: center; gap: var(--space-3); }
.row--wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.small { font-size: var(--step--1); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[hidden] { display: none !important; }

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.scroll-x { overflow-x: auto; overscroll-behavior-x: contain; }