/* ==========================================================================================
   KHC Message Center — engage.css (2026-08-30)
   Companion to public/engage.js. Loaded AFTER styles.css and mobile.css, so plain selectors
   win cascade ties. Tokens only (the --primary here is the Credence blue override at the end
   of styles.css; gold stays reserved for rewards). Light + dark via tokens; explicit dark
   blocks only where a colour mix needs it. All motion collapses under prefers-reduced-motion.
   NOTHING in this file may touch the station kiosks: no selector targets .water-kiosk,
   #nurseKiosk, .wk-* or .nk-* (the one exception is the token safety-net below, which only
   DEFINES missing variables and changes nothing that was already defined).
   ========================================================================================== */

/* ---- 0 · Token safety net -----------------------------------------------------------------
   Several screens reference variables that were never defined (--accent, --card, --panel,
   --brand, --accent-soft) and silently rendered transparent buttons and invisible outlines
   (water strip-nav hover, grievance filter, the calm-screen "Take the photo" button, payroll
   selected rows, the office picker's current-office ring). Defining them at :root gives every
   such reference a sane value; scoped redefinitions (e.g. the kiosks' own --panel) still win. */
:root {
  --accent: var(--primary);
  --accent-soft: var(--primary-soft);
  --card: var(--surface);
  --panel: var(--surface);
  --brand: var(--primary);
}

/* ==========================================================================================
   1 · GLOBAL COSMETIC PASS
   ========================================================================================== */

/* Buttons & focus: one hover/press/focus language everywhere. */
.btn:hover, .icon-btn:hover, .tab:hover, .uni-card:hover { box-shadow: var(--sh-1); }
.btn, .icon-btn { transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.btn:focus-visible, .icon-btn:focus-visible, .tab:focus-visible, .linkbtn:focus-visible,
.resolve-chip:focus-visible, .mobile-nav button:focus-visible, .lb-head:focus-visible { outline: none; box-shadow: var(--ring); }

/* The alerts bell asked forever (bellpulse ... infinite) — three polite pulses, then still. */
.icon-btn.needs-attn { animation-iteration-count: 3 !important; }

/* Toasts: exit fade + a sane stack cap (the 3 newest show; older ones hide).
   Every producer APPENDS (app.js toast()/toastHtml(), engage.js toastNode()/receipt()),
   so the newest toasts are the LAST children — nth-LAST-child keeps them visible and
   hides the oldest. (nth-child(n+4) did the inverse and could hide the receipt's Undo.) */
.toast { transition: opacity .18s var(--ease), transform .18s var(--ease); }
.toast.leaving { opacity: 0; transform: translateY(-6px); }
.toasts .toast:nth-last-child(n+4) { display: none; }

/* Overdue rows: one firm pulse when rendered, then a steady red rail — never an infinite bounce. */
.msg.overdue { animation: eg-overdue-once .7s var(--ease) 1; box-shadow: inset 3px 0 0 var(--danger); }
@keyframes eg-overdue-once { 0% { transform: translateX(0); } 30% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 100% { transform: translateX(0); } }

/* List rows: hover lift, firmer selection, bold unread, calm entrance for new arrivals. */
.msg { transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.msg:hover { box-shadow: var(--sh-1); }
.msg.selected { background: var(--primary-softer); box-shadow: inset 2px 0 0 var(--primary); }
.msg.eg-unread .who { font-weight: 700; }
.msg.eg-new { animation: eg-newwash 1.2s var(--ease) 1; }
@keyframes eg-newwash { 0% { background: color-mix(in srgb, var(--primary) 14%, transparent); } 100% { background: transparent; } }
.msg.msg-leaving { overflow: hidden; max-height: 0 !important; opacity: 0; transform: translateX(12px);
  padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border-width: 0;
  transition: max-height .24s var(--ease), opacity .2s var(--ease), transform .24s var(--ease), padding .24s var(--ease), margin .24s var(--ease); }

/* Team dock: unread is a colleague, not an emergency — primary tint, 3 breaths, then still. */
.team-dock.has-unread .team-head, .team-dock.attn .team-head {
  background: var(--primary); color: var(--on-primary);
  animation: eg-breathe 1.6s var(--ease) 3;
}
@keyframes eg-breathe { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 40%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 16%, transparent); } }
/* The dock's own glow + the unread badge pulse were infinite too — a few cycles, then still. */
.team-dock.attn, .team-dock.has-unread { animation-iteration-count: 3 !important; }
.team-badge { animation-iteration-count: 6 !important; }

/* Topbar: capitalised role, grouped right cluster, tappable HUD. */
.role-badge { text-transform: capitalize; }
#logoutBtn { margin-left: var(--s3); position: relative; }
#logoutBtn::before { content: ''; position: absolute; left: calc(-1 * var(--s2)); top: 20%; bottom: 20%; width: 1px; background: var(--line-strong); }
.hud { transition: box-shadow var(--dur) var(--ease); }
.hud:hover { box-shadow: var(--sh-1); }

/* XP bar: a caption that says what it is ("112 to Lv 5"). */
.xp-wrap { position: relative; overflow: visible; }
.xp-wrap[data-cap]::after { content: attr(data-cap); position: absolute; left: 0; right: 0; top: 100%; margin-top: 2px;
  font-size: 9px; font-weight: 700; letter-spacing: .02em; color: var(--muted); text-align: center; white-space: nowrap; pointer-events: none; }
.xp-wrap.eg-near .xp-fill { box-shadow: 0 0 6px color-mix(in srgb, var(--primary) 55%, transparent); }

/* Streak pill states: pending (dashed, "not yet today") and at-risk (amber, shield holding). */
.streak-pill.eg-pending { border: 1px dashed color-mix(in srgb, var(--gold) 55%, transparent); color: var(--muted); background: transparent; }
.streak-pill.eg-pending .icon { color: var(--muted); }
.streak-pill.eg-risk { background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: var(--warn); color: var(--warn); }
.streak-pill.eg-risk .icon { color: var(--warn); }

/* Coin pill bloom on a reward. */
.coin-pill { position: relative; }
.coin-pill.eg-bloom::before { content: ''; position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold-2) 60%, transparent) 0%, transparent 70%);
  animation: eg-bloom .7s var(--ease) 1 forwards; pointer-events: none; }
@keyframes eg-bloom { 0% { opacity: 0; transform: scale(.6); } 35% { opacity: .55; } 100% { opacity: 0; transform: scale(1.15); } }

/* Left-rail count chips: bump on change, brief check at zero. */
.tab .count { transition: transform .22s var(--ease), background var(--dur) var(--ease); }
.tab .count.eg-bump { animation: eg-bump .22s var(--ease) 1; }
@keyframes eg-bump { 50% { transform: scale(1.18); } }
.tab .count.eg-zero { background: var(--good); color: #fff; }

/* Frozen headers + zebra for the heavy tables. */
.admin-table thead th, .forms-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; box-shadow: 0 1px 0 var(--line); }
.admin-table tbody tr:nth-child(even), .forms-table tbody tr:nth-child(even) { background: var(--surface-2); }

/* Collapse carets: SVG chevron instead of the raw text glyphs. */
.cc-card.cc-collapsible > .cc-head h3::before,
.cc-card.cc-collapsible.collapsed > .cc-head h3::before,
.wtr-fold > summary::before, .wtr-fold[open] > summary::before { content: ''; width: .85em; height: .85em; display: inline-block; vertical-align: -0.1em;
  background: currentColor; margin-right: 4px; opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transform: rotate(90deg); transition: transform .15s var(--ease); }
.cc-card.cc-collapsible.collapsed > .cc-head h3::before, .wtr-fold:not([open]) > summary::before { transform: rotate(0deg); }

/* AP: restore the token-based warn chip (a late literal override clobbered it app-wide). */
.ap-st-warn { background: color-mix(in srgb, var(--warn) 16%, transparent) !important; color: var(--warn) !important; }

/* Rounds: the admission hue bands were a pastel rainbow — halve their weight. */
.rounds-table tr[style*="--rc-phue"] td { background: hsl(var(--rc-phue) 58% 48% / .07); }

/* CCM: cards must never become unreadably thin. */
.ccm-pgrid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important; }

/* Supplies: hard-coded reds/ambers onto tokens. */
.sup-age.is-warn { color: var(--warn) !important; }
.sup-low, .sup-age.is-late { color: var(--danger) !important; }
.sup-lowrow { background: color-mix(in srgb, var(--danger) 5%, transparent) !important; }

/* Newsletter: stop the perpetual error pulse; calm the shouted chips. */
.nl-err { animation: none !important; }

/* Deleted folder: "deleted by" is bookkeeping, not an alarm wall. */
#list:has(.deleted-banner) .chip-esc { background: var(--surface-3); color: var(--muted); border-color: var(--line); }

/* Water DASHBOARD only: give the unstyled .wtr-table the same bones as .wtr-tbl. */
.wtr-wrap .wtr-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.wtr-wrap .wtr-table th { text-align: left; font-size: var(--t-xs); color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.wtr-wrap .wtr-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
.wtr-wrap .wtr-btn-s, .wtr-wrap .wtr-btn-go { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600; font-size: var(--t-sm); cursor: pointer; }
.wtr-wrap .wtr-btn-go { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* Office picker: a real class for "this is where you were yesterday". */
#officeChoices button.is-current { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Reading pane: bubbles arrive, they don't blink in. */
#dThread .bubble { animation: eg-bubble-in .18s var(--ease) 1; }
@keyframes eg-bubble-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Action bar: the primary action stays reachable; selects read as pills. */
.detail-actions .action-row:has(.btn-good) { position: sticky; bottom: calc(-1 * var(--s4)); background: var(--surface-2);
  padding-bottom: var(--s2); z-index: 2; }
.detail-actions .btn-good { font-size: 15px; font-weight: 650; padding: var(--s3) var(--s5); }

/* ==========================================================================================
   2 · ENGAGE COMPONENTS (.eg-*)
   ========================================================================================== */

/* -- fx layer ------------------------------------------------------------------------------ */
#egFx { position: fixed; inset: 0; pointer-events: none; z-index: 66; overflow: hidden; }
.eg-coin { position: fixed; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-2), var(--gold) 60%, var(--gold-ink));
  border: 1px solid color-mix(in srgb, var(--gold-ink) 50%, transparent); opacity: .95;
  transition: transform .62s cubic-bezier(.2, .7, .2, 1), opacity .62s var(--ease); will-change: transform, opacity; }
.eg-mote { position: fixed; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); filter: blur(.5px);
  animation: eg-mote .9s var(--ease) forwards; }
@keyframes eg-mote { 0% { opacity: 0; transform: translateY(0) scale(.5); } 25% { opacity: .95; } 100% { opacity: 0; transform: translateY(-64px) scale(1.05); } }
.eg-burst { position: fixed; width: 0; height: 0; }
.eg-burst i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  animation: eg-spark .7s ease-out forwards; }
.eg-burst i:nth-child(odd) { background: var(--primary); }
@keyframes eg-spark { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* -- desktop hover quick-actions on inbox rows (round 2.5 — mouse-first) -------------------- */
#list .msg { position: relative; }
.eg-rowact { position: absolute; right: var(--s3); top: 50%; transform: translateY(-50%);
  display: flex; gap: 6px; padding: 3px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(2px);
  box-shadow: var(--sh-2); border: 1px solid var(--line); animation: eg-fadein .12s var(--ease) 1; z-index: 3; }
.eg-ra { display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer;
  padding: 6px 12px; border-radius: var(--r-full); background: var(--surface-2);
  font: 600 12.5px/1 inherit; font-family: inherit; color: var(--ink-soft);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.eg-ra:hover { background: var(--primary-soft); color: var(--primary-ink); }
.eg-ra:focus-visible { outline: none; box-shadow: var(--ring); }
.eg-ra.eg-ra-go { background: var(--good); color: #fff; }
.eg-ra.eg-ra-go:hover { background: color-mix(in srgb, var(--good) 85%, black); color: #fff; }
.eg-ra[disabled] { opacity: .5; cursor: default; }
@media (hover: none), (pointer: coarse), (max-width: 760px) { .eg-rowact { display: none; } }

/* chat reactions: on a mouse, the + reveals on hover instead of sitting in every row ---------- */
@media (hover: hover) and (pointer: fine) {
  .eg-react-add { opacity: 0; transition: opacity var(--dur) var(--ease); }
  .tc-msg:hover + .eg-react-pills .eg-react-add, .eg-react-pills:hover .eg-react-add,
  .eg-react-add:focus-visible { opacity: 1; }
}

/* -- boot greeting + recap pills ----------------------------------------------------------- */
.eg-hello { font-size: 20px; font-weight: 600; color: var(--ink); text-align: center; margin-bottom: var(--s3);
  animation: eg-fadein .22s var(--ease) 1; }
.eg-recap { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; margin: var(--s3) 0 var(--s5); position: relative; z-index: 2; }
.eg-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-soft);
  animation: eg-rise .26s var(--ease) backwards; }
.eg-recap .eg-pill:nth-child(2) { animation-delay: 60ms; } .eg-recap .eg-pill:nth-child(3) { animation-delay: 120ms; }
.eg-pill.lit { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 40%, transparent); color: var(--gold-ink); }
.eg-pill.pending { border-style: dashed; border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.eg-pill.warn { background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: var(--warn); color: var(--warn); }
@keyframes eg-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes eg-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* -- "Your day" card on the office picker --------------------------------------------------- */
.eg-day { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2);
  margin-bottom: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.eg-day-hi { font-size: 18px; font-weight: 650; color: var(--ink); }
.eg-day-date { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.eg-day .eg-recap { justify-content: flex-start; margin-top: 2px; }
.eg-day-y { font-size: var(--t-sm); color: var(--ink-soft); }
.eg-day-start { margin-top: var(--s2); align-self: flex-start; }
.eg-day-mon { border-color: color-mix(in srgb, var(--gold) 35%, transparent); background: linear-gradient(180deg, var(--gold-soft), var(--surface-2) 70%); }

/* -- login greeting + error feel ------------------------------------------------------------ */
.eg-login-hello { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600;
  color: var(--ink-soft); margin: 2px 0 10px; animation: eg-fadein .22s var(--ease) 1; }
.eg-login-hello .icon { color: var(--gold); }
.eg-login-hello.muted { color: var(--muted); }
.eg-login-hello.muted .icon { color: var(--muted); }
.login-card.eg-shake { animation: eg-shake .32s var(--ease) 1; }
@keyframes eg-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 55% { transform: translateX(5px); } 80% { transform: translateX(-3px); } }
.field.eg-error input { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }

/* -- goal ring + progress card -------------------------------------------------------------- */
.eg-goalwrap { display: flex; gap: var(--s4); align-items: center; margin-bottom: var(--s3); }
.eg-goal { position: relative; width: 72px; height: 72px; flex: none; }
.eg-ring-svg .eg-ring-track { stroke: var(--surface-3); }
.eg-ring-svg .eg-ring-fill { stroke: var(--primary); stroke-linecap: round; transition: stroke-dashoffset .5s var(--ease), stroke .3s var(--ease); }
.eg-goal.met .eg-ring-fill, .eg-ring-svg.met .eg-ring-fill { stroke: var(--gold); }
.eg-goal-c { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; align-content: center; flex-wrap: wrap; }
.eg-goal-n { font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.eg-goal-t { font-size: 12px; color: var(--muted); margin-left: 2px; }
.eg-goal-side { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.eg-goal-note { color: var(--muted); font-size: var(--t-sm); line-height: 1.45; }
.eg-goal-note strong { color: var(--good); font-weight: 650; }
.eg-best { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.eg-week { position: relative; height: 4px; background: var(--surface-3); border-radius: var(--r-full); margin-top: 6px; }
.eg-week i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--primary); border-radius: var(--r-full); }
.eg-week span { position: absolute; left: 0; top: 8px; font-size: var(--t-xs); color: var(--muted); white-space: nowrap; }
.eg-week { margin-bottom: 22px; }
.eg-streak.eg-pending .icon { color: var(--muted); }
.eg-streak.eg-risk .icon { color: var(--warn); }

/* badges: the full collection, locked ones as goals */
.eg-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: var(--s3); }
.eg-tile.locked { background: transparent; border: 1px dashed var(--line-strong); color: var(--muted); opacity: .75; }

/* quests */
.eg-q-title { font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: var(--s4) 0 var(--s2); }
.eg-quest { position: relative; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: var(--s2);
  padding: 6px 0 10px; }
.eg-q-tile { width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--surface-3); display: grid; place-items: center; color: var(--ink-soft); }
.eg-quest.done .eg-q-tile { background: var(--gold-soft); color: var(--gold-ink); }
.eg-q-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eg-quest.done .eg-q-label { color: var(--muted); }
.eg-q-n { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.eg-quest.done .eg-q-n { color: var(--gold-ink); }
.eg-q-track { position: absolute; left: 34px; right: 0; bottom: 4px; height: 3px; background: var(--surface-3); border-radius: var(--r-full); overflow: hidden; }
.eg-q-track b { display: block; height: 100%; background: var(--primary); border-radius: var(--r-full); transition: width .3s var(--ease); }
.eg-quest.done .eg-q-track b { background: var(--gold); width: 100% !important; }

/* -- the receipt ---------------------------------------------------------------------------- */
.eg-receipt { position: relative; overflow: hidden; pointer-events: auto; gap: var(--s3); padding-right: var(--s4);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.eg-r-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.eg-r-total { font-size: 16px; font-weight: 700; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.eg-r-items { font-size: 13px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.eg-r-chips { display: flex; gap: 6px; }
.eg-r-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); background: var(--surface-2);
  border: 1px solid var(--line); color: var(--ink-soft); animation: eg-rise .2s var(--ease) 1; white-space: nowrap; }
.eg-r-chip.gold { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 40%, transparent); color: var(--gold-ink); }
.eg-r-undo { border: 0; background: var(--surface-2); border-radius: var(--r-full); padding: 6px 14px; font-weight: 700;
  font-size: var(--t-sm); color: var(--primary); cursor: pointer; min-height: 32px; }
.eg-r-undo:hover { background: var(--primary-soft); }
.eg-r-timer { position: absolute; left: 0; bottom: 0; height: 2px; background: color-mix(in srgb, var(--gold) 55%, transparent);
  width: 100%; animation: eg-timer 10s linear forwards; }
@keyframes eg-timer { from { width: 100%; } to { width: 0; } }

/* kudos + tip toasts */
.toast.eg-kudos { background: var(--gold-soft); color: var(--gold-ink); border-color: color-mix(in srgb, var(--gold) 35%, transparent); }
.toast.eg-tip kbd, .cmdk-item kbd, .eg-kbd, #scOverlay kbd { display: inline-block; padding: 1px 6px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line-strong); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 600; color: var(--ink-soft); }

/* -- completion stamp ------------------------------------------------------------------------ */
.detail.eg-completing #dThread { position: relative; }
.detail.eg-completing #dThread::after { content: ''; position: absolute; inset: 0; z-index: 3;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  -webkit-mask: none; animation: eg-fadein .12s var(--ease) 1; pointer-events: none; }
.detail.eg-completing #dThread::before { content: ''; position: absolute; z-index: 4; left: 50%; top: 40%; width: 64px; height: 64px;
  transform: translate(-50%, -50%); pointer-events: none;
  background: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: eg-stamp .38s var(--ease) 1; }
@keyframes eg-stamp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 45% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 100% { opacity: .95; transform: translate(-50%, -50%) scale(1); } }

/* -- next-up chip ---------------------------------------------------------------------------- */
.eg-next { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--s2); padding: 3px 10px;
  border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; font-weight: 600;
  color: var(--ink-soft); animation: eg-rise .2s var(--ease) 1; }
.eg-next .eg-next-back { font-size: 12px; }

/* -- list count chip + jump pill + cleared state --------------------------------------------- */
.eg-listcount { display: inline-flex; align-items: center; margin-left: var(--s2); padding: 2px 10px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; vertical-align: middle; }
.eg-listcount.zero { background: color-mix(in srgb, var(--good) 14%, transparent); border-color: var(--good); color: var(--good); }
.eg-listcount.eg-roll { animation: eg-bump .3s var(--ease) 1; }
.eg-newpill { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 0; border-radius: var(--r-full);
  background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: var(--t-sm); box-shadow: var(--sh-3); cursor: pointer;
  animation: eg-rise .22s var(--ease) 1; }
.rail-center { position: relative; }
.empty.eg-cleared { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s6) var(--s4); }
.eg-clear-check { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); animation: eg-pop .4s var(--ease) 1; }
.eg-clear-check .icon { width: 24px; height: 24px; }
@keyframes eg-pop { 0% { transform: scale(.5); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.eg-clear-title { font-size: 16px; font-weight: 650; color: var(--ink); }
.eg-clear-tally { font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.eg-clear-next { margin-top: var(--s2); }

/* -- leaderboard alive ----------------------------------------------------------------------- */
#leaderboard .lb-row { transition: transform .32s var(--ease); }
.lb-row.lb-pulse { animation: eg-lbpulse .6s var(--ease) 1; }
@keyframes eg-lbpulse { 0% { background: color-mix(in srgb, var(--gold) 14%, transparent); } 100% { background: transparent; } }
.eg-plus { font-size: 11px; font-weight: 700; color: var(--gold-ink); background: var(--gold-soft); border-radius: var(--r-full);
  padding: 1px 7px; margin-left: 6px; animation: eg-rise .2s var(--ease) 1; flex: none; }
.eg-plus.neg { color: var(--muted); background: var(--surface-3); }
.eg-clap { border: 0; background: transparent; color: var(--muted); width: 26px; height: 26px; border-radius: var(--r-full);
  display: none; place-items: center; cursor: pointer; flex: none; margin-left: 4px; padding: 0; }
.lb-row:hover .eg-clap { display: grid; }
.eg-clap:hover { color: var(--gold-ink); background: var(--gold-soft); }
.eg-clap.sent { display: grid; color: var(--primary); background: var(--primary-soft); }
/* Touch devices (phones AND the 761-1100px tablets where claps are always visible):
   every engage tap target meets the 40px floor. Hover-capable desktops keep the compact sizes. */
@media (hover: none) {
  .eg-clap { display: grid; width: 40px; height: 40px; }
  .eg-seg button { min-height: 40px; padding: 8px 14px; }
  .eg-recog-chip { min-height: 44px; }
  .eg-sheet-x { width: 40px; height: 40px; }
  .eg-newpill { min-height: 40px; }
  /* round two: reaction pills keep their compact look but tap 44px via an expanded hit area;
     picker glyphs and shop buttons grow outright */
  .eg-react-pills { gap: 8px; }
  .eg-react-pill { position: relative; min-height: 28px; }
  .eg-react-pill::after { content: ''; position: absolute; inset: -8px; }
  .eg-react-pick button { width: 44px; height: 44px; }
  .eg-shop-act { min-height: 44px; padding: 8px 16px; }
}

/* -- team pulse feed -------------------------------------------------------------------------- */
.eg-feed { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.eg-feed-title { font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.eg-feed-row { display: flex; align-items: center; gap: var(--s2); padding: 4px 0; font-size: 12px; color: var(--ink-soft); min-width: 0; }
.eg-feed-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eg-feed-coins { color: var(--gold-ink); font-variant-numeric: tabular-nums; flex: none; }
.eg-feed-empty { font-size: 12px; color: var(--muted); }
.eg-dot { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: #fff; background: hsl(var(--h, 200) 40% 52%); }
.eg-dot.big { width: 34px; height: 34px; font-size: 14px; }

/* -- profile popover -------------------------------------------------------------------------- */
.eg-profile { position: fixed; z-index: 80; width: 300px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: var(--s4); animation: eg-rise .18s var(--ease) 1; }
.eg-p-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.eg-p-name { font-weight: 650; color: var(--ink); }
.eg-p-sub { font-size: var(--t-xs); color: var(--muted); }
.eg-p-lvl { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--on-primary); background: var(--primary);
  border-radius: var(--r-full); padding: 3px 10px; flex: none; }
.eg-p-stats { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-soft); margin-bottom: var(--s3); }
.eg-p-stats .icon { color: var(--muted); }
.eg-p-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s3); }
.eg-p-kudos { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 6px; }

/* -- speed ring on Send + credit chip + preview pill ------------------------------------------ */
.reply-send.eg-ringed, .eg-ringed { position: relative; }
.eg-ringed::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(var(--gold) calc(var(--eg-pct, 100) * 1%), var(--surface-3) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 2px; opacity: .85; }
.eg-credit { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full); padding: 3px 10px;
  margin: 4px 0 0 auto; width: fit-content; animation: eg-fadein .18s var(--ease) 1; }
.eg-preview { font-size: 11px; font-weight: 700; background: var(--gold-soft); color: var(--gold-ink); border-radius: var(--r-full);
  padding: 2px 8px; margin-left: 8px; animation: eg-fadein .16s var(--ease) 1; }
.eg-preview.other { background: var(--surface-3); color: var(--muted); font-weight: 600; }
.eg-kbd { margin-left: 8px; opacity: .8; }
.eg-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full); padding: 2px 10px; margin-left: var(--s2); }

/* -- moment cards ------------------------------------------------------------------------------ */
.eg-overlay { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink) 42%, transparent); backdrop-filter: blur(3px);
  animation: eg-fadein .18s var(--ease) 1; }
.eg-overlay.leaving { opacity: 0; transition: opacity .18s var(--ease); }
.eg-moment { position: relative; width: min(460px, 94vw); background: var(--surface); border-radius: var(--r-lg);
  border-top: 4px solid var(--gold); box-shadow: var(--sh-3); padding: var(--s5) var(--s5) var(--s4);
  display: flex; flex-direction: column; align-items: center; gap: var(--s2); text-align: center;
  animation: eg-rise .24s var(--ease) 1; overflow: hidden; }
.eg-m-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--gold-ink); }
.eg-m-tile { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--gold-soft); color: var(--gold-ink);
  display: grid; place-items: center; }
.eg-m-tile .icon { width: 28px; height: 28px; }
.eg-m-title { font-size: var(--t-lg); font-weight: 650; color: var(--ink); }
.eg-m-desc { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.5; max-width: 36ch; }
.eg-m-stats { font-size: 28px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.eg-m-stats .eg-m-gold { color: var(--gold-ink); }
.eg-m-lines { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin: var(--s2) 0; }
.eg-m-line { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ink-soft); }
.eg-m-line .icon { color: var(--gold); flex: none; }
.eg-m-coins { font-size: var(--t-sm); font-weight: 700; color: var(--gold-ink); background: var(--gold-soft);
  border-radius: var(--r-full); padding: 4px 14px; }
.eg-m-actions { margin-top: var(--s2); }
.eg-m-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--gold) 50%, transparent);
  animation: eg-timer 6s linear forwards; }

/* -- phone / tablet strip + sheet -------------------------------------------------------------- */
.eg-strip { display: flex; align-items: center; gap: var(--s4); width: 100%; border: 0; border-bottom: 1px solid var(--line);
  background: var(--surface-2); padding: 7px var(--s4); font: inherit; cursor: pointer; }
.eg-strip b { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.eg-s-goal { display: inline-flex; align-items: center; gap: 6px; }
.eg-s-streak, .eg-s-coins { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.eg-s-streak .icon { color: var(--gold); width: 14px; height: 14px; }
.eg-s-streak.eg-pending .icon { color: var(--muted); }
.eg-s-streak.eg-risk .icon { color: var(--warn); }
.eg-s-coins .coin { width: 13px; height: 13px; }
.eg-s-more { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--primary); }
.eg-sheet-wrap { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--ink) 38%, transparent);
  display: flex; align-items: flex-end; justify-content: center; animation: eg-fadein .16s var(--ease) 1; }
.eg-sheet { width: min(560px, 100vw); max-height: 84vh; overflow-y: auto; background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--sh-3); padding: var(--s3) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom, 0px));
  animation: eg-sheetin .24s var(--ease) 1; }
@keyframes eg-sheetin { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.eg-sheet-grab { display: block; width: 38px; height: 4px; border-radius: var(--r-full); background: var(--line-strong); margin: 2px auto var(--s3); }
.eg-sheet-head { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-md); margin-bottom: var(--s3); }
.eg-sheet-head b { font-weight: 650; }
.eg-sheet-x { margin-left: auto; }
.eg-sheet-goal { display: flex; align-items: center; gap: var(--s4); font-size: var(--t-md); margin-bottom: var(--s2); }
.eg-sheet-goal b { font-size: 18px; font-variant-numeric: tabular-nums; }
.eg-sheet-streak { font-size: var(--t-sm); color: var(--ink-soft); display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.eg-sheet-streak .icon { color: var(--gold); }
.eg-sheet-prefs { margin-top: var(--s3); }
.eg-cal { display: flex; gap: 5px; flex-wrap: wrap; }
.eg-cal-d { width: 14px; height: 14px; border-radius: 4px; background: var(--surface-3); }
.eg-cal-d.kept { background: var(--primary); }
.eg-cal-d.off { background: transparent; border: 1px dashed var(--line); }

/* phone nav mirror counts */
.mobile-nav button { position: relative; }
.eg-navcount { position: absolute; top: 4px; right: 10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-full);
  background: var(--primary); color: var(--on-primary); font-size: 10px; font-weight: 700; display: grid; place-items: center;
  font-variant-numeric: tabular-nums; }

/* -- manager cockpit --------------------------------------------------------------------------- */
.eg-brief { margin: var(--s4) var(--s4) 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden; }
.eg-brief-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4); background: var(--primary-softer); border-bottom: 1px solid var(--line); }
.eg-brief-head b { font-size: var(--t-md); font-weight: 650; color: var(--ink); }
.eg-brief-head span { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.eg-brief-chips { display: flex; gap: var(--s2); flex-wrap: wrap; padding: var(--s3) var(--s4) 0; }
.eg-brief-rows { padding: var(--s2) var(--s4) var(--s3); display: flex; flex-direction: column; }
.eg-brief-row { display: flex; align-items: center; gap: var(--s2); padding: 7px 0; font-size: var(--t-sm); color: var(--ink-soft);
  border-bottom: 1px solid var(--line); }
.eg-brief-row:last-child { border-bottom: 0; }
.eg-brief-row .icon { color: var(--muted); flex: none; }
.eg-brief-row .linkbtn { margin-left: auto; flex: none; }
.eg-goalbar-wrap { padding: 0 var(--s4) var(--s3); }
.eg-goalbar { height: 8px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.eg-goalbar i { display: block; height: 100%; background: var(--primary); border-radius: var(--r-full); transition: width .5s var(--ease); }
.eg-goalbar.met i { background: var(--gold); }
.eg-goalbar-label { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--muted); margin-top: 6px;
  font-variant-numeric: tabular-nums; }
.eg-coachwrap { padding: 0 var(--s4) var(--s3); }
.eg-coach { display: flex; align-items: center; gap: var(--s2); padding: 7px 0; font-size: var(--t-sm); border-bottom: 1px solid var(--line); }
.eg-coach:last-child { border-bottom: 0; }
.eg-coach b { color: var(--ink); flex: none; }
.eg-coach-h { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eg-coach-acts { margin-left: auto; display: flex; gap: var(--s2); flex: none; }
.eg-verdict { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--r-full); padding: 2px 8px; background: var(--surface-3); color: var(--muted); }
.eg-verdict.strong { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.eg-verdict.steady { background: var(--primary-soft); color: var(--primary-ink); }
.eg-verdict.light, .eg-verdict.quiet { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.eg-verdict.concerning { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.eg-recog-pop { position: fixed; z-index: 95; width: 290px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: var(--s4); animation: eg-rise .16s var(--ease) 1; }
.eg-recog-t { display: flex; align-items: center; gap: 6px; font-weight: 650; color: var(--ink); margin-bottom: var(--s3); }
.eg-recog-t .icon { color: var(--gold); }
.eg-recog-chips { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s2); }
.eg-recog-chip { text-align: left; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-md);
  padding: 8px 12px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.eg-recog-chip:hover { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 40%, transparent); color: var(--gold-ink); }
.eg-recog-note { margin-bottom: var(--s2); }
.eg-recog-acts { display: flex; justify-content: flex-end; }

/* -- university progress ----------------------------------------------------------------------- */
.eg-uni-count { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--ink-soft);
  padding: var(--s2) var(--s4); }
.eg-uni-count .icon { color: var(--good); }
.eg-next-chapter { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--s3); justify-content: center;
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--sh-2); padding: var(--s3) var(--s4);
  font-size: var(--t-sm); color: var(--ink-soft); animation: eg-rise .22s var(--ease) 1; z-index: 4; }
.eg-next-chapter .icon { color: var(--good); }

/* -- what's new dot + preferences --------------------------------------------------------------- */
#tutorialBtn { position: relative; }
.eg-dot-new { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 2px var(--surface); }
.eg-prefs .eg-pref-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-soft); }
.eg-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full); padding: 2px; flex: none; }
.eg-seg button { border: 0; background: transparent; border-radius: var(--r-full); padding: 4px 12px; font-size: 12px; font-weight: 600;
  color: var(--muted); cursor: pointer; }
.eg-seg button.on { background: var(--primary); color: var(--on-primary); }
.eg-pref-note { font-size: var(--t-xs); color: var(--muted); padding-top: var(--s3); line-height: 1.5; }

/* ==========================================================================================
   2b · ROUND TWO COMPONENTS (swipe · reactions · Spark Shop · AP/Rounds strips · CCM pop)
   ========================================================================================== */

/* -- R1 · swipe actions on phone inbox rows ---------------------------------------------------
   Phones only (engage.js also gates on matchMedia(max-width:760px)); everything lives inside
   this media block so no desktop surface ever sees a swipe style. Contract with engage.js:
   · the row being dragged gets .eg-swiping and a --eg-dx custom property (px, signed);
   · the underlay is a SIBLING inserted before the row inside #list — JS sets its inline
     top/height from the row's offsetTop/offsetHeight (offsetParent is #list, made relative
     below), so it sits exactly under the row while the row itself translates above it;
   · right-swipe (dx>0) reveals .eg-swipe-resolve, .eg-swipe-open (sage, label at the left edge),
     left-swipe (dx<0) reveals .eg-swipe-claim (primary, label at the right edge);
   · past the 96px commit point JS adds .armed (icon grows, tint firms up);
   · release short of commit → .eg-swipe-return springs the row home;
   · a committed row exits via .eg-swipe-out-r / .eg-swipe-out-l, then the list repaints. */
@media (max-width: 760px) {
  #list { position: relative; }
  .msg.eg-swiping { transform: translateX(var(--eg-dx, 0px)); transition: none;
    position: relative; z-index: 2; touch-action: pan-y; will-change: transform; }
  .msg.eg-swipe-return { transform: translateX(0); position: relative; z-index: 2;
    transition: transform .3s cubic-bezier(.2, .9, .25, 1.18); }
  .msg.eg-swipe-out-r, .msg.eg-swipe-out-l { position: relative; z-index: 2; opacity: 0;
    transition: transform .22s var(--ease), opacity .22s var(--ease); }
  .msg.eg-swipe-out-r { transform: translateX(106%); }
  .msg.eg-swipe-out-l { transform: translateX(-106%); }
  .eg-swipe-underlay { position: absolute; left: 0; right: 0; z-index: 1; overflow: hidden;
    display: flex; align-items: center; gap: 8px; border-radius: var(--r-md);
    font-size: var(--t-sm); font-weight: 700; letter-spacing: .01em; pointer-events: none; }
  .eg-swipe-underlay .icon { width: 20px; height: 20px; flex: none; transition: transform .14s var(--ease); }
  .eg-swipe-resolve, .eg-swipe-open { background: color-mix(in srgb, var(--good) 82%, var(--surface));
    color: var(--on-primary); justify-content: flex-start; padding-left: var(--s4); }
  .eg-swipe-claim { background: color-mix(in srgb, var(--primary) 82%, var(--surface));
    color: var(--on-primary); justify-content: flex-end; padding-right: var(--s4); }
  .eg-swipe-resolve.armed, .eg-swipe-open.armed, .eg-swipe-resolve.is-armed, .eg-swipe-open.is-armed { background: var(--good); }
  .eg-swipe-claim.armed { background: var(--primary); }
  .eg-swipe-underlay.armed .icon { transform: scale(1.18); }
}

/* -- R2 · reaction pills + picker (team chat) -------------------------------------------------
   Pills render in a row right under a bubble (JS inserts the container after the .tc-msg it
   belongs to, inside the same flex column, so .me / .them alignment mirrors the bubble). */
.eg-react-pills { display: flex; gap: 4px; flex-wrap: wrap; margin: -2px 0 2px; max-width: 80%; }
.eg-react-pills.me { align-self: flex-end; justify-content: flex-end; }
.eg-react-pills.them { align-self: flex-start; }
.eg-react-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; min-height: 22px;
  border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface-2);
  font-size: 11px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums;
  cursor: pointer; animation: eg-rise .18s var(--ease) 1; }
.eg-react-pill .icon { width: 13px; height: 13px; color: var(--primary); }
.eg-react-pill:hover { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.eg-react-pill:focus-visible { outline: none; box-shadow: var(--ring); }
.eg-react-pill.mine { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 38%, transparent); color: var(--primary-ink); }
.eg-react-pill.eg-tickle { animation: eg-bump .3s var(--ease) 1; }
/* the 4-glyph picker: JS positions it (position:fixed) beside the bubble, never over the composer */
.eg-react-pick { position: fixed; z-index: 96; display: flex; gap: 2px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full);
  box-shadow: var(--sh-3); animation: eg-rise .16s var(--ease) 1; }
.eg-react-pick button { border: 0; background: transparent; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-soft); cursor: pointer; padding: 0; }
.eg-react-pick button:hover { background: var(--primary-soft); color: var(--primary); }
.eg-react-pick button:focus-visible { outline: none; box-shadow: var(--ring); }
.eg-react-pick button.on { background: var(--primary-soft); color: var(--primary-ink); }
.eg-react-pick .icon { width: 18px; height: 18px; }

/* -- R3 · the Spark Shop ----------------------------------------------------------------------
   Lives inside the My-progress sheet / Preferences. Spending is a separate derived balance;
   the copy beside the number says so — nothing here may imply levels or boards can drop. */
.eg-shop { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.eg-shop-title { font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s2); display: flex; align-items: center; gap: 6px; }
.eg-shop-title .icon { width: 13px; height: 13px; color: var(--gold); }
.eg-shop-bal { display: flex; align-items: baseline; gap: 6px; font-size: var(--t-sm); color: var(--ink-soft); }
.eg-shop-bal b { font-size: 16px; font-weight: 700; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.eg-shop-note { font-size: var(--t-xs); color: var(--muted); line-height: 1.5; margin: 2px 0 var(--s3); }
.eg-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--s2); }
.eg-shop-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--s3) var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); text-align: center; }
.eg-shop-item.owned { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.eg-shop-item.equipped { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.eg-shop-swatch { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-3);
  display: grid; place-items: center; color: var(--ink-soft); margin: 4px; }
.eg-shop-swatch .icon { width: 16px; height: 16px; }
.eg-shop-label { font-size: 12px; font-weight: 650; color: var(--ink); }
.eg-shop-cost { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.eg-shop-cost .coin { width: 12px; height: 12px; }
.eg-shop-item.short .eg-shop-cost { color: var(--muted); }
.eg-shop-owned-tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--good); }
.eg-shop-act { border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-full);
  padding: 4px 14px; min-height: 28px; font-size: 12px; font-weight: 700; color: var(--primary); cursor: pointer; }
.eg-shop-act:hover { background: var(--primary-soft); }
.eg-shop-act:focus-visible { outline: none; box-shadow: var(--ring); }
.eg-shop-act.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.eg-shop-act.primary:hover { background: var(--primary-hover); }
.eg-shop-act[disabled] { opacity: .55; cursor: default; }
.eg-shop-confirm { display: flex; gap: 6px; align-items: center; justify-content: center; }
.eg-shop-err { font-size: var(--t-xs); color: var(--warn); line-height: 1.4; }

/* cosmetic RINGS — worn by your initials dot (.eg-dot) and rank presence anywhere it appears.
   Colour rides a custom property so the dark blocks below can restate every hue for the dimmer
   ground. The gap ring uses --surface so it reads as a halo, not a border. */
.eg-ring-sage { --eg-ring-c: var(--good); }
.eg-ring-violet { --eg-ring-c: var(--tint-violet); }
.eg-ring-amber { --eg-ring-c: var(--tint-amber); }
.eg-ring-rose { --eg-ring-c: var(--tint-rose); }
.eg-ring-sage, .eg-ring-violet, .eg-ring-amber, .eg-ring-rose {
  box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3.5px var(--eg-ring-c); }
/* aurora: a conic-gradient halo (box-shadow can't gradient) — masked to a ring, no animation */
.eg-ring-aurora { position: relative; }
.eg-ring-aurora::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 210deg, var(--tint-teal), var(--tint-violet), var(--tint-rose), var(--gold-2), var(--tint-teal));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

/* profile FLAIR — a small icon beside a name; purely decorative, never a status signal */
.eg-flair { display: inline-flex; align-items: center; vertical-align: -0.12em; margin-left: 4px; flex: none;
  color: var(--gold-ink); }
.eg-flair .icon { width: 13px; height: 13px; }
.eg-flair.f-sparkle { color: var(--gold); }
.eg-flair.f-trophy { color: var(--gold-ink); }
.eg-flair.f-heartHandshake { color: var(--tint-rose); }

/* -- R4/R5 · AP + Rounds strips (display-only, zero coins) ------------------------------------ */
.eg-ap-strip, .eg-rounds-strip { display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: 6px var(--s4); border-bottom: 1px solid var(--line); background: var(--surface-2);
  font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.eg-ap-strip b, .eg-rounds-strip b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.eg-ap-strip .icon, .eg-rounds-strip .icon { width: 14px; height: 14px; color: var(--muted); flex: none; }
.eg-ap-track { flex: 1 1 60px; min-width: 48px; max-width: 220px; height: 3px; margin-left: auto;
  background: var(--surface-3); border-radius: var(--r-full); overflow: hidden; }
.eg-ap-track i { display: block; height: 100%; background: var(--good); border-radius: var(--r-full);
  transition: width .4s var(--ease); }
/* filed flash: a half-second sage wash over the AP form column (parent gets position:relative from JS if needed) */
.eg-filed-flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: color-mix(in srgb, var(--good) 12%, transparent); opacity: 0;
  animation: eg-filedflash .5s var(--ease) 1; }
@keyframes eg-filedflash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
/* rounds billed: one sage wash across the row, then still */
tr.eg-row-flash > td { animation: eg-rowflash .9s var(--ease) 1; }
@keyframes eg-rowflash { 0% { background-color: color-mix(in srgb, var(--good) 16%, transparent); } 100% { background-color: transparent; } }

/* -- R6 · CCM goal pop (reused wherever a goal line is crossed) -------------------------------- */
.eg-goal-pop { animation: eg-goalpop .6s var(--ease) 1; }
@keyframes eg-goalpop {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 24%, transparent); }
  40% { transform: scale(1.015); box-shadow: 0 0 0 8px color-mix(in srgb, var(--good) 12%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 12px transparent; } }
.eg-countup { font-variant-numeric: tabular-nums; }

/* ==========================================================================================
   3 · RESPONSIVE
   ========================================================================================== */
/* The strip exists exactly where the right rail does not (tablet + phone). */
.eg-strip { display: none; }
@media (max-width: 1100px) { .eg-strip { display: flex; } }

@media (max-width: 760px) {
  /* topbar was overflowing 432px of controls into a 390px screen */
  .topbar .icon-btn { width: 34px; height: 34px; }
  .topbar { gap: 4px; }
  #logoutBtn { margin-left: var(--s2); }
  /* receipts + moment cards sized for thumbs */
  .eg-receipt { flex-wrap: wrap; max-width: 94vw; }
  .eg-r-items { white-space: normal; }
  .eg-r-undo { min-height: 44px; padding: 8px 16px; }
  .eg-m-actions .btn { min-height: 44px; }
  .eg-next { display: flex; margin: var(--s2) var(--s3) 0; }
  .eg-profile, .eg-recog-pop { left: 50% !important; transform: translateX(-50%); width: min(340px, 94vw); }
  /* sticky primary action row breathes above the home bar */
  .detail-actions .action-row:has(.btn-good) { padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom, 0px)); }
  .eg-clap { width: 40px; height: 40px; }
  /* the count chip wrapped to a lonely pill under the list title on phones; the strip
     right below already shows progress and the rail badge already shows the count */
  .eg-listcount { display: none; }
}

/* Desktop: the My-progress / Preferences sheet is an anchored popover under the HUD,
   not a phone bottom drawer sliding up the middle of a 27-inch monitor. */
@media (min-width: 761px) {
  .eg-sheet-wrap { align-items: flex-start; justify-content: flex-end; padding: 60px 12px 0 0; background: transparent; }
  .eg-sheet { width: 360px; border-radius: var(--r-lg); max-height: 82vh;
    box-shadow: var(--sh-3); border: 1px solid var(--line); animation: eg-rise .18s var(--ease) 1; }
}

/* ==========================================================================================
   4 · DARK-THEME TOUCH-UPS (tokens carry almost everything)
   ========================================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .eg-dot { color: #0e1815; }
  :root:not([data-theme="light"]) .eg-overlay { background: rgba(0, 0, 0, .55); }
  /* round two */
  :root:not([data-theme="light"]) .eg-swipe-resolve, :root:not([data-theme="light"]) .eg-swipe-open, :root:not([data-theme="light"]) .eg-swipe-claim { color: var(--bg); }
  :root:not([data-theme="light"]) .eg-ring-sage { --eg-ring-c: color-mix(in srgb, var(--good) 86%, white); }
  :root:not([data-theme="light"]) .eg-ring-violet { --eg-ring-c: color-mix(in srgb, var(--tint-violet) 86%, white); }
  :root:not([data-theme="light"]) .eg-ring-amber { --eg-ring-c: color-mix(in srgb, var(--tint-amber) 86%, white); }
  :root:not([data-theme="light"]) .eg-ring-rose { --eg-ring-c: color-mix(in srgb, var(--tint-rose) 86%, white); }
  :root:not([data-theme="light"]) .eg-ring-aurora::after {
    background: conic-gradient(from 210deg, var(--tint-teal), var(--tint-violet), var(--tint-rose), var(--gold-2), var(--tint-teal)); }
}
:root[data-theme="dark"] .eg-dot { color: #0e1815; }
:root[data-theme="dark"] .eg-overlay { background: rgba(0, 0, 0, .55); }
/* round two (forced-dark twins of the block above) */
:root[data-theme="dark"] .eg-swipe-resolve, :root[data-theme="dark"] .eg-swipe-open, :root[data-theme="dark"] .eg-swipe-claim { color: var(--bg); }
:root[data-theme="dark"] .eg-ring-sage { --eg-ring-c: color-mix(in srgb, var(--good) 86%, white); }
:root[data-theme="dark"] .eg-ring-violet { --eg-ring-c: color-mix(in srgb, var(--tint-violet) 86%, white); }
:root[data-theme="dark"] .eg-ring-amber { --eg-ring-c: color-mix(in srgb, var(--tint-amber) 86%, white); }
:root[data-theme="dark"] .eg-ring-rose { --eg-ring-c: color-mix(in srgb, var(--tint-rose) 86%, white); }
:root[data-theme="dark"] .eg-ring-aurora::after {
  background: conic-gradient(from 210deg, var(--tint-teal), var(--tint-violet), var(--tint-rose), var(--gold-2), var(--tint-teal)); }

/* ==========================================================================================
   5 · REDUCED MOTION — every engage animation collapses to (at most) a quick fade
   ========================================================================================== */
@media (prefers-reduced-motion: reduce) {
  .eg-rowact { animation: none !important; }
  .eg-ap-strip, .eg-rounds-strip, .eg-filed-flash, .eg-row-flash, .eg-swipe-underlay, .eg-react-pick { animation: none !important; transition: none !important; }
  .msg.overdue, .msg.eg-new, .msg.msg-leaving,
  .eg-hello, .eg-pill, .eg-r-chip, .eg-newpill, .eg-clear-check,
  .eg-coin, .eg-mote, .eg-burst i, .coin-pill.eg-bloom::before,
  .lb-row.lb-pulse, .eg-plus, .eg-preview, .eg-credit, .eg-chip, .eg-next,
  .eg-moment, .eg-overlay, .eg-sheet, .eg-profile, .eg-recog-pop, .eg-next-chapter,
  .login-card.eg-shake, .team-dock.has-unread .team-head, .team-dock.attn .team-head,
  .detail.eg-completing #dThread::before, .detail.eg-completing #dThread::after,
  .tab .count.eg-bump, .eg-listcount.eg-roll { animation: none !important; }
  .msg, .msg.msg-leaving, .eg-ring-svg .eg-ring-fill, .eg-q-track b, .eg-goalbar i,
  #leaderboard .lb-row, .toast, .eg-week i { transition: none !important; }
  .eg-r-timer, .eg-m-bar { animation-duration: 0.001s !important; opacity: 0; }
  /* round two: swipes jump instead of springing, flashes/pops/pills go still.
     .eg-filed-flash rests at opacity:0, so killing its animation leaves nothing behind. */
  .eg-react-pill, .eg-react-pick, .eg-react-pill.eg-tickle,
  .eg-filed-flash, tr.eg-row-flash > td, .eg-goal-pop { animation: none !important; }
  .msg.eg-swiping, .msg.eg-swipe-return, .msg.eg-swipe-out-r, .msg.eg-swipe-out-l,
  .eg-swipe-underlay .icon, .eg-ap-track i, .eg-shop-act { transition: none !important; }
}

/* ==========================================================================================
   6 · SCROLLBARS YOU CAN GRAB — the floating pill
   Owner 2026-08-31, in order: "people are using PCs and mouses, scrolling is really difficult —
   make scroll bars more obvious for people who just have basic mouses with no scrolling" → "looks
   a little dated … premium, nothing cheap or dated" → "make them blue so it goes with our colour
   scheme" → "looks outdated again". The lesson across the four versions: ARROWS AND A VISIBLE
   TRACK are what read as a 2000s operating-system control, whatever the colour. Every premium app
   (Gmail, Notion, Slack, macOS) draws only a floating rounded pill — no track, no arrows, inset
   from the corners — so that is the design: a 16px gutter (the whole gutter is the hit area; a
   wheel-less mouse drags the pill or clicks above/below it to jump a page), a Credence-blue pill
   that is soft at rest, full blue when the mouse is over that scroller, thicker under the cursor
   and the theme's pressed blue while dragging.
   Why anything is needed at all: styles.css:169 sets EVERY scrollbar to `thin` — a 6px sliver on a
   transparent track — and in Chrome/Edge 121+ a non-auto `scrollbar-width` makes the browser IGNORE
   ::-webkit-scrollbar styling altogether (PCs got Windows 11's hairline bar).
   Scope: mouse-driven devices only — (hover: hover) and (pointer: fine) — so phones, tablets and the
   station iPads keep their native overlay bars; kiosk bodies are excluded a second time by class.
   Chrome/Edge/Safari take the ::-webkit-* rules; Firefox has no such pseudo-elements and takes the
   standard-property fallback at the end. Every selector is its own rule on purpose: a browser that
   cannot parse one drops only that one.
   ========================================================================================== */
@media (hover: hover) and (pointer: fine) {
  :root {
    --sb-size: 16px;
    --sb-thumb: color-mix(in srgb, var(--primary) 58%, var(--surface));   /* the pill at rest — Credence blue, softened into the card */
    --sb-thumb-hover: var(--primary);                                      /* full Credence blue while the mouse is over that scroller */
    --sb-thumb-active: var(--primary-hover, var(--primary));               /* the theme's pressed blue while dragging */
  }
  /* 6a · Reset the app-wide `thin` (styles.css:169 and .rail-left) so Chromium honours the
     ::-webkit rules below — the standard properties win over them whenever they are non-auto. */
  body:not(.water-kiosk):not(.provider-kiosk) { scrollbar-width: auto; scrollbar-color: auto; }
  body:not(.water-kiosk):not(.provider-kiosk) * { scrollbar-width: auto; scrollbar-color: auto; }
  html:not(:has(body.water-kiosk)):not(:has(body.provider-kiosk)) { scrollbar-width: auto; scrollbar-color: auto; }

  /* 6b · The gutter: 16px of the card itself — no track, no channel, no edge, no corner piece. */
  body:not(.water-kiosk):not(.provider-kiosk) *::-webkit-scrollbar { width: var(--sb-size); height: var(--sb-size); background: transparent; }
  body:not(.water-kiosk):not(.provider-kiosk)::-webkit-scrollbar { width: var(--sb-size); height: var(--sb-size); background: transparent; }
  html:not(:has(body.water-kiosk)):not(:has(body.provider-kiosk))::-webkit-scrollbar { width: var(--sb-size); height: var(--sb-size); background: transparent; }
  body:not(.water-kiosk):not(.provider-kiosk) *::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }            /* inset the pill's travel from the card's rounded corners */
  body:not(.water-kiosk):not(.provider-kiosk) *::-webkit-scrollbar-track:horizontal { margin: 0 8px; }
  body:not(.water-kiosk):not(.provider-kiosk) *::-webkit-scrollbar-corner { background: transparent; }
  /* No arrows, on any OS — an explicit none is what keeps Windows from adding its own. */
  body:not(.water-kiosk):not(.provider-kiosk) *::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

  /* 6c · The pill: 10px wide floating in the 16px gutter (the whole gutter is the hit area), never
     shorter than 56px; 12px and full blue under the cursor; the pressed blue while dragging. */
  body:not(.water-kiosk):not(.provider-kiosk) *::-webkit-scrollbar-thumb { background-color: var(--sb-thumb); background-clip: padding-box; border: 3px solid transparent; border-radius: 999px; min-height: 56px; min-width: 56px; }
  body:not(.water-kiosk):not(.provider-kiosk) *:hover::-webkit-scrollbar-thumb { background-color: var(--sb-thumb-hover); }
  body:not(.water-kiosk):not(.provider-kiosk) *::-webkit-scrollbar-thumb:hover { background-color: var(--sb-thumb-hover); border-width: 2px; }
  body:not(.water-kiosk):not(.provider-kiosk) *::-webkit-scrollbar-thumb:active { background-color: var(--sb-thumb-active); border-width: 2px; }

  /* 6c′ · Arrow-driven carousels hide their bar on purpose (buttons do the scrolling); the reset
     above must not expose them. */
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-strip-scroll { scrollbar-width: none; }
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-strip-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

  /* 6d · Firefox: no ::-webkit pseudo-elements — the full-size native bar in our blue, no track. */
  @supports not selector(::-webkit-scrollbar) {
    body:not(.water-kiosk):not(.provider-kiosk) { scrollbar-width: auto; scrollbar-color: var(--sb-thumb) transparent; }
    body:not(.water-kiosk):not(.provider-kiosk) * { scrollbar-width: auto; scrollbar-color: var(--sb-thumb) transparent; }
  }
}

/* ==========================================================================================
   7 · NOTHING SCROLLS SIDEWAYS
   Owner 2026-08-31: "I don't want anything to have a side scroll — compress or adjust anything to
   fit so it doesn't need to be side-scrolled to see the whole screen." Three causes were found:
   (1) the reading pane's width formula was 8px short — `calc(100vw - 616px)` while the row it
       must fit beside is 624px (16+256+16+320+16) — so on any screen under ~1470px the page was
       8px wider than the window the moment a message was open (the top bar's last button was
       clipped);
   (2) wide tables that DECLARE they will not fit — hard `min-width`s (the water log at 1560px, the
       supplies catalogue at 780px, the roles matrix, the AI-cost table), a rounds sheet pinned to a
       computed pixel width, and `white-space: nowrap` on whole tables — each sitting in a wrapper
       whose `overflow-x: auto` was the plan;
   (3) long unbreakable strings (invoice numbers, URLs, emails) in text cells.
   The policy below: every table inside one of those wrappers shrinks to the wrapper (no minimum
   width, no pixel pins), headers and text cells wrap, short numeric cells stay on one line, and
   type/padding step down on smaller desktops. The wrappers keep `overflow-x: auto` only as a last
   resort. Desktop and tablet only (≥761px): phones have their own layouts in mobile.css.
   ========================================================================================== */
@media (min-width: 1101px) {
  /* (1) 624 = .body padding 16 + rail 256 + gap 16 + list floor 320 + padding 16. */
  .app { --reader-w: min(58vw, calc(100vw - 624px)); }
}
@media (min-width: 761px) {
  /* (2a) Tables fit their wrapper. Selector specificity (0,3,x) beats every `.x-table { min-width }`
     rule in styles.css without !important; the two !important below beat INLINE pixel widths. */
  body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap table, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap table, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap table, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap table, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap table, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll table, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap table, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap table, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap table, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll table, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll table, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll table, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap table, body:not(.water-kiosk):not(.provider-kiosk) .docs-scroll table { width: 100% !important; min-width: 0 !important; max-width: 100%; table-layout: auto !important; }
  body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap col, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap col, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap col, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap col, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap col, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll col, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap col, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap col, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap col, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll col, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll col, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll col, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap col, body:not(.water-kiosk):not(.provider-kiosk) .docs-scroll col { width: auto !important; }
  /* (2b) Headers and text cells wrap at natural points (spaces, hyphens, slashes are not break
     points) and a token splits only when it is wider than its whole column — `break-word`, not
     `anywhere`: the latter let dates and prices shatter ("08/31/2 026") because it tells the layout
     every column can shrink to one glyph. Buttons and chips never wrap. */
  body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll th, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap th, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll th, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll th, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap td, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap td, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap td, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap td, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap td, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap td, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll td, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap td, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap td, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap td, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll td, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll td, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll td, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap td, body:not(.water-kiosk):not(.provider-kiosk) .docs-scroll th, body:not(.water-kiosk):not(.provider-kiosk) .docs-scroll td { white-space: normal; overflow-wrap: break-word; }
  body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap td .btn, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap td .btn, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap td .btn, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap td .btn, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap td .btn, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap td .btn, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll td .btn, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap td .btn, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap td .btn, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap td .btn, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll td .btn, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll td .btn, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll td .btn, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap td .btn, body:not(.water-kiosk):not(.provider-kiosk) .docs-scroll td .btn { white-space: nowrap; }   /* chips may wrap onto two lines when a column is tight */
  /* …but short numeric / date / action cells read better on one line and are never the culprit. */
  body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap .ap-num, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap .ap-num, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap .ap-num, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap .ap-num, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap .ap-num, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap .ap-num, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll .ap-num, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap .ap-num, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap .ap-num, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap .ap-num, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll .ap-num, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll .ap-num, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .ap-num, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap .ap-num, body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap .ccm-num, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap .ccm-num, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap .ccm-num, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap .ccm-num, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap .ccm-num, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap .ccm-num, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll .ccm-num, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap .ccm-num, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap .ccm-num, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap .ccm-num, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll .ccm-num, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll .ccm-num, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .ccm-num, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap .ccm-num, body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap .rc-ro, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap .rc-ro, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap .rc-ro, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap .rc-ro, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap .rc-ro, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap .rc-ro, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll .rc-ro, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap .rc-ro, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap .rc-ro, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap .rc-ro, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll .rc-ro, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll .rc-ro, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .rc-ro, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap .rc-ro, body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap .num, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap .num, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap .num, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap .num, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap .num, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap .num, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll .num, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap .num, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap .num, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap .num, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll .num, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll .num, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .num, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap .num, body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap .rc-um-num, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap .rc-um-num, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap .rc-um-num, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap .rc-um-num, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap .rc-um-num, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap .rc-um-num, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll .rc-um-num, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap .rc-um-num, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap .rc-um-num, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap .rc-um-num, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll .rc-um-num, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll .rc-um-num, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .rc-um-num, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap .rc-um-num, body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap .sup-rowact, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap .sup-rowact, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap .sup-rowact, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap .sup-rowact, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap .sup-rowact, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap .sup-rowact, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll .sup-rowact, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap .sup-rowact, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap .sup-rowact, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap .sup-rowact, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll .sup-rowact, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll .sup-rowact, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .sup-rowact, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap .sup-rowact, body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap .rc-rowactions, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap .rc-rowactions, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap .rc-rowactions, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap .rc-rowactions, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap .rc-rowactions, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap .rc-rowactions, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll .rc-rowactions, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap .rc-rowactions, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap .rc-rowactions, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap .rc-rowactions, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll .rc-rowactions, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll .rc-rowactions, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .rc-rowactions, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap .rc-rowactions, body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap .ai-ctl, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap .ai-ctl, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap .ai-ctl, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap .ai-ctl, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap .ai-ctl, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap .ai-ctl, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll .ai-ctl, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap .ai-ctl, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap .ai-ctl, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap .ai-ctl, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll .ai-ctl, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll .ai-ctl, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .ai-ctl, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap .ai-ctl, body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap .apv-memocell, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap .apv-memocell, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap .apv-memocell, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap .apv-memocell, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap .apv-memocell, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap .apv-memocell, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll .apv-memocell, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap .apv-memocell, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap .apv-memocell, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap .apv-memocell, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll .apv-memocell, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll .apv-memocell, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .apv-memocell, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap .apv-memocell, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap .nw, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap td.n { white-space: nowrap; overflow-wrap: normal; }
  /* …except two rounds cells that are read-only but NOT short: Dates Of Service lists every
     rounded day as "MM/DD/YYYY : code" (a long stay is a dozen pairs — one line here blew the
     column out past 3,700px), and Worked-by appends a name per edit. They wrap; each date+code
     pair stays whole because .rc-dayrow is its own nowrap unit. */
  body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .rc-days, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .rc-workedby { white-space: normal; overflow-wrap: break-word; }
  /* Resized columns (supplies grips, rounds saved widths) stay as PREFERENCES: auto layout honours
     them when there is room and shares the shortfall when there is not; wrapped text replaces the
     old ellipsis, which is what the grips were compensating for in the first place. */
  body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap .sup-table.is-sized th, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap .sup-table.is-sized td, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .rounds-table th, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .rounds-table td { overflow: visible; text-overflow: clip; }
  body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .rc-in, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .rc-colfilter { min-width: 9.5ch; width: 100%; box-sizing: border-box; padding-left: 3px; padding-right: 3px; }   /* a date always shows whole */
  body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap input.sup-in { min-width: 5ch; width: 100%; box-sizing: border-box; }
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap .wtr-psheet th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap .wtr-psheet td { white-space: normal; }
  body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap .viz-table td { white-space: nowrap; overflow-wrap: normal; }   /* month figures — short, keep whole */
  body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap .viz-table th { white-space: normal; }
  body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap .viz-table th:first-child, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap .viz-table td:first-child { position: static; overflow-wrap: anywhere; }
  /* (2c) A wide worksheet on a smaller desktop takes the whole width: the leaderboard rail steps
     aside (exactly what the water dashboard already does), instead of the sheet squeezing into
     ~700px beside it. The inbox itself keeps the rail. */
  @media (max-width: 1680px) {
    .body:has(#list .sup-tablewrap), .body:has(#list .rounds-wrap), .body:has(#list .viz-table-wrap), .body:has(#list .pr-wide), .body:has(#list .forms-table-wrap),
    .body:has(#list .ap-queue-tablewrap), .body:has(#list .ap-arc-wrap), .body:has(#list .apv-tablewrap), .body:has(#list .ccm-ledger-scroll), .body:has(#list .rc-umscroll), .body:has(#list .docs-wrap) { grid-template-columns: var(--rail-w) 1fr; }
    .body:has(#list .sup-tablewrap) .rail-right, .body:has(#list .rounds-wrap) .rail-right, .body:has(#list .viz-table-wrap) .rail-right, .body:has(#list .pr-wide) .rail-right, .body:has(#list .forms-table-wrap) .rail-right,
    .body:has(#list .ap-queue-tablewrap) .rail-right, .body:has(#list .ap-arc-wrap) .rail-right, .body:has(#list .apv-tablewrap) .rail-right, .body:has(#list .ccm-ledger-scroll) .rail-right, .body:has(#list .rc-umscroll) .rail-right, .body:has(#list .docs-wrap) .rail-right { display: none; }
  }
  /* (3) Reading pane, notes, cards: long strings wrap, media never exceeds its column. */
  /* ⚠ `break-word`, not `anywhere`, on containers: overflow-wrap is INHERITED, and `anywhere` told
     every table inside a card/window/reader that its cells could shrink to one glyph — a vendor
     history with a shrink-to-fit date column then rendered "08/1 | 9/20 | 26" (owner screenshot,
     2026-08-31). `break-word` still breaks a genuinely too-long word at the edge of its line, but
     leaves table layout its honest minimums. `anywhere` stays only on plain-text previews/notes. */
  body:not(.water-kiosk):not(.provider-kiosk) .detail-body, body:not(.water-kiosk):not(.provider-kiosk) .modal-body, body:not(.water-kiosk):not(.provider-kiosk) .card { overflow-wrap: break-word; }
  body:not(.water-kiosk):not(.provider-kiosk) .note-body, body:not(.water-kiosk):not(.provider-kiosk) .sc-body, body:not(.water-kiosk):not(.provider-kiosk) .msg .preview { overflow-wrap: anywhere; }
  body:not(.water-kiosk):not(.provider-kiosk) .detail-body table td, body:not(.water-kiosk):not(.provider-kiosk) .detail-body table th, body:not(.water-kiosk):not(.provider-kiosk) .modal-body table td, body:not(.water-kiosk):not(.provider-kiosk) .modal-body table th, body:not(.water-kiosk):not(.provider-kiosk) .card table td, body:not(.water-kiosk):not(.provider-kiosk) .card table th { overflow-wrap: break-word; }
  /* A shrink-to-fit column (`width: 1%`) still shows a whole date. */
  body:not(.water-kiosk):not(.provider-kiosk) .ap-hist-table td:first-child, body:not(.water-kiosk):not(.provider-kiosk) .ap-vc-table td:first-child { white-space: nowrap; }
  body:not(.water-kiosk):not(.provider-kiosk) .ap-vc-table td, body:not(.water-kiosk):not(.provider-kiosk) .ap-vc-table th { overflow-wrap: break-word; }
  body:not(.water-kiosk):not(.provider-kiosk) .detail-body img, body:not(.water-kiosk):not(.provider-kiosk) .detail-body video, body:not(.water-kiosk):not(.provider-kiosk) .detail-body canvas, body:not(.water-kiosk):not(.provider-kiosk) .modal-body img, body:not(.water-kiosk):not(.provider-kiosk) .card img, body:not(.water-kiosk):not(.provider-kiosk) .detail-body iframe, body:not(.water-kiosk):not(.provider-kiosk) .modal-body iframe { max-width: 100%; }
  body:not(.water-kiosk):not(.provider-kiosk) .detail-body img, body:not(.water-kiosk):not(.provider-kiosk) .modal-body img, body:not(.water-kiosk):not(.provider-kiosk) .card img { height: auto; }
  body:not(.water-kiosk):not(.provider-kiosk) .detail-body pre, body:not(.water-kiosk):not(.provider-kiosk) .modal-body pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  body:not(.water-kiosk):not(.provider-kiosk) .detail-body table { max-width: 100%; }
}
/* Step the density down on smaller desktops so the wide sheets fit with room to breathe. */
@media (min-width: 761px) and (max-width: 1520px) {
  body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll th, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap th, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll th, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll th, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap td, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap td, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap td, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap td, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap td, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap td, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll td, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap td, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap td, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap td, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll td, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll td, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll td, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap td { padding-left: 6px; padding-right: 6px; }
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap .wtr-log, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .rounds-table, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap .wtr-psheet, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap .sup-table, body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap .ap-table, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap table, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap .viz-table { font-size: 12.5px; }
}
@media (min-width: 761px) and (max-width: 1400px) {
  body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll th, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap th, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll th, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll th, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap td, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap td, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap td, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap td, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap td, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap td, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll td, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap td, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap td, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap td, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll td, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll td, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll td, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap td { padding-left: 5px; padding-right: 5px; }
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap .wtr-log, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .rounds-table, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap .wtr-psheet, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap .sup-table, body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap .ap-table, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap table, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap .viz-table { font-size: 12px; }
  body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap .admin-table th, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap .admin-table td, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap .admin-table th, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap .admin-table td { font-size: 13px; }
  body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap .viz-table { font-size: 11.5px; }
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap .wtr-psheet th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap .wtr-psheet td { font-size: 11px; padding-left: 3px; padding-right: 3px; }
  /* The two-tank day log is nineteen columns; on a laptop it needs the tightest setting. */
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap .wtr-log { font-size: 11.5px; }
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap .wtr-log th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap .wtr-log td { padding-left: 4px; padding-right: 4px; }
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap .wtr-log .wtr-gutter { width: 8px; min-width: 8px; }
  body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap .viz-table th, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap .viz-table td { padding-left: 3px; padding-right: 3px; }
}

/* ==========================================================================================
   8 · VERTICAL PANELS NEVER GROW A BOTTOM BAR
   Owner 2026-08-31 (after §7): "everywhere I click I see a side scroll". A panel that scrolls
   up-and-down computes `overflow-x: auto` as well, so ONE pixel of sideways excess — a chip row a
   touch wider than the column, a long word in a preview — used to raise a horizontal bar that,
   now that bars are visible, everybody sees. Two moves: (a) the panels below scroll vertically
   only — anything wider is wrapped by §7, or scrolls inside its own wide-table wrapper, never the
   panel; (b) inbox rows may not be pushed wider than the list by their own content.
   ========================================================================================== */
@media (min-width: 761px) {
  body:not(.water-kiosk):not(.provider-kiosk) #list, body:not(.water-kiosk):not(.provider-kiosk) .rail-left, body:not(.water-kiosk):not(.provider-kiosk) .rail-right, body:not(.water-kiosk):not(.provider-kiosk) .detail-body, body:not(.water-kiosk):not(.provider-kiosk) .detail-actions, body:not(.water-kiosk):not(.provider-kiosk) .modal-body, body:not(.water-kiosk):not(.provider-kiosk) .wtr-wrap, body:not(.water-kiosk):not(.provider-kiosk) .team-chat-msgs, body:not(.water-kiosk):not(.provider-kiosk) #teamRoster, body:not(.water-kiosk):not(.provider-kiosk) .contact-results, body:not(.water-kiosk):not(.provider-kiosk) .cmdk-list, body:not(.water-kiosk):not(.provider-kiosk) .audit-list, body:not(.water-kiosk):not(.provider-kiosk) .act-list, body:not(.water-kiosk):not(.provider-kiosk) .ue-caps, body:not(.water-kiosk):not(.provider-kiosk) .ap-drawer-body, body:not(.water-kiosk):not(.provider-kiosk) .rc-lb-inner, body:not(.water-kiosk):not(.provider-kiosk) .sc-log, body:not(.water-kiosk):not(.provider-kiosk) .ct-pop-list, body:not(.water-kiosk):not(.provider-kiosk) .ap-confirm-list, body:not(.water-kiosk):not(.provider-kiosk) .ap-cm-list, body:not(.water-kiosk):not(.provider-kiosk) .ap-bank-list, body:not(.water-kiosk):not(.provider-kiosk) .ap-inbox-list, body:not(.water-kiosk):not(.provider-kiosk) .ap-inbox-form, body:not(.water-kiosk):not(.provider-kiosk) .ap-adddocs-list, body:not(.water-kiosk):not(.provider-kiosk) .apv-rows, body:not(.water-kiosk):not(.provider-kiosk) .apc-groups, body:not(.water-kiosk):not(.provider-kiosk) .ap-pick-list, body:not(.water-kiosk):not(.provider-kiosk) .ccm-condlist, body:not(.water-kiosk):not(.provider-kiosk) .ccm-medlist, body:not(.water-kiosk):not(.provider-kiosk) .ccm-box, body:not(.water-kiosk):not(.provider-kiosk) .docs-inline-head, body:not(.water-kiosk):not(.provider-kiosk) .docs-thumbs { overflow-x: hidden; }
  body:not(.water-kiosk):not(.provider-kiosk) #list .msg { min-width: 0; max-width: 100%; }
  body:not(.water-kiosk):not(.provider-kiosk) #list .msg > * { min-width: 0; }
  body:not(.water-kiosk):not(.provider-kiosk) #list .msg .who { flex-wrap: wrap; }                       /* chips take a second line instead of forcing width */
  body:not(.water-kiosk):not(.provider-kiosk) #list .msg .preview, body:not(.water-kiosk):not(.provider-kiosk) #list .msg .subject, body:not(.water-kiosk):not(.provider-kiosk) #list .msg .who { overflow-wrap: anywhere; }
  body:not(.water-kiosk):not(.provider-kiosk) .modal-body .admin-table td, body:not(.water-kiosk):not(.provider-kiosk) .modal-body .admin-table th { overflow-wrap: anywhere; }   /* an email address never widens a People table */
  body:not(.water-kiosk):not(.provider-kiosk) .rail-left .tab, body:not(.water-kiosk):not(.provider-kiosk) .rail-right .card { min-width: 0; max-width: 100%; }
}

/* ==========================================================================================
   9 · THE LAPTOP PASS — owner's screenshots, 2026-08-31 (MacBook, ~1,200px of width)
   macOS had hidden every scrollbar, so these overflows were invisible until §6 made bars visible;
   §7 then missed several screens and squeezed last columns into shreds. What the screenshots
   showed and what each rule below does:
   · Chronic Care roster (.ccm-scroll, `style="width:1458px"` + <colgroup> + table-layout:fixed +
     td overflow:hidden) — not in §7's list → now fits like the others.
   · AP Bills / Sign payments — column-header BUTTONS were one line, the memo cell carried an
     inline `white-space:nowrap; max-width:180px`, status chips were pinned to one line: together
     they forced the table past the panel and the BY column got the leftovers (letters stacked).
     Headers, memo and chips may now wrap; the wrapper's bar disappears.
   · AP inbox drawer tabs ("To enter · Past invoices · Spam · Payroll") did not wrap → they wrap.
   · The collapsed leaderboard rail (36px) still held the Team-pulse box → a bottom bar; hidden.
   · Personnel sheet: eleven native date inputs at 130px each can never share ~900px → inputs
     shrink to their column, the calendar glyph tightens, chips shrink.
   · ≤1300px: any wide workspace takes the full width (leaderboard rail steps aside, the AP
     mini-rail too) and the densest type tier applies.
   ========================================================================================== */
@media (min-width: 761px) {
  body:not(.water-kiosk):not(.provider-kiosk) .ccm-scroll table { width: 100% !important; min-width: 0 !important; max-width: 100%; table-layout: auto !important; }
  body:not(.water-kiosk):not(.provider-kiosk) .ccm-scroll col { width: auto !important; }
  body:not(.water-kiosk):not(.provider-kiosk) .ccm-scroll th, body:not(.water-kiosk):not(.provider-kiosk) .ccm-scroll td { white-space: normal; overflow-wrap: break-word; overflow: visible; }
  body:not(.water-kiosk):not(.provider-kiosk) .ccm-scroll { overflow-x: auto; }
  /* AP column headers: the button and its label may wrap like any header. */
  body:not(.water-kiosk):not(.provider-kiosk) .ap-colbtn { white-space: normal; text-align: left; line-height: 1.15; padding-top: 6px; padding-bottom: 6px; }
  body:not(.water-kiosk):not(.provider-kiosk) .ap-col.ap-num .ap-colbtn { text-align: right; }
  /* The header LABEL was one-line + ellipsis: to table layout that reads as "this column is at
     least as wide as COMPANY (PAID FROM)" — the single biggest reason the bills table overflowed. */
  body:not(.water-kiosk):not(.provider-kiosk) .ap-collabel { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; }
  /* Inline one-line/ellipsis cells (the memo) may wrap when the table needs the room. */
  body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap td[style*="nowrap"], body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap td[style*="nowrap"], body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap td[style*="nowrap"], body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap td[style*="nowrap"], body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap td[style*="nowrap"], body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap td[style*="nowrap"], body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll td[style*="nowrap"], body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap td[style*="nowrap"], body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap td[style*="nowrap"], body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap td[style*="nowrap"], body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll td[style*="nowrap"], body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll td[style*="nowrap"], body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll td[style*="nowrap"], body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap td[style*="nowrap"], body:not(.water-kiosk):not(.provider-kiosk) .ccm-scroll td[style*="nowrap"] { white-space: normal !important; max-width: none !important; overflow: visible !important; text-overflow: clip !important; }
  body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-doc { white-space: normal; }
  body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .ccm-scroll td .ap-status-chip { white-space: normal; text-align: left; line-height: 1.2; }
  /* Drawer tabs wrap instead of running off the column. */
  body:not(.water-kiosk):not(.provider-kiosk) .ap-cabinet-tabs { flex-wrap: wrap; row-gap: 4px; }
  /* Collapsed leaderboard rail: only the restore tab lives there. */
  .body.ap-rail-min .rail-right > .eg-feed { display: none; }
  .body.ap-rail-min .rail-right { overflow: hidden; }
}
@media (min-width: 761px) and (max-width: 1300px) {
  /* Wide workspaces get the whole width on a laptop. */
  .body:has(#list .ccm-wrap), .body.ap-rail-min { grid-template-columns: var(--rail-w) 1fr; }
  .body:has(#list .ccm-wrap) .rail-right, .body.ap-rail-min .rail-right { display: none; }
  .body:has(#list .sup-tablewrap), .body:has(#list .rounds-wrap), .body:has(#list .viz-table-wrap), .body:has(#list .pr-wide), .body:has(#list .forms-table-wrap), .body:has(#list .ap-queue-tablewrap), .body:has(#list .ap-arc-wrap), .body:has(#list .apv-tablewrap), .body:has(#list .ccm-wrap), .body:has(#list .wtr-wrap), .body:has(.ap-inbox-layout), .body:has(#list .docs-wrap) { --rail-w: 220px; }
  /* Densest tier. */
  body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll th, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap th, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll th, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll th, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .ccm-scroll th, body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap td, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap td, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap td, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap td, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap td, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap td, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll td, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap td, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap td, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap td, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll td, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll td, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll td, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap td, body:not(.water-kiosk):not(.provider-kiosk) .ccm-scroll td { padding-left: 4px; padding-right: 4px; font-size: 11.5px; }
  body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll th, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap th, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll th, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll th, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap th, body:not(.water-kiosk):not(.provider-kiosk) .ccm-scroll th { font-size: 10.5px; }
  body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .ccm-scroll td .ap-status-chip, body:not(.water-kiosk):not(.provider-kiosk) .ap-queue-tablewrap td .chip, body:not(.water-kiosk):not(.provider-kiosk) .ap-arc-wrap td .chip, body:not(.water-kiosk):not(.provider-kiosk) .apv-tablewrap td .chip, body:not(.water-kiosk):not(.provider-kiosk) .forms-table-wrap td .chip, body:not(.water-kiosk):not(.provider-kiosk) .viz-table-wrap td .chip, body:not(.water-kiosk):not(.provider-kiosk) .pr-tablewrap td .chip, body:not(.water-kiosk):not(.provider-kiosk) .ccm-ledger-scroll td .chip, body:not(.water-kiosk):not(.provider-kiosk) .sup-tablewrap td .chip, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap td .chip, body:not(.water-kiosk):not(.provider-kiosk) .wtr-edutblwrap td .chip, body:not(.water-kiosk):not(.provider-kiosk) .rm-scroll td .chip, body:not(.water-kiosk):not(.provider-kiosk) .rc-umscroll td .chip, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll td .chip, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap td .chip, body:not(.water-kiosk):not(.provider-kiosk) .ccm-scroll td .chip { font-size: 10.5px; padding: 1px 6px; }
  body:not(.water-kiosk):not(.provider-kiosk) .ap-colbtn { font-size: 10.5px; gap: 3px; padding-left: 4px; padding-right: 4px; letter-spacing: 0; }
  /* Personnel sheet: inputs share the column instead of insisting on 130px each. */
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet input[type="date"], body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet select { max-width: none; width: 100%; min-width: 0; box-sizing: border-box; padding: 2px 2px; font-size: 10.5px; }
  /* At this width the calendar glyph would cost the year: it is hidden; the field still takes typed digits and arrow keys. */
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet td button, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet td .chip, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet td label { font-size: 10px; padding: 1px 5px; }
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap .wtr-psheet th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap .wtr-psheet td { padding-left: 3px; padding-right: 3px; }
  /* Spreadsheets at laptop width: rounds inputs and the water log's gutter tighten one more notch. */
  body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .rc-in, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .rc-colfilter { min-width: 8.6ch; font-size: 11px; padding-left: 2px; padding-right: 2px; }
  body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .rounds-table th, body:not(.water-kiosk):not(.provider-kiosk) .rounds-scroll .rounds-table td { padding-left: 3px; padding-right: 3px; }
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap .wtr-log th, body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap .wtr-log td { padding-left: 3px; padding-right: 3px; }
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-logwrap .wtr-log .wtr-gutter { width: 6px; min-width: 6px; }
  /* Native date inputs report a ~120px minimum to table layout whatever `width:100%` says; an
     explicit em width is the only thing auto layout believes. */
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet input[type="date"] { width: 6.3em; min-width: 0; font-size: 10px; padding: 2px 0; }
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet .wtr-pfix-2 { min-width: 136px; }
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet .wtr-pfix-1 { width: 28px; min-width: 28px; }
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet-wrap .wtr-psheet thead th { font-size: 9.5px; letter-spacing: 0; }
  body:not(.water-kiosk):not(.provider-kiosk) .wtr-psheet select { width: 4.5em; min-width: 0; font-size: 10px; padding: 2px 1px; }
  /* AP inbox: the invoice list column gives a little back to the reader. */
  body:not(.water-kiosk):not(.provider-kiosk) .ap-inbox-layout { grid-template-columns: minmax(280px, 34%) 1fr; }
}

/* ==========================================================================================
   10 · INVOICE VIEWER CURSORS (companion to the app.js gesture change, 2026-08-31)
   The cursor announces the gesture: an I-beam over words (drag selects them), a hand over empty
   paper (drag pans), crosshairs while "Point to it on the invoice" is armed (any drag selects).
   ========================================================================================== */
.ap-hl-scroll.over-text { cursor: text; }
body.ap-grab-armed .ap-hl-scroll, body.ap-grab-armed .ap-hl-scroll.over-text { cursor: crosshair; }
.ap-hl-scroll.panning, body.ap-grab-armed .ap-hl-scroll.panning { cursor: grabbing; }