/* Husly stylesheet. Mobile first; the report is the reason it exists. No framework.
   Built on design-tokens.css, linked before this file: never hard-code a value that has a token. */
:root {
  /* Only values design-tokens.css has no token for. Spacing follows the scale in DESIGN.md §4. */
  --measure: 40rem;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  /* Inputs are 17px on every width (DESIGN.md §6), large enough that a phone does not zoom in. */
  --fs-input: 17px;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-ink);
  background: var(--c-bg);
}

.site-header-inner,
.content,
.site-footer-inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The site header is a white band on every page (DESIGN.md §5): its white and its line run the full width, like the
   report header band below it; its content keeps the column. */
.site-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}

.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding-block: var(--space-2);
}

/* Logo: the house outline in the accent colour and "Husly" 700 (DESIGN.md §6, Icons). */
.site-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--c-ink);
  text-decoration: none;
}

.logo-mark { color: var(--c-accent); flex: none; }

.content { padding-block: var(--space-3) var(--space-4); }

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--fs-h1);
  margin: 0 0 var(--space-2);
}

h2 {
  font-size: var(--fs-h2);
  margin: var(--space-3) 0 var(--space-1);
}

h3 { font-size: var(--fs-h3); }

/* The landing page's headline; --fs-h1 is sized for the report's address (DESIGN.md §3). */
h1.display { font-size: var(--fs-display); }

a { color: var(--c-accent); }

a:hover { color: var(--c-accent-hover); }

p { margin: 0 0 var(--space-2); }

.lead { font-size: var(--fs-lead); }

/* Landing page (DESIGN.md §5, Landing page): the hero beside the example-report card on a full-width grey band, the
   report's parts as Box cards in a wrapping grid and the three steps on the white page under it, all in the 1180px
   container. The footer sits on the white page too, under the white header every page has; every component keeps its
   look on either band. */
body:has(.landing) { background: var(--c-surface); }

body:has(.landing) .site-header-inner,
body:has(.landing) .content,
body:has(.landing) .site-footer-inner,
.landing-band > .landing-top { max-width: var(--container); }

.landing-band {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}

.landing-band > .landing-top {
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The hero and the example card side by side when there is room, the card under the hero on a phone,
   as a wrapping flex row like the report's sidebar (no media query). */
.landing-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-4);
}

.landing-hero {
  flex: 1 1 22rem;
  max-width: 36rem;
}

.landing-actions .button { margin: 0 var(--space-1) var(--space-1) 0; }

/* The example report's card: the page's only drop shadow and the --r-xl radius (DESIGN.md §1, §4). */
.example-card {
  flex: 1 1 20rem;
  max-width: 30rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
}

.example-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.example-card-meta {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--c-ink-2);
}

.example-card-address {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
}

.example-card-list {
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.example-card-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--c-line-soft);
  font-size: var(--fs-small);
}

.example-card-list .level-badge { flex: none; }

.example-card-more {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 600;
}

.landing-hero .display { margin-bottom: var(--space-2); }

.landing-actions { margin: var(--space-3) 0 var(--space-1); }

.landing-note {
  font-size: var(--fs-small);
  color: var(--c-ink-3);
}

.landing-part { padding-block: var(--space-3); }

.landing-part h2 { margin-top: 0; }

.landing-part-lead { color: var(--c-ink-2); }

.report-parts,
.landing-steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.report-parts h3,
.landing-steps h3 { margin: 4px 0; font-size: var(--fs-body); }

.report-parts p,
.landing-steps p { margin: 0; font-size: var(--fs-small); color: var(--c-ink-2); }

.report-part-number {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-accent);
}

.landing-steps { gap: var(--space-3); }

.landing-steps li { display: flex; gap: 14px; align-items: flex-start; }

/* The step number: a 32px circle in the accent's soft pair, like the sketch's. */
.landing-step-number {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: var(--fs-small);
  font-weight: 700;
}

.landing-steps h3 { margin-top: 4px; }

.eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--c-accent);
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Forms: one field per row, label above input, message below. */
.form { margin-top: var(--space-3); }

.field { margin-bottom: var(--space-2); }

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Input (DESIGN.md §6): 17px text, 14px padding, focus a 1.5px accent ring. */
.field input {
  display: block;
  width: 100%;
  font: inherit;
  font-size: var(--fs-input);
  padding: 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink);
}

/* A select reads like an input (DESIGN.md §6, Inputs), at its own width. */
.field select {
  display: block;
  max-width: 100%;
  min-height: 44px;
  font: inherit;
  font-size: var(--fs-input);
  padding: 10px 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink);
}

.field select:focus-visible,
.field input:focus-visible {
  outline: 1.5px solid var(--c-accent);
  outline-offset: 0;
  border-color: var(--c-accent);
}

.field-short input { max-width: 10rem; }

.field-invalid input { border: 2px solid var(--c-danger); }

/* Helper text under a field (DESIGN.md §6, Inputs). */
.field-help {
  margin: 0.25rem 0 0;
  font-size: var(--fs-small);
  color: var(--c-ink-3);
}

.field-error {
  margin: 0.25rem 0 0;
  color: var(--c-danger);
  font-size: var(--fs-small);
}

/* Buttons (DESIGN.md §6). Primary: accent, 16px 24px, full width and at least 48px tall on a phone.
   Secondary: white with a strong border, its own width. Destructive: text only, never filled. */
.button {
  display: block;
  width: 100%;
  min-height: 48px;
  font: inherit;
  font-weight: 600;
  text-align: center;
  padding: 16px 24px;
  border: 1px solid var(--c-accent);
  border-radius: var(--r-md);
  background: var(--c-accent);
  color: var(--c-surface);
  text-decoration: none;
  cursor: pointer;
}

.button:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); color: var(--c-surface); }

.button-secondary {
  display: inline-block;
  width: auto;
  min-height: 44px;
  padding: 10px 18px;
  background: var(--c-surface);
  color: var(--c-ink);
  border-color: var(--c-line-strong);
}

.button-secondary:hover { background: var(--c-surface-muted); border-color: var(--c-line-strong); color: var(--c-ink); }

.button:disabled { cursor: default; }

.button-secondary:disabled,
.button-secondary:disabled:hover {
  background: var(--c-surface-muted);
  color: var(--c-ink-3);
}

/* A button that sends (DESIGN.md §6, Buttons): while htmx runs its form's request the form carries htmx-request,
   the button is disabled and says "Skickar …" after the StepList's running icon. Without JavaScript the class
   never appears. */
.busy-active {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.htmx-request .busy-button .busy-idle { display: none; }

.htmx-request .busy-button .busy-active { display: inline-flex; }

.htmx-request .busy-button { cursor: progress; }

/* On the filled primary button the arc is white on the darker accent, so it shows. */
.button:not(.button-secondary) .busy-spinner {
  border-color: var(--c-accent-hover);
  border-top-color: var(--c-surface);
}

.button-destructive {
  display: inline-block;
  width: auto;
  padding: 10px 0;
  background: none;
  border: 0;
  color: var(--c-danger);
}

.button-destructive:hover { background: none; color: var(--c-danger); text-decoration: underline; }

@media (min-width: 640px) {
  .button { display: inline-block; width: auto; }
}

/* Flow screens (DESIGN.md §5, Flow screens): the address and login forms, the document slots and the order form
   each sit in a white Box on the grey page, under the page's heading and lead. */
.documents { margin-top: var(--space-3); }

.documents h2 { margin-top: 0; }

/* The page's last link ("Registrera ett annat hus") keeps the documents' distance from what is above it, which on a
   ready report is section 7's disclaimer, not "Dina dokument". */
.report-end { margin-top: var(--space-3); }

/* Documents (DESIGN.md §6, DocumentSlot): one row per PDF in a Box list, status above the form. */
.document-slots { margin: var(--space-2) 0 var(--space-3); }

/* The draft's upload area (DESIGN.md §6, DocumentList): the files as the rows of one Box list, then the upload form in
   its own Box. */
.document-area { margin: var(--space-2) 0 var(--space-3); }

.document-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-2);
}

.document-name { margin-bottom: 0.25rem; overflow-wrap: anywhere; }

.document-kind .field { margin-bottom: var(--space-1); }

.document h3 {
  margin: 0 0 var(--space-1);
}

.document-status { margin-bottom: var(--space-1); }

/* A file still being read or sorted (DIRECTION 2d): the StepList's running icon before the line. */
.document-waiting {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-ink-2);
}

/* The model's sorting of a file (DIRECTION 2d): helper-sized, above the use line, the quote may be long. */
.document-sorted { overflow-wrap: anywhere; }

/* A file nobody could sort (DIRECTION 2-kind): the line asking for its kind reads as the field's error, before the
   select. */
.document-kind-needed .document-sorted { color: var(--c-danger); margin: 0 0 var(--space-1); }

/* A known kind as text (DIRECTION 2-kind): the kind, how it was decided, the use line, then "Fel typ? Ändra". */
.document-kind-known { margin-top: var(--space-1); }

.document-kind-known > p { margin-bottom: 0.25rem; }

.document-change { font-size: var(--fs-small); }

/* "Skapa rapporten" while a file lacks a kind: the files named in a list. */
.order-blocked ul { margin: 0 0 var(--space-1); }

.document > :last-child { margin-bottom: 0; }

/* "Ta bort filen" (DESIGN.md §6, DocumentList): destructive text on its own line at the end of the row, flush left with
   the buttons above it. */
.document-remove { margin-top: 0; }

/* Skapa rapporten: a Box under the documents, its heading at card size like a callout's. */
.order-form h2 {
  margin-top: 0;
  font-size: var(--fs-h3);
}

.order-form .button { margin-top: var(--space-1); }

.order-form { margin-bottom: var(--space-3); }

.form.box > :last-child { margin-bottom: 0; }

.warning {
  display: block;
  color: var(--c-danger);
}

.form-inline { margin-top: var(--space-1); }

.form-inline .field { margin-bottom: var(--space-1); }

/* The error line is always in a slot, so htmx can fill it; it takes no room while empty. */
.field-error:empty { display: none; }

/* While htmx uploads and reads a file (DESIGN.md §6, DocumentSlot) the form carries htmx-request:
   the button is disabled and the progress line shows, with the StepList's running icon. Without
   JavaScript the class never appears, so the line never shows. */
.upload-progress {
  display: none;
  align-items: center;
  gap: 12px;
  margin: var(--space-1) 0 0;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.htmx-request .upload-progress { display: flex; }

/* The StepList's running icon, in the upload progress line and on a busy button. */
.upload-spinner,
.busy-spinner {
  flex: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 2px solid var(--c-line-strong);
  border-top-color: var(--c-accent);
  border-radius: var(--r-pill);
  animation: step-spin 0.9s linear infinite;
}

.field input[type="file"] {
  padding: 0.5rem;
  border-style: dashed;
}

/* Facts: term above its description, as the report's fact rows will read. */
.facts { margin: var(--space-3) 0; }

.facts dt {
  font-weight: 600;
  margin-top: var(--space-2);
}

.facts dd { margin: 0.25rem 0 0; }

.source {
  display: block;
  color: var(--c-ink-3);
  font-size: var(--fs-meta);
}

/* The site footer's top line runs the full width on every page, like the site header's bottom line (DESIGN.md §5);
   its content keeps the column. It sits on the page's own background: white on the landing page, grey elsewhere,
   so a short page has no white strip with grey under it. */
.site-footer {
  border-top: 1px solid var(--c-line);
  color: var(--c-ink-3);
  font-size: var(--fs-small);
}

.site-footer-inner { padding-block: var(--space-2); }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}

@media print {
  .site-header, .site-footer { border: none; }
}

/* Callouts (DESIGN.md §6, Callout): one block the buyer must read before anything else on the page, a Box
   like every other piece of content. A failure is the same Box with a danger border and says so in words. */
.callout {
  margin: 0 0 var(--space-3);
  padding: var(--space-2);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

@media (min-width: 1024px) {
  .callout { padding: 20px; }
}

.callout h2 {
  margin-top: 0;
  font-size: var(--fs-h3);
}

.callout p:last-child { margin-bottom: 0; }

.callout-error { border-color: var(--c-danger); }

/* Success (the login link is sent): the border in the Bra pair's text colour and the StepList's check before the
   heading. Still a white Box, never a filled one. */
.callout-success { border-color: var(--lvl-bra-fg); }

.callout-success h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.callout-success:focus { outline: none; }

.callout-success:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

/* LoginForm once the link is sent (DESIGN.md §6): "Skicka igen" and "Använd en annan e-postadress" in one Box. */
.login-resend p { margin-top: 0; }

.resend-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.resend-wait {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--c-ink-3);
}

.login-other {
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--c-line-soft);
}

/* Report sections and their items: one card per observation, the quote at the bottom as its source. */
.report-section { margin-top: var(--space-3); }

.report-section h2 { margin-top: 0; }

/* Box (DESIGN.md §6): every piece of report content sits in a white rounded box on the grey page. */
.box {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--space-2);
  break-inside: avoid;
}

/* Box, list variant: rows separated by a soft line, none above the first or below the last. */
.box-list { padding: 0 var(--space-2); }

.box-list > * { padding-block: 14px; }

.box-list > * + * { border-top: 1px solid var(--c-line-soft); }

@media (min-width: 1024px) {
  .box { padding: 20px; }
  .box-list { padding: 0 20px; }
}

/* Section 3: InspectionGroups (DESIGN.md §6). One group per level, most serious first, each as wide as the
   column and stacked one after another (owner, 2026-11-04): "Allvarligast" as cards, every other group as a Box
   list shown in full, then "Det här ingick inte" as a muted panel. */
.inspection-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.inspection-groups > * { min-width: 0; }

.inspection-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.inspection-heading {
  margin: 0;
  font-size: var(--fs-lead);
  font-weight: 700;
}

.inspection-heading-hog { color: var(--lvl-hog-fg); }

.inspection-heading-forhojd { color: var(--lvl-forhojd-fg); }

.inspection-heading-bra { color: var(--c-accent); }

.inspection-heading-okant,
.inspection-heading-lag { color: var(--c-ink); }

.inspection-count { font-weight: 400; }

.inspection-list {
  margin: 0;
  list-style: none;
}

.inspection-card h4,
.inspection-row h4 {
  margin: 0;
  padding-top: 2px;
  font-size: var(--fs-body);
  font-weight: 600;
}

.inspection-card .finding-title,
.inspection-row .finding-title { margin-bottom: var(--space-1); }

.inspection-meta {
  margin: 0;
  color: var(--c-ink-2);
  font-size: 14px;
}

/* "Det här ingick inte": muted panel, no border (DESIGN.md §6). */
.not-covered-panel {
  margin: var(--space-2) 0;
  padding: var(--space-2);
  background: var(--c-surface-muted);
  border-radius: var(--r-lg);
}

.not-covered-panel h3 { margin-top: 0; font-size: var(--fs-body); }

.not-covered-panel > :last-child { margin-bottom: 0; }

.glossary-box { margin: var(--space-2) 0; }

.glossary-box h3 { margin-top: 0; }

/* Section 4 (DESIGN.md §6, §7): the EnergyScale with the declaration's figures in one Box, the suggested
   measures in another, side by side once the column is wide enough, one column below that. */
.energy-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.energy-boxes > .box { flex: 1 1 300px; min-width: 0; }

.energy-class-box .facts { margin: var(--space-2) 0 var(--space-1); }

.energy-class-box .facts dt:first-child { margin-top: 0; }

.energy-summary { margin: var(--space-2) 0 0; }

/* EnergyScale: seven equal cells A–G, the house's class taller and dark, centred on the row. */
.energy-scale {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  gap: 4px;
}

.energy-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--c-energy-cell);
  color: var(--c-ink-3);
  font-size: var(--fs-small);
  font-weight: 600;
}

.energy-cell-current {
  height: 48px;
  background: var(--c-ink);
  color: var(--c-surface);
  font-size: 18px;
  font-weight: 700;
}

/* The measures box: a heading, then one row per measure divided by a soft line, as in a Box list. */
.measures-box h3 { margin: 0 0 var(--space-1); }

.measures-box .measures {
  margin: 0;
  padding: 0;
  list-style: none;
}

.measures-box .measures li {
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--c-line-soft);
}

.measures-box .measures li:last-child { padding-bottom: 0; }

.item-body { margin: 0; }

.item-body dt {
  font-weight: 600;
  margin-top: var(--space-1);
}

.item-body dd { margin: 0.125rem 0 0; }

.flag {
  margin: var(--space-2) 0 0;
  padding: var(--space-1) var(--space-2);
  background: var(--c-bg);
  border-left: 4px solid var(--lvl-hog-fg);
  font-weight: 600;
}

.item-quote {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-2);
  border-left: 3px solid var(--c-line);
  color: var(--c-ink-3);
  font-style: italic;
}

.item-quote p { margin-bottom: 0.25rem; }

.item-quote .source { font-style: normal; }

.not-covered,
.measures,
.questions { padding-left: 1.25rem; }

.glossary { margin: 0; }

.glossary dt {
  font-weight: 600;
  margin-top: var(--space-1);
}

.glossary dd { margin: 0.125rem 0 0; }

.not-covered li,
.measures li,
.questions li { margin-bottom: var(--space-1); }

/* Section 6 (DESIGN.md §6 QuestionList): the groups in one Box, each question followed by its
   SourceLine, and "Kopiera frågorna" under the Box. The button needs JavaScript, so it is shown only
   once js/copy-questions.v1.js has marked <html class="js">. */
.question-list h3 { margin: var(--space-2) 0 var(--space-1); font-size: var(--fs-body); }

.question-list h3:first-child { margin-top: 0; }

.question-list > :last-child { margin-bottom: 0; }

.question-text { color: var(--c-ink); }

.question-list .source { display: block; }

.question-copy {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.js .question-copy { display: flex; }

@media print {
  .js .question-copy { display: none; }
}

.copy-questions { flex: none; }

/* Section 7 (DESIGN.md §6 MethodNote): "Spara som pdf" under the disclaimer opens the print dialog through
   js/print-report.v1.js, so like "Kopiera frågorna" it is shown only once <html class="js"> is marked. */
.report-print {
  display: none;
  margin-top: var(--space-3);
}

.js .report-print { display: flex; }

.print-report { flex: none; }

@media print {
  .js .report-print { display: none; }
}

/* "Radera rapporten och dokumenten" (DESIGN.md §6 MethodNote): destructive text under "Spara som pdf", leading to its
   own confirmation page; it works without JavaScript, so unlike the button above it is always shown, but never printed. */
.report-delete {
  margin: var(--space-2) 0 0;
}

@media print {
  .report-delete { display: none; }
}

/* The confirmation page's form stands alone above "Behåll rapporten". */
.delete-report {
  margin: 0 0 var(--space-3);
}

.copy-status {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

/* Section 7's source and unknown lists read like the other lists on the page. */
.sources,
.unknowns { padding-left: 1.25rem; }

.sources li,
.unknowns li { margin-bottom: var(--space-1); }

/* Section 7 (DESIGN.md §6 MethodNote, §7): how we worked in one Box and the sources in a narrower one,
   side by side once the column is wide enough, one column below that; the disclaimer below them as
   quiet text, stated once. */
.method-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.method-boxes > .box { min-width: 0; }

.method-text { flex: 2 1 320px; }

.method-sources { flex: 1 1 240px; }

.method-boxes h3 { margin: var(--space-2) 0 var(--space-1); font-size: var(--fs-body); }

.method-boxes h3:first-child { margin-top: 0; }

.method-boxes .box > :last-child { margin-bottom: 0; }

.method-sources .sources {
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.disclaimer {
  font-size: var(--fs-small);
  color: var(--c-ink-3);
}

.disclaimer h3 { margin: 0 0 var(--space-1); font-size: var(--fs-small); }

.disclaimer p { margin: 0; }

/* Report header (DESIGN.md §5): the only full-width white band, with the status pill, the address,
   the dates and the contents chips. Its content lines up with the page column below it. */
.report-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}

.report-header-inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 20px var(--gutter);
}

.report-header h1 { margin: var(--space-1) 0 4px; }

.report-meta {
  margin: 0 0 4px;
  color: var(--c-ink-2);
  font-size: var(--fs-small);
}

/* Contents chips: links that look like pills, at least 44px tall for a thumb (DESIGN.md §4). */
.toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
}

.toc a:hover { border-color: var(--c-line-strong); color: var(--c-ink); }

/* A chip says the short label; the sidebar (below) says the number and the full heading instead. */
.toc-number, .toc-full { display: none; }

/* Desktop report (DESIGN.md §5): the header band becomes a sidebar (220–260px, not sticky) beside the main
   column (at most 840px) in a wrapping flex row inside the 1180px container. Screen only: print stays one
   column. Below 1024px the header is the full-width band above the column, so the row starts here. */
@media screen and (min-width: 1024px) {
  body:has(.report-header) .site-header-inner,
  body:has(.report-header) .site-footer-inner { max-width: var(--container); }

  main:has(> .report-header) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 var(--space-4);
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    box-sizing: border-box;
  }

  main:has(> .report-header) > .report-header {
    flex: 1 1 220px;
    max-width: 260px;
    background: none;
    border: none;
  }

  main:has(> .report-header) > .content {
    flex: 999 1 560px;
    min-width: 0;
    max-width: var(--main-max);
    margin-inline: 0;
    padding-inline: 0;
  }

  .report-header-inner { max-width: none; padding: var(--space-3) 0; }

  .report-header h1 { font-size: var(--fs-h1); }

  /* The contents as a list down the sidebar under a line, as in the sketch: one link per line, "2 Risker på
     platsen", the same 44px target as the chips. */
  .toc { margin-top: var(--space-3); border-top: 1px solid var(--c-line); }

  .toc ul { flex-direction: column; gap: 2px; margin-top: var(--space-2); }

  .toc-number, .toc-full { display: inline; }

  .toc-short { display: none; }

  .toc a {
    display: flex;
    gap: var(--space-1);
    padding: 0 12px;
    border-color: transparent;
    border-radius: var(--r-md);
    background: none;
    font-size: var(--fs-body);
  }

  .toc a:hover { border-color: transparent; background: var(--c-surface); }

  .report-section { margin-top: 56px; }

  .report-section:first-child { margin-top: var(--space-3); }
}

/* Section 1: the verdict, then one FindingCard per priority (DESIGN.md §6). */
.verdict {
  font-size: var(--fs-lead);
  font-weight: 600;
}

.finding-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: var(--space-2) 0;
  padding: 0;
  list-style: none;
}

.finding-card p { margin: 0 0 12px; }

.finding-card > :last-child { margin-bottom: 0; }

.finding-card .source { margin-top: 12px; }

/* An unknown level is told apart without colour: the card's border is dashed like its badge. */
.finding-card-unknown { border: 1px dashed var(--lvl-okant-border); }

/* Badge and title share a row; a title that wraps keeps the badge beside its first line. */
.finding-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.finding-title h3 { margin: 0; padding-top: 2px; }

/* Section 2: one Box list of RiskRows (DESIGN.md §6). The row follows its own width, not the viewport's:
   narrow, the badge sits right of the title and the source below the text; from 480px the badge takes
   a fixed column on the left; from 640px the source takes a fixed 190px column on the right. */
.risk-list {
  margin: var(--space-2) 0;
  list-style: none;
  container-type: inline-size;
}

.risk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title badge"
    "text text"
    "source source";
  gap: 4px 12px;
  break-inside: avoid;
}

.risk-row .level-badge { grid-area: badge; align-self: start; }

.risk-row h3 {
  grid-area: title;
  margin: 0;
  padding-top: 2px;
  font-size: var(--fs-lead);
  font-weight: 600;
  letter-spacing: normal;
}

.risk-text { grid-area: text; color: var(--c-ink-2); }

.risk-text p { margin: 0 0 4px; }

.risk-text > :last-child { margin-bottom: 0; }

.risk-source { grid-area: source; margin: 4px 0 0; }

@container (min-width: 480px) {
  .risk-row {
    grid-template-columns: var(--badge-w) minmax(0, 1fr);
    grid-template-areas:
      "badge title"
      "badge text"
      "badge source";
    column-gap: 16px;
  }
}

@container (min-width: 640px) {
  .risk-row {
    grid-template-columns: var(--badge-w) minmax(0, 1fr) 190px;
    grid-template-areas:
      "badge title source"
      "badge text source";
  }

  .risk-source { margin: 0; text-align: right; }
}

/* LevelBadge (DESIGN.md §6): a fixed 72px width, so the text beside a badge starts at the same x in
   every list. The colour is a hint, the text is the meaning; Okänt also has a dashed border. */
.level-badge {
  display: inline-block;
  flex: none;
  width: var(--badge-w);
  padding: 4px 0;
  border-radius: var(--r-sm);
  text-align: center;
  font-size: var(--fs-meta);
  font-weight: 700;
  line-height: 1.5;
}

.level-badge::first-letter { text-transform: uppercase; }

.level-hog { background: var(--lvl-hog-bg); color: var(--lvl-hog-fg); }

.level-forhojd { background: var(--lvl-forhojd-bg); color: var(--lvl-forhojd-fg); }

.level-lag { background: var(--lvl-lag-bg); color: var(--lvl-lag-fg); }

.level-notera { background: var(--lvl-notera-bg); color: var(--lvl-notera-fg); }

.level-okant { padding: 3px 0; background: var(--lvl-okant-bg); color: var(--lvl-okant-fg); border: 1px dashed var(--lvl-okant-border); }

.level-bra { background: var(--lvl-bra-bg); color: var(--lvl-bra-fg); }

/* Pills (DESIGN.md §6): status words, 12px/600 on a rounded pill; the AI-bedömning label is a neutral pill. */
.pill,
.ai-label {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--c-surface-muted);
  color: var(--c-ink-2);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.pill-success { background: var(--c-accent-soft); color: var(--c-accent); }

@media print {
  .inspection-groups .box { border-color: var(--c-line-strong); }
  .notice, .document form, .document-upload, .site-footer p, .toc { display: none; }
  /* A4 (DESIGN.md §5): one column, boxes keep their border and are not split across pages, body ≥ 11pt. */
  body { font-size: max(var(--fs-body), 11pt); }
  .box, .finding-card, .risk-row, .inspection-row, .not-covered-panel, .glossary dd, .questions li { break-inside: avoid; }
  .report-section h2, .report-section h3 { break-after: avoid; }
  .report-header { border-bottom: none; }
  /* Levels and labels keep their fill on paper, where browsers otherwise drop backgrounds. */
  .level-badge, .pill, .ai-label, .energy-cell { print-color-adjust: exact; }
}

/* Owner view (DESIGN.md §5, Owner view): on the grey page in the 1180px container, like the landing page, since
   its tables want the width; the summary, every table and every trace list sit in Boxes. Read on a desktop more
   often than a phone, but it must still wrap: a table wider than a phone scrolls inside its Box, never the page. */
body:has(.admin) .site-header-inner,
body:has(.admin) .content,
body:has(.admin) .site-footer-inner { max-width: var(--container); }

.admin .box { margin-top: var(--space-2); }

.admin-summary dt { margin-top: 0; }

.table-box {
  padding-block: 0;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.table th,
.table td {
  text-align: left;
  vertical-align: top;
  padding: 14px var(--space-2) 14px 0;
  border-bottom: 1px solid var(--c-line-soft);
}

.table th:last-child,
.table td:last-child { padding-right: 0; }

.table tbody tr:last-child td { border-bottom: none; }

.table th { font-weight: 600; color: var(--c-ink-3); white-space: nowrap; }

.table .number { white-space: nowrap; }

/* A cell with a long reason keeps a readable width; on a phone the table scrolls inside its Box instead. */
.table .reason { min-width: 14rem; }

.facts-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.facts-row > div { min-width: 8rem; }

.trace { margin-top: var(--space-3); }

.trace h2 { margin-bottom: 0; }

/* A section links to its model call (#anrop-…); the call lands with a little room above it, not on the edge. */
.trace-items > .trace-item { scroll-margin-top: var(--space-2); }

.trace-item h3 { margin: 0 0 var(--space-1); font-size: var(--fs-h3); }

.trace-item .facts { margin: 0 0 var(--space-1); }

.trace-item .facts dt { margin-top: 0; }

.detail { color: var(--c-ink-3); font-size: var(--fs-small); overflow-wrap: anywhere; }

.trace-item > :last-child { margin-bottom: 0; }

details { margin: var(--space-1) 0; }

summary { cursor: pointer; font-weight: 600; }

pre {
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--fs-meta);
  background: var(--c-surface-muted);
  padding: var(--space-1);
  border-radius: var(--r-sm);
  max-height: 32rem;
}

code { font-size: var(--fs-small); }

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-nav > a { font-size: var(--fs-small); color: var(--c-ink-2); }

.site-nav .form-inline {
  margin: 0;
}

/* After the rule above, so print wins over its display: flex (DESIGN.md §5: no header buttons in print). */
@media print {
  .site-nav { display: none; }
}

/* StepList (DESIGN.md §6): the worker's steps while a report is made, an icon column and the label.
   The icon is drawn in CSS; the state is also a word for screen readers, so the icon is never the only signal. */
.step-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.step {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 12px;
  align-items: start;
  padding-block: 6px;
}

.step-icon {
  grid-row: 1 / span 2;
  position: relative;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid var(--c-line-strong);
  border-radius: var(--r-pill);
}

.step-label { color: var(--c-ink); }

.step-note {
  grid-column: 2;
  font-size: var(--fs-small);
  color: var(--c-ink-3);
}

.step-waiting .step-label { color: var(--c-ink-3); }

.step-running .step-icon {
  border-top-color: var(--c-accent);
  animation: step-spin 0.9s linear infinite;
}

.step-running .step-label { font-weight: 600; }

/* The success icon (LoginForm's confirmation) is the same check as a finished step. */
.success-icon {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 2px solid;
  border-radius: var(--r-pill);
}

.step-done .step-icon,
.success-icon {
  background: var(--lvl-bra-bg);
  border-color: var(--lvl-bra-fg);
}

.step-done .step-icon::after,
.success-icon::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid var(--lvl-bra-fg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.step-failed .step-icon {
  background: var(--lvl-hog-bg);
  border-color: var(--c-danger);
}

.step-failed .step-icon::after,
.step-skipped .step-icon::after {
  position: absolute;
  inset: 0;
  font-size: var(--fs-meta);
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.step-failed .step-icon::after { content: "!"; color: var(--c-danger); }

.step-skipped .step-icon { border-style: dashed; }

.step-skipped .step-icon::after { content: "–"; color: var(--c-ink-3); }

.step-skipped .step-label { color: var(--c-ink-2); }

@keyframes step-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .step-running .step-icon, .upload-spinner, .busy-spinner { animation: none; }
}

.step-list-frame { margin: 0; }

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