/* Shared UI standard for every portal page. Loaded last, so it wins over each page's own styles.
   1) Buttons that are Mayvel green always carry dark text (in the light theme they are dark green with light text, set by each page).
   2) One phone standard (width 640px or less):
        reading text 16px, secondary text 14px, small labels 12px (never smaller)
        every button, link-button, chip and field at least 44px tall; icon buttons 44 x 44 */

/* ---------- 1. readable buttons, all screen sizes ---------- */
.v3-page a.btn:not(.ghost), a.btn:not(.ghost){ color:#04140a !important }
.v3-page a.btn.ghost, a.btn.ghost{ color:var(--txt) }
html[data-theme="light"] .v3-page a.btn:not(.ghost), html[data-theme="light"] a.btn:not(.ghost){ color:#f6f6ef !important }
.v3-page a.btn:hover{ text-decoration:none }
.pnav.next:not(.locked){ color:#04140a }
html[data-theme="light"] .pnav.next:not(.locked){ color:#f6f6ef }

/* ---------- 2. phone standard ---------- */
@media (max-width:640px){
  html{ -webkit-text-size-adjust:100% }
  body{ font-size:16px; line-height:1.55 }

  /* tap targets */
  button, .btn, [role="button"], summary, select, a.btn, .pnav,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]){ min-height:44px !important }
  .v3-srch-x{ min-width:44px }
  header.mv-topbar .mv-menu-btn, header.mv-topbar .mv-fb-btn, header.mv-topbar .theme-btn, header.mv-topbar .menu-btn, .menu-btn{ min-width:44px; min-height:44px }
  header.mv-topbar .mv-fb-btn, header.mv-topbar .theme-btn{ width:44px; height:44px }
  summary{ display:flex; align-items:center }
  .btn, .btn.sm, .pnav, .spd, .v3-chip, .mv-act, .recap-btn{ font-size:15px !important; padding-top:10px; padding-bottom:10px }
  .spd, .v3-chip, .btn.sm{ min-height:44px !important }
  .opt input{ width:22px !important; height:22px !important; flex-basis:22px !important }

  /* topic pages: one reading size (16px), tables 15px, labels 13px */
  .page-inner p, .page-inner li, .page .card p, .page .c div, .page .note, .page .pg-hero p, .opt span, .qmeta,
  .page-inner .bul li, .v3-ess li, .v3-lh + p{ font-size:16px !important; line-height:1.55 !important }
  .page td, .page th, .page .kterm, .page .cn{ font-size:15px !important; line-height:1.5 !important }
  .unit-tag, .sk, .nl, .slide .sk, .note .nl, .cliplab, .sphint, .spl, .kwh, .tag2, .qmeta b, .v3-lh, .v3-outcomes summary{ font-size:13px !important }
  .page-inner{ zoom:1 !important }
  .page .card h3, .page .card h4, .page-inner h4{ font-size:17px !important; line-height:1.35 !important }

  /* hub: sidebar contents, search results, journey and library */
  .tnav .tt{ font-size:15px !important; line-height:1.4 }
  .tnav .parthead .ptitle{ font-size:15px !important }
  .tnav li{ min-height:44px }
  .tnav .ic, .tnav .sc, .tnav .st, .side h4, .pct, .smore, .sres-count, .ring .pct{ font-size:12px !important }
  .sres .sn, .sres .sp, .sres .st{ font-size:14px !important }
  .sres .srow{ min-height:44px }
  .v3-lrow{ min-height:48px }
  .v3-lt{ font-size:15px !important }
  .v3-lu, .v3-lockl, .v3-gl, .v3-jk, .v3-js, .v3-imeta, .v3-jmeta, .v3-jleft{ font-size:14px !important }
  .tnav .tt .u, .tnav .parthead .pmeta, .sres .u{ font-size:13px !important }
  .v3-page p, .v3-lcard p{ font-size:15px !important }

  /* small labels never below 12px */
  .gatesub, .scoresum-box .st, .scoresum-box .sp, .note .nl, .vlabel .tag, .vidctl .vtime, .slide .sk,
  .brand span, .guide b, .legend span, .tplan p, .tplan .sep{ font-size:12px !important }

  /* STP Flow */
  .chip{ min-height:44px; font-size:14px !important; line-height:1.3 }
  .chip .live{ font-size:12px !important }
  .cell .blk, .cell .cap, .ph{ font-size:12px !important }

  /* recordings and Immersion Week */
  .seg .x{ font-size:15px !important; line-height:1.55 }
  .seg .t{ font-size:13px !important }
  .stitle{ font-size:15px !important }
  .smeta, .snum{ font-size:13px !important }
  .points li{ font-size:15px !important }
  .sess{ min-height:56px }

  /* 5 Big Ideas, quiz, admin */
  .jnode .np, .eyebrow{ font-size:12px !important }
  .hint, .note, .whoami{ font-size:13px !important }
  .quiz p, .lede{ font-size:15px !important }
}