.cos-calc{
    /* === Designtokens – exakta värden från Figma (Web / Desktop Calculator, node 1702:3619) ===
       Alla färger kan skrivas över per blockinstans via inline CSS-variabler
       från blockets sidopanel i editorn. */
    --cos-accent:#d2943f;         /* Primary yellow – CTA, växlar, reglage */
    --cos-accent-hover:#c0832f;
    --cos-bg-section:#3a3c3f;     /* Primary grey – sektionsbakgrund + slider-spår i kort */
    --cos-bg-card:#222324;        /* Uppgifter-kortet + språkväxelns aktiva del */
    --cos-bg-panel:#14344d;       /* Secondary blue – resultatpanelen */
    --cos-text:#ffffff;
    --cos-text-soft:#e7ecf0;      /* Secondary light blue – noter/disclaimer */
    --cos-input:#4d4f50;          /* värdeboxar + slider-spår i toppsektionen */
    --cos-radius:8px;
    /* Circular Std + GT Super Display laddas av careofsweden.se – snurran ärver dem
       vid inbäddning. Som fristående används fallbacks nedan. */
    --cos-font:'Circular Std','Helvetica Neue',Helvetica,Arial,sans-serif;
    --cos-font-display:'GT Super Display','Circular Std',Georgia,'Times New Roman',serif;

    font-family:var(--cos-font);color:var(--cos-text);background:var(--cos-bg-section);
    margin:0 auto;padding:48px 32px;box-sizing:border-box;line-height:1.5;
  }

  .cos-calc .gutter{max-width:1128px;margin:0 auto}
  .cos-calc *,.cos-calc *::before,.cos-calc *::after{box-sizing:border-box}
  .cos-calc h1,.cos-calc h2,.cos-calc h3,.cos-calc p{margin:0}

  /* topp: rubrik + språkväxel */
  .cos-calc .cos-top{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;margin-bottom:24px}
  .cos-calc .cos-h1{font-family:var(--cos-font-display);font-size:36px;font-weight:600;color:var(--cos-text);letter-spacing:normal;line-height:1.4}
  .cos-calc .cos-subtitle{font-size:14px;color:var(--cos-text);margin-bottom:24px;max-width:720px}

  /* segmentväxlar – sammanfogade halvor, 8px ytterhörn (Figma: Button-komponenten) */
  .cos-calc .cos-lang{display:flex}
  .cos-calc .cos-lang button{appearance:none;-webkit-appearance:none;border:2px solid var(--cos-bg-card);background:transparent;color:var(--cos-text);font:inherit;font-size:12px;font-weight:500;line-height:1.5;text-transform:none;letter-spacing:normal;padding:7px 18px;cursor:pointer;border-radius:0}
  .cos-calc .cos-lang button:first-child{border-radius:8px 0 0 8px}
  .cos-calc .cos-lang button:last-child{border-radius:0 8px 8px 0}
  .cos-calc .cos-lang button.active{background:var(--cos-bg-card);border-color:var(--cos-bg-card)}

  .cos-calc .cos-seg{display:flex;margin-bottom:24px}
  /* Kliniska blocket har ingen verksamhetsväxel – kalkylen finns bara för slutenvård */
  .cos-calc[data-cos-ctx="clinical"] .cos-context{display:none}
  .cos-calc .cos-seg button{appearance:none;-webkit-appearance:none;flex:1;border:2px solid var(--cos-accent);background:transparent;font:inherit;font-size:12px;font-weight:500;line-height:1.5;text-transform:none;letter-spacing:normal;text-decoration:none;color:var(--cos-accent);padding:7px 18px;cursor:pointer;transition:.15s;border-radius:0}
  .cos-calc .cos-seg button:first-child{border-radius:8px 0 0 8px}
  .cos-calc .cos-seg button:last-child{border-radius:0 8px 8px 0}
  .cos-calc .cos-seg button.active{background:var(--cos-accent);color:#fff}
  .cos-calc .cos-seg button:focus,.cos-calc .cos-lang button:focus{outline:none}
  .cos-calc .cos-seg button:focus-visible,.cos-calc .cos-lang button:focus-visible{outline:2px solid #fff;outline-offset:2px}

  /* toppreglage (madrasser + avtalstid) */
  .cos-calc .cos-top-levers{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
  @media(max-width:820px){.cos-calc .cos-top-levers{grid-template-columns:1fr}}

  .cos-calc .cos-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
  @media(max-width:820px){.cos-calc .cos-grid{grid-template-columns:1fr}}

  .cos-calc .cos-card{background:var(--cos-bg-card);border-radius:var(--cos-radius);padding:24px}
  .cos-calc .cos-card-h{font-family:var(--cos-font-display);font-size:18px;font-weight:700;margin-bottom:16px}

  /* reglage */
  .cos-calc .cos-field{margin-bottom:24px}
  .cos-calc .cos-field:last-child{margin-bottom:0}
  .cos-calc .cos-top-levers .cos-field{margin-bottom:0}
  .cos-calc .cos-flabel{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
  .cos-calc .cos-flabel label{font-size:14px;font-weight:400;color:var(--cos-text)}
  .cos-calc .cos-valbox{display:flex;align-items:center;background:var(--cos-input);border:0;border-radius:4px;padding:9px 18px}
  .cos-calc .cos-valbox input{width:40px;border:0;outline:none;font:inherit;font-size:12px;font-weight:400;line-height:1.5;color:var(--cos-text);text-align:left;background:transparent;padding:0;-moz-appearance:textfield;appearance:textfield}
  /* dölj webbläsarens upp/ner-pilar – finns inte i designen, reglaget sköter justering */
  .cos-calc .cos-valbox input::-webkit-inner-spin-button,
  .cos-calc .cos-valbox input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  /* Enheter visas inte i designen – etiketterna bär enheten. Ta bort display:none för att visa igen. */
  .cos-calc .cos-valbox .unit{display:none;font-size:12px;color:var(--cos-text-soft);white-space:nowrap}

  .cos-calc input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:9px;border-radius:999px;background:var(--cos-input);outline:none;margin:0;display:block}
  .cos-calc .cos-card input[type=range]{background:var(--cos-bg-section)}
  .cos-calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--cos-accent);cursor:pointer;border:0}
  .cos-calc input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--cos-accent);cursor:pointer;border:0}

  /* evidenspanel – låsta studievärden under reglagen (bara slutenvård) */
  .cos-calc .cos-evidence{margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
  .cos-calc .cos-evidence[hidden]{display:none}
  .cos-calc .cos-evidence-sub{font-size:12px;color:var(--cos-text-soft);margin-bottom:8px}
  .cos-calc .cos-fixed{display:grid;grid-template-columns:1fr;gap:0}
  .cos-calc .cos-fact + .cos-fact{border-top:1px solid rgba(255,255,255,.08)}
  .cos-calc .cos-evidence .cos-fact{padding:9px 0}
  .cos-calc .cos-evidence .cos-fact .fl{max-width:100%}
  .cos-calc .cos-tip .val{display:block;font-weight:700;margin-bottom:4px}
  .cos-calc .cos-fact{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:12px 0}
  .cos-calc .cos-fact .fl{font-size:14px;font-weight:400;max-width:62%}
  .cos-calc .cos-fact .fl .src{display:block;font-size:11px;color:var(--cos-text-soft);font-weight:400;margin-top:3px;line-height:1.4}
  .cos-calc .cos-fact .fv{font-size:18px;font-weight:700;color:var(--cos-text);white-space:nowrap}
  .cos-calc .cos-lock{font-size:11px;color:var(--cos-text-soft);display:inline-flex;align-items:center;gap:4px}

  /* info tooltip – 18px ring med "i" (Figma: outline-ikon) */
  .cos-calc .cos-info{position:relative;display:inline-flex;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);background:transparent;color:rgba(255,255,255,.85);font-size:11px;font-weight:600;font-style:normal;align-items:center;justify-content:center;cursor:help;flex:none;vertical-align:middle}
  .cos-calc .cos-info:hover .cos-tip{opacity:1;visibility:visible}
  .cos-calc .cos-tip{position:absolute;bottom:140%;left:50%;transform:translateX(-50%);width:230px;background:#222324;color:#fff;font-size:12px;font-weight:400;line-height:1.45;padding:9px 11px;border-radius:8px;opacity:0;visibility:hidden;transition:.15s;z-index:20;text-align:left;text-transform:none;letter-spacing:0}
  .cos-calc .cos-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#222324}

  /* resultatpanel – sträcker sig lika högt som kortet, CTA i botten */
  .cos-calc .cos-result{background:var(--cos-bg-panel);color:#fff;border-radius:var(--cos-radius);padding:24px;display:flex;flex-direction:column}
  .cos-calc .cos-result .lbl{font-family:var(--cos-font-display);font-size:18px;font-weight:700;line-height:1.5;margin-bottom:16px}
  .cos-calc .cos-result .big{font-family:var(--cos-font-display);font-size:36px;font-weight:700;letter-spacing:normal;line-height:1;white-space:nowrap}
  .cos-calc .cos-result .note{font-size:14px;color:var(--cos-text-soft);margin-top:6px;margin-bottom:16px}

  .cos-calc .cos-breakdown{width:100%}
  .cos-calc .cos-rrow{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
  .cos-calc .cos-rrow .k{font-size:14px;font-weight:400}
  .cos-calc .cos-rrow .v{font-size:14px;font-weight:700;white-space:nowrap;text-align:right}
  .cos-calc .cos-foot{font-size:12px;color:var(--cos-text-soft);margin-top:16px;line-height:1.5}
  .cos-calc .cos-cta,.cos-calc .cos-cta:visited{display:block;text-align:center;margin-top:24px;background:var(--cos-accent);color:#fff;font-weight:500;font-size:12px;line-height:1.5;text-transform:none;text-decoration:none;padding:10px 20px;border-radius:8px}
  .cos-calc .cos-result .cos-cta{margin-top:auto}
  .cos-calc .cos-result .cos-foot{margin-bottom:24px}
  .cos-calc .cos-cta:hover{background:var(--cos-accent-hover)}

  /* mobil – ligger sist så reglerna vinner över grundvärdena */
  @media(max-width:600px){
    .cos-calc{padding:32px 20px}
    .cos-calc .cos-h1{font-size:26px}
    .cos-calc .cos-result .big{font-size:30px}
  }