/* Active standing test: designalternativ A, "Journalen".
   Delad stilmall för /, /upload/ och /privacy/. Ren CSS, inga externa anrop. */

:root {
  --color-bg: #FBF9F4;
  --color-text: #2B2B28;
  --color-accent: #2F5D62;
  --color-accent-soft: #E4EDE9;
  --color-border: #DDD6C9;
  --color-error-bg: #F5E9E4;
  --color-error-text: #7A3B22;

  --font-serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* En enda typskala för alla tre sidorna */
  --fs-1: 16px;
  --fs-2: 18px;
  --fs-3: 20px;
  --fs-4: 24px;
  --fs-5: 32px;
  --fs-6: 48px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;

  /* A combined categorical palette built from five of ggsci's palettes
     (npg, aaas, nejm, jama, jco), 27 colours, used in this fixed order
     wherever more than one recording or file is drawn as its own
     curve: the landing page hero figure (below, --palette-1 through
     --palette-22, one curve each) and /upload/'s pooled timeseries
     figure, legend and overview table (up to --palette-10 for
     MAX_FILES; see docs/assets/report/figures.js, which reads these
     custom properties at runtime, probing upward until one is
     undefined, so both the list and its length are defined here once,
     never duplicated as a JS literal). Curve 1 gets --palette-1 and so
     on; never reorder or renumber these once a curve is live
     somewhere, or that curve's colour changes underneath it.

     Replaces the previous IGV palette (ggsci::pal_igv()): several of
     its colours read too faintly as a thin line at 0.6 opacity against
     this page's background, clearest at the former --palette-4 and
     --palette-7, and it carried outright duplicates. The 45 colours
     across pal_npg("nrc"), pal_aaas("default"), pal_nejm("default"),
     pal_jama("default") and pal_jco("default") were pared down to
     these 27 by dropping near duplicate colours (keeping the
     better contrasting one of each pair or group) and colours whose
     contrast against the hero's background gradient falls too low at
     0.6 opacity, then ordered so that curves close together in number
     never get similar colours. Full working in
     tools/palette-preview/report.txt. */
  --palette-1: #DC0000;
  --palette-2: #00A1D5;
  --palette-3: #631879;
  --palette-4: #8F7700;
  --palette-5: #1B1919;
  --palette-6: #BB0021;
  --palette-7: #00A087;
  --palette-8: #0072B5;
  --palette-9: #E18727;
  --palette-10: #7E6148;
  --palette-11: #EE4C97;
  --palette-12: #20854E;
  --palette-13: #3B4992;
  --palette-14: #E64B35;
  --palette-15: #6F99AD;
  --palette-16: #A20056;
  --palette-17: #3B3B3B;
  --palette-18: #3C5488;
  --palette-19: #BC3C29;
  --palette-20: #008280;
  --palette-21: #80796B;
  --palette-22: #8491B4;
  --palette-23: #003C67;
  --palette-24: #A73030;
  --palette-25: #6A6599;
  --palette-26: #4A6990;
  --palette-27: #CD534C;
}

* {
  box-sizing: border-box;
}

/* Utan detta vinner t.ex. .button (display: inline-flex) över webbläsarens
   inbyggda [hidden] regel, eftersom författarstilar alltid slår
   webbläsarens egna oavsett specificitet. */
[hidden] {
  display: none !important;
}

html {
  /* Tillåt pinch-zoom och webbläsarens egen textskalning */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--color-text);
  font-weight: 600;
  line-height: 1.25;
  margin-top: 0;
}

h1 { font-size: var(--fs-6); line-height: 1.15; }
h2 { font-size: var(--fs-5); }
h3 { font-size: var(--fs-4); }
h4 { font-size: var(--fs-3); }

p {
  margin-top: 0;
  margin-bottom: var(--space-2);
  max-width: 65ch;
}

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

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

a:not(.button) {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Fokusindikator: alltid synlig, tas aldrig bort */
a:focus-visible,
button:focus-visible,
input:focus-visible,
label:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Ikoner --- */
.icon {
  width: 1.4em;
  height: 1.4em;
  flex-shrink: 0;
  color: var(--color-accent);
}

.icon-lg {
  width: 40px;
  height: 40px;
}

/* --- Layout: sidhuvud, gemensamt för alla sidor --- */
.site-header {
  border-bottom: 1px solid var(--color-border);
}

.site-header .header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.site-title {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-serif);
  font-size: var(--fs-3);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
}

.site-title:hover {
  color: var(--color-accent);
}

.site-nav {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-size: var(--fs-1);
  padding: var(--space-1) 4px;
}

.site-nav a:hover {
  text-decoration: underline;
}

/* --- Sidfot, gemensamt --- */
.site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-5);
}

.site-footer .footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-3);
  font-size: var(--fs-1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  justify-content: center;
}

.site-footer .footer-inner a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-1) 2px;
}

.site-footer p {
  margin: 0;
  color: var(--color-text);
}

/* Knapp / länkstil för primära handlingar. Delas med /upload/. */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: 10px 20px;
  background: var(--color-accent);
  color: var(--color-bg);
  border: 1px solid var(--color-accent);
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: #26494D;
  border-color: #26494D;
}

.button .icon {
  color: currentColor;
  width: 1.1em;
  height: 1.1em;
}

.button-secondary {
  background: transparent;
  color: var(--color-accent);
}

.button-secondary:hover {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* ============================================================
   LANDNINGSSIDA
   Ljus banner (toppmeny och pulsgraf) följt av en kort, egen
   introsektion. Egna klasser, fristående från sidhuvud, sidfot
   och knappstilar som delas med /upload/ och /privacy/, så att
   de sidorna inte påverkas av detta.
   ============================================================ */

.landing-banner {
  --chart-grid: #E4DFD2;
  --chart-muted: #5A5A54;

  position: relative;
  background: radial-gradient(120% 100% at 50% 0%, #FFFFFF 0%, #F8F6EF 55%, #E9EFEA 100%);
}

.landing-banner__bar {
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.landing-banner__nav {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.landing-banner__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-1) 4px;
  color: var(--color-text);
  font-size: var(--fs-1);
  text-decoration: none;
}

.landing-banner__nav a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.landing-banner__intro {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-3) var(--space-3) var(--space-2);
}

.landing-banner__heading {
  margin: 0 0 var(--space-2);
}

.landing-banner__subhead {
  font-size: var(--fs-2);
  color: var(--chart-muted);
  line-height: 1.5;
  max-width: none;
  margin: 0;
}

@media (max-width: 640px) {
  .landing-banner__heading {
    font-size: var(--fs-5);
  }
}

.landing-banner__chart {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-3) var(--space-4);
}

.landing-banner__chart-meta {
  display: grid;
  /* The two outer columns are the tag's fixed rendered width, so the
     middle (legend) column is always truly centered on the row. */
  grid-template-columns: 140px 1fr 140px;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
}

.landing-banner__chart-meta .landing-banner__chart-tag {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.landing-banner__chart-meta .landing-banner__chart-legend {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}

/* Centrerad på figurens uppresningslinje (x = 420 av viewBox 0 0 800 480,
   se chart-marker-line/chart-marker-label i docs/index.html), inte på
   .landing-banner__chart-meta radens egen mittpunkt (x = 400), som är
   vad grid-column: 2 med symmetriska 140px-flanker annars ger. Spänner
   därför hela raden, som delar vänsterkant och bredd med SVG:ns egen
   innehållsyta: justify-self: stretch (i stället för start) ger den
   en odiskutabel, fast bredd att räkna de faktiska pilarnas position
   mot i .landing-banner__chart-browser-inner nedan. En bredd satt via
   start/fit-content här löser i Chrome inte ut procentandelar korrekt
   för ett barn positionerat med position: relative.
   min-width: 0 tar bort ett rutnätsobjekts normala automatiska
   minimibredd (grundat på innehållets egen bredd), som annars vinner
   över justify-self: stretch och låter den här raden svämma över på
   smala skärmar även om .landing-banner__chart-browser-inner nedan i
   sig får plats. */
.landing-banner__chart-meta .landing-banner__chart-browser {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: stretch;
  min-width: 0;
}

@media (max-width: 640px) {
  .landing-banner__chart-meta {
    grid-template-columns: 1fr;
  }

  .landing-banner__chart-meta .landing-banner__chart-tag {
    grid-column: 1;
    grid-row: 1;
  }

  .landing-banner__chart-meta .landing-banner__chart-legend {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }

  .landing-banner__chart-meta .landing-banner__chart-browser {
    grid-row: 2;
  }
}

.landing-banner__chart-tag {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-bg);
  background: var(--color-accent);
  border-radius: 3px;
  padding: 3px 8px;
}

.landing-banner__chart svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 480;
}

.landing-banner__chart .chart-grid {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.landing-banner__chart .chart-tick,
.landing-banner__chart .chart-axis-title,
.landing-banner__chart .chart-phase-label {
  font-family: var(--font-sans);
  fill: var(--chart-muted);
}

.landing-banner__chart .chart-tick {
  font-size: 15px;
}

.landing-banner__chart .chart-axis-title {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.landing-banner__chart .chart-phase-label {
  font-size: 14px;
}

.landing-banner__chart .chart-marker-line {
  stroke: var(--color-text);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.landing-banner__chart .chart-marker-label {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  fill: var(--color-text);
}

.landing-banner__chart .chart-curve {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-opacity: 0.6;
  transition: stroke-opacity 0.2s ease;
  vector-effect: non-scaling-stroke;
}

.landing-banner__chart .chart-curve--1 { stroke: var(--palette-1); }
.landing-banner__chart .chart-curve--2 { stroke: var(--palette-2); }
.landing-banner__chart .chart-curve--3 { stroke: var(--palette-3); }
.landing-banner__chart .chart-curve--4 { stroke: var(--palette-4); }
.landing-banner__chart .chart-curve--5 { stroke: var(--palette-5); }
.landing-banner__chart .chart-curve--6 { stroke: var(--palette-6); }
.landing-banner__chart .chart-curve--7 { stroke: var(--palette-7); }
.landing-banner__chart .chart-curve--8 { stroke: var(--palette-8); }
.landing-banner__chart .chart-curve--9 { stroke: var(--palette-9); }
.landing-banner__chart .chart-curve--10 { stroke: var(--palette-10); }
.landing-banner__chart .chart-curve--11 { stroke: var(--palette-11); }
.landing-banner__chart .chart-curve--12 { stroke: var(--palette-12); }
.landing-banner__chart .chart-curve--13 { stroke: var(--palette-13); }
.landing-banner__chart .chart-curve--14 { stroke: var(--palette-14); }
.landing-banner__chart .chart-curve--15 { stroke: var(--palette-15); }
.landing-banner__chart .chart-curve--16 { stroke: var(--palette-16); }
.landing-banner__chart .chart-curve--17 { stroke: var(--palette-17); }
.landing-banner__chart .chart-curve--18 { stroke: var(--palette-18); }
.landing-banner__chart .chart-curve--19 { stroke: var(--palette-19); }
.landing-banner__chart .chart-curve--20 { stroke: var(--palette-20); }
.landing-banner__chart .chart-curve--21 { stroke: var(--palette-21); }
.landing-banner__chart .chart-curve--22 { stroke: var(--palette-22); }

/* Markering sker enbart via bläddringskontrollen i hero-browser.js, som
   sätter chart-curve--selected på en kurva och has-selected-curve på
   figuren; ingen hovring är inblandad. Den markerade kurvan får full
   opacitet, i övrigt oförändrad, samma linjebredd som övriga
   kurvor. */
.landing-banner__chart.has-selected-curve .chart-curve:not(.chart-curve--selected) {
  stroke-opacity: 0.15;
}

.landing-banner__chart .chart-curve--selected {
  stroke-opacity: 1;
}

.landing-banner__chart .chart-timeline-dotted {
  stroke: var(--chart-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1 6;
}

.landing-banner__chart .chart-timeline-solid {
  stroke: var(--color-text);
  stroke-width: 2;
}

.landing-banner__chart .chart-timeline-arrow {
  fill: var(--color-text);
}

.landing-banner__chart .chart-timeline-dot {
  stroke: #FFFFFF;
  stroke-width: 1.5;
}

.landing-banner__chart-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--chart-muted);
}

.landing-banner__chart-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.landing-banner__chart-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.landing-banner__chart-legend-swatch--1 { background: var(--palette-1); }
.landing-banner__chart-legend-swatch--2 { background: var(--palette-2); }
.landing-banner__chart-legend-swatch--3 { background: var(--palette-3); }
.landing-banner__chart-legend-swatch--4 { background: var(--palette-4); }
.landing-banner__chart-legend-swatch--5 { background: var(--palette-5); }
.landing-banner__chart-legend-swatch--6 { background: var(--palette-6); }
.landing-banner__chart-legend-swatch--7 { background: var(--palette-7); }
.landing-banner__chart-legend-swatch--8 { background: var(--palette-8); }
.landing-banner__chart-legend-swatch--9 { background: var(--palette-9); }
.landing-banner__chart-legend-swatch--10 { background: var(--palette-10); }
.landing-banner__chart-legend-swatch--11 { background: var(--palette-11); }
.landing-banner__chart-legend-swatch--12 { background: var(--palette-12); }
.landing-banner__chart-legend-swatch--13 { background: var(--palette-13); }
.landing-banner__chart-legend-swatch--14 { background: var(--palette-14); }
.landing-banner__chart-legend-swatch--15 { background: var(--palette-15); }
.landing-banner__chart-legend-swatch--16 { background: var(--palette-16); }
.landing-banner__chart-legend-swatch--17 { background: var(--palette-17); }
.landing-banner__chart-legend-swatch--18 { background: var(--palette-18); }
.landing-banner__chart-legend-swatch--19 { background: var(--palette-19); }
.landing-banner__chart-legend-swatch--20 { background: var(--palette-20); }
.landing-banner__chart-legend-swatch--21 { background: var(--palette-21); }
.landing-banner__chart-legend-swatch--22 { background: var(--palette-22); }

/* Positioneras mot x = 420 av 800, samma uppresningslinje som ovan,
   räknat mot .landing-banner__chart-browser:s nu fasta bredd. Space
   till höger om den punkten, (800 - 420) / 800 av bredden, är det som
   begränsar hur bred den här delen får bli innan pilarna går utanför
   till höger: högst dubbelt det, annars svämmar den över vid smala
   skärmar. width: fit-content håller den vid pilarnas och textytans
   egen bredd i stället för att, som en vanlig flex-behållare, fylla
   ut hela den sträckta .landing-banner__chart-browser. */
.landing-banner__chart-browser-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  position: relative;
  left: calc(420 / 800 * 100%);
  transform: translateX(-50%);
  max-width: calc(2 * (800 - 420) / 800 * 100%);
}

.landing-banner__chart-browser-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: none;
  color: var(--chart-muted);
  cursor: pointer;
}

.landing-banner__chart-browser-btn:hover {
  color: var(--color-text);
  border-color: var(--color-text);
}

/* Högre specificitet krävs för att vinna över
   ".landing-banner__chart svg" (width: 100%; aspect-ratio: 800/480),
   som annars sträcker ut den här lilla pilikonen till figurens
   bredd. */
.landing-banner__chart-browser .landing-banner__chart-browser-icon {
  display: block;
  width: 18px;
  height: 18px;
}

/* Bredden sätts av hero-browser.js, uppmätt mot den bredaste av alla
   texter kontrollen faktiskt kan visa, så att pilarna inte flyttar sig
   när texten växlar mellan ett mätningsnamn och den neutrala texten.
   flex-grow: 0 håller den vid den uppmätta bredden i stället för att
   fylla ut resten av raden; flex-shrink: 1 låter den ändå krympa (och,
   eftersom white-space aldrig sätts till nowrap, radbryta) om 44
   gånger 44 pixlar stora pilknappar annars inte får plats vid smala
   skärmar. */
.landing-banner__chart-browser-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 0;
  gap: 6px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--chart-muted);
  text-align: center;
}

.landing-banner__chart-browser-text .landing-banner__chart-legend-swatch {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .landing-banner__chart .chart-tick,
  .landing-banner__chart .chart-phase-label,
  .landing-banner__chart .chart-marker-label {
    font-size: 12px;
  }

  .landing-banner__chart .chart-curve {
    stroke-width: 1.5;
  }
}

/* Vägen vidare: tre kort, ett per undersida. Avgränsad från
   bannern med en tydlig gräns och egen yta. */
.landing-intro {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: var(--space-5) var(--space-3);
  text-align: center;
}

/* Staplas på smal skärm. */
.landing-cards {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--space-3);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  text-align: left;
}

.landing-card {
  display: block;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
  text-decoration: none;
  color: var(--color-text);
}

.landing-card:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.landing-card h2 {
  font-size: var(--fs-4);
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}

.landing-card p {
  font-size: var(--fs-1);
  margin-bottom: 0;
  color: inherit;
}

@media (max-width: 720px) {
  .landing-cards {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   /upload/ och /privacy/: en kolumn, centrerad
   ============================================================ */

.page-main {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-5);
}

.page-intro {
  font-size: var(--fs-2);
}

.draft-notice {
  max-width: 720px;
  margin: var(--space-2) auto 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-accent-soft);
  border-radius: 3px;
  font-size: var(--fs-1);
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
}

.draft-notice .icon {
  margin-top: 2px;
  color: var(--color-accent);
}

/* Skillnaden mellan filens längd och de angivna faslängderna. Sätts så
   snart filen är inläst och stannar synlig genom bearbetning och
   resultat, oavsett hur liten skillnaden är. Se app.js. */
.duration-notice {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-accent-soft);
  font-size: var(--fs-1);
}

.duration-notice:empty {
  display: none;
}

/* 15 till 30 sekunders avvikelse, eller ett kontrollsteg som redan
   passerats: samma ruta, men med en bredare kantlinje så att den syns
   tydligare än den rena informationsnivån under 15 sekunder. Aldrig
   den enda skillnaden i sig, texten säger alltid vad som gäller. */
.duration-notice--emphasis {
  border-left-width: 4px;
  border-left-color: var(--color-accent);
}

.state-block {
  padding-top: var(--space-4);
  padding-bottom: var(--space-1);
  border-top: 1px solid var(--color-border);
}

.state-block:first-of-type {
  border-top: none;
}

.state-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}

/* --- Formulär --- */
.field {
  margin-bottom: var(--space-3);
}

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.field .hint {
  display: block;
  font-size: var(--fs-1);
  font-weight: 400;
  opacity: 0.8;
  margin-top: 4px;
}

input[type="file"] {
  display: block;
  width: 100%;
  max-width: 420px;
  min-height: 44px;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

/* Hela blocket med gemensamma faslängdsfält, dolt tills en fil är vald.
   Se app.js. */
.duration-fields-block {
  margin-bottom: var(--space-3);
}

/* Visas bara när fler än en fil är vald: klargör att fälten nedan är
   ett sätt att fylla i alla rader i tabellen på en gång, inte
   ytterligare värden utöver dem. Se app.js. */
.phase-fields-all-note {
  font-weight: 600;
  color: var(--color-accent);
  margin: 0 0 var(--space-2);
}

.duration-fields {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.duration-fields .field {
  flex: 1 1 180px;
  margin-bottom: 0;
}

.info-box {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: var(--space-2);
  margin: var(--space-3) 0;
  font-size: var(--fs-1);
}

.info-box .icon {
  margin-top: 2px;
}

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

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

/* Faslängd per fil, visas direkt när fler än en fil är vald. En rad per
   fil i stället för en ruta per fil (jämför .check-phase-fieldset) håller
   detta läsbart även vid tio filer: en synlig kolumnrubrik istället för
   upprepad etikettext per rad, men varje fält har ändå en egen, unik,
   osynlig etikett som nämner filnamnet för skärmläsare. */
.file-phase-fields {
  margin-bottom: var(--space-3);
}

.file-phase-fields h3 {
  margin-bottom: var(--space-1);
}

.file-phase-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: var(--space-2);
}

.file-phase-table {
  width: 100%;
  min-width: 260px;
  border-collapse: collapse;
}

.file-phase-table th,
.file-phase-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
}

.file-phase-table th {
  font-size: var(--fs-1);
  font-weight: 600;
}

.file-phase-name span {
  display: block;
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-phase-table input[type="number"] {
  width: 4.5em;
  min-height: 36px;
  padding: 4px 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

@media (max-width: 480px) {
  .file-phase-table th,
  .file-phase-table td {
    padding: 6px 4px;
  }

  .file-phase-name span {
    max-width: 32vw;
  }

  .file-phase-table input[type="number"] {
    width: 3.6em;
  }
}

/* Kontrollsteget: en fieldset per fas, så etiketten "Minuter"/"Sekunder"
   alltid läses tillsammans med vilken fas den hör till, för alla, inte
   bara genom att stå bredvid varandra på skärmen. */
.check-phase-group {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-3) 0;
}

.check-phase-fieldset {
  flex: 1 1 220px;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: var(--space-2);
  margin: 0;
}

.check-phase-fieldset legend {
  font-weight: 600;
  padding: 0 4px;
}

.check-phase-fieldset .duration-fields {
  gap: var(--space-2);
}

.check-phase-fieldset .field {
  flex: 1 1 90px;
}

/* One .result-panel per deviating file; with only one file, the check
   step still ends up as exactly one such panel, unchanged from before
   several files were possible. */
.check-file-block {
  margin-bottom: var(--space-3);
}

.check-file-block:last-child {
  margin-bottom: 0;
}

/* --- Bearbetning --- */
.processing-panel {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
}

.processing-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.spinner {
  width: 28px;
  height: 28px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* Vilande som standard. Roterar bara om besökaren inte bett om minskad rörelse. */
@media (prefers-reduced-motion: no-preference) {
  .spinner {
    animation: spin 1.1s linear infinite;
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.processing-status {
  font-weight: 600;
  margin: 0;
}

/* --- Lyckad / fel --- */
.result-panel {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.result-panel.error {
  background: var(--color-error-bg);
}

.result-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.result-heading .icon-lg.error {
  color: var(--color-error-text);
}

.result-panel.error h3 {
  color: var(--color-error-text);
}

.result-panel p:last-of-type {
  margin-bottom: 0;
}

.error-message-list {
  margin: 0;
  padding-left: 1.2em;
}

.error-message-list li {
  margin-bottom: var(--space-1);
}

.error-message-list li:last-child {
  margin-bottom: 0;
}

.result-actions {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* --- /privacy/ och /framework/: rubrikförsedda avsnitt, avdelade med
   en linje ovanför, i en enda smal kolumn (.page-main). --- */
.text-page-section {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.text-page-section:first-of-type {
  border-top: none;
}

.placeholder-text {
  font-style: italic;
  opacity: 0.8;
}

/* ============================================================
   /new/: timer med ljud och visuell fassignal
   ============================================================ */

.timer-setup-fields {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.timer-setup-fields .field {
  flex: 1 1 180px;
  margin-bottom: 0;
}

input[type="number"] {
  display: block;
  width: 100%;
  max-width: 160px;
  min-height: 44px;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

.timer-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.timer-run {
  text-align: center;
  padding: var(--space-5) var(--space-3);
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-accent-soft);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.timer-run.is-prep {
  background: var(--color-bg);
  border-color: var(--color-accent);
}

.timer-run.is-standing {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.timer-signal-fieldset {
  border: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.timer-signal-fieldset legend {
  font-weight: 600;
  margin-bottom: 6px;
  padding: 0;
}

.timer-signal-options {
  display: flex;
  gap: var(--space-2) var(--space-3);
  flex-wrap: wrap;
}

.timer-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
}

.timer-radio input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.timer-radio:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.timer-radio input:disabled {
  cursor: not-allowed;
}

.timer-speech-language {
  margin-top: var(--space-2);
}

.timer-speech-language .hint {
  margin-bottom: var(--space-1);
}

.timer-phase-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
  transition: color 0.4s ease;
}

.timer-countdown {
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums;
  font-size: clamp(4rem, 18vw, 7rem);
  line-height: 1;
  margin: 0 0 var(--space-2);
  transition: color 0.4s ease;
}

.timer-run-hint {
  font-size: var(--fs-2);
  margin: 0 auto var(--space-3);
  max-width: 40ch;
  transition: color 0.4s ease;
}

.timer-cancel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  background: transparent;
  color: inherit;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 600;
  cursor: pointer;
  transition: color 0.4s ease, border-color 0.4s ease;
}

.timer-run.is-standing .timer-cancel {
  border-color: var(--color-bg);
}

.timer-cancel:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Fokusindikatorn ska synas mot den mörkare bakgrunden i ståfasen. */
.timer-run.is-standing :focus-visible {
  outline-color: var(--color-bg);
}

.timer-done {
  text-align: center;
  padding: var(--space-5) var(--space-3);
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-accent-soft);
}

.timer-done .icon-lg {
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

/* Fasbytet är sidans enda avsteg från att stå stilla: en snabb,
   odramatisk övertoning. Ingen blinkning, inget som flimrar. */
@media (prefers-reduced-motion: reduce) {
  .timer-run,
  .timer-countdown,
  .timer-run-hint,
  .timer-phase-label,
  .timer-cancel {
    transition: none;
  }
}

/* ============================================================
   /integrations/: rutnätet är en flikuppsättning. Varje kort är en
   tab, fältet under är tabpanelerna. Se docs/assets/integrations.js.
   ============================================================ */

.integration-grid {
  margin: var(--space-3) 0 var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
}

.integration-tile {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
}

.integration-tile:hover {
  border-color: var(--color-accent);
}

/* Vald: skiljs åt med ramtjocklek, fyllnad och en egen ikon i
   hörnet, aldrig bara färg. */
.integration-tile[aria-selected="true"] {
  border-width: 3px;
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  padding: calc(var(--space-2) - 2px);
}

.integration-tile__selected-badge {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-bg);
}

.integration-tile__selected-badge svg {
  width: 14px;
  height: 14px;
}

.integration-tile[aria-selected="true"] .integration-tile__selected-badge {
  display: flex;
}

.integration-tile__logo {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--color-accent-soft);
}

.integration-tile__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

/* Statusmärkning: skiljs åt med ikonform och text, aldrig bara färg. */
.integration-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.integration-status__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.integration-status--checked {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.integration-status--pending {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
  opacity: 0.75;
}

.integration-panel-region {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.integration-panel-placeholder {
  font-style: italic;
  opacity: 0.8;
  margin: 0;
}

.integration-panel p {
  margin: 0;
  max-width: 60ch;
}

.integration-panel:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.integration-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
}

.integration-fields div {
  margin: 0;
}

.integration-fields dt {
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-bottom: 4px;
}

.integration-fields dd {
  margin: 0;
  font-size: var(--fs-1);
}

@media (max-width: 480px) {
  .integration-fields {
    grid-template-columns: 1fr;
  }
}

/* --- Nyttiga hjälpklasser --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}