/* ══════════════════════════════════════════════════════════════════════════ PHANTOM CREW — APP THEME (spec #79 — live cut-over of the spec #76 redesign) The warm-white design system (crew-ds.css) applied to the LIVE app, scoped to `body.theme-app`. The public marketing / umbrella site renders under `body.theme-marketing` and is intentionally LEFT ON the original dark theme — nothing here touches it (spec #79 "out of scope: the marketing/umbrella site"). Load order (base.html): crew-ds.css → styles.css → crew-app.css (this). So styles.css wins globally (marketing unchanged) and this layer wins under `.theme-app` (the app pages flip to warm-white). Colours, type scale and spacing are Paul-approved (prototype, 2026-06-05 23:37). ══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · TOKENS — re-assert the full warm-white role set under .theme-app ────── styles.css set the SHARED names (--bg/--gold/--paper/...) to the dark theme globally; here we override them (plus legacy aliases the old app CSS uses) so every existing rule that references a token flips to the warm-white value. */ body.theme-app { /* crew-ds role tokens (light) */ --bg:#ffffff; --surface:#faf8f4; --surface-2:#f3efe8; --surface-3:#ebe5da; --line:#e9e3d8; --line-2:#d9d0bf; --ink:#1c1813; --ink-soft:#57514a; --ink-faint:#8a8278; --ink-inv:#faf6ee; --gold:#c9a360; --gold-deep:#b3853c; --gold-ink:#8a6322; --gold-soft:#f5ebd6; --gold-line:#e7d3a6; --ok:#2f9e64; --ok-soft:#e7f4ec; --ok-ink:#1f6b44; --warn:#bd862a; --warn-soft:#faefd9; --warn-ink:#8a5a14; --bad:#c2443e; --bad-soft:#fbe9e7; --bad-ink:#8d2d29; --info:#3a6ea5; --info-soft:#e8f0f8; --info-ink:#274d75; --focus:0 0 0 3px rgba(201,163,96,.45); --shadow-sm:0 1px 2px rgba(28,24,19,.06),0 1px 1px rgba(28,24,19,.04); --shadow:0 4px 14px rgba(28,24,19,.08),0 1px 3px rgba(28,24,19,.05); --shadow-lg:0 18px 44px rgba(28,24,19,.14),0 6px 14px rgba(28,24,19,.07); /* ── legacy aliases (old app CSS variable names → warm-white roles) ── --paper* are TEXT only (216 uses) → become ink. --bg-* are BACKGROUNDS → become light surfaces. --bg-deep is conflated (light bg AND text-on-gold) → near-white works for both (matches the prototype's near-white text on the gold button). --gold-soft is conflated (links AND accent backgrounds) → gold-ink keeps every link legible; the few gold-soft *backgrounds* (.btn-primary/-confirm hover) are restyled explicitly below. */ --paper:#1c1813; --paper-edge:#57514a; --paper-faint:#8a8278; --bg-deep:#faf6ee; --bg-soft:#faf8f4; --bg-lift:#f3efe8; --gold-soft:#8a6322; --gold-faint:#e9e3d8; --green:#2f9e64; --green-soft:#e7f4ec; --green-faint:#bfe3cf; --yellow:#bd862a; --yellow-soft:#faefd9; --yellow-faint:#ecd9ad; --red:#c2443e; --red-soft:#fbe9e7; --red-faint:#f2c6c2; background:var(--bg); color:var(--ink); font-family:var(--font-sans); font-size:var(--text-base); line-height:var(--lh-body); } /* ── 2 · BASE — kill the dark-theme atmospherics on app pages ─────────────── */ body.theme-app::before { display:none !important; } /* paper-grain off */ body.theme-app ::selection { background:rgba(201,163,96,.28); color:inherit; } body.theme-app ::-webkit-scrollbar-track { background:var(--surface); } body.theme-app ::-webkit-scrollbar-thumb { background:#d9d0bf; border-color:var(--surface); } body.theme-app a { color:var(--gold-ink); } body.theme-app a:hover { color:var(--gold-deep); } body.theme-app em { color:var(--ink-faint); } body.theme-app .page { position:relative; z-index:1; max-width:1120px; } /* ── 3 · TOPBAR / NAV / BRAND ────────────────────────────────────────────── */ body.theme-app .topbar { background:color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter:saturate(140%) blur(8px); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line); } body.theme-app .nav-tab { color:var(--ink-soft); } body.theme-app .nav-tab:hover { color:var(--ink); } body.theme-app .nav-tab.active { color:var(--ink); border-bottom-color:var(--gold); } body.theme-app .nav-user { color:var(--ink-faint); } body.theme-app .nav-user a { color:var(--gold-ink); } body.theme-app .brand-04-name { color:var(--ink); } body.theme-app .brand-04-os { color:var(--gold-ink); } body.theme-app .brand-04-product { color:var(--ink-faint); } body.theme-app .brand-tag { color:var(--gold-ink); } body.theme-app .brand-name { color:var(--ink); } /* the "P" medallion → gold gradient, near-white glyph (the ds-mark look) */ body.theme-app .brand-p-mark { background:linear-gradient(150deg, var(--gold) 0%, var(--gold-deep) 100%); color:var(--ink-inv); box-shadow:var(--shadow-sm); } body.theme-app .site-footer { border-top:1px solid var(--line); color:var(--ink-faint); } body.theme-app .footer-note { color:var(--ink-faint); } /* ── 4 · PAGE HEADERS / TEXT HELPERS ─────────────────────────────────────── */ body.theme-app .page-title { font-family:var(--font-serif); font-weight:var(--fw-semi); font-size:var(--text-2xl); letter-spacing:-.01em; color:var(--ink); } body.theme-app .page-subtitle { font-size:var(--text-2xs); font-weight:var(--fw-bold); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); } body.theme-app .lede { color:var(--ink-soft); font-size:var(--text-base); } body.theme-app .small { color:var(--ink-faint); } body.theme-app .hint { color:var(--ink-faint); font-size:var(--text-xs); } body.theme-app .back-link { color:var(--ink-soft); } body.theme-app .back-link:hover { color:var(--gold-ink); } /* ── 5 · BUTTONS ─────────────────────────────────────────────────────────── */ body.theme-app .btn { border-radius:var(--r-sm); min-height:40px; font-weight:var(--fw-semi); font-size:var(--text-sm); border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink); } body.theme-app .btn:hover { background:var(--surface-3); } body.theme-app .btn-primary, body.theme-app .btn-confirm { background:linear-gradient(150deg, var(--gold) 0%, var(--gold-deep) 100%); color:var(--ink-inv); border-color:var(--gold-deep); box-shadow:var(--shadow-sm); } body.theme-app .btn-primary:hover, body.theme-app .btn-confirm:hover { background:var(--gold-deep); border-color:var(--gold-deep); color:var(--ink-inv); } body.theme-app .btn-secondary { background:transparent; color:var(--ink-soft); border-color:var(--line-2); } body.theme-app .btn-secondary:hover { background:var(--surface-2); color:var(--ink); border-color:var(--line-2); } body.theme-app .btn-ghost { background:transparent; color:var(--ink-soft); border-color:transparent; } body.theme-app .btn-ghost:hover { background:var(--surface-2); color:var(--ink); } body.theme-app .btn-link { color:var(--gold-ink); background:none; border:none; } body.theme-app .btn-link:hover { color:var(--gold-deep); } body.theme-app .btn-danger { background:transparent; color:var(--bad-ink); border-color:var(--bad); } body.theme-app .btn-danger:hover { background:var(--bad-soft); border-color:var(--bad); } /* ── 6 · CARDS / PANELS / FORMS / FLASHES ────────────────────────────────── */ body.theme-app .card, body.theme-app .panel-collapsible { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); } body.theme-app .card-title { color:var(--ink); } body.theme-app .card-title-tag { color:var(--ink-faint); } body.theme-app .form input[type=text], body.theme-app .form input[type=tel], body.theme-app .form input[type=password], body.theme-app .form input[type=email], body.theme-app .form input[type=number], body.theme-app .form input[type=date], body.theme-app .form input[type=time], body.theme-app .form textarea, body.theme-app .form select, body.theme-app .notes-textarea, body.theme-app .bc-field textarea, body.theme-app .bc-field select, body.theme-app input[type=text], body.theme-app input[type=tel], body.theme-app input[type=password], body.theme-app input[type=email], body.theme-app input[type=number], body.theme-app textarea, body.theme-app select { background:var(--bg); color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r-sm); } body.theme-app .form label > span, body.theme-app label > span { color:var(--ink-soft); } body.theme-app .form label em, body.theme-app label em { color:var(--ink-faint); } body.theme-app .flashes .flash, body.theme-app .flash { border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface-2); color:var(--ink-soft); } body.theme-app .flash-error, body.theme-app .flash.flash-error { background:var(--bad-soft); color:var(--bad-ink); border-color:transparent; } body.theme-app .flash-success, body.theme-app .flash.flash-success { background:var(--ok-soft); color:var(--ok-ink); border-color:transparent; } body.theme-app .flash-info { background:var(--info-soft); color:var(--info-ink); border-color:transparent; } /* ── 7 · EMPTY STATES — onboarding, not 404 ──────────────────────────────── */ body.theme-app .empty-state { text-align:center; max-width:480px; margin:var(--s-12) auto; padding:var(--s-10) var(--s-6); } body.theme-app .empty-state h2 { font-family:var(--font-serif); font-size:var(--text-xl); color:var(--ink); } body.theme-app .empty-state p { color:var(--ink-soft); } /* ── 8 · PILLS / META / BADGES ───────────────────────────────────────────── */ body.theme-app .flag-pill { background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line); border-radius:var(--r-pill); } body.theme-app .flag-pill.gold { background:var(--gold-soft); color:var(--gold-ink); border-color:var(--gold-line); } body.theme-app .role-pill, body.theme-app .lang-pill { background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line); border-radius:var(--r-pill); } body.theme-app .bench-meta { color:var(--ink-soft); } body.theme-app .phone-warn { color:var(--bad-ink); } /* ── 9 · NAMES ARE THE HERO (the audit's #1 fix: ≥20px, serif) ───────────── */ body.theme-app .bench-name, body.theme-app .case-name, body.theme-app .roster-name, body.theme-app .mock-name, body.theme-app .confirm-title { font-family:var(--font-serif); font-size:var(--text-lg); font-weight:var(--fw-semi); line-height:1.2; color:var(--ink); } /* ── 10 · ONE FOCUS RING ─────────────────────────────────────────────────── */ body.theme-app :where(a,button,input,select,textarea,[tabindex],summary):focus-visible { outline:none; box-shadow:var(--focus); border-radius:var(--r-sm); } /* ── 11 · BENCH ──────────────────────────────────────────────────────────── */ body.theme-app .bench-tab { color:var(--ink-soft); } body.theme-app .bench-tab.active { color:var(--gold-ink); border-bottom-color:var(--gold); } body.theme-app .bench-count { color:var(--ink-faint); } body.theme-app .bench-banner { background:var(--warn-soft); color:var(--warn-ink); border:1px solid var(--warn-faint, transparent); border-radius:var(--r-sm); } body.theme-app .bench-banner strong { color:var(--warn-ink); } /* Spec #83 — info-toned consent banner reads as a notice, not a warning. */ body.theme-app .bench-banner-info { background:var(--info-soft, #eef4fb); color:var(--info-ink, #2c4a66); border-color:var(--info-faint, #c5d8ec); } body.theme-app .bench-banner-info strong { color:var(--info-ink, #2c4a66); } body.theme-app .bench-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); } body.theme-app .bench-card.inactive { opacity:.62; } body.theme-app .bench-phone { color:var(--ink-faint); font-variant-numeric:tabular-nums; } /* Spec #79 — per-staff opt-in status chip (Paul: "so I don't waste my time texting people who aren't opted in"). Single source of truth: staff.sms_consent_status (#77) + staff.phone_validation_status (#74). */ .consent-chip { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-xs); font-weight:var(--fw-semi); line-height:1; padding:5px 10px; border-radius:var(--r-pill); white-space:nowrap; border:1px solid transparent; } .consent-chip::before { content:""; width:8px; height:8px; border-radius:50%; flex-shrink:0; background:currentColor; opacity:.9; } .consent-in { background:var(--ok-soft); color:var(--ok-ink); } .consent-pending { background:var(--warn-soft); color:var(--warn-ink); } .consent-out { background:var(--bad-soft); color:var(--bad-ink); } .consent-landline { background:var(--surface-2); color:var(--ink-faint); border-color:var(--line); } .bench-filterbar { display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; margin:0 0 var(--s-5); font-size:var(--text-sm); color:var(--ink-faint); } .bench-filterbar .ds-btn, .bench-filterbar button { font-size:var(--text-xs); font-weight:var(--fw-semi); padding:6px 12px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--bg); color:var(--ink-soft); cursor:pointer; } .bench-filterbar button.is-on { background:var(--gold-soft); color:var(--gold-ink); border-color:var(--gold-line); } .bench-card.is-hidden { display:none; } /* ── 12 · CASE GRID / EVENT PILLS (list view) ────────────────────────────── */ body.theme-app .case-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); } body.theme-app .case-card:hover { box-shadow:var(--shadow); border-color:var(--line-2); } body.theme-app .case-card.status-green { border-left:3px solid var(--ok); } body.theme-app .case-card.status-yellow { border-left:3px solid var(--warn); } body.theme-app .case-card.status-red { border-left:3px solid var(--bad); } body.theme-app .case-card.status-gray { border-left:3px solid var(--line-2); } body.theme-app .case-when { color:var(--ink-soft); } body.theme-app .case-where { color:var(--ink-faint); } body.theme-app .case-event-pill { background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft); border-radius:var(--r-sm); } body.theme-app .case-event-pill.status-green { background:var(--ok-soft); border-color:transparent; color:var(--ok-ink); } body.theme-app .case-event-pill.status-yellow { background:var(--warn-soft); border-color:transparent; color:var(--warn-ink); } body.theme-app .case-event-pill.status-red { background:var(--bad-soft); border-color:transparent; color:var(--bad-ink); } body.theme-app .btn-card-delete { color:var(--ink-faint); } body.theme-app .btn-card-delete:hover { color:var(--bad-ink); } /* ── 13 · SERVICE DETAIL — mode bar / roster / summary / context / broadcast ─ */ body.theme-app .case-tab { color:var(--ink-soft); } body.theme-app .case-tab.active, body.theme-app .case-tab[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--gold); } body.theme-app .mode-bar-label { color:var(--ink-soft); } body.theme-app .context-section, body.theme-app .confirm-context { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); } body.theme-app .context-label, body.theme-app .confirm-context-label { color:var(--ink-faint); } body.theme-app .context-body, body.theme-app .confirm-context-body { color:var(--ink); } body.theme-app .summary-list { color:var(--ink-soft); } body.theme-app .summary-num.gold { color:var(--gold-ink); } body.theme-app .roster-card, body.theme-app .roster-person { background:var(--surface); border-color:var(--line); } body.theme-app .roster-role { color:var(--ink-soft); } body.theme-app .roster-avatar { background:linear-gradient(150deg, var(--gold) 0%, var(--gold-deep) 100%); color:var(--ink-inv); } /* broadcast modal (#72) — fields already remap via tokens; just soften chrome */ body.theme-app .bc-modal-head h3 { color:var(--ink); } body.theme-app .bc-modal-sub, body.theme-app .bc-counter { color:var(--ink-faint); } body.theme-app .bc-counter.over-one { color:var(--gold-ink); } /* confirm page hero had a hardcoded near-black gradient — flatten to surface */ body.theme-app .confirm-body { background:var(--surface) !important; } body.theme-app .confirm-shell, body.theme-app .mock-status { color:var(--ink-soft); } /* ── 14 · GETTING STARTED (gs-*) ─────────────────────────────────────────── */ body.theme-app .gs-step { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); } body.theme-app .gs-step-num { background:var(--gold-soft); color:var(--gold-ink); } body.theme-app .gs-step-title { color:var(--ink); } body.theme-app .gs-step-text { color:var(--ink-soft); } body.theme-app .gs-footer { background:var(--surface); border:1px solid var(--line); color:var(--ink-faint); } /* ── 15 · LOGIN (warm-white tone-setter) ─────────────────────────────────── */ body.theme-app .login-shell { max-width:420px; margin:var(--s-12) auto; padding:0 var(--s-4); } body.theme-app .login-eyebrow { font-size:var(--text-2xs); font-weight:var(--fw-semi); letter-spacing:var(--tracking-cap); text-transform:uppercase; color:var(--gold-ink); margin-bottom:var(--s-2); } body.theme-app .login-title { font-family:var(--font-serif); font-size:var(--text-2xl); color:var(--ink); } body.theme-app .login-sub { color:var(--ink-soft); } body.theme-app .login-footnote { color:var(--ink-faint); } body.theme-app .founder-link { color:var(--gold-ink); font-weight:var(--fw-semi); } /* ══════════════════════════════════════════════════════════════════════════ 16 · 7-DAY CALENDAR (Paul's hard constraint: NOT a 30-day month grid — "seven bigger boxes that you could actually read names in") ══════════════════════════════════════════════════════════════════════════ */ .cal7-toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-5); } .cal7-range { font-family:var(--font-serif); font-size:var(--text-lg); color:var(--ink); } .cal7-nav { display:inline-flex; gap:var(--s-2); align-items:center; } .cal7-nav a, .cal7-nav .cal7-today { display:inline-grid; place-items:center; min-width:36px; height:36px; padding:0 12px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--bg); color:var(--ink-soft); font-size:var(--text-sm); font-weight:var(--fw-semi); } .cal7-nav a:hover { background:var(--surface-2); color:var(--ink); } .cal7-viewtoggle { display:inline-flex; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; } .cal7-viewtoggle a { padding:8px 14px; font-size:var(--text-sm); font-weight:var(--fw-semi); color:var(--ink-soft); } .cal7-viewtoggle a.is-on { background:var(--gold-soft); color:var(--gold-ink); } .cal7 { display:grid; grid-template-columns:repeat(7, 1fr); gap:var(--s-3); align-items:stretch; } @media (max-width:1000px){ .cal7 { grid-template-columns:repeat(4, 1fr); } } @media (max-width:680px){ .cal7 { grid-template-columns:1fr; } } .cal7-day { display:flex; flex-direction:column; min-height:200px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; } .cal7-day.is-weekend { background:var(--surface-2); } .cal7-day.is-today { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-line), var(--shadow-sm); } .cal7-day.is-empty { opacity:.78; } .cal7-dayhead { display:flex; align-items:baseline; gap:8px; padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--line); } .cal7-dow { font-size:var(--text-2xs); font-weight:var(--fw-bold); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); } .cal7-daynum { font-family:var(--font-serif); font-size:var(--text-xl); font-weight:var(--fw-semi); color:var(--ink); margin-left:auto; } .cal7-month { font-size:var(--text-2xs); font-weight:var(--fw-semi); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); } .cal7-day.is-today .cal7-dow { color:var(--gold-ink); } .cal7-day.is-today .cal7-daynum { background:var(--gold); color:var(--ink-inv); border-radius:var(--r-pill); width:34px; height:34px; display:grid; place-items:center; margin-left:auto; font-size:var(--text-base); } .cal7-events { display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-3); flex:1; } .cal7-ev { display:block; padding:var(--s-3); border-radius:var(--r-sm); background:var(--bg); border:1px solid var(--line); border-left:4px solid var(--gold); color:var(--ink); transition:box-shadow var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .cal7-ev:hover { box-shadow:var(--shadow); transform:translateY(-1px); color:var(--ink); } .cal7-ev.event-memorial { border-left-color:#7d5fb3; } .cal7-ev.event-visitation, .cal7-ev.event-wake { border-left-color:var(--info); } .cal7-ev.event-other { border-left-color:var(--ink-faint); } .cal7-ev.event-committal { border-left-color:var(--gold-deep); } .cal7-ev-time { font-size:var(--text-xs); font-weight:var(--fw-bold); color:var(--gold-ink); font-variant-numeric:tabular-nums; } .cal7-ev-name { display:block; font-family:var(--font-serif); font-size:var(--text-lg); font-weight:var(--fw-semi); line-height:1.15; color:var(--ink); margin:2px 0; } .cal7-ev-meta { display:block; font-size:var(--text-xs); color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cal7-ev-foot { display:flex; align-items:center; gap:8px; margin-top:8px; } .cal7-vet { font-size:var(--text-xs); } .cal7-none { color:var(--ink-faint); font-size:var(--text-sm); text-align:center; padding:var(--s-4) 0; } /* List view wrapper (existing card grid, re-skinned above) */ .view-pane[hidden] { display:none; } /* ── Spec #82: Rolodex onboarding (bench framing + empty-state card + login nudge) ── */ /* Empty-bench guidance card (extends .empty-state, scoped to theme-app pages). */ body.theme-app .rolodex-guidance p { max-width:560px; margin-left:auto; margin-right:auto; } body.theme-app .rolodex-guidance-fast { margin-top:14px; color:var(--ink-soft); } .rolodex-guidance-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px; } /* Phone-import tip banner on the bulk page — a touch of breathing room. */ .rolodex-phone-tip { margin-bottom:16px; line-height:1.55; } /* Login nudge modal — reuses the .bc-modal-overlay/.bc-modal shell. */ .rolodex-nudge-body { color:var(--paper, #ece6da); font-size:14px; line-height:1.55; margin:6px 0 20px; } .rolodex-nudge-body strong { color:var(--paper, #fff); } .rolodex-nudge-actions { display:flex; gap:10px; flex-wrap:wrap; } .rolodex-nudge-actions .btn { flex:1 1 auto; text-align:center; } /* ── Spec #84: bench cascade ranking + no_response status ─────────────────── */ .bench-name-wrap { display:flex; align-items:center; gap:9px; min-width:0; } .rank-badge { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--gold-soft, rgba(201,163,96,0.16)); color:var(--gold, #c9a360); border:1px solid var(--gold-faint, rgba(201,163,96,0.35)); font-size:12px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; } .bench-reorder { display:flex; align-items:center; gap:6px; margin:8px 0 2px; color:var(--paper-faint, #8d8475); font-size:11px; } .bench-reorder-label { letter-spacing:0.4px; text-transform:uppercase; font-weight:600; } .bench-reorder-form { display:inline; margin:0; } .rank-arrow { cursor:pointer; width:24px; height:22px; padding:0; border-radius:6px; border:1px solid var(--gold-faint, rgba(201,163,96,0.35)); background:var(--bg, #14110c); color:var(--gold-soft, #d8c08a); font-size:11px; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:border-color .15s, color .15s; } .rank-arrow:hover:not([disabled]) { border-color:var(--gold, #c9a360); color:var(--gold, #c9a360); } .rank-arrow[disabled] { opacity:0.3; cursor:default; } /* no_response — distinct from declined (which is red + line-through). Grey, "muted absence". */ .status-badge.badge-no_response { background:rgba(150,150,150,0.14); color:#9aa0a6; border-color:rgba(150,150,150,0.34); text-decoration:none; } .roster-row.status-no_response { opacity:0.6; } .roster-stat-num.no-response, .summary-num.no-response { color:#9aa0a6; } /* ── Spec #195: locations (multi-location $9/mo add-on) ─────────────────── */ body.theme-app .location-list { list-style:none; margin:0; padding:0; } body.theme-app .location-row { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-3) 0; border-bottom:1px solid var(--line); } body.theme-app .location-row:last-child { border-bottom:none; } body.theme-app .location-main { display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; } body.theme-app .location-name { font-weight:var(--fw-semi); color:var(--ink); } body.theme-app .pill { display:inline-block; padding:2px 10px; border-radius:var(--r-pill); font-size:0.8rem; font-weight:var(--fw-semi); background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line); } body.theme-app .pill-ok { background:var(--ok-soft); color:var(--ok-ink); border-color:var(--ok); } body.theme-app .btn-sm { padding:4px 12px; font-size:0.85rem; } body.theme-app .inline-form { margin:0; } /* ── Spec #253 · DROPDOWNS — kill the native white control on the dark theme ── Paul flagged a "black/ugly dropdown." A native