/* calculator-base.css — DELAD FIL — version 2026-09-21.1
 * Se ZIP-leverans-och-gemensamma-filer-spec.md avsnitt 4.
 * = kanonisk calculator-base.css + calculator-base-TILLAGG-gransvarden-meta.css
 *   (.gransvarden-meta-notice-regler, längst ned).
 */
/* =========================================================================
   calculator-base.css
   FHVmetodik — delad basstilmall för samtliga kalkylatorer.

   KÄLLA: GUI-layout-och-delade-funktioner-spec_v6.md (avsnitt 1–8, 13).
   Detta är INTE en simulering/gissning av temat — det är den faktiska,
   fristående fil som ska laddas upp till
   wp-content/themes/fhvmetodik/css/calculator-base.css och enqueue:as
   en gång per sida (eller inkluderas i varje kalkylators egen
   <style>-tagg, se spec v6 avsnitt 13.3 för de två alternativen).

   Tidigare antog grundspecen att temats EGET style.css redan innehöll
   dessa regler ("Ingen av kalkylatorernas PHP/JS-paket innehåller egen
   CSS för .tool, .tool-column, .container-tools ... de förlitar sig
   helt på temats delade style.css"). Det antagandet var FEL — det
   verkliga temat saknar denna CSS helt, vilket är orsaken till att
   fält staplade sig och .notes-fältet blev smalt när kalkylatorerna
   lades in på fhvmetodik.se. Se spec v6 avsnitt 13 för hela
   felsökningen.

   Laddningsordning: efter Google Fonts/temats egen style.css, FÖRE
   respektive kalkylators <namn>-calc.js. Se avsnitt 9.3 i GUI-layout-
   specen för hela laddningskedjan (math.js, numeric-common.js,
   time-input-common.js, dynamic-value-input.js, denna fil, sedan
   kalkylatorns egen kod).

   VIKTIGT — typsnitt laddas INTE av denna fil (spec v6 avsnitt 13.1):
   <link> till Material Symbols Rounded måste läggas i samma
   enqueue-steg som denna fil, annars renderas .m-icon-elementen som
   ordtext ("add_circle" osv.) i stället för glyfer, oavsett att
   font-family nedan är korrekt satt:
     <link rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. CSS-variabler
   -------------------------------------------------------------------------
   OBS, viktig harmonisering (se spec v6 avsnitt 13.4, öppen punkt 15):
   GUI-layout-specens egna kodexempel använder omväxlande TVÅ olika
   variabel-namnrymder utan att någonsin definiera någondera i ett eget
   :root-block:
     (a) avsnitt 1.1/2.2/5/5.1/7: --brand, --brand-dark, --ink, --muted,
         --line, --bg-soft, --ok, --ok-bg, --warn-bg, --danger, --danger-bg
     (b) avsnitt 3/4 (reglaget, (i)-knappen): --border-strong,
         --border-stronger, --text-primary, --text-secondary,
         --text-accent, --text-danger, --border-danger, --fill-control,
         --surface-1

   Om bara den ena namnrymden hade definierats skulle den andra
   halvans kodexempel (kopierade rakt av ur specen, enligt dess egen
   instruktion "kopieras rakt av — detta är nu den enda sanningen")
   rendera med webbläsarens fallback-värde för odefinierade
   CSS-variabler (transparent/initial) — dvs. reglaget och (i)-knappen
   skulle bli osynliga/felfärgade även om denna fil laddades korrekt.
   Lösningen här: definiera (a) som primär källa och aliasa (b) till
   den, så att BÅDA kodblocken i specen fungerar oförändrat, utan att
   någon av kalkylatorernas redan skrivna kod (som kan använda endera
   namnrymden) behöver ändras.
   ------------------------------------------------------------------------- */
:root {
  /* Primär namnrymd (grundspec / vibrations-/buller-mönstret) */
  --brand: #34398c;
  --brand-dark: #2a2e70;
  --ink: #232733;
  --muted: #5c6370;
  --line: #e1e4e8;
  --bg-soft: #f6f7f9;
  --ok: #2e9e5b;
  --ok-bg: #eaf7ef;
  --warn: #b8860b;
  --warn-bg: #fdf3d9;
  --danger: #c0392b;
  --danger-bg: #fbe8e6;

  /* Radhöjd (avsnitt 1) — sammanfaller medvetet med 44px touch target */
  --row-h: 44px;

  /* Alias: reglagets/(i)-knappens namnrymd (avsnitt 3/4) mappad mot
     variablerna ovan, se förklaringen i kommentaren överst i blocket. */
  --border-strong: #c7cbd1;
  --border-stronger: rgba(35, 39, 51, 0.55);
  --fill-control: #ececf0;
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --text-accent: var(--brand);
  --text-danger: var(--danger);
  --border-danger: var(--danger);
  --surface-1: #ffffff;
  --surface-2: #ffffff;
}

/* -------------------------------------------------------------------------
   0.1 Sidnivå-element som saknades helt i tidigare versioner av specen
   -------------------------------------------------------------------------
   Detta är den DIREKTA förklaringen till felrapporten som föranledde
   denna fil: varken v3.0 eller v4.0 av GUI-layout-specen definierade
   NÅGONSIN .form-calculator/.notes/.global-settings/.container —
   specen gick rakt från "radlayout" (avsnitt 2) till detaljer om
   enskilda komponenter, och antog tyst att sidnivå-behållarna redan
   var stylade av temat (samma felaktiga antagande som grundspecen
   gjorde generellt, se filens huvudkommentar). Utan dessa regler
   använder en <textarea class="notes"> webbläsarens default-bredd
   (~20 tecken) i stället för hela formulärbredden — exakt det
   observerade felet.
   ------------------------------------------------------------------------- */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.form-calculator {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  box-sizing: border-box;
}
.form-calculator * { box-sizing: border-box; }

.notes {
  display: block;
  width: 100%;
  min-height: 90px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  resize: vertical;
  margin: 6px 0 14px;
}
.notes::placeholder { color: var(--muted); }

.privacy-note,
.privacy-notice {
  font-size: 12.5px;
  color: var(--muted);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 12px 0;
}
.privacy-notice {
  background: #eef0fb;
  border-color: #c7cbf5;
  color: var(--ink);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.privacy-notice-clinical { background: var(--danger-bg); border-color: var(--danger); }

/* Global inställningspanel (T/Tryck, Konfidensgrad, Sig.siffror m.fl.) */
.global-settings {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 18px;
}
@media (min-width: 576px) {
  .global-settings { flex-direction: row; flex-wrap: wrap; }
  .global-settings label { flex: 1 1 200px; }
}
.global-settings label,
.tool-column label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

/* Typ-väljare (radioknappsgrupper): .vibration-type, .uncertainty-type,
   .current-type m.fl. — samma visuella mönster i hela familjen. */
.vibration-type,
.uncertainty-type,
.current-type {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 14px;
}
.vibration-type label,
.uncertainty-type label,
.current-type label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--row-h);
  cursor: pointer;
}

.t-breadcrumb {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   1. Grundprincip: enhetlig radhöjd, inkl. 1.2 vertikal nivå (spec v6 avsnitt 1)
   ------------------------------------------------------------------------- */
.tool select,
.tool input[type="text"]:not(.dv-value),
.tool input[type="time"],
.tool input[type="date"],
.tool input[type="number"] {
  height: var(--row-h);
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
}
.dv-row { display: flex; align-items: center; min-height: var(--row-h); }

/* 1.1 Läsbara/beräknade fält: ljusgrå fyllning, aldrig vit */
input.tool-score,
.result-panel output,
input[readonly] {
  background: #f0f1f4;
  font-weight: 700;
  color: var(--brand-dark);
}

/* 1.2 Vertikal nivå: samtliga fältetiketter i en rad ska ha samma höjd
   (spec v6 avsnitt 1.2) — annars radbryter en etikett olika mycket än
   sin grannkolumns och fälten hamnar på olika Y-position trots att
   .tool redan har align-items:flex-start (avsnitt 2).

   BUGFIX (upptäckt via Luftvolymkalkylator-spec_MERGED.md, "Justering
   (valfritt)" vs. Tid/Delvolym): den tidigare min-height: 20px räckte bara
   för EN textrad. Regeln byggde på ett tyst antagande att ingen etikett
   någonsin radbryter — ett antagande som håller på svenska för de flesta
   korta etiketter, men som en översättning på vilket som helst av de andra
   tio språken kan bryta lika gärna som en snäv kolumnbredd kan. Kontroll av
   samtliga elva språks "Justering (valfritt)"-motsvarighet visar att de
   ligger inom 15–25 tecken på samtliga språk — det är alltså inte ett
   engångsfall för en specifik kolumnbredd, utan ett strukturellt gap i
   1.2-regeln så fort NÅGON etikett i NÅGON kalkylator på NÅGOT språk är för
   lång för sin kolumn.

   Fixen reserverar TVÅ textraders höjd universellt (oavsett om en given
   etikett faktiskt radbryter eller ej) och bottenjusterar texten inom den
   höjden (align-items: flex-end i stället för center). En enradig etikett
   "svävar" då mot botten av samma reserverade yta som en tvåradig etikett
   fyller helt — så input-fältet under hamnar på exakt samma Y-position i
   båda fallen, oavsett radantal. line-height: 1.25 är explicit satt så
   höjdberäkningen (2 × 12.5px × 1.25 ≈ 31px) inte är beroende av ärvd
   line-height från ett föräldraelement; 34px (i stället för exakt 31px)
   ger lite marginal mot att olika typsnitt/webbläsare kan rendera radhöjden
   någon enstaka pixel annorlunda. */
.tool-column > label > span:first-child,
.tool-column .t-breadcrumb {
  display: flex;
  align-items: flex-end;
  min-height: 34px;
  line-height: 1.25;
  margin-bottom: 7px;
}
.result-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 14px 0;
}
@media (min-width: 576px) {
  .result-panel { flex-direction: row; flex-wrap: wrap; }
  .result-panel .result-field { flex: 1 1 160px; }
}
.result-field { display: flex; flex-direction: column; gap: 4px; }

/* -------------------------------------------------------------------------
   2. Radlayout: .container-tools / .tool / .tool-column (avsnitt 2)
   ------------------------------------------------------------------------- */
.container-tools { display: flex; flex-direction: column; gap: 18px; margin-bottom: 8px; }
.tool {
  display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 16px 14px; background: var(--bg-soft);
  position: relative;
}
.tool.template { display: none; }
.tool-column { display: flex; flex-direction: column; min-width: 0; }

@media (min-width: 820px) {
  .tool { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 14px; }
  .tool-column.type     { flex: 0 0 240px; min-width: 0; }
  .tool-column.duration { flex: 0 0 132px; }
  .tool-column.score    { flex: 0 0 84px; }
  .tool-column.level    { flex: 1 1 auto; min-width: 200px; }
  .row-actions          { flex: 0 0 auto; align-self: flex-start; padding-top: 0; }
}
@media (min-width: 640px) and (max-width: 819.98px) {
  .tool { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
  .tool-column.type     { flex: 1 1 45%; }
  .tool-column.level    { flex: 1 1 100%; order: 3; }
  .tool-column.duration { flex: 0 0 132px; }
  .tool-column.score    { flex: 0 0 84px; }
}
@media (max-width: 480px) {
  .container { padding: 0 12px; }
  .form-calculator { padding: 16px; }
  .tool { flex-direction: column; align-items: stretch; }
  .tool-column { min-width: 0; width: 100%; }
  .global-settings { flex-direction: column; gap: 10px; }
  .row-icon,
  .row-actions { flex-wrap: wrap; }
  .result-panel { flex-direction: column; }
}

/* 2.2 Nästlade nivåer: period (yttre) vs. tool/moment (inre) */
.container-periods { display: flex; flex-direction: column; gap: 14px; }
.period {
  border: 1px solid var(--border-strong); border-radius: 12px;
  background: #fff; padding: 18px 18px 16px;
}
.period.template { display: none; }

/* -------------------------------------------------------------------------
   3. "(i)"-knappen (avsnitt 3)
   ------------------------------------------------------------------------- */
.col-label {
  display: flex; align-items: center; gap: 4px; min-height: 20px;
  font-size: 12.5px; font-weight: 700; color: var(--muted);
  margin-bottom: 7px; white-space: nowrap;
}
.info-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.info-btn {
  width: 19px; height: 19px; border-radius: 50%;
  border: 1px solid var(--border-stronger); background: #fff;
  font-style: italic; font-family: Georgia, serif; font-size: 11.5px;
  color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; flex: 0 0 auto; line-height: 1; position: relative;
}
.info-btn::before { content: "i"; }
.info-btn::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.info-popover {
  display: none; position: absolute; z-index: 30; top: 24px; left: 0;
  width: 230px; max-width: 78vw; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--muted);
  line-height: 1.5; box-shadow: 0 6px 18px rgba(0,0,0,.14);
}

/* -------------------------------------------------------------------------
   4. Reglaget (dynamic-value-input) — avsnitt 4.1, "kopieras rakt av"
   ------------------------------------------------------------------------- */
.dynamic-value { position: relative; padding: 6px 0; min-height: var(--row-h); }
.dv-track { position: relative; flex: 1 1 auto; height: var(--row-h); }
.dv-bar   { position: absolute; inset: 0; background: var(--fill-control); border-radius: 8px; cursor: pointer; overflow: hidden; }
.dv-band  { position: absolute; top: 0; bottom: 0; background: var(--border-stronger); border-radius: 6px; pointer-events: none; }

.dv-label     { position: absolute; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-secondary); white-space: nowrap; z-index: 1; pointer-events: none; }
.dv-label-min { left: 12px; }
.dv-label-max { right: 12px; }

.dv-marker {
  position: absolute; top: -9px; width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 8px solid var(--text-primary); transform: translateX(-50%);
  cursor: grab; touch-action: none; z-index: 2;
}
.dv-marker:focus { outline: 2px solid var(--text-accent); outline-offset: 3px; border-radius: 2px; }
.dv-marker.out-of-range { border-top-color: var(--text-danger); }

.dv-value {
  position: absolute; top: 50%; width: 56px; height: 24px; text-align: center; font-size: 13px;
  padding: 0; border: 1px dashed var(--border-stronger); border-radius: 5px; background: var(--surface-1);
  transform: translate(-50%, -50%); z-index: 3;
}
.dv-value.out-of-range { border-color: var(--border-danger); color: var(--text-danger); }

/* -------------------------------------------------------------------------
   5. Radnivå-knappar (avsnitt 5/5.1)
   ------------------------------------------------------------------------- */
.row-actions,
.row-icon { display: flex; justify-content: center; }
button.row-icon {
  border: none; background: none; color: var(--danger); font-size: 12.5px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 6px;
  white-space: nowrap; line-height: 1.25;
}
button.row-icon .dot {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--danger);
  position: relative; flex: 0 0 auto;
}
button.row-icon .dot::before {
  content: ""; position: absolute; left: 3px; right: 3px; top: 7px; height: 2px; background: var(--danger);
}
.row-icon-label { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Bakåtkompatibelt: kalkylatorer byggda mot äldre markup (m-icon/button-text) */
.m-icon,
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded', sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}
.row-icon .m-icon { font-size: 20px; }
.row-icon .button-text { font-size: 12.5px; }

.controls-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.btn {
  border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 0 16px; height: var(--row-h);
  font-size: 13.5px; font-weight: 700; cursor: pointer; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn:hover          { border-color: var(--brand); color: var(--brand); }
.btn.primary        { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover   { background: var(--brand-dark); }
.btn.copied          { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
/* PDF-export-kalkylatorer-spec.md avsnitt 10 - #downloadPdf's felstatus,
   samma "kort, odramatisk bekräftelse"-princip som .btn.copied ovan, bara
   med varningsfärg i stället för OK-färg. Delad här (inte lokal per
   kalkylator) eftersom PDF-knappen är ett familjeövergripande mönster. */
.btn.pdf-error       { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.btn:disabled        { opacity: .5; cursor: not-allowed; }

/* -------------------------------------------------------------------------
   6. Tidsfält: klockslag/varaktighet (avsnitt 6.1.2/6.2.2/6.5)
   ------------------------------------------------------------------------- */
.fhv-time-wrap,
.pef-time-wrap /* äldre namn, se avsnitt 6.6 migrering */ {
  display: flex; align-items: center; gap: 4px;
}
.fhv-time-wrap input[type="number"],
.pef-time-wrap input[type="number"] {
  width: 58px; flex: 0 0 58px; text-align: center;
  font-size: 16px; min-height: 44px; box-sizing: border-box; padding: 0 4px;
}
.fhv-time-wrap--duration input.tool-duration-hour {
  width: 68px; flex: 0 0 68px;
}
.fhv-time-sep,
.pef-time-sep { color: rgba(0,0,0,0.45); font-weight: 700; }

.form-row-year-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.form-row-year-range label { flex-basis: 100%; }
.form-row-year-range input[type="number"] { width: 90px; height: var(--row-h); }
.form-row-year-range .year-range-dash { color: var(--muted); }
.form-row-year-range .period-range-hint { flex-basis: 100%; color: var(--warn); font-size: 12px; }

/* 6.5 Gemensamt no-zoom + touch target för samtliga fyra tidsmönster
   samt alla vanliga inmatningsfält i familjen. */
input[type="text"],
input[type="date"],
input[type="number"],
select {
  font-size: 16px;
  min-height: 44px;
  width: 100%;
  box-sizing: border-box;
}
/* dv-value/dv-marker/tidsfältens sifferrutor har egna, avsiktligt
   smalare/absolutpositionerade mått (ovan) — undanta dem uttryckligen
   från "width:100%"-regeln så de inte trycks ut ur sina wrappers.
   .dv-value behöver ÄVEN undantas från "min-height:44px" (inte bara
   width) — annars vinner min-height-golvet över dess egna, avsiktligt
   kortare height:24px (se .dv-value-regeln ovan), och reglagets
   dragbara ruta blir lika hög som hela spåret/baren (44px) i stället
   för den smala 24px-höjd den är designad för. Upptäckt 2026-09 via
   vibrationskalkylatorns produktionspaket: syns bara där denna fil
   faktiskt laddas (produktion/testverktyg) — en fristående,
   självbärande kalkylator-HTML utan denna fil har ingen konkurrerande
   regel och råkar därför alltid se rätt ut, vilket är varför skillnaden
   först upptäcktes som en .zip-mot-.html-avvikelse. OBS specificitet:
   en enkel ".dv-value { min-height: 0; }" räcker INTE — den förlorar
   mot input[type="text"] (lägre specificitet) oavsett ordning i filen;
   overridet måste matcha eller överträffa attributselektorns
   specificitet, därav input[type="text"].dv-value nedan. */
.dv-value,
.fhv-time-wrap input[type="number"],
.pef-time-wrap input[type="number"],
.form-row-year-range input[type="number"] {
  width: auto;
}
input[type="text"].dv-value {
  min-height: 0;
}

/* -------------------------------------------------------------------------
   7. Totalpanel / trafikljus / Kopiera resultat (avsnitt 7)
   ------------------------------------------------------------------------- */
.total-panel,
.total-score {
  border-radius: 10px; padding: 18px 20px; margin: 10px 0 6px; background: #eef0fb;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.total-panel[data-light="green"],
.total-score[data-light="green"]   { background: var(--ok-bg); }
.total-panel[data-light="yellow"],
.total-score[data-light="yellow"]  { background: var(--warn-bg); }
.total-panel[data-light="red"],
.total-score[data-light="red"]     { background: var(--danger-bg); }
.total-panel .label,
.total-score .label { font-size: 13px; font-weight: 700; color: var(--muted); }
.total-panel .value,
.sumscore { font-size: 30px; font-weight: 800; color: var(--ink); }
.total-panel .unit { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 4px; }

/* -------------------------------------------------------------------------
   8. Språkväljare: .top-bar / .lang-switcher (avsnitt 8.2)
   ------------------------------------------------------------------------- */
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.top-bar h1 { font-size: 22px; margin: 0; }
.lang-switcher {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
}
.lang-switcher select {
  min-height: var(--row-h); border: 1px solid var(--line); border-radius: 8px;
  padding: 0 10px; font-family: inherit; font-size: 13.5px; background: #fff;
}
.sr-only,
.visually-hidden /* se spec v6 avsnitt 13, öppen punkt om namnharmonisering */ {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   9. Övriga, redan etablerade komponentklasser (ännu inte formellt
   dokumenterade i GUI-layout-specens egna avsnitt, men i produktion i
   flera redan levererade kalkylatorer — se spec v6 avsnitt 13.5 för
   rekommendationen att flytta in dessa i specen formellt vid nästa
   uppdatering i stället för att bara leva vidare här).
   ------------------------------------------------------------------------- */
.cancer-warning,
.substance-not-found {
  background: var(--warn-bg); border: 1px solid var(--warn); border-radius: 6px;
  padding: 10px 14px; margin: 12px 0; font-size: 13px; color: #6b5300;
}
.uncertainty-panel,
.he-adjustment-hints {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 16px; margin: 16px 0;
}
.threshold-assessment { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 10px; }
.threshold-assessment th,
.threshold-assessment td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.assessment[data-threshold] { font-weight: 700; }
@media (max-width: 767.98px) {
  .threshold-assessment,
  .threshold-assessment thead,
  .threshold-assessment tbody,
  .threshold-assessment th,
  .threshold-assessment td,
  .threshold-assessment tr { display: block; }
  .threshold-assessment thead { display: none; }
  .threshold-assessment tr { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; padding: 8px 10px; }
  .threshold-assessment td { border: none; padding: 4px 0; }
}

.container-submeasurements {
  margin: 8px 0 4px; padding: 10px; background: var(--bg-soft); border-radius: 6px;
  display: flex; flex-direction: column; gap: 6px;
}
.submeasurement { display: flex; gap: 8px; align-items: center; }
.submeasurement.template { display: none; }
.toggle-submeasurements {
  font-size: 12.5px; color: var(--brand); background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 4px; margin-top: 6px;
}

.pef-chart-container,
.pef-variability-container,
.stromgenomgang-chart-container {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 14px; margin: 16px 0; min-height: 220px;
}
.pef-chart-container canvas,
.pef-variability-container canvas,
.stromgenomgang-chart-container canvas { max-width: 100%; }

.he-adjustment-hints summary { cursor: pointer; font-size: 13px; color: var(--brand); font-weight: 600; }
.he-adjustment-hints .hints-columns { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; }

/* Sökbar combobox (HE-kalkylatorns förlaga, se Responsiv-design-spec 3.3) */
.tool-type-search {
  width: 100%; font-size: 16px; min-height: 44px; box-sizing: border-box;
  font-family: inherit; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 5px;
}
.tool-type-options {
  display: none; position: absolute; z-index: 20; top: 100%; left: 0; right: 0;
  max-height: 260px; overflow-y: auto; margin: 2px 0 0; padding: 0; list-style: none;
  background: #fff; border: 1px solid var(--border-strong); border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.tool-type-options.open { display: block; }
.tool-type-options li { padding: 12px 14px; cursor: pointer; font-size: 15px; line-height: 1.3; border-bottom: 1px solid var(--line); }
.tool-type-options li:last-child { border-bottom: none; }
.tool-type-options li:hover,
.tool-type-options li.active { background: var(--bg-soft); }

/* Rad-/fade-animationer vid addRow()/deleteRow() */
.fade-in  { animation: fhvFadeIn .15s ease; }
.fade-out { animation: fhvFadeOut .15s ease forwards; }
@keyframes fhvFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fhvFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* -------------------------------------------------------------------------
   10. RTL (grundspec avsnitt 9.6)
   ------------------------------------------------------------------------- */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .tool,
[dir="rtl"] .global-settings,
[dir="rtl"] .row-icon,
[dir="rtl"] .row-actions,
[dir="rtl"] .vibration-type,
[dir="rtl"] .uncertainty-type,
[dir="rtl"] .current-type { direction: rtl; }
[dir="rtl"] .tool input,
[dir="rtl"] .tool select,
[dir="rtl"] .tool output,
[dir="rtl"] .result-field output,
[dir="rtl"] .dv-value,
[dir="rtl"] .threshold-assessment td { direction: ltr; text-align: right; }

/* -------------------------------------------------------------------------
   Gransvarden-meta-notis (gransvarden-common.js) - "senast uppdaterad"
   Samma visuella familj som .privacy-notice (se calculator-base.css),
   men separat klass eftersom den ligger utanför formuläret, ofta direkt
   under kalkylatorns rubrik/brödtext - inte i .form-calculator.
   ------------------------------------------------------------------------- */
.gransvarden-meta-notice {
  font-size: 12.5px;
  color: var(--muted);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 14px;
  margin: 0 0 14px;
  line-height: 1.5;
}
.gransvarden-meta-notice-line + .gransvarden-meta-notice-line {
  margin-top: 2px;
}
.gransvarden-meta-notice-source {
  color: var(--muted);
}
.gransvarden-meta-notice--stale {
  background: var(--warn-bg);
  border-color: var(--warn);
  color: var(--ink);
}
.gransvarden-meta-notice-warning {
  color: var(--warn);
  font-weight: 600;
}