/* Base layer: reset, typography, native control styling, accessibility utilities. */

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

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

body {
  margin: 0;
  min-width: 320px;
  background: var(--canvas);
  color: var(--graphite-800);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* ---- Headings ------------------------------------------------------------
 * The display serif is used with restraint: screen titles, case titles and claim
 * titles. Controls, tables and data stay in the system sans for legibility during
 * long review sessions.
 */
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

/* Swedish compound nouns are long and unbreakable: measured,
   "Analyserade förundersökningsprotokoll" alone rendered 404px wide and pushed the whole
   register into 92px of page-level horizontal scrolling at 320px. Headings therefore break
   and hyphenate (html carries lang="sv", so hyphenation is language-correct) and h1 scales
   down on narrow viewports. */
h1,
h2,
h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: clamp(1.625rem, 5.2vw, var(--text-2xl)); }
h2 { font-size: clamp(1.375rem, 4vw, var(--text-xl)); }
h3 { font-size: var(--text-lg); }

h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--ink-700);
  text-underline-offset: 0.2em;
}

a:hover { color: var(--ink-900); }

/* ---- Numerals ------------------------------------------------------------
 * Timings, page numbers, counts, costs and token figures must align in columns
 * and never shift width as values change.
 */
.num,
time,
progress,
td.num,
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

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

kbd {
  padding: 0.05rem 0.3rem;
  border: var(--border-hair) solid var(--rule-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}

/* ---- Native controls ----------------------------------------------------- */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

input[type="text"],
input[type="search"],
input[type="number"],
input[type="file"],
select,
textarea {
  min-height: 2.6rem;
  padding: 0.5rem 0.65rem;
  border: var(--border-hair) solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
}

textarea { min-height: 4.5rem; resize: vertical; }

/* ---- Focus ---------------------------------------------------------------
 * One focus treatment everywhere, always visible, never removed.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* ---- Accessibility utilities --------------------------------------------- */
.sr-only {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 40;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-3) var(--space-4);
  transform: translateY(-200%);
  background: var(--paper-raised);
  border: 2px solid var(--focus);
  border-radius: var(--radius-sm);
  color: var(--ink-900);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: transform var(--motion-fast) var(--motion-ease);
}

.skip-link:focus { transform: translateY(0); }

[hidden] { display: none !important; }

/* ---- Print-only content --------------------------------------------------
 * `print.css` is linked with media="print", so it cannot hide anything on screen.
 * Screen-only suppression therefore has to live here. Scoped to @media screen so no
 * !important is needed and the print stylesheet stays in control when printing.
 */
@media screen {
  .print-only { display: none; }
}

/* ---- Native disclosures --------------------------------------------------
 * Used for the verifier's generic policy explanation and for technical claim
 * identifiers. Native <details>/<summary> keeps keyboard and screen-reader behaviour
 * without a custom widget.
 */
summary {
  cursor: pointer;
  color: var(--ink-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

summary:hover { color: var(--ink-900); }

/* ---- Reduced motion ------------------------------------------------------
 * Evidence and status never animate at all. Everything else stops here.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Route changes move programmatic focus to <main> for announcement, but that focus should
 * not draw a page-sized rectangle. The class is removed on the next keyboard/pointer action
 * or blur, so user-initiated focus still receives the standard visible treatment. */
#main-content.route-focus-target:focus { outline: none; }