/* VictoryLap Hub — page-specific styles. Base system comes from ../styles.css. */

.hub-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Hub header ---------- */
.hub-bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 11, 12, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hub-bar-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  min-height: 68px; display: flex; align-items: center; gap: 16px;
}
.hub-bar .brand { margin-right: auto; }
.hub-member { display: flex; align-items: center; gap: 12px; }
.hub-member .name { font-weight: 700; font-size: 14px; }
.portal-badge {
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--bone-dim); white-space: nowrap;
}
.portal-badge.men { color: var(--blue); border-color: rgba(36, 86, 255, 0.5); }
.portal-badge.women { color: #ff8a7a; border-color: rgba(224, 57, 43, 0.5); }

/* ---------- Dashboard layout ---------- */
.hub-main { flex: 1; min-width: 0; padding: clamp(36px, 5vw, 60px) 0 clamp(60px, 8vw, 100px); }
.hub-greeting h1 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(38px, 6vw, 68px); line-height: 0.95; margin-bottom: 10px;
}
.hub-greeting h1 em { font-style: normal; color: var(--lime); }
.hub-greeting p { color: var(--bone-dim); margin-bottom: 34px; }
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.hub-card {
  border: 1px solid var(--line); border-radius: 18px; background: var(--black-2);
  padding: 32px 30px;
}
.hub-card.full { grid-column: 1 / -1; }
.hub-card .kicker {
  font-size: 11px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 12px;
}
.hub-card h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(24px, 3vw, 34px); line-height: 1; margin-bottom: 12px;
}
.hub-card p.body { color: var(--bone-dim); font-size: 15px; margin-bottom: 8px; }
.hub-card p.body strong { color: var(--bone); }
.reassure {
  margin-top: 28px; text-align: center; color: var(--bone-dim); font-size: 14px;
}
.reassure::before { content: "🔒 "; }

/* ---------- Read-back values ---------- */
.readback { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.readback dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 14.5px; }
.readback dt { color: var(--bone-dim); text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 700; }
.readback dd { color: var(--bone); margin: 0; }

/* ---------- Login page ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}
.login-card {
  width: 100%; max-width: 480px; text-align: center;
  border: 1px solid var(--line); border-radius: 22px; background: var(--black-2);
  padding: clamp(36px, 6vw, 56px);
}
.login-card .brand-mark { margin: 0 auto 18px; width: 52px; height: 52px; font-size: 26px; }
.login-card h1 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(34px, 6vw, 52px); line-height: 0.95; margin-bottom: 14px;
}
.login-card h1 em { font-style: normal; color: var(--blue); }
.login-card .lede { margin-bottom: 28px; font-size: 15px; }
.login-card .field { text-align: left; }
.login-back { display: inline-block; margin-top: 26px; font-size: 13px; color: var(--bone-dim); text-decoration: none; }
.login-back:hover { color: var(--lime); }
.sent-state { display: none; }
.sent-state.show { display: block; }
.sent-state .big-check {
  width: 60px; height: 60px; border-radius: 50%; background: rgba(214, 255, 56, 0.12);
  border: 2px solid var(--lime); color: var(--lime); font-size: 28px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
}

/* ---------- Buttons: force theme (iOS paints native white otherwise) ---------- */
.btn { -webkit-appearance: none; appearance: none; background-color: transparent; }
.btn-lime { background-color: var(--lime); }
.btn-blue { background-color: var(--blue); }
.btn-ghost { background-color: rgba(255, 255, 255, 0.04); }

/* Group label for checkbox clusters inside .field (matches .field label) */
.field .flabel {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase; margin-bottom: 10px; color: var(--bone);
}

/* ---------- Loading ---------- */
.loading { color: transparent; font-size: 14px; padding: 4px 0; user-select: none; }
.loading::before, .loading::after {
  content: ""; display: block; height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, #1b1b1e 25%, #2b2b30 50%, #1b1b1e 75%);
  background-size: 200% 100%;
  animation: vl-shimmer 1.15s infinite linear;
}
.loading::before { margin: 6px 0; }
.loading::after { width: 62%; margin: 6px 0; }
@keyframes vl-shimmer { to { background-position: -200% 0; } }
button[disabled] { opacity: 0.55; cursor: wait; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hub-grid { grid-template-columns: 1fr; }
  .hub-member .name { display: none; }
}
@media (max-width: 700px) {
  .hub-bar-inner { padding: 0 16px; gap: 10px; }
  .portal-badge { padding: 6px 10px; font-size: 10px; }
}

/* ---------- Hub v2: layout + nav ---------- */
.hub-layout {
  display: grid; grid-template-columns: 230px 1fr; gap: 0;
  max-width: 1400px; margin: 0 auto; flex: 1; width: 100%;
}
.hub-nav {
  border-right: 1px solid var(--line);
  padding: 28px 16px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 68px; align-self: start; max-height: calc(100vh - 68px); overflow-y: auto;
}
.hub-nav-btn {
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  color: var(--bone-dim); padding: 11px 14px; border-radius: 10px;
  letter-spacing: 0.02em; white-space: nowrap;
}
.hub-nav-btn:hover { color: var(--bone); background: rgba(242, 237, 225, 0.05); }
.hub-nav-btn.active { color: var(--black); background: var(--lime); }
.hub-main .wrap { max-width: 1000px; }
.hub-section { display: none; }
.hub-section.active { display: block; }

/* ---------- Page lock: nothing may widen the document ---------- */
/* Store/Notifications tab rows used to be plain nowrap flex rows wider
   than a phone, which made the whole document horizontally pannable
   (measured Oct 25, 2026 at 390px: Store 720px, Notifications 491px,
   Training exactly 390px). The rows now scroll inside themselves, and
   the document itself is clipped so no future wide element can pan
   the app sideways. clip preserves sticky headers; hidden is the
   fallback for older browsers. */
html, body { overflow-x: hidden; overflow-x: clip; }
.notif-tabs { overflow-x: auto; scrollbar-width: none; }
.notif-tabs::-webkit-scrollbar { display: none; }
.notif-tabs .btn { flex: 0 0 auto; }
.sec-head { margin-bottom: 30px; }
.sec-head h1 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(34px, 5vw, 58px); line-height: 0.95; margin-bottom: 8px;
}
.sec-head h1 em { font-style: normal; color: var(--lime); }
.sec-head p { color: var(--bone-dim); }

/* ---------- Onboarding ---------- */
body.onboard-open { overflow: hidden; }
.onboard-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(11, 11, 12, 0.97);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
}
.onboard-overlay[hidden] { display: none; }

/* ---------- Onboarding sensory layer ---------- */
#obDots { display: flex; gap: 8px; margin: 0 0 18px; }
.ob-dot { width: 10px; height: 10px; border-radius: 50%; background: #2a2a2a; border: 1px solid var(--line); }
.ob-dot.done { background: #d6ff38; border-color: #d6ff38; }
.ob-dot.current { border-color: #d6ff38; box-shadow: 0 0 0 3px rgba(214,255,56,.25); animation: vlDotPulse 1.6s ease-in-out infinite; }
@keyframes vlDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(214,255,56,.25); }
  50% { box-shadow: 0 0 0 7px rgba(214,255,56,.12); }
}
.onboard-overlay { overflow-x: hidden; }
#obLightSweep { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 42%, rgba(214,255,56,.30) 50%, transparent 58%); transform: translateX(-110%); }
#obLightSweep.sweeping { animation: vlSweep 1.1s ease-out forwards; }
@keyframes vlSweep {
  0% { transform: translateX(-110%); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(110%); opacity: 0; }
}
.onboard-overlay.vl-glow .onboard-card { animation: vlCardGlow 1.4s ease-out; }
@keyframes vlCardGlow {
  0% { box-shadow: 0 0 0 rgba(214,255,56,0); }
  25% { box-shadow: 0 0 55px rgba(214,255,56,.45); }
  100% { box-shadow: 0 0 18px rgba(214,255,56,.12); }
}
.vl-review-glow { animation: vlPulseGlow 1.6s ease-in-out infinite; border-color: #d6ff38 !important; }
@keyframes vlPulseGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(214,255,56,.25); }
  50% { box-shadow: 0 0 22px rgba(214,255,56,.55); }
}
#vlFirstToast { position: fixed; left: 16px; right: 16px; bottom: 24px; z-index: 120; max-width: 520px; margin: 0 auto; background: #141414; border: 1px solid #d6ff38; border-radius: 16px; padding: 16px 18px; text-align: center; box-shadow: 0 0 30px rgba(214,255,56,.25); }
#vlFirstToast p { margin: 0 0 12px; font-weight: 700; }
.onboard-card {
  width: 100%; max-width: 560px; position: relative;
  border: 1px solid var(--line); border-radius: 22px; background: var(--black-2);
  padding: clamp(32px, 5vw, 52px);
}
.onboard-card h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(28px, 5vw, 44px); line-height: 1; margin: 12px 0 10px;
}
.onboard-card .body { color: var(--bone-dim); font-size: 15px; margin-bottom: 22px; }
.onboard-card .field { margin-bottom: 18px; }
.onboard-signout {
  position: absolute; top: 18px; right: 22px;
  background: none; border: none; cursor: pointer;
  color: var(--bone-dim); font-size: 13px; text-decoration: underline;
}
.onboard-signout:hover { color: var(--bone); }
.portal-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 8px; }
.portal-pick-card {
  border: 2px solid var(--line); border-radius: 16px; background: var(--black);
  padding: 26px 18px; cursor: pointer; text-align: center; color: var(--bone);
  font-family: var(--font-body); transition: border-color 0.15s ease, transform 0.15s ease;
}
.portal-pick-card:hover { transform: translateY(-2px); }
.portal-pick-card strong { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 21px; font-weight: 400; margin-bottom: 8px; }
.portal-pick-card span { font-size: 13px; color: var(--bone-dim); }
.portal-pick-card.men strong { color: var(--blue); }
.portal-pick-card.women strong { color: #ff8a7a; }
.portal-pick-card.picked.men { border-color: var(--blue); }
.portal-pick-card.picked.women { border-color: #e0392b; }

/* ---------- v2 components ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-card {
  border: 1px solid var(--line); border-radius: 14px; background: var(--black-2);
  padding: 20px 18px;
}
.stat-card .kicker {
  font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bone-dim); margin-bottom: 8px;
}
.stat-card .stat {
  font-family: var(--font-display); font-size: 34px; text-transform: uppercase; color: var(--lime);
}
.row-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 4px; border-bottom: 1px solid var(--line); width: 100%;
}
.row-item:last-child { border-bottom: none; }
.row-item > div { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.row-item strong { font-size: 15px; }
.row-item .muted, .muted { color: var(--bone-dim); font-size: 13.5px; }
button.row-item.clickable { background: none; border: none; border-bottom: 1px solid var(--line); cursor: pointer; color: var(--bone); font-family: var(--font-body); }
button.row-item.clickable:hover { background: rgba(242, 237, 225, 0.04); }
.pill {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; color: var(--bone-dim);
  white-space: nowrap;
}
.row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: none; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  color: var(--bone-dim); font-family: var(--font-body); font-weight: 700; font-size: 13px;
  padding: 8px 16px;
}
.chip:hover { color: var(--bone); border-color: var(--bone-dim); }
.chip.active { background: var(--lime); border-color: var(--lime); color: var(--black); }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
.inline-form { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 22px; }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
.detail-head h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 26px; }
.result-list { margin: 6px 0 4px; }
.coach-note { font-size: 19px; color: var(--bone); font-weight: 600; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th {
  text-align: left; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone-dim); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table tr:last-child td { border-bottom: none; }

/* ---------- v2 responsive ---------- */
@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hub-layout { grid-template-columns: 1fr; }
  .hub-nav {
    position: sticky; top: 68px; z-index: 40;
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 1px solid var(--line);
    padding: 10px 12px; max-height: none; background: rgba(11, 11, 12, 0.96);
    scrollbar-width: none;
  }
  .hub-nav::-webkit-scrollbar { display: none; }
  .hub-nav-btn { flex: 0 0 auto; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .portal-pick { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .row-item { flex-direction: column; align-items: flex-start; }
}

/* ---------- Labs + Health Trips (labs-trips.js) ---------- */
.checklist { display: flex; flex-direction: column; }
.check-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--line);
  cursor: pointer; color: var(--bone); font-size: 15px;
}
.check-row:last-child { border-bottom: none; }
.check-row input[type="checkbox"] {
  margin-top: 2px; width: 18px; height: 18px; flex: 0 0 auto;
  accent-color: var(--lime); cursor: pointer;
}
.check-row.done span { color: var(--bone-dim); text-decoration: line-through; }
.inq-status {
  background: var(--black-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--bone); font-family: var(--font-body); font-size: 13px;
  padding: 8px 10px; max-width: 150px;
}

/* ---------- Login: sign-in method tabs + password setup ---------- */
.method-tabs { display: flex; gap: 8px; margin-bottom: 26px; }
.method-tab {
  flex: 1; background: none; border: 1px solid var(--line); border-radius: 12px;
  color: var(--bone-dim); font-family: var(--font-body); font-weight: 800; font-size: 14px;
  padding: 12px 10px; cursor: pointer; letter-spacing: 0.03em;
}
.method-tab:hover { color: var(--bone); border-color: var(--bone-dim); }
.method-tab.active { background: var(--bone); border-color: var(--bone); color: var(--black); }
.linklike {
  background: none; border: none; cursor: pointer; margin-top: 20px; padding: 4px 0;
  color: var(--bone-dim); font-family: var(--font-body); font-size: 13.5px; text-decoration: underline;
}
.linklike:hover { color: var(--lime); }
.linklike[disabled] { opacity: 0.55; cursor: wait; text-decoration: none; }
.login-card .field { margin-bottom: 16px; }

/* ---------- Theme system: Day / Night / Night Shift ---------- */
:root[data-theme="day"] {
  --black: #ffffff;
  --black-2: #f5f5f5;
  --bone: #1a1a1a;
  --bone-dim: #555555;
  --lime: #4a6e00;
  --line: rgba(0, 0, 0, 0.12);
  --line-dark: rgba(0, 0, 0, 0.12);
}

/* ---------- Accessibility: visible focus indicators ---------- */
:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
.hub-nav-btn:focus-visible,
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

/* Day theme button fixes - ghost buttons need visible background on white */
:root[data-theme="day"] .btn-ghost {
  background-color: rgba(0, 0, 0, 0.06);
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
:root[data-theme="day"] .btn {
  color: #1a1a1a;
}
:root[data-theme="day"] .btn-lime {
  color: #ffffff;
}
:root[data-theme="day"] .hub-nav-btn {
  color: #555555;
}
:root[data-theme="day"] .hub-nav-btn.active {
  color: #ffffff;
}

:root[data-theme="nightshift"] {
  --black: #1a1210;
  --black-2: #241a16;
  --bone: #f5e6d3;
  --bone-dim: #c9b8a3;
  --lime: #e8d44d;
  --blue: #c8952e;
  --line: rgba(245, 230, 211, 0.12);
}

/* Alert badge */
.alert-badge {
  display: inline-block;
  background: var(--lime);
  color: #0b0b0c;
  font-size: 11px;
  font-weight: 800;
  border-radius: 10px;
  padding: 2px 7px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Alerts tab highlight */
.hub-nav-btn[data-section="alerts"].has-alerts {
  color: var(--lime);
  font-weight: 800;
}
.alert-badge {
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Workflow Graphs */
.workflow-section { margin-bottom: 32px; }
.workflow-section h3 { margin-bottom: 4px; }
.section-desc { opacity: 0.7; font-size: 14px; margin-bottom: 16px; }
.workflow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.workflow-card { background: var(--card, #1a1a1a); border: 1px solid var(--line, #333); border-radius: 12px; padding: 20px; }
.workflow-icon { font-size: 32px; margin-bottom: 8px; }
.workflow-card h4 { margin: 0 0 4px; }
.workflow-desc { font-size: 13px; opacity: 0.7; margin-bottom: 12px; }
.workflow-stats { display: flex; gap: 12px; font-size: 13px; margin-bottom: 8px; }
.pending-badge { background: var(--lime, #b8e62e); color: #000; padding: 2px 8px; border-radius: 10px; font-weight: 700; font-size: 12px; }
.workflow-last { font-size: 12px; opacity: 0.5; margin-bottom: 12px; }
.btn-view-patterns { background: transparent; border: 1px solid var(--line, #444); color: inherit; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.btn-view-patterns:hover { border-color: var(--lime, #b8e62e); }
.patterns-container { margin-top: 16px; }
.pattern-card { background: rgba(255,255,255,0.03); border: 1px solid var(--line, #333); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.pattern-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.confidence { font-size: 12px; background: rgba(184,230,46,0.15); color: var(--lime, #b8e62e); padding: 2px 8px; border-radius: 10px; }
.pattern-details { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.pattern-detail { background: rgba(255,255,255,0.05); padding: 4px 8px; border-radius: 6px; }
.pattern-insight { font-size: 14px; margin: 8px 0; padding: 8px; background: rgba(184,230,46,0.08); border-radius: 6px; }
.pattern-date { font-size: 11px; opacity: 0.5; }
.no-patterns { opacity: 0.6; font-style: italic; font-size: 14px; }

/* Measurement Requests */
.request-card { background: var(--card, #1a1a1a); border: 1px solid var(--lime, #b8e62e); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.request-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.workflow-tag { font-size: 11px; background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 10px; text-transform: uppercase; }
.request-reason { font-size: 13px; opacity: 0.8; }
.request-due { font-size: 13px; color: var(--lime, #b8e62e); }
.request-actions { display: flex; gap: 8px; margin-top: 12px; }
.btn-complete { background: var(--lime, #b8e62e); color: #000; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 700; }
.btn-dismiss { background: transparent; border: 1px solid var(--line, #444); color: inherit; padding: 8px 16px; border-radius: 8px; cursor: pointer; }

/* Session Briefing */
.briefing-section { margin-bottom: 24px; }
.briefing-card { background: var(--card, #1a1a1a); border: 1px solid var(--line, #333); border-radius: 12px; padding: 20px; }
.briefing-intensity { margin-bottom: 16px; }
.intensity-label { display: inline-block; padding: 4px 12px; border-radius: 20px; font-weight: bold; font-size: 12px; color: #000; margin-bottom: 8px; }
.briefing-alert { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); border-radius: 8px; padding: 12px; margin: 12px 0; }
.briefing-alert ul { margin: 8px 0 0 20px; padding: 0; }
.briefing-metrics { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0; }
.briefing-metrics span { background: rgba(255,255,255,0.05); padding: 6px 12px; border-radius: 20px; font-size: 13px; }
.briefing-note { margin: 8px 0; font-size: 14px; }

/* Assessment Recommendations */
.assessment-section { margin-bottom: 24px; }
.priority-note { background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.3); border-radius: 8px; padding: 12px; }
.meso-info { color: #888; font-size: 13px; }
.retest-list, .newtest-list { list-style: none; padding: 0; }
.retest-list li, .newtest-list li { background: var(--card, #1a1a1a); border: 1px solid var(--line, #333); border-radius: 8px; padding: 12px; margin-bottom: 8px; }
.priority-high { background: #fbbf24; color: #000; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; }
.priority-skip { background: #f87171; color: #000; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; }
.pattern-desc { font-size: 14px; margin: 8px 0; color: #ccc; }

/* ---------- Audit Log ---------- */
.audit-filters {
  display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.audit-filters select {
  padding: 10px 14px; font-size: 14px;
  background: var(--card, #1a1a1a); color: inherit;
  border: 1px solid var(--line, #333); border-radius: 8px;
}
.audit-list { display: flex; flex-direction: column; gap: 10px; }
.audit-entry {
  background: var(--card, #1a1a1a);
  border: 1px solid var(--line, #333);
  border-radius: 10px; padding: 14px 16px;
}
.audit-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.audit-top strong { font-size: 15px; }
.audit-badge {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px;
}
.audit-ok { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.audit-fail { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.audit-denied { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.audit-meta { font-size: 13px; color: var(--bone-dim, #888); margin-bottom: 4px; }
.audit-details { font-size: 13px; color: var(--bone, #ccc); margin-top: 6px; }

/* Numbered loops + the "needs you now" orb. The orb sits on the first
   open loop in order and moves to the next one when that loop closes. */
.loop-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--lime, #d6ff38); color: var(--lime, #d6ff38);
  font-weight: 800; font-size: 12px; margin-right: 8px; vertical-align: middle;
}
.loop-orb {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  margin-left: 8px; vertical-align: middle;
  background: radial-gradient(circle at 35% 35%, #f4ffc4, var(--lime, #d6ff38) 55%, #7ba600);
  box-shadow: 0 0 10px 3px rgba(214, 255, 56, .65), 0 0 24px 10px rgba(214, 255, 56, .30);
  animation: loopOrbPulse 1.6s ease-in-out infinite;
}
@keyframes loopOrbPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px 2px rgba(214, 255, 56, .55), 0 0 18px 6px rgba(214, 255, 56, .25); }
  50% { transform: scale(1.2); box-shadow: 0 0 14px 5px rgba(214, 255, 56, .9), 0 0 32px 14px rgba(214, 255, 56, .45); }
}
.loop-current {
  border-color: var(--lime, #d6ff38) !important;
  box-shadow: 0 0 0 1px var(--lime, #d6ff38), 0 0 18px rgba(214, 255, 56, .22);
}

/* My Program */
.prog-big { font-size: 44px; font-weight: 800; color: var(--lime, #d6ff38); margin: 8px 0 4px; }
.prog-big-of { font-size: 18px; font-weight: 700; }

/* ---------- Day theme completeness pass (Oct 25, 2026) ----------
   The day block above flips only the base vars plus a few buttons. These
   rules cover everything else that kept dark-theme colors and went
   invisible on the white day background. Every rule here is scoped to
   [data-theme="day"], so night and night-shift are untouched. Overlays
   that are intentionally dark (celebrations, wake alarm, tour tip,
   MeloStream full player, share overlay) keep their light text. */
:root[data-theme="day"] {
  --card: #ffffff;
  --bg: #ffffff;
}
/* Dark header bar and mobile nav bar go light, or their dark text vanishes. */
:root[data-theme="day"] .hub-bar {
  background: rgba(255, 255, 255, 0.94);
}
@media (max-width: 900px) {
  :root[data-theme="day"] .hub-nav {
    background: rgba(255, 255, 255, 0.96);
  }
}
:root[data-theme="day"] .hub-nav-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}
:root[data-theme="day"] button.row-item.clickable:hover {
  background: rgba(0, 0, 0, 0.04);
}
/* White-tint chips and bubbles turn into black tints on white. */
:root[data-theme="day"] .pattern-detail,
:root[data-theme="day"] .briefing-metrics span {
  background: rgba(0, 0, 0, 0.05);
}
:root[data-theme="day"] .workflow-tag {
  background: rgba(0, 0, 0, 0.07);
}
:root[data-theme="day"] .pattern-desc {
  color: #555555;
}
/* Dark-green fills need white text, not black. */
:root[data-theme="day"] .pending-badge,
:root[data-theme="day"] .btn-complete,
:root[data-theme="day"] .alert-badge {
  color: #ffffff;
}
/* Salmon accents are too pale on white. */
:root[data-theme="day"] .portal-badge.women,
:root[data-theme="day"] .portal-pick-card.women strong {
  color: #d64541;
}
/* Coach: user bubbles were dark text on dark green; coach bubbles were
   white-on-white; the chat bar fell back to near-black. */
:root[data-theme="day"] .coach-msg-user p {
  color: #ffffff;
}
:root[data-theme="day"] .coach-msg-coach p {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.10);
}
:root[data-theme="day"] .coach-gate-red strong,
:root[data-theme="day"] .coach-chip-red {
  color: #d64541;
}
/* Today: bright-lime chip borders go dark green. */
:root[data-theme="day"] .tday-done .tday-check-mark,
:root[data-theme="day"] .tday-pill-closed,
:root[data-theme="day"] .tday-color-green {
  border-color: rgba(74, 110, 0, 0.5);
}
/* MeloStream: active tab and playing icon were near-black on dark green. */
:root[data-theme="day"] .melo-tab.active,
:root[data-theme="day"] .melo-track.playing .melo-playicon {
  color: #ffffff;
}
/* Tour tip stays a dark card in every theme, so its accents and ghost
   buttons keep their bright-on-dark colors in day mode too. */
:root[data-theme="day"] .vl-tour-spot {
  border-color: #c8f04a;
}
:root[data-theme="day"] .vl-tour-tip .vl-tour-kicker {
  color: #c8f04a;
}
:root[data-theme="day"] .vl-tour-tip .btn-ghost {
  background-color: rgba(255, 255, 255, 0.08);
  color: #f2f2f0;
  border-color: rgba(255, 255, 255, 0.2);
}