/* sr-calc-mobile.css — mobile + tablet responsive pass for sr-calc.
   Lives OUTSIDE /tmp/extract-sr-calc.mjs's output so it can't be
   silently dropped when the extractor regenerates sr-calc.css from
   hub.html — a bug that stripped this file six times between
   2026-07-09 and 2026-07-14 (the extractor's selector filter is
   `.srcalc-*` / `.ref-chip` only; @media wrappers don't match, so
   every media query got treated as an "unknown top-level rule"
   and dropped in full, taking the .srcalc-* rules INSIDE them
   with it).

   Rules here override .srcalc-*, .page-body, .article-shell,
   .article-aside for viewports ≤1199px. Load this file in
   safety-ratios.html AFTER sr-calc.css so the media queries take
   precedence for their viewport ranges.
*/
  @media (max-width: 500px) {
    /* Full-bleed the container stack. On mobile the calc IS the page;
       there's no need for the article-shell's marketing gutter. */
    .page-body           { padding-top: 1rem; padding-bottom: 3rem; }
    .page-body .wrap     { padding-left: 0; padding-right: 0; }
    .article-wrap        { padding: 1rem 0 3rem; }
    .article-column      { padding: 0; }
    .srcalc-page {
      border-left: 0; border-right: 0;
      border-radius: 0;
      margin-top: 0;
    }
    .srcalc-wrap {
      padding: 16px 12px 24px;
      max-width: none;
    }
    .srcalc-hero { margin-bottom: 12px; padding: 0 4px; }
    .srcalc-h1   { font-size: 22px; line-height: 1.25; }
    .srcalc-byline { font-size: 13px; margin-bottom: 8px; }
    .srcalc-sub  { font-size: 13px; }

    /* Card body loses its interior padding — the grid's own scroller
       provides the visual edge instead. */
    .srcalc-card { border-radius: 8px; overflow: visible; }
    .srcalc-card-head { padding: 10px 12px; }
    .srcalc-card-body { padding: 0; }

    /* Control strip stacks — each row full-width, both columns collapse
       into one flow. Ctrl-col.right was aligned flex-end on desktop;
       stretch it to fill the row on mobile. */
    .srcalc-controls {
      flex-direction: column;
      gap: 10px;
      padding: 12px 12px;
    }
    .srcalc-controls .ctrl-col {
      width: 100%;
      align-items: stretch;
      min-width: 0;
    }
    .srcalc-controls .ctrl-col.right { align-items: stretch; }
    .srcalc-controls .ctrl-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .srcalc-controls .lbl {
      width: 80px;
      min-width: 80px;
      text-align: left;
      font-size: 10px;
    }
    .srcalc-controls select,
    .srcalc-controls input[type="date"] {
      flex: 1;
      min-width: 0;
      min-height: 40px;   /* 40px = accessible tap target */
      font-size: 14px;
    }
    .srcalc-fte-note-inline { margin-left: 0; font-size: 10px; max-width: none; }

    /* Grid: this is the key rebuild. The scroller becomes the actual
       overflow-x container so the grid can be wider than the viewport
       and scroll horizontally without clipping. Removes the border
       shrink from earlier and lets the calc breathe edge-to-edge. */
    .srcalc-grid-scroll {
      overflow-x: auto;
      overflow-y: hidden;
      border-radius: 0;
      border-left: 0;
      border-right: 0;
      -webkit-overflow-scrolling: touch;
    }
    .srcalc-grid { min-width: 100%; }
    .srcalc-grid col.label-col { width: 110px; }
    .srcalc-grid col.month-col { min-width: 62px; }
    .srcalc-grid th, .srcalc-grid td {
      padding: 5px 6px;
      font-size: 11px;
    }
    .srcalc-grid tbody td input {
      font-size: 13px;
      padding: 4px 5px;
      min-height: 32px;
      width: 100%;
      box-sizing: border-box;
    }

    /* Basis toggle lifted to a full-width band above the grid, so
       the 4-period header row doesn't have to share space with it.
       Cell in the table stays (colgroup + row structure needs the
       th) but empty and slim so the period labels get the full row. */
    .srcalc-basis-strip {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: #eef2f7;
      border-bottom: 1px solid #e2e8f0;
    }
    .srcalc-basis-strip .lbl {
      font-size: 10px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .srcalc-basis-strip .mode-toggle {
      flex: 1;
      display: inline-flex;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      overflow: hidden;
    }
    .srcalc-basis-strip .mode-btn {
      appearance: none;
      background: #ffffff;
      border: 0;
      flex: 1;
      padding: 8px 10px;
      font: inherit;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .srcalc-basis-strip .mode-btn + .mode-btn { border-left: 1px solid #cbd5e1; }
    .srcalc-basis-strip .mode-btn.active { color: #fff; }
    .srcalc-basis-strip .mode-btn.active[data-mode="workforce"] { background: #2563eb; }
    .srcalc-basis-strip .mode-btn.active[data-mode="hours"]     { background: #0284c7; }

    /* Emptied basis-header cell — retains its width slot but shows
       nothing. Keeps period labels centered in the actual data area. */
    .srcalc-grid thead th.basis-header.basis-header-mobile-empty {
      padding: 4px 6px;
      background: #e2e8f0;
    }

    /* Rate row footer — tighter chip so ref benchmark still fits. */
    .srcalc-grid tfoot th, .srcalc-grid tfoot td { padding: 5px 6px; font-size: 11px; }
    .srcalc-grid tfoot th .ref-chip { font-size: 9px; margin-left: 3px; }

    /* Export toolbar — repositioned as compact icon-only buttons at
       the bottom-right of the result block. Position: absolute so the
       toolbar doesn't take chart real-estate at the top; result block
       becomes position: relative so absolute-child anchors right.
       Text label hidden; icon (16×16 SVG) remains for the tap target. */
    .srcalc-result { position: relative; }
    .srcalc-toolbar {
      position: absolute;
      right: 8px;
      bottom: 8px;
      z-index: 2;
      flex-direction: row;
      align-items: center;
      gap: 4px;
      padding: 0;
      background: transparent;
      border: 0;
    }
    .srcalc-toolbar button {
      width: 32px;
      height: 32px;
      padding: 0;
      border-radius: 8px;
      background: rgba(255,255,255,0.85);
      border: 1px solid #cbd5e1;
      color: #475569;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0;   /* collapse any inherited text sizing */
    }
    .srcalc-toolbar button:hover { color: #0f172a; background: #ffffff; }
    .srcalc-toolbar button svg  { display: block; }
    .srcalc-toolbar-btn-label { display: none; }  /* label hidden on mobile */

    /* Trailing padding after the last data-entry column — a scrollable
     * spacer so the rightmost period doesn't sit flush against the
     * viewport edge (the momentum scroll on iOS in particular reads
     * flush cells as "end of content" and cuts off the last chunk).
     * Uses transparent right border on the last th/td so the extra
     * width participates in table layout + is included in the
     * scroll extent. */
    .srcalc-grid th:last-child,
    .srcalc-grid td:last-child {
      border-right: 16px solid transparent;
    }

    /* Chart card wraps a scrollable SVG. Chart itself stays 340px tall
       and shrinks its own margins internally; the wrapper never causes
       horizontal scroll. */
    .srcalc-chart { height: 340px; }
    .srcalc-results { gap: 20px; padding: 0 4px; }
    .srcalc-result h3 { font-size: 15px; }
    .srcalc-result .sub { font-size: 11px; }

    /* Stat tiles reflow to 2 columns at 50% - gap. */
    .srcalc-tiles { gap: 6px; padding: 0 4px; }
    .srcalc-tile {
      flex: 1 1 calc(50% - 6px);
      font-size: 11px;
      padding: 8px 10px;
    }

    /* Snapshot footnote gets a bit of horizontal padding since the
       parent lost its own. */
    .srcalc-footnote { margin-top: 10px; padding: 0 12px; font-size: 10px; }
  }

  /* ── Mid-tier tablet / large-phone (501–900px, 6–8 buckets) ───────
     Softer treatment than the ≤500px full-bleed. Restores the outer
     wrappers' padding so the calc sits inside the article shell like
     the rest of the site (aside cards are already handled by the
     ≤999px block below). Stack the controls vertically since 6-8
     bucket grids still crowd a 2-col control strip below ~900px,
     but keep the text-labeled toolbar and in-header basis toggle. */
  @media (min-width: 501px) and (max-width: 900px) {
    .srcalc-wrap { padding: 22px 16px 30px; }
    .srcalc-hero { margin-bottom: 16px; }
    .srcalc-h1   { font-size: 26px; }

    /* Controls: single column with each row full-width, but retain
       the light-slate strip aesthetics of the default. */
    .srcalc-controls {
      flex-direction: column;
      gap: 10px;
    }
    .srcalc-controls .ctrl-col {
      width: 100%;
      align-items: stretch;
      min-width: 0;
    }
    .srcalc-controls .ctrl-col.right { align-items: stretch; }
    .srcalc-controls .ctrl-row { gap: 10px; }
    .srcalc-controls .lbl {
      width: 90px;
      min-width: 90px;
      text-align: right;
    }
    .srcalc-controls select,
    .srcalc-controls input[type="date"] {
      flex: 1;
      min-height: 38px;
    }

    /* Grid columns tighten slightly for 6-8 bucket display. */
    .srcalc-grid col.label-col { width: 140px; }
    .srcalc-grid col.month-col { min-width: 78px; }
    .srcalc-grid th, .srcalc-grid td { padding: 7px 10px; font-size: 12px; }
    .srcalc-grid tbody td input { font-size: 13px; min-height: 34px; }

    /* Toolbar keeps text + icon labels but sits inline at the top of
       the result block (default position) — no absolute float. */
    .srcalc-toolbar { padding: 10px 14px; gap: 8px; }
    .srcalc-toolbar button { min-height: 36px; padding: 6px 12px; font-size: 12px; }
  }

  /* Aside cards below the chart on anything <1200px. article-bundle.css
     switches .article-shell to a 7fr/3fr grid at ≥1000px and reveals
     the .article-aside as a sticky sidebar; but the 3fr column at
     1000-1199px is too narrow to comfortably fit the four brand cards
     alongside a calc that already only shows 10 buckets. Force the
     bottom-stack until the desktop viewport gets wide enough to
     comfortably host both. */
  @media (max-width: 1199px) {
    .article-shell {
      display: block !important;
    }
    .article-aside {
      display: flex !important;
      flex-direction: column;
      gap: 12px;
      margin: 20px 12px 0;
      position: static;
    }
    .article-aside .aside-card {
      padding: 14px 16px;
    }
  }

  /* Responsive srcalc-row grid — historically inline in hub.html <style>
     around .srcalc-row, but the extractor drops @media rules there so
     they never shipped in production. Consolidated here. */
  @media (max-width: 720px) { .srcalc-row { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .srcalc-row { grid-template-columns: 1fr; } }