/* ═══════════════════════════════════════════════════════════════
   PACE — Shared theme + branding
   by Becloudsmart
   Applied via <link href="/pace.css"> injected into all pages
   Supports light (default) and dark ([data-theme="dark"]) modes
   ═══════════════════════════════════════════════════════════════ */

/* ── Pace icon system ──────────────────────────────────────── */
.pace-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.pace-icon-lg { width: 20px; height: 20px; }
.pace-icon-xl { width: 28px; height: 28px; opacity: 0.25; }

/* ── Role selector ─────────────────────────────────────────── */
.role-selector { position: relative; display: inline-block; }
#role-selector-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
}
#role-selector-btn.role-active {
  background: var(--blue-bg) !important;
  border-color: var(--blue-bdr) !important;
  color: var(--blue) !important;
}
.role-btn-label { white-space: nowrap; }
.role-selector-dropdown {
  display: none;
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: 10px;
  padding: 6px 0;
  min-width: 180px;
  z-index: 1000;
  box-shadow: var(--shadow-drop);
}
.role-selector-dropdown.show { display: block; }
.role-dd-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 6px 14px 4px;
}
.role-dd-item {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-nav);
  padding: 7px 14px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s;
}
.role-dd-item:hover {
  background: var(--surface-2);
  color: var(--text-strong);
}
.role-dd-item.role-dd-active {
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-bg);
}
.role-dd-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
}
.role-dd-clear {
  font-size: 11px;
  color: var(--dim) !important;
}
.role-dd-clear:hover {
  color: var(--text-nav) !important;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME TOKENS (default)
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Surfaces */
  --navy:          #FFFFFF;
  --black:         #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F5F5F3;
  --surface-3:     #EEEDE8;
  --surface-hover: #FAFAF8;
  --input-bg:      #FAFAFA;

  /* Text */
  --text-strong:   #111111;
  --text:          rgba(0,0,0,0.85);
  --text-body:     #333333;
  --text-nav:      rgba(0,0,0,0.75);
  --muted:         rgba(0,0,0,0.55);
  --dim:           rgba(0,0,0,0.35);
  --hint:          rgba(0,0,0,0.28);
  --placeholder:   #BBBBBB;
  --footer-text:   #CCCCCC;

  /* Borders */
  --border:        rgba(0,0,0,0.09);
  --border-mid:    #E0E0DC;
  --border-strong: #E8E8E4;
  --border-rule:   #EEECEA;
  --border-subtle: rgba(0,0,0,0.05);
  --rule:          rgba(0,0,0,0.08);
  --rule-bright:   rgba(0,0,0,0.14);

  /* Accent */
  --yellow:        #FFE400;
  --yellow-dim:    rgba(255,228,0,0.12);
  --yellow-border: rgba(200,175,0,0.3);
  --primary-dark:  #111111;
  --primary-dark-hover: #333333;

  /* Status colours */
  --green:         #0D6B55;
  --green-lt:      rgba(13,107,85,0.9);
  --green-bg:      rgba(13,107,85,0.08);
  --green-bdr:     rgba(13,107,85,0.25);
  --orange:        #B85A14;
  --orange-lt:     rgba(184,90,20,0.9);
  --orange-bg:     rgba(184,90,20,0.08);
  --orange-bdr:    rgba(184,90,20,0.25);
  --blue:          #1B5E8A;
  --blue-lt:       rgba(27,94,138,0.9);
  --blue-bg:       rgba(27,94,138,0.08);
  --blue-bdr:      rgba(27,94,138,0.25);
  --red:           #C0392B;
  --red-lt:        rgba(192,57,43,0.9);
  --red-bg:        rgba(192,57,43,0.04);
  --red-bdr:       rgba(192,57,43,0.18);
  --amber-lt:      rgba(150,100,0,0.85);

  /* Overlay */
  --overlay-bg:    rgba(255,255,255,0.97);
  --shadow-card:   0 4px 24px rgba(0,0,0,0.08);
  --shadow-drop:   0 8px 24px rgba(0,0,0,0.10);

  /* Scrollbar */
  --scrollbar:     #DDDDD8;
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEME TOKENS
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --navy:          #1B2A3B;
  --black:         #1B2A3B;
  --surface:       #1B2A3B;
  --surface-2:     #243548;
  --surface-3:     #162232;
  --surface-hover: #2A3F54;
  --input-bg:      #1E3044;

  --text-strong:   #FFFFFF;
  --text:          rgba(255,255,255,0.85);
  --text-body:     rgba(255,255,255,0.78);
  --text-nav:      rgba(255,255,255,0.70);
  --muted:         rgba(255,255,255,0.50);
  --dim:           rgba(255,255,255,0.32);
  --hint:          rgba(255,255,255,0.20);
  --placeholder:   rgba(255,255,255,0.28);
  --footer-text:   rgba(255,255,255,0.22);

  --border:        rgba(255,255,255,0.08);
  --border-mid:    rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.14);
  --border-rule:   rgba(255,255,255,0.10);
  --border-subtle: rgba(255,255,255,0.04);
  --rule:          rgba(255,255,255,0.07);
  --rule-bright:   rgba(255,255,255,0.12);

  --yellow:        #FFE400;
  --yellow-dim:    rgba(255,228,0,0.10);
  --yellow-border: rgba(255,228,0,0.25);
  --primary-dark:  #FFFFFF;
  --primary-dark-hover: #E0E0E0;

  --green-bg:      rgba(13,107,85,0.15);
  --green-bdr:     rgba(13,107,85,0.35);
  --orange-bg:     rgba(184,90,20,0.15);
  --orange-bdr:    rgba(184,90,20,0.35);
  --blue-bg:       rgba(27,94,138,0.15);
  --blue-bdr:      rgba(27,94,138,0.35);
  --red-bg:        rgba(192,57,43,0.12);
  --red-bdr:       rgba(192,57,43,0.30);

  --overlay-bg:    rgba(20,35,50,0.97);
  --shadow-card:   0 4px 24px rgba(0,0,0,0.30);
  --shadow-drop:   0 8px 24px rgba(0,0,0,0.40);

  --scrollbar:     rgba(255,255,255,0.12);
}

/* ═══════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════ */
html, body {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* ── Topbar / rolebar ───────────────────────────────────────── */
.topbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border-strong) !important;
  box-shadow: 0 1px 0 var(--border-strong) !important;
}
.rolebar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border-strong) !important;
}

/* ── Logo / wordmark ────────────────────────────────────────── */
a.logo, .logo {
  color: var(--text-strong) !important;
  opacity: 1 !important;
  cursor: pointer;
}
.tb-wm {
  color: var(--text-strong) !important;
  opacity: 1 !important;
}
.tb-wordmark {
  border-right-color: var(--border-strong) !important;
}

/* ── Nav text ───────────────────────────────────────────────── */
.bar-title, .tb-name, .tb-eyebrow, .tb-cell-lbl, .tb-cell-val {
  color: var(--text-nav) !important;
}
.tb-site   { border-right-color: var(--border-strong) !important; }
.tb-meta   { border-right-color: var(--border-strong) !important; }
.tb-cell   { border-right-color: var(--border-strong) !important; }
.tb-btn {
  color: var(--muted) !important;
  border-color: var(--border-mid) !important;
  background: transparent !important;
}
.tb-btn:hover {
  background: var(--surface-2) !important;
  color: var(--text-strong) !important;
}
.tb-ref {
  color: var(--dim) !important;
  border-color: var(--border-mid) !important;
}
.tb-ref:hover {
  background: var(--surface-2) !important;
  color: var(--text-strong) !important;
}

/* ── Token input in topbar ─────────────────────────────────── */
.token-input {
  background: var(--input-bg) !important;
  border-color: var(--border-mid) !important;
  color: var(--text-body) !important;
}
.token-input::placeholder { color: var(--placeholder) !important; }
.token-label { color: var(--muted) !important; }
.refresh-btn {
  color: var(--muted) !important;
  border-color: var(--border-mid) !important;
}
.refresh-btn:hover {
  background: var(--surface-2) !important;
  color: var(--text-strong) !important;
}

/* ── Token overlay (login card) ─────────────────────────────── */
.overlay {
  background: var(--overlay-bg) !important;
}
.tc-card {
  background: var(--surface) !important;
  border: 1px solid var(--border-mid) !important;
  box-shadow: var(--shadow-card) !important;
}
.tc-card::before {
  background: var(--text-strong) !important;
}
.tc-eyebrow { color: var(--dim) !important; }
.tc-title   { color: var(--text-strong) !important; }
.tc-sub     { color: var(--muted) !important; }
.tc-input {
  background: var(--input-bg) !important;
  border: 1px solid var(--border-mid) !important;
  color: var(--text-body) !important;
}
.tc-input::placeholder { color: var(--placeholder) !important; }
.tc-btn {
  background: var(--primary-dark) !important;
  color: var(--surface) !important;
}
.tc-btn:hover { background: var(--primary-dark-hover) !important; }

/* ── Loading overlay ────────────────────────────────────────── */
.lo { color: var(--dim) !important; }
.lo-bar { background: var(--rule) !important; }
.lo-bar::after { background: var(--text-strong) !important; }

/* ── Summary / stat cards ───────────────────────────────────── */
.scard {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
}
.scard-label { color: var(--muted) !important; }
.scard-value { color: var(--text-strong) !important; }
.scard-sub   { color: var(--dim) !important; }

/* ── Tables ─────────────────────────────────────────────────── */
.table-wrap { border-color: var(--border-strong) !important; }
thead tr    { background: var(--surface-2) !important; }
th {
  color: var(--muted) !important;
  border-bottom-color: var(--border-strong) !important;
}
td {
  color: var(--text) !important;
  border-bottom-color: var(--border-rule) !important;
}
tr:hover td { background: var(--surface-hover) !important; }
td.mono     { color: var(--dim) !important; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge-ok {
  background: var(--green-bg) !important;
  border-color: var(--green-bdr) !important;
  color: var(--green) !important;
}
.badge-warn {
  background: var(--orange-bg) !important;
  border-color: var(--orange-bdr) !important;
  color: var(--orange) !important;
}
.badge-off {
  background: var(--surface-2) !important;
  border-color: var(--border-mid) !important;
  color: var(--dim) !important;
}

/* ── Site dashboard panels ──────────────────────────────────── */
.dash   { background: var(--border-strong) !important; }
.panel  { background: var(--surface) !important; }
.panel.click:hover { background: var(--surface-hover) !important; }
.ph     { border-bottom-color: var(--border-rule) !important; }
.ph-lbl { color: var(--dim) !important; }
.ph-dot { opacity: 0.5; }
.sn     { color: var(--text-strong) !important; }
.sl     { color: var(--dim) !important; }
.ss     { color: var(--hint) !important; }

/* ── Action list ─────────────────────────────────────────────── */
.al::-webkit-scrollbar-thumb { background: var(--scrollbar) !important; }
.ar     { border-bottom-color: var(--border-subtle) !important; }
.ar:hover { background: var(--surface-hover) !important; }
.ar-i   { color: var(--hint) !important; }
.ar-t   { color: var(--text) !important; }
.ar-o   { color: var(--hint) !important; }
.ar-tag { opacity: 0.85; }

/* ── Risk rows ──────────────────────────────────────────────── */
.rr     { border-bottom-color: var(--border-subtle) !important; }
.rr-lbl { color: var(--dim) !important; }
.rr-cnt { color: var(--text-strong) !important; }
.rr-track { background: var(--rule) !important; }

/* ── Scorecard / forum ──────────────────────────────────────── */
.tc     { border-right-color: var(--border-rule) !important; }
.tc-tier { color: var(--dim) !important; }
.tc-avg  { color: var(--text-strong) !important; }
.bv     { color: var(--hint) !important; }
.bd     { color: var(--hint) !important; }

/* ── Readiness gates ────────────────────────────────────────── */
.g-num  { color: var(--hint) !important; }
.g-name { color: var(--text) !important; }

/* ── RAG status ─────────────────────────────────────────────── */
.rag-b     { background: var(--surface-hover) !important; }
.rag-l     { border-right-color: var(--border-rule) !important; }
.rag-shift { color: var(--text-strong) !important; }
.rag-date  { color: var(--dim) !important; }
.rag-super { color: var(--hint) !important; }

/* ── Rolebar buttons ────────────────────────────────────────── */
.rbtn {
  border-color: var(--rule-bright) !important;
  color: var(--muted) !important;
}
.rbtn:hover {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
.rbtn.active {
  background: var(--surface-3) !important;
  color: var(--text-strong) !important;
  border-color: var(--rule-bright) !important;
}
.role-label { color: var(--dim) !important; }

/* ── Hub centre ─────────────────────────────────────────────── */
.hub {
  background: var(--surface) !important;
  border-color: var(--border-mid) !important;
}
.hub-role { color: var(--text-nav) !important; }
.hub-sub  { color: var(--hint) !important; }

/* ── Form elements ──────────────────────────────────────────── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
  background: var(--input-bg) !important;
  border-color: var(--border-mid) !important;
  color: var(--text-body) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--placeholder) !important;
}

/* ── Section headings / labels ──────────────────────────────── */
.section-title { color: var(--dim) !important; }

/* ── Error / status messages ────────────────────────────────── */
.err-msg {
  background: var(--red-bg) !important;
  border-color: var(--red-bdr) !important;
  color: var(--red) !important;
}
.spinner {
  border-color: var(--rule) !important;
  border-top-color: var(--muted) !important;
}

/* ── Yellow accent rule (site dashboard) ────────────────────── */
.accent-rule {
  background: linear-gradient(90deg, var(--text-strong) 0%, var(--rule-bright) 35%, transparent 65%) !important;
}

/* ── Log rows ───────────────────────────────────────────────── */
.log-row     { border-bottom-color: var(--border-subtle) !important; }
.log-row.header { background: var(--surface-2) !important; }
.lc          { color: var(--text-nav) !important; }
.lc.mono     { color: var(--dim) !important; }
.lc.ok       { color: var(--green) !important; }
.lc.error    { color: var(--red) !important; }

/* ── Cost note ──────────────────────────────────────────────── */
.cost-note        { color: var(--dim) !important; }
.cost-note strong { color: var(--text-nav) !important; }

/* ── Empty state ────────────────────────────────────────────── */
.empty        { color: var(--hint) !important; }
.spinner-wrap { color: var(--dim) !important; }

/* ── PACE Footer ────────────────────────────────────────────── */
.pace-footer {
  border-top: 1px solid var(--border-strong);
  padding: 9px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-2);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--footer-text);
  margin-top: auto;
}
.pace-footer-brand { color: var(--footer-text); }
.pace-footer-date  { color: var(--footer-text); font-size: 11px; letter-spacing: normal; text-transform: none; }

/* ── Nav slide-out panel (right side) ────────────────────── */
.nav-dropdown {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
  width: 20vw !important;
  min-width: 280px;
  max-width: 420px;
  max-height: 100vh !important;
  overflow-y: auto !important;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  background: var(--surface) !important;
  border: 0 !important;
  border-left: 1px solid var(--border-mid) !important;
  box-shadow: -8px 0 24px rgba(0,0,0,0.12) !important;
  z-index: 1000;
  padding: 14px 8px !important;
  border-radius: 0 !important;
}
.nav-dropdown.show { transform: translateX(0); }
.nav-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.25);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 999;
}
.nav-backdrop.show { opacity: 1; pointer-events: auto; }
.nav-group-label { color: var(--dim) !important; padding: 10px 16px 6px !important; font-size: 10px !important; letter-spacing: 0.12em; text-transform: uppercase; }
.nav-item        { color: var(--text-nav) !important; padding: 8px 16px !important; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.nav-item:hover  { background: var(--surface-2) !important; color: var(--text-strong) !important; }
.nav-divider     { background: var(--border-subtle) !important; height: 1px; margin: 6px 0; }

/* ── User chip in top bar ────────────────────────────────── */
.user-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; font-size: 12px; color: var(--text-body); background: transparent; font-family: inherit; }
.user-chip:hover { background: var(--surface-2); }
.user-chip .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--primary-dark); color: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.user-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface); border: 1px solid var(--border-mid); border-radius: 8px; box-shadow: var(--shadow-drop); min-width: 200px; padding: 6px 0; display: none; z-index: 1001; }
.user-menu.show { display: block; }
.user-menu .user-meta { padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); }
.user-menu .user-email { font-size: 12px; color: var(--text-body); word-break: break-all; }
.user-menu .user-role { font-size: 10px; color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }
.user-menu a { display: block; padding: 8px 14px; color: var(--text-nav); font-size: 13px; text-decoration: none; }
.user-menu a:hover { background: var(--surface-2); color: var(--text-strong); }

/* ═══════════════════════════════════════════════════════════════
   READABILITY FIXES — page-specific overrides
   ═══════════════════════════════════════════════════════════════ */

/* ── mos_scenario.html ─────────────────────────────────────── */
.topbar-title { color: var(--dim) !important; }
.topbar-hint  { color: var(--hint) !important; }
.back-btn     { color: var(--muted) !important; }
.back-btn:hover { color: var(--text-strong) !important; background: var(--surface-2) !important; }
.steps-label  { color: var(--dim) !important; }
.step-txt     { color: var(--dim) !important; }
.step-item.done .step-txt { color: var(--muted) !important; }
.step-item.cur .step-txt  { color: var(--text-strong) !important; }
.story-time   { color: var(--dim) !important; }
.story-loc    { color: var(--hint) !important; }
.story-hed    { color: var(--text-strong) !important; }
.b-mixed      { background: var(--surface-2) !important; color: var(--muted) !important; border-color: var(--border) !important; }
.b-to         { background: var(--surface-2) !important; color: var(--dim) !important; border-color: var(--border) !important; }
.arr          { color: var(--hint) !important; }
.hero-word    { color: var(--text-strong) !important; }
.hero-desc    { color: var(--muted) !important; }
.cbtn         { color: var(--muted) !important; border-color: var(--rule-bright) !important; background: transparent !important; }
.cbtn:hover   { background: var(--surface-2) !important; color: var(--text-strong) !important; }
.cbtn.pri     { background: var(--surface-3) !important; border-color: var(--rule-bright) !important; color: var(--text-strong) !important; }
.pfill        { background: var(--hint) !important; }

/* ── tarp_test.html ────────────────────────────────────────── */
.key-input       { background: var(--input-bg) !important; border-color: var(--border-mid) !important; color: var(--text-body) !important; }
.key-hint        { color: var(--hint) !important; }
.problem-textarea { background: var(--input-bg) !important; border-color: var(--border-mid) !important; color: var(--text-body) !important; }
.problem-textarea:focus { border-color: var(--rule-bright) !important; }
.problem-textarea::placeholder { color: var(--hint) !important; }
.card-label      { color: var(--dim) !important; }
.card-who        { color: var(--muted) !important; background: var(--surface-2) !important; }
.card-main       { color: var(--text-nav) !important; }
.card-step       { color: var(--muted) !important; }
.card-detail     { color: var(--muted) !important; border-top-color: var(--rule) !important; }
.card-title      { color: var(--text-strong) !important; }
.score-hed       { color: var(--text-strong) !important; }
.hl              { color: #7A5400 !important; }
.source-generic  { background: var(--surface-2) !important; color: var(--muted) !important; }
.source-doc      { background: var(--blue-bg) !important; color: var(--blue) !important; }

/* ── test.html ─────────────────────────────────────────────── */
.cfg-label     { color: var(--blue) !important; }
.btn-primary   { color: var(--blue) !important; background: var(--blue-bg) !important; border-color: var(--blue-bdr) !important; }
.btn-primary:hover { background: rgba(27,94,138,0.20) !important; }
.btn-danger    { color: var(--red) !important; background: var(--red-bg) !important; border-color: var(--red-bdr) !important; }
.btn-danger:hover { background: rgba(192,57,43,0.15) !important; }

/* ── workflow-scenario.html ────────────────────────────────── */
.bar-sep        { color: var(--hint) !important; }
.ctrl-btn       { color: var(--muted) !important; border-color: var(--border) !important; }
.ctrl-btn:hover { background: var(--surface-2) !important; color: var(--text-strong) !important; }
.day-label      { color: var(--hint) !important; }
.step-pill       { border-left-color: transparent !important; }
.step-pill.active { background: var(--surface-2) !important; border-left-color: var(--blue) !important; }
.step-pill.active .sp-dot  { background: var(--blue) !important; border-color: var(--blue) !important; box-shadow: none !important; }
.step-pill.active .sp-text { color: var(--text-nav) !important; }
.sp-text         { color: var(--muted) !important; }
.sp-time         { color: var(--hint) !important; }
.scene-title     { color: var(--text-strong) !important; }
.scene-desc      { color: var(--muted) !important; }
.mock-title      { color: var(--text-strong) !important; }
.mock-text       { color: var(--text-nav) !important; }
.mock-sub        { color: var(--dim) !important; }
.flow-arrow-icon { color: var(--hint) !important; }
.nav-prev        { color: var(--muted) !important; border-color: var(--border) !important; }
.nav-prev:hover  { background: var(--surface-2) !important; color: var(--text-strong) !important; }
.nav-next        { background: var(--blue-bg) !important; border-color: var(--blue-bdr) !important; color: var(--blue) !important; }
.nav-next:hover  { background: rgba(27,94,138,0.25) !important; }
.auto-btn        { color: var(--dim) !important; border-color: var(--border) !important; background: transparent !important; }
.auto-btn:hover  { background: var(--surface-2) !important; color: var(--text-strong) !important; }
.auto-btn.playing { border-color: var(--blue-bdr) !important; color: var(--blue) !important; background: var(--blue-bg) !important; }

/* ── pdca.html ─────────────────────────────────────────────── */
.rbtn-clear { color: var(--dim) !important; border-color: var(--border) !important; }
.rbtn-clear:hover { color: var(--muted) !important; }

/* ── mos_intro.html — PDCA quadrants (white text on colour) ── */
.q-word       { color: #fff !important; }
.q-hook       { color: rgba(255,255,255,0.82) !important; }
.quad-plan .chip, .quad-do .chip, .quad-check .chip, .quad-act .chip {
  color: rgba(255,255,255,0.88) !important; background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.18) !important;
}
/* pdca.html chips — coloured text on surface backgrounds */
.quad .chip.chip-plan  { color: #1a5fa0 !important; border-color: #9ec7ef !important; background: var(--surface-hover) !important; }
.quad .chip.chip-do    { color: #186b35 !important; border-color: #7ecfa0 !important; background: var(--surface-hover) !important; }
.quad .chip.chip-check { color: #7a5500 !important; border-color: #e8c96a !important; background: var(--surface-hover) !important; }
.quad .chip.chip-act   { color: #991a1a !important; border-color: #e8a0a0 !important; background: var(--surface-hover) !important; }
.qtog         { color: rgba(255,255,255,0.55) !important; border-color: rgba(255,255,255,0.18) !important; }
.qtog:hover   { color: rgba(255,255,255,0.88) !important; }
.qtog.qtog-active { color: #fff !important; background: rgba(255,255,255,0.14) !important; border-color: rgba(255,255,255,0.45) !important; }

/* ── TARP overlay ──────────────────────────────────────────── */
.tarp-title       { color: var(--muted) !important; }
.tarp-close       { color: var(--dim) !important; border-color: var(--rule-bright) !important; }
.tarp-close:hover { color: var(--text-strong) !important; border-color: var(--rule-bright) !important; }
.tarp-prompt-label { color: var(--dim) !important; }
.tarp-textarea     { color: var(--text-body) !important; background: var(--input-bg) !important; border-color: var(--border-mid) !important; }
.tarp-textarea::placeholder { color: var(--hint) !important; }
.tarp-role-note    { color: var(--dim) !important; }
.tarp-reset        { color: var(--dim) !important; }
.tarp-reset:hover  { color: var(--text-nav) !important; }
.tarp-loading      { color: var(--muted) !important; }
.tarp-result-title { color: var(--text-strong) !important; }
.tarp-card-label   { color: var(--dim) !important; }
.tarp-card-who     { color: var(--muted) !important; background: var(--surface-2) !important; }
.tarp-card-main    { color: var(--text) !important; }
.tarp-card-detail  { color: var(--muted) !important; border-top-color: var(--rule) !important; }
.tarp-card-step    { color: var(--muted) !important; }
.tarp-copy         { color: var(--muted) !important; background: var(--surface-2) !important; border-color: var(--border) !important; }
.tarp-copy:hover   { color: var(--text-strong) !important; }
.doc-zone          { border-color: var(--border) !important; }
.doc-zone-label       { color: var(--dim) !important; }
.doc-zone-label strong { color: var(--muted) !important; }
.doc-zone-label span   { color: var(--hint) !important; }
.doc-add-more       { color: var(--dim) !important; border-color: var(--border) !important; }
.doc-add-more:hover { color: var(--muted) !important; border-color: var(--rule-bright) !important; }
.tarp-header        { border-bottom-color: var(--rule) !important; }

/* ── Token / login overlays (JS-generated) ─────────────────── */
#token-overlay {
  background: var(--overlay-bg) !important;
}
#token-overlay div[style*="color:#fff"],
#token-overlay div[style*="color:rgba(255,255,255"] {
  color: var(--text-strong) !important;
}
#token-overlay input[style*="color:#fff"] {
  background: var(--input-bg) !important;
  border-color: var(--border-mid) !important;
  color: var(--text-body) !important;
}
#token-overlay div[style*="color:rgba(255,255,255,0.4)"] {
  color: var(--muted) !important;
}
#token-overlay div[style*="color:rgba(255,255,255,0.18)"],
#token-overlay div[style*="color:rgba(255,255,255,0.15)"] {
  color: var(--hint) !important;
}

.overlay .tc-card,
.overlay [style*="background:rgba(255,255,255,0.07)"],
.overlay [style*="background:rgba(255,255,255,0.06)"] {
  background: var(--input-bg) !important;
  border-color: var(--border-mid) !important;
}

/* ── knowledge-base.html — white-on-colour (theme-independent) */
.file-tag  { color: #fff !important; }

/* ── report-history.html ───────────────────────────────────── */
.show-all-btn { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--muted) !important; }

/* ── select option backgrounds ─────────────────────────────── */
select option { background: var(--surface) !important; color: var(--text-body) !important; }

/* ── Topbar theme toggle ───────────────────────────────────── */
#theme-toggle {
  border: none !important;
  background: transparent !important;
  padding: 4px 8px !important;
  color: var(--dim) !important;
  cursor: pointer;
}
#theme-toggle:hover {
  color: var(--text-strong) !important;
}

/* ── Topbar ask button — active state ──────────────────────── */
.tb-btn.chat-active { background: var(--yellow) !important; color: #000 !important; border-color: var(--yellow) !important; }
.tb-btn.chat-active:hover { opacity: 0.88; background: var(--yellow) !important; }

/* ═══════════════════════════════════════════════════════════════
   Responsive helpers (global)
   Added as part of the mobile/PWA pass — applies to every page
   that includes pace.css.
   ═══════════════════════════════════════════════════════════════ */

/* Prevent horizontal scroll on narrow viewports */
html, body { max-width: 100vw; overflow-x: hidden; }

/* Any wide container should gracefully cap */
.page, .container, .card, .panel, main {
  max-width: 100%;
}

/* Tables inside content — don't require horizontal body scroll on mobile */
.scrollable-table,
.responsive-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Opt-in scroll wrapper for any <table> wrapped in .table-scroll */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.table-scroll > table { min-width: 640px; }

/* Images + media never exceed their container */
img, video, svg { max-width: 100%; height: auto; }

/* Small-screen breakpoint — collapses the most common PACE patterns */
@media (max-width: 800px) {
  /* Topbar usually has many inline elements; stack and wrap */
  .topbar, .rolebar, .tb-row, .toolbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .topbar { padding: 8px 12px !important; }

  /* Two-column layouts fall back to one column */
  .two-col, .three-col, .grid-2, .grid-3, .cols-2, .cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Sidebar-style layouts collapse */
  .with-sidebar, .main-split, .sidebar-layout {
    grid-template-columns: 1fr !important;
  }

  /* Large page headers scale down */
  h1, .page-title { font-size: clamp(22px, 5vw, 32px) !important; }
  h2, .section-title { font-size: clamp(18px, 4vw, 24px) !important; }

  /* Any element with inline width/height that pushes overflow — guard */
  table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

  /* PACE modal content full-width on mobile */
  .modal, .dialog, .ai-modal { width: 96vw !important; max-width: 96vw !important; max-height: 92vh !important; }

  /* Dense data cards stack their cells */
  .card-row { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; }
}

/* Tiny phones */
@media (max-width: 480px) {
  body { font-size: 15px; }
  .topbar button, .tb-btn { padding: 6px 10px !important; font-size: 12px !important; }
  .role-selector-dropdown { min-width: 90vw !important; left: 2vw !important; right: 2vw !important; }
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}

/* Touch device: bigger tap targets for interactive elements */
@media (hover: none) and (pointer: coarse) {
  button, .btn, .tb-btn, a.btn, input[type="submit"] {
    min-height: 40px;
    min-width: 40px;
  }
}