/* =========================================================================
   MSL CALCULATORS — unified component layer  ·  v1.0  ·  2026-06-01
   Single shared source for ALL calculators (salary · mortgage · severance ·
   hourly + hub). Layers ON TOP of msl-kit.css.
   Tokens only · RTL · 0 inline · 0 !important.

   The 5 GENERIC primitives (result-hero, states, percentile, ai-note,
   share-card) live in the canonical msl-kit.css so every tool inherits them.
   This file holds the calculator-FAMILY components + page scaffolding.
   ========================================================================= */


/* =========================================================================
   0 · PAGE SCAFFOLDING  (msl-calc-* = layout only, used by the calc markup)
   ========================================================================= */
.msl-calc-section{ padding:var(--msl-sp-8) 0; }
.msl-calc-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--msl-sp-5); }
.msl-calc-mt-3{ margin-top:var(--msl-sp-3); }
.msl-calc-mt-4{ margin-top:var(--msl-sp-4); }
.msl-calc-mt-5{ margin-top:var(--msl-sp-5); }
.msl-calc-mt-6{ margin-top:var(--msl-sp-6); }
.msl-calc-block-label{ display:block; margin-bottom:var(--msl-sp-3); }
.msl-calc-center{ text-align:center; }
.msl-calc-note{ color:var(--msl-muted); }
.msl-calc-row{ display:flex; align-items:center; gap:var(--msl-sp-3); margin-top:var(--msl-sp-4); }
@media (max-width:820px){ .msl-calc-grid-2{ grid-template-columns:1fr; } }


/* =========================================================================
   1 · SLIDER FIELD  — slider + editable numeric value (RTL)
   ========================================================================= */
.msl-slider-field{ display:flex; flex-direction:column; gap:var(--msl-sp-3); }
.msl-slider-top{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--msl-sp-3); }
.msl-slider-name{
  font-family:var(--msl-font); font-size:var(--msl-size-tiny); font-weight:var(--msl-w-bold);
  letter-spacing:0.04em; text-transform:uppercase; color:var(--msl-muted);
  display:inline-flex; align-items:center; gap:var(--msl-sp-2);
}
.msl-slider-val{
  font-family:var(--msl-font); font-size:var(--msl-size-h4); font-weight:var(--msl-w-black);
  color:var(--msl-ink-strong); letter-spacing:var(--msl-ls-heading); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.msl-slider-val .cur{ color:var(--msl-amber-deep); }
.msl-range{
  -webkit-appearance:none; appearance:none; width:100%; height:8px; margin:var(--msl-sp-1) 0;
  border-radius:var(--msl-r-pill); background:var(--msl-cream-2);
  accent-color:var(--msl-amber-deep); direction:rtl; cursor:pointer;
  transition:filter .15s;
}
.msl-range:hover{ filter:brightness(0.99); }
.msl-range:focus-visible{ outline:2px solid var(--msl-amber); outline-offset:4px; }
.msl-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--msl-amber); border:3px solid #fff; box-shadow:var(--msl-shadow-1);
  cursor:grab; margin-top:-8px; transition:transform .12s, box-shadow .12s;
}
.msl-range:active::-webkit-slider-thumb{ transform:scale(1.12); box-shadow:var(--msl-shadow-2); cursor:grabbing; }
.msl-range::-moz-range-thumb{
  width:24px; height:24px; border:3px solid #fff; border-radius:50%;
  background:var(--msl-amber); box-shadow:var(--msl-shadow-1); cursor:grab; transition:transform .12s;
}
.msl-range:active::-moz-range-thumb{ transform:scale(1.12); cursor:grabbing; }
.msl-range::-webkit-slider-runnable-track{ height:8px; border-radius:var(--msl-r-pill); background:var(--msl-cream-2); }
.msl-range::-moz-range-track{ height:8px; border-radius:var(--msl-r-pill); background:var(--msl-cream-2); }
.msl-slider-scale{ display:flex; justify-content:space-between; font-size:var(--msl-size-tiny); color:var(--msl-muted); }


/* =========================================================================
   2 · SEGMENTED PICKER  (goal / status / scenario selector)
   ========================================================================= */
.msl-goal-picker{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--msl-sp-2); }
.msl-goal-picker--2{ grid-template-columns:repeat(2,1fr); }
.msl-goal-opt{
  display:flex; flex-direction:column; gap:2px; align-items:center; text-align:center;
  padding:var(--msl-sp-4) var(--msl-sp-3); border:1px solid var(--msl-line); border-radius:var(--msl-r-md);
  background:#fff; cursor:pointer; transition:border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
.msl-goal-opt:hover{ border-color:var(--msl-amber); transform:translateY(-1px); box-shadow:var(--msl-shadow-1); }
.msl-goal-opt b{ font-family:var(--msl-font); font-weight:var(--msl-w-heavy); font-size:var(--msl-size-small); color:var(--msl-ink-strong); }
.msl-goal-opt small{ font-size:var(--msl-size-tiny); color:var(--msl-muted); font-weight:var(--msl-w-mid); }
.msl-goal-opt--active{ background:var(--msl-navy); border-color:var(--msl-navy); transform:none; }
.msl-goal-opt--active b{ color:#fff; }
.msl-goal-opt--active small{ color:rgba(255,255,255,.7); }


/* =========================================================================
   3 · TRACK ROW  (repeatable input rows — e.g. mortgage tracks)
   ========================================================================= */
.msl-track-head, .msl-track-row{
  display:grid; grid-template-columns:1.4fr 1fr 1fr .9fr 40px; gap:var(--msl-sp-3); align-items:center;
}
.msl-track-head{ padding:0 var(--msl-sp-4) var(--msl-sp-2); }
.msl-track-head span{
  font-family:var(--msl-font); font-size:var(--msl-size-tiny); font-weight:var(--msl-w-bold);
  letter-spacing:0.04em; text-transform:uppercase; color:var(--msl-muted);
}
.msl-track-row{
  background:#fff; border:1px solid var(--msl-line); border-radius:var(--msl-r-md);
  padding:var(--msl-sp-4); margin-bottom:var(--msl-sp-3); transition:border-color .15s, box-shadow .15s;
}
.msl-track-row:hover{ border-color:var(--msl-line); box-shadow:var(--msl-shadow-1); }
.msl-track-name{ font-family:var(--msl-font); font-weight:var(--msl-w-heavy); font-size:var(--msl-size-small); color:var(--msl-ink-strong); }
.msl-track-name small{ display:block; font-weight:var(--msl-w-mid); color:var(--msl-muted); font-size:var(--msl-size-tiny); }
.msl-track-row .msl-input{ padding:10px 12px; }
.msl-track-del{
  width:32px; height:32px; border:1px solid var(--msl-line); border-radius:var(--msl-r-sm); background:#fff;
  color:var(--msl-down); font-weight:var(--msl-w-black); cursor:pointer; line-height:1; transition:background .15s, border-color .15s;
}
.msl-track-del:hover{ background:var(--msl-down-soft); border-color:var(--msl-down); }
.msl-track-add{ margin-top:var(--msl-sp-2); }
@media (max-width:720px){
  .msl-track-head{ display:none; }
  .msl-track-row{ grid-template-columns:1fr 1fr; gap:var(--msl-sp-3) var(--msl-sp-4); position:relative; }
  .msl-track-row .msl-track-name{ grid-column:1 / -1; }
  .msl-track-del{ position:absolute; top:var(--msl-sp-3); left:var(--msl-sp-3); }
}


/* =========================================================================
   5 · INLINE SMART WARNING  (compact variant of callout)
   ========================================================================= */
.msl-callout--inline{
  display:flex; align-items:flex-start; gap:var(--msl-sp-3);
  margin:var(--msl-sp-3) 0; padding:var(--msl-sp-3) var(--msl-sp-4);
  border-radius:var(--msl-r); border-right:4px solid var(--msl-amber-deep);
  background:var(--msl-warn-bg); color:var(--msl-warn); font-size:var(--msl-size-small); line-height:var(--msl-lh-normal);
}
.msl-callout--inline::before{
  content:"!"; flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  background:var(--msl-amber-deep); color:#fff; font-weight:var(--msl-w-black);
  display:flex; align-items:center; justify-content:center; font-size:var(--msl-size-tiny);
}
.msl-callout--inline b{ font-weight:var(--msl-w-heavy); }


/* =========================================================================
   6 · EDUCATIONAL HELP TOOLTIP
   ========================================================================= */
.msl-help{ position:relative; display:inline-flex; }
.msl-help-btn{
  width:18px; height:18px; border-radius:50%; border:1px solid var(--msl-line);
  background:var(--msl-cream-2); color:var(--msl-amber-deep); font-weight:var(--msl-w-black);
  font-size:11px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.msl-help-bubble{
  position:absolute; top:calc(100% + 8px); right:-8px; z-index:20; width:240px;
  background:var(--msl-ink-strong); color:#fff; border-radius:var(--msl-r); padding:var(--msl-sp-3) var(--msl-sp-4);
  font-size:var(--msl-size-small); font-weight:var(--msl-w-reg); line-height:var(--msl-lh-normal);
  box-shadow:var(--msl-shadow-2); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s, transform .15s;
}
.msl-help-bubble::before{ content:""; position:absolute; bottom:100%; right:12px; border:7px solid transparent; border-bottom-color:var(--msl-ink-strong); }
.msl-help:hover .msl-help-bubble, .msl-help:focus-within .msl-help-bubble{ opacity:1; visibility:visible; transform:translateY(0); }


/* =========================================================================
   7 · CHARTS  (SVG stress bars / growth / principal-interest split)
   ========================================================================= */
.msl-chart{ width:100%; height:auto; display:block; }
.msl-chart .grid{ stroke:rgba(255,255,255,.12); stroke-width:1; }
.msl-chart .bar{ fill:var(--msl-amber); }
.msl-chart .bar--base{ fill:rgba(255,255,255,.28); }
.msl-chart .bar--alert{ fill:var(--msl-down); }
.msl-chart .area-principal{ fill:var(--msl-amber); opacity:.85; }
.msl-chart .area-interest{ fill:rgba(255,255,255,.22); }
.msl-chart .axislbl{ fill:rgba(255,255,255,.7); font:600 13px var(--msl-font); }
.msl-chart .barval{ fill:#fff; font:800 14px var(--msl-font); }
.msl-chart-legend{ display:flex; gap:var(--msl-sp-5); flex-wrap:wrap; margin-top:var(--msl-sp-4); }
.msl-chart-legend span{ display:inline-flex; align-items:center; gap:var(--msl-sp-2); font-size:var(--msl-size-meta); color:rgba(255,255,255,.75); font-weight:var(--msl-w-mid); }
.msl-chart-legend i{ width:14px; height:14px; border-radius:3px; }
.msl-chart-legend .k-amber{ background:var(--msl-amber); }
.msl-chart-legend .k-soft{ background:rgba(255,255,255,.28); }


/* =========================================================================
   8 · COLLAPSIBLE TABLE  (amortization / advanced settings, mobile-safe)
   ========================================================================= */
.msl-amort{ margin:var(--msl-sp-4) 0 0; }
.msl-amort summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:var(--msl-sp-2);
  font-family:var(--msl-font); font-weight:var(--msl-w-heavy); font-size:var(--msl-size-small); color:var(--msl-ink-strong);
  padding:var(--msl-sp-3) var(--msl-sp-4); border:1px solid var(--msl-line); border-radius:var(--msl-r); background:#fff;
  transition:border-color .15s;
}
.msl-amort summary:hover{ border-color:var(--msl-amber); }
.msl-amort summary::after{ content:"+"; color:var(--msl-amber); font-weight:var(--msl-w-black); font-size:1.2em; }
.msl-amort[open] summary::after{ content:"\2212"; }
.msl-amort-scroll{ overflow-x:auto; margin-top:var(--msl-sp-4); border:1px solid var(--msl-line); border-radius:var(--msl-r-md); }
.msl-amort-table{ width:100%; border-collapse:collapse; font-size:var(--msl-size-small); min-width:520px; background:#fff; }
.msl-amort-table th, .msl-amort-table td{ padding:var(--msl-sp-3) var(--msl-sp-4); text-align:center; border-bottom:1px solid var(--msl-line-light); white-space:nowrap; }
.msl-amort-table thead th{ background:var(--msl-navy); color:#fff; font-weight:var(--msl-w-heavy); font-size:var(--msl-size-meta); position:sticky; top:0; }
.msl-amort-table tbody tr:nth-child(even){ background:var(--msl-cream); }
.msl-amort-table td:first-child{ font-weight:var(--msl-w-bold); color:var(--msl-ink-strong); }


/* =========================================================================
   11 · LINKED PAIR PICKER   (e.g. profession × city)
   ========================================================================= */
.msl-pair-picker{ display:grid; grid-template-columns:1fr 1fr; gap:var(--msl-sp-4); }
@media (max-width:560px){ .msl-pair-picker{ grid-template-columns:1fr; } }


/* =========================================================================
   12 · BREAKDOWN  (result hero + itemised deductions)
   The result-hero itself is generic (kit); the breakdown grid is calc-family.
   ========================================================================= */
.msl-breakdown{ display:grid; grid-template-columns:1fr 1.2fr; gap:var(--msl-sp-5); align-items:stretch; }
@media (max-width:760px){ .msl-breakdown{ grid-template-columns:1fr; } }
.msl-breakdown-rows{ background:#fff; border:1px solid var(--msl-line); border-radius:var(--msl-r-md); padding:var(--msl-sp-5) var(--msl-sp-6); display:flex; flex-direction:column; gap:var(--msl-sp-4); }
.msl-deduct{ display:grid; grid-template-columns:1fr 64px; gap:var(--msl-sp-3) var(--msl-sp-4); align-items:center; }
.msl-deduct-name{ font-family:var(--msl-font); font-size:var(--msl-size-small); font-weight:var(--msl-w-bold); color:var(--msl-ink-strong); display:inline-flex; align-items:center; gap:var(--msl-sp-2); }
.msl-deduct-val{ font-family:var(--msl-font); font-weight:var(--msl-w-black); font-size:var(--msl-size-small); color:var(--msl-down); text-align:left; letter-spacing:var(--msl-ls-tight); font-variant-numeric:tabular-nums; }
.msl-deduct-bar{ grid-column:1 / -1; height:8px; border-radius:var(--msl-r-pill); background:var(--msl-cream-2); overflow:hidden; }
.msl-deduct-bar > span{ display:block; height:100%; background:var(--msl-down); border-radius:var(--msl-r-pill); opacity:.7; width:calc(var(--w,20) * 1%); transition:width .4s cubic-bezier(.22,.61,.36,1); }
.msl-deduct--pension .msl-deduct-val{ color:var(--msl-up); }
.msl-deduct--pension .msl-deduct-bar > span{ background:var(--msl-up); }
.msl-deduct-w35{ --w:35; } .msl-deduct-w22{ --w:22; } .msl-deduct-w10{ --w:10; } .msl-deduct-w18{ --w:18; }


/* =========================================================================
   15 · CLUSTER NAVIGATION STRIP
   ========================================================================= */
.msl-cluster-nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--msl-sp-3); }
@media (max-width:640px){ .msl-cluster-nav{ grid-template-columns:1fr; } }
.msl-cluster-link{ display:flex; flex-direction:column; gap:4px; padding:var(--msl-sp-4) var(--msl-sp-5); border:1px solid var(--msl-line); border-radius:var(--msl-r-md); background:#fff; text-decoration:none; transition:border-color .15s, background .15s, transform .12s, box-shadow .15s; }
.msl-cluster-link:hover{ border-color:var(--msl-amber); transform:translateY(-1px); box-shadow:var(--msl-shadow-1); }
.msl-cluster-link b{ font-family:var(--msl-font); font-weight:var(--msl-w-heavy); font-size:var(--msl-size-small); color:var(--msl-ink-strong); }
.msl-cluster-link small{ font-size:var(--msl-size-tiny); color:var(--msl-muted); }
.msl-cluster-link::after{ content:"\2190"; color:var(--msl-amber); font-weight:var(--msl-w-black); align-self:flex-start; }
.msl-cluster-link--current{ background:var(--msl-cream-2); border-color:var(--msl-amber); }
.msl-cluster-link--current::after{ content:"\05DB\05D0\05DF \05D0\05EA\05D4"; font-size:var(--msl-size-tiny); font-weight:var(--msl-w-bold); color:var(--msl-amber-deep); }


/* =========================================================================
   16 · CALCULATOR CARD + GRID   (parent / hub page)
   ========================================================================= */
.msl-calc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--msl-sp-5); }
@media (max-width:900px){ .msl-calc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .msl-calc-grid{ grid-template-columns:1fr; } }

.msl-calc-card{
  position:relative; display:flex; flex-direction:column; gap:var(--msl-sp-3);
  padding:var(--msl-sp-6); background:#fff; border:1px solid var(--msl-line);
  border-radius:var(--msl-r-lg); text-decoration:none; overflow:hidden;
  transition:border-color .15s, transform .14s, box-shadow .18s;
}
.msl-calc-card:hover{ border-color:var(--msl-amber); transform:translateY(-3px); box-shadow:var(--msl-shadow-2); }
.msl-calc-card::after{
  content:""; position:absolute; inset-block:0; right:0; width:4px;
  background:var(--msl-amber); transform:scaleY(0); transform-origin:top; transition:transform .18s;
}
.msl-calc-card:hover::after{ transform:scaleY(1); }
.msl-calc-icon{
  width:52px; height:52px; border-radius:var(--msl-r-md);
  background:var(--msl-cream-2); color:var(--msl-amber-deep);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--msl-size-h3); font-weight:var(--msl-w-black);
}
.msl-calc-name{ font-family:var(--msl-font); font-weight:var(--msl-w-heavy); font-size:var(--msl-size-h4); color:var(--msl-ink-strong); margin:0; }
.msl-calc-desc{ font-size:var(--msl-size-small); color:var(--msl-muted); line-height:var(--msl-lh-normal); margin:0; }
.msl-calc-teaser{
  margin-top:auto; padding-top:var(--msl-sp-4); border-top:1px solid var(--msl-line-light);
  display:flex; align-items:baseline; gap:var(--msl-sp-2);
}
.msl-calc-teaser b{ font-family:var(--msl-font); font-weight:var(--msl-w-black); font-size:var(--msl-size-h3); color:var(--msl-amber-deep); letter-spacing:var(--msl-ls-heading); font-variant-numeric:tabular-nums; }
.msl-calc-teaser span{ font-size:var(--msl-size-tiny); color:var(--msl-muted); font-weight:var(--msl-w-mid); }
.msl-calc-go{ font-size:var(--msl-size-small); font-weight:var(--msl-w-bold); color:var(--msl-amber-deep); display:inline-flex; align-items:center; gap:var(--msl-sp-2); }
.msl-calc-go::before{ content:"\2190"; font-weight:var(--msl-w-black); }

/* featured-anchor layout: one big card + compact list of the rest */
.msl-calc-featured{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--msl-sp-5); align-items:stretch; }
@media (max-width:860px){ .msl-calc-featured{ grid-template-columns:1fr; } }
.msl-calc-card--hero{
  background:radial-gradient(120% 100% at 90% -10%, rgba(212,160,74,.18), transparent 55%), var(--msl-navy);
  border-color:var(--msl-navy); color:#fff; gap:var(--msl-sp-4);
}
.msl-calc-card--hero .msl-calc-name{ color:#fff; font-size:var(--msl-size-h2); }
.msl-calc-card--hero .msl-calc-desc{ color:rgba(255,255,255,.78); font-size:var(--msl-size-body); }
.msl-calc-card--hero .msl-calc-icon{ background:var(--msl-amber); color:var(--msl-navy); }
.msl-calc-card--hero .msl-calc-teaser{ border-top-color:rgba(255,255,255,.14); }
.msl-calc-card--hero .msl-calc-teaser b{ color:var(--msl-amber); }
.msl-calc-card--hero .msl-calc-teaser span{ color:rgba(255,255,255,.6); }
.msl-calc-card--hero .msl-calc-go{ color:var(--msl-amber); }
.msl-calc-card--hero:hover::after{ transform:scaleY(0); }

.msl-calc-list{ display:flex; flex-direction:column; gap:var(--msl-sp-3); }
.msl-calc-rowlink{
  display:flex; align-items:center; gap:var(--msl-sp-4); padding:var(--msl-sp-4) var(--msl-sp-5);
  background:#fff; border:1px solid var(--msl-line); border-radius:var(--msl-r-md);
  text-decoration:none; transition:border-color .15s, transform .12s, box-shadow .15s;
}
.msl-calc-rowlink:hover{ border-color:var(--msl-amber); transform:translateY(-1px); box-shadow:var(--msl-shadow-1); }
.msl-calc-rowlink .msl-calc-icon{ width:40px; height:40px; font-size:var(--msl-size-h4); flex:0 0 auto; }
.msl-calc-rowlink .txt{ display:flex; flex-direction:column; }
.msl-calc-rowlink .txt b{ font-family:var(--msl-font); font-weight:var(--msl-w-heavy); font-size:var(--msl-size-small); color:var(--msl-ink-strong); }
.msl-calc-rowlink .txt small{ font-size:var(--msl-size-tiny); color:var(--msl-muted); }
.msl-calc-rowlink::after{ content:"\2190"; margin-inline-start:auto; color:var(--msl-amber); font-weight:var(--msl-w-black); }

/* group heading inside the hub */
.msl-calc-group-hd{ display:flex; align-items:baseline; gap:var(--msl-sp-3); margin:var(--msl-sp-7) 0 var(--msl-sp-5); }
.msl-calc-group-hd h3{ font-family:var(--msl-font); font-weight:var(--msl-w-heavy); font-size:var(--msl-size-h3); color:var(--msl-ink-strong); margin:0; letter-spacing:var(--msl-ls-heading); }
.msl-calc-group-hd span{ font-size:var(--msl-size-small); color:var(--msl-muted); }
.msl-calc-group-hd::after{ content:""; flex:1; height:1px; background:var(--msl-line); }