/* ============================================================
   SHIFTSIMPLE — SHARED COMPONENTS (styles/components.css)
   ============================================================
   Buttons, section heads, forms, cards, tables, modals, the theme /
   language picker, the helper-character overlay layer, toast banners,
   sign-in cards and other UI used by more than one domain. A rule lives
   here only when at least two domains (customer / dealer / lender /
   admin) render it. */
  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:13px 22px;border-radius:2px;border:1.5px solid var(--pine);
    font-size:15px;font-weight:600;background:var(--pine);color:var(--primary-contrast);
    transition:transform .12s ease, background .15s;
  }
  .btn:hover{transform:translateY(-1px);background:var(--pine-light);box-shadow:var(--glow);}
  .btn:active{transform:translateY(0);}
  .btn-ghost{background:transparent;color:var(--pine);}
  .btn-ghost:hover{background:var(--pine);color:var(--primary-contrast);}
  .btn-gold{background:var(--gold);border-color:var(--gold);color:var(--accent-contrast);}
  .btn-gold:hover{background:var(--accent-hover);}
  .btn-sm{padding:8px 14px;font-size:13px;}
  .btn:disabled{opacity:0.45;cursor:not-allowed;transform:none;}

  /* ---------- Sections generic ---------- */
  
  .eyebrow{font-size:13px;color:var(--gold);}
  .section-head{max-width:640px;margin-bottom:44px;}
  .section-head h2{font-size:clamp(28px,4vw,38px);line-height:1.15;}
  .section-head p{color:var(--ink-soft);font-size:16px;line-height:1.6;margin-top:14px;}

  /* ============================================================
  SHIFT HELPER OVERLAY LAYER — see HELPER_PLACEMENTS / mountShiftHelpers()
  ============================================================
  Helpers are decorative overlays. The page lays itself out FIRST, exactly
  as though no helper existed; every helper is then painted on a separate
  absolutely-positioned layer anchored to its host section. A helper slot
  therefore never participates in flex/grid/document flow, never reserves
  width or height, never pushes a card or wraps a paragraph, and never
  receives pointer events. Turning the whole layer off
  (.shift-helper-slot{display:none}) moves nothing.

  WHERE a helper sits comes from ONE canonical record per helper role
  (HELPER_PLACEMENTS in the script — desktop / tablet / mobile anchors,
  applied by applyHelperPlacement() as data-anchor + CSS variables on the
  slot). WHICH artwork it shows comes from the active theme's catalog
  (SHIFT_HELPERS / SHIFT_HELPER_THEME_VARIANTS). Placement is global;
  artwork is theme-specific; no theme carries its own coordinates.

  Stacking: helpers sit above section backgrounds (z 3) and below the
  sticky nav (50), the fixed language/appearance controls (60) and modals
  (200). They are non-interactive by construction (pointer-events:none). */
  .helper-host{position:relative;}
  .helper-corner-host{position:relative;} /* legacy host marker — same meaning */
  .shift-helper-slot{
    position:absolute;
    width:var(--helper-w,110px);
    margin:0;padding:0;line-height:0;
    pointer-events:none;
    z-index:3;
    display:block;
  }
  .shift-helper-slot .shift-helper{
    display:block;width:100%;height:auto;max-width:none;margin:0;
    aspect-ratio:1/1;object-fit:contain;
  }
  /* Anchors — the outer "rails" beside a host (desktop gutters) and the
  four inside corners (tablet/mobile, only where a corner is empty). */
  /* A rail helper lives in the OUTER PAGE GUTTER — the empty band between
  the content column (.wrap) and the viewport edge — centered in that band
  (never closer to the column than --helper-gap). applyHelperPlacement()
  measures the gutter and sets --helper-rail-offset from the host's own
  edge; without a measurement (sandbox) it falls back to the plain gap. */
  .shift-helper-slot[data-anchor="rail-right"]{left:100%;margin-left:var(--helper-rail-offset,var(--helper-gap,24px));top:var(--helper-top,0);}
  .shift-helper-slot[data-anchor="rail-left"]{right:100%;margin-right:var(--helper-rail-offset,var(--helper-gap,24px));top:var(--helper-top,0);}
  .shift-helper-slot[data-anchor="rail-right"][data-edge="bottom"],
  .shift-helper-slot[data-anchor="rail-left"][data-edge="bottom"]{top:auto;bottom:var(--helper-bottom,0);}
  .shift-helper-slot[data-anchor="inside-top-right"]{right:var(--helper-inset,12px);top:var(--helper-top,12px);}
  .shift-helper-slot[data-anchor="inside-top-left"]{left:var(--helper-inset,12px);top:var(--helper-top,12px);}
  .shift-helper-slot[data-anchor="inside-bottom-right"]{right:var(--helper-inset,12px);bottom:var(--helper-bottom,12px);}
  .shift-helper-slot[data-anchor="inside-bottom-left"]{left:var(--helper-inset,12px);bottom:var(--helper-bottom,12px);}
  .shift-helper-slot[data-anchor="hidden"]{display:none;}
  /* Placed while its view was hidden (unmeasured): not painted until the
  guard has checked it on screen, so a first visit never flashes a helper
  into the gutter / off the viewport edge (sideways scroll) for a frame. */
  .shift-helper-slot[data-guard="pending"]{display:none;}
  /* A slot that has not been placed yet (script not run) stays invisible
  rather than falling into the flow. */
  .shift-helper-slot:not([data-anchor]){display:none;}
  /* ---------- Helper Characters OFF (html[data-helpers="off"]) ----------
  ONE global rule set, shared by all six themes: every helper illustration
  is removed (display:none — never opacity, so nothing intercepts a click),
  the nav profile character disappears and the brand closes the gap, and
  the "Watch a Short Video" artwork gives way to the same button's plain
  text label (in the same-height row) so the video stays reachable. Page
  content never moves: every helper is an absolutely positioned overlay
  (rail / inside corner) — no helper owns a layout column or cell, so this
  rule set only hides art and has nothing to collapse. Turning helpers
  back ON simply removes the attribute — the mounted, theme-specific art
  (refreshShiftHelperArt) is untouched. */
  html[data-helpers="off"] .shift-helper-slot{display:none !important;}
  html[data-helpers="off"] .nav-avatar{display:none !important;}
  html[data-helpers="off"] .watch-video-cta-btn img{display:none !important;}
  html[data-helpers="off"] .watch-video-cta-btn{width:auto;margin-left:0;}
  html[data-helpers="off"] .watch-video-cta{--watch-video-inset:0;}
  .watch-video-cta-text{display:none;}
  html[data-helpers="off"] .watch-video-cta-text{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1.5px solid var(--pine);color:var(--pine);font-size:13.5px;font-weight:700;font-family:inherit;background:var(--white);}

  .split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
  .card{background:var(--white);border:1px solid var(--line);padding:26px;}

  .problem-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;}
  .problem-list li{padding-left:20px;position:relative;color:var(--ink-soft);line-height:1.55;font-size:15px;}
  .problem-list li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--rust);}
  .problem-list b{color:var(--ink);}

  .compare-table{width:100%;border-collapse:collapse;font-size:14px;}
  .compare-table th,.compare-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);}
  .compare-table th{font-weight:600;color:var(--ink-soft);font-size:12.5px;}
  .compare-table tr.highlight td{background:var(--pine);color:var(--primary-contrast);}
  .compare-table tr.highlight td:first-child{font-weight:700;}
  .pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;}
  .pill-yes{background:var(--gold-soft);color:#5a4413;}
  .pill-no{background:var(--paper-dim);color:var(--ink-soft);}

  /* ---------- FORMS (shared) ---------- */
  .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
  .field label{font-size:13px;font-weight:600;color:var(--ink-soft);}
  .field .hint{font-size:12px;color:var(--ink-soft);font-weight:400;}
  input[type=text],input[type=number],input[type=email],select,textarea{
    padding:11px 12px;border:1.5px solid var(--line);background:var(--white);
    font-family:inherit;font-size:14.5px;color:var(--ink);border-radius:2px;width:100%;
  }
  input:focus,select:focus,textarea:focus{outline:2px solid var(--focus-ring);outline-offset:1px;border-color:var(--focus-ring);}
  textarea{resize:vertical;font-family:'IBM Plex Mono',monospace;font-size:13px;}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
  .form-grid .field.full{grid-column:1/-1;}

  .empty-state{
    padding:34px 26px;border:1.5px dashed var(--line);text-align:left;color:var(--ink-soft);font-size:14.5px;line-height:1.6;
  }

  /* ---------- Dealer inventory connections (provider feeds) ---------- */
  .inv-conn-card{background:var(--white);border:1px solid var(--line);padding:18px 20px;margin-bottom:14px;}
  .inv-conn-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;}
  .inv-conn-title{font-family:'Fraunces',serif;font-size:17px;font-weight:600;}
  .inv-conn-status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;margin-top:4px;}
  .inv-dot{width:9px;height:9px;border-radius:50%;background:var(--ink-soft);flex:0 0 auto;}
  .inv-dot.ACTIVE{background:var(--money);}
  .inv-dot.PENDING_ADMIN_APPROVAL,.inv-dot.NEEDS_INFORMATION{background:var(--gold);}
  .inv-dot.CONNECTION_FAILED{background:var(--rust);}
  .inv-conn-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 18px;font-size:13px;color:var(--ink-soft);margin-top:12px;}
  .inv-conn-meta b{color:var(--ink);display:block;font-weight:600;}
  .inv-conn-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
  .inv-conn-note{font-size:13px;margin-top:10px;padding:10px 12px;background:var(--paper-dim);border-left:3px solid var(--gold);}
  .inv-conn-note.err{border-left-color:var(--rust);}
  .inv-conn-details{display:none;margin-top:12px;font-size:12.5px;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:10px;}
  .inv-conn-details.show{display:block;}
  .inv-connect-box{max-width:560px;}
  .inv-connect-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 14px;}
  .inv-connect-choice button{background:var(--white);border:1px solid var(--line);padding:10px 12px;text-align:left;font-size:13.5px;font-weight:600;color:var(--pine);cursor:pointer;font-family:inherit;}
  .inv-connect-choice button.active{border-color:var(--pine);background:var(--paper-dim);}
  .inv-connect-hint{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:12px;}
  .inv-secret-note{font-size:11.5px;color:var(--ink-soft);margin-top:-8px;margin-bottom:12px;}
  @media (max-width:600px){ .inv-connect-choice{grid-template-columns:1fr;} }

  .tier-tag{font-size:11px;padding:2px 7px;border-radius:20px;background:var(--paper-dim);color:var(--ink-soft);font-weight:600;}

  .link-btn-positive{background:none;border:none;color:var(--pine);font-size:13px;font-weight:600;cursor:pointer;padding:0;font-family:inherit;}
  .link-btn-positive:hover{text-decoration:underline;}

  /* ---------- utility ---------- */
  .view{display:none;}
  .view.active{display:block;}
  .center{text-align:center;}
  .req-star{color:var(--rust);}

  /* ---------- REJECT MODAL ---------- */
  .modal-backdrop{display:none;position:fixed;inset:0;background:rgba(18,21,26,0.55);z-index:200;align-items:center;justify-content:center;padding:20px;}
  .modal-backdrop.show{display:flex;}
  .modal-box{background:var(--white);max-width:440px;width:100%;padding:26px;max-height:86vh;overflow-y:auto;}
  .modal-box h3{font-size:18px;margin-bottom:14px;}
  .reason-list{display:flex;flex-direction:column;gap:2px;margin-bottom:18px;}
  .reason-opt{display:flex;align-items:center;gap:10px;padding:9px 4px;font-size:14px;border-bottom:1px solid var(--paper-dim);}
  .reason-opt input{width:auto;}

  /* ---------- SKIN/THEME PICKER ---------- */
  .theme-picker-box{max-width:640px;position:relative;padding:32px 30px;}
  .theme-picker-box h3{font-family:'Fraunces',serif;font-size:24px;font-weight:600;margin-bottom:8px;}
  .theme-picker-sub{font-size:14px;color:var(--ink-soft);line-height:1.55;margin-bottom:22px;max-width:480px;}
  /* ---------- Appearance → Helper Characters (ON/OFF switch) ----------
  One global preference (ss-helpers in localStorage, html[data-helpers="off"]) —
  the same storage system the skin and language use. The switch is a real
  <button role="switch" aria-checked>: native keyboard activation, state
  announced, and every color is a theme token so the ON/OFF state reads
  in all six skins. */
  .pref-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
  .pref-label{font-size:14px;font-weight:600;color:var(--ink);}
  .pref-sub{font-size:12.5px;color:var(--ink-soft);margin-top:2px;line-height:1.45;}
  .switch{display:inline-flex;align-items:center;gap:9px;background:none;border:none;padding:4px;cursor:pointer;font-family:inherit;color:var(--ink);flex:0 0 auto;border-radius:24px;}
  .switch:focus-visible{outline:2px solid var(--pine);outline-offset:2px;}
  .switch-track{position:relative;width:44px;height:24px;border-radius:12px;background:var(--line);border:1.5px solid var(--ink-soft);transition:background .15s,border-color .15s;flex:0 0 auto;}
  .switch-thumb{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--white);border:1px solid var(--ink-soft);transition:transform .15s;}
  .switch[aria-checked="true"] .switch-track{background:var(--pine);border-color:var(--pine);}
  .switch[aria-checked="true"] .switch-thumb{transform:translateX(20px);background:var(--primary-contrast);border-color:var(--pine);}
  .switch-state{font-size:12.5px;font-weight:700;letter-spacing:0.4px;min-width:28px;text-align:left;color:var(--ink);}
  .switch-sm .switch-track{width:38px;height:21px;}
  .switch-sm .switch-thumb{width:15px;height:15px;top:1.5px;}
  .switch-sm[aria-checked="true"] .switch-thumb{transform:translateX(17px);}
  .switch-sm .switch-state{font-size:12px;}
  .theme-select-bar .switch{margin-left:6px;}
  .theme-select-bar .switch-label{font-size:13px;font-weight:600;color:var(--ink-soft);}
  @media (max-width:600px){ .pref-row{align-items:flex-start;} }
  /* Appearance → Music track picker: numbers only (1 2 3 4 5 6), no titles,
  as pill buttons matching the questionnaire's .chip pills (customer.css is
  not loaded with the Appearance panel, so the look is repeated here). Real
  radio buttons (role=radio + aria-checked); the selected one is filled.
  Rendered by renderMusicTracks() in src/core/theme.js. */
  #music-pref-row{flex-wrap:wrap;position:relative;padding-top:6px;padding-bottom:18px;gap:8px;}
  #music-pref-row > div:first-child{flex:1 1 0;min-width:0;}
  .music-controls{display:flex;align-items:center;flex-wrap:wrap;gap:4px;flex:0 0 100%;}
  .music-tracks{display:contents;}
  .music-controls .music-track{min-width:30px;padding:6px 8px;font-size:12px;}
  .music-controls .switch{margin-left:auto;}
  .music-play-all{white-space:nowrap;}
  .music-play-all[aria-pressed="true"]{background:var(--pine);border-color:var(--pine);color:var(--primary-contrast);}
  .music-radio-credit{position:absolute;bottom:0;left:0;right:0;font-size:10px;line-height:14px;color:var(--ink-soft);text-align:center;}
  .music-track{min-width:40px;padding:8px 12px;border:1.5px solid var(--line);border-radius:20px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;background:var(--white);color:var(--ink-soft);user-select:none;transition:background .12s,color .12s;}
  .music-track:hover{border-color:var(--pine);}
  .music-track:focus-visible{outline:2px solid var(--pine);outline-offset:2px;}
  .music-track[aria-checked="true"]{background:var(--pine);border-color:var(--pine);color:var(--primary-contrast);box-shadow:var(--glow);}
  .theme-picker-x{
    position:absolute;top:18px;right:18px;background:none;border:none;
    font-size:22px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:4px 8px;
  }
  .theme-picker-x:hover{color:var(--ink);}
  .theme-picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  .theme-card{
    display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;
    background:var(--white);border:1.5px solid var(--line);border-radius:4px;
    padding:14px 14px 16px;cursor:pointer;transition:border-color .12s,transform .12s;
  }
  .theme-card:hover{border-color:var(--pine);transform:translateY(-1px);}
  .theme-card.selected{border-color:var(--pine);border-width:2px;box-shadow:var(--glow);}
  .theme-card-swatch{display:flex;width:100%;height:34px;border-radius:3px;overflow:hidden;border:1px solid var(--line);}
  .theme-card-swatch span{flex:1;height:100%;}
  .theme-card-name{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .theme-card-current{font-size:10px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;color:var(--money);background:var(--money-soft);border-radius:10px;padding:2px 7px;}
  .theme-card-tag{font-size:12px;color:var(--ink-soft);line-height:1.4;}
  @media (prefers-reduced-motion: reduce){
    .theme-card{transition:none;}
    .theme-card:hover{transform:none;}
  }
  /* ---------- LANGUAGE PICKER (same modal, shown above Appearance) ---------- */
  .lang-picker-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:26px;}
  .lang-card{
    display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;
    background:var(--white);border:1.5px solid var(--line);border-radius:4px;
    padding:15px 16px;cursor:pointer;transition:border-color .12s,transform .12s;
    font-size:15px;font-weight:600;color:var(--ink);
  }
  .lang-card:hover{border-color:var(--pine);transform:translateY(-1px);}
  .lang-card.selected{border-color:var(--pine);border-width:2px;box-shadow:var(--glow);}
  .lang-card-current{font-size:10px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;color:var(--money);background:var(--money-soft);border-radius:10px;padding:2px 7px;}
  .theme-picker-continue-wrap{display:none;margin-top:8px;}
  .theme-picker-continue-wrap.show{display:block;}
  @media (prefers-reduced-motion: reduce){
    .lang-card{transition:none;}
    .lang-card:hover{transform:none;}
  }
  @media (max-width: 720px){
    .theme-picker-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width: 480px){
    .theme-picker-grid{grid-template-columns:1fr;gap:10px;max-height:60vh;overflow-y:auto;}
    .theme-picker-box{padding:26px 20px;}
  }

  /* ---------- DEALER LANDING / SIGN-IN / ADMIN ---------- */
  .narrow-card{max-width:440px;margin:0 auto;background:var(--white);border:1px solid var(--line);padding:34px 32px;}
  .signed-in-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--white);border:1px solid var(--line);padding:16px 20px;margin-bottom:32px;}
  .signed-in-bar .who{font-size:14px;color:var(--ink-soft);}
  .signed-in-bar .who b{color:var(--ink);font-family:'Fraunces',serif;font-size:16px;}
  .link-btn{background:none;border:none;color:var(--rust);font-size:13px;font-weight:600;cursor:pointer;padding:0;font-family:inherit;}
  .disclosure-note{font-size:11.5px;color:var(--ink-soft);background:var(--paper-dim);border:1px dashed var(--line);padding:9px 12px;margin-top:14px;line-height:1.5;}
  .admin-table{width:100%;border-collapse:collapse;font-size:13.5px;}
  /* ---------- Top scrollbar for wide tables ----------
  A second horizontal scrollbar rendered ABOVE a wide table (the leads
  list), kept in lockstep with the table wrapper's own scrollLeft by
  initTopScrollbar(). The table keeps its natural column widths and its
  normal bottom scrollbar; this strip only appears (.is-active) while the
  table is actually wider than its container, and stays out of the phone
  layout, where the table is swiped directly. */
  .table-top-scroll{display:none;overflow-x:auto;overflow-y:hidden;height:18px;margin-bottom:4px;}
  .table-top-scroll.is-active{display:block;}
  .table-top-scroll-inner{height:1px;}
  @media (max-width:600px){ .table-top-scroll{display:none !important;} }
  /* attachWideScroll() (src/core/ui.js): ◀ strip ▶ above a wide area, only
  while it overflows; hidden for touch phones, which swipe the area itself. */
  .wide-scroll-bar{display:none;align-items:center;gap:6px;margin-bottom:6px;}
  .wide-scroll-bar.is-active{display:flex;}
  .wide-scroll-bar .wide-scroll-strip{flex:1;min-width:0;margin-bottom:0;}
  .wide-scroll-btn{flex:0 0 auto;width:34px;height:28px;border:1px solid var(--line);border-radius:8px;background:var(--card, #fff);color:var(--ink);font-size:13px;cursor:pointer;line-height:1;}
  .wide-scroll-btn:hover:not(:disabled){border-color:var(--pine);}
  .wide-scroll-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
  .wide-scroll-btn:disabled{opacity:.4;cursor:default;}
  [role="region"][tabindex="0"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
  /* Classic, always-visible scrollbars (not hidden overlays) on the strip. */
  .wide-scroll-strip::-webkit-scrollbar{height:12px;}
  .wide-scroll-strip::-webkit-scrollbar-thumb{background:var(--ink-soft);border-radius:6px;}
  .wide-scroll-strip::-webkit-scrollbar-track{background:var(--line);border-radius:6px;}
  @media (max-width:600px) and (pointer:coarse){ .wide-scroll-bar{display:none !important;} }
  .admin-table th{text-align:left;padding:9px 10px;border-bottom:1.5px solid var(--pine);font-size:11.5px;color:var(--ink-soft);font-weight:600;}
  .admin-table td{padding:9px 10px;border-bottom:1px solid var(--line);}

  /* Password show / hide control (src/core/ui.js mountPasswordToggles) */
  .pw-field{position:relative;display:block;width:100%;}
  .pw-field input{width:100%;box-sizing:border-box;padding-right:46px;}
  .pw-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:4px;color:var(--ink-soft);cursor:pointer;padding:0;}
  .pw-toggle:hover{color:var(--pine);background:var(--paper-dim);}
  .pw-toggle:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px;}
  .pw-toggle[aria-pressed="true"]{color:var(--pine);}
  .toast-banner{display:none;background:#E5EFE7;border:1px solid #1F4A2E33;color:#1F4A2E;padding:12px 16px;font-size:13.5px;margin-top:14px;}
  .toast-banner.show{display:block;}
  .toast-banner.err{background:#F3E1DC;color:var(--rust);border-color:#A8402B33;}

  /* Tablet-and-below overrides (max-width:860px) for the rules above — kept in
  this file, after them, so the cascade is exactly what it was when they all
  lived in one shared media block. */
  @media (max-width:860px){
    .split{grid-template-columns:1fr;}
    .form-grid{grid-template-columns:1fr;}
    .compare-table{font-size:12.5px;}
    .signed-in-bar{flex-direction:column;align-items:flex-start;}
  }
  /* ---------- TEST MODE badge (/1 only, src/core/test-mode.js) ----------
  Small, fixed bottom-left (the theme / language buttons are bottom-right),
  never clickable so it can never cover or steal a tap from a control, and
  not printed (styles/print.css). Production pages never render it. */
  #ss-test-mode-badge{position:fixed;left:12px;bottom:12px;z-index:65;pointer-events:none;
    font:700 11px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:0.08em;color:#fff;
    background:#B3261E;border-radius:999px;padding:6px 10px;opacity:0.92;box-shadow:0 1px 4px rgba(0,0,0,0.25);}