/* Command Deck — chrome + shared components for /v2.
   Every value comes from the artboards (theme_and_chrome.py HEADER / PICKER / PH_NAV / ph_head / M macros and
   the state artboards). Colours only via tokens.css custom properties. Phone layout at <= 760 px. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.accent { color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }

.deck { width: 100%; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); }

/* ------------------------------------------------------------------ desktop command bar (HEADER) */
.cmdbar {
  display: flex; align-items: center; gap: 22px; height: 64px; padding: 0 28px;
  border-bottom: 1px solid var(--line); background: var(--bar); position: relative; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex-shrink: 0; }
.brand-word { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: .14em; white-space: nowrap; }
.tabs { display: flex; align-items: stretch; height: 64px; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; gap: 6px; padding: 0 12px; text-decoration: none; border: none; background: none;
  font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; color: var(--muted); box-shadow: none; height: 64px;
}
.tab:hover { color: var(--text); }
.tab.is-on { color: var(--text); box-shadow: inset 0 -3px 0 var(--accent); }
.picker { display: flex; gap: 6px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); flex-shrink: 0; }
.swatch { width: 30px; height: 30px; border-radius: 7px; border: none; padding: 0; box-shadow: 0 0 0 1px var(--line); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }
.swatch-amber { background: var(--swatch-amber); }
.swatch-ink { background: var(--swatch-ink); }
.swatch-lime { background: var(--swatch-lime); }
.mode-btn {
  width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0;
}

/* More menu + account menu — not drawn in the mocks; built from card + tab parts (agreed 19 Oct). */
.more-wrap { position: relative; display: flex; align-items: center; }
.tabs .more-wrap { align-items: stretch; }
.menu-card {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; z-index: 30;
  padding: 8px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px;
}
.tabs .menu-card { position: fixed; top: 64px; left: auto; }
.who-menu { left: auto; right: 0; padding: 14px; gap: 6px; }
.menu-item {
  display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 8px; text-decoration: none;
  font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; color: var(--muted);
}
.menu-item:hover { color: var(--text); background: var(--panel2); }
.menu-item.is-on { color: var(--text); background: var(--panel2); box-shadow: inset 0 -3px 0 var(--accent); }
.who-name { font-weight: 600; }
.who-meta, .lbl { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.who-menu .btn2 { margin-top: 8px; }

/* ------------------------------------------------------------------ phone header (ph_head / APhone) */
.phead {
  display: flex; align-items: center; gap: 10px; height: 64px; flex-shrink: 0; padding: 0 16px;
  border-bottom: 1px solid var(--line); background: var(--bar);
}
.phead-titles { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.phead-kick { font-family: 'IBM Plex Mono', monospace; letter-spacing: .14em; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phead-h1 {
  margin: 0; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.picker-ph { display: flex; gap: 4px; }
.swatch-ph { width: 24px; height: 44px; border: none; padding: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.swatch-dot { width: 20px; height: 20px; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); }
.swatch-ph[aria-pressed="true"] .swatch-dot { box-shadow: 0 0 0 2px var(--text); }
.mode-btn-ph { width: 44px; height: 44px; }
.mode-btn-ph2 { border-radius: 10px; }
/* APhone: 60 px, REAP // CMD, week, light/dark */
.phead-a { height: 60px; }
.phead-a-word { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .14em; }
.phead-a-week { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); }
.phead-a .mode-btn { border-radius: 8px; }

/* ------------------------------------------------------------------ page body */
.main { flex: 1; padding: 22px 28px 28px; display: flex; flex-direction: column; gap: 16px; position: relative; }
.title-block { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.title-left { display: flex; flex-direction: column; gap: 4px; }
.kick { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .14em; color: var(--muted); }
.h1 { margin: 0; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 34px; letter-spacing: .06em; text-transform: uppercase; }
.card { padding: 18px 20px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.pcard { padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.h2 { margin: 0; font-family: 'Chakra Petch', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* buttons (BTN / BTN2 / IBTN) */
.btn {
  height: 40px; padding: 0 16px; border: none; border-radius: 8px; background: var(--accent); color: var(--accentInk);
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none;
}
.btn2 {
  height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  font: inherit; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
}
.ibtn {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.btn-block { width: 100%; }
.btn-tall { height: 48px; }

/* status pills (PILL) — always icon + word, never colour alone */
.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 5px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.pill-lg { height: 30px; padding: 0 12px; }
.pill-ok { background: var(--okBg); color: var(--okFg); }
.pill-warn { background: var(--warnBg); color: var(--warnFg); }
.pill-skip { background: var(--skipBg); color: var(--skipFg); }
.pill-high { background: var(--warnSolid); color: var(--warnInk); }
.pill-new, .pill-accent { background: var(--accentSoft); color: var(--accentText); }

/* ------------------------------------------------------------------ states: empty / error (StateEmpty, StateError) */
.empty {
  flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 16px;
  border: 2px dashed var(--line); background: var(--stage); min-height: 360px; padding: 24px;
}
.err {
  flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--warnBd); min-height: 360px; padding: 24px;
}
.state-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 460px; }
.err .state-inner { max-width: 520px; }
.state-tile { width: 76px; height: 76px; border-radius: 20px; display: flex; align-items: center; justify-content: center; }
.tile-accent { background: var(--accentSoft); color: var(--accentText); }
.tile-warn { background: var(--warnBg); color: var(--warnFg); }
.state-title { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: .06em; text-transform: uppercase; }
.state-text { color: var(--muted); line-height: 1.5; }
.state-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.state-mono { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); }

/* read-only banner (StateReadOnly) */
.ro-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--skipBg); color: var(--text); font-size: 13px; }
.ro-banner svg { flex-shrink: 0; }

/* ------------------------------------------------------------------ No access yet (NoAccess) */
.na-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--stage); }
.na { width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.na-badge { position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; }
.na-rings { position: absolute; inset: 0; }
.na-shield { position: relative; }
.na-h1 { margin: 0; font-family: 'Chakra Petch', sans-serif; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 40px; }
.na-p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--muted); }
.na-pills { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.na-signout { margin-top: 8px; }

/* ------------------------------------------------------------------ Dashboard refreshing (Refreshing) */
.refresh-banner {
  display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 28px; background: var(--accentSoft);
  border-bottom: 1px solid var(--accentDim); color: var(--text); font-size: 13px;
}
.refresh-banner svg { flex-shrink: 0; }
.refresh-banner .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-desk { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.main.state-refreshing { padding: 22px 28px 28px; }
.sk { border-radius: 16px; background: var(--skel); }
.sk-title { display: flex; flex-direction: column; gap: 8px; }
.sk-kick { width: 120px; height: 12px; border-radius: 4px; }
.sk-h1 { width: 260px; height: 30px; border-radius: 6px; }
.sk-row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sk-card { height: 110px; }
.sk-row2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; flex: 1; }
.sk-big { min-height: 420px; }
.rf-scrim { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--scrim); }
.rf-card {
  width: 460px; max-width: calc(100% - 32px); padding: 28px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.rf-h1 { margin: 0; font-family: 'Chakra Petch', sans-serif; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 26px; }
.rf-p { margin: 0; color: var(--muted); line-height: 1.5; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; align-self: stretch; text-align: left; }
.step { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border-radius: 8px; background: var(--panel2); }
.step-ic { display: inline-flex; }
.step-ok { color: var(--okFg); }
.step-run { color: var(--accentText); }
.step-wait { color: var(--muted); }
.step-label { flex: 1; font-weight: 500; }
.step-note { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); }
/* PRefreshing (phone) */
.rf-phone { display: flex; flex-direction: column; gap: 12px; }
.rf-note {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--accentSoft);
  border: 1px solid var(--accentDim); font-size: 13px; line-height: 1.4;
}
.rf-note svg { flex-shrink: 0; }
.rf-pcard { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 22px 16px; }
.rf-lh { line-height: 1.5; }
.sk-ph { border-radius: 14px; }

/* ------------------------------------------------------------------ phone pill bar (PH_NAV) */
.pnav {
  position: fixed; left: 16px; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); height: 64px; border-radius: 18px;
  background: var(--navBg); border: 1px solid var(--line); box-shadow: var(--shadow);
  display: grid; grid-template-columns: repeat(var(--pn, 5), 1fr); z-index: 25;
}
.pnav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none;
  color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; min-height: 44px;
}
.pnav-item.is-on { color: var(--text); font-weight: 700; }
/* Active tab = filled accent pill behind the icon (not colour alone; design fix 19 Oct). */
.pnav-pill {
  width: 52px; height: 28px; border-radius: 999px; background: transparent; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.pnav-item.is-on .pnav-pill { background: var(--accent); color: var(--accentInk); }

/* phone More screen — built from ph_head + card parts */
.sheet { position: fixed; inset: 0; z-index: 20; background: var(--bg); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.sheet-body { flex: 1; padding: 14px 16px 104px; display: flex; flex-direction: column; gap: 12px; }
.sheet-list { display: flex; flex-direction: column; padding: 6px; }
.sheet-item {
  display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 10px; border-radius: 10px; text-decoration: none; color: var(--text);
  font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.sheet-item span { flex: 1; }
.sheet-item > svg:first-child { color: var(--muted); }
.sheet-item > svg:last-child { color: var(--muted); }
.sheet-item.is-on { background: var(--panel2); box-shadow: inset 0 -3px 0 var(--accent); }
.sheet-item.is-on > svg:first-child { color: var(--accentText); }
.sheet-who { display: flex; flex-direction: column; gap: 6px; }
.sheet-who .btn2 { margin-top: 8px; }

/* ------------------------------------------------------------------ desktop / phone switch */
.only-phone { display: none !important; }
@media (max-width: 760px) {
  .only-desk { display: none !important; }
  .only-phone { display: block !important; }
  .phead.only-phone, .rf-phone.only-phone, .sheet.only-phone { display: flex !important; }
  .sheet.only-phone[hidden] { display: none !important; }
  .pnav.only-phone { display: grid !important; }
  .main { padding: 14px 16px 104px; gap: 12px; }
  .main.state-refreshing { padding: 14px 16px 104px; }
  .na-stage { padding: 20px 4px; background: none; }
  .na { gap: 16px; }
  .na-badge { width: 140px; height: 140px; }
  .na-rings { width: 140px; height: 140px; }
  .na-shield { width: 50px; height: 50px; }
  .na-h1-ph { font-size: 30px; }
  .na-p-ph { font-size: 16px; }
  .na-signout { height: 48px; width: 100%; margin-top: 10px; }
  .empty, .err { min-height: 300px; }
  .state-title { font-size: 20px; }
  .ro-banner { align-items: flex-start; flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ /v2/login (SignIn / SignInPhone, V1.2) */
.si-main { flex: 1; padding: 22px 28px 28px; display: flex; flex-direction: column; }
.si-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: calc(100vh - 50px); min-height: calc(100dvh - 50px); }
.si-hero {
  position: relative; overflow: hidden; background: var(--hero); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between; padding: 48px 56px;
}
.si-ring { position: absolute; pointer-events: none; }
.si-ring-desk { right: -230px; top: 70px; opacity: .9; }
.si-ring-ph { display: none; }
.si-top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.si-server { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.si-tools { display: flex; gap: 8px; align-items: center; }
.si-brand { position: relative; display: flex; flex-direction: column; gap: 22px; max-width: 560px; }
.si-word { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 76px; line-height: .9; letter-spacing: .08em; }
.si-tag { font-size: 18px; line-height: 1.5; color: var(--muted); }
.si-facts { position: relative; height: 56px; }
.si-side { display: flex; align-items: center; justify-content: center; padding: 48px; background: var(--bg); }
.si-form { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 22px; }
.si-head { display: flex; flex-direction: column; gap: 6px; }
.si-label { display: flex; flex-direction: column; gap: 6px; }
.si-input {
  height: 48px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2);
  color: var(--text); font: inherit; font-size: 16px; width: 100%;
}
.si-input:focus, .si-digit:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accentSoft); }
.si-field { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.si-legend { padding: 0 0 8px; }
.si-code { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.si-digit {
  height: 58px; min-width: 0; width: 100%; text-align: center; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-family: 'IBM Plex Mono', monospace; font-size: 24px; font-weight: 600; padding: 0;
}
.si-hint { font-size: 12px; color: var(--muted); }
.si-submit { height: 50px; font-size: 15px; }
.si-submit[disabled] { opacity: .6; cursor: progress; }
.si-first { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.si-qr {
  width: 76px; height: 76px; flex-shrink: 0; display: grid; grid-template-columns: repeat(9, 1fr); gap: 1px; padding: 6px;
  border-radius: 8px; background: #FFFFFF;
}
.si-qr span { background: #FFFFFF; }
.si-qr span.on { background: #111111; }
.si-first-text { display: flex; flex-direction: column; gap: 4px; }
.si-first-title { font-weight: 600; }
.si-first-body { font-size: 13px; color: var(--muted); line-height: 1.4; }
.si-link { font-size: 13px; color: var(--accentText); font-weight: 600; text-decoration: none; }
.si-back { align-self: flex-start; }
/* errors in the card — built from the StateError parts: warn colours + warn icon + words */
.si-err {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--warnBg);
  border: 1px solid var(--warnBd); color: var(--text); font-size: 13px; line-height: 1.4;
}
.si-err svg { flex-shrink: 0; color: var(--warnFg); }
.si-qrbox { align-self: flex-start; padding: 12px; border-radius: 12px; background: #FFFFFF; line-height: 0; }
.si-qrbox img { width: 180px; height: 180px; image-rendering: pixelated; }
.si-secret { display: flex; flex-direction: column; gap: 6px; }
.si-secret code {
  font-family: 'IBM Plex Mono', monospace; font-size: 14px; padding: 10px 12px; border-radius: 8px; background: var(--panel2);
  border: 1px solid var(--line); word-break: break-all; user-select: all;
}

@media (max-width: 760px) {
  .si-main { padding: 0; }
  .si-grid { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--hero); position: relative; overflow: hidden; }
  .si-hero { flex: 0 0 auto; position: static; overflow: visible; background: none; border-right: none; padding: 22px 20px 0; gap: 18px; justify-content: flex-start; }
  .si-ring-desk { display: none; }
  .si-ring-ph { display: block; right: -170px; top: -60px; }
  .si-tools .mode-btn { width: 44px; height: 44px; border-radius: 10px; }
  .si-picker { gap: 2px; padding: 2px; }                     /* PA: the scheme picker on the phone too */
  .si-picker .swatch { width: 40px; height: 40px; border-radius: 8px; }
  .si-brand { gap: 12px; padding-top: 40px; }
  .si-emblem { width: 64px; height: 64px; }
  .si-word { font-size: 44px; line-height: .92; }
  .si-tag-ph { font-size: 15px; }
  .si-facts { display: none !important; }
  .si-side { flex: 1; position: relative; align-items: flex-end; padding: 18px 20px 26px; background: none; }
  .si-form {
    max-width: none; gap: 14px; padding: 18px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .si-form .h1 { font-size: 26px; }
  .si-field { gap: 6px; }
  .si-legend { padding: 0 0 6px; }
  .si-code { gap: 6px; }
  .si-digit { height: 54px; font-size: 22px; background: var(--panel2); }
  .si-submit { height: 52px; }
  .si-link-ph { display: block !important; text-align: center; }
  .si-head .muted { font-size: 13px; }
}

/* ------------------------------------------------------------------ P1 Users & roles (Users / PUsers)
   Values from the artboards. Dialogs, the phone manage sheet and the QR card are built from parts. */
.ur { display: flex; flex-direction: column; gap: 16px; }
.title-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ur-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ur-grid > .card, .ur-audit { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ur-grid > .ur-access { gap: 10px; }
.ur-head { display: flex; align-items: center; gap: 10px; }
.ur-count { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); }
.ur-search {
  margin-left: auto; display: flex; align-items: center; gap: 8px; height: 36px; width: 220px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted);
}
.ur-search input { border: none; outline: none; background: transparent; color: var(--text); font: inherit; width: 160px; min-width: 0; }
.ur-search input::-webkit-search-cancel-button { display: none; }
.ur-table { display: flex; flex-direction: column; min-width: 0; }
.ur-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 90px 110px 130px 90px; align-items: center; }
.ur-row[hidden] { display: none; }
.ur-row-h { align-items: end; }
.ur-row-h span {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; color: var(--muted);
  text-align: left; padding: 0 10px 10px; text-transform: uppercase; white-space: nowrap;
}
.ur-row:not(.ur-row-h) { align-items: stretch; }
.ur-cell { padding: 9px 10px; border-top: 1px solid var(--line); min-width: 0; display: flex; align-items: center; }
.ur-right { text-align: right !important; justify-content: flex-end; }
.ur-member { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ur-init {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 7px; background: var(--panel2); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; font-family: 'Chakra Petch', sans-serif; font-weight: 700;
}
.ur-who { display: flex; flex-direction: column; min-width: 0; }
.ur-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ur-email { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ur-you { font-weight: 400; color: var(--muted); font-size: 12px; }
.ur-last { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); white-space: nowrap; }
.rank-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600;
}
.rank-chip.is-top { border-color: var(--accentDim); background: var(--accentSoft); color: var(--accentText); }
.rank-chip select { border: none; background: transparent; color: inherit; font: inherit; width: 18px; padding: 0; cursor: pointer; }
.rank-chip select option { color: var(--text); background: var(--panel); }
.ur-acts { display: inline-flex; gap: 6px; }
.ibtn[disabled] { opacity: .35; cursor: not-allowed; }
.ibtn-44 { width: 44px; height: 44px; flex-shrink: 0; }

.ur-note, .ur-ro { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; font-size: 13px; color: var(--text); }
.ur-note { background: var(--accentSoft); }
.ur-ro { background: var(--skipBg); }
.ur-note svg, .ur-ro svg { flex-shrink: 0; }
.ur-mx { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 64px); align-items: center; height: 34px; border-top: 1px solid var(--line); }
.ur-mx-h { height: auto; border-top: none; padding: 6px 0 2px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.ur-mx-h span + span { text-align: center; }
.ur-mx-page { font-size: 13px; font-weight: 500; }
.ur-mx-cell { display: flex; justify-content: center; }
.ur-appr-head { margin-top: 14px; }
.ur-mx.ur-appr { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.switch {
  width: 38px; height: 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--track); padding: 2px;
  display: flex; justify-content: flex-start;
}
.switch .knob { width: 16px; height: 16px; border-radius: 999px; background: var(--panel); }
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); justify-content: flex-end; }
.switch[aria-checked="true"] .knob { background: var(--accentInk); }
.switch[disabled] { cursor: not-allowed; opacity: .55; }

.ur-audit-head .ur-filters { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ur-filter { height: 34px; padding: 0 6px; }
.ur-filter select { border: none; background: transparent; color: inherit; font: inherit; font-weight: 600; height: 32px; padding: 0 8px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ur-filter select option { background: var(--panel); color: var(--text); }
.ur-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 12px; border-radius: 8px;
  background: var(--accentSoft); color: var(--accentText); font-weight: 600; font-size: 13px;
}
.ur-chip-x { border: none; background: transparent; color: inherit; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ur-audit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ur-audit-grid > p { grid-column: 1 / -1; margin: 0; }
.ur-entry { padding: 12px; border-radius: 10px; background: var(--panel2); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ur-entry-when { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); }
.ur-entry-who { font-weight: 600; overflow-wrap: anywhere; }
.ur-entry-who .muted { font-weight: 400; }
.ur-entry-change { font-family: 'IBM Plex Mono', monospace; font-size: 12px; overflow-wrap: anywhere; }
.ur-old { color: var(--muted); text-decoration: line-through; }
.ur-new { color: var(--accentText); font-weight: 600; }
.ur-audit-foot { display: flex; justify-content: center; }
.ur-empty { margin: 0; }

/* dialogs (from card + buttons; destructive actions arm first, then act: icon + words, never colour alone) */
.ur-scrim { position: fixed; inset: 0; z-index: 46; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 16px; }   /* PA: above the Undo toast (45) on every page, as P11 */
.ur-dialog {
  width: 520px; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 20px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px;
}
.ur-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ur-dlg-body { display: flex; flex-direction: column; gap: 12px; }
.ur-dlg-body:empty { display: none; }
.ur-dlg-p { margin: 0; line-height: 1.5; color: var(--text); }
.ur-dlg-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ur-form { display: flex; flex-direction: column; gap: 12px; }
.ur-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ur-qr-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ur-qr-row .si-secret { flex: 1; min-width: 180px; }
.btn-danger.is-armed { background: var(--warnSolid); color: var(--warnInk); border-color: var(--warnSolid); }
.ur-sheet-who { display: flex; gap: 12px; align-items: center; overflow-wrap: anywhere; }

/* phone (PUsers): invite on top, section switch, cards instead of the table */
.ur-cards { display: flex; flex-direction: column; gap: 12px; }
.ur-card { padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.ur-card[hidden] { display: none; }
.ur-tile {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 9px; background: var(--panel2); color: var(--text);
  display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 13px;
}
.ur-tile.is-top { background: var(--accent); color: var(--accentInk); }
.ur-card-who { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ur-card-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ur-card-last { font-size: 12px; color: var(--muted); }
.ur-seg { grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.ur-seg button {
  height: 38px; border: none; border-radius: 7px; background: transparent; color: var(--muted);
  font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.ur-seg button[aria-selected="true"] { background: var(--accent); color: var(--accentInk); }
@media (max-width: 1180px) and (min-width: 761px) {
  .ur-grid { grid-template-columns: minmax(0, 1fr); }
  .ur-audit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ur { gap: 12px; }
  .ur-invite-ph.only-phone { display: inline-flex !important; width: 100%; }
  .ur-seg.only-phone { display: grid !important; }
  .ur-grid { display: flex; flex-direction: column; gap: 12px; }
  .ur[data-seg] [data-seg] { display: none !important; }
  .ur[data-seg="accounts"] [data-seg="accounts"], .ur[data-seg="access"] [data-seg="access"],
  .ur[data-seg="audit"] [data-seg="audit"] { display: flex !important; }
  .ur-accounts { padding: 0; border: none; background: none; }
  .ur-accounts > .ur-head { display: none; }
  .ur-cards.only-phone { display: flex !important; }
  .ur-note.only-phone, .ur-cards .ur-note { display: flex !important; }
  .ur-access, .ur-audit { padding: 14px; }
  .ur-mx-page { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 6px; }
  .ur-mx { grid-template-columns: minmax(0, 1fr) repeat(3, 56px); height: 44px; }
  .ur-mx-h { height: auto; }
  .switch { width: 44px; height: 26px; }
  .switch .knob { width: 20px; height: 20px; }
  .ur-audit-head { flex-wrap: wrap; }
  .ur-audit-head .ur-filters { margin-left: 0; width: 100%; }
  .ur-filter { height: 44px; flex: 1; }
  .ur-filter select { height: 42px; width: 100%; }
  .ur-chip { height: 44px; }
  .ur-chip-x { width: 44px; height: 44px; }
  .ur-audit-grid { grid-template-columns: minmax(0, 1fr); }
  .ur-scrim { align-items: flex-end; padding: 0; }
  .ur-dialog { width: 100%; border-radius: 20px 20px 0 0; max-height: 92vh; max-height: 92dvh; padding: 18px 16px 24px; }
  .ur-dlg-actions { flex-direction: column-reverse; }
  .ur-dlg-actions button { width: 100%; height: 48px; }
  .ur-dlg-head .ibtn { width: 44px; height: 44px; }
  .ur-qr-row { flex-direction: column; }
}

/* ------------------------------------------------------------------ P2 Alliance Overview (Main / APhone)
   Values from the artboards. Tech bands (D17) = colour + filled shape + word: ▼ Low, ◆ Mid, ▲ Good, ★ Top 10. */
.ov { display: flex; flex-direction: column; gap: 16px; flex: 1; }
@media (min-width: 761px) { .main.state-overview { padding-bottom: 24px; } }      /* Main: 22 28 24 */
.tone-up { color: var(--upFg); }
.tone-ok { color: var(--okFg); }
.tone-warn { color: var(--warnFg); }
.tone-muted, .tone-skip { color: var(--muted); }
.tone-bg-warn { background: var(--warnBg); color: var(--warnFg); }
.tone-bg-ok { background: var(--okBg); color: var(--okFg); }
.pill-bad { background: var(--badBg); color: var(--badFg); }
.ov-stale {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; font-size: 13px;
  background: var(--warnBg); border: 1px solid var(--warnBd); color: var(--text); flex-wrap: wrap;
}
.ov-stale > svg { color: var(--warnFg); flex-shrink: 0; }
.ov-stale > span { flex: 1; min-width: 200px; }
.ov-err-text { font-family: 'IBM Plex Mono', monospace; font-size: 12px; overflow-wrap: anywhere; }
.ov-h2 { margin: 0; font-family: 'Chakra Petch', sans-serif; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; }
.ov-mono { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); }

.ov-hero {
  display: grid; grid-template-columns: 340px minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; padding: 22px;
  border-radius: 16px; background: var(--hero); border: 1px solid var(--line);
}
.ov-ringbox { display: flex; align-items: center; gap: 18px; }
.ov-ring { flex-shrink: 0; }
.ov-legend { display: flex; flex-direction: column; gap: 8px; }
.ov-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ov-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ov-sw-8 { width: 8px; height: 8px; }
.ov-legend-rank { font-family: 'IBM Plex Mono', monospace; font-weight: 600; width: 22px; }
.ov-legend-pct { font-family: 'IBM Plex Mono', monospace; color: var(--muted); }
.ov-reads {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
}
.ov-read { background: var(--panel); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ov-read-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.ov-read-val { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 32px; line-height: 1; white-space: nowrap; }
.ov-read-unit { font-size: 15px; color: var(--muted); margin-left: 4px; }
.ov-read-note { font-size: 12px; font-weight: 600; }
.ov-objs { display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 0 8px; min-width: 0; }
.ov-objs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ov-obj { display: flex; flex-direction: column; gap: 6px; }
.ov-obj-row { display: flex; align-items: center; gap: 10px; }
.ov-obj-label { flex: 1; font-weight: 600; min-width: 0; }
.ov-obj-val { font-family: 'IBM Plex Mono', monospace; font-weight: 600; width: 64px; text-align: right; white-space: nowrap; }
.ov-obj-note { font-size: 11px; color: var(--muted); }
.ov-bar { position: relative; height: 8px; border-radius: 2px; background: var(--track); }
.ov-bar-fill { height: 8px; border-radius: 2px; background: var(--accent); max-width: 100%; }
.ov-bar-tick { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--text); margin-left: -1px; }
.ov-foot { font-size: 11px; color: var(--muted); }
.ov-bands { display: flex; gap: 2px; height: 8px; border-radius: 2px; overflow: hidden; background: var(--track); }
.band-seg { height: 8px; }
.band-low { background: var(--badFg); }
.band-mid { background: var(--warnFg); }
.band-good { background: var(--okFg); }
.band-top { background: var(--accent); }
.ov-band-legend { display: flex; gap: 10px; flex-wrap: wrap; }
.band-key { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; }
.band-key b { font-family: 'IBM Plex Mono', monospace; color: var(--text); }
.band-txt-low { color: var(--badFg); }
.band-txt-mid { color: var(--warnFg); }
.band-txt-good { color: var(--okFg); }
.band-txt-top { color: var(--accentText); }

.ov-bento { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; flex: 1; }
.ov-bento-2 { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.ov-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ov-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ov-chart { display: block; }
.ov-podium { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; }
.ov-pod { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.ov-pod-name { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-pod-gain { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--upFg); font-weight: 600; }
.ov-pod-block {
  width: 100%; border-radius: 8px 8px 2px 2px; background: var(--panel2); border: 1px solid var(--line);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 10px;
}
.ov-pod-block span { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 28px; color: var(--text); }
.ov-pod-block.is-first { background: var(--accent); }
.ov-pod-block.is-first span { color: var(--accentInk); }
.ov-link { font-size: 13px; color: var(--accentText); font-weight: 600; text-decoration: none; }
.ov-none { margin: 0; flex: 1; }
.ov-signal { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; background: var(--panel2); text-decoration: none; color: var(--text); }
.ov-signal-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.ov-signal-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ov-signal-tag { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.ov-signal-title { font-weight: 600; line-height: 1.3; }
.ov-ticker {
  display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bar); overflow: hidden;
}
.ov-ticker-tag { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--accentText); white-space: nowrap; }
.ov-ticker-items { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.ov-tick { white-space: nowrap; font-size: 13px; color: var(--muted); }
.ov-tick b { color: var(--text); font-weight: 600; }
.ov-tick-sep { color: var(--line); }
.ov-data { display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); white-space: nowrap; }
.ov-refresh-sm {
  width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.ov-refresh-sm.is-busy svg, .ov-refresh.is-busy svg { animation: ov-spin 1s linear infinite; }
@keyframes ov-spin { to { transform: rotate(360deg); } }

/* phone (APhone) */
.ov-ph-hero {
  border-radius: 18px; background: var(--hero); border: 1px solid var(--line); padding: 16px;
  flex-direction: column; align-items: center; gap: 10px;
}
.ov-ph-legend { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ov-ph-legend > span { display: inline-flex; align-items: center; gap: 5px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.ov-ph-objs { border-radius: 16px; background: var(--panel); border: 1px solid var(--line); padding: 14px; flex-direction: column; gap: 10px; }
.ov-h2-ph { font-size: 13px; }
.ov-ph-objs .ov-obj { gap: 5px; }
.ov-ph-objs .ov-obj-row { gap: 8px; }
.ov-ph-objs .ov-obj-label { font-size: 13px; }
.ov-obj-st { font-size: 11px; font-weight: 600; white-space: nowrap; }
.ov-obj-st.tone-ok { color: var(--okFg); }
.ov-ph-objs .ov-obj-val { font-size: 13px; width: auto; min-width: 44px; }
.ov-ph-objs .ov-bar, .ov-ph-objs .ov-bar-fill { height: 6px; }
.ov-ph-objs .ov-bar-tick { height: 12px; }
/* PA: the rest of the signals, one tap away */
.ov-sig-more { display: flex; flex-direction: column; gap: 10px; }
.ov-sig-more > summary { cursor: pointer; list-style: none; min-height: 40px; display: flex; align-items: center; }
.ov-sig-more > summary::-webkit-details-marker { display: none; }
.ov-sig-rest { display: flex; flex-direction: column; gap: 10px; }
.ov-card-signals { gap: 10px; }
@media (max-width: 1180px) and (min-width: 761px) {
  .ov-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ov-objs { grid-column: 1 / -1; }
  .ov-bento, .ov-bento-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ov-bento > .card:first-child { grid-column: 1 / -1; }
  .ov-ticker { height: auto; min-height: 44px; padding: 10px 16px; flex-wrap: wrap; }   /* PA: every item shows */
  .ov-ticker-items { flex-wrap: wrap; white-space: normal; row-gap: 6px; }
}
/* Phone (APhone + PA): ring, KPIs, every objective, then Signals, the power chart, Top growth and Latest. */
@media (max-width: 760px) {
  .ov { gap: 14px; }
  .ov-ph-hero.only-phone, .ov-ph-objs.only-phone { display: flex !important; order: 1; }
  .ov-ph-objs.only-phone { order: 3; }
  .ov-reads.ov-ph-reads.only-phone { display: grid !important; order: 2; }
  .ov-ph-reads .ov-read { padding: 12px 14px; }
  .ov-ph-reads .ov-read-val { font-size: 26px; }
  .ov-bento, .ov-bento-2 { order: 4; display: flex; flex-direction: column; gap: 14px; }
  .ov-bento .ov-card { padding: 14px; }
  .ov-card-signals { order: -1; }
  .ov-podium { min-height: 170px; }
  .ov-ticker { order: 5; height: auto; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; border-radius: 14px; }
  .ov-ticker-items { flex-direction: column; align-items: flex-start; gap: 6px; white-space: normal; }
  .ov-tick { white-space: normal; }
  .ov-tick-sep { display: none; }
  .ov-data { align-self: flex-start; }
  .ov-refresh-sm { width: 40px; height: 40px; }
  .ov-signal { min-height: 44px; }
  .ov-refresh { width: 100%; height: 44px; }
}

/* ------------------------------------------------------------------ P3 Members (AMembers / PMembers)
   Values from the artboards. Status = icon + word (pill), never colour alone; the table is built from parts. */
.mb { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.mb-tools { display: flex; align-items: center; gap: 10px; }
.mb-search {
  display: flex; align-items: center; gap: 8px; height: 40px; width: 240px; padding: 0 12px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
}
.mb-search svg { flex-shrink: 0; }
.mb-search input {
  border: none; outline: none; background: transparent; color: var(--text); font: inherit; width: 180px; min-width: 0;
  flex: 1; -webkit-appearance: none; appearance: none;
}
.mb-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.mb-search:focus-within { border-color: var(--accentDim); }
.mb-sort {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: 13px;
}
.mb-sort select, .mb-sel select { border: none; background: transparent; color: var(--text); font: inherit; font-weight: 600; }
.mb-sort select option, .mb-sel select option { background: var(--panel); color: var(--text); }
.mb-toggle { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mb-toggle button {
  width: 44px; height: 40px; border: none; background: var(--panel); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.mb-toggle button[aria-pressed="true"] { background: var(--accentSoft); color: var(--accentText); }
/* V1.6 power-chart range picker: the same segmented control, with words */
.rg-head { flex-wrap: wrap; align-items: center; row-gap: 8px; }
.rg-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.rg-title[hidden] { display: none; }
.rg-seg { flex-shrink: 0; }
.rg-seg button {
  width: auto; height: 30px; padding: 0 10px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.rg-seg button + button { border-left: 1px solid var(--line); }
@media (max-width: 760px) {
  .rg-head .rg-seg { width: 100%; }
  .rg-seg button { flex: 1; height: 40px; }
}

.mb-filters { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mb-chip {
  height: 34px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
}
.mb-chip-rank { padding: 0 14px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.mb-chip[aria-pressed="true"] { background: var(--accentSoft); color: var(--accentText); border-color: var(--accentDim); }
.mb-count { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); font-weight: 400; }
.mb-divider { width: 1px; height: 24px; background: var(--line); }
.mb-showing { margin-left: auto; font-size: 13px; color: var(--muted); }

.mb[data-view="table"] .mb-cards, .mb[data-view="cards"] .mb-table-wrap { display: none; }
.mb-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mb-card {
  display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: var(--panel);
  border: 1px solid var(--line); text-decoration: none; color: var(--text); position: relative; overflow: hidden; min-width: 0;
}
.mb-card[hidden], .mb-pcard[hidden] { display: none !important; }
a.mb-card:hover, a.mb-pcard:hover { border-color: var(--accentDim); }
.mb-card.is-warn, .mb-pcard.is-warn { border-color: var(--warnBd); }
.mb-card-top, .mb-pcard-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mb-hex { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.mb-hex svg { position: absolute; inset: 0; }
.mb-hex svg { fill: var(--panel2); stroke: var(--line); stroke-width: 1.5; }
.mb-hex.is-officer svg { fill: var(--accent); stroke: var(--accent); }
.mb-hex span { position: relative; font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 12px; color: var(--text); }
.mb-hex.is-officer span { color: var(--accentInk); }
.mb-hex-lg span { font-size: 16px; }
.mb-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mb-name { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-title { color: var(--accentText); font-weight: 600; }                 /* P11.2: the R4 title */
.mb-more { opacity: .8; }
.mb-power-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mb-power { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 28px; line-height: 1; white-space: nowrap; }
.mb-unit { font-size: 14px; color: var(--muted); margin-left: 3px; }
.mb-delta { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tone-d-up { color: var(--upFg); }
.tone-d-down { color: var(--warnFg); }
.tone-d-new { color: var(--accentText); }
.tone-d-none, .tone-d-flat { color: var(--muted); }
.mb-bars {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: end; height: 70px;
  padding-top: 4px; border-top: 1px solid var(--line);
}
.mb-bar { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 4px; height: 59px; }
.mb-bar i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--accentDim); }
.mb-bar:first-child i { background: var(--accent); }
.mb-bar span { font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 15px; color: var(--muted); text-align: center; }
.mb-foot { font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }

/* table: sticky header (the page scrolls, so the wrapper must not clip: no overflow here) */
.mb-table-wrap { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.mb-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.mb-table th {
  position: sticky; top: 0; z-index: 2; background: var(--panel2); text-align: left; padding: 0 10px; height: 40px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.mb-table th:first-child { border-top-left-radius: 15px; }
.mb-table th:last-child { border-top-right-radius: 15px; }
.mb-table th.num, .mb-table td.num { text-align: right; }
.mb-table th button {
  border: none; background: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: 4px; height: 40px;
}
.mb-table th button:hover, .mb-table th[aria-sort="ascending"] button, .mb-table th[aria-sort="descending"] button { color: var(--text); }
.mb-table th[aria-sort="descending"] .mb-arrow::after { content: "\25BC"; color: var(--accentText); }
.mb-table th[aria-sort="ascending"] .mb-arrow::after { content: "\25B2"; color: var(--accentText); }
.mb-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mb-table tbody tr:last-child td { border-bottom: none; }
.mb-table tbody tr:hover td { background: var(--panel2); }
.mb-table td.num { font-family: 'IBM Plex Mono', monospace; }
.mb-table td .mb-hex { vertical-align: middle; }
.mb-table td .mb-hex span { font-size: 10px; }
.mb-td-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.mb-td-name a { color: var(--text); text-decoration: none; }
.mb-td-name a:hover { text-decoration: underline; }
.mb-td-power { font-weight: 600; color: var(--text); }
.mb-td-joined { color: var(--muted); }

.mb-nomatch { min-height: 260px; }

a.btn, a.btn2 { text-decoration: none; }

@media (max-width: 1279px) and (min-width: 761px) { .mb-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* P3.1: the table must never be wider than the page (a phone in landscape is 761-1180 px wide). The table can't
   scroll sideways in its own box without losing the sticky header, so narrower screens drop columns instead:
   the squads total stays, S1-S4 go (they're on the cards); below 900 px also HQ and Week gain. */
/* PA: a dropped column's numbers stay on screen as a small second line (S1-S4 under the squads total; HQ and the
   week gain under the name). */
.mb-td-sub { display: none; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 400; color: var(--muted); white-space: normal; }
.mb-sub-sq { max-width: 8em; margin-left: auto; }
@media (max-width: 1180px) and (min-width: 761px) {
  .mb-table .mb-sq { display: none; }
  .mb-table th, .mb-table td { padding-left: 8px; padding-right: 8px; }
  .mb-td-name { max-width: 180px; }
  .mb-table .mb-sub-sq { display: block; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .mb-table .mb-hq, .mb-table .mb-gain { display: none; }
  .mb-table .mb-sub-hq { display: block; }
}
@media (max-width: 1023px) and (min-width: 761px) {
  .mb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mb-head { align-items: flex-start; }
  .mb-tools { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .mb { gap: 12px; }
  .mb-search-ph.only-phone { display: flex !important; width: auto; height: 48px; padding: 0 14px; border-radius: 12px; }
  .mb-search-ph input { font-size: 16px; width: auto; }
  .mb-filters { flex-direction: column; align-items: stretch; gap: 10px; }
  .mb-ranks { flex-wrap: nowrap; overflow: hidden; }
  .mb-chip-rank { flex-shrink: 0; height: 40px; border-radius: 8px; }
  .mb-ph-selects.only-phone { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mb-sel select {
    width: 100%; height: 44px; padding: 0 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line);
    font-size: 14px;
  }
  .mb-showing { margin-left: 0; }
  .mb-pcards.only-phone { display: flex !important; flex-direction: column; gap: 12px; }
  .mb-pcard {
    padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text); min-width: 0;
  }
  .mb-pcard .mb-hex span { font-size: 11px; }
  .mb-pright { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
  .mb-ppower { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 20px; white-space: nowrap; }
  .mb-ppower .mb-unit { font-size: 11px; margin-left: 0; }
  .mb-pcard .mb-delta { font-size: 11px; }
  .mb-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .mb-tile { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 8px; background: var(--panel2); }
  .mb-tile-n { font-size: 10px; color: var(--muted); }
  .mb-tile-v { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600; }
  .mb-ppill { display: flex; }
  /* PR §2d: Cards · List on the phone too (the same choice as on a desktop). List = the table with the columns that
     fit: rank, name (HQ · week gain and the status on lines under it), power, change. */
  .mb-toggle-ph.only-phone { display: grid !important; grid-template-columns: 1fr 1fr; border-radius: 10px; }
  .mb-toggle-ph button { width: auto; height: 44px; gap: 8px; font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 13px; }
  .mb-toggle-ph button + button { border-left: 1px solid var(--line); }
  .mb[data-view="table"] .mb-pcards.only-phone { display: none !important; }
  .mb-table .mb-hq, .mb-table .mb-gain, .mb-table .mb-sq, .mb-table .mb-sqt, .mb-table .mb-st, .mb-table .mb-td-joined { display: none; }
  .mb-table .mb-sub-hq, .mb-table .mb-sub-st { display: block; }
  .mb-table .mb-sub-st { margin-top: 4px; }
  .mb-table th, .mb-table td { padding-left: 8px; padding-right: 8px; }
  .mb-td-name { max-width: calc(100vw - 244px); }
  .mb-table th:nth-last-child(9) { border-top-right-radius: 15px; }
}

/* ------------------------------------------------------------------ P4 Member profile (Profile / PProfile)
   Values from the artboards. Activity cells: ✓ met (accent) · ▲ missed (warn) · — not scheduled (grey), always
   icon + words in the label; tech cells show the D17 band shape instead of the icon. */
.pf { display: flex; flex-direction: column; gap: 16px; }
.pf-backlink { align-self: flex-start; font-size: 13px; color: var(--muted); text-decoration: none; }
.pf-backlink:hover { color: var(--text); }
.pf-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 22px;
  border-radius: 16px; background: var(--hero); border: 1px solid var(--line);
}
.pf-hex svg { stroke: var(--accent); }
.pf-hex-lg span { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 26px; }
.pf-id { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pf-line1 { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.pf-h1 { margin: 0; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 40px; letter-spacing: .02em; overflow-wrap: anywhere; min-width: 0; }
.pf-power { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 30px; white-space: nowrap; }
.pf-unit { font-size: 15px; color: var(--muted); margin-left: 4px; }
.pf-delta { font-family: 'IBM Plex Mono', monospace; font-weight: 600; white-space: nowrap; }
.pf-aka { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.pf-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-title { align-self: center; }                                        /* P11.2: the R4 title, icon + word */
.pf-phero .pf-title { align-self: flex-start; }
.pf-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--panel); font-size: 12px; white-space: nowrap;
}
.pf-sub { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pf-sub .pill { white-space: normal; height: auto; min-height: 22px; padding: 3px 8px; }
.pf-black { white-space: normal; height: auto; min-height: 22px; padding: 3px 8px; line-height: 1.3; max-width: 100%; }   /* P12: a blacklisted name seen again */
.pf-prof { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); }
.pf-actions { display: flex; flex-direction: column; gap: 8px; }
.pf-actrow { display: flex; gap: 8px; }
.pf-actions .btn2.is-on, .pf-pbtns .btn2.is-on { background: var(--warnBg); color: var(--warnFg); border-color: var(--warnBd); }

.pf-row2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.pf-row3 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .9fr); gap: 16px; align-items: start; }
.pf-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pf-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pf-hint { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); }
.pf-nodata { display: flex; align-items: center; gap: 8px; min-height: 120px; justify-content: center; color: var(--muted); font-size: 13px; }

/* power line (P2 chart parts) */
.pf-chart { display: block; overflow: visible; }
.pf-grid { stroke: var(--grid); }
.pf-axis { font-family: 'IBM Plex Mono', monospace; font-size: 11px; fill: var(--muted); }
.pf-axis.is-nodata { opacity: .7; }
.pf-radar .pf-axis { font-size: 13px; }
.pf-area { fill: var(--accentSoft); }
.pf-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.pf-avg { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 5; }
.pf-avg-dot { fill: var(--muted); }
.pf-avg-label { font-size: 11px; fill: var(--muted); }
.pf-dot { fill: var(--accent); }
.pf-dot.is-last { stroke: var(--panel); stroke-width: 3; }

/* squads small multiples */
.pf-squads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-squad { padding: 10px 12px; border-radius: 10px; background: var(--panel2); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-squad-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.pf-squad-n { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.pf-squad-d { font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.pf-squad-v { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 22px; }
.pf-squad-v .pf-unit { font-size: 12px; margin-left: 3px; }
.pf-squad.is-missing .pf-squad-v { color: var(--muted); }
.pf-spark { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pf-stale { align-self: flex-start; }

/* activity strips */
.pf-strips { display: flex; flex-direction: column; gap: 4px; }
.pf-strip { display: grid; grid-template-columns: 70px repeat(8, minmax(0, 1fr)); gap: 4px; align-items: center; }
.pf-strip-head { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; color: var(--muted); }
.pf-strip-head span { text-align: center; }
.pf-strip-label { font-weight: 600; font-size: 13px; }
.pf-cell { height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--panel2); color: var(--muted); }
.pf-cell.is-met { background: var(--accentSoft); color: var(--accentText); }
.pf-cell.is-missed { background: var(--warnBg); color: var(--warnFg); }
.pf-cell.is-out { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--line) 4px 5px); color: var(--muted); }   /* PR §2b */
.pf-glyph { font-size: 14px; font-weight: 700; line-height: 1; }
.pf-legend { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); }
.pf-legend span { display: inline-flex; align-items: center; gap: 4px; }
.pf-legend-tech { margin-top: -4px; }

/* skill radar + table */
.pf-skill { display: flex; align-items: center; gap: 12px; }
.pf-radar { flex-shrink: 0; overflow: visible; }
.pf-ring { fill: none; stroke: var(--line); }
.pf-spoke { stroke: var(--line); }
.pf-radar-me { fill: var(--accentSoft); stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.pf-radar-rank { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
.pf-skill-table { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pf-sk-row { display: grid; grid-template-columns: minmax(0, 1fr) 58px 50px; align-items: center; }
.pf-sk-row > span { padding: 4px 6px; border-top: 1px solid var(--line); }
.pf-sk-row > span:first-child { padding-left: 0; }
.pf-sk-row > span:last-child { padding-right: 0; }
.pf-sk-head > span {
  border-top: none; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em;
  color: var(--muted); text-transform: uppercase; padding-bottom: 6px; text-align: right; white-space: nowrap;
}
.pf-sk-name { display: flex; flex-direction: column; min-width: 0; }
.pf-sk-val { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-sk-val.is-nodata { font-style: italic; }
.pf-sk-num { text-align: right; font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
.pf-key { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--accent); }
.pf-key-rank { border-top: 1.5px dashed var(--muted); }

/* notes & history */
.pf-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pf-note { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.pf-note-ic { width: 28px; height: 28px; border-radius: 7px; background: var(--panel2); color: var(--accentText); display: flex; align-items: center; justify-content: center; }
.pf-note-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-note-text { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-line; }
.pf-note-meta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); }
.pf-more summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 0; }
.pf-more[open] summary { margin-bottom: 10px; }
.pf-latest { display: flex; flex-direction: column; gap: 8px; }
.pf-latest-text { font-size: 14px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }

/* phone parts (PProfile) */
.phead-back { width: 44px; height: 44px; margin-left: -10px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); flex-shrink: 0; }
.pf-phero { padding: 16px; border-radius: 16px; background: var(--hero); border: 1px solid var(--line); flex-direction: column; gap: 10px; }
.pf-pline1 { display: flex; align-items: baseline; gap: 10px; }
.pf-ppower { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 34px; }
.pf-ppower .pf-unit { font-size: 14px; margin-left: 0; }
.pf-pline1 .pf-delta { font-size: 13px; }
.pf-pill-ph { height: 26px; padding: 0 8px; gap: 5px; }
.pf-pbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-pbtns .btn, .pf-pbtns .btn2 { height: 44px; }
.pf-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-tile { padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-tile-l { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; color: var(--muted); }
.pf-tile-v { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-tile-n { font-size: 11px; font-weight: 600; }

/* dialogs reuse the Users dialog parts (.ur-scrim / .ur-dialog); form bits */
.pf-form { display: flex; flex-direction: column; gap: 12px; }
.pf-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.pf-field input, .pf-field textarea, .pf-field select {
  font: inherit; font-weight: 400; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; width: 100%;
}
.pf-field textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
.pf-field input { height: 44px; }
.pf-seg { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.pf-seg button {
  height: 38px; border: none; border-radius: 7px; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.pf-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accentInk); }
.pf-seg button:disabled { opacity: .45; cursor: not-allowed; }
.pf-dlg-note { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.pf-copied { color: var(--okFg); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

/* the undo toast (built from card + button parts) */
.pf-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 45; width: max-content; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.pf-toast-ic { color: var(--okFg); display: inline-flex; }
.pf-toast[data-kind="warn"] .pf-toast-ic { color: var(--warnFg); }
.pf-toast-text { font-size: 13px; font-weight: 600; min-width: 0; }
.pf-toast-s { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); font-weight: 400; }
.pf-toast-undo { height: 36px; }

@media (max-width: 1180px) and (min-width: 761px) {
  .pf-hero { grid-template-columns: auto minmax(0, 1fr); }
  .pf-hero .pf-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .pf-row3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pf-row3 > [data-pf-notes] { grid-column: 1 / -1; }
  .pf-h1 { font-size: 34px; }
}
@media (max-width: 1023px) and (min-width: 761px) {
  .pf-row2, .pf-row3 { grid-template-columns: minmax(0, 1fr); }
  .pf-skill { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .pf { gap: 12px; }
  .pf-phero.only-phone { display: flex !important; }
  .pf-tiles.only-phone { display: grid !important; }
  .pf-latest.only-phone { display: flex !important; }
  .pf-row2, .pf-row3 { display: flex; flex-direction: column; gap: 12px; }
  .pf-card { padding: 14px; gap: 8px; }
  .pf-card .h2 { font-size: 13px; }
  .pf-strip { grid-template-columns: 64px repeat(8, minmax(0, 1fr)); gap: 3px; }
  .pf-strips { gap: 3px; }
  .pf-cell { height: 26px; border-radius: 5px; }
  .pf-cell svg { width: 11px; height: 11px; stroke-width: 3; }
  .pf-strip-label { font-size: 12px; }
  .pf-glyph { font-size: 12px; }
  .pf-toast { bottom: calc(96px + env(safe-area-inset-bottom)); left: 16px; right: 16px; transform: none; width: auto; }
  .pf-toast-text { flex: 1; }
  .pf-toast-undo { height: 44px; }
  .pf-toast-x { width: 44px; height: 44px; }
  .pf-seg button { height: 44px; }
  /* PA: Squads 1-4 and the skill profile on the phone too (stacked under the chart / the strips) */
  .pf-skill { flex-direction: column; align-items: stretch; }
  .pf-radar { align-self: center; }
  .pf-squad-v { font-size: 20px; }
}

/* ------------------------------------------------------------------ P5 Upload center: UploadHub / PUploadHub (step 1),
   AUpload (review, desktop), PUploadReview + PUploadDetail (review, phone). Status = icon + word everywhere. */
.mono { font-family: 'IBM Plex Mono', monospace; }
.tone-accent { color: var(--accentText); }
.btn-sm { height: 32px; font-size: 13px; padding: 0 12px; }
.btn2.is-armed { background: var(--warnSolid); color: var(--warnInk); border-color: var(--warnSolid); }
.btn:disabled, .btn2:disabled, [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.up-writes { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); }
.up-hub { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; flex: 1; }
.up-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.up-types-card { display: flex; flex-direction: column; gap: 12px; }
.up-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.up-type {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--text); font: inherit; text-align: left; min-width: 0;
}
.up-type.is-on { border-color: var(--accent); background: var(--accentSoft); }
.up-type[aria-disabled="true"] { opacity: 1; cursor: pointer; }
.up-type-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--panel); color: var(--text); display: flex; align-items: center; justify-content: center; }
.up-type.is-on .up-type-ic { background: var(--accent); color: var(--accentInk); }
.up-type-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.up-type-l { font-weight: 600; }
.up-type-s { font-size: 12px; color: var(--muted); }
.up-soon { margin: 0; font-size: 13px; color: var(--muted); }
.up-drop {
  flex: 1; min-height: 300px; border-radius: 16px; border: 2px dashed var(--accentDim); background: var(--stage);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px;
}
.up-drop.is-over { border-color: var(--accent); background: var(--accentSoft); }
.up-drop-ic { width: 72px; height: 72px; border-radius: 18px; background: var(--accentSoft); color: var(--accentText); display: flex; align-items: center; justify-content: center; }
.up-drop-h { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: .06em; text-transform: uppercase; }
.up-drop-p { color: var(--muted); max-width: 460px; line-height: 1.5; }
.up-drop-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.up-pick, .up-drop-btns label { cursor: pointer; position: relative; }
.up-pick:focus-within, .up-drop-btns label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.up-queue { align-self: stretch; display: flex; flex-direction: column; gap: 10px; text-align: left; padding: 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.up-queue-head { display: flex; gap: 6px; flex-wrap: wrap; }
.up-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow: auto; }
.up-file { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: 13px; }
.up-file-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-queue-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.up-run { display: flex; flex-direction: column; gap: 10px; }
.up-run-head { display: flex; align-items: center; gap: 8px; }
.up-run-head .pill { margin-left: auto; }
.up-run [data-run-on] { display: flex; flex-direction: column; gap: 10px; }
.up-run [data-run-on][hidden] { display: none; }
.up-run-what { font-weight: 600; }
.up-bar { height: 10px; border-radius: 3px; background: var(--track); }
.up-bar-fill { height: 10px; border-radius: 3px; background: var(--accent); }
.up-run-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.up-run-note { font-size: 12px; color: var(--muted); }
.up-run-off, .up-none { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.up-runs { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.up-runlist { display: flex; flex-direction: column; gap: 10px; }
.up-runitem { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--panel2); }
.up-runitem-top { display: flex; align-items: center; gap: 8px; }
.up-runitem-ic { color: var(--accentText); display: inline-flex; }
.up-runitem-what { font-weight: 600; flex: 1; min-width: 0; }
.up-runitem-meta { font-size: 12px; color: var(--muted); }
.up-runitem-btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* P5.3: Cancel reading (hub + the review's wait card), Discard batch (review header) */
.up-run-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.up-run-btns[hidden] { display: none; }
.up-run-cancel-note { font-size: 12px; line-height: 1.4; flex: 1 1 200px; }
.up-ph-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.up-ph-head[hidden], .up-discard[hidden] { display: none; }
.up-ph-head-t { font-size: 13px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-runs-ph summary { list-style: none; }
.up-runs-ph summary::-webkit-details-marker { display: none; }
.up-runs-sum { display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; }
.up-runs-sum-t { flex: 1; display: flex; flex-direction: column; font-size: 14px; }
.up-runs-sum-t .muted { font-size: 12px; }
.up-runs-ph[open] .up-runs-sum svg:last-child { transform: rotate(90deg); }

/* review (AUpload) */
.main.state-upload-review { padding: 0; gap: 0; }
.up-rv { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.up-strip { display: flex; align-items: center; gap: 18px; padding: 14px 28px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.up-strip-h { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; }
.up-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.up-step { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 6px; background: var(--panel2); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.up-step.is-done { background: var(--okBg); color: var(--okFg); }
.up-step.is-now { background: var(--accent); color: var(--accentInk); }
.up-strip-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.up-counts { display: flex; gap: 12px; font-size: 13px; font-weight: 600; }
.up-counts .tone-skip { color: var(--skipFg); }
.up-write { height: 42px; padding: 0 18px; font-size: 14px; }
.up-banner { display: flex; align-items: center; gap: 12px; padding: 12px 28px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.up-banner-ic { display: inline-flex; }
.up-banner-btns { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.up-grid { flex: 1; display: grid; grid-template-columns: 236px minmax(0, 1fr) 400px; min-height: calc(100vh - 135px); min-height: calc(100dvh - 135px); }
.up-film { border-right: 1px solid var(--line); padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--bar); min-width: 0; }
.up-film-h { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--muted); padding: 0 6px 6px; }
.up-film-list { display: flex; flex-direction: column; gap: 6px; }
.up-film-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; text-align: left; min-width: 0; }
.up-film-item:hover { background: var(--panel2); }
.up-film-item.is-on { background: var(--accentSoft); border-color: var(--accentDim); }
.up-film-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.up-film-n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-film-s { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; }
.up-film-s.tone-skip { color: var(--skipFg); }
.up-mini { width: 30px; height: 48px; border-radius: 5px; background: var(--shot); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 4px; flex-shrink: 0; }
.up-mini span { height: 4px; border-radius: 1px; background: var(--shotBar); }
.up-stage { padding: 18px 24px; display: flex; flex-direction: column; gap: 12px; align-items: center; background: var(--stage); min-width: 0; }
.up-stage-bar { display: flex; align-items: center; gap: 8px; align-self: stretch; flex-wrap: wrap; font-size: 12px; }
.up-zoom { margin-left: auto; display: flex; gap: 6px; }
.up-zbtn { height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 12px; }
.up-zbtn[aria-pressed="true"] { border-color: var(--accentDim); background: var(--accentSoft); color: var(--accentText); font-weight: 600; }
.up-shot-wrap { max-width: 100%; }
.up-shot-wrap.is-200 { align-self: stretch; overflow: auto; max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); text-align: center; }
.up-shot { position: relative; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--shot); }
.up-shot-wrap.is-fit .up-shot { height: min(640px, calc(100vh - 250px)); height: min(640px, calc(100dvh - 250px)); max-width: 100%; }
.up-shot-wrap.is-200 .up-shot { height: auto; width: min(100%, 720px); display: inline-block; }
.up-shot img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 21px; user-select: none; }
.up-box { position: absolute; border: 2px dashed var(--okFg); border-radius: 6px; pointer-events: none; }
.up-box.is-warn { border-color: var(--warnFg); }
.up-box.is-skip { border-color: var(--skipFg); border-style: dotted; }
.up-tag { position: absolute; right: -6px; top: -12px; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--okSolid); color: var(--okInk); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; }
.up-tag.is-warn { background: var(--warnSolid); color: var(--warnInk); }
.up-tag.is-skip { background: var(--skipBg); color: var(--skipFg); backdrop-filter: blur(2px); }
.up-stage-note { font-size: 12px; color: var(--muted); text-align: center; }
.up-noimg { width: 280px; height: 420px; border-radius: 22px; border: 1px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 13px; text-align: center; padding: 16px; }
.up-panel { border-left: 1px solid var(--line); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; background: var(--panel); min-width: 0; }
.up-sec { display: flex; flex-direction: column; gap: 8px; }
.up-player { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 42px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); }
.up-player-name { flex: 1; font-weight: 600; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-player-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.up-hint { font-size: 12px; color: var(--muted); }
.up-select { flex: 1; min-width: 160px; display: flex; }
.up-select select { width: 100%; height: 40px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font: inherit; font-weight: 600; }
.up-field { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); }
.up-field.is-warn { background: var(--warnBg); border-color: var(--warnBd); }
.up-field-l { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.up-field.is-warn .up-field-l svg { color: var(--warnFg); }
.up-field-r { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.up-input { height: 36px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 15px; font-weight: 600; min-width: 0; width: 100%; }
.up-input:disabled { opacity: .8; }
.up-pair { display: flex; align-items: center; gap: 6px; }
.up-note { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.up-note.tone-skip { color: var(--skipFg); }
.up-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.up-choice { height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 600; }
.up-warnbox, .up-skipbox, .up-infobox { padding: 12px; border-radius: 10px; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; }
.up-warnbox { background: var(--warnBg); }
.up-warnbox > svg { color: var(--warnFg); flex-shrink: 0; }
.up-warnbox ul { margin: 4px 0 0; padding-left: 18px; }
.up-skipbox { background: var(--skipBg); }
.up-skipbox > svg { color: var(--skipFg); flex-shrink: 0; }
.up-infobox { background: var(--panel2); }
.up-infobox > svg { color: var(--muted); flex-shrink: 0; }
.up-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.up-actions .btn { height: 46px; font-size: 14px; }
.up-actions-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.up-actions-2 .btn2 { height: 42px; }
.up-actions-2 .btn2[aria-pressed="true"] { background: var(--warnBg); border-color: var(--warnBd); color: var(--warnFg); }
.up-keys { font-size: 12px; color: var(--muted); text-align: center; }
.up-wait { padding: 22px 28px; }
.up-waitcard { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 560px; }
.up-waitcard p { margin: 0; }
.up-detail { position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; }
.up-dhead .phead-back { width: 44px; height: 44px; margin-left: -10px; border: none; background: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.up-dbody { padding: 14px 16px 32px; display: flex; flex-direction: column; gap: 12px; }
.up-dshot { display: flex; justify-content: center; }
.up-dshot .up-shot { width: 100%; max-width: 420px; border-radius: 16px; }
.up-dshot .up-shot img { border-radius: 15px; }
body.up-noscroll { overflow: hidden; }

/* P5b: tech donations review — the list settings card, the selected row, the table of what will be written */
.ut-group { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); }
.ut-group-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.ut-group-label { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.ut-hint { margin: 0; font-size: 13px; line-height: 1.45; }
.ut-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ut-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ut-f-wide, .ut-fields > .ut-f:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ut-f .up-select { min-width: 0; }
.ut-final { height: 40px; justify-content: flex-start; gap: 6px; }
.ut-final[aria-pressed="true"] { background: var(--okBg); border-color: var(--okFg); color: var(--okFg); }
.ut-rowhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ut-rank { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 24px; }
.ut-ws { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ut-w { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); font-size: 13px; }
/* P5c: VS (the day is the tab on the screenshot), "No change", the date to pick when no time was found */
.ut-fixed { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 6px; border: 1px dashed var(--line); color: var(--text); font-size: 13px; font-weight: 600; }
.ut-w.is-same { grid-template-columns: minmax(0, 1fr) auto auto auto; opacity: .8; }
.ut-date { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 8px 0; }
.ut-date .ut-f { flex: 1 1 160px; }
.ut-date.is-need .up-input { border-color: var(--warnFg); }
.up-banner-btns .ut-f { min-width: 150px; }
[data-already], [data-included] { flex-wrap: wrap; }
[data-already] .btn2, [data-included] .btn2 { margin-left: auto; flex: none; }
.up-box.is-sel { border-style: solid; border-width: 3px; }
.ut-table-wrap { padding: 0 28px 28px; }
.ut-table-wrap[hidden] { display: none; }
.ut-table-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.ut-table-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ut-table-head .up-filters { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.ut-table-head .up-filter { height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-weight: 600; font-size: 13px; }
.ut-table-head .up-filter[aria-selected="true"] { background: var(--accentSoft); color: var(--accentText); border-color: var(--accentDim); }
.ut-table-scroll { overflow-x: auto; max-width: 100%; }
.ut-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ut-table th { white-space: nowrap; text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.ut-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ut-gh th { background: var(--panel2); color: var(--text); font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; letter-spacing: .04em; text-transform: none; padding: 9px 10px; }
.ut-tr { cursor: pointer; }
.ut-tr:hover, .ut-tr:focus-visible { background: var(--panel2); outline: none; }
.ut-tr.is-sel { background: var(--accentSoft); box-shadow: inset 3px 0 0 var(--accent); }
.ut-tr.is-attention .ut-c-rank { color: var(--warnFg); font-weight: 700; }
.ut-c-rank { width: 64px; }
.ut-c-shield { width: 72px; font-weight: 600; }
.ut-c-pts { text-align: right; width: 110px; font-weight: 600; }
.ut-c-name b { font-weight: 600; }
.ut-c-day { color: var(--muted); white-space: nowrap; }
.ut-ph-rank { font-weight: 700; font-size: 15px; min-width: 40px; }
.ut-ph-groups { display: flex; flex-direction: column; gap: 10px; }
/* P5d: a batch read from a screen recording — the agreement per row and its crop from every frame */
.ut-c-frames { white-space: nowrap; font-size: 12px; color: var(--muted); }
.ut-c-frames svg { vertical-align: -1px; margin-right: 4px; }
.ut-c-frames[data-agree="0"], .ut-c-frames[data-agree="1"] { color: var(--text); font-weight: 600; }
.ut-video span { min-width: 0; overflow-wrap: anywhere; }
.ut-crops { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ut-crop { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); }
.ut-crop:not(.is-same) { border-style: dashed; }
.ut-crop-img { display: block; width: 100%; border-radius: 4px; background-repeat: no-repeat; background-color: var(--bg); }
.ut-crop-t { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.up-ph-agree { display: block; font-size: 11px; color: var(--muted); }

@media (max-width: 1180px) and (min-width: 761px) {
  .up-hub { grid-template-columns: minmax(0, 1fr); }
  .up-grid { grid-template-columns: 200px minmax(0, 1fr) 340px; }
}
@media (max-width: 760px) {
  .up-hub { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .up-col { gap: 12px; }
  .up-types-card { padding: 0; border: none; background: none; }
  .up-types { grid-template-columns: 1fr 1fr; gap: 8px; }
  .up-type { min-height: 56px; padding: 10px; gap: 10px; background: var(--panel); }
  .up-type-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--panel2); }
  .up-type-l { font-size: 13px; line-height: 1.2; }
  .up-type-s { display: none; }
  .up-drop { min-height: 0; flex: none; padding: 20px 16px; gap: 12px; }
  .up-drop-ic { width: 60px; height: 60px; border-radius: 16px; }
  .up-drop-h { font-size: 18px; }
  .up-drop-p { font-size: 13px; }
  .up-drop-btns { flex-direction: column; align-self: stretch; }
  .up-drop-btns .btn { height: 50px; width: 100%; }
  .up-drop-btns .btn2 { height: 46px; width: 100%; }
  .up-run, .up-runs { padding: 14px; }
  .up-runs > .h2 { display: none; }
  .up-runs-ph:not([open]) + .h2 + .up-runlist { display: none; }
  .btn-sm { height: 44px; }
  .main.state-upload-review { padding: 14px 16px 180px; gap: 12px; }
  .up-banner { padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
  .up-banner-btns { margin-left: 0; }
  .up-ph.only-phone { display: flex !important; flex-direction: column; gap: 12px; }
  .up-ph.only-phone[hidden], .up-detail.only-phone[hidden] { display: none !important; }
  .up-split { display: flex; height: 30px; border-radius: 8px; overflow: hidden; gap: 2px; font-size: 12px; font-weight: 600; }
  .up-split span { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; }
  .up-split-ok { background: var(--okBg); color: var(--okFg); justify-content: flex-start !important; padding: 0 10px; }
  .up-split-warn { background: var(--warnBg); color: var(--warnFg); }
  .up-split-skip { background: var(--skipBg); color: var(--skipFg); }
  .up-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .up-filter { flex-shrink: 0; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-weight: 600; font-size: 13px; }
  .up-filter[aria-selected="true"] { background: var(--accentSoft); color: var(--accentText); border-color: var(--accentDim); }
  .up-ph-list { display: flex; flex-direction: column; gap: 12px; }
  .up-ph-item { padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
  .up-ph-item.is-attention { border-color: var(--warnBd); }
  .up-ph-item .up-mini { width: 34px; height: 54px; border-radius: 6px; }
  .up-ph-txt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; align-items: flex-start; }
  .up-ph-txt b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .up-ph-vals { font-size: 11px; color: var(--muted); }
  .up-ph-txt .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 22px; }
  .up-ph-txt .pill svg { vertical-align: -1px; margin-right: 5px; }
  .up-ph-write { position: fixed; left: 16px; right: 16px; bottom: 92px; z-index: 20; }
  .up-ph-write[hidden], .up-ph-write .btn[hidden] { display: none; }
  .up-write-ph { height: 52px; box-shadow: var(--shadow); }
  .up-wait { padding: 0; }
  .up-dbody .up-actions { margin-top: 4px; }
  .up-dbody .up-actions .btn, .up-dbody .up-actions-2 .btn2 { height: 48px; }
  .up-select select, .up-zbtn, .up-choice { min-height: 44px; }
  .up-input { height: 44px; }
}

/* ------------------------------------------------------------------ P6 VS (VS / PVS)
   Day dots: always a symbol + a word (title / aria-label / legend), never colour alone (D9). */
.vs { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vs-i { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.vs-ph { display: none; }
.vs-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vs-target-pill { height: 32px; padding: 0 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.vs-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.vs-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.vs-tab {
  height: 34px; padding: 0 14px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.vs-tab[aria-selected="true"] { background: var(--accent); color: var(--accentInk); }
.vs-week { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--muted); min-width: 0; }
.vs-week select, .vs-sort select { border: none; background: transparent; color: var(--text); font: inherit; font-weight: 600; min-width: 0; max-width: 100%; }
.vs-week select option, .vs-sort select option { background: var(--panel); color: var(--text); }
.vs-week select { height: 100%; }
.vs-loading { display: flex; flex-direction: column; gap: 16px; }
.vs-loading[hidden], .vs-pane[hidden] { display: none; }
.vs-sk-big { height: 420px; }
.vs-pane { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vs-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.vs-kpi { background: var(--panel); padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vs-kpi-l { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.vs-kpi-v { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 28px; line-height: 1; }
.vs-kpi-u { font-size: 14px; color: var(--muted); margin-left: 4px; }
.vs-kpi-n { font-size: 12px; font-weight: 600; }
.vs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.vs-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vs-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vs-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.vs-hint { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.vs-legend { margin-left: auto; display: flex; gap: 6px 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); align-items: center; }
.vs-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.vs-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
a.mb-chip { text-decoration: none; }
.vs-sort { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); font-size: 13px; }
.vs-none { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 10px; background: var(--skipBg); color: var(--text); font-size: 13px; }
.vs-none a { color: var(--accentText); font-weight: 600; }

/* the day dot */
.vs-dot { width: 28px; height: 28px; margin: 0 auto; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: var(--panel2); color: var(--muted); box-sizing: border-box; }
.vs-dot.is-met { background: var(--accentSoft); color: var(--accentText); }
.vs-dot.is-missed { background: var(--warnBg); color: var(--warnFg); }
.vs-dot.is-running { background: transparent; color: var(--text); border: 1.5px dashed var(--accentDim); }
.vs-dot.is-derived { background: var(--panel2); color: var(--accentText); border: 1px solid var(--accentDim); }
.vs-dot.is-final { color: var(--text); }
.vs-dot.is-future { background: transparent; border: 1px dashed var(--line); }
.vs-dot.is-out { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--line) 3px 4px); color: var(--muted); border: 1px solid var(--line); }   /* PR §2b: ⊘ not a member */
.vs-glyph { font-size: 14px; font-weight: 700; line-height: 1; }
i.vs-dot { font-style: normal; }
.vs-dot-sm { width: 16px; height: 16px; border-radius: 4px; margin: 0; display: inline-flex; }
.vs-dot-sm .vs-glyph { font-size: 10px; }

/* This week: desktop table (VS artboard grid) */
.vs-table { display: flex; flex-direction: column; min-width: 0; }
.vs-tr { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(6, 38px) 80px minmax(0, 1.1fr) minmax(0, 1.3fr); align-items: center; }
.vs-tr > span { padding: 9px 10px; border-top: 1px solid var(--line); min-width: 0; }
.vs-th > span { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; white-space: nowrap; padding: 0 10px 10px; border-top: none; overflow: hidden; text-overflow: ellipsis; }
.vs-tr > .vs-c-day { padding: 9px 2px; text-align: center; }
.vs-th > .vs-c-day { padding: 0 2px 10px; }
@media (max-width: 760px) { .vs-htr.vs-th > span { letter-spacing: 0; padding-left: 3px; padding-right: 3px; font-size: 10px; } }   /* PA: no header cut off */
.vs-c-num { text-align: right; font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
.vs-c-player { display: flex; align-items: center; gap: 8px; }
.vs-rank { font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); flex-shrink: 0; }
.vs-name { font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
a.vs-name:hover { text-decoration: underline; }
.vs-c-bar { display: flex; align-items: center; gap: 8px; }
.vs-bar-track { flex: 1; min-width: 30px; height: 8px; border-radius: 2px; background: var(--track); overflow: hidden; }
.vs-bar-fill { display: block; height: 8px; border-radius: 2px; background: var(--warnSolid); }
.vs-bar-fill.is-met { background: var(--accent); }
.vs-pct { font-family: 'IBM Plex Mono', monospace; font-size: 12px; width: 40px; text-align: right; flex-shrink: 0; }
.vs-tr > .vs-c-notes { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding-right: 0; }
.vs-note, .vs-disc { max-width: 100%; text-decoration: none; }
.vs-note-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.vs-open { width: 30px; height: 30px; margin-left: auto; flex-shrink: 0; }

/* This week: phone list (PVS) */
.vs-plist { display: flex; flex-direction: column; }
.vs-prow {
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(6, 22px) 52px; gap: 4px; align-items: center; min-height: 44px; width: 100%;
  border: none; border-top: 1px solid var(--line); background: none; color: var(--text); text-align: left; padding: 4px 0; font: inherit;
}
.vs-prow .vs-dot { width: 22px; height: 22px; border-radius: 5px; }
.vs-prow .vs-glyph { font-size: 11px; }
.vs-prow-head { border-top: none; min-height: 0; padding: 0 0 6px; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .14em; color: var(--muted); }
.vs-prow-head > span { text-align: center; }
.vs-prow-head > .vs-c-num { text-align: right; }
.vs-pname { display: flex; flex-direction: column; min-width: 0; }
.vs-pname b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-pst { font-size: 10px; font-weight: 600; }
.vs-prow .vs-total { font-size: 12px; }

/* repeat misses (side card + Compliance) */
.vs-rep { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vs-rep-item { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.vs-rep-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-wks, .vs-cweeks { display: flex; gap: 3px; flex-wrap: wrap; }
.vs-wk { width: 18px; height: 18px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--accentSoft); color: var(--accentText); flex-shrink: 0; }
.vs-wk .vs-i { stroke-width: 3; }
.vs-wk.is-bad, .vs-wk-missed { background: var(--warnBg); color: var(--warnFg); }
.vs-wk-none { background: var(--panel2); color: var(--muted); }
.vs-wk-out { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--line) 3px 4px); color: var(--muted); font-size: 10px; }
.vs-wk-n { width: 20px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 700; background: var(--panel2); color: var(--text); }
.vs-wk-n.is-bad { background: var(--warnBg); color: var(--warnFg); }
.vs-rep-n { font-family: 'IBM Plex Mono', monospace; font-size: 12px; width: 30px; text-align: right; }
.vs-copy { height: 36px; }
[data-vs-copy][data-copied="1"] { box-shadow: inset 0 0 0 2px var(--okFg); }

/* alliance total mini bars (side card) */
.vs-mini { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; height: 150px; }
.vs-mini-col { display: flex; flex-direction: column; gap: 4px; align-items: stretch; min-width: 0; }
.vs-mini-v, .vs-mini-l { font-family: 'IBM Plex Mono', monospace; font-size: 10px; text-align: center; color: var(--muted); white-space: nowrap; overflow: hidden; }
.vs-mini-v.is-on { color: var(--text); }
.vs-mini-bar { border-radius: 3px 3px 0 0; background: var(--accentDim); min-height: 1px; }
.vs-mini-bar.is-on { background: var(--accent); }
.vs-mini-bar.is-running { outline: 1px dashed var(--accent); outline-offset: 1px; }

/* Compliance */
.vs-cbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.vs-cbar .mb-toggle a { height: 40px; padding: 0 12px; display: inline-flex; align-items: center; background: var(--panel); color: var(--muted); text-decoration: none; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; white-space: nowrap; }
.vs-cbar .mb-toggle a + a { border-left: 1px solid var(--line); }
.vs-cbar .mb-toggle a[aria-pressed="true"] { background: var(--accentSoft); color: var(--accentText); }
.vs-tip { font-size: 12px; color: var(--muted); flex: 1; min-width: 200px; }
.vs-tip summary { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; min-height: 40px; color: var(--text); font-weight: 600; }
.vs-tip p { max-width: 760px; margin: 0 0 6px; line-height: 1.5; }
.vs-cgrid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.vs-ctable { display: flex; flex-direction: column; min-width: 0; }
.vs-ctr { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) 60px 80px 100px; align-items: center; }
.vs-ctr > span { padding: 8px 10px; border-top: 1px solid var(--line); min-width: 0; }
.vs-rep-pill { margin-left: 4px; flex-shrink: 0; }
.vs-trend { font-size: 12px; font-weight: 600; white-space: nowrap; }
.vs-trend.is-up { color: var(--okFg); }
.vs-trend.is-down { color: var(--warnFg); }
.vs-trend.is-flat, .vs-trend.is-none { color: var(--muted); }
.vs-rule { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.vs-h3 { margin: 8px 0 0; font-family: 'Chakra Petch', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.vs-zeros { margin: 0; font-size: 13px; line-height: 1.5; }

/* History */
.vs-hchart { display: block; }
.vs-hbar { fill: var(--accentDim); }
.vs-hbar.is-on { fill: var(--accent); }
.vs-hbar.is-running { fill: var(--accentSoft); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.vs-hlabels { position: relative; height: 16px; overflow: hidden; }
.vs-hlabels > span { position: absolute; top: 0; transform: translateX(-50%); font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted); white-space: nowrap; }
.vs-htable { display: flex; flex-direction: column; min-width: 0; }
.vs-htr { display: grid; grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(0, 1fr)); align-items: center; color: var(--text); text-decoration: none; }
.vs-htr > span { padding: 9px 10px; border-top: 1px solid var(--line); min-width: 0; }
a.vs-htr:hover { background: var(--panel2); }

/* Player history */
.vs-pgrid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.vs-search { width: 100%; box-sizing: border-box; }
.vs-plist2 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vs-plist2[hidden], .vs-plist2 li[hidden] { display: none; }
.vs-pick-a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.vs-pick-a:hover { background: var(--panel2); }
.vs-pick-a.is-on { background: var(--accentSoft); color: var(--accentText); }
.vs-pick-n { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-pick-sel select { height: 44px; }
.vs-pick-empty { min-height: 260px; }
.vs-pmain { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vs-profile-link { margin-left: auto; height: 34px; }
.vs-pchart { display: block; }
.vs-ptarget { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.vs-pdot { fill: var(--panel); stroke: var(--accent); stroke-width: 2; }
.vs-pdot.is-missed { stroke: var(--warnFg); fill: var(--warnBg); }
.vs-pdot.is-running { stroke-dasharray: 2 2; }
.vs-pkey { display: inline-block; width: 18px; height: 3px; background: var(--accent); }
.vs-pkey.is-target { background: none; border-top: 2px dashed var(--muted); height: 0; }
.vs-wtable { display: flex; flex-direction: column; min-width: 0; }
.vs-wtr { display: grid; grid-template-columns: 70px repeat(6, minmax(0, 1fr)) 90px 70px 110px; align-items: center; }
.vs-wtr > span { padding: 8px 6px; border-top: 1px solid var(--line); min-width: 0; }
.vs-dv { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.vs-dv .vs-dot { width: 18px; height: 18px; margin: 0; border-radius: 4px; flex-shrink: 0; }
.vs-dv .vs-glyph, .vs-pdots .vs-glyph { font-size: 10px; }
.vs-wl { display: block; font-size: 10px; font-weight: 400; }
.vs-pdots { gap: 3px; }
.vs-pdots .vs-dot { width: 18px; height: 18px; border-radius: 4px; margin: 0; }

/* details sheet */
.vs-sheet { width: 560px; }
.vs-sh-sum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vs-sh-total { font-family: 'Chakra Petch', sans-serif; font-size: 22px; }
.vs-sh-days, .vs-sh-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vs-sh-day { display: flex; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid var(--line); }
.vs-sh-day .vs-dot { margin: 0; flex-shrink: 0; }
.vs-sh-why { flex: 1; font-size: 13px; min-width: 0; }
.vs-sh-edit { height: 36px; }
.vs-sh-notes { gap: 6px; font-size: 12px; }
.vs-sh-links { display: flex; gap: 8px; flex-wrap: wrap; }
.vs-live { font-size: 12px; min-height: 16px; }

@media (max-width: 1180px) and (min-width: 761px) {
  .vs-grid, .vs-cgrid { grid-template-columns: minmax(0, 1fr); }
  .vs-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vs-tr { grid-template-columns: minmax(0, 1.2fr) repeat(6, 34px) 64px minmax(0, .9fr) minmax(0, 1.2fr); }
  .vs-note-t { max-width: 90px; }
  .vs-wtr { grid-template-columns: 56px repeat(6, minmax(0, 1fr)) 70px 100px; }
  .vs-wtr > span:nth-last-child(2) { display: none; }
}
@media (max-width: 1023px) and (min-width: 761px) {
  .vs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-pgrid { grid-template-columns: minmax(0, 1fr); }
  .vs-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .vs { gap: 12px; }
  .vs-ph { display: inline; }
  .vs-pacts.vs-ph, .vs-pdots.vs-ph { display: flex; }
  .vs-pacts { gap: 8px; width: 100%; }
  .vs-pacts > * { flex: 1; height: 44px; }
  .vs-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .vs-tabs { width: 100%; box-sizing: border-box; overflow: hidden; }
  .vs-tab { flex: 1; min-width: 0; height: 38px; padding: 0 4px; font-size: 11px; letter-spacing: .08em; }
  .vs-week { height: 44px; }
  .vs-week select { flex: 1; height: 44px; }
  .vs-kpis { grid-template-columns: 1fr 1fr; gap: 10px; background: none; border: none; border-radius: 0; overflow: visible; }
  .vs-kpi { border-radius: 16px; border: 1px solid var(--line); padding: 14px; gap: 4px; }
  .vs-kpi-l { font-size: 10px; }
  .vs-kpi-v { font-size: 24px; }
  .vs-kpi-u { font-size: 12px; margin-left: 3px; }
  .vs-kpi-n { font-size: 11px; }
  .vs-grid, .vs-cgrid, .vs-pgrid { grid-template-columns: minmax(0, 1fr); }
  .vs-card.card { padding: 14px; }
  .vs-card-head .h2 { font-size: 13px; }
  .vs-legend { margin-left: 0; font-size: 11px; }
  .vs-filters .mb-chip { height: 40px; }
  .vs-sort { height: 44px; flex: 1; }
  .vs-sort select { flex: 1; height: 42px; }
  .vs-ctr { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 0; border-top: 1px solid var(--line); align-items: center; }
  .vs-ctr > span { padding: 0; border: none; }
  .vs-ctr > .vs-c-player, .vs-ctr > .vs-cweeks { width: 100%; }
  .vs-cbar .mb-toggle { width: 100%; }
  .vs-cbar .mb-toggle a { flex: 1; justify-content: center; height: 44px; }
  .vs-cbar .btn { width: 100%; height: 44px; }
  .vs-htr { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); }
  .vs-htr > span { padding: 8px 4px; font-size: 12px; }
  .vs-wtr { grid-template-columns: 48px minmax(0, 1fr) 52px 92px; }
  .vs-wtr > span { padding: 8px 4px; }
  .vs-profile-link, .vs-sh-edit { height: 44px; }
  .vs-rep-item { min-height: 44px; }
  .vs-mini { height: 120px; }
  .vs-cgrid > [data-vs-repeat] { order: -1; }          /* phone: the repeat misses before the 99 rows */
}

/* ------------------------------------------------------------------ P7 Tech donations (Tech / PTech)
   The VS page's parts (.vs-*) + what tech has on top. Bands are always glyph + word (▼ Low · ◆ Mid · ▲ Good · ★ Top 10);
   in the mini bars a Low week is outlined, not filled, so it never rests on colour alone (D9). */
.tc-tr { grid-template-columns: minmax(0, 1.15fr) repeat(7, 48px) 74px 96px 92px 70px minmax(0, 1fr); }
.vs-tr > .tc-c-day { padding: 9px 2px; }
.vs-th > .tc-c-day, .tc-tr.vs-th > .vs-c-num { padding-left: 2px; padding-right: 2px; }
.tc-dv { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; min-height: 22px; width: 100%; box-sizing: border-box;
  padding: 0 4px; border-radius: 5px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.tc-dv.is-running { border: 1.5px dashed var(--accentDim); }
.tc-dv.is-derived { border: 1px solid var(--accentDim); color: var(--accentText); }
.tc-dv.is-none { color: var(--muted); font-weight: 500; }
.tc-dv.is-future { border: 1px dashed var(--line); }
i.tc-dv { font-style: normal; }
.tc-dv-sm { width: auto; min-width: 18px; min-height: 18px; font-size: 10px; padding: 0 3px; justify-content: center; }
.tc-legend .tc-dv-sm.is-final { background: var(--panel2); }
.tc-band { gap: 4px; }
.tc-band .vs-glyph { font-size: 11px; }
.tc-band-sm { height: 22px; padding: 0 7px; }
.tc-bandf .mb-chip { gap: 5px; padding: 0 12px; }
.tc-mini { display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; }
.tc-mbar { width: 8px; border-radius: 2px 2px 0 0; background: var(--accentDim); box-sizing: border-box; flex-shrink: 0; }
.tc-mbar.is-good, .tc-mbar.is-top { background: var(--accent); }
.tc-mbar.is-low { background: transparent; border: 1.5px solid var(--warnFg); }
.tc-mbar.is-none { background: var(--line); }
.tc-mbar.is-running { outline: 1px dashed var(--accent); outline-offset: 1px; }
.tc-streak { display: inline-flex; align-items: center; gap: 5px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tc-streak.is-on { color: var(--accentText); }
.tc-low { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--warnBg); color: var(--text); }
.tc-low-1 { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.tc-low-1 b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-low-1 .mono { font-size: 12px; white-space: nowrap; }
.tc-low-2 { font-size: 12px; color: var(--warnFg); font-weight: 600; }
.tc-ctr { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) 110px 100px; }
.tc-wk { width: 18px; height: 18px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 10px; font-weight: 700; line-height: 1; background: var(--panel2); color: var(--muted); box-sizing: border-box; }
.tc-wk.is-low { background: var(--warnBg); color: var(--warnFg); }
.tc-wk.is-mid { background: var(--skipBg); color: var(--skipFg); }
.tc-wk.is-good { background: var(--okBg); color: var(--okFg); }
.tc-wk.is-top { background: var(--accentSoft); color: var(--accentText); }
.tc-wk.is-running { border: 1.5px dashed var(--accentDim); }
.tc-rep-n { width: 64px; }
.tc-top { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.tc-top li { display: list-item; }
.tc-top li > span { display: inline-flex; }
.tc-top .vs-rep-name { min-width: 0; max-width: calc(100% - 80px); }
.tc-top .mono { float: right; font-size: 12px; }
.tc-htr { grid-template-columns: minmax(0, 1.8fr) repeat(6, minmax(0, 1fr)); }
.tc-wtr { grid-template-columns: 64px repeat(7, minmax(0, 1fr)) 84px 100px; }
.tc-wtr > .vs-c-num .tc-dv { padding: 0 2px; }
.tc-pdays { gap: 3px; }
.tc-pd { width: 16px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1;
  background: var(--panel2); color: var(--text); box-sizing: border-box; }
.tc-pd.is-running { background: transparent; border: 1px dashed var(--accentDim); }
.tc-pd.is-derived { border: 1px solid var(--accentDim); color: var(--accentText); }
.tc-pd.is-none { color: var(--muted); }
.tc-pd.is-future { background: transparent; border: 1px dashed var(--line); }
.tc-pmark circle { fill: var(--panel); stroke: var(--accent); stroke-width: 1.5; }
.tc-pmark text { font-size: 9px; font-weight: 700; fill: var(--text); }
.tc-pmark.is-low circle { fill: var(--warnBg); stroke: var(--warnFg); }
.tc-pmark.is-low text { fill: var(--warnFg); }
.tc-pmark.is-running circle { stroke-dasharray: 2 2; }
.tc-sh-bar { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 2px; }
.tc-sh-track { position: relative; height: 10px; border-radius: 3px; background: var(--track); }
.tc-sh-fill { display: block; height: 10px; border-radius: 3px; background: var(--accent); }
.tc-sh-tick { position: absolute; top: -3px; width: 2px; height: 16px; margin-left: -1px; background: var(--text); border-radius: 1px; }
.tc-sh-ticks { position: relative; height: 14px; }
.tc-sh-ticks > span { position: absolute; top: 0; transform: translateX(-50%); font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted); white-space: nowrap; }
.tc-sh-ticks > span:last-child { transform: translateX(-80%); }
.vs-sh-more { margin: 0; font-size: 12px; color: var(--muted); }
.vs-sh-day .tc-dv { width: 84px; flex-shrink: 0; min-height: 28px; }
.vs-sh-day .tc-dv.is-future { width: 84px; }
.tc-prow { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 0; }
.tc-pl1, .tc-pl2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tc-pl1 b { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-pl1 .vs-total { width: 76px; font-size: 13px; }
.tc-pl1 .tc-streak { font-size: 11px; }
.tc-pl2 .tc-mini { height: 20px; margin-left: auto; }
.tc-pl2 .tc-mbar { width: 7px; }

@media (max-width: 1180px) and (min-width: 761px) {
  .tc-tr { grid-template-columns: minmax(0, 1fr) repeat(7, 44px) 80px 88px 56px minmax(0, .8fr); }   /* PA: a 6-digit week total fits */
  .tc-tr > span:nth-child(11) { display: none; }          /* the 8-week mini bars: in the details sheet / phone */
  .tc-wtr { grid-template-columns: 52px repeat(7, minmax(0, 1fr)) 72px 92px; }
  .tc-wtr > span:nth-last-child(2) { display: initial; }
}
@media (max-width: 760px) {
  .tc-ctr > .vs-c-player { width: 100%; }
  .tc-htr { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
  .tc-htr > span:nth-child(4), .tc-htr > span:nth-child(6) { display: none; }      /* phone: Week · Total · Donors · ◆ · ★ */
  .tc-wtr { grid-template-columns: 44px minmax(0, 1fr) 66px 86px; }
  .tc-filters .mb-chip, .tc-bandf .mb-chip { height: 40px; }
}

/* ------------------------------------------------------------------ P8 Trains + Train Organizer (Trains / PTrains)
   The phone layout is the main one (Mister Cone plans on his phone): day rows, a tap opens the day as a bottom sheet.
   Desktop: the artboard's 7 day cards, the day below (candidates with labelled stacked score bars, nominations), the
   side cards. Every status is a glyph + a word; the score bars carry their points as text (D9). */
.tr { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tr-lead { margin: 0; display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: baseline; font-size: 13px; }
.tr-lead > span:first-child { font-weight: 600; }
.tr-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.tr-day { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--panel);
  border: 1px solid var(--line); min-height: 196px; min-width: 0; }
.tr-day.is-on { background: var(--hero); border-color: var(--accentDim); }
.tr-day.is-empty, .tr-day.is-ready { border-color: var(--warnBd); }
.tr-day.is-ready { border-color: var(--accentDim); box-shadow: inset 0 0 0 1px var(--accentDim); }
.tr-day-hit { position: absolute; inset: 0; border: none; background: transparent; border-radius: inherit; padding: 0; z-index: 0; }
.tr-day > :not(.tr-day-hit) { position: relative; pointer-events: none; }        /* a tap anywhere opens the day ... */
.tr-day .tr-approve { position: relative; pointer-events: auto; z-index: 1; }    /* ... except on Approve */
.tr-dh { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.tr-dname { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .12em; }
.tr-ddate { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); white-space: nowrap; }
.tr-day.is-today .tr-ddate { color: var(--accentText); }
.tr-theme { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--muted); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-theme svg { flex-shrink: 0; }
.tr-who { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tr-who .lbl { font-size: 10px; }
.tr-wname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tr-wname b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-wname svg { flex-shrink: 0; color: var(--accentText); }
.tr-why { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 22px; }
.tr-why2 { font-size: 12px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tr-backup { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-who.is-pick { padding: 8px; border: 1px dashed var(--accentDim); border-radius: 10px; }
.tr-who.is-pick .lbl { color: var(--accentText); }
.tr-empty { flex: 1; border-radius: 10px; border: 2px dashed var(--warnBd); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; padding: 10px; text-align: center; color: var(--warnFg); font-size: 12px; font-weight: 600; }
.tr-empty span { font-weight: 400; color: var(--muted); }
.tr-empty.is-none, .tr-empty-pub { border-color: var(--line); color: var(--muted); }
.tr-dfoot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.tr-st { max-width: 100%; }
.tr-st-by { font-weight: 500; opacity: .85; }
.tr-approve { height: 34px; padding: 0 12px; font-size: 12px; }
.tr-dgo { display: none; }

.tr-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tr-detail { min-width: 0; }
.tr-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tr-grab { display: none; }
.tr-phead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-ptitle { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tr-pnote { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); }
.tr-pnote svg { vertical-align: -2px; margin-right: 4px; color: var(--accentText); }
.tr-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tr-tool { height: 34px; font-size: 13px; }
.tr-conductor { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); min-width: 0; }
.tr-conductor .tr-wname b { font-size: 17px; }
.tr-creason { font-size: 13px; font-weight: 600; }
.tr-cby { font-size: 12px; }
.tr-swap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.tr-swap .btn2, .tr-swap .vs-sort { height: 36px; }
.tr-swap select { max-width: 220px; }
.tr-approve-big { width: 100%; }
.tr-picknotes, .tr-draw { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-draw { width: 100%; }
.tr-h3row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-h3row .vs-h3 { margin: 0; }
.tr-legend { margin-left: auto; display: flex; gap: 6px 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.tr-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.tr-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.tr-seg-0 { background: var(--ranks1); }
.tr-seg-1 { background: var(--ranks2); }
.tr-seg-2 { background: var(--ranks3); }
.tr-seg-3 { background: var(--ranks4); }
.tr-seg-4 { background: var(--ranks5); }
[data-mode="dark"] .tr-seg-0, [data-mode="dark"] .tr-seg-1, [data-mode="dark"] .tr-seg-2,
[data-mode="light"] .tr-seg-3, [data-mode="light"] .tr-seg-4 { color: #111111; }
[data-mode="dark"] .tr-seg-3, [data-mode="dark"] .tr-seg-4,
[data-mode="light"] .tr-seg-0, [data-mode="light"] .tr-seg-1, [data-mode="light"] .tr-seg-2 { color: #FFFFFF; }
.tr-how { flex: none; }
.tr-cands, .tr-noms { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tr-cand { display: grid; grid-template-columns: 28px 150px minmax(0, 1fr) 44px 116px; gap: 6px 12px; align-items: center; padding: 10px 0;
  border-top: 1px solid var(--line); min-width: 0; }
.tr-pos { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 20px; color: var(--muted); }
.tr-cand.is-top .tr-pos { color: var(--accentText); }
.tr-cname { display: flex; flex-direction: column; min-width: 0; }
.tr-cname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-cname .vs-name { font-weight: 700; }
.tr-cmeta { font-size: 11px; color: var(--muted); }
.tr-bar { display: flex; height: 24px; border-radius: 5px; overflow: hidden; background: var(--track); min-width: 0; }
.tr-seg { display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600;
  border-right: 2px solid var(--panel); min-width: 0; overflow: hidden; white-space: nowrap; }
.tr-total { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 20px; text-align: right; }
.tr-cact { justify-self: end; display: flex; }
.tr-act { height: 34px; font-size: 13px; padding: 0 12px; }
.tr-cmore { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; min-width: 0; }
.tr-num { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 12px; }
.tr-whyl { color: var(--muted); }
.tr-90 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); }
.tr-strip { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.tr-si { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: 600;
  background: var(--skipBg); color: var(--skipFg); white-space: nowrap; }
.tr-si.tone-ok { background: var(--okBg); color: var(--okFg); }
.tr-si.tone-warn { background: var(--warnBg); color: var(--warnFg); }
.tr-sk { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .06em; opacity: .85; }
.tr-sg { font-weight: 700; }
.tr-note { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 5px; background: var(--panel2); border: 1px solid var(--line);
  font-size: 12px; color: var(--text); }
.tr-note svg { flex-shrink: 0; color: var(--accentText); }
.tr-tag { height: 22px; }
.tr-nom { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); min-width: 0; }
.tr-nom.is-lead { border-color: var(--accentDim); }
.tr-nom1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.tr-support { margin-left: auto; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 16px; }
.tr-nom2 { font-size: 13px; }
.tr-vote { font-size: 12px; color: var(--muted); }
.tr-nomacts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.tr-nomacts:empty { display: none; }
.tr-any { display: flex; flex-direction: column; gap: 6px; }
.tr-search { width: 100%; }
.tr-matches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tr-matches li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); min-height: 44px; }
.tr-mname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tr-pre { margin: 0; padding: 12px; border-radius: 10px; background: var(--panel2); font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.tr-count { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); }
.tr-count.is-over { color: var(--warnFg); font-weight: 700; }
.tr-count.is-over::before { content: '▲ '; }
.vs-card-head .tr-count { margin-left: auto; }
.tr-times { display: grid; grid-template-columns: 110px minmax(0, 1fr) 24px; gap: 10px; align-items: center; font-size: 13px; }
.tr-tn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-ttrack { height: 10px; border-radius: 2px; background: var(--track); }
.tr-tfill { height: 10px; border-radius: 2px; background: var(--accent); }
.tr-tv { text-align: right; }
.tr-next { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.tr-rotlist { margin: 0; padding-left: 20px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.tr-rotlist li > span { display: inline; }
.tr-rotlist li > span + span { margin-left: 8px; font-size: 12px; }
.tr-rotlist li.is-next > span:first-child { font-weight: 700; }
.tr-tips { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.tr-pointers .h2 { display: inline-flex; gap: 6px; align-items: center; }
.tr-pdismiss { margin-left: auto; width: 32px; height: 32px; }
/* Messages */
.tr-mgrid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.tr-mlist { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tr-var { display: flex; flex-direction: column; gap: 6px; }
.tr-varhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.tr-text { width: 100%; box-sizing: border-box; min-height: 76px; resize: vertical; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2);
  color: var(--text); font: inherit; font-size: 14px; line-height: 1.45; padding: 10px; }
.tr-text:focus { outline: none; border-color: var(--accentDim); }
.tr-text-week { font-family: 'IBM Plex Mono', monospace; font-size: 12px; min-height: 150px; }
.tr-copy { align-self: flex-start; height: 36px; }
.tr-langsel { align-self: flex-start; }
[data-tr-copy][data-copied="1"] { box-shadow: inset 0 0 0 2px var(--okFg); }
/* History */
.tr-hfilters { display: flex; flex-wrap: wrap; gap: 10px; }
.tr-htable { display: flex; flex-direction: column; min-width: 0; }
.tr-htr { display: grid; grid-template-columns: 112px minmax(0, 1fr) 128px minmax(0, 1.3fr) 128px; align-items: center; }
.tr-htr > span { padding: 8px 10px; border-top: 1px solid var(--line); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tr-htr.vs-th > span { padding-top: 0; }
.tr-hb { font-size: 12px; }
.tr-hreason { font-size: 13px; }
.tr-hm { display: flex; align-items: center; gap: 8px; font-size: 13px; min-height: 28px; }
.tr-hm .tr-tn { flex: 1; }
.tr-fact { font-size: 13px; }
/* Setup */
.tr-sgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tr-rules { grid-column: 1 / -1; }
.tr-rot { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tr-rotrow { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.tr-rotrow.is-next .tr-pos { color: var(--accentText); }
.tr-rotacts { display: flex; gap: 4px; }
.tr-rotadd { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.tr-rhythm { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.tr-rhythm .vs-sort select { flex: 1; min-width: 0; }
.tr-rday { width: 34px; }
.tr-rhythm2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tr-rhythm2 input { height: 40px; }
.tr-rtable { display: flex; flex-direction: column; min-width: 0; }
.tr-rtr { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(7, 56px) 56px 92px; gap: 6px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.tr-rtr.vs-th { border-top: none; padding-top: 0; }
.tr-rtr.vs-th > span { padding: 0; }
.tr-rtr > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.tr-w input { width: 100%; height: 34px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  font-family: 'IBM Plex Mono', monospace; text-align: right; padding: 0 6px; box-sizing: border-box; }
.tr-w input:disabled { opacity: .7; }
.tr-day-pub { min-height: 150px; }
body.tr-noscroll { overflow: hidden; }

@media (max-width: 1180px) and (min-width: 761px) {
  .tr-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tr-grid, .tr-mgrid, .tr-sgrid { grid-template-columns: minmax(0, 1fr); }
  .tr-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tr-cand { grid-template-columns: 28px 130px minmax(0, 1fr) 40px 110px; }
  .tr-rtr { grid-template-columns: minmax(0, 1fr) repeat(7, 46px) 46px 84px; }
}
@media (max-width: 760px) {
  .tr { gap: 12px; }
  .tr-copy-ph { width: 100%; }
  .tr-lead { font-size: 12px; }
  .tr-week { display: flex; flex-direction: column; gap: 10px; }
  .tr-day { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: 'd t a' 'd w a' 'd s a';
    gap: 3px 12px; align-items: center; padding: 12px; min-height: 0; }
  .tr-dh { grid-area: d; flex-direction: column; align-items: flex-start; gap: 0; align-self: center; }
  .tr-ddate { font-size: 10px; }
  .tr-day > .tr-theme { grid-area: t; }
  .tr-day > .tr-who, .tr-day > .tr-empty { grid-area: w; }
  .tr-day .tr-dfoot { display: contents; }
  .tr-day .tr-st { grid-area: s; justify-self: start; }
  .tr-day .tr-approve, .tr-day .tr-dgo { grid-area: a; }
  .tr-day .tr-approve { height: 44px; padding: 0 14px; font-size: 13px; }
  .tr-dgo { display: inline-flex; width: 44px; height: 44px; }
  .tr-who { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  .tr-who .lbl, .tr-who .tr-wname svg { display: none; }
  .tr-who.is-pick { padding: 0; border: none; }
  .tr-who.is-pick .lbl { display: inline; }
  .tr-why { background: none; color: var(--muted); padding: 0; height: auto; line-height: 1.3; font-weight: 400; font-size: 12px; }
  .tr-why2 { -webkit-line-clamp: 1; }
  .tr-empty { flex-direction: row; justify-content: flex-start; border: none; padding: 0; text-align: left; flex-wrap: wrap; gap: 2px 6px; font-size: 13px; }
  .tr-empty svg { display: none; }
  .tr-empty::before { content: '▲'; }
  .tr-empty.is-none::before, .tr-empty-pub::before { content: '—'; }
  .tr-day-pub { grid-template-areas: 'd t a' 'd w a'; }
  .tr-grid, .tr-mgrid, .tr-sgrid { grid-template-columns: minmax(0, 1fr); }
  .tr-detail { display: none; }
  .tr-detail.is-open { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;          /* over the pill bar (25), under dialogs (40) */
    max-height: 88vh; max-height: 88dvh;
    overflow-y: auto; overscroll-behavior: contain; background: var(--panel); border-top: 1px solid var(--line); border-radius: 24px 24px 0 0;
    box-shadow: var(--shadow); }
  .tr-detail.is-open .tr-panel { border: none; border-radius: 0; background: transparent; padding: 10px 16px 28px; }
  .tr-scrim { position: fixed; inset: 0; z-index: 34; background: var(--scrim); }
  .tr-scrim.only-phone[hidden] { display: none !important; }
  .tr-grab { display: block; align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--line); }
  .tr-pclose { width: 44px; height: 44px; }
  .tr-tools .vs-sort, .tr-tool { height: 44px; }
  .tr-tools .vs-sort { flex: 1 1 100%; }
  .tr-tools .vs-sort select { flex: 1; height: 42px; }
  .tr-tool { flex: 1; }
  .tr-swap .btn2, .tr-swap .vs-sort { height: 44px; flex: 1 1 100%; }
  .tr-swap select { flex: 1; max-width: none; height: 42px; }
  .tr-cand { grid-template-columns: 24px minmax(0, 1fr) 44px; grid-template-areas: 'p n t' 'p b b' 'm m m' 'a a a'; gap: 6px 10px; }
  .tr-cand > .tr-pos { grid-area: p; align-self: start; font-size: 18px; }
  .tr-cand > .tr-cname { grid-area: n; }
  .tr-cand > .tr-total { grid-area: t; font-size: 18px; }
  .tr-cand > .tr-bar { grid-area: b; height: 18px; }
  .tr-cand .tr-seg { font-size: 10px; }
  .tr-cand > .tr-cmore { grid-area: m; }
  .tr-cand > .tr-cact { grid-area: a; justify-self: stretch; }
  .tr-cact:empty { display: none; }
  .tr-act { height: 44px; flex: 1; }
  .tr-cact .tr-act { width: 100%; }
  .tr-legend { margin-left: 0; }
  .tr-nomacts .tr-act { flex: 1 1 auto; }
  .tr-h3row .tr-act { flex: none; }
  .tr-hfilters .vs-sort { height: 44px; flex: 1 1 100%; }
  .tr-hfilters .vs-sort select { flex: 1; height: 42px; }
  .tr-htr { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
  .tr-htr > span { padding: 0; border: none; }
  .tr-htr > span:nth-child(2) { flex: 1 1 60%; }
  .tr-htr > span:nth-child(4) { width: 100%; }
  .tr-times { grid-template-columns: 100px minmax(0, 1fr) 24px; }
  .tr-langsel { align-self: stretch; height: 44px; }
  .tr-langsel select { flex: 1; height: 42px; }
  .tr-copy { align-self: stretch; height: 44px; }
  .tr-rotrow .ibtn { width: 44px; height: 44px; }
  .tr-rotadd .vs-sort { flex: 1 1 100%; height: 44px; }
  .tr-rotadd .vs-sort select { flex: 1; height: 42px; }
  .tr-rotadd .btn, [data-tr-settings-save], [data-tr-rule-save] { width: 100%; height: 44px; }
  .tr-rhythm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tr-rhythm .vs-sort { height: 44px; }
  .tr-rhythm .vs-sort select { height: 42px; }
  .tr-rhythm2 { grid-template-columns: minmax(0, 1fr); }
  .tr-rhythm2 input { height: 44px; }
  .tr-rtr { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px 0; }
  .tr-rtr > span:first-child, .tr-rtr > span:last-child { grid-column: 1 / -1; }
  .tr-w { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); }
  .tr-w input { height: 44px; }
  .tr-pdismiss { width: 44px; height: 44px; }
}

/* ------------------------------------------------------------------ P9 Desert Storm (DesertStorm / PDesertStorm)
   Desktop: Team A | Team B | a side column (the artboard's Scores · Showed up), phone: one team at a time (the Team A /
   Team B switch, PDesertStorm). Every status is a glyph + a word (D9); the score bars carry A / B labels and a loss
   is marked ▲ under the bars, never by colour alone. */
.ds { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ds-lead { margin: 0; display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: baseline; font-size: 13px; }
.ds-lead > span:first-child { font-weight: 600; }
.ds-seg { display: flex; gap: 4px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.ds-seg-b { flex: 1; height: 40px; border: none; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer;
  font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.ds-seg-b[aria-selected="true"] { background: var(--accent); color: var(--accentInk); }
.ds-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.ds-cols2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ds-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ds-team { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ds-thead { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.ds-slottime { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); }
.ds-count { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; }
.ds-tstats { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: 12px; font-weight: 600; }
.ds-final { margin-left: auto; }
.ds-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-tools:empty { display: none; }
.ds-lbl { margin-top: 6px; }
.ds-list { display: flex; flex-direction: column; }
.ds-none { padding: 6px 0; }
.ds-m { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; grid-template-areas: 'h n s a' '. f f f'; gap: 4px 10px;
  align-items: center; padding: 8px 0; border-top: 1px solid var(--line); min-width: 0; }
.ds-m > .ds-hex { grid-area: h; }
.ds-m > .ds-mname { grid-area: n; }
.ds-m > .ds-st { grid-area: s; }
.ds-m > .ds-fair { grid-area: f; }
.ds-m > .ds-acts { grid-area: a; }
.ds-hex { width: 24px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-family: 'Chakra Petch', sans-serif;
  font-weight: 700; font-size: 11px; color: var(--text); background: var(--panel2); border: 1px solid var(--line);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.ds-hex.is-off { background: var(--accent); color: var(--accentInk); border-color: var(--accent); }
.ds-mname { display: flex; flex-direction: column; min-width: 0; }
.ds-mname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ds-mmeta { font-size: 11px; color: var(--muted); font-family: 'IBM Plex Mono', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-fair { display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.ds-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ds-chip { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 600;
  background: var(--panel2); border: 1px solid var(--line); color: var(--text); white-space: nowrap; }
.ds-chip.is-warn { background: var(--warnBg); color: var(--warnFg); border-color: transparent; }
.ds-ck { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 10px; color: var(--muted); }
.ds-chip.is-warn .ds-ck { color: inherit; }
.ds-cg { font-weight: 700; }
.ds-fnote { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--warnFg); font-weight: 600; }
.ds-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-acts { justify-content: flex-end; flex-wrap: nowrap; }
.ds-act { height: 32px; padding: 0 9px; font-size: 12px; }
.ds-act:not([data-primary]) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* desktop: icon buttons (aria-label + title) */
.ds-act[data-primary] { background: var(--accent); color: var(--accentInk); border-color: var(--accent); }
.ds-removed summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 8px 0; }
.ds-m.is-removed .ds-mname b { text-decoration: line-through; color: var(--muted); }
/* side: the artboard's score bars and show-up strips */
.ds-legend { margin-left: auto; display: inline-flex; gap: 10px; font-size: 11px; font-family: 'IBM Plex Mono', monospace; }
.ds-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.ds-key { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ds-key.is-a, .ds-bar.is-a { background: var(--accent); }
.ds-key.is-b, .ds-bar.is-b { background: var(--panel2); border: 1px solid var(--accentDim); box-sizing: border-box; }
.ds-bars { display: flex; align-items: flex-end; gap: 10px; height: 140px; padding-top: 6px; }
.ds-barcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.ds-barpair { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.ds-bar { width: 40%; max-width: 16px; border-radius: 3px 3px 0 0; min-height: 2px; }
.ds-barl { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted); white-space: nowrap; }
.ds-barl.is-loss { color: var(--warnFg); font-weight: 700; }
.ds-show { display: grid; grid-template-columns: minmax(0, 1fr) auto 34px; gap: 8px; align-items: center; font-size: 13px; }
.ds-show-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-show-w { display: inline-flex; gap: 3px; }
.ds-sw { width: 18px; height: 18px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--panel2); color: var(--muted); }
.ds-sw.is-ok { background: var(--accentSoft); color: var(--accentText); }
.ds-sw.is-warn { background: var(--warnBg); color: var(--warnFg); }
.ds-show-r { text-align: right; font-size: 12px; }
.ds-chatmsg { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.ds-chattext { margin: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.ds-copy { align-self: flex-start; }
.ds-tips .h2 { display: inline-flex; gap: 6px; align-items: center; }
.ds-tdismiss { margin-left: auto; width: 32px; height: 32px; }
/* the battle plan */
.ds-check { display: flex; flex-direction: column; gap: 6px; }
.ds-err, .ds-warn, .ds-okline { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.4; }
.ds-err { background: var(--warnSolid); color: var(--warnInk); font-weight: 600; }
.ds-warn { background: var(--warnBg); color: var(--warnFg); }
.ds-okline { background: var(--okBg); color: var(--okFg); }
.ds-err svg, .ds-warn svg, .ds-okline svg { flex-shrink: 0; margin-top: 1px; }
.ds-groups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ds-grp { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); min-width: 0; }
.ds-grp.is-hs { grid-column: 1 / -1; }
.ds-gname { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.ds-slots4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ds-slots2, .ds-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ds-grp.is-hospital .ds-roles { grid-template-columns: minmax(0, 1fr); }
.ds-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ds-pslot { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ds-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 48px; padding: 6px 8px; border-radius: 9px; text-align: left;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; min-width: 0; font: inherit; }
.ds-slot.is-empty { border-style: dashed; border-color: var(--accentDim); }
.ds-slot:disabled { cursor: default; opacity: 1; }
.ds-slot:not(:disabled):hover { border-color: var(--accent); }
.ds-slot-l { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.ds-slot-n { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ds-slot-n.is-empty { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 4px; font-weight: 600; color: var(--accentText); white-space: normal; }
.ds-hint { flex-basis: 100%; font-size: 11px; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-task select { width: 100%; height: 30px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 11px; }
.ds-mailbox { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.ds-mtitle { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.ds-mail { max-height: 360px; overflow-y: auto; }
.ds-mailacts { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-opts, .ds-picklist, .ds-matchlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; }
.ds-opt { width: 100%; display: flex; justify-content: space-between; gap: 8px; align-items: center; min-height: 44px; padding: 6px 4px; border: none;
  border-top: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; flex-wrap: wrap; }
.ds-opt.is-now { background: var(--accentSoft); }
.ds-opt > span:last-child { font-size: 12px; }
.ds-pick { display: flex; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid var(--line); cursor: pointer; }
.ds-pick input { width: 20px; height: 20px; }
.ds-seg2 { display: flex; gap: 4px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); }
.ds-seg2 button { flex: 1; height: 38px; border: none; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.ds-seg2 button[aria-selected="true"] { background: var(--accent); color: var(--accentInk); }
.ds-mr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--line); align-items: center; font-size: 13px; }
.ds-mr select { grid-column: 1 / -1; height: 40px; border-radius: 8px; border: 1px solid var(--warnBd); background: var(--panel); color: var(--text); font: inherit; }
.ds-mrw { font-size: 12px; font-weight: 600; }
.ds-mr.is-matched .ds-mrw { color: var(--okFg); }
.ds-mr.is-ambiguous .ds-mrw, .ds-mr.is-unknown .ds-mrw, .ds-mr.is-no_score .ds-mrw { color: var(--warnFg); }
.ds-mr.is-duplicate { color: var(--muted); }
.ds-mr-black { grid-column: 1 / -1; height: auto; min-height: 22px; padding: 3px 8px; white-space: normal; line-height: 1.3; justify-self: start; }   /* P12 */
/* on the day */
.ds-att { display: flex; flex-direction: column; }
.ds-arow { display: grid; grid-template-columns: minmax(0, 1fr) auto 104px; gap: 6px 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.ds-marks { display: flex; gap: 3px; flex-wrap: wrap; }
.ds-mark { height: 32px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 11px; font-weight: 600; }
.ds-mark[aria-pressed="true"] { background: var(--okBg); color: var(--okFg); border-color: transparent; }
.ds-mark[aria-pressed="true"][data-ds-mark="no_show"] { background: var(--warnBg); color: var(--warnFg); }
.ds-mark[aria-pressed="true"][data-ds-mark="sub_in"] { background: var(--accentSoft); color: var(--accentText); }
.ds-mark[aria-pressed="true"][data-ds-mark="excused"], .ds-mark[aria-pressed="true"][data-ds-mark="not_needed"] { background: var(--skipBg); color: var(--skipFg); }
.ds-mark:disabled { cursor: not-allowed; opacity: .55; }
.ds-score input { width: 100%; box-sizing: border-box; height: 32px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding: 0 8px; text-align: right; }
.ds-savescores { align-self: flex-start; }
.ds-result { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.ds-resline { font-size: 13px; font-weight: 600; }
.ds-resform { display: flex; flex-direction: column; gap: 10px; }
.ds-outcomes { display: flex; gap: 6px; }
.ds-out { flex: 1; }
.ds-out input { position: absolute; opacity: 0; pointer-events: none; }
.ds-out > span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; font-weight: 600; font-size: 13px; }
.ds-out input:checked + span { background: var(--accent); color: var(--accentInk); border-color: var(--accent); }
.ds-out input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ds-resgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* history */
.ds-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.ds-hgrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ds-trendbars { height: 110px; gap: 4px; }
.ds-trendbars .ds-bar { width: 45%; }
.ds-ev { border-top: 1px solid var(--line); }
.ds-ev summary { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 0; cursor: pointer; font-size: 13px; min-height: 28px; }
.ds-evw { min-width: 150px; }
.ds-evt { display: inline-flex; align-items: center; gap: 6px; }
.ds-evbody { display: flex; flex-direction: column; gap: 10px; padding: 0 0 12px; }
.ds-evteam { display: flex; flex-direction: column; gap: 4px; }
.ds-evnames { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
.ds-evn.is-no_show { color: var(--warnFg); font-weight: 600; }
.ds-mtable { display: flex; flex-direction: column; max-height: 640px; overflow-y: auto; }
.ds-mtr { display: grid; grid-template-columns: minmax(0, 1fr) 54px 44px 30px 80px 40px; gap: 6px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ds-mtr.vs-th { border-top: none; font-size: 11px; }
.ds-mtr.vs-th > span { padding: 0 0 6px; letter-spacing: .04em; }
.ds-mtn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-warnnum { color: var(--warnFg); font-weight: 700; }
.ds-warnnum::before { content: '▲ '; font-size: 10px; }
/* setup */
.ds-sgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ds-blocks { grid-column: 1 / -1; }
.ds-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ds-adv summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 6px 0; }
.ds-adv textarea, .ds-block textarea { font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.ds-reset { align-self: flex-start; }
.ds-blocks .btn, [data-ds-save-set] { align-self: flex-start; }
/* the published view (R1-R3) */
.ds-pub .ds-mail { max-height: none; }
.ds-pub-t { font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.ds-pub-slot { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.ds-pub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-pub-list li { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ds-pub-list li.is-me { font-weight: 700; }
/* the profile's Desert Storm card (desert_storm.member_row) */
.pf-ds { margin-top: 16px; }
.pf-ds-row { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.pf-ds-k { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.pf-ds-k b { font-family: 'Chakra Petch', sans-serif; font-size: 20px; }
@media (max-width: 1180px) and (min-width: 761px) {
  .ds-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ds-side { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ds-groups { grid-template-columns: minmax(0, 1fr); }
  .ds-arow { grid-template-columns: minmax(0, 1fr) 96px; }
  .ds-arow .ds-marks { grid-column: 1 / -1; grid-row: 2; }
  .ds-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-hgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ds { gap: 12px; }
  .ds-cols, .ds-cols2, .ds-sgrid, .ds-fields, .ds-resgrid, .ds-hgrid { grid-template-columns: minmax(0, 1fr); }
  .ds-trendbars .ds-barl { font-size: 8px; }
  .ds[data-team="a"] .ds-team[data-ds-team="b"], .ds[data-team="b"] .ds-team[data-ds-team="a"] { display: none; }
  .ds-team.card { padding: 14px; }
  .ds-count { margin-left: 0; }
  .ds-final { margin-left: 0; }
  .ds-tools > * { flex: 1 1 auto; height: 44px; }
  .ds-act { height: 44px; flex: 1 1 auto; justify-content: center; font-size: 13px; }
  .ds-m { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: 'h n s' '. f f' '. a a'; }
  .ds-acts { flex-wrap: wrap; justify-content: flex-start; }
  .ds-act:not([data-primary]) span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .ds-groups { grid-template-columns: minmax(0, 1fr); }
  .ds-slot { min-height: 52px; }
  .ds-slots4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-task select { height: 40px; font-size: 12px; }
  .ds-mailacts > * { flex: 1 1 100%; height: 44px; }
  .ds-copy { align-self: stretch; height: 44px; }
  .ds-mtitle .ds-copy { flex: 1 1 100%; }
  .ds-arow { grid-template-columns: minmax(0, 1fr) 104px; padding: 10px 0; }
  .ds-arow .ds-marks { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ds-mark { height: 44px; justify-content: center; padding: 0 4px; font-size: 11px; }
  .ds-score input { height: 44px; font-size: 14px; }
  .ds-savescores { align-self: stretch; height: 44px; }
  .ds-out > span { height: 44px; }
  .ds-resform .ds-tools > * { flex: 1 1 100%; }
  .ds-kpis { grid-template-columns: 1fr 1fr; gap: 10px; background: none; border: none; border-radius: 0; overflow: visible; }
  .ds-kpis .vs-kpi { border-radius: 16px; border: 1px solid var(--line); padding: 14px; }
  .ds-evw { min-width: 0; width: 100%; }
  .ds-ev summary { min-height: 44px; }
  .ds-mtr { grid-template-columns: minmax(0, 1fr) 46px 36px 26px 66px 30px; font-size: 12px; }
  .ds-mtable { max-height: none; }
  .ds-tdismiss { width: 44px; height: 44px; }
  .ds-removed summary { min-height: 44px; }
  .pf-ds-row { gap: 10px 18px; }
  .pf-ds-k b { font-size: 17px; }
}

/* ------------------------------------------------------------------ P10 Participation (Participation / PParticipation)
   Values from the artboards: the split bar (34 px, 2 px gaps, a shape + word in every part), SHOW ONLY chips, the
   table with week cells (20 px squares) and the phone cards with four indicator tiles. Never colour alone: every
   status is a pill with its icon, every week cell a shape, every tile a ✓ / ▲ in front of its number. */
.pt { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; }
.pt [hidden] { display: none !important; }
.pt-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .pt-actions-ph.only-phone { display: flex !important; flex-wrap: nowrap; }
  .pt-actions-ph button { flex: 1; height: 44px; min-width: 0; }
}
.pt-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pt-win a { height: 40px; padding: 0 12px; display: inline-flex; align-items: center; background: var(--panel); color: var(--muted); text-decoration: none; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pt-win a + a { border-left: 1px solid var(--line); }
.pt-win a[aria-pressed="true"] { background: var(--accentSoft); color: var(--accentText); }
.pt-span { margin-right: auto; }
.pt-sort { height: 40px; }
[data-pt-body] { display: flex; flex-direction: column; gap: 16px; }
.pt-sum { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.pt-sum-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pt-split { display: flex; height: 34px; border-radius: 8px; overflow: hidden; gap: 2px; }
.pt-seg {
  min-width: 26px; border: none; padding: 0 12px; display: flex; align-items: center; gap: 6px; font: inherit; font-size: 13px;
  font-weight: 600; white-space: nowrap; overflow: hidden; cursor: pointer;
}
.pt-seg svg { flex-shrink: 0; }
.pt-seg-t { overflow: hidden; text-overflow: ellipsis; }
.pt-seg[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--text); }
.pt-split:has([aria-pressed="true"]) .pt-seg:not([aria-pressed="true"]) { opacity: .45; }
.pt-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.pt-lg {
  height: 30px; padding: 0 10px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.pt-lg b { color: var(--text); font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
.pt-lg-g { font-size: 13px; }
.pt-lg[aria-pressed="true"] { border-color: var(--accentDim); background: var(--accentSoft); color: var(--accentText); }
.pt-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pt-lbl { margin-right: 2px; }
.pt-chip-n { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); font-weight: 400; }
.mb-chip[aria-pressed="true"] .pt-chip-n { color: inherit; }
.pt-trend { display: flex; flex-direction: column; gap: 6px; padding-left: 22px; border-left: 1px solid var(--line); min-width: 0; }
.pt-trend-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pt-trend-v { font-size: 12px; }
.pt-trend-v b { font-family: 'Chakra Petch', sans-serif; font-size: 22px; }
.pt-trend-svg { display: block; overflow: visible; }
.pt-trend-line { stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pt-trend-dot { fill: var(--accent); }
.pt-trend-goal { stroke: var(--tick); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.pt-trend-ax { display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); }
.pt-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pt-list-head .h2 .muted { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .06em; font-weight: 400; }
.pt-tip { flex: 0 1 auto; min-width: 0; }
.pt-table { display: flex; flex-direction: column; min-width: 0; }
.pt-tr { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 150px) 116px 140px 48px; align-items: center; }
.pt-tr > span { padding: 9px 10px; border-top: 1px solid var(--line); min-width: 0; }
.pt-th > span {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; color: var(--muted);
  text-transform: uppercase; white-space: nowrap; border-top: none; padding-bottom: 10px; overflow: hidden; text-overflow: ellipsis;
}
.pt-c-member { display: flex; align-items: center; gap: 8px; }
.pt-c-act { display: flex; align-items: center; gap: 8px; }
.pt-dots { display: flex; gap: 3px; flex-wrap: wrap; max-width: 92px; }
.vs-dot.pt-dot { width: 20px; height: 20px; border-radius: 4px; margin: 0; flex-shrink: 0; }
.pt[data-window="12"] .pt-table .vs-dot.pt-dot, .pt[data-window="8"] .pt-table .vs-dot.pt-dot { width: 13px; height: 13px; border-radius: 3px; }
.pt[data-window="8"] .pt-table .pt-dot svg, .pt[data-window="12"] .pt-table .pt-dot svg { width: 8px; height: 8px; }
.pt-n { font-family: 'IBM Plex Mono', monospace; font-size: 12px; white-space: nowrap; }
.pt-c-last { font-family: 'IBM Plex Mono', monospace; font-size: 12px; white-space: nowrap; }
.pt-c-overall { display: flex; align-items: center; gap: 8px; }
.pt-pct { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); white-space: nowrap; }
.pt-c-open { text-align: right; }
.pt-c-open .ibtn { width: 36px; height: 36px; }
/* phone cards (PParticipation) */
.pt-cards { display: flex; flex-direction: column; gap: 12px; }
.pt-card {
  padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column;
  gap: 10px; color: var(--text); font: inherit; text-align: left; width: 100%; min-width: 0; cursor: pointer;
}
.pt-card-head, .pt-own-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pt-card-name, .pt-own-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-card-why { font-size: 12px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.pt-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pt-tile { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-radius: 8px; background: var(--panel2); min-width: 0; }
.pt-tile.tone-t-warn { background: var(--warnBg); }
.pt-tile-k { font-size: 10px; color: var(--muted); }
.pt-tile-v { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pt-tile.tone-t-warn .pt-tile-v { color: var(--warnFg); }
.pt-tile.tone-t-none .pt-tile-v { color: var(--muted); }
.vs-dot.pt-dot.is-out { background: transparent; color: var(--muted); border: 1px dashed var(--line); }      /* PR §2b: not a member */
.vs-dot.is-rec { background: var(--panel2); color: var(--text); border: 1px solid var(--line); }       /* P10.1: trains, no verdict */
.pt-tile .pt-dots { gap: 2px; max-width: none; }
.pt-tile .vs-dot.pt-dot { width: 12px; height: 12px; border-radius: 3px; }
.pt-tile .pt-dot svg { width: 8px; height: 8px; }
/* the details sheet (and the R1-R3 card) */
.pt-sheet { width: 600px; }
.pt-sh-sum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pt-sh-pct b { font-family: 'Chakra Petch', sans-serif; font-size: 20px; }
.pt-sh-why { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.pt-sh-acts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pt-sh-act { display: flex; flex-direction: column; gap: 6px; }
.pt-sh-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.pt-sh-n { font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
.pt-sh-weeks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.pt-sh-wk { display: grid; grid-template-columns: 16px 34px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12px; }
.pt-sh-wk .vs-dot.pt-dot { width: 16px; height: 16px; }
.pt-sh-wl { font-family: 'IBM Plex Mono', monospace; color: var(--muted); }
.pt-sh-wt { overflow-wrap: anywhere; }
.pt-sh-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.pt-sh-facts div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--panel2); min-width: 0; }
.pt-sh-facts dt { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.pt-sh-facts dd { margin: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.pt-own-card { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1180px) and (min-width: 761px) {
  .pt-sum { grid-template-columns: minmax(0, 1fr); }
  .pt-trend { padding-left: 0; border-left: none; border-top: 1px solid var(--line); padding-top: 12px; }
  .pt-tr { grid-template-columns: minmax(0, 1fr) repeat(4, 118px) 128px 40px; }
  .pt-c-last { display: none; }
  .pt-dots { max-width: 64px; }
  .pt-tr .vs-dot.pt-dot { width: 13px; height: 13px; border-radius: 3px; }
  .pt-tr .pt-dot svg { width: 8px; height: 8px; }
}
@media (max-width: 760px) {
  .pt { gap: 12px; }
  [data-pt-body] { gap: 12px; }
  .pt-bar { gap: 8px; }
  .pt-win { width: 100%; }
  .pt-win a { flex: 1; justify-content: center; height: 44px; }
  .pt-span { width: 100%; }
  .pt-search { width: 100%; height: 44px; }
  .pt-sort { height: 44px; flex: 1; }
  .pt-sort select { flex: 1; height: 42px; }
  .pt-sum { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 12px; }
  .pt-split { height: 30px; }
  .pt-seg { padding: 0 4px; justify-content: center; font-size: 11px; min-width: 22px; }
  .pt-seg svg, .pt-seg-word { display: none; }
  .pt-lg { height: 44px; padding: 0 10px; border-color: var(--line); background: var(--panel); }
  .pt-chips .mb-chip, .pt-ranks .mb-chip { height: 40px; }
  .pt-trend { padding-left: 0; border-left: none; border-top: 1px solid var(--line); padding-top: 12px; }
  .pt-list { padding: 0; border: none; background: none; }
  .pt-list-head { padding: 0 2px; }
  .pt-sheet { width: 100%; }
  .pt-sh-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pt-own-card { padding: 14px; }
}

/* ------------------------------------------------------------------ P11 Leadership hints (Leadership / PLeadership)
   Values from the artboards: the dot plot (60 px rank column, 44 px lanes, a 2 px track, the next rank's median as a
   32 px tick with its label), three list cards (32 px icon tile, items on panel2 with 12 px radius, tags 22 px, 32 px
   buttons), the phone's segmented tabs and item cards with 44 px buttons. Never colour alone: every list has its own
   shape (▲ triangle · ◆ diamond · ★ star · △ ring · • small dot) on the plot, in the legend and on each card. */
.ld { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; }
.ld [hidden] { display: none !important; }
.ld-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ld-lede { font-size: 13px; color: var(--muted); max-width: 380px; line-height: 1.45; }
.ld-plot { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ld-plot-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ld-plot-note { font-size: 12px; color: var(--muted); }
.ld-metrics { margin-left: auto; align-self: center; }
.ld-metrics a { height: 36px; padding: 0 12px; display: inline-flex; align-items: center; background: var(--panel); color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ld-metrics a + a { border-left: 1px solid var(--line); }
.ld-metrics a[aria-pressed="true"] { background: var(--accentSoft); color: var(--accentText); }
.ld-grid { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 0 14px; }
.ld-unit { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); align-self: end; padding-bottom: 6px; }
.ld-axis { display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); padding-bottom: 6px; }
.ld-lane-rank { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 18px; display: flex; align-items: center; }
.ld-lane { position: relative; height: 44px; border-top: 1px solid var(--line); }
.ld-track { position: absolute; top: 21px; left: 0; right: 0; height: 2px; background: var(--track); }
.ld-next { position: absolute; top: 6px; width: 2px; height: 32px; margin-left: -1px; background: var(--text); }
.ld-next-l { position: absolute; top: -2px; transform: translateX(6px); font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted); white-space: nowrap; pointer-events: none; }
.ld-next-l.is-flip { transform: translateX(calc(-100% - 6px)); }
.ld-seats { left: auto; right: 0; transform: none; }                     /* P11.2: 'R4 · 10 seats' instead of a median */
.ld-lane-none { position: absolute; top: 12px; left: 0; font-size: 12px; color: var(--muted); }
/* a dot = a transparent button (a 6 px bigger hit area) with its shape drawn by ::after */
.ld-dot { position: absolute; padding: 0; border: none; background: none; cursor: pointer; color: inherit; }
.ld-dot::before { content: ''; position: absolute; inset: -6px; }
.ld-dot::after { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--muted); }
.ld-dot.is-promotion::after { background: var(--accent); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ld-dot.is-talk::after { background: var(--warnSolid); border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ld-dot.is-rising::after { background: var(--okSolid); border-radius: 0; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ld-dot.is-almost::after { background: var(--panel); box-shadow: inset 0 0 0 2px var(--accent); }
.ld-dot:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
.ld-dot:hover::after { filter: brightness(1.15); }
.ld-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.ld-lg { display: inline-flex; align-items: center; gap: 6px; }
.ld-dot.ld-dot-lg { position: relative; display: inline-block; width: 12px; height: 12px; cursor: default; flex-shrink: 0; }
.ld-dot.ld-dot-lg::before { display: none; }
.ld-dot.ld-dot-lg.is-none { width: 8px; height: 8px; margin: 0 2px; }
.ld-allclear { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--okBg); color: var(--okFg); display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.ld-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ld-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ld-col-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ld-col-ic { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ld-col-ic.is-accent { background: var(--accentSoft); color: var(--accentText); }
.ld-col-ic.is-warn { background: var(--warnBg); color: var(--warnFg); }
.ld-col-ic.is-ok { background: var(--okBg); color: var(--okFg); }
.ld-col-n { margin-left: auto; font-family: 'IBM Plex Mono', monospace; color: var(--muted); font-weight: 400; }
.ld-rule { font-size: 12px; color: var(--muted); line-height: 1.45; }
.ld-sub { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; font-family: 'Chakra Petch', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ld-item { padding: 12px; border-radius: 12px; background: var(--panel2); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ld-item-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ld-mark { font-size: 13px; line-height: 1; flex-shrink: 0; }
.ld-mark.is-promotion, .ld-mark.is-almost { color: var(--accentText); }
.ld-mark.is-talk { color: var(--warnFg); }
.ld-mark.is-rising { color: var(--okFg); }
.ld-name { font-size: 15px; font-weight: 700; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ld-name:hover, .ld-key:hover, .ld-tag:hover { text-decoration: underline; }
.ld-key { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.ld-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ld-tag {
  display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 600;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); text-decoration: none; overflow-wrap: anywhere; line-height: 1.35;
}
.ld-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.ld-acts .btn2 { height: 32px; font-size: 13px; }
.ld-more svg { flex-shrink: 0; }
.ld-why, .ld-snz-line, .ld-none { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.ld-why svg, .ld-snz-line svg, .ld-none svg { flex-shrink: 0; }
.ld-none { font-size: 13px; padding: 4px 0; }
.ld-snoozed { border-top: 1px solid var(--line); padding-top: 4px; }
.ld-snoozed summary { cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 600; font-size: 13px; color: var(--text); }
.ld-snoozed .ld-item + .ld-item, .ld-snoozed summary + .ld-item { margin-top: 8px; }
.ld-tip { flex: 0 1 auto; }
.ld-dialog { width: 540px; }
.ur-scrim[data-ld-dialog] { z-index: 46; }          /* above the Undo toast (45): a dialog's buttons are never covered */
.ld-menu { display: flex; flex-direction: column; gap: 8px; }
.ld-menu-item { justify-content: flex-start; height: 48px; width: 100%; }
.ld-mini { display: flex; flex-direction: column; gap: 12px; }
.ld-mini-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ld-mini-facts div { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 8px; background: var(--panel2); min-width: 0; }
.ld-mini-facts dt { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.ld-mini-facts dd { margin: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.ld-mini-facts a { color: var(--text); }
.ld-mini-facts a.pill { text-decoration: none; }
.ld-mini-hints { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ld-mini-hints li { display: flex; flex-direction: column; gap: 2px; }
.ld-mini-why { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ld-mini-none { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 1180px) and (min-width: 761px) {
  .ld-cols { grid-template-columns: minmax(0, 1fr); }
  .ld-metrics { margin-left: 0; }
}
@media (max-width: 760px) {
  .ld { gap: 12px; }
  .ld-body { gap: 12px; }
  .ld-tabs.only-phone { display: flex !important; gap: 4px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
  .ld-tab {
    flex: 1; min-width: 0; height: 44px; border-radius: 7px; display: flex; align-items: center; justify-content: center; gap: 4px;
    font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); text-decoration: none; white-space: nowrap;
  }
  .ld-tab[aria-selected="true"] { background: var(--accent); color: var(--accentInk); }
  .ld-ph-rule { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
  .ld-plot { padding: 14px; gap: 8px; }
  .ld-plot-head { gap: 6px 10px; }
  .ld-plot-head .h2 { font-size: 13px; }
  .ld-metrics { width: 100%; margin-left: 0; }
  .ld-metrics a { flex: 1; justify-content: center; height: 44px; padding: 0 6px; }
  .ld-grid { grid-template-columns: 26px minmax(0, 1fr); gap: 0 10px; }
  .ld-lane-rank { font-size: 14px; }
  .ld-cols { display: block; }
  .ld[data-tab="promotion"] .ld-col:not([data-ld-col="promotion"]),
  .ld[data-tab="talk"] .ld-col:not([data-ld-col="talk"]),
  .ld[data-tab="rising"] .ld-col:not([data-ld-col="rising"]) { display: none; }
  .ld-col { padding: 0; border: none; background: none; gap: 12px; }
  .ld-col-head { padding: 0 2px; }
  .ld-item { padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
  .ld-name { font-size: 16px; }
  .ld-tag { background: var(--panel2); border-color: transparent; }
  .ld-acts { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
  .ld-acts .btn2 { height: 44px; min-width: 0; }
  .ld-acts .btn2 span { overflow: hidden; text-overflow: ellipsis; }
  .ld-acts .ld-a1:not(:disabled) { background: var(--accent); color: var(--accentInk); border-color: var(--accent); font-family: 'Chakra Petch', sans-serif; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
  .ld-snoozed .ld-acts { grid-template-columns: minmax(0, 1fr); }
  .ld-dialog { width: 100%; }
  .ld-mini-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ P12 Ex-members + watchlist (ExMembers / PExMembers)
   Values from the artboards: two cards 1.6fr / 1fr; the month bars (22 px wide, 40 px at most; Kicked hatched, named in
   the key: never colour alone); the table (Name · Reason · Can return? · HQ · last power · Left · came back); the
   watchlist rows (grip 20 · position 24 · text · actions) on panel2, the top two outlined. Phone: two tabs, cards. */
.ex { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; }
.ex [hidden] { display: none !important; }
.ex-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ex-hits { display: flex; flex-direction: column; gap: 8px; border-color: var(--warnBd); }
.ex-hit { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ex-hit-t { flex: 1; min-width: 200px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.ex-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ex-card, .ex-watch { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ex-head { display: flex; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; }
.ex-head-t { display: flex; flex-direction: column; gap: 4px; }
.ex-sum { font-size: 12px; color: var(--muted); }
.ex-months { margin-left: auto; display: flex; gap: 8px; align-items: flex-end; }
.ex-month { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 34px; }
.ex-month-n, .ex-month-l { font-family: 'IBM Plex Mono', monospace; font-size: 10px; }
.ex-month-l { color: var(--muted); }
.ex-month.is-now .ex-month-l { color: var(--text); font-weight: 600; }
.ex-month-bar { width: 22px; height: 40px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 3px 3px 0 0; overflow: hidden; }
.ex-month-bar i { display: block; width: 100%; flex-shrink: 0; }
.ex-b-left { background: var(--accentDim); }
.ex-month.is-now .ex-b-left { background: var(--accent); }
.ex-b-kicked { background: repeating-linear-gradient(135deg, var(--warnFg) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--warnFg); }
.ex-month-key { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); padding-left: 4px; align-self: center; }
.ex-month-key span { display: flex; align-items: center; gap: 5px; }
.ex-month-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.ex-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-search { width: 200px; }
.ex-sel select { max-width: 150px; }
.ex-table { display: flex; flex-direction: column; min-width: 0; }
.ex-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 150px 140px 70px 120px; align-items: center; }
.ex-table.has-act .ex-row { grid-template-columns: minmax(0, 1fr) 90px 150px 140px 70px 120px 44px; }
.ex-c { padding: 9px 10px; border-top: 1px solid var(--line); min-width: 0; align-self: stretch; display: flex; align-items: center; }
.ex-th > span {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; color: var(--muted);
  text-transform: uppercase; white-space: nowrap; padding: 0 10px 10px; overflow: hidden; text-overflow: ellipsis;
}
.ex-th > .ex-c-hq { text-align: right; }
.ex-c-name { gap: 4px 8px; flex-wrap: wrap; }
.ex-name { font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
a.ex-name:hover { text-decoration: underline; }
.ex-note { flex-basis: 100%; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-c-reason { gap: 6px; font-size: 13px; }
.ex-c-hq { justify-content: flex-end; text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 12px; white-space: nowrap; }
.ex-c-date { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ex-c-back .pill { height: auto; min-height: 22px; padding: 3px 8px; white-space: normal; line-height: 1.25; }
.ex-c-act { justify-content: flex-end; padding: 4px; }
.ex-none { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; padding: 10px; }
.ex-watch-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ex-watch-note { margin-left: auto; font-size: 12px; color: var(--muted); }
.ex-wlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ex-w { display: grid; grid-template-columns: 20px 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); }
.ex-w.is-top { border-color: var(--warnBd); }
.ex-w.is-drag { opacity: .5; }
.ex-w[draggable="true"] .ex-grip { cursor: grab; }
.ex-grip { color: var(--muted); display: inline-flex; }
.ex-pos { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 18px; color: var(--muted); }
.ex-w.is-top .ex-pos { color: var(--warnFg); }
.ex-w-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ex-w-meta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); }
.ex-w-why { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ex-w-foot { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.ex-w-foot a.pill { text-decoration: none; }
.ex-w-acts { display: flex; gap: 4px; }
.ex-w-acts .ibtn { width: 32px; height: 32px; }
.ibtn.is-armed, .btn2.is-armed { background: var(--warnSolid); color: var(--warnInk); border-color: var(--warnSolid); }
.ex-wadd { align-self: flex-start; }
.ex-foot { font-size: 12px; color: var(--muted); }
@media (max-width: 1180px) and (min-width: 761px) {
  .ex-grid { grid-template-columns: minmax(0, 1fr); }
  .ex-months { margin-left: 0; }
}
@media (max-width: 1023px) and (min-width: 761px) {
  .ex-row { grid-template-columns: minmax(0, 1fr) 80px 140px 120px 64px 110px; }
  .ex-table.has-act .ex-row { grid-template-columns: minmax(0, 1fr) 80px 140px 120px 64px 110px 40px; }
}
@media (max-width: 760px) {
  .ex { gap: 12px; }
  .ex-tabs.only-phone { display: flex !important; gap: 4px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
  .ex-tab {
    flex: 1; min-width: 0; height: 44px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
    font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); text-decoration: none; white-space: nowrap;
  }
  .ex-tab[aria-selected="true"] { background: var(--accent); color: var(--accentInk); }
  .ex[data-tab="ex"] .ex-watch, .ex[data-tab="watch"] .ex-card { display: none; }
  .ex-grid { display: block; }
  .ex-card { padding: 0; border: none; background: none; }
  .ex-head { padding: 0 2px; }
  .ex-months { margin-left: 0; }
  .ex-tools { gap: 8px; }
  .ex-search { width: 100%; }
  .ex-sel { flex: 1 1 140px; }
  .ex-sel select { max-width: none; flex: 1; min-width: 0; }
  .mb-showing { margin-left: 0; }
  .ex-table { gap: 12px; }
  .ex-row, .ex-table.has-act .ex-row {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "name name name status" "reason date hq act" "back back back act";
    gap: 6px 10px; padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line);
  }
  .ex-c { padding: 0; border-top: none; }
  .ex-c-name { grid-area: name; }
  .ex-name { font-size: 15px; }
  .ex-c-status { grid-area: status; justify-content: flex-end; align-self: start; }
  .ex-c-reason { grid-area: reason; font-size: 12px; }
  .ex-c-date { grid-area: date; }
  .ex-c-hq { grid-area: hq; justify-content: flex-start; color: var(--muted); }
  .ex-c-back { grid-area: back; }
  .ex-c-back:empty { display: none; }
  .ex-c-act { grid-area: act; padding: 0; align-self: end; }
  .ex-c-act .ibtn { width: 44px; height: 44px; }
  .ex-watch { padding: 14px; }
  .ex-watch-note { margin-left: 0; flex-basis: 100%; }
  .ex-w { grid-template-columns: 20px 24px minmax(0, 1fr); }
  .ex-w-acts { grid-column: 1 / -1; justify-content: flex-end; }
  .ex-w-acts .ibtn { width: 44px; height: 44px; }
  .ex-wadd { align-self: stretch; height: 48px; }
  .ex-add-ph.only-phone { display: inline-flex !important; width: 100%; }
  .ex-dialog { width: 100%; }
}

/* ------------------------------------------------------------------ P13 Discrepancies (Discrepancies / PDiscrepancies)
   Values from the artboards: the groups (a pill with its icon + the word, then the title and the count), each item
   (what · where · Fix + Ignore: 1fr / 220 px / auto), the Summary card (320 px); phone: three count tiles, then cards
   with the level pill, the words, where, and Fix / Ignore side by side (44 px). */
.dc { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; }
.dc [hidden] { display: none !important; }
.dc-head-acts { display: flex; gap: 10px; }
.dc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.dc-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dc-group { display: flex; flex-direction: column; gap: 4px; scroll-margin-top: 16px; }
.dc-group-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; }
.dc-n { font-family: 'IBM Plex Mono', monospace; color: var(--muted); }
.dc-item { display: grid; grid-template-columns: minmax(0, 1fr) 220px 250px; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.dc-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dc-title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.dc-detail { font-size: 12px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.dc-ign { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; overflow-wrap: anywhere; }
.dc-ign svg { flex-shrink: 0; }
.dc-where { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.dc-where a { color: var(--text); }
.dc-area { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.dc-acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.dc .btn.btn-sm { height: 34px; font-size: 12px; }
.dc-fix { text-decoration: none; }
.dc-sum { display: flex; flex-direction: column; gap: 12px; }
.dc-sum-row { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.dc-sum-n { margin-left: auto; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 24px; }
.dc-sum-ign { font-size: 12px; color: var(--muted); }
.dc-sum-note { font-size: 12px; color: var(--muted); line-height: 1.5; padding-top: 8px; border-top: 1px solid var(--line); }
.dc-ignored { display: flex; flex-direction: column; gap: 4px; }
.dc-ignored summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; min-height: 32px; }
.dc-clear p { margin: 0; display: flex; gap: 8px; align-items: center; font-weight: 600; }
.dc-clear svg { color: var(--okFg); flex-shrink: 0; }
.dc-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.45; }
.dc-dialog textarea[readonly] { font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.dc-tip { flex: none; }
.dc-tile { padding: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-decoration: none; color: var(--text); }
.dc-tile-n { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 26px; }
@media (max-width: 1180px) and (min-width: 761px) {
  .dc-grid { grid-template-columns: minmax(0, 1fr) 240px; }
  .dc-item { grid-template-columns: minmax(0, 1fr) 160px; }
  .dc-acts { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 760px) {
  .dc { gap: 12px; }
  .dc-sum-ph.only-phone { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .dc-scan-ph.only-phone { display: inline-flex !important; width: 100%; }
  .dc-grid { display: block; }
  .dc-main { gap: 12px; }
  .dc-group { padding: 0; border: none; background: none; gap: 12px; }
  .dc-group-head { display: none; }
  .dc-item { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
  .dc-lv.only-phone { display: inline-flex !important; align-self: flex-start; }
  .dc-where { font-size: 11px; }
  .dc-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .dc-acts > :only-child { grid-column: 1 / -1; }
  .dc-acts .btn, .dc-acts .btn2 { height: 44px; min-width: 0; }
  .dc-acts .btn span, .dc-acts .btn2 span { white-space: normal; line-height: 1.15; text-align: center; }
  .dc-ignored { padding: 14px; }
  .dc-ignored .dc-item { padding: 12px 0; border: none; border-top: 1px solid var(--line); border-radius: 0; background: none; }
  .dc-dialog { width: 100%; }
}

/* ------------------------------------------------------------------ P14 Messages (Messages / PMessages)
   Values from the artboards: three columns 300 / 1fr / 300 (Templates · Preview · Filled in from); the template rows
   (a 32 px icon tile, name + when it is used; the current one on accentSoft); the preview (mono 14 / 1.7 on panel2), the
   five STARTS AT tiles (the server's on accentSoft), the 56 px Copy. Phone: the template field, the preview, 3 tiles a
   row, a 60 px Copy kept above the pill bar. The counter turns into ▲ + words when the text is too long for chat. */
.msg { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; }
.msg [hidden] { display: none !important; }
.msg-head-acts { display: flex; gap: 10px; }
.msg-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.msg-nav { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msg-nav .h2 { padding-bottom: 4px; }
.msg-group { padding: 10px 2px 2px; }
.msg-t { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; color: var(--text); text-decoration: none; }
.msg-t[aria-current="page"] { background: var(--accentSoft); border-color: var(--accentDim); }
.msg-t-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--panel2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.msg-t[aria-current="page"] .msg-t-ic { background: var(--accent); color: var(--accentInk); }
.msg-t-txt { display: flex; flex-direction: column; min-width: 0; }
.msg-t-name { font-weight: 600; overflow-wrap: anywhere; }
.msg-t-sub { font-size: 12px; color: var(--muted); }
.msg-archived summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; min-height: 36px; margin-top: 6px; }
.msg-arch { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 13px; }
.msg-trains { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); text-decoration: none; padding-top: 10px; border-top: 1px solid var(--line); }
.msg-trains svg { flex-shrink: 0; }
.msg-preview { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.msg-pv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.msg-count { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.msg-count[data-over] { color: var(--warnFg); font-weight: 600; }
.msg-edit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-saved { font-size: 12px; color: var(--muted); margin-right: auto; }
.msg-text {
  resize: vertical; padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  font-family: 'IBM Plex Mono', monospace; font-size: 14px; line-height: 1.7; min-height: 210px; width: 100%;
}
.msg-opts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.msg-opt { min-width: 0; }
.msg-opt select { max-width: 200px; }
.msg-opt input[type="date"], .msg-opt input[type="time"] { border: none; background: transparent; color: var(--text); font: inherit; font-weight: 600; min-width: 0; }
.msg-chk { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; min-height: 40px; }
.msg-chk input { width: 18px; height: 18px; accent-color: var(--accent); }
.msg-zones { display: flex; flex-direction: column; gap: 8px; }
.msg-zones-l { display: flex; align-items: center; gap: 6px; }
.msg-zone-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.msg-zone { padding: 10px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msg-zone.is-server { background: var(--accentSoft); border-color: var(--accentDim); }
.msg-zone-c { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-zone-t { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 20px; }
.msg-zone-o { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted); }
.msg-zones-none { font-size: 12px; color: var(--muted); }
.msg-copy { height: 56px; font-size: 16px; width: 100%; }
.msg-filled { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.msg-ph { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); min-width: 0; }
.msg-ph-k { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--accentText); }
.msg-ph-v { font-size: 13px; overflow-wrap: anywhere; white-space: pre-line; max-height: 7.5em; overflow: hidden; }
.msg-ph-w { font-size: 11px; color: var(--muted); }
.msg-ph-none { margin: 0; font-size: 13px; color: var(--muted); }
.msg-filled-note { font-size: 12px; color: var(--muted); }
.msg-keys code { font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
@media (max-width: 1180px) and (min-width: 761px) {
  .msg-grid { grid-template-columns: 250px minmax(0, 1fr); }
  .msg-filled.only-desk { grid-column: 1 / -1; }
  .msg-zone-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .msg { gap: 12px; }
  .msg-pick.only-phone { display: flex !important; flex-direction: column; gap: 6px; }
  .msg-pick-box { position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--accentDim); background: var(--accentSoft); }
  .msg-pick-ic { display: inline-flex; }
  .msg-pick-box b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .msg-pick-box select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; }
  .msg-grid { display: block; }
  .msg-preview { padding: 0; border: none; background: none; gap: 10px; }
  .msg-pv-head .h2 { display: none; }
  .msg-text { background: var(--panel); min-height: 180px; padding: 14px; line-height: 1.6; }
  .msg-opt, .msg-opts .mb-sort { width: 100%; }
  .msg-opt select { max-width: none; flex: 1; }
  .msg-edit-row .btn2 { height: 44px; }
  .msg-zone-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .msg-zone { padding: 8px 10px; background: var(--panel); }
  .msg-zone-t { font-size: 18px; }
  .msg-copy { position: sticky; bottom: 92px; height: 60px; font-size: 17px; box-shadow: var(--shadow); z-index: 3; }
  .msg-dialog { width: 100%; }
  .msg-filled { margin-top: 12px; }
  .msg-more.only-phone { display: flex !important; flex-direction: column; gap: 12px; }
  .msg-more .msg-trains { min-height: 44px; margin-top: 0; }
}

/* ------------------------------------------------------------------ PR Roster management (no artboard: Command Deck parts)
   The count, Left the alliance?, Recent changes, Members, Ex-members; the sheets of roster_sheet.js (also in the upload
   reviews). Lists are plain rows on the card; nothing scrolls inside the page. */
.ro { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; }
.ro [hidden] { display: none !important; }
.ro-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
.ro-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ro-col > .card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ro-big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ro-big b { font-family: 'Chakra Petch', sans-serif; font-size: 44px; line-height: 1; }
.ro-of { font-family: 'Chakra Petch', sans-serif; font-size: 20px; color: var(--muted); margin-right: 6px; }
.ro-meter { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.ro-meter i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.ro-caps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ro-rank-n { font-size: 12px; color: var(--muted); }
.ro-hint { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--warnFg); }
.ro-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ro-count-t { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); }
.ro-more { margin-left: auto; font-size: 12px; color: var(--accentText); }
.ro-sub { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.ro-search { width: 100%; }
.ro-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ro-item { display: flex; align-items: center; gap: 8px 10px; padding: 8px 2px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ro-item:first-child { border-top: none; }
.ro-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 180px; }
.ro-name { font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
a.ro-name:hover { color: var(--accentText); }
.ro-meta { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ro-ch-t { font-weight: 600; overflow-wrap: anywhere; }
.ro-item-acts { display: flex; gap: 4px; margin-left: auto; }
.ro-item-acts .ibtn { width: 34px; height: 34px; }
.ro-none { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; padding: 6px 2px; line-height: 1.4; }
.ro-all { align-self: flex-start; }
.ro-merges { flex-direction: row !important; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.ro-merges a { color: var(--accentText); }
/* the sheets (roster_sheet.js) */
.ro-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ro-same { border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; }
.ro-same > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 13px; }
.ro-same[open] { padding-bottom: 12px; }
.ro-same[open] > div { display: flex; flex-direction: column; gap: 8px; }
.ro-hits { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ro-hit { width: 100%; height: auto; min-height: 44px; padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 10px; text-align: left; }
.ro-hit-n { font-weight: 700; }
.ro-hit-m { font-size: 12px; color: var(--muted); font-weight: 400; }
.ro-who { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ro-who .btn2 { margin-left: auto; }
.ro-dry { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border-radius: 10px; background: var(--panel2); font-size: 13px; line-height: 1.45; flex-wrap: wrap; }
.ro-clashes { margin: 0; padding-left: 18px; flex-basis: 100%; font-size: 12px; color: var(--muted); }
.ro-black { border: 1px solid var(--warnBd); }
.btn.ro-danger { background: var(--warnSolid); color: var(--warnInk); border-color: var(--warnSolid); }
.ro-dialog { width: min(520px, 100%); }
.ur-scrim[data-ro-dialog] { z-index: 62; }      /* in an upload review: above the phone's full-screen detail (60) */
/* the upload reviews: the three choices next to Pick player, and "Not in this list" */
.ro-choices { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ro-choices .btn2 { flex: 1 1 150px; }
.ro-missing { display: flex; flex-direction: column; gap: 6px; }
.ro-missing ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ro-end { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
@media (max-width: 1180px) and (min-width: 761px) {
  .ro-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ro { gap: 12px; }
  .ro-grid { display: flex; flex-direction: column; gap: 12px; }
  .ro-col { gap: 12px; }
  .ro-acts .btn, .ro-acts .btn2 { flex: 1 1 100%; height: 48px; }
  .ro-two { grid-template-columns: minmax(0, 1fr); }
  .ro-item-acts .ibtn { width: 44px; height: 44px; }
  .ro-item .btn-sm { height: 44px; }
  .ro-dialog { width: 100%; }
}

/* ------------------------------------------------------------------ PX (D33): Control panel, own squads, Auto-detect
   Built from the Command Deck parts (cards, switches, pills, the Users segmented control); never colour alone. */
.pv-banner { margin-bottom: 14px; flex-wrap: wrap; border: 1px solid var(--accentDim); }
.pv-banner .btn2 { margin-left: auto; }
.mt-banner { margin-bottom: 14px; flex-wrap: wrap; border: 1px solid var(--accentDim); }   /* GO-LIVE: import running */
.cp { display: flex; flex-direction: column; gap: 10px; }
.cp-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cp-ranks { display: grid; flex: 1 1 180px; min-width: 160px; }
.cp-preview, .cp-copy { font-size: 13px; }
.cp-copy select { background: transparent; color: inherit; border: none; font: inherit; max-width: 200px; }
.cp-pages { display: flex; flex-direction: column; gap: 8px; }
.cp-page { border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); }
.cp-page.is-off .cp-title { color: var(--muted); }
.cp-sum { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; min-height: 44px; }
.cp-sum::-webkit-details-marker { display: none; }
.cp-sum > svg { margin-left: auto; transition: transform .15s; flex-shrink: 0; }
.cp-page[open] .cp-sum > svg { transform: rotate(90deg); }
.cp-title { font-weight: 600; }
.cp-sumtxt { font-size: 12px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-body { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
.cp-h { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; margin-top: 4px; }
.cp-secs { display: flex; flex-direction: column; }
.cp-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; border-top: 1px solid var(--line); font-size: 13px; }
.cp-secs .cp-sec:first-child { border-top: none; }
.cp-main { border-top: none; }
.cp-sec-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cp-sec.is-locked { color: var(--muted); }
.cp-word { font-size: 11px; }
.cp-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); }
.cp-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; border-radius: 999px; border: none; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0 10px; }
.cp-pill[aria-checked="true"] { background: var(--accent); color: var(--accentInk); }
.cp-pill:disabled { cursor: not-allowed; opacity: .7; }
.cp-lock { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); padding-top: 4px; }
.cp-lock svg { flex-shrink: 0; }
.cp-pv { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accentText); text-decoration: none; min-height: 32px; }
.ur-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.ur-link b { color: var(--text); font-weight: 600; }
.ur-link.is-none { color: var(--warnFg); }
.ur-link-btn { border: 1px solid var(--line); background: var(--panel2); color: var(--text); border-radius: 8px; font: inherit; font-size: 12px; padding: 2px 8px; cursor: pointer; }
.up-auto { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; border: 2px dashed var(--accentDim); }
.up-auto.is-over, .up-auto.is-on { border-color: var(--accent); background: var(--accentSoft); }
.up-auto-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--accentSoft); color: var(--accentText); display: flex; align-items: center; justify-content: center; }
.up-auto-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.up-auto-txt .muted { font-size: 12px; line-height: 1.45; }
.up-auto-pick { cursor: pointer; position: relative; }
.up-auto-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.up-self { display: flex; flex-direction: column; gap: 10px; }
.up-self-who { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.up-self-who > span:not(.pill) { display: flex; flex-direction: column; gap: 2px; }
.up-self-who b { font-size: 18px; }
.up-self-p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 13px; }
.up-hub-self .up-drop { min-height: 220px; }
.up-back-auto { color: var(--accentText); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.up-av { display: flex; flex-direction: column; gap: 16px; }
.up-av-groups, .up-av-files { display: flex; flex-direction: column; gap: 10px; }
.up-av-glist, .up-av-flist { display: flex; flex-direction: column; gap: 8px; }
.up-av-g { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--panel2); }
.up-av-gt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.up-av-gt .muted { font-size: 12px; }
.up-av-f { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); }
.up-av-f.is-warn { border-color: var(--warnSolid); }
.up-av-f .up-hint { grid-column: 1 / -1; }
.up-av-f .up-file-n { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px) {
  .up-auto { grid-template-columns: auto minmax(0, 1fr); }
  .up-auto-pick { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
  .up-av-g { grid-template-columns: auto minmax(0, 1fr); }
  .up-av-g > .pill, .up-av-g > .btn2 { grid-column: 2; justify-self: start; }
  .up-av-f { grid-template-columns: minmax(0, 1fr); }
  .up-av-type { justify-self: stretch; }
  .up-av-type select { width: 100%; }
  .cp-sumtxt { display: none; }
}

/* ------------------------------------------------------------------ PX.1: sort a member's squads (# · Wall · Power)
   The server gives every squad its place in each order; the root's data-sq-sort picks one (CSS order, instant). */
[data-sq-sort="num"] .sq-sortable > [data-sq] { order: var(--o-num); }
[data-sq-sort="wall"] .sq-sortable > [data-sq] { order: var(--o-wall); }
[data-sq-sort="power"] .sq-sortable > [data-sq] { order: var(--o-power); }
.sq-sort { flex-wrap: wrap; }
.sq-sort button { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; font-size: 12px; font-weight: 600; }
.sq-sort .sq-ok { display: none; }
.sq-sort button[aria-pressed="true"] .sq-ok { display: inline-flex; }
.sq-sort .sq-off { font-weight: 400; font-size: 11px; }
.sq-wallpos, .sq-nowall { display: none; font-size: 11px; color: var(--muted); }
[data-sq-sort="wall"] .sq-wallpos { display: inline; }
[data-sq-sort="wall"] .sq-nowall { display: inline; }
.pf-card-head + .sq-sort { margin: -4px 0 4px; align-self: flex-start; }

/* ------------------------------------------------------------------ PA (D30): compact chrome + safe areas
   Every page is reachable at every width: from 761 to 1180 px (a phone on its side, a tablet) and whenever the
   tabs don't fit (shell.js adds .nav-compact), the command bar drops its tabs and the phone's pill bar + More
   screen take over. The page keeps room for the pill bar and the phone's own bars (safe-area insets). */
.cmdbar-gap { display: none; flex: 1; }
@media (max-width: 760px) {
  .main, .main.state-refreshing { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .main, .phead, .sheet-body { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .sheet-body { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .picker-ph { gap: 0; }
  .swatch-ph { width: 40px; }
  /* the 40 px swatches leave the titles less room: a long kicker takes a second line instead of being cut off */
  .phead-kick { white-space: normal; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .cmdbar .tabs { display: none; }
  .cmdbar-gap { display: block; }
  .pnav.only-phone { display: grid !important; }
  .sheet.only-phone { display: flex !important; }
  .sheet.only-phone[hidden] { display: none !important; }
  .deck .main { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .main, .cmdbar { padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); }
  .pnav { left: 50%; right: auto; width: min(560px, calc(100% - 32px)); transform: translateX(-50%); }
  .sheet-body { width: 100%; max-width: 640px; margin: 0 auto; padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .pf-toast { bottom: calc(96px + env(safe-area-inset-bottom)); }          /* above the pill bar */
  .rf-scrim { bottom: calc(104px + env(safe-area-inset-bottom)); }
}
html.nav-compact .cmdbar .tabs { display: none; }
html.nav-compact .cmdbar-gap { display: block; }
html.nav-compact .pnav.only-phone { display: grid !important; }
html.nav-compact .sheet.only-phone { display: flex !important; }
html.nav-compact .sheet.only-phone[hidden] { display: none !important; }
html.nav-compact .deck .main { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
html.nav-compact .pnav { left: 50%; right: auto; width: min(560px, calc(100% - 32px)); transform: translateX(-50%); }
html.nav-compact .sheet-body { width: 100%; max-width: 640px; margin: 0 auto; }
html.nav-compact .pf-toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
html.nav-compact .rf-scrim { bottom: calc(104px + env(safe-area-inset-bottom)); }
/* a phone on its side: a slimmer bar and pill bar, so the page keeps most of the 390 px */
@media (max-height: 500px) and (min-width: 561px) {
  .cmdbar { height: 52px; gap: 14px; }
  .cmdbar .brand-word { font-size: 16px; }
  .pnav { height: 52px; bottom: calc(8px + env(safe-area-inset-bottom)); }
  .pnav-item { flex-direction: row; gap: 6px; }
  .pnav-pill { width: 40px; }
  .deck .main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .sheet-body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .pf-toast { bottom: calc(68px + env(safe-area-inset-bottom)); }
  .rf-scrim { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .sheet-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6px; }
  .sheet-item { height: 46px; }
}
/* Touch screens (phones, tablets): every tap target is at least 40 x 40 px. */
@media (pointer: coarse) {
  .brand { min-height: 44px; }
  .swatch { width: 40px; height: 40px; }
  .ibtn, .ov-refresh-sm { min-width: 40px; min-height: 40px; }
  .btn-sm { height: 40px; }
  .mb-toggle button, .mb-toggle a { min-width: 40px; min-height: 40px; }
  .rg-seg button { height: 40px; }
  .ov-link { display: inline-flex; align-items: center; min-height: 40px; }
  /* every control, chip, tab, table-row link and stand-alone text link (not the links inside a line of text) */
  html body :where(button, select, summary, textarea, input:not([type=checkbox], [type=radio], [type=hidden]), [role=tab],
         a.btn, a.btn2, a.mb-chip, a.vs-tab, a.vs-htr, a.pill):not(.ld-dot, .pt-seg, .tr-day-hit, .switch) {
    min-height: 40px; min-width: 40px;
  }
  html body :where(label.vs-sort, label.mb-sort, label.mb-search, label.ur-search, label.rank-chip, label.ds-task, label.ds-score,
         label.btn, label.btn2) { min-height: 40px; }
  html body :where(a.ex-name, a.ro-name, a.ro-more, a.pf-hint, a.vs-hint, a.si-link, a.pf-backlink, .dc-where a, a.ld-name, a.ld-key, a.ld-tag, a.msg-trains, a.cp-pv, a.up-back-auto) {
    display: inline-flex; align-items: center; min-height: 40px; min-width: 40px;
  }
  .vs-name { display: inline-block; line-height: 40px; min-height: 40px; min-width: 40px; vertical-align: middle; }
  /* the switch keeps its look; a transparent border makes its tap area 40 px tall */
  .switch { width: 56px; height: 40px; border: 9px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--line); }
  .switch[aria-checked="true"] { border-color: transparent; box-shadow: none; }
  /* the dot plot's dots overlap by design: each gets a bigger invisible hit area (every member is also in the lists) */
  .ld-dot::before { content: ''; position: absolute; inset: -10px; }
  .ld-tag, .dc-sum-row { min-height: 40px; }
  .ld-name { min-width: 40px; }
  /* Desert Storm: a member's actions get their own line (bigger buttons don't fit beside the name on a tablet) */
  .ds-m { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: 'h n s' '. f f' '. a a'; }
  .ds-acts { flex-wrap: wrap; justify-content: flex-start; }
}

/* ------------------------------------------------------------------ PX.4: a preview shows the rank's Upload hub, uploading off */
.up-pv-note { display: flex; align-items: center; gap: 6px; color: var(--accentText); }
.up-drop.is-preview { border-style: dashed; }
.up-pick[disabled] { opacity: .65; cursor: not-allowed; white-space: normal; height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; text-align: left; }

/* ------------------------------------------------------------------ PX.7: one review card per reading
   The reading's screenshots as a strip above the image (each one opens with its read boxes), each value's source file,
   and per screenshot: its state + Skip this screenshot / Include it anyway / Leave it out. */
.up-shots { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.up-shot-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; max-width: 100%; padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 12px; text-align: left;
}
.up-shot-btn.is-on { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.up-shot-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; font-family: 'IBM Plex Mono', monospace; }
.up-from { display: inline-block; font-size: 11px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.up-shotrows { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.up-shotrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.up-shotrow-n { font-size: 12px; overflow-wrap: anywhere; }
.up-shotrow-s { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.up-shotrow-acts { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.up-dbody .up-shots { padding: 0 2px; }

/* ------------------------------------------------------------------ PX.6: "Approve trains" / "Run Desert Storm" fold
   A heading with one button (aria-expanded): icon, title + a status line, a chevron that turns when open. */
.ur-fold { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 6px; }
.ur-fold-h { margin: 0; }
.ur-fold-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 4px; border: none; border-radius: 8px;
  background: none; color: var(--text); text-align: left; font: inherit;
}
.ur-fold-btn:hover { background: var(--panel2); }
.ur-fold-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ur-fold-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ur-fold-st { font-size: 12px; color: var(--muted); font-weight: 400; overflow-wrap: anywhere; }
.ur-fold-chev { display: inline-flex; color: var(--muted); transition: transform .15s; }
.ur-fold.is-open .ur-fold-chev { transform: rotate(180deg); }
.ur-fold-body { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.ur-fold-body[hidden] { display: none; }

/* ------------------------------------------------------------------ PX.3: who is signed in (the account chip)
   Desktop / tablet: the name over the rank (+ R4 title, Owner) and a menu under it. Phone: initial + rank in the top
   bar and the same menu as a bottom sheet; a phone on its side (<= 500 px high) gets the compact chip in the command
   bar. When the tabs don't fit, shell.js first drops the chip's extra words (.who-tight), then the brand word
   (.brand-tight), and only then the tabs (.nav-compact). Status is words, never colour alone. */
.who-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; max-width: 240px; padding: 0 8px 0 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); flex-shrink: 0; text-align: left; min-width: 40px;
}
.who-chip:hover, .who-chip[aria-expanded="true"] { border-color: var(--accentDim); }
.who-chip.is-preview { border-color: var(--accentDim); background: var(--accentSoft); }
.who-chip-ic { display: inline-flex; color: var(--accentText); }
.who-chip-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.15; }
.who-chip-name {
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px;
}
.who-chip-meta {
  display: flex; align-items: center; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .1em;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.who-x { overflow: hidden; text-overflow: ellipsis; }
.who-chev { display: inline-flex; color: var(--muted); }
.who-rank {
  display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 4px; flex-shrink: 0;
  border: 1px solid var(--accentDim); color: var(--accentText); font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  font-weight: 600; letter-spacing: .04em;
}
.who-chip-meta .who-rank { height: 15px; font-size: 10px; padding: 0 4px; }
.who-ini {
  width: 28px; height: 28px; border-radius: 7px; background: var(--accent); color: var(--accentInk); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-family: 'Chakra Petch', sans-serif; font-weight: 700;
}
.who-chip .who-ini { display: none; }
.who-chip .who-rank-c { display: none; }
html.who-tight .who-chip .who-x, html.who-tight .who-chip.is-preview .who-chip-meta, html.who-tight .who-chip-ic { display: none; }
html.who-tight .who-chip-name { max-width: 96px; }
html.brand-tight .cmdbar .brand-word { display: none; }
/* the menu (desktop) / the bottom sheet / the More screen */
.who-menu { min-width: 260px; max-width: min(320px, calc(100vw - 16px)); }
.who-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.who-card .who-name { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .04em; overflow-wrap: anywhere; }
.who-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.who-badges .who-rank { height: 22px; padding: 0 7px; }
.who-pv-head { display: flex; align-items: center; gap: 8px; font-family: 'Chakra Petch', sans-serif; font-size: 15px; color: var(--accentText); }
.who-pv-head b { color: var(--text); }
.who-you { overflow-wrap: anywhere; line-height: 1.4; }
.who-meta { overflow-wrap: anywhere; }
.who-menu > .btn, .who-menu > .btn2, .who-sheet > .btn, .who-sheet > .btn2, .sheet-who > .btn, .sheet-who > .btn2 { margin-top: 4px; }
.who-look { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.who-look .lbl { flex: 1; }
/* phone: the compact chip (initial + rank, or "Previewing as R3") */
.who-chip-ph {
  display: inline-flex; align-items: center; gap: 5px; height: 44px; min-width: 44px; padding: 0 6px; border-radius: 10px; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
}
.who-chip-ph.is-preview { border-color: var(--accentDim); background: var(--accentSoft); color: var(--accentText); }
.who-pv-ph { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .08em; }
.who-pv-ph b { font-size: 13px; color: var(--text); }
.who-scrim .who-sheet { width: 420px; }
/* a phone on its side: the command bar's chip is the compact one, and its menu is the bottom sheet */
@media (max-height: 500px) and (min-width: 561px) {
  .who-chip:not(.is-preview) { padding: 0 6px; gap: 5px; height: 40px; }
  .who-chip:not(.is-preview) .who-chip-txt, .who-chip .who-chev { display: none; }
  .who-chip .who-ini, .who-chip .who-rank-c { display: inline-flex; }
  .who-chip.is-preview .who-chip-meta { display: none; }
  .who-scrim { align-items: flex-end; padding: 0; }
  .who-scrim .who-sheet { width: min(560px, 100%); border-radius: 20px 20px 0 0; max-height: 92vh; max-height: 92dvh; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
  .who-scrim .who-sheet { width: 100%; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .phead .who-chip-ph { margin-left: 2px; }
}
/* APhone (Overview) keeps REAP // CMD and the week on one line next to the chip, down to 360 px */
.phead-a-word, .phead-a-week { white-space: nowrap; }
@media (max-width: 380px) {
  .phead-a { gap: 8px; }
  .phead-a-word { font-size: 14px; letter-spacing: .1em; }
  .phead-a .who-chip-ph { padding: 0 4px; gap: 4px; }
}

/* ------------------------------------------------------------------ PX.5: who's online
   "● n online" next to the account chip (phone: "● n"); the list in a menu under it (phone: the top of More).
   Status is a glyph + a word (● Online · ◐ Away), never colour alone. When the tabs don't fit, the first step
   (.on-tight, shell.js) drops the word "online" (it stays in the label). */
.on-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: .04em;
}
.on-pill:hover, .on-pill[aria-expanded="true"] { border-color: var(--accentDim); }
.on-dot { color: var(--okFg); font-size: 11px; }
.on-word { font-weight: 400; color: var(--muted); }
html.on-tight .on-word, html.who-tight .on-word { display: none; }
html.on-tight .on-pill { padding: 0 10px; }
.on-pill-ph { height: 44px; min-width: 44px; padding: 0 10px; justify-content: center; }
.online-menu { left: auto; right: 0; padding: 14px; min-width: 300px; max-width: min(360px, calc(100vw - 16px));
  max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; }
.on-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.on-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.on-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px; border-radius: 8px; }
.on-row.is-you { background: var(--panel2); }
.on-st { flex: 0 0 74px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; padding-top: 2px; }
.on-st.on-online { color: var(--okFg); }
.on-st.on-away { color: var(--muted); }
.on-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.on-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.on-you { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--accentText); }
.on-empty { padding: 6px; }
.on-foot { font-size: 11px; color: var(--muted); }
@media (max-width: 380px) {
  .phead .on-pill-ph { padding: 0 8px; }
}
/* 761-1180 px (a tablet, a phone on its side): the bar must fit before any script runs (a phone widens its viewport
   for good when the first layout is too wide), so the pill shows "● n" and the gaps are smaller; up to 900 px only
   the emblem stays of the brand (it still links home). shell.js tightens further if needed. */
@media (min-width: 761px) and (max-width: 1180px) {
  .cmdbar { gap: 16px; }
  .on-word { display: none; }
  .on-pill { padding: 0 10px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .cmdbar .brand-word { display: none; }
}
.brand { min-width: 44px; justify-content: center; }        /* emblem alone (above, or .brand-tight): still a 44 px target */

/* ------------------------------------------------------------------ PX.9: an officer's own wall (the upload queue's switch) */
.up-own { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); }
.up-own .switch { flex-shrink: 0; margin-top: 1px; cursor: pointer; }
.up-own-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; line-height: 1.4; }
.up-own-txt b { overflow-wrap: anywhere; }
.up-own.is-warn { border-color: var(--warnFg); }

/* ------------------------------------------------------------------ short screens (P3.1: a phone in landscape). Last in the file on purpose.
   The page always scrolls with the normal document scroll. Below 600 px of height nothing is held at the
   screen's height: full-height blocks become as tall as their content. (dvh above, not vh: on phones vh is
   the height with the browser bars hidden, so a 100vh block is taller than what's on screen.) */
@media (max-height: 600px) {
  .deck, .si-grid, .up-grid { min-height: 0; }
  .up-shot-wrap.is-fit .up-shot { height: auto; width: min(100%, 360px); }
  .sk-row2 { flex: none; }
  .sk-big { min-height: 200px; }
  /* P8: a phone in landscape gets the day inline, in the page's own scroll, not as a bottom sheet */
  .tr-detail.is-open { position: static; max-height: none; overflow: visible; border-radius: 16px; box-shadow: none; border: 1px solid var(--line); }
  .tr-scrim.only-phone { display: none !important; }
  body.tr-noscroll { overflow: visible; }
  /* P9: no box scrolls inside the page on a short screen (the mail preview, the member table grow to their content) */
  .ds-mail, .ds-mtable { max-height: none; overflow: visible; }
  /* P14: the phone's Copy button stays in the flow on a short screen (not held above the pill bar) */
  .msg-copy { position: static; }
}