/* ==========================================================================
   MSL Module · CALCULATORS  (Phase-C asset-delivery split, 2026-06-03)
   Carved verbatim from kit-extensions.css. Loaded ONLY on calculator/tool
   pages. Do not hand-edit independently of the core file.
   ========================================================================== */
/* ==========================================================================
   CALCULATORS — elf-calc component styles
   Migrated from msl-open-toolkit/tools-overlay.css §7
   Sprint S-CALCULATORS-REBUILD · 2026-05-28
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   7. ELF-CALC — Classic Calculators (/calculators/*)
   These components have ZERO base CSS — full styling from scratch.
   Covers: mortgage, inflation, and any future elf-calc widget.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Container ───────────────────────────────────────────────────────────── */
.elf-calc {
    font-family: var(--msl-font);
    background: var(--msl-white);
    border: 1px solid var(--msl-line);
    border-radius: var(--msl-r-lg, 16px);
    box-shadow: var(--msl-shadow-card);
    padding: 2rem 2.5rem;
    max-width: 960px;
    margin: 0 auto 2.5rem;
    direction: rtl;
}

/* ── Page-level title + intro text (above the widget) ───────────────────── */
body:has(.elf-calc) .page-header h1 {
    font-family: var(--msl-font);
    font-weight: 800;
    font-size: clamp(32px, 3.8vw, 52px);
    letter-spacing: -0.02em;   /* msl-ls-heading — חובה לפי הקיט */
    line-height: 0.95;         /* msl-lh-tight */
    color: var(--msl-navy);
    text-align: center;
}

body:has(.elf-calc) .page-content p {
    font-family: var(--msl-font);
    color: var(--msl-muted);
    text-align: center !important;  /* beats inline style="text-align:right" set by editor */
    max-width: 62ch;
    margin-inline: auto;
    line-height: 1.6;
}

/* ── Title & Subtitle ────────────────────────────────────────────────────── */
.elf-calc__title {
    font-family: var(--msl-font);
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;   /* msl-ls-heading */
    line-height: 0.95;
    color: var(--msl-navy);
    margin: 0 0 0.5rem;
    text-align: center;
}

/* title is sometimes wrapped in an anchor */
.elf-calc__title a {
    color: inherit;
    text-decoration: none;
}
.elf-calc__title a:hover {
    color: var(--msl-navy-2);
}

.elf-calc__subtitle {
    font-size: 0.9375rem;
    color: var(--msl-muted);
    margin: 0 0 1.75rem;
    line-height: 1.55;
    text-align: center;
}

/* ── Grid — 2 cols on desktop ────────────────────────────────────────────── */
.elf-calc__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 680px) {
    .elf-calc { padding: 1.25rem 1rem; }
    .elf-calc__grid { grid-template-columns: 1fr; }
}

/* ── Inputs column ───────────────────────────────────────────────────────── */
.elf-calc__inputs {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.elf-calc__field {
    background: var(--msl-cream);
    border: 1px solid var(--msl-line);
    border-radius: var(--msl-r-md, 12px);
    padding: 0.875rem 1rem;
}

.elf-calc__field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.elf-calc__label {
    font-family: var(--msl-font);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--msl-body);
    letter-spacing: 0.01em;
}

.elf-calc__value {
    font-family: var(--msl-font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--msl-navy);
    background: var(--msl-white);
    border: 1px solid var(--msl-line);
    border-radius: 6px;
    padding: 0.15rem 0.5rem;
    min-width: 90px;
    text-align: center;
}

/* ── Range Slider ────────────────────────────────────────────────────────── */
.elf-calc__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 99px;
    background: var(--msl-line);
    outline: none;
    cursor: pointer;
    margin: 0.25rem 0;
    direction: ltr; /* sliders always LTR so fill goes left→right */
}

.elf-calc__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--msl-amber);
    border: 2px solid var(--msl-white);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.elf-calc__slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.45);
}

.elf-calc__slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--msl-amber);
    border: 2px solid var(--msl-white);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
    cursor: pointer;
}

.elf-calc__slider:focus {
    outline: none;
}

.elf-calc__minmax {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--msl-muted);
    margin-top: 0.2rem;
}

.elf-calc__hint {
    font-size: 0.75rem;
    color: var(--msl-muted);
    margin-top: 0.35rem;
    line-height: 1.45;
}

/* ── Select (inflation calc) ─────────────────────────────────────────────── */

/* ── Result Card (aside) ─────────────────────────────────────────────────── */
.elf-calc__result-card {
    background: var(--msl-navy);
    border-radius: var(--msl-r-lg, 16px);
    padding: 1.5rem;
    color: var(--msl-white);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.elf-calc__result-label {
    font-family: var(--msl-font);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-bottom: 0.25rem;
}

.elf-calc__result-number {
    font-family: var(--msl-font);
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 800;
    color: var(--msl-amber);
    line-height: 1.05;
    display: block;
}

.elf-calc__result-desc {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0.25rem 0 0;
    line-height: 1.5;
}

/* ── Breakdown rows ──────────────────────────────────────────────────────── */
.elf-calc__breakdown {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.elf-calc__breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
}

.elf-calc__breakdown-label {
    color: rgba(255, 255, 255, 0.65);
}

.elf-calc__breakdown-value {
    font-family: var(--msl-font);
    font-weight: 700;
    color: var(--msl-white);
}

/* ── Amortization table ──────────────────────────────────────────────────── */
.elf-calc__amortization {
    background: var(--msl-white);
    border: 1px solid var(--msl-line);
    border-radius: var(--msl-r-md, 12px);
    overflow: hidden;
    margin-top: 2rem;
}

.elf-calc__amort-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.elf-calc__amort-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    direction: rtl;
}

.elf-calc__amort-table thead th {
    background: var(--msl-navy);
    color: var(--msl-white);
    font-family: var(--msl-font);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    padding: 0.625rem 0.875rem;
    text-align: right;
    white-space: nowrap;
}

.elf-calc__amort-table tbody tr:nth-child(odd) td {
    background: var(--msl-cream);
}

.elf-calc__amort-table tbody tr:nth-child(even) td {
    background: var(--msl-white);
}

.elf-calc__amort-table tbody td {
    padding: 0.5rem 0.875rem;
    color: var(--msl-body);
    border-bottom: 1px solid var(--msl-line);
    text-align: right;
}

.elf-calc__amort-table tfoot td {
    background: var(--msl-cream-2);
    font-weight: 700;
    color: var(--msl-navy);
    padding: 0.625rem 0.875rem;
    text-align: right;
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.elf-calc__cta {
    background: rgba(245, 158, 11, 0.07);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: var(--msl-r-md, 12px);
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    color: var(--msl-body);
    line-height: 1.5;
    margin-top: 0.5rem;
}

.elf-calc__cta a,
.elf-calc__cta button {
    display: inline-block;
    font-family: var(--msl-font);
    font-weight: 700;
    font-size: 0.9375rem;
    background: var(--msl-navy);
    color: var(--msl-white);
    border: none;
    border-radius: var(--msl-r-pill, 999px);
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease;
    margin-top: 0.5rem;
}

.elf-calc__cta a:hover,
.elf-calc__cta button:hover {
    background: var(--msl-navy-2);
    color: var(--msl-white);
}

/* ==========================================================================
   PENSION ANALYZER — msl-pension-app theme overrides
   Migrated from msl-open-toolkit/tools-overlay.css §5
   Sprint S-CALCULATORS-REBUILD · 2026-05-28
   ========================================================================== */

/* Progress fill — amber bar */

/* Active / done step labels */

/* Step heading */

/* Focus rings */

/* Scenario cards — hover + selected */

/* Primary button — navy */

/* Spinner */

/* Fund comparison — current fund badge */

/* Recommendation badge — navy */

/* High priority rec card border */

/* Gap reduction link color */

/* Results header font */

/* ==========================================================================
   Payslip Analyzer Tool (msl-tools-payslip)
   Added 2026-05-28 — S-TOOLS-CLEANUP. Replaces 43 inline styles + <style> block
   that were inside msl-tools-payslip.php shortcode output.
   ========================================================================== */

#msl-payslip-analyzer .msl-field {
    margin-bottom: 16px;
}
#msl-payslip-analyzer .msl-field label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
    color: #333;
}
#msl-payslip-analyzer .msl-field input[type="number"],
#msl-payslip-analyzer .msl-field select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
}
#msl-payslip-analyzer .msl-field small {
    color: #888;
    display: block;
    margin-top: 4px;
}

#msl-payslip-analyzer .msl-payslip-results {
    margin-top: 32px;
}

#msl-payslip-analyzer .msl-payslip-loading {
    text-align: center;
    padding: 40px;
}

#msl-payslip-analyzer .msl-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--msl-navy);
    border-radius: 50%;
    animation: msl-payslip-spin 1s linear infinite;
}

#msl-payslip-analyzer .msl-payslip-error {
    margin-top: 24px;
    padding: 16px;
    background: #FFEBEE;
    border-radius: 8px;
    color: #C62828;
}

@keyframes msl-payslip-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   MSL KIT CALC COMPONENTS — added 2026-06-03
   Ported from design-kit/groups/calc-system.css for use with kit markup.
   0 inline · 0 !important · tokens only.
   ========================================================================== */
/* .mc-section REMOVED — UNIFICATION M3 2026-07-02: this copy (loaded after
   kit-extensions) overrode the single-source .mc-section. Section spacing now
   lives only in --msl-section-gap (kit-extensions .mc-section routes to it). */
.mc-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--msl-sp-5); }
.mc-mt-3{ margin-top: var(--msl-sp-3); }
.mc-mt-4{ margin-top: var(--msl-sp-4); }
.mc-mt-5{ margin-top: var(--msl-sp-5); }
.mc-mt-6{ margin-top: var(--msl-sp-6); }
.mc-block-label{ display:block; margin-bottom:var(--msl-sp-3); }
@media (max-width:820px){ .mc-grid-2{ grid-template-columns:1fr; } }

.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); }

/* >>> UXAFF-1 slider-affordance — Design-Ops 2026-07-09, folded 2026-07-09 (Hotjar: taps on label/value instead of handle)
   Kit tokens only · 0 inline · 0 !important · RTL/mobile safe. */
.msl-slider-top{cursor:default}
.msl-slider-name,
.msl-slider-val,
.msl-slider-val .cur{-webkit-user-select:none;user-select:none;cursor:default}

.msl-slider-field .msl-range{
  -webkit-appearance:none;appearance:none;height:14px;border-radius:999px;
  background:var(--msl-cream-2,#e7d9bd);cursor:grab;outline-offset:3px}
.msl-slider-field .msl-range:active{cursor:grabbing}

.msl-slider-field .msl-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;
  background:var(--msl-amber,#d4a04a);border:3px solid var(--msl-navy,#06142b);
  box-shadow:0 0 0 5px rgba(212,160,74,.28),0 2px 5px rgba(6,20,43,.35);cursor:grab;
  background-image:radial-gradient(circle,var(--msl-navy,#06142b) 1.4px,transparent 1.5px);
  background-size:5px 5px;background-position:center;background-repeat:repeat-x}
.msl-slider-field .msl-range::-moz-range-thumb{
  width:30px;height:30px;border-radius:50%;background:var(--msl-amber,#d4a04a);
  border:3px solid var(--msl-navy,#06142b);
  box-shadow:0 0 0 5px rgba(212,160,74,.28),0 2px 5px rgba(6,20,43,.35);cursor:grab}
.msl-slider-field .msl-range:active::-webkit-slider-thumb{
  cursor:grabbing;box-shadow:0 0 0 7px rgba(212,160,74,.35)}

/* one-line grip hint (added element .msl-drag-hint under the first slider only) */
.msl-drag-hint{
  display:inline-flex;align-items:center;gap:5px;align-self:flex-start;width:fit-content;
  margin-top:8px;padding:3px 10px;border-radius:999px;background:rgba(212,160,74,.14);
  color:#7a5a17;font:700 11px/1 var(--msl-font,Heebo,sans-serif)}
.msl-drag-hint svg{width:13px;height:13px}

@media (prefers-reduced-motion:no-preference){
  .msl-slider-field:first-of-type .msl-range::-webkit-slider-thumb{animation:uxaff1-nudge 2.4s ease 1s 2}
  @keyframes uxaff1-nudge{
    0%,100%{box-shadow:0 0 0 5px rgba(212,160,74,.28),0 2px 5px rgba(6,20,43,.35)}
    50%{box-shadow:0 0 0 10px rgba(212,160,74,.12),0 2px 5px rgba(6,20,43,.35)}}}
/* <<< END UXAFF-1 slider-affordance */

.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); }

.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); }

/* == TRACK ROWS + CALLOUT 2026-06-03 == */
.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-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-del{width:32px;height:32px;border-radius:var(--msl-r-sm);border:1px solid var(--msl-line);background:#fff;color:var(--msl-down);font-weight:var(--msl-w-black);cursor:pointer;}
.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;}.msl-track-row .msl-track-name{grid-column:1/-1;}}
.msl-callout{padding:var(--msl-sp-4) var(--msl-sp-5);border-radius:var(--msl-r);border-right:4px solid transparent;margin:var(--msl-sp-5) 0;font-size:var(--msl-size-small);line-height:var(--msl-lh-normal);}
.msl-callout-hd{display:block;font-family:var(--msl-font);font-size:var(--msl-size-meta);font-weight:var(--msl-w-bold);letter-spacing:var(--msl-ls-label);text-transform:uppercase;margin-bottom:var(--msl-sp-2);}
.msl-callout p{margin:0 0 var(--msl-sp-2);}
.msl-callout b{font-weight:var(--msl-w-heavy);}
.msl-callout--note{background:var(--msl-cream-2);border-right-color:var(--msl-ink-strong);color:var(--msl-ink);}
.msl-callout--note .msl-callout-hd{color:var(--msl-ink-strong);}