/**
 * Vibrationskalkylatorns egen CSS.
 *
 * Flyttad ut ur layout-_section_vibrations-calculator.php:s inbäddade
 * <style>-tagg i samband med Spår C-granskningen (GUI-layout-och-
 * delade-funktioner-spec_v6_3.md avsnitt 13.10): CSS/JS som skrivs ut
 * som en del av en ACF-layouts eget innehåll riskerar att strippas
 * bort tyst av WordPress the_content-filtrering (wp_kses_post() -
 * varken <style> eller <script> finns med i standardlistan över
 * tillåtna taggar). Den här filen laddas i stället via en riktig
 * <link>-tagg (se layout-_section_vibrations-calculator.php), utanför
 * sidans huvudinnehåll och därmed immun mot samma filtrering - exakt
 * samma princip som redan gällde calculator-base.css/i18n-common.js
 * (avsnitt 13.1).
 *
 * Innehållet självt är oförändrat mot den tidigare inbäddade <style>-
 * taggen (ingen CSS-regel har ändrats i den här flytten).
 */

.section-vibrations-calculator {
  /* Färgpalett hämtad rakt av från dynamisk_vardeinmatning_v3_1.html,
     så att reglaget ser exakt likadant ut som i den godkända skissen. */
  --fill-control:#e7e4dc; --border:#e1ded4; --border-strong:#cac6b8;
  --border-stronger:rgba(30,28,22,.55); --surface-0:#faf9f5; --surface-1:#ffffff;
  --text-primary:#232018; --text-secondary:#6b6858; --text-muted:#93907e;
  --text-accent:#3a5ad9; --text-danger:#b3401c; --border-danger:#c1522a;

  --brand:#34398c; --brand-dark:#2a2e70; --ink:#232733; --muted:#5c6370;
  --line:#e1e4e8; --bg-soft:#f6f7f9; --surface:#ffffff;
  --ok-bg:#eaf7ef; --ok:#2e7d46; --warn-bg:#fff8e6; --danger-bg:#fdecea; --danger:#c0392b;
  --row-h:44px;
}
.section-vibrations-calculator * {box-sizing:border-box;}
.section-vibrations-calculator {
  margin:0; padding:32px 16px 80px; background:var(--bg-soft);
  font-family:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--ink); font-size:14px; line-height:1.5;
}
.section-vibrations-calculator .container {max-width:940px;margin:0 auto;background:var(--surface);border-radius:14px;padding:28px 32px 40px;box-shadow:0 8px 28px rgba(30,28,22,.08);}
.section-vibrations-calculator .top-bar {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.section-vibrations-calculator h1 {font-size:22px;margin:0;}
.section-vibrations-calculator .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;
}
.section-vibrations-calculator textarea.notes {
  width:100%; min-height:70px; padding:10px 12px; border:1px solid var(--line);
  border-radius:8px; font-family:inherit; font-size:14px; resize:vertical;
}
.section-vibrations-calculator .notes-instruction {display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px;}
.section-vibrations-calculator .privacy-note {font-size:12.5px;color:var(--muted);margin:8px 0 24px;opacity:.9;}
.section-vibrations-calculator .vibration-type,
.section-vibrations-calculator .result-unit-select {display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:14px;}
.section-vibrations-calculator .vibration-type .field-label,
.section-vibrations-calculator .result-unit-select .field-label {font-size:13px; font-weight:700; color:var(--muted); flex-basis:100%;}
.section-vibrations-calculator .vibration-type label,
.section-vibrations-calculator .result-unit-select label {display:inline-flex; align-items:center; gap:6px; min-height:40px; cursor:pointer; font-size:14px;}
.section-vibrations-calculator .vibration-type input,
.section-vibrations-calculator .result-unit-select input {accent-color:var(--brand); width:17px;height:17px;}
.section-vibrations-calculator .is-hidden {display:none !important;}
/* ------- Rad-layout ------- */
.section-vibrations-calculator .container-tools {display:flex;flex-direction:column;gap:18px;margin-bottom:8px;}
.section-vibrations-calculator .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;
}
@media (min-width:820px) {
.section-vibrations-calculator .tool {flex-direction:row; flex-wrap:nowrap; align-items:flex-start; gap:14px;}
/* Fasta, innehållsanpassade bredder på Verktyg/Tid/Poäng - de behöver
     inte växa. Nivå-kolumnen (reglaget) är den enda som får ta upp
     resten av radens bredd, se .tool-column.level nedan (medvetet
     odefinierad max-width, jämför .pef-value/.comment-undantaget i
     GUI-layout-och-delade-funktioner-spec_v6_7.md avsnitt 13.10.2). */
.section-vibrations-calculator .tool-column.type {flex: 0 0 240px !important; min-width: 0 !important;}
.section-vibrations-calculator .tool-column.duration {flex: 0 0 190px !important;}
.section-vibrations-calculator .tool-column.score {flex: 0 0 84px !important;}
.section-vibrations-calculator .tool-column.level {flex: 1 1 auto !important; min-width: 200px !important;}
.section-vibrations-calculator .row-actions {flex: 0 0 auto !important; align-self: flex-start !important; padding-top: 0 !important;}
}
@media (min-width:640px) and (max-width:819.98px) {
.section-vibrations-calculator .tool {flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:14px;}
/* max-width tillagd (GUI-spec v6.7, avsnitt 13.10.2/13.10.5-checklistan):
     flex-grow:1 utan max-width är samma mönster som var den bekräftade
     grundorsaken för enhetsomvandlaren/PEF - .type växte obegränsat för
     att fylla allt ledigt utrymme i raden (duration/score har flex-grow:0
     och växer aldrig). Skadar inget: 340px är gott om marginal ovanför
     45%-basen vid den här radens minsta bredd (640px). */
.section-vibrations-calculator .tool-column.type {flex: 1 1 45% !important; max-width: 340px !important;}
.section-vibrations-calculator .tool-column.level {flex: 1 1 100% !important; order: 3 !important;}
.section-vibrations-calculator .tool-column.duration {flex: 0 0 190px !important;}
.section-vibrations-calculator .tool-column.score {flex: 0 0 84px !important;}
}
/* VDV-radens egna kolumnbredder (Maskin/Mätt VDV/Mätt tid/Faktisk tid).
   FIX (GUI-spec v6.7, avsnitt 13.10.5): låg tidigare bakom en egen,
   unik brytpunkt på 860px - en tredje siffra som varken matchar
   calculator-base.css:s 640px- eller 820px-nivå. .tool (se reglerna
   ovan) går redan i radläge från 640px, vilket lämnade ett 640-859px
   hål där VDV-kolumnerna inte hade NÅGON breddregel alls (samma
   "hamnar i oordning"-symptom som bekräftades för PEF, se avsnitt
   13.10.5) - och den uppmätta, riktiga sidbredden (813px, avsnitt
   13.3.1) låg mitt i det hålet. Sänkt till 640px, i linje med PEF:s
   fix, så bredden gäller från .tool:s FÖRSTA övergång till radläge.
   flex-wrap:wrap är redan aktivt i 640-819.98-nivån (regeln ovan) så
   VDV-kolumnerna bryter graciöst till en andra rad vid behov i stället
   för att klämmas ihop utan definierad bredd. max-width tillagd på
   vdv-type/vdv-measured (flex-grow > 0) av samma skäl som .type ovan -
   vdv-rectime/vdv-realtime har flex-grow:0 och behöver ingen. */
@media (min-width:640px) {
.section-vibrations-calculator .tool-column.vdv-type {flex: 1.4 1 170px !important; max-width: 260px !important;}
.section-vibrations-calculator .tool-column.vdv-measured {flex: 1 1 170px !important; max-width: 220px !important;}
.section-vibrations-calculator .tool-column.vdv-rectime,
.section-vibrations-calculator .tool-column.vdv-realtime {flex: 0 0 190px !important;}
}
.section-vibrations-calculator .tool-column {display:flex;flex-direction:column;}
.section-vibrations-calculator .tool-column.type {position:relative;}
.section-vibrations-calculator .col-label {
  display:flex; align-items:flex-start; gap:4px;
  /* Fast höjd (inte min-height) för upp till två rader rubriktext, så
     att fälten under ALLTID hamnar i linje mellan kolumnerna — oavsett
     om just den kolumnens rubrik radbryts till en eller två rader (t.ex.
     "Mätt VDV (m/s1.75)" i VDV-läget, som annars flöt in i nästa
     kolumns rubrik). Rubriken tillåts nu radbryta (white-space:normal)
     i stället för att svämma över kolumnens bredd. */
  height:34px !important; line-height:1.3; overflow-wrap:break-word;
  font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:7px; white-space:normal;
}
/* VDV-enhetens exponent (m/s<sup>1.75</sup>, data-i18n-html="vdvMeasured"
   samt den statiska totalsumme-etiketten .total-panel .unit) — ren
   HTML-<sup> i stället för Unicode-upphöjda tecken (¹ᐧ⁷⁵), eftersom
   ᐧ (U+1427, Canadian Syllabics Full Stop) saknar täckning i de flesta
   typsnitt och annars kan rendera som en tom ruta eller ett tecken i
   fel typsnitt/höjd.
   OBS (två buggar hittade på rad, båda i samma regel):
   1) `vertical-align:super` + `line-height:0` fungerar INTE ihop med
      .col-label's `display:flex` + `height:34px !important` — "1.75"
      lyfte loss och flöt ovanför texten.
   2) Fixförsöket bytte till `position:relative;top:-0.5em` men glömde
      NOLLA webbläsarens EGEN standardstil för <sup>
      (`vertical-align:super` ligger redan i UA-stilmallen för alla
      <sup>-element, helt oavsett vår CSS) — så `top:-0.5em` staplades
      OVANPÅ webbläsarens egen super-förskjutning, vilket gav en
      dubbelt upphöjd exponent ("1.75" allt för högt upp).
   Rätt kombination (samma som Bootstraps CSS-reset för sup/sub):
   `vertical-align:baseline` för att nolla UA-stilen, sedan EN enda
   manuell förskjutning via `position:relative;top`. */
.section-vibrations-calculator .col-label sup,
.section-vibrations-calculator .total-panel .unit sup {
  font-size:0.7em; line-height:0; vertical-align:baseline; position:relative; top:-0.5em;
}
.section-vibrations-calculator .tool select,
.section-vibrations-calculator .tool input[type="text"]:not(.dv-value),
.section-vibrations-calculator .tool input[type="time"] {
  width:100%; padding:0 10px; border:1px solid var(--border-strong); border-radius:7px;
  font-family:inherit; font-size:14px; background:#fff; height:var(--row-h);
}
.section-vibrations-calculator .tool select {appearance:auto;}
.section-vibrations-calculator .tool select:focus,
.section-vibrations-calculator .tool input:focus {outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand);}
.section-vibrations-calculator input.tool-score {background:#f0f1f4; font-weight:700; color:var(--brand-dark);}
.section-vibrations-calculator .custom-name-field {margin-top:8px;}
/* Tid-fälten (varaktighet, kan överstiga 24 h) — tre sifferfält i
   stället för ett nativt <input type="time"> (som aldrig kan
   representera 24 h eller mer), se
   GUI-layout-och-delade-funktioner-spec_v6.1.md avsnitt 6.0/6.2. Delas
   av hand-arm/helkropps-radens "Tid" och VDV-lägets "Mätt tid"/
   "Faktisk tid" (avsnitt 6.6, tidigare tre separata <input type="time">
   -fält). */
.section-vibrations-calculator .fhv-time-wrap {display:flex; align-items:center; gap:3px; height:var(--row-h); flex-wrap:nowrap;}
.section-vibrations-calculator .fhv-time-wrap input[type="number"] {
  width:52px; flex:0 0 52px; max-width:52px; height:var(--row-h);
  text-align:center; font-size:16px; /* förhindrar iOS-inzoomning vid fokus */
  box-sizing:border-box; padding:0 2px; border:1px solid var(--border-strong);
  border-radius:7px; font-family:inherit; background:#fff;
  -moz-appearance:textfield;
}
.section-vibrations-calculator .fhv-time-wrap input[type="number"]::-webkit-outer-spin-button,
.section-vibrations-calculator .fhv-time-wrap input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance:none; margin:0;
}
/* Timfältet något bredare för att rymma tvåsiffriga/tresiffriga
   timtal (varaktigheten har ingen övre gräns, se avsnitt 6.2). */
.section-vibrations-calculator .fhv-time-wrap--duration input.tool-duration-hour {width:56px; flex:0 0 56px; max-width:56px;}
.section-vibrations-calculator .fhv-time-sep {color:rgba(0,0,0,.45); font-weight:700; flex:0 0 auto;}
/* ---------------- (i)-knapp: alltid inline direkt efter rubriktexten -------- */
.section-vibrations-calculator .info-wrap {position:relative; display:inline-flex; flex:0 0 auto;}
.section-vibrations-calculator .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;
}
.section-vibrations-calculator .info-btn::before {content:"i";}
.section-vibrations-calculator .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);
}
.section-vibrations-calculator .info-popover p {margin:0 0 6px;}
.section-vibrations-calculator .info-popover p:last-child {margin-bottom:0;}
/* ---------------- Varningsbadge (transient/ultravibration) ----------
   Se Avancerad-vibrationskalkylator-spec_v5_2.md avsnitt 2.6.2. Samma
   tvådelade mönster som (i)-knappen ovan: en alltid synlig ikon-badge
   bredvid kolumnrubriken, fullständig text läggs sist i SAMMA
   .info-popover (renderInfoPopover(), vibrations-calc.js) i stället
   för en egen andra popover. */
.section-vibrations-calculator .vib-warning-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; flex:0 0 auto;
}
/* Ikonen bäddas in som <svg> via .html() (vibrations-calc.js), inte
   <img src>, se kommentaren vid VIB_WARNING_ICON_SVG — samma
   storlekssättning som tidigare, bara på svg i stället för img. */
.section-vibrations-calculator .vib-warning-badge svg {width:17px; height:17px; display:block;}
.section-vibrations-calculator .info-popover .vib-warning-text {
  margin-top:6px !important; padding-top:6px; border-top:1px solid var(--line);
}
.section-vibrations-calculator .info-popover .vib-warning-text a {color:var(--brand); font-weight:600;}
/* ================================================================
   Dynamisk värde-inmatning — geometri/beteende hämtat rakt av från
   dynamisk_vardeinmatning_v3_1.html: en hög, "tjock" bar i samma
   höjd som övriga inmatningsfält (var-row-h), en liten diskret
   triangel som handtag ovanför baren, och en smal, prickig värderuta
   centrerad MITT I baren (inte flytande ovanför). Min/max visas nu
   inuti den grå rektangeln (flankerar den från insidan) i stället för
   att stå utanför den, för att spara horisontell plats.
   ================================================================ */
.section-vibrations-calculator .dv-row {display:flex; align-items:center; min-height:var(--row-h);}
.section-vibrations-calculator .dv-track {position:relative; flex:1 1 auto; height:var(--row-h);}
.section-vibrations-calculator .dv-bar {
  position:absolute; inset:0; background:var(--fill-control); border-radius:8px; cursor:pointer; overflow:hidden;
}
.section-vibrations-calculator .dv-band {position:absolute; top:0; bottom:0; background:var(--border-stronger); border-radius:6px; pointer-events:none;}
/* Min/max-etiketterna ligger nu INUTI reglagets grå rektangel (flankerar
   den klickbara ytan från insidan) i stället för att stå utanför den och
   ta extra horisontell plats - se bifogad referensbild. */
.section-vibrations-calculator .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;}
.section-vibrations-calculator .dv-label-min {left:12px;}
.section-vibrations-calculator .dv-label-max {right:12px;}
.section-vibrations-calculator .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;
}
.section-vibrations-calculator .dv-marker:focus {outline:2px solid var(--text-accent); outline-offset:3px; border-radius:2px;}
.section-vibrations-calculator .dv-marker.out-of-range {border-top-color:var(--text-danger);}
.section-vibrations-calculator .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;
}
.section-vibrations-calculator .dv-value.out-of-range {border-color:var(--border-danger); color:var(--text-danger);}
.section-vibrations-calculator .custom-tool-hint {font-size:11.5px;color:var(--text-muted);margin-top:6px;}
.section-vibrations-calculator .tool-type-options li.option-custom {color:var(--muted); font-style:italic;}
.section-vibrations-calculator .tool-type-options li.option-empty {color:var(--muted); cursor:default;}
.section-vibrations-calculator .tool-type-options li.option-empty:hover {background:none;}
.section-vibrations-calculator .row-actions {display:flex; justify-content:center;}
.section-vibrations-calculator 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;
}
.section-vibrations-calculator button.row-icon .dot {width:20px;height:20px;border-radius:50%;border:2px solid var(--danger);position:relative;flex:0 0 auto;}
.section-vibrations-calculator button.row-icon .dot::before {content:"";position:absolute;left:3px;right:3px;top:7px;height:2px;background:var(--danger);}
.section-vibrations-calculator .row-icon-label {display:flex; flex-direction:column; align-items:center; text-align:center;}
.section-vibrations-calculator .controls-row {display:flex; gap:12px; flex-wrap:wrap; margin:18px 0;}
.section-vibrations-calculator .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;
}
.section-vibrations-calculator .btn:hover {border-color:var(--brand); color:var(--brand);}
.section-vibrations-calculator .btn.primary {background:var(--brand); border-color:var(--brand); color:#fff;}
.section-vibrations-calculator .btn.primary:hover {background:var(--brand-dark);}
.section-vibrations-calculator .btn.copied {background:var(--ok-bg); border-color:var(--ok); color:var(--ok);}
.section-vibrations-calculator .btn.pdf-error {background:var(--danger-bg); border-color:var(--danger); color:var(--danger);}
.section-vibrations-calculator .total-panel {
  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;
}
.section-vibrations-calculator .total-panel[data-light="green"] {background:var(--ok-bg);}
.section-vibrations-calculator .total-panel[data-light="yellow"] {background:var(--warn-bg);}
.section-vibrations-calculator .total-panel[data-light="red"] {background:var(--danger-bg);}
.section-vibrations-calculator .total-panel .label {font-size:13px;font-weight:700;color:var(--muted);}
.section-vibrations-calculator .total-panel .value {font-size:30px;font-weight:800;color:var(--ink);}
.section-vibrations-calculator .total-panel .unit {font-size:15px;font-weight:600;color:var(--muted);margin-left:4px;}
.section-vibrations-calculator footer.note {max-width:940px;margin:18px auto 0;padding:0 8px;color:var(--muted);font-size:12px;}
.section-vibrations-calculator [dir="rtl"] .dv-value,
.section-vibrations-calculator [dir="rtl"] .dv-label,
.section-vibrations-calculator [dir="rtl"] .fhv-time-wrap,
.section-vibrations-calculator [dir="rtl"] .tool-score,
.section-vibrations-calculator [dir="rtl"] output {
  direction: ltr;
}