/* css/home.css — Account-holder Home (Pro dashboard + onboarding).
   Uses the shared design tokens from base.css. */

/* max-width:min(860px,100%) — never exceed the viewport on mobile. A plain
   860px lets this flex item (child of the column-flex .app-content) grow to
   its widest descendant's min-content and push the whole dashboard off-screen. */
/* width:100% is LOAD-BEARING: .app-content is a flex column, so margin:0 auto
   without an explicit width makes .hm-wrap shrink to content (the "still capped"
   bug) instead of filling to max-width. */
.hm-wrap { width: 100%; max-width: min(1200px, 100%); margin: 0 auto; padding: 22px var(--page-px) 120px; min-width: 0; }

/* Home has its own coffee link in the account bar, so drop the floating FAB here. */
body.page-home .coffee-fab { display: none; }
/* Account-bar coffee: reuse the FAB's amber "coffee" styling. */
.hm-acct-lnk.coffee { background: linear-gradient(140deg, #2a1d12, #1a120a 60%, #0e0905);
  border-color: rgba(245, 158, 11, .45); color: #f5b454;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, .12) inset, 0 0 16px rgba(245, 158, 11, .15); }
.hm-acct-lnk.coffee:hover { border-color: rgba(245, 158, 11, .8); color: #f5b454; }

/* Desktop: two columns — glance widgets (president/clock/transfer) on the left,
   the springboard on the right — so a wide screen isn't a narrow centered column
   with big empty margins. Single column on mobile. Drilling into a folder/app
   hides #hmGlance (display:none), so .hm-launch then fills the full width. */
@media (min-width: 900px) {
  .hm-body { display: flex; align-items: flex-start; gap: 30px; }
  #hmGlance { flex: 1.1 1 0; min-width: 0; }
  .hm-launch { flex: 1 1 0; min-width: 0; }
}

/* header */
.hm-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.hm-eyebrow { font: 600 11px/1 var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.hm-title { font: 700 26px/1.1 var(--font-ui); color: var(--text-1); margin: 0; }
.hm-wz-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--accent-border); border-radius: var(--r-2xl); background: var(--accent-glow); color: var(--text-1); font: 600 14px/1 var(--font-ui); }
.hm-wz-badge b { font-family: var(--font-data); color: var(--accent); }

/* generic card */
.hm-card { border: 1px solid var(--border-1); background: var(--glass-bg); border-radius: var(--r-2xl); padding: 20px; margin-bottom: 16px; }
.hm-card h2 { font: 600 16px/1.2 var(--font-ui); color: var(--text-1); margin: 0 0 4px; }
.hm-card .hm-sub { font: 400 13px/1.5 var(--font-ui); color: var(--text-3); margin: 0 0 16px; }

/* status / messages */
.hm-msg { font: 500 13px/1.4 var(--font-ui); margin-top: 12px; min-height: 18px; }
.hm-msg.ok  { color: var(--accent); }
.hm-msg.err { color: var(--red); }
.hm-center { text-align: center; padding: 60px 0; color: var(--text-3); }

/* The bare spinner panel that used to live here (.hm-load/.hm-spinner/
   .hm-load-text) is gone — both the page-level wait and every tab now use
   the one loader below, so there is a single waiting state to maintain. */
@keyframes hm-spin { to { transform: rotate(360deg); } }

/* ── informative tab loader (js/home-loader.js) ────────────────────
   A tab can take seconds: module download, then a worker read across a
   week of sweeps. This states the work in flight and reserves the shape
   of the answer, so waiting feels like progress rather than a stall. */
.hm-ld { display: flex; flex-direction: column; gap: 14px; }
/* page-level wait: hold the fold so the footer doesn't ride up and then
   get shoved back down when the dashboard lands */
.hm-ld-tall { min-height: calc(100vh - 300px); min-height: calc(100dvh - 300px); }
.hm-ld-head { display: flex; align-items: center; gap: 10px; }
.hm-ld-spin {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid var(--border-1);
  border-top-color: var(--accent);
  animation: hm-spin .8s linear infinite;
}
.hm-ld-title { font: 600 15px/1.2 var(--font-ui); color: var(--text-1); }
.hm-ld-elapsed { margin-left: auto; font: 500 12px/1 var(--font-data); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Indeterminate on purpose — a sweep, not a fill. We have no true
   percentage inside a single fetch, so we never draw one. */
.hm-ld-track { position: relative; height: 3px; border-radius: 3px; background: var(--border-1); overflow: hidden; }
.hm-ld-sweep {
  position: absolute; inset: 0 auto 0 0; width: 38%; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: hm-ld-sweep 1.5s var(--ease, ease-in-out) infinite;
}
@keyframes hm-ld-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

.hm-ld-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.hm-ld-step { display: flex; align-items: center; gap: 9px; font: 400 13px/1.35 var(--font-ui); color: var(--text-3); transition: color .2s var(--ease); }
.hm-ld-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--border-1); transition: background .2s var(--ease), box-shadow .2s var(--ease); }
/* Steps we have moved past dim down but are NOT ticked — we time them,
   we don't verify them, and a checkmark would claim more than we know. */
.hm-ld-step.past { color: var(--text-3); opacity: .5; }
.hm-ld-step.past .hm-ld-dot { background: var(--accent); opacity: .45; }
.hm-ld-step.cur { color: var(--text-2); }
.hm-ld-step.cur .hm-ld-dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); animation: hm-ld-pulse 1.4s ease-in-out infinite; }
@keyframes hm-ld-pulse { 50% { box-shadow: 0 0 0 7px transparent; } }

/* The one place a real count may appear ("3 of 8 boards read") — data
   font, because it is a measurement and not prose. Only shown when a
   caller can genuinely count; never a guess. */
.hm-ld-detail { font: 500 12px/1.4 var(--font-data); color: var(--accent); font-variant-numeric: tabular-nums; }

.hm-ld-note { font: 400 12px/1.5 var(--font-ui); color: var(--text-3); padding: 9px 11px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--border-1); }
.hm-ld-note.warn { color: var(--amber); background: var(--amber-glow); border-color: var(--amber-border); }

/* skeletons — same geometry as the content that replaces them */
.hm-ld-sk {
  display: block; border-radius: 6px; background: var(--bg-2);
  background-image: linear-gradient(90deg, transparent 0%, rgba(128,128,128,.16) 50%, transparent 100%);
  background-size: 260px 100%; background-repeat: no-repeat;
  animation: hm-ld-sheen 1.5s linear infinite;
}
@keyframes hm-ld-sheen { 0% { background-position: -260px 0; } 100% { background-position: calc(100% + 260px) 0; } }

.hm-ld-rows { display: flex; flex-direction: column; gap: 6px; }
.hm-ld-row { display: flex; align-items: center; gap: 10px; height: 30px; }
.hm-ld-rank { width: 18px; height: 10px; flex: none; }
.hm-ld-name { height: 11px; max-width: 40%; }
.hm-ld-bar  { height: 10px; flex: 1 1 auto; border-radius: 5px; }
.hm-ld-val  { width: 48px; height: 11px; flex: none; }

.hm-ld-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
/* 64px ≈ a real .hm-stat (12px padding + 22px value + label), so the
   Overview grid doesn't resize when the numbers arrive */
.hm-ld-tile { height: 64px; border-radius: var(--r-2xl); }

.hm-ld-panel { display: flex; flex-direction: column; gap: 10px; }
.hm-ld-line { height: 11px; }
.hm-ld-line.w60 { width: 60%; }
.hm-ld-line.w40 { width: 40%; }
.hm-ld-block { height: 96px; border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  .hm-ld-spin { animation-duration: 2.4s; }
  .hm-ld-sweep, .hm-ld-sk, .hm-ld-step.cur .hm-ld-dot { animation: none; }
  .hm-ld-sweep { width: 100%; opacity: .5; }
}

/* wizard progress */
.hm-steps { display: flex; gap: 8px; margin-bottom: 20px; }
.hm-step-dot { flex: 1; height: 4px; border-radius: 3px; background: var(--border-1); }
.hm-step-dot.done { background: var(--accent); }
.hm-step-dot.cur  { background: var(--accent); opacity: .55; }
.hm-step-tag { font: 600 11px/1 var(--font-data); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }

/* inputs */
.hm-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hm-input { background: var(--bg-2); border: 1px solid var(--border-1); color: var(--text-1); border-radius: 10px; padding: 11px 13px; font: 500 15px/1 var(--font-ui); width: 140px; }
.hm-input:focus { outline: none; border-color: var(--accent-border); }
.hm-input.wide { width: 100%; }

/* buttons */
.hm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 10px; font: 600 14px/1 var(--font-ui); cursor: pointer; border: 1px solid var(--border-1); background: var(--bg-2); color: var(--text-1); transition: filter .15s var(--ease); }
.hm-btn:hover { filter: brightness(1.12); }
.hm-btn:disabled { opacity: .5; cursor: not-allowed; }
.hm-btn.primary { background: var(--accent); border-color: var(--accent); color: #04140b; }
.hm-btn.ghost { background: none; }
.hm-btn-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }

/* alliance picker list */
.hm-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; max-height: 340px; overflow: auto; }
.hm-ally { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--border-1); border-radius: 10px; background: var(--bg-1); cursor: pointer; transition: border-color .15s var(--ease); }
.hm-ally:hover { border-color: var(--border-2); }
.hm-ally.sel { border-color: var(--accent); background: var(--accent-glow); }
.hm-ally-abbr { font: 700 13px/1 var(--font-data); color: var(--accent); min-width: 52px; }
.hm-ally-name { flex: 1; font: 500 14px/1.2 var(--font-ui); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-ally-count { font: 500 12px/1 var(--font-data); color: var(--text-3); }
.hm-ally-check { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border-2); display: grid; place-items: center; color: transparent; }
.hm-ally.sel .hm-ally-check { background: var(--accent); border-color: var(--accent); color: #04140b; }

/* chips */
.hm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hm-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--border-1); background: var(--bg-1); font: 600 13px/1 var(--font-ui); color: var(--text-1); }
.hm-chip .abbr { font-family: var(--font-data); color: var(--accent); }
.hm-chip.opp .abbr { color: var(--red); }
.hm-chip .wz { font: 500 11px/1 var(--font-data); color: var(--text-3); }
.hm-chip button { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.hm-chip button:hover { color: var(--red); }

/* dashboard quick actions */
.hm-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.hm-action { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--border-1); border-radius: var(--r-2xl); background: var(--bg-1); color: var(--text-1); text-decoration: none; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.hm-action:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.hm-action .ic { width: 26px; height: 26px; color: var(--accent); }
.hm-action .ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.hm-action .t { font: 600 15px/1.2 var(--font-ui); }
.hm-action .d { font: 400 12px/1.4 var(--font-ui); color: var(--text-3); }

.hm-muted { font: 400 12px/1.5 var(--font-ui); color: var(--text-3); margin-top: 8px; }

/* ── header right: WZ badge + server/local clock toggle ── */
.hm-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hm-clock-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border-1); border-radius: var(--r-2xl); background: var(--bg-2); color: var(--text-1); font: 700 14px/1 var(--font-data); cursor: pointer; }
.hm-clock-toggle:hover { border-color: var(--accent-border); }
.hm-clock-mode { font: 600 10px/1 var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }

/* ── live timers strip ── */
.hm-timers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.hm-timer { border: 1px solid var(--border-1); background: var(--glass-bg); border-radius: var(--r-2xl); padding: 14px; min-width: 0; }
.hm-timer-title { font: 600 11px/1 var(--font-data); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.hm-timer-sub { font: 600 13px/1.2 var(--font-ui); color: var(--accent); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-timer-val { font: 700 22px/1 var(--font-data); color: var(--text-1); letter-spacing: .02em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.hm-timer-meta { font: 500 11px/1.3 var(--font-ui); color: var(--text-3); margin-top: 6px; }

.hm-xfer { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--border-1); border-radius: var(--r-2xl); background: var(--bg-1); margin-bottom: 16px; }
.hm-xfer-label { font: 600 11px/1 var(--font-data); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.hm-xfer-val { font: 700 16px/1 var(--font-data); color: var(--accent); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.hm-xfer-sub { font: 500 12px/1 var(--font-ui); color: var(--text-3); }

/* ── roster ── */
.hm-roster-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hm-roster-head h2 { margin: 0; }
.hm-ally-toggle { display: inline-flex; border: 1px solid var(--border-1); border-radius: 10px; overflow: hidden; }
.hm-at-opt { padding: 6px 14px; font: 700 12px/1 var(--font-data); color: var(--text-3); background: none; border: none; cursor: pointer; }
.hm-at-opt.active { background: var(--accent-glow); color: var(--accent); }
.hm-roster-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.hm-rmeta { font: 500 12px/1.2 var(--font-ui); color: var(--text-3); }
.hm-rmeta b { color: var(--text-1); }

.hm-memlist { display: flex; flex-direction: column; gap: 3px; max-height: 520px; overflow-y: auto; }
.hm-mem { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: var(--bg-1); cursor: default; }
.hm-av { position: relative; width: 30px; height: 30px; border-radius: 8px; overflow: hidden; display: inline-grid; place-items: center; background: var(--surface-2, var(--bg-1)); border: 1px solid var(--line); }
.hm-av-i { font: 700 11px/1 var(--font-data); color: var(--text-3); letter-spacing: .02em; }
.hm-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-mem:hover { background: var(--bg-2); }
/* Onboarding "which player is you?" rows: explicit avatar + (name over power),
   so they don't inherit the roster's 3-column grid. */
.hm-mem-pick { display: flex; align-items: center; gap: 13px; cursor: pointer; padding: 9px 11px; }
.hm-mem-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hm-mem-pick .hm-mem-pw { color: var(--text-3); }
/* Bigger avatar in the onboarding "which player is you?" picker (only) —
   the compact 30px roster avatars elsewhere keep their size. */
.hm-mem-pick .hm-av { width: 46px; height: 46px; border-radius: 10px; }
.hm-mem-pick .hm-av-i { font-size: 16px; }
.hm-mem.me { background: var(--accent-glow); border: 1px solid var(--accent-border); }
.hm-mem-rk { font: 500 12px/1 var(--font-data); color: var(--text-3); text-align: right; }
.hm-mem-name { font: 500 14px/1.2 var(--font-ui); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-mem-pw { font: 600 13px/1 var(--font-data); color: var(--text-2); }
.hm-me-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #04140b; font: 700 9px/1.6 var(--font-data); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }

/* roster FSP editing (add/edit own alliance's roster) */
.hm-roster-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.hm-roster-tools .hm-tt-msg { margin-right: auto; }
.hm-roster-tool-btns { display: inline-flex; gap: 8px; }
.hm-mem-fsplbl { font: 700 8px/1 var(--font-data); letter-spacing: .06em; color: var(--text-3); text-transform: uppercase; vertical-align: 1px; }
.hm-mem-noset { font: 500 12px/1 var(--font-ui); color: var(--text-3); opacity: .8; }
/* "assumed" badge — hero power estimated for a member not on the ranking board;
   blank the hero field to keep it, or type a value to override. */
.hm-mem-assumed { font: 700 8px/1 var(--font-data); letter-spacing: .04em; text-transform: uppercase;
  color: var(--amber, #f0b445); padding: 1px 5px; margin-left: 4px; border-radius: 10px;
  background: color-mix(in srgb, var(--amber, #f0b445) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber, #f0b445) 32%, transparent); vertical-align: 1px; }
.hm-mem-hidden { opacity: .5; }
.hm-mem-edit { display: inline-flex; align-items: center; gap: 4px; }
.hm-fsp-in, .hm-hp-in { width: 60px; padding: 6px 8px; border: 1px solid var(--border-1); border-radius: 8px; background: var(--bg-2);
  color: var(--text-1); font: 600 13px/1 var(--font-data); text-align: right; }
.hm-hp-in { color: var(--text-2); }
.hm-fsp-arrow { font: 700 11px/1 var(--font-data); color: var(--text-3); }
.hm-fsp-in:focus, .hm-hp-in:focus { outline: none; border-color: var(--accent-border); }
.hm-fsp-in::-webkit-outer-spin-button, .hm-fsp-in::-webkit-inner-spin-button,
.hm-hp-in::-webkit-outer-spin-button, .hm-hp-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hm-fsp-in, .hm-hp-in { -moz-appearance: textfield; }
.hm-fsp-unit { font: 700 11px/1 var(--font-data); color: var(--text-3); }
.hm-nat-in { width: 108px; padding: 6px 6px; border: 1px solid var(--border-1); border-radius: 8px; background: var(--bg-2);
  color: var(--text-2); font: 600 12px/1.2 var(--font-ui); cursor: pointer; }
.hm-nat-in:focus { outline: none; border-color: var(--accent-border); }
.hm-mem-nation { font: 600 11px/1 var(--font-ui); color: var(--text-3); margin-right: 8px; }
.hm-hide-btn { width: 30px; height: 30px; border: 1px solid var(--border-1); border-radius: 8px; background: var(--bg-1);
  color: var(--text-3); font-size: 13px; line-height: 1; cursor: pointer; }
.hm-hide-btn.on { border-color: var(--red, #ef4444); background: rgba(239,68,68,.08); }

/* rank pills */
.hm-rk { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font: 700 9px/16px var(--font-data); vertical-align: middle; }
.hm-rk-r5 { color: var(--accent); background: var(--accent-glow); border: 1px solid var(--accent-border); }
.hm-rk-r4 { color: var(--text-1); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.hm-rk-r3, .hm-rk-r2, .hm-rk-r1 { color: var(--text-3); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }

/* member-search list (onboarding "who am I") */
/* Who-am-I picker rows have only name + power (2 cols), unlike the 3-col
   roster rows (rank · name · value), so they need their own template or the
   name gets squeezed into the 30px rank column.
   ⚠ SELECT ON .hm-mem-pick, NEVER ON [data-uid]. This rule used to key off
   data-uid, which was unique to the picker at the time — then roster rows
   gained data-uid so their names could open the shared player modal, and
   silently inherited this 2-column template. With three children in two
   columns the rank cell took the whole 1fr (234px of a 325px row), the name
   was crushed and the power wrapped onto a second line: the "broken alliance
   roster". The attribute no longer identifies the picker; the class does. */
.hm-mem-pick { grid-template-columns: 1fr auto; cursor: pointer; }
/* Hover affordance is correct for BOTH kinds — picker rows select, roster
   rows open the player modal — so this one stays on [data-uid]. */
.hm-memlist .hm-mem[data-uid]:hover { border: 1px solid var(--accent-border); }
/* Clickable roster rows keep the 3-column template; only the cursor changes. */
.hm-mem[data-uid]:not(.hm-mem-pick) { cursor: pointer; }

/* alliance picker: primary / secondary buttons */
.hm-ally.sel-p { border-color: var(--accent); background: var(--accent-glow); }
.hm-ally.sel-s { border-color: var(--border-2); background: var(--bg-2); }
.hm-ally-pick { display: inline-flex; gap: 6px; }
.hm-pick { padding: 5px 10px; border-radius: 8px; font: 600 11px/1 var(--font-ui); cursor: pointer; border: 1px solid var(--border-1); background: var(--bg-2); color: var(--text-3); }
.hm-pick.on { background: var(--accent); border-color: var(--accent); color: #04140b; }

@media (max-width: 720px) {
  .hm-timers { grid-template-columns: repeat(2, 1fr); }
  .hm-timer-val { font-size: 19px; }
  .hm-ally { flex-wrap: wrap; }
  .hm-ally-pick { width: 100%; margin-top: 6px; }
}

/* ── added: Pro badge · warzone standing · rivals head-to-head ── */
.hm-pro-row { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hm-pro-badge { font: 700 10px/1 var(--font-data); letter-spacing: .8px; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border-1); }
.hm-pro-badge.ok   { color: var(--accent); border-color: var(--accent-border); background: var(--accent-glow); }
.hm-pro-badge.warn { color: var(--amber, #f59e0b); border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10); }
.hm-pro-badge.free { color: #f5b454; border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.08); text-decoration: none; }
.hm-pro-badge.free:hover { border-color: rgba(245,158,11,.75); }
.hm-btn.small { padding: 5px 12px; font-size: 12px; }

/* The .hm-stat* family styled the Warzone standing card, removed 2026-07-30 —
   the embedded Server Intel below leads with the same numbers. */

/* Embedded full Server Intel inside the Warzone → Standing app. The frame's
   height is driven from JS (home.js sizes it to the height the embed reports);
   the value here is only the pre-measurement height. */
.hm-intel-host { margin-top: 14px; padding: 0; overflow: hidden; }
.hm-intel-head { display: flex; align-items: center; gap: 9px; padding: 13px 16px;
  border-bottom: 1px solid var(--border-1); font: 600 13px/1 var(--font-ui); color: var(--text-1); }
.hm-intel-head svg { width: 17px; height: 17px; color: var(--accent); flex: 0 0 auto; }
.hm-intel-head > span { min-width: 0; }
.hm-intel-frame { display: block; width: 100%; height: 520px; border: 0; background: transparent; }

/* While the embed boots it runs through Intel's own segment/warzone picker
   chrome — hidden behind a skeleton until it posts `lws-embed-ready`.
   visibility (not display) so the frame still lays out, loads and measures. */
.hm-intel-body { position: relative; }
.hm-intel-body[data-embed-loading] .hm-intel-frame { visibility: hidden; }
.hm-intel-skel { display: none; }
.hm-intel-body[data-embed-loading] .hm-intel-skel {
  display: grid; gap: 14px; align-content: start;
  position: absolute; inset: 0; padding: 16px; overflow: hidden;
}

.hm-h2h { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border-1); }
.hm-h2h:first-of-type { border-top: none; }
.hm-h2h-side { display: flex; flex-direction: column; gap: 3px; font: 600 13px/1.2 var(--font-ui); color: var(--text-3); }
.hm-h2h-side:nth-child(3) { text-align: right; align-items: flex-end; }
.hm-h2h-side b { font: 800 16px/1 var(--font-ui); color: var(--text-1); }
.hm-h2h-side.lead b { color: var(--accent); }
.hm-h2h-side .wz { font: 500 10px/1 var(--font-data); color: var(--text-3); }
.hm-h2h-vs { font: 700 12px/1 var(--font-data); color: var(--text-3); white-space: nowrap; }
.hm-h2h-rm { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.hm-h2h-rm:hover { color: var(--red); }
.hm-h2h-label { font: 500 11px/1 var(--font-data); color: var(--text-3); margin: -4px 0 4px; }
.hm-rival-add { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-1); }

/* ── added (slice 1): R5 banner · tabs · tab panels · stubs ────── */
.hm-r5 { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 18px;
  border: 1px solid rgba(251,191,36,.35); border-radius: var(--r-2xl);
  background: linear-gradient(90deg, rgba(251,191,36,.12), rgba(251,191,36,.02)); }
.hm-r5.hidden { display: none; }
.hm-r5-crown { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(251,191,36,.4)); }
.hm-r5-label { font: 700 10px/1 var(--font-data); letter-spacing: 1.2px; text-transform: uppercase; color: #fbbf24; }
.hm-r5-name { font: 800 20px/1.1 var(--font-ui); color: var(--text-1); margin-top: 4px; }
.hm-r5-sub { font: 500 12px/1 var(--font-data); color: var(--text-3); margin-top: 4px; }

/* min-width:0 so this horizontal scroller doesn't report its 6-tab
   min-content up to .hm-wrap and blow out the page width — the tabs
   scroll inside their own strip instead. */
/* Sticky footer: the home content is short (a springboard), so grow it to
   push the layout.js footer to the viewport bottom instead of floating. */
.hm-wrap { flex: 1 0 auto; }

/* ── Account nav (top-of-home quick links + account actions) ── */
.hm-acct { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.hm-acct-sp { flex: 1; }
.hm-acct-lnk { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface-2, var(--bg-1)); color: var(--text-2);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .15s var(--ease), border-color .15s var(--ease); }
.hm-acct-lnk:hover { color: var(--accent); border-color: var(--accent-border); }
.hm-acct-lnk svg { width: 19px; height: 19px; }
#hmSignOut { color: var(--text-3); }
#hmSignOut:hover { color: var(--danger, #dc2626); border-color: var(--danger, #dc2626); }

/* ── One glanceable clock card, tap to cycle (Arms · VS · Reset · Season) ── */
.hm-timer1 { display: block; width: 100%; text-align: left; cursor: pointer; margin-bottom: 12px;
  padding: 14px 16px; border: 1px solid var(--border-1); background: var(--glass-bg);
  border-radius: var(--r-2xl); color: var(--text-1); -webkit-tap-highlight-color: transparent;
  transition: border-color .15s var(--ease); }
.hm-timer1:hover { border-color: var(--accent-border); }
.hm-timer1:active { transform: scale(.995); }
.hm-t1-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hm-t1-title { font: 600 12px/1.1 var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.hm-t1-dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.hm-t1-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--border-1); transition: background .15s var(--ease); }
.hm-t1-dots span.on { background: var(--accent); }
.hm-t1-val { margin-top: 6px; font: 700 30px/1 var(--font-data); letter-spacing: .02em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.hm-t1-meta { margin-top: 6px; font: 500 12px/1.3 var(--font-ui); color: var(--text-3); }
@media (max-width: 560px) { .hm-t1-val { font-size: 26px; } }

/* ── Springboard (phone-style home screen) ── */
.hm-spring { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 14px 8px; margin-top: 20px; }
.hm-spring[hidden] { display: none; }
.hm-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 2px;
  background: none; border: 0; cursor: pointer; color: var(--text-2); -webkit-tap-highlight-color: transparent; }
.hm-tile-ic { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px;
  color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .14s var(--ease); }
.hm-tile.locked .hm-tile-ic { opacity: .5; filter: grayscale(.35); }
.hm-tile-lock { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--card); border: 1px solid var(--line); color: var(--text-2); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.hm-tile-lock svg { width: 12px; height: 12px; }
.hm-tile-ic svg { width: 30px; height: 30px; }
.hm-tile:hover .hm-tile-ic { transform: translateY(-3px) scale(1.04); }
.hm-tile:active .hm-tile-ic { transform: scale(.94); }
.hm-tile-lb { font: 600 12px/1.1 var(--font-ui); color: var(--text-2); text-align: center; }

/* nav bar shown in folder / app view */
.hm-nav { display: flex; align-items: center; gap: 10px; margin-top: 18px; margin-bottom: 4px; }
.hm-nav[hidden] { display: none; }
.hm-nav-back { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2, var(--bg-1)); color: var(--text-1); cursor: pointer; }
.hm-nav-back svg { width: 22px; height: 22px; }
.hm-nav-back:hover { border-color: var(--accent-border); color: var(--accent); }
.hm-nav-title { font: 800 20px/1 var(--font-data); color: var(--text-1); }

.hm-apps { margin-top: 14px; }
.hm-apps[hidden] { display: none; }
.hm-app[hidden] { display: none; }
.hm-app > .hm-card { margin-top: 0; }
.hm-app > .hm-card + .hm-card { margin-top: 16px; }
@media (max-width: 380px) { .hm-spring { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); } .hm-tile-ic { width: 58px; height: 58px; } }

.hm-stub { text-align: center; }
.hm-stub .hm-sub { max-width: 52ch; margin: 8px auto 16px; }
.hm-stub-soon { display: inline-block; font: 700 11px/1 var(--font-data); letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-3); padding: 8px 14px; border-radius: 999px; border: 1px dashed var(--border-1); }

/* ── 📅 Week Plan skeleton (slice 2 shell — static placeholder) ──── */
.hm-wk-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.hm-wk-day { display: flex; flex-direction: column; gap: 4px; padding: 8px 6px; text-align: center;
  border: 1px solid var(--border-1); border-radius: 10px; background: var(--bg-2); min-width: 0; }
.hm-wk-dn { font: 700 11px/1 var(--font-data); letter-spacing: .5px; text-transform: uppercase; color: var(--text-2); }
.hm-wk-dt { font-size: 10.5px; line-height: 1.25; color: var(--text-3); word-break: break-word; }
.hm-wk-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.hm-wk-slot { padding: 12px; border: 1px dashed var(--border-1); border-radius: 12px; background: var(--bg-2); }
.hm-wk-st { font-weight: 700; font-size: 13px; color: var(--text-1); margin-bottom: 4px; }
.hm-wk-sh { font-size: 12px; line-height: 1.35; color: var(--text-3); }
.hm-wk-warn { color: var(--warn, #f59e0b); font-weight: 700; white-space: nowrap; }
@media (max-width: 560px) {
  .hm-wk-strip { grid-template-columns: repeat(4, 1fr); }
}

/* ── added (slice 2): in-home DSB/CSB team builder ────────────── */
.hm-tt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hm-tt-mirror { font: 600 12px/1 var(--font-ui); color: var(--text-2, var(--text-1)); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.hm-tt-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.hm-tt-msg { font: 500 12px/1 var(--font-data); color: var(--text-3); }
.hm-tt-msg.ok { color: var(--accent); } .hm-tt-msg.err { color: var(--red); }

.hm-tt-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
@media (max-width: 560px) { .hm-tt-sides { grid-template-columns: 1fr; } }
.hm-tt-side { border: 1px solid var(--border-1); border-radius: var(--r-2xl); padding: 12px 14px; background: var(--bg-1); }
.hm-tt-side-head { font: 700 14px/1.2 var(--font-ui); color: var(--text-1); display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.hm-tt-side-meta { font: 500 11px/1 var(--font-data); color: var(--text-3); }
.hm-tt-slot-lbl { font: 600 10px/1 var(--font-data); letter-spacing: .8px; text-transform: uppercase; color: var(--text-3); margin: 10px 0 6px; }
.hm-tt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-tt-chip { font: 500 11.5px/1 var(--font-ui); color: var(--text-1); padding: 5px 9px; border-radius: 999px; border: 1px solid var(--border-1); background: var(--glass-bg-3, var(--bg-2)); }
.hm-tt-chip b { color: var(--accent); font-family: var(--font-data); margin-left: 4px; }
/* assumed-power member: hero power estimated, not a confirmed board value */
.hm-tt-chip.assumed { border-color: color-mix(in srgb, var(--amber, #f0b445) 34%, transparent); }
.hm-tt-chip.assumed b { color: var(--amber, #f0b445); }

/* First-squad type dot + team type-mix line */
.hm-type-dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; vertical-align: middle; flex: 0 0 auto; }
.hm-tt-mix { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; font: 700 11.5px/1 var(--font-data); color: var(--text-1); }
.hm-mix-part { display: inline-flex; align-items: center; gap: 5px; }
.hm-mix-known { margin-left: auto; font-weight: 500; color: var(--text-3); font-size: 10px; letter-spacing: .5px; }

.hm-tt-roster { margin-top: 16px; border-top: 1px solid var(--border-1); }
.hm-tt-roster-head { font: 600 11px/1 var(--font-data); letter-spacing: .5px; text-transform: uppercase; color: var(--text-3); padding: 12px 0 8px; }
.hm-tt-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-1); }
.hm-tt-row:first-of-type { border-top: none; }
.hm-tt-row.assigned { opacity: 1; }
.hm-tt-name { font: 600 13.5px/1.2 var(--font-ui); color: var(--text-1); display: flex; align-items: center; gap: 6px; min-width: 0; }
.hm-tt-rank { font: 700 9px/1 var(--font-data); color: var(--accent); border: 1px solid var(--accent-border); border-radius: 4px; padding: 2px 4px; }
.hm-tt-fsp { font: 600 12px/1 var(--font-data); color: var(--text-3); font-variant-numeric: tabular-nums; }
.hm-tt-ab { display: inline-flex; gap: 4px; }
.hm-tt-pick { width: 30px; height: 28px; border-radius: var(--r-md, 8px); border: 1px solid var(--border-1); background: var(--bg-1); color: var(--text-3); font: 700 12px/1 var(--font-data); cursor: pointer; }
.hm-tt-pick.on.a { color: #04140c; background: var(--accent); border-color: var(--accent); }
.hm-tt-pick.on.b { color: #fff; background: #6366f1; border-color: #6366f1; }

/* ── added (slice 3): squads builder ──────────────────────────── */
.hm-sq-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.hm-sq-tab { padding: 8px 13px; border-radius: 999px; cursor: pointer; border: 1px solid var(--border-1);
  background: var(--bg-1); color: var(--text-2, var(--text-1)); font: 700 12.5px/1 var(--font-ui); }
.hm-sq-tab.active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-glow); }
.hm-sq-tab.hm-sq-new { color: var(--text-3); border-style: dashed; }
.hm-sq-n { font-family: var(--font-data); font-size: 10px; opacity: .8; margin-left: 3px; }

.hm-sq-panel-head { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.hm-sq-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.hm-sq-role { border: 1px solid var(--border-1); border-radius: var(--r-2xl); padding: 10px 12px; background: var(--bg-1); }
.hm-sq-role-lbl { font: 700 12px/1 var(--font-ui); color: var(--text-1); margin-bottom: 8px; }

.hm-sq-roster { margin-top: 6px; }
.hm-sq-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-1); }
.hm-sq-row:first-child { border-top: none; }
.hm-sq-pick { display: inline-flex; gap: 4px; }
.hm-sq-role-btn { min-width: 40px; height: 28px; border-radius: var(--r-md, 8px); border: 1px solid var(--border-1);
  background: var(--bg-1); color: var(--text-3); font: 700 11px/1 var(--font-data); cursor: pointer; }
.hm-sq-role-btn.on.attack   { color: #04140c; background: var(--accent);  border-color: var(--accent); }
.hm-sq-role-btn.on.rally    { color: #fff; background: #f59e0b; border-color: #f59e0b; }
.hm-sq-role-btn.on.defend   { color: #fff; background: #3b82f6; border-color: #3b82f6; }
.hm-sq-role-btn.on.garrison { color: #fff; background: #8b5cf6; border-color: #8b5cf6; }

/* ── added (slice 4): in-home announcement builder ────────────── */
.hm-an-full { font: 600 12px/1 var(--font-data); color: var(--accent); text-decoration: none; white-space: nowrap; }
.hm-an-full:hover { text-decoration: underline; }
.hm-an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.hm-an-field { display: flex; flex-direction: column; gap: 5px; }
.hm-an-field > span { font: 600 10px/1 var(--font-data); letter-spacing: .6px; text-transform: uppercase; color: var(--text-3); }
.hm-an-zones-lbl { font: 600 10px/1 var(--font-data); letter-spacing: .6px; text-transform: uppercase; color: var(--text-3); margin: 4px 0 8px; }
.hm-an-zones { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-an-zone { padding: 7px 11px; border-radius: 999px; cursor: pointer; border: 1px solid var(--border-1);
  background: var(--bg-1); color: var(--text-3); font: 600 11.5px/1 var(--font-data); }
.hm-an-zone.on { color: var(--accent); border-color: var(--accent-border); background: var(--accent-glow); }
.hm-an-out-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 8px; font: 700 12px/1 var(--font-data); letter-spacing: .5px; text-transform: uppercase; color: var(--text-3); }
.hm-an-pre { white-space: pre-wrap; word-break: break-word; font: 500 12.5px/1.5 var(--font-data); color: var(--text-1);
  background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--r-2xl); padding: 14px; margin: 0; max-height: 420px; overflow: auto; }

/* Timezone picker trigger (mobile) — the 18-chip grid is a desktop
   affordance; on a phone this summary button opens js/zone-picker.js.
   Hide-only rules so neither side's own `display` gets clobbered. */
@media (max-width: 768px) { .hm-an-desk { display: none !important; } }
@media (min-width: 769px) { .hm-an-mob  { display: none !important; } }
.hm-an-picker { width: 100%; min-height: 48px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  padding: 9px 13px; border: 1px solid var(--border-1); border-radius: var(--r-lg); background: var(--bg-1); text-align: left; cursor: pointer; }
.hm-an-picker:active { border-color: var(--accent-border); }
.hm-an-picker-val { font: 600 13px/1.35 var(--font-ui); color: var(--text-1); }
.hm-an-picker-cta { font: 600 11px/1 var(--font-data); color: var(--accent); }

/* 500-char in-game budget meter (js/announce-fit.js). State class on
   the wrapper drives the bar, the count and the note. Mirrors .wt-budget. */
.hm-an-budget { --hm-an-c: var(--text-2); margin-top: 10px; }
.hm-an-budget.ok { --hm-an-c: var(--accent); }
.hm-an-budget.near { --hm-an-c: var(--amber); }
.hm-an-budget.over, .hm-an-budget.missing { --hm-an-c: var(--red); }
.hm-an-budget-bar { height: 4px; border-radius: 999px; background: var(--border-1); overflow: hidden; }
.hm-an-budget-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--hm-an-c); transition: width .18s ease; }
.hm-an-budget-row { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.hm-an-budget-count { font: 700 13px/1 var(--font-data); color: var(--hm-an-c); }
.hm-an-budget-cap { font-size: 11.5px; color: var(--text-3); }
.hm-an-budget-note { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-2); }
.hm-an-budget.over .hm-an-budget-note, .hm-an-budget.missing .hm-an-budget-note { color: var(--hm-an-c); }
.hm-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Transfers tab (president applications status) ───────────────── */
.ht-groups { display: flex; flex-direction: column; gap: 12px; }
.ht-group { border: 1px solid var(--border-1); border-radius: var(--r-2xl, 14px); overflow: hidden; }
.ht-group-h { font: 700 11.5px/1 var(--font-data); letter-spacing: .5px; text-transform: uppercase; color: var(--text-3);
  padding: 9px 13px; background: var(--bg-1); border-bottom: 1px solid var(--border-1); }
.ht-row { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-bottom: 1px solid var(--border-1); }
.ht-row:last-child { border-bottom: 0; }
.ht-nested { padding-left: 24px; background: rgba(255, 255, 255, .015); }
.ht-name { font-weight: 600; font-size: 13.5px; }
.ht-sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; border: 1px solid rgba(255, 255, 255, .28); vertical-align: -1px; }
.ht-pw { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; margin-left: auto; }
.ht-pill { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-left: 8px; }
.ht-row .ht-pw + .ht-pill { margin-left: 0; }
.ht-wait { color: var(--text-3); background: var(--bg-1); border: 1px solid var(--border-1); }
.ht-ok { color: #04140c; background: var(--accent, #00e87a); }
.ht-no { color: #fff; background: rgba(255, 90, 90, .5); }
.ht-cancel { margin-left: 8px; padding: 4px 10px; border: 1px solid rgba(255, 90, 90, .35); border-radius: 999px;
  background: transparent; color: #ff9a7a; font: 700 10.5px/1 var(--font-ui); letter-spacing: .03em; cursor: pointer; }
.ht-cancel:hover { background: rgba(255, 90, 90, .12); }
.ht-cancel:disabled { opacity: .55; cursor: default; }

/* ─────────────────────────────────────────────────────────────
   President entry — rendered only for president/admin accounts.
   Royal treatment matching /president and the invite page; the
   card carries its own dark stage so it reads the same in both
   site themes (like the presidents hall).
───────────────────────────────────────────────────────────── */
.hm-prez {
  display: flex; align-items: center; gap: 14px;
  margin: 14px 0 0; padding: 14px 16px;
  border: 1px solid transparent; border-radius: 14px;
  background:
    linear-gradient(168deg, rgba(240, 180, 69, .12), rgba(240, 180, 69, 0) 34%) padding-box,
    linear-gradient(180deg, rgba(21, 27, 38, .97), rgba(8, 10, 15, .99)) padding-box,
    linear-gradient(158deg, #ffe9ae, #f0b445 38%, rgba(240, 180, 69, .25) 55%, #d29a33 100%) border-box;
  text-decoration: none;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.hm-prez:hover { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(240, 180, 69, .18); }
.hm-prez-crown {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(240, 180, 69, .22), rgba(240, 180, 69, .05) 70%);
  border: 1px solid rgba(240, 180, 69, .35);
}
.hm-prez-txt { flex: 1; min-width: 0; }
.hm-prez-txt b {
  display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em;
  background: linear-gradient(100deg, #f6e8c5, #f0b445 40%, #ffe9b0 60%, #c98f2b 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hm-prez-txt > span {
  display: block; margin-top: 3px; font-family: var(--font-data);
  font-size: 10.5px; color: #98a2b0;   /* pinned — dark card in both themes */
}
.hm-prez-go {
  flex: none; font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  color: #1c1204; background: linear-gradient(120deg, #ffd98a, #f0b445);
  border-radius: 10px; padding: 9px 15px;
}
@media (max-width: 560px) {
  .hm-prez { flex-wrap: wrap; }
  .hm-prez-go { width: 100%; text-align: center; }
}

/* ── clickable player names → shared player modal ──────────────
   Roster members (.hm-mem-name) and Transfers rows (.ht-name). Only the
   NAME is clickable, never the whole row — the roster row holds FSP inputs
   in edit mode and the transfers row holds status pills. */
.hm-mem-name.pm-clickable,
.ht-name.pm-clickable { cursor: pointer; }
.hm-mem-name.pm-clickable:hover,
.ht-name.pm-clickable:hover { color: var(--accent); text-decoration: underline; }
.hm-mem-name.pm-clickable:focus-visible,
.ht-name.pm-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ─────────────────────────────────────────────────────────────
   WEEKLY GROWTH (Home → 📈 Growth · js/home-growth.js)
───────────────────────────────────────────────────────────── */

.hg-head { display: flex; flex-direction: column; gap: 10px; }

.hg-title-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.hg-title { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--text-1); }
.hg-week { font-family: var(--font-data); font-size: 11px; color: var(--text-3); }
.hg-week b { color: var(--text-2); }

.hg-metrics { display: flex; gap: 6px; flex-wrap: wrap; }
.hg-metric {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-data); font-size: 11px; font-weight: 700;
  padding: 6px 11px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--border-1); background: var(--glass-bg-3); color: var(--text-2);
  transition: all var(--t-base);
}
.hg-metric:hover { color: var(--text-1); border-color: var(--border-2); }
.hg-metric.active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-glow-2); }
/* Coverage is part of the label, not a footnote — a board covering half
   the roster should say so where you pick it. */
.hg-metric-cov { font-size: 9.5px; opacity: 0.75; font-weight: 500; }

.hg-note { font-size: 12px; line-height: 1.55; color: var(--text-3); }
.hg-note b { color: var(--text-2); }
.hg-warn { display: block; margin-top: 5px; color: var(--amber); font-size: 11.5px; }

/* Which pipeline this board came from. Quieter than .hg-warn on purpose:
   it explains the tab's shape (leaders vs everyone) rather than flagging
   a problem — the two boards are different by design, not degraded. */
.hg-src { display: block; margin-top: 5px; font-size: 11px; color: var(--text-4, var(--text-3)); opacity: 0.85; }

.hg-board { display: flex; flex-direction: column; gap: 2px; }

.hg-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 74px;
  /* Second row carries the /w · /d rate. Rows without one leave the area
     empty, and an empty grid row is 0px — so unmeasured rows stay the
     same height they always were. */
  grid-template-areas:
    'rank name val'
    '.    rate val';
  align-items: center; gap: 8px;
  padding: 8px 6px; border-radius: var(--r-md); cursor: pointer;
  border-bottom: 1px solid var(--border-1);
  transition: background var(--t-fast);
}
.hg-row:hover { background: var(--glass-bg-3); }
.hg-row-nodata { opacity: 0.55; cursor: default; }
.hg-row-nodata:hover { background: transparent; }

.hg-rank { grid-area: rank; font-family: var(--font-data); font-size: 11px; color: var(--text-3); }
.hg-name {
  grid-area: name; font-size: 13px; font-weight: 600; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hg-r { font-family: var(--font-data); font-size: 9px; color: var(--text-3); margin-left: 5px; }
.hg-val {
  grid-area: val; font-family: var(--font-data); font-size: 12px; font-weight: 700;
  color: var(--accent); text-align: right;
}
.hg-val.neg { color: var(--red, #f87171); }

/* The measured gain is the headline; this is the same gain expressed as a
   rate — weekly first to match /intel, with the day underneath because
   that is the reading actually taken. Survives the mobile collapse (unlike
   .hg-bar / .hg-span) since it sits in the name column, not its own. */
.hg-rate {
  grid-area: rate;
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}
.hg-rate i { font-style: normal; opacity: 0.45; margin: 0 5px; }
.hg-rate.neg { color: var(--red, #f87171); opacity: 0.75; }

/* Bar and the reading span are supporting detail — they drop out first
   on a phone so rank / name / value stay readable. */
.hg-bar, .hg-span { display: none; }
.hg-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); opacity: 0.55; }
.hg-bar-fill.neg { background: var(--red, #f87171); }

@media (min-width: 620px) {
  .hg-row {
    grid-template-columns: 28px minmax(0, 1.2fr) minmax(70px, 1fr) 88px 118px;
    grid-template-areas:
      'rank name bar val span'
      '.    rate bar val span';
  }
  .hg-bar {
    grid-area: bar; display: block; height: 6px; border-radius: 999px;
    background: var(--glass-bg-3); overflow: hidden;
  }
  .hg-span {
    grid-area: span; display: block; text-align: right;
    font-family: var(--font-data); font-size: 10px; color: var(--text-3);
  }
}

/* ── Shiny tasks to plunder (overview card) ─────────────────────
   Nearest-warzone chips + day/count pills; pills reuse the
   .hm-ally-toggle / .hm-at-opt idiom from the alliance switcher. */
.hm-shiny-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.hm-shiny-bar .hm-btn { padding: 7px 14px; font-size: 13px; margin-left: auto; }
.hm-shiny-list { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-shiny-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 9px 13px; border-radius: var(--r-2xl);
  border: 1px solid var(--accent-border); background: var(--accent-glow);
  color: var(--text-1); font: 600 13px/1 var(--font-data); text-decoration: none;
  transition: filter .15s var(--ease);
}
.hm-shiny-chip:hover { filter: brightness(1.15); }
.hm-shiny-chip span { font: 500 11px/1 var(--font-ui); color: var(--text-3); }
@media (max-width: 560px) {
  .hm-shiny-bar .hm-btn { margin-left: 0; width: 100%; }
}

/* ── 🛒 Store rotation card (Hot Deals + Battle Pass — js/lws-stores.js) ── */
.hm-store-free { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 600 12px/1.4 var(--font-ui); color: var(--text-2); }
.hm-store-chip { padding: 5px 10px; border-radius: var(--r-2xl); border: 1px solid var(--accent-border); background: var(--accent-glow); color: var(--text-1); font: 600 11px/1 var(--font-data); }
.hm-store-est { font: 600 10px/1 var(--font-data); letter-spacing: .04em; color: var(--warn, #d1a054); border: 1px solid var(--warn, #d1a054); border-radius: var(--r-2xl); padding: 2px 7px; cursor: help; }
.hm-store-foot { margin-top: 10px; }
.hm-store-q { font-style: normal; color: var(--text-3); }

/* horizontal date-strip calendar */
.hm-store-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.hm-store-strip::-webkit-scrollbar { height: 6px; }
.hm-store-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.hm-store-day {
  position: relative; flex: 0 0 auto; width: 150px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--r-lg, 12px);
  background: var(--surface-2, var(--card)); color: var(--text-2); font-family: var(--font-ui);
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.hm-store-day:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.hm-store-day.current { border-color: var(--accent-border); background: var(--accent-glow); }
.hm-store-badge { position: absolute; top: 10px; right: 10px; font: 700 9px/1 var(--font-data); letter-spacing: .1em; color: var(--accent); border: 1px solid var(--accent-border); border-radius: var(--r-2xl); padding: 3px 6px; }
.hm-store-day-range { font: 700 15px/1.1 var(--font-data); color: var(--text-1); }
.hm-store-day-range em { font-style: normal; color: var(--text-3); margin: 0 3px; }
.hm-store-day-dow { font: 500 10px/1 var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.hm-store-day-nm { margin-top: 5px; font: 700 13px/1.2 var(--font-data); color: var(--accent); }
.hm-store-day-nm em { font-style: normal; color: var(--text-3); }
.hm-store-day-bp { font: 500 11px/1.2 var(--font-ui); color: var(--text-3); }

/* advisory modal */
.hm-sm-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(0,0,0,.55); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); }
.hm-sm-overlay.hidden { display: none; }
.hm-sm-sheet { position: relative; width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-2xl); background: var(--card); box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.4)); }
.hm-sm-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--text-2); font-size: 20px; line-height: 1; cursor: pointer; }
.hm-sm-close:hover { color: var(--text-1); border-color: var(--accent-border); }
.hm-sm-eyebrow { font: 600 10px/1 var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.hm-sm-head h3 { margin: 0; font: 800 22px/1.1 var(--font-data); color: var(--text-1); }
.hm-sm-when { margin-top: 6px; font: 600 13px/1 var(--font-data); color: var(--text-2); }
.hm-sm-metarow { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 500 13px/1.4 var(--font-ui); color: var(--text-2); }
.hm-sm-metarow b { display: block; font: 600 10px/1.6 var(--font-data); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.hm-sm-sec { margin-top: 14px; }
.hm-sm-sec h4 { margin: 0 0 8px; font: 700 13px/1 var(--font-ui); color: var(--text-1); }
.hm-sm-advisory { padding: 14px; border: 1px dashed var(--accent-border); border-radius: var(--r-lg, 12px); background: var(--accent-glow); }
@media (max-width: 560px) { .hm-store-day { width: 138px; } .hm-sm-sheet { padding: 18px; } }

/* ── Week Plan in-module icon section-nav (js/home-week.js) ── */
.hm-wk-secnav { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hm-wk-secnav::-webkit-scrollbar { display: none; }
.hm-wk-secbtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2, var(--bg-1)); color: var(--text-3);
  font: 700 13px/1 var(--font-ui); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); }
.hm-wk-secbtn:hover { color: var(--text-1); }
.hm-wk-secbtn.active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-glow); }
.hm-wk-secic { display: inline-grid; place-items: center; }
.hm-wk-secic svg { width: 17px; height: 17px; }
.hm-wsec[hidden] { display: none; }
.hm-wsec > .hm-card + .hm-card { margin-top: 16px; }
.hm-tsec[hidden] { display: none; }
.hm-msec[hidden] { display: none; }

/* ── 📅 Week Plan tab (slice 2 — js/home-week.js) ───────────────
   Extends the .hm-wk-* strip shipped with the skeleton. */
.hm-wk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hm-wk-nav { display: inline-flex; align-items: center; gap: 8px; }
.hm-wk-week { font: 600 13px/1 var(--font-data); color: var(--text-2); white-space: nowrap; }
.hm-wk-day.today { border: 1px solid var(--accent-border); background: var(--accent-glow); border-radius: 10px; }
.hm-wk-tag { font-size: 9.5px; line-height: 1.3; color: var(--accent); word-break: break-word; }
.hm-wk-cur { font: 500 13px/1.6 var(--font-ui); color: var(--text-2); margin-bottom: 8px; }
/* Game-info panel — confirmed event mechanics (game-knowledge.md). Collapsed by default. */
.hm-wk-info { margin: 4px 0 12px; border: 1px solid var(--border-1); border-radius: var(--r-md); background: var(--glass-bg-3, var(--bg-2)); overflow: hidden; }
.hm-wk-info-sum { cursor: pointer; list-style: none; padding: 9px 12px; font: 600 12.5px/1 var(--font-ui); color: var(--text-2); display: flex; align-items: center; gap: 7px; }
.hm-wk-info-sum::-webkit-details-marker { display: none; }
.hm-wk-info-sum:hover { color: var(--text-1); }
.hm-wk-info-ic { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--accent, #00e87a) 18%, transparent); color: var(--accent, #00e87a); font: 700 10px/1 var(--font-data); }
.hm-wk-info[open] .hm-wk-info-sum { border-bottom: 1px solid var(--border-1); }
.hm-wk-info-body { padding: 10px 12px; }
.hm-wk-info-tbl { width: 100%; border-collapse: collapse; }
.hm-wk-info-tbl th { text-align: left; white-space: nowrap; vertical-align: top; padding: 3px 12px 3px 0; font: 600 11.5px/1.4 var(--font-data); color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
.hm-wk-info-tbl td { padding: 3px 0; font: 500 12.5px/1.4 var(--font-ui); color: var(--text-1); }
.hm-wk-info-note { margin: 8px 0 0; font: 500 11.5px/1.5 var(--font-ui); color: var(--text-3); }
/* Drawn-opponent strength panel — your alliance FSP vs the recorded opponent. */
.hm-wk-str { margin: 2px 0 10px; }
.hm-wk-str-load { font: 500 12px/1.4 var(--font-ui); color: var(--text-3); padding: 2px 0 8px; }
.hm-wk-str-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 7px; }
.hm-wk-str-side { display: flex; flex-direction: column; gap: 2px; padding: 8px 11px; border-radius: var(--r-md); border: 1px solid var(--border-1); background: var(--glass-bg-3, var(--bg-2)); }
.hm-wk-str-side b { font: 800 13px/1 var(--font-data); color: var(--text-1); }
.hm-wk-str-side span { font: 600 11.5px/1.3 var(--font-data); color: var(--text-2); }
.hm-wk-str-side.them { text-align: right; align-items: flex-end; }
.hm-wk-str-as { color: var(--amber, #f0b445); }
.hm-wk-str-bar { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: var(--bg-2); }
.hm-wk-str-fill.you { background: var(--accent, #00e87a); }
.hm-wk-str-fill.them { background: var(--amber, #f0b445); }
.hm-wk-str-verdict { margin-top: 6px; font: 600 12px/1.4 var(--font-ui); color: var(--text-2); }
.hm-wk-str-verdict.you { color: var(--accent, #00e87a); }
.hm-wk-str-verdict.them { color: var(--amber, #f0b445); }
/* CSB coalition (2v1/1v2) block */
.hm-wk-csb { margin: 6px 0 4px; padding: 10px 12px; border: 1px dashed var(--border-1); border-radius: var(--r-md); }
.hm-wk-csb-role { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hm-wk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; margin: 0 4px 4px 0;
  border: 1px solid var(--accent-border); background: var(--accent-glow); border-radius: 999px;
  font: 600 12px/1 var(--font-data); color: var(--text-1); }
.hm-wk-chip button { border: 0; background: none; color: var(--text-3); font-size: 13px; cursor: pointer; padding: 0; line-height: 1; }
.hm-wk-chip button:hover { color: var(--text-1); }
.hm-wk-check { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1.3 var(--font-ui); color: var(--text-2); cursor: pointer; }
.hm-wk-evs { display: flex; flex-direction: column; gap: 8px; }
.hm-wk-ev { padding: 9px 12px; border: 1px solid var(--border-1); border-radius: 10px; background: var(--bg-2); }
.hm-wk-ev.on { border-color: var(--accent-border); background: var(--accent-glow); }
.hm-wk-ev .hm-input { margin-top: 8px; }
.hm-wk-cad { font: 500 11px/1 var(--font-data); color: var(--text-3); margin-left: 6px; }
.hm-wk-savebar { display: flex; align-items: center; gap: 14px; position: sticky; bottom: 12px; z-index: 2; }

/* ── 🗓 This week — Overview summary card (Week Plan slice 3) ── */
.hm-wk-sumrow { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-1); font: 500 13px/1.45 var(--font-ui); }
.hm-wk-sumrow:last-child { border-bottom: 0; }
.hm-wk-sumk { flex: 0 0 74px; color: var(--text-3); white-space: nowrap; }
.hm-wk-sumv { color: var(--text-2); overflow-wrap: anywhere; }
.hm-wk-sumv b { color: var(--text-1); font-family: var(--font-data); }

/* ── 🗳 DSB registration votes (Week tab) ─────────────────────── */
.hm-wk-vh { font: 600 14px/1.2 var(--font-ui); color: var(--text-1); margin: 0; }
.hm-wk-ok { color: var(--accent); font-weight: 700; margin-left: 8px; }
.hm-wk-slotrow { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.hm-wk-slotrow > div { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-wk-slotchip { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 10px; cursor: pointer;
  border: 1px solid var(--border-1); background: var(--bg-2); border-radius: 999px;
  font: 600 12px/1 var(--font-data); color: var(--text-2); }
.hm-wk-slotchip span { font-size: 11px; color: var(--accent); }
.hm-wk-slotchip.mine { border-color: var(--accent); color: var(--text-1); background: var(--accent-glow); }
.hm-wk-vlist { max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.hm-wk-vrow { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 10px; border: 1px solid var(--border-1); border-radius: 9px; background: var(--bg-2); }
.hm-wk-vrow.me { border-color: var(--accent-border); }
.hm-wk-vname { font: 500 13px/1.3 var(--font-ui); color: var(--text-1); overflow-wrap: anywhere; }
.hm-wk-vname em { font-style: normal; color: var(--text-3); font-size: 11px; }
.hm-wk-vbtns { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.hm-wk-vbtns button { padding: 5px 10px; border: 1px solid var(--border-1); background: none; cursor: pointer;
  border-radius: 7px; font: 600 12px/1 var(--font-ui); color: var(--text-3); }
.hm-wk-vbtns .on-in  { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); }
.hm-wk-vbtns .on-out { background: rgba(224,69,90,.12); border-color: #e0455a; color: #e0455a; }
.hm-wk-vbtns .on-unk { color: var(--text-1); border-color: var(--text-3); }
/* B2: team A/B toggle sits beside the Yes/No/Maybe cluster; reuses
   .hm-ally-toggle / .hm-at-opt, just trimmed and allowed to wrap on narrow rows. */
.hm-wk-vctl { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.hm-wk-team .hm-at-opt { padding: 5px 9px; }

/* ── ⚔️ Buster intel (Week tab) ─────────────────────────────────── */
.hm-wk-strong { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.hm-wk-strong .hm-wk-chip b { font: 700 11px/1 var(--font-data); color: var(--accent); margin-left: 4px; }
.hm-wk-igrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hm-wk-ih { font: 700 12px/1.3 var(--font-ui); color: var(--text-2); margin-bottom: 6px; }
.hm-wk-ih b { font-family: var(--font-data); color: var(--text-1); }
.hm-wk-ilist { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.hm-wk-ilist.tall { max-height: 420px; }
.hm-wk-irow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center;
  padding: 5px 8px; border: 1px solid var(--border-1); border-radius: 8px; background: var(--bg-2);
  font: 500 12px/1.3 var(--font-ui); color: var(--text-1); }
.hm-wk-irow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-wk-irow i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.hm-wk-irow b { font: 700 11.5px/1 var(--font-data); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .hm-wk-igrid { grid-template-columns: 1fr; } .hm-wk-ilist { max-height: 220px; } }

/* Intel avatars — photo when the snapshot has one, monogram fallback. */
.hm-wk-iav { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-3); border: 1px solid var(--border-1);
  font: 700 9px/1 var(--font-data); color: var(--text-3); }
.hm-wk-iav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-wk-irow { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.hm-wk-strong .hm-wk-iav { width: 20px; height: 20px; flex-basis: 20px; margin-right: 2px; }

/* ── 🤖 Bot tab (js/home-bot.js) ───────────────────────────────── */
.hb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.hb-status { font: 700 10px/1 var(--font-data); letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 9px; border-radius: var(--r-2xl); border: 1px solid var(--border-1); white-space: nowrap; }
.hb-status.hb-on { color: var(--accent); border-color: var(--accent-border); background: var(--accent-glow); }
.hb-status.hb-pending { color: #fbbf24; border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.10); }
.hb-status.hb-off { color: var(--text-3); }
.hb-bullets { margin: 4px 0 16px; padding-left: 18px; display: grid; gap: 8px; }
.hb-bullets li { font: 400 13px/1.5 var(--font-ui); color: var(--text-2); }
.hb-bullets code, .hb-tip code { font: 600 12px/1 var(--font-data); color: var(--accent);
  background: var(--accent-glow); padding: 2px 5px; border-radius: 5px; }
.hb-tip { font: 400 13px/1.5 var(--font-ui); color: var(--text-2);
  border-left: 2px solid var(--accent-border); background: var(--accent-glow);
  padding: 10px 12px; border-radius: 0 8px 8px 0; margin: 0 0 16px; }
.hb-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hb-note { font: 400 12px/1.5 var(--font-ui); color: var(--text-3); margin: 14px 0 0;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Week Plan · scheduled orders (alliance-bot Phase C Block ③) ──
   Leader-authored messages the bot posts at a day+time. Rows are
   read-dense (the list is scanned, not read) and the add-row wraps
   rather than scrolls — at 360px a horizontal scroller inside a card
   is how an "Add" button ends up unreachable. */
.hm-wk-ords { display: grid; gap: 6px; margin-bottom: 10px; }

.hm-wk-ord {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  background: var(--glass-bg-3);
}
.hm-wk-ord-when {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font: 600 12.5px/1.3 var(--font-ui); color: var(--text-1);
}
.hm-wk-ord-times { font: 500 12px/1.3 var(--font-data); color: var(--accent); }
.hm-wk-ord-text {
  min-width: 0;                       /* lets the 1fr track actually shrink */
  overflow-wrap: anywhere;
  font: 400 13px/1.45 var(--font-ui); color: var(--text-2);
}

.hm-wk-ordadd {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--border-1);
}
.hm-wk-ordadd .hm-input { flex: 0 1 auto; min-width: 110px; }
.hm-wk-ordadd .hm-input.wide { flex: 1 1 240px; }

@media (max-width: 520px) {
  /* Stack the row: the message field is the one that needs the width, and a
     wrapped Add button beside a half-width select reads as broken.

     Every cell is placed EXPLICITLY. Left to auto-flow, the full-width text
     consumes row 2 and pushes the ✕ onto a row of its own, where a block
     button in a 1fr track stretches edge-to-edge and stops looking like a
     small remove control at all. */
  .hm-wk-ord { grid-template-columns: minmax(0, 1fr) auto; }
  .hm-wk-ord-when       { grid-row: 1; grid-column: 1; }
  .hm-wk-ord > .hm-btn  { grid-row: 1; grid-column: 2; justify-self: end; }
  .hm-wk-ord-text       { grid-row: 2; grid-column: 1 / -1; }
  .hm-wk-ordadd .hm-input,
  .hm-wk-ordadd .hm-input.wide { flex: 1 1 100%; }
}

/* ══ 🚂 Train tab (js/home-train.js) ═══════════════════════════════════
   Weekly conductor/VIP roster + a month-view recency panel. Reuses
   .hm-card / .hm-input / .hm-btn; only the day grid + month rows are new. */
.hm-tr-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.hm-tr-day {
  display: grid; grid-template-columns: 92px 1fr 1fr; gap: 8px 12px; align-items: end;
  padding: 11px 13px; border: 1px solid var(--border-1); border-radius: var(--r-2xl); background: var(--bg-1);
}
.hm-tr-day.today { border-color: var(--accent-border); }
.hm-tr-daylabel { display: flex; flex-direction: column; gap: 2px; align-self: center; }
.hm-tr-daylabel b { font: 700 15px/1 var(--font-ui); color: var(--text-1); }
.hm-tr-date { font: 500 11px/1.2 var(--font-data); color: var(--text-3); }
.hm-tr-seat { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hm-tr-seatname { font: 600 11px/1 var(--font-ui); color: var(--text-2, var(--text-1)); }
.hm-tr-sel { width: 100%; }
.hm-tr-hints { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.hm-tr-hint { font: 500 12px/1.3 var(--font-data); color: var(--text-3); }
.hm-tr-hint.warn { color: var(--red); }

.hm-tr-mlist { display: flex; flex-direction: column; margin-top: 8px; }
.hm-tr-mrow {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px 16px; align-items: center;
  padding: 9px 4px; border-top: 1px solid var(--border-1);
}
.hm-tr-mrow:first-child { border-top: none; }
.hm-tr-mname { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.2 var(--font-ui); color: var(--text-1); min-width: 0; }
.hm-tr-mcell { font: 500 12px/1 var(--font-data); color: var(--text-3); white-space: nowrap; }
.hm-tr-mcount { color: var(--accent); font-weight: 700; }
.hm-tr-dot { font-size: 10px; line-height: 1; }
.hm-tr-empty { padding: 16px 4px; font: 500 13px/1.4 var(--font-ui); color: var(--text-3); }

@media (max-width: 560px) {
  .hm-tr-day { grid-template-columns: 1fr; gap: 10px; align-items: stretch; }
  .hm-tr-daylabel { flex-direction: row; align-items: baseline; gap: 8px; }
  .hm-tr-mrow { grid-template-columns: 1fr; gap: 4px; }
  .hm-tr-mcell { white-space: normal; }
}

/* ── 🤖 Bot tab: onboarding guide + "who is who" grid (home-bot.js) ──
   Mobile-first: single column, ≥40px tap targets, wraps on narrow screens. */
.hb-steps { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 4px; }
.hb-step { display: flex; gap: 10px; align-items: flex-start; }
.hb-step .hb-num { flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font: 600 13px/1 var(--font-ui); }
.hb-dim { color: var(--text-3); }
.hb-done { color: var(--accent); font-weight: 600; }
.hb-fold { margin-top: 12px; border-top: 1px solid var(--border-1); padding-top: 8px; }
.hb-fold > summary { cursor: pointer; font: 600 14px/1.4 var(--font-ui); color: var(--text-1); padding: 4px 0; list-style: none; }
.hb-fold > summary::-webkit-details-marker { display: none; }
.hb-fold > summary::before { content: '▸ '; color: var(--text-3); }
.hb-fold[open] > summary::before { content: '▾ '; }
.hb-rhythm { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--text-2); }
.hb-cmds { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.hb-cmdgroup h4 { margin: 0 0 6px; font: 600 13px/1.3 var(--font-ui); color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
.hb-cmd { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 4px 0; }
.hb-cmd code { flex: 0 0 auto; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--r-md); padding: 2px 7px; font: 500 12.5px/1.5 var(--font-data); color: var(--accent); }
.hb-cmd span { color: var(--text-2); font-size: 13px; }
.hb-note { color: var(--text-3); font-size: 13px; margin-top: 10px; }

/* who is who */
.hb-count { font: 600 13px/1 var(--font-ui); color: var(--text-3); }
.hb-mlist { display: flex; flex-direction: column; gap: 8px; }
.hb-mrow { border: 1px solid var(--border-1); border-radius: var(--r-md); padding: 8px 10px; background: var(--bg-1); }
.hb-mrow.open { border-color: var(--accent-border); }
.hb-mtop { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.hb-mwho { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.hb-mname { font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--bg-2); }
.hb-av.sm { width: 26px; height: 26px; }
.hb-avph { display: grid; place-items: center; font: 600 12px/1 var(--font-ui); color: var(--text-3); border: 1px solid var(--border-1); }
.hb-linked { display: flex; align-items: center; gap: 6px; color: var(--accent); font-size: 13.5px; max-width: 55%; }
.hb-linked b { color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-x { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-1); background: transparent; color: var(--text-3); cursor: pointer; }
.hb-x:hover { color: var(--red); border-color: var(--red); }
.hb-picker { margin-top: 8px; border-top: 1px dashed var(--border-1); padding-top: 8px; }
.hb-picklist { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; margin-top: 6px; }
.hb-pick { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 8px; min-height: 40px;
  border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text-1); cursor: pointer; font: 500 14px/1.3 var(--font-ui); }
.hb-pick:hover { background: var(--bg-2); border-color: var(--border-1); }
.hb-pick.taken { opacity: .5; cursor: not-allowed; }
.hb-pick em { margin-left: auto; color: var(--text-3); font-style: normal; font-size: 12px; }

/* Bot-tab help callout → /onboard (private setup channel with the team). */
.hb-help { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between;
  margin-top: 14px; padding: 10px 12px; border: 1px solid var(--accent-border); border-radius: var(--r-md);
  background: var(--accent-glow); }
.hb-help span { flex: 1 1 240px; color: var(--text-2); font-size: 13.5px; }
.hb-help code { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--r-md); padding: 1px 6px; font: 500 12.5px/1.5 var(--font-data); color: var(--accent); }