/* ═══════════════════════════════════════════════════════════════════════
   AMPAM READABLE — the shared mobile-first LEGIBILITY layer (2026-08-06)
   ONE token system for DASH (dash.html) + NIBIRU (/nibiru/). Load AFTER
   /css/ampam-tokens.css in both surfaces so these win.

   Purpose (Ray's brief): the DASH is the driving/approval surface — it must
   be readable at a glance behind the wheel. Keep the DESIGN.md gold/glass
   hallmark identity, but on phones PRIORITISE LEGIBILITY over subtlety:
   bigger fonts, real contrast (kill the dark-on-dark), clearly separated
   high-contrast panels, thumb-sized targets.

   Scope: everything here is inside @media (max-width:860px) — desktop HUDs
   are byte-unchanged. NIBIRU contrast is scoped to body:not(.trad) so the
   parchment light theme stays intact.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── readable type scale (the floors) ─────────────────────────────── */
  --rd-fs-micro: 13px;   /* smallest mono label allowed (was 6.8–8.5px)   */
  --rd-fs-label: 15px;   /* pills, chips, nav, small buttons              */
  --rd-fs-body:  16.5px; /* rows, table cells, inputs, secondary          */
  --rd-fs-lead:  18px;   /* primary reading text                          */
  --rd-fs-title: 21px;   /* dept / card / section names                   */
  --rd-fs-hero:  30px;   /* big metric numbers                            */
  --rd-tap: 48px;        /* minimum touch target                          */

  /* ── high-contrast surface tokens (identity kept, contrast lifted) ── */
  --rd-ink:      #FBF8EE;               /* primary text — warm bright white */
  --rd-mute:     #C6CEDA;               /* was #7a7d85/#7d7260 — the fix     */
  --rd-silver:   #D6DCE4;
  --rd-panel:    #171F33;               /* opaque card so panels READ        */
  --rd-panel2:   #1F2942;
  --rd-line:     rgba(200,168,78,.34);  /* visible gold hairline separation  */
  --rd-goldline: rgba(200,168,78,.60);
  --rd-onGold:   #1B1400;               /* dark ink on filled-gold buttons   */
}

@media (max-width:860px){

  /* ══ 1. CONTRAST — remap the shared vars both apps consume ══════════
     dash.html has ONE dark theme; NIBIRU's dark theme is :root, its light
     theme is body.trad (leave that alone). ─────────────────────────── */
  html body,
  #app, #root, #wrap,
  body:not(.trad){
    --ink:      var(--rd-ink);
    --mute:     var(--rd-mute);
    --silver:   var(--rd-silver);
    --panel:    var(--rd-panel);
    --panel2:   var(--rd-panel2);
    --line:     var(--rd-line);
    --gold-line:var(--rd-goldline);
  }
  /* NIBIRU dark glass → more opaque so panels are visible in sunlight    */
  body:not(.trad){ --glass: rgba(24,31,51,.965); }

  /* base reading size up on both */
  body{ font-size: var(--rd-fs-lead); -webkit-text-size-adjust:100%; }

  /* ══ 2. TYPE FLOORS — lift the real sub-14px offenders ══════════════
     !important: this is a dedicated legibility-override sheet sitting over
     two large inline-styled apps; the floor must win regardless of where
     each px was declared. Scoped to mobile only. ─────────────────────── */

  /* micro mono labels (6.8–8.5px → 13px), keep them mono but readable    */
  .tk .tl, .splanet .snode, .planet .ein, .cp-sub .k, .cp-bsr, .cp-sh,
  .cp-stat .k, .desk-hero .dh-k, .desk-card .dc-tag, .dv-tile .k,
  .gcal .gc-dow span, .dv-table th, .pstar .pl, .moonbody .mlbl,
  .acard .ak, .msg .mtag, .nrow .nk, .nbadge, .sres .st, .gc-dow span,
  .sbrow .su, .mp-track .ti span, .kcol h4{
    font-size: var(--rd-fs-micro) !important;
    letter-spacing:.4px !important; line-height:1.35 !important;
  }

  /* small text, buttons, pills, chips, nav (9–11px → 15px)               */
  .splanet .ssub, .dhint, .dsvc span, .gfoot, .obtn, .obadge, .cp-hlbl,
  #ticker .ag, #ticker .links a, .planet .lbl, #obsroot .rsum,
  .obsec .oh .car, .obsec .oh .osum, .obsvc .sv, .cp-qa button, .cp-fr,
  .dv-svc .sn, .dv-pill, #login .sub, #fedCrumb, .constell-label, .cph,
  .btn, .kcard, .folder>summary, .bmk, .hbtn, .sres .eng, .stab span,
  .toolrow .tstar, .mrow .mfrom, #fdock .dchip, .tab .tt, .card h2,
  .chip, .fpanel .fph b, .sub, .stab, #sstatus, .mtabs button, .gc-day,
  #fabmenu button, .app b, .app .lock, .gbtn, .mp-ctl button,
  nav>button, #qa button, #ntgrid button{
    font-size: var(--rd-fs-label) !important; line-height:1.4 !important;
  }

  /* body rows, tables, inputs, messages (11.5–13.5px → 16.5px)           */
  .dv-table td, .dv-link, .btn, .kcard, .addrow input, .addrow select,
  .empty, .tl-item .lab, .kv, .cpbd, table, #qmodal input, #qmodal textarea,
  .acard, .mrow .mprev, .kcard .kadv, .nrow, #toast, #addr,
  #suggest .srow, .sbrow, .chk, #ctx button, .row, .toolrow, .tabcard,
  .msg, .inrow input, .sres b, .obox input, .obox textarea, .obox select,
  .planet .lk, .mrow b, .fpanel .fph button, .sres p{
    font-size: var(--rd-fs-body) !important; line-height:1.5 !important;
  }

  /* dept / card / section names + inputs (→ 21px)                        */
  .dname, .desk-hero .dh-n, .obsec .oh b, .cp-prop .pn, #ghead b,
  #brodybar b, .card > h2, .kcol > h4 + *{
    font-size: var(--rd-fs-title) !important; line-height:1.25 !important;
  }

  /* big metric numbers stay big & bright                                 */
  .dv-tile .v, .dv-tile b, .cp-stat .v, .acard .av, .kcard .kn{
    font-size: var(--rd-fs-hero) !important; font-weight:700 !important;
    color: var(--rd-ink) !important; line-height:1.1 !important;
  }

  /* ══ 3. PANELS — glass becomes clearly separated high-contrast cards ══ */
  .dv-tile, .desk-card, .kcard, .card, .acard, .tabcard, .cp-prop,
  .obsec, .fpanel, .nrow, .mrow, .toolrow, .dv-svc, .dv-table,
  #deskview .panel, .glass{
    background: var(--rd-panel) !important;
    border:1px solid var(--rd-goldline) !important;
    border-radius:14px !important;
    box-shadow:0 6px 20px rgba(0,0,0,.45) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  .dv-table{ overflow-x:auto; }
  .dv-table td, .dv-table th{ border-color: var(--rd-line) !important; }

  /* ══ 4. TARGETS — thumbable, and APPROVE/REJECT read at a glance ══════ */
  .btn, button, .dv-pill, .chip, .obtn, .cp-qa button, .kadv,
  .addrow button, nav>button, .hbtn, .gbtn{
    min-height: var(--rd-tap) !important;
    padding:11px 16px !important;
  }
  nav>button{ min-height:64px !important; padding:8px 4px !important; }

  /* primary / approve = FILLED GOLD, dark ink — max glance contrast      */
  .btn.primary, .btn.approve, .btn-approve, button.approve,
  .cp-prop button.go, .kadv.go, [data-act="approve"], .btn.gold{
    background: var(--gold) !important; color: var(--rd-onGold) !important;
    border:1px solid var(--gold-bright) !important; font-weight:700 !important;
  }
  /* reject = solid outline, high-contrast red text                       */
  .btn.reject, .btn-reject, button.reject, [data-act="reject"]{
    background:#2A1416 !important; color:#FF8A88 !important;
    border:1px solid #E24B4A !important; font-weight:700 !important;
  }

  /* muted-text patches that survive var remap (explicit color:#... in css) */
  .dhint, .dsvc span, .gfoot, .obadge, .sub, .empty, .mfrom, .mtag,
  .mprev, .mut, .muted{ color: var(--rd-mute) !important; }

  /* DASH #qrail quick-action rail: was fixed right-center → overlapped the
     metric tiles; a narrow centered pill let content bleed around it. Make it
     a FULL-WIDTH OPAQUE bottom app-bar so desk content scrolls cleanly under
     it and the 9 official quick-actions stay thumb-reachable while driving. */
  #qrail{ left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    transform:none !important; flex-direction:row !important; align-items:center !important;
    justify-content:space-around !important; gap:2px !important;
    border:none !important; border-top:1px solid var(--rd-goldline) !important;
    border-radius:0 !important; background:#0B0F1A !important;  /* opaque = clean scroll-under */
    padding:6px 4px calc(6px + env(safe-area-inset-bottom)) !important;
    z-index:140 !important; max-width:none !important; overflow-x:auto !important; }
  #qrail button{ flex:1 0 auto !important; width:auto !important; min-width:40px !important;
    height:46px !important; font-size:20px !important; }
  #qrail button::after{ display:none !important; }   /* hover tooltips off on touch */
  #qrail .qsep{ display:none !important; }
  /* keep the last desk row clear of the bottom bar */
  .dv-wrap{ padding-bottom:78px !important; }

  /* focus ring = gold (DESIGN.md law), never browser blue               */
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--gold) !important; outline-offset:2px !important;
  }

  /* ══ NEW single-card DASH surface (.dc-*) — the mobile-first reference card shipped
     with NO legibility layer here: it read the desktop tokens (pale gold-wash fill +
     parchment ink) and came out unreadable / near-invisible on phones. Bring it into the
     readable system: opaque dark card, bright ink, lifted type floors, thumb targets. ══ */
  #deskview .dc-card, #deskview .dc-drill{
    background: var(--rd-panel) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;   /* opaque = sunlight-legible, no glass on phones */
    border-color: var(--rd-goldline) !important;
  }
  #deskview .dc-ct, #deskview .dc-big{ font-size: var(--rd-fs-title) !important; line-height:1.22 !important; color: var(--rd-ink) !important; }
  #deskview .dc-fv, #deskview .dc-pv{ font-size: var(--rd-fs-body) !important; color: var(--rd-ink) !important; }
  #deskview .dc-fl, #deskview .dc-pl, #deskview .dc-sm{ font-size: var(--rd-fs-micro) !important; letter-spacing:.4px !important; color: var(--rd-mute) !important; }
  #deskview .dc-chip{ min-height: var(--rd-tap) !important; }
  #deskview .dc-chip .cn{ font-size: var(--rd-fs-label) !important; color: var(--rd-ink) !important; }
  #deskview .dc-chip .cl{ font-size: var(--rd-fs-micro) !important; letter-spacing:.4px !important; color: var(--rd-mute) !important; }
  #deskview .dc-chip.on .cn, #deskview .dc-chip.on .cl{ color: var(--rd-onGold) !important; }   /* dark ink on the filled-gold active chip */
  #deskview .dc-secbtn, #deskview .dc-pri{ min-height: var(--rd-tap) !important; font-size: var(--rd-fs-label) !important; }
  #deskview .dc-drill span{ font-size: var(--rd-fs-body) !important; }
  #deskview .dc-void p{ font-size: var(--rd-fs-label) !important; color: var(--rd-mute) !important; }
}

/* honour reduced motion — this layer adds no motion, but assert intent   */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}