/* ==========================================================================
   CalSTRS calculator — page-specific components
   Loaded ONLY by /playground/calstrs/. main.css is never modified, so nothing
   here can regress another page.

   Every colour is a main.css token. Light mode only, matching the rest of the
   site — the standalone build's prefers-color-scheme blocks are deliberately
   not ported. Amber TEXT uses --amber-text (--amber is graphics-only and fails
   contrast below ~18px).
   ========================================================================== */

@layer components {

  /* ── page rhythm ──────────────────────────────────────────────────── */
  .calc-lede {
    font-size: 1.125rem; color: var(--ink-soft);
    max-width: 66ch; margin-top: var(--s2);
  }
  .calc-body { padding-block: var(--s6) var(--s12); }
  .calc-body h2 {
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    margin-top: var(--s8); margin-bottom: var(--s2);
  }
  .calc-body h3 {
    font-family: var(--sans); font-weight: 700; font-size: 1.0625rem;
    margin-top: var(--s4); margin-bottom: var(--s1);
  }
  .calc-prose { max-width: 76ch; }
  .calc-prose p, .calc-prose li { color: var(--ink-soft); }
  .calc-prose li { margin-bottom: var(--s1); }
  .calc-prose li::marker { color: var(--emerald); }
  .calc-prose strong { color: var(--ink); }
  .calc-note { font-size: var(--fs-small); color: var(--ink-soft); }

  .calc-card {
    background: #fff; border: 1px solid var(--rule-soft);
    border-radius: var(--radius-sm); padding: var(--s4);
    margin: var(--s3) 0;
  }

  .calc-disclaimer {
    margin-top: var(--s8); padding-top: var(--s3);
    border-top: 1px solid var(--rule);
  }
  .calc-disclaimer p {
    font-size: var(--fs-small); color: var(--ink-soft); margin-bottom: var(--s1);
  }

  /* ── formula strip ────────────────────────────────────────────────── */
  .formula { display: flex; align-items: stretch; gap: var(--s1); flex-wrap: wrap; }
  .fbox {
    flex: 1 1 170px; min-width: 150px;
    background: var(--paper-deep); border-radius: var(--radius-sm);
    padding: var(--s2);
  }
  .fbox .k {
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft);
  }
  .fbox .v { font-size: .9375rem; margin-top: 3px; color: var(--ink); }
  .fbox.out { background: var(--emerald-soft); }
  .fop {
    display: flex; align-items: center; font-size: 1.375rem;
    color: var(--ink-soft); font-weight: 700; padding-inline: 2px;
  }

  /* ── inputs ───────────────────────────────────────────────────────── */
  .calc-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--s3);
  }
  .calc-body label {
    display: block; font-size: var(--fs-small); font-weight: 700;
    color: var(--ink); margin-bottom: 5px;
  }
  .calc-body .hint {
    display: block; font-weight: 400; color: var(--ink-soft);
    font-size: var(--fs-eyebrow); margin-top: 3px; line-height: 1.4;
  }
  .calc-body input[type="number"],
  .calc-body select {
    width: 100%; padding: 9px 11px; font-size: 1rem;
    font-family: var(--sans); color: var(--ink);
    background: var(--paper); border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
  }
  .calc-body input[type="number"]:focus-visible,
  .calc-body select:focus-visible {
    outline: 2px solid var(--emerald); outline-offset: 1px;
  }
  .agepair { display: flex; gap: var(--s1); }
  .agepair > * { flex: 1; }

  .checkrow {
    display: flex; gap: 9px; align-items: flex-start;
    margin-top: var(--s3);
  }
  .checkrow input { margin-top: 4px; flex: none; accent-color: var(--emerald); }
  .checkrow label {
    margin: 0; font-weight: 400; font-size: var(--fs-small); color: var(--ink-soft);
  }

  /* ── teacher / administrator toggle ───────────────────────────────── */
  .segmented {
    display: inline-flex; background: var(--paper-deep);
    border: 1px solid var(--rule); border-radius: var(--radius-sm);
    padding: 3px; gap: 3px;
  }
  .seg {
    font: inherit; font-size: .9375rem; font-weight: 700;
    color: var(--ink-soft); background: transparent; border: 0;
    border-radius: 9px; padding: 8px 18px; cursor: pointer;
  }
  .seg.on { background: var(--emerald); color: #fff; }
  .seg:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
  .segnote { margin: var(--s1) 0 var(--s3); }

  .adminonly { display: none; }
  body.admin .adminonly { display: block; }

  .warn {
    background: var(--amber-soft); border-left: 4px solid var(--amber);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: var(--s2) var(--s3); margin: var(--s3) 0;
  }
  .warn h4 {
    margin: 0 0 5px; font-family: var(--sans); font-size: .9375rem;
    font-weight: 700; color: var(--ink);
  }
  .warn p { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); }

  /* ── retirement-age slider ────────────────────────────────────────── */
  .sliderwrap {
    margin-top: var(--s3); padding-top: var(--s3);
    border-top: 1px solid var(--rule-soft);
  }
  .sliderhead {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--s2); flex-wrap: wrap;
  }
  .sliderhead .big {
    font-family: var(--mono); font-size: 1.25rem; font-weight: 700; color: var(--ink);
  }
  .calc-body input[type="range"] {
    width: 100%; margin-top: var(--s1); accent-color: var(--emerald);
  }
  .ticks {
    display: flex; justify-content: space-between;
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    color: var(--ink-soft); margin-top: 2px; font-variant-numeric: tabular-nums;
  }

  /* ── result panel ─────────────────────────────────────────────────── */
  .result {
    background: #fff; border: 1px solid var(--rule-soft);
    border-left: 5px solid var(--emerald); border-radius: var(--radius-sm);
    padding: var(--s4); margin: var(--s3) 0;
  }
  .herosub { font-size: .9375rem; color: var(--ink-soft); }
  .hero {
    font-family: var(--mono); font-size: clamp(2.5rem, 7vw, 3.75rem);
    line-height: 1; font-weight: 700; letter-spacing: -.03em;
    color: var(--ink); margin: 2px 0; font-variant-numeric: tabular-nums;
  }
  .stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--s2); margin-top: var(--s3); padding-top: var(--s3);
    border-top: 1px solid var(--rule-soft);
  }
  .stat .k {
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft);
  }
  .stat .v {
    font-family: var(--mono); font-size: 1.3125rem; font-weight: 700;
    margin-top: 2px; color: var(--ink); font-variant-numeric: tabular-nums;
  }
  .flag {
    margin-top: var(--s2); padding: 11px 14px; border-radius: 9px;
    font-size: var(--fs-small); background: var(--amber-soft); color: var(--ink);
  }
  .flag.ok { background: var(--emerald-soft); }
  .flag b { font-weight: 700; }

  /* ── chart ────────────────────────────────────────────────────────── */
  .chartcard { position: relative; }
  .chartcard svg { display: block; width: 100%; height: auto; overflow: visible; }
  .tip {
    position: absolute; pointer-events: none; opacity: 0;
    transition: opacity .1s; background: var(--ink); color: var(--paper-on-ink);
    padding: 8px 11px; border-radius: 8px; font-size: var(--fs-small);
    line-height: 1.4; white-space: nowrap;
    transform: translate(-50%, -115%); z-index: 5;
  }
  .tip b { font-weight: 700; }

  /* ── tables ───────────────────────────────────────────────────────── */
  .tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .calc-body table {
    border-collapse: collapse; width: 100%; font-size: var(--fs-small);
    font-variant-numeric: tabular-nums; min-width: 620px;
  }
  .calc-body th, .calc-body td {
    padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--rule-soft);
  }
  .calc-body th:first-child, .calc-body td:first-child { text-align: left; }
  .calc-body thead th {
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft);
    font-weight: 700; border-bottom: 1px solid var(--rule);
  }
  .calc-body tbody tr.sel { background: var(--emerald-soft); }
  .calc-body tbody tr.sel td { font-weight: 700; color: var(--ink); }
  .mile { color: var(--amber-text); font-weight: 700; }

  /* the creditable-compensation counts table is prose, not figures */
  .counts { min-width: 0; }
  .counts td { text-align: left; }
  .counts td:first-child {
    width: 1%; white-space: nowrap; padding-right: var(--s2); font-weight: 700;
  }
  .counts .yes { color: var(--emerald); }
  .counts .no  { color: var(--amber-text); }

  /* ── milestones ───────────────────────────────────────────────────── */
  .milestones {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s2); margin-top: var(--s2);
  }
  .ms {
    background: #fff; border: 1px solid var(--rule-soft);
    border-radius: var(--radius-sm); padding: var(--s3);
  }
  .ms .n {
    font-family: var(--mono); font-size: var(--fs-eyebrow); font-weight: 700;
    color: var(--emerald); text-transform: uppercase; letter-spacing: .08em;
  }
  .ms h3 { margin: 4px 0 6px; font-size: 1rem; }
  .ms p { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }

  @media print {
    .site-header, .site-footer, .segmented, .tip { display: none; }
    .calc-card, .result, .ms { box-shadow: none; }
  }
}

/* ==========================================================================
   Playground shelf (/playground/) — the feature card that fronts each tool.
   Lives here rather than main.css so the shelf and the tool share one file
   and main.css stays untouched.
   ========================================================================== */
@layer components {
  .pg-feature {
    display: block; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid var(--rule-soft);
    border-left: 5px solid var(--emerald); border-radius: var(--radius);
    padding: var(--s5); margin-block: var(--s3);
    transition: transform var(--t, .2s) var(--ease), box-shadow var(--t, .2s) var(--ease);
  }
  .pg-feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
  .pg-feature h2 {
    margin-top: var(--s1); margin-bottom: var(--s1);
    font-size: clamp(1.5rem, 3vw, 2rem);
  }
  .pg-feature .pcard-blurb { margin-bottom: var(--s3); max-width: 62ch; }
  .pg-foot { margin-top: var(--s5); max-width: 76ch; }
}

/* ==========================================================================
   Supplemental savings — the pension + savings total.
   Hidden entirely until the reader enters a balance, so a teacher who only
   wants the pension never sees an extra number to interpret.
   ========================================================================== */
@layer components {
  .totalstrip {
    margin-top: var(--s3); padding-top: var(--s3);
    border-top: 1px solid var(--rule-soft);
  }
  .totalstrip[hidden] { display: none; }
  .totalstrip .sum {
    font-family: var(--mono); font-size: var(--fs-small);
    color: var(--ink-soft); font-variant-numeric: tabular-nums;
  }
  .totalstrip .grand {
    font-family: var(--mono); font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    font-weight: 700; letter-spacing: -.02em; color: var(--emerald);
    line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums;
  }
  .totalstrip .caveat {
    font-size: var(--fs-eyebrow); color: var(--ink-soft); margin-top: 4px;
  }
}