/* ChoresOfDuty — Recon HUD skin (M7) — phosphor-terminal restyle of the Agent
   Terminal's shared chrome: header (status bar, operator identity, XP bar)
   and tab bar. Linked ONLY from index.html, AFTER shared/app.css — app.css
   remains untouched and remains command.html's only stylesheet, so this file
   never affects the HQ (admin) view.

   Values below (colors, spacing, keyframes) are copied verbatim from the
   Claude Design mockup export:
     docs/superpowers/design-imports/2026-07-11-agent-dashboard-reinvention/
       project/Agent Dashboard.dc.html
   — specifically its shared <style> block (keyframes) and the status-bar /
   header / tab-bar markup that repeats byte-identically across mockup
   screens 1a/2a/3a/4a/5a (confirmed during import) — not approximated.

   Scope note: only #hq-header (status bar + operator identity + XP bar) and
   the tab bar (#tabs) get the HUD treatment here. <body>/<main> keep
   app.css's existing background/palette untouched, so the Missions /
   Scoreboard / History / Loadout tab *content* renders exactly as before —
   this task is the shared shell only; Tasks 3-6 reskin each tab's own
   content to match. */

:root {
  --hud-bg: #04070a;
  --hud-green: #8ffcc0;
  --hud-green-2: #39ff88;
  --hud-green-dim: #4fd39a;
  --hud-green-line: rgba(57, 255, 136, .28);
  --hud-text: #eafff4;
  --hud-gold: #ffcf3f;
  --hud-flame: #ffb15a;
}

/* ---- keyframes — copied verbatim from the mockup's shared <style> block
   (its "===== 1a keyframes =====" section) ---- */
@keyframes a-sweep { to { transform: rotate(360deg); } }
@keyframes a-scan { 0% { background-position: 0 0; } 100% { background-position: 0 -400px; } }
@keyframes a-blip { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes a-flame { 0%, 100% { transform: scale(1) rotate(-2deg); opacity: .9; } 50% { transform: scale(1.18) rotate(3deg); opacity: 1; } }
@keyframes a-xp { 0% { background-position: 0 0; } 100% { background-position: 240px 0; } }
@keyframes coinflip { 0% { transform: perspective(90px) rotateY(0deg); } 100% { transform: perspective(90px) rotateY(360deg); } }

/* Reduced motion — same per-component opt-out convention as app.css (no
   sitewide sledgehammer selector): every new hud.css animation gets an
   explicit `animation: none` alongside the element it's declared on.
   Convention note (M8 Task 3 fix): this used to be one central block
   grouping every element's opt-out here at the top of the file, before any
   of their own base rules — for `.hud-scanline` / `.hud-radar-avatar::before`
   / `::after` / `.hud-xpbar-fill::after` / `.hud-coin-icon`, that meant the
   base rule declared LATER in this file (identical (0,1,1)/(0,1,0)
   specificity) won the cascade by source order regardless of the media
   query, so reduced-motion silently did nothing for any of them — verified
   live via computed `animationName` during this task's E2E pass. Each
   opt-out below is now placed immediately AFTER its own base rule instead
   (the pattern this file already uses correctly for `.hud-scanline-page`,
   `.hud-flame-icon`, `.hud-mission-spinner`, etc.) so source order can never
   flip the winner again. */

/* ------------------------------------------------------------------ *
 * Page atmosphere (M8 Task 1) — phosphor canvas for the whole page, not
 * just the header. body.hud-app carries the same background/type/color/
 * frame-glow combo as the mockup's `.scr` (screen 1a), and the scanline +
 * topo overlays are promoted from #hq-header-scoped (position:absolute,
 * M7) to viewport-scoped (position:fixed) so they cover every tab, not
 * just the header panel. Values copied verbatim from the mockup's `.scr`
 * block for 1a (see file header comment) with two intentional deviations
 * from a literal copy-paste, both required because this is a full page,
 * not a floating 390px phone frame inside the mockup's dark canvas:
 *   - box-shadow drops the mockup's outer `0 30px 80px -20px rgba(0,0,0,.8)`
 *     drop-shadow — that's the phone-frame's shadow onto the mockup's OWN
 *     background, which has no equivalent when the frame IS the viewport
 *     (an outer shadow on <body> paints outside the viewport and is never
 *     seen). The inset frame-glow line is kept as-is.
 *   - scanline/topo z-index goes from the mockup's header-local 5/1 to
 *     50/0 — they need to sit above every tab's content (z-index 50, still
 *     below #comms-banner's 60) and below it respectively (z-index 0,
 *     lifted clear of by the z-index:1 main rule below), across the whole
 *     document, not just within #hq-header's own stacking context.
 * Scoped entirely under body.hud-app so command.html (no such class) never
 * sees any of this — this rule set lives in hud.css, never app.css, per
 * the file-header note above; app.css's own body background stays defined
 * but is simply painted first and then covered, never edited.
 * ------------------------------------------------------------------ */

body.hud-app {
  background: #04070a;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  color: #8ffcc0;
  box-shadow: inset 0 0 0 1px rgba(57, 255, 136, .14);
}

/* full-viewport atmosphere layers — position: fixed so they cover every tab */
.hud-scanline-page {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(57, 255, 136, .05) 0px, rgba(57, 255, 136, .05) 1px, transparent 2px, transparent 4px);
  animation: a-scan 8s linear infinite;
  mix-blend-mode: screen;
  opacity: .7;
}

.hud-topo-page {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .16;
  background:
    radial-gradient(60% 40% at 70% 18%, rgba(57, 255, 136, .6), transparent 70%),
    repeating-radial-gradient(circle at 22% 30%, transparent 0 16px, rgba(57, 255, 136, .5) 16px 17px),
    repeating-radial-gradient(circle at 85% 78%, transparent 0 20px, rgba(57, 255, 136, .4) 20px 21px);
}

/* .hud-topo-page is a fixed, z-index:0 sibling of <main> — per CSS stacking
   rules a positioned z-index:0 box paints AFTER static in-flow content at
   the same stacking level, i.e. on top of <main> by default, even though
   <main> comes later in the DOM. Promote <main> into its own stacking
   context above it explicitly, exactly as the brief specifies. */
body.hud-app main {
  position: relative;
  z-index: 1;
}

/* Declared here (after the base .hud-scanline-page rule above), not folded
   into the earlier top-of-file reduced-motion block — same specificity
   (0,1,0) as the base rule means source order decides the winner, and the
   top-of-file block sits BEFORE .hud-scanline-page's own definition, so it
   would silently lose the cascade. Keeping each animation's opt-out
   immediately after its own rule (this file's stated convention) sidesteps
   that trap entirely. */
@media (prefers-reduced-motion: reduce) {
  .hud-scanline-page { animation: none; }
}

/* ------------------------------------------------------------------ *
 * .hud-scr — the phosphor-terminal "phone frame" look (mockup's `.scr` +
 * background:#04070a; font-family:'Share Tech Mono'... combo), applied to
 * #hq-header only (not the whole page — see scope note above). Compound
 * with the #hq-header id so it reliably outranks app.css's plain
 * `#hq-header{...}` rule regardless of link order.
 * ------------------------------------------------------------------ */

#hq-header.hud-scr {
  position: sticky;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  row-gap: 0;
  padding: 0;
  /* Contained rounded panel matching Fredy's Claude Design mockup (13-Jul-2026)
     — was a full-bleed bar with a bottom border, which spread the bell/toggle/
     stats to the far edges on desktop. width:calc + max-width mirror main's box
     (max-width:720px; padding:clamp(16,4vw,32)) so the panel edges line up with
     the mission cards below at every viewport width; margin/top float it as a
     sticky card with a small gap. overflow:hidden (above) clips the scanline/
     topo texture to the rounded corners. */
  width: calc(100% - 2 * clamp(16px, 4vw, 32px));
  max-width: 656px;
  margin: 12px auto 0;
  top: 12px;
  border: 1px solid var(--hud-green-line);
  border-radius: 16px;
  background: var(--hud-bg);
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  color: var(--hud-green);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(57, 255, 136, .14);
  /* Rescopes --accent (used by app.css's chevrons/ghost-button hovers) to the
     HUD green within the header only — the rest of the app keeps its own
     --accent (#77C043) untouched. */
  --accent: var(--hud-green-2);
}

/* Login screen: #view-login caps at 380px (app.css) — narrower than the
   header's 656px, which is calibrated to line up with the dashboard's wider
   mission-card content instead (see comment above). Both are centered on
   the same viewport axis, so left uncorrected the two panels' edges don't
   align (Fredy flagged this 26-Jul-2026). Cap the header to match while the
   login view is showing. */
body:has(#view-login:not([hidden])) #hq-header.hud-scr {
  max-width: 380px;
}

/* ---- scanline sweep + topo/radar texture — absolutely positioned within
   #hq-header (already a positioned ancestor via `position:sticky`), so they
   stay confined to the header panel exactly like the mockup's `.scr` frame,
   never bleeding onto the tab content below. ---- */

.hud-scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: repeating-linear-gradient(0deg, rgba(57, 255, 136, .05) 0px, rgba(57, 255, 136, .05) 1px, transparent 2px, transparent 4px);
  animation: a-scan 8s linear infinite;
  mix-blend-mode: screen;
  opacity: .7;
}

@media (prefers-reduced-motion: reduce) {
  .hud-scanline { animation: none; }
}

.hud-topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .16;
  background:
    radial-gradient(60% 40% at 70% 18%, rgba(57, 255, 136, .6), transparent 70%),
    repeating-radial-gradient(circle at 22% 30%, transparent 0 16px, rgba(57, 255, 136, .5) 16px 17px),
    repeating-radial-gradient(circle at 85% 78%, transparent 0 20px, rgba(57, 255, 136, .4) 20px 21px);
}

/* ------------------------------------------------------------------ *
 * Status bar — bell (left) + admin-only "HQ" link (right, #link-command,
 * hidden for a kid-only signed-in account). The mockup's read-only
 * AGENT/BOSS pill that used to live here was removed (Fredy's call,
 * 12-Jul-2026): it looked like a functioning toggle but did nothing, and
 * the login card directly below already has a real functional AGENT/BOSS
 * toggle (#login-mode-agent/#login-mode-boss, see the login-card block
 * further down this file). The M7 wordmark row and Sign Out button that
 * used to occupy this row are also gone (M8 Task 2 — see index.html).
 * ------------------------------------------------------------------ */

.hud-statusbar {
  position: relative;
  /* 7, not 6 — one above .hud-identity's own z-index:6 sibling stacking
     context (17-Jul-2026). .hud-statusbar establishes its own stacking
     context (position + z-index), so the language picker's dropdown
     (.lang-menu, absolutely positioned inside it) can never rise above a
     later DOM sibling at an EQUAL z-index no matter how high the dropdown's
     own z-index is set — equal-z-index siblings resolve by DOM order, and
     .hud-identity comes after .hud-statusbar in #hq-header's markup.
     Verified via Playwright: at z-index:6 the dropdown was visible but
     .hud-identity intercepted its pointer events; at 7 clicks land. */
  z-index: 7;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 8px;
  flex-wrap: wrap;
}

/* Top-align the wordmark with the AGENT/BOSS toggle row (Fredy 14-Jul-2026). */
.hud-statusbar .hud-brand {
  align-self: flex-start;
}

/* Icon-only 34px bordered square (mockup: bell + flame-colored unread
   badge). notify.js isn't a file this task touches, so the underlying
   <button class="btn ghost bell-btn"> keeps emitting its real text
   ("🔔 Alerts on" / "🔕 Enable alerts") for the accessible name — font-size:0
   here hides that text node visually only, and the ::before pseudo-element
   below paints the actual glyph at a real size. The mockup's badge is a
   numeric unread count with no backing data source in this app (see
   shared/notify.js); repurposed as a simple "alerts are on" dot instead of
   inventing a fake count. */
.hud-statusbar .bell-btn {
  position: relative;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0;
  border-color: var(--hud-green-line);
  background: rgba(57, 255, 136, .06);
  color: var(--hud-green);
  border-radius: 8px;
}

/* Bell is now an inline SVG (shared/notify.js) centred by the button's flexbox
   — no more emoji ::before glyph and no badge dot (Fredy 14-Jul-2026). Active
   (alerts on) just brightens the icon/border. */
.hud-statusbar .bell-btn.active {
  border-color: var(--hud-green-2);
  background: rgba(57, 255, 136, .14);
  color: var(--hud-green-2);
}

/* Language picker (multi-language support, 17-Jul-2026) — sits immediately
   left of the alerts bell in .hud-statusbar-controls on index.html/
   command.html. Unscoped (not `.hud-statusbar .lang-btn`) because it's also
   mounted standalone on reset.html/claim.html, whose header uses a plain
   `.brand` shell rather than `.hud-statusbar` — a scoped selector would
   silently drop all styling there. Text button (not the bell's icon-only
   34px square) since it must show a real 2-letter code. */
.lang-picker {
  position: relative;
}

.lang-btn {
  min-width: 34px;
  min-height: 34px;
  height: 34px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: var(--hud-green-line);
  background: rgba(57, 255, 136, .06);
  color: var(--hud-green);
  border-radius: 8px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  letter-spacing: .05em;
}

.lang-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 64px;
  border: 1px solid var(--hud-green-line);
  background: #0a0e0b;
  border-radius: 8px;
  overflow: hidden;
  z-index: 70;
}

.lang-menu-opt {
  padding: 8px 10px;
  background: none;
  border: none;
  color: var(--hud-green);
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.lang-menu-opt:hover,
.lang-menu-opt.active {
  background: rgba(57, 255, 136, .14);
}

/* Persistent app wordmark — logo + "Chores of Duty", top-left on every view
   (login, agent dashboard, boss HQ) so the two views align. Fredy 14-Jul-2026. */
.hud-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
}

.hud-brand img {
  display: block;
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 0 7px rgba(57, 255, 136, .5));
}

.hud-brand span {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 4.4vw, 22px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--hud-text);
  text-shadow: 0 0 12px rgba(57, 255, 136, .4);
  white-space: nowrap;
}

.hud-statusbar .btn.ghost {
  border-color: var(--hud-green-line);
  color: var(--hud-green);
}

.hud-statusbar .btn.ghost:hover {
  border-color: var(--hud-green-2);
  color: var(--hud-green-2);
}

/* Dashboard AGENT/BOSS toggle (13-Jul-2026). The base .hud-role-opt below has
   no appearance reset (the login toggle adds its own), so the header's inactive
   option rendered as a white native <button>. Reset it here so the inactive
   option is transparent with green text (matches the mockup — BOSS in green,
   not white); the active option keeps .hud-role-active's solid-green fill. */
.hud-statusbar .hud-dash-toggle .hud-role-opt {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  cursor: pointer;
  min-height: 32px;
  padding: 6px 13px;
  border-radius: 6px;
  color: var(--hud-green);
  display: inline-flex;
  align-items: center;
}

/* Active option keeps the solid-green highlight — needs this higher-specificity
   selector (0,4,0) to beat the transparent background reset just above (0,3,0),
   which would otherwise flatten the active pill. */
.hud-statusbar .hud-dash-toggle .hud-role-opt.hud-role-active {
  background: var(--hud-green-2);
  color: #04070a;
}

/* Top-left cluster (18-Jul-2026) — wordmark on top, streak/coin chips
   (#hq-stats) below it. Only index.html/command.html's dashboard header
   populates #hq-stats; welcome/join/reset/claim's plain .hud-brand still
   renders fine as this column's only child. */
.hud-statusbar-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Top-right cluster — two rows (Fredy 14-Jul-2026): AGENT/BOSS toggle on top,
   then the notification bell + sign-out below it. margin-left auto pins it to
   the right; the brand sits top-left (space-between). */
.hud-statusbar-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-left: auto;
}

/* Row 2 — bell + sign-out. */
.hud-statusbar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Sign-out — icon-only ⏻ square matching the bell's 34px bordered square. */
.hud-statusbar-right .hud-signout {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  border-radius: 8px;
  border-color: var(--hud-green-line);
}

/* AGENT/BOSS segmented-pill base recipe — now only used by the functional
   login toggle below (#view-login .hud-login-toggle scopes/overrides this
   for real tappable buttons); the header's former static read-only pill
   was removed, see the status-bar comment above. */
.hud-role-pill {
  display: flex;
  flex: none;
  padding: 3px;
  border: 1px solid var(--hud-green-line);
  border-radius: 9px;
  background: rgba(57, 255, 136, .06);
  font-size: 11px;
  letter-spacing: .1em;
}

.hud-role-opt {
  padding: 5px 11px;
  border-radius: 6px;
  color: var(--hud-green-dim);
  font-weight: 700;
}

.hud-role-opt.hud-role-active {
  background: var(--hud-green-2);
  color: #04070a;
}

/* ------------------------------------------------------------------ *
 * Login card (M9 Task 2) — functional AGENT/BOSS toggle + callsign
 * sign-in, index.html only (#view-login is not part of command.html, so
 * none of this can reach the HQ view). The segmented toggle
 * (#login-mode-agent/#login-mode-boss) reuses .hud-role-pill/.hud-role-opt
 * above verbatim as its visual recipe, but as real tappable <button>s at
 * the design system's 44px touch-target minimum (docs/design-system/
 * cards/buttons.html) rather than the header's compact read-only chips —
 * hence the extra sizing/active-state rules below rather than reusing the
 * bare classes as-is.
 *
 * The card face deliberately deviates from the "opaque wash over
 * --hud-bg" surface recipe (docs/design-system/cards/surfaces.html) —
 * its background is a translucent rgba fill, not the opaque --hud-bg
 * token, so .hud-topo-page's fixed green concentric-circle background
 * (z-index 0, behind <main>'s z-index 1 — see the page-atmosphere block
 * above) bleeds through the card. This is Fredy's explicit "mockup-style
 * card alpha" direction for this one screen, not a general surface
 * pattern change — every other card in the app keeps the opaque recipe.
 * ------------------------------------------------------------------ */

/* Reused verbatim by join.html (#view-join) and welcome.html's wizard steps
   (.wizard-step) — same card face, any HUD-themed page can opt in just by
   adding this class (was #view-login-only before the sign-up/join flow
   got the same reskin, Fredy's call 12-Jul-2026). */
#view-login .hud-login-card,
#view-join .hud-login-card,
.wizard-step .hud-login-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(57, 255, 136, .08), rgba(57, 255, 136, .02)), rgba(4, 7, 10, .74);
  border: 1px solid rgba(57, 255, 136, .32);
  border-radius: 0;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .7);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.hud-login-card h1 {
  margin: 0 0 var(--sp-4, 16px);
  color: var(--hud-text);
  text-shadow: 0 0 12px rgba(57, 255, 136, .4);
}

/* Toggle sizing — flex the two options to fill the card width, 44px
   touch target. .hud-role-active still carries the solid-green fill from
   the base rule above; compounded again here only where a property must
   win over this selector's own higher-specificity overrides just below
   (background/color), same convention as .hud-mission-card's tint rules. */
#view-login .hud-login-toggle {
  width: 100%;
  margin-bottom: var(--sp-5, 20px);
}

#view-login .hud-login-toggle .hud-role-opt {
  flex: 1 1 50%;
  min-height: 44px;
  border: 0;
  background: transparent;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

#view-login .hud-login-toggle .hud-role-opt.hud-role-active {
  background: var(--hud-green-2);
  color: #04070a;
}

#view-login .hud-login-toggle .hud-role-opt:hover:not(.hud-role-active) {
  color: var(--hud-green-2);
}

@media (prefers-reduced-motion: reduce) {
  #view-login .hud-login-toggle .hud-role-opt { transition: none; }
}

/* Primary neon CTA — was id-scoped to #login-submit only (inheriting
   app.css's global .btn --accent, the app-wide olive-green #77C043, reads
   flat/dead against this phosphor theme). Generalized into a reusable
   class so join.html/welcome.html's primary buttons (Report for duty /
   Start deployment / Next / Deploy N missions) get the same treatment,
   Fredy's call 12-Jul-2026. */
/* Green→blue neon gradient — matches the mission card's ACCEPT MISSION button
   (.hud-mission-btn) so every primary CTA reads the same (Fredy 14-Jul-2026). */
.btn-neon {
  background: linear-gradient(90deg, var(--hud-green-2), #39d0ff);
  color: #052b16;
  box-shadow: 0 8px 24px -6px rgba(57, 255, 136, .6);
}

.btn-neon:hover {
  filter: brightness(1.08);
  box-shadow: 0 10px 28px -6px rgba(57, 255, 136, .7);
}

#view-login .hud-login-forgot,
#view-join .hud-login-forgot {
  display: inline-block;
  margin: -4px 0 var(--sp-3, 12px);
  color: var(--hud-green-dim);
  font-size: 12px;
  text-decoration: none;
}

#view-login .hud-login-forgot:hover {
  color: var(--hud-green-2);
  text-decoration: underline;
}

#view-login .hud-login-note {
  color: var(--hud-green-dim);
  opacity: .85;
  font-size: 13px;
  margin: var(--sp-2, 8px) 0 0;
}

#view-login .hud-login-note:first-of-type {
  margin-top: var(--sp-3, 12px);
}

#view-login .hud-login-note a {
  color: var(--hud-green-2);
}

/* ---- Landing intro (Fredy 26-Jul-2026) — sits above the sign-in card,
   first-time-visitor lede + link to /how-it-works. Plain text, not another
   .hud-login-card panel, so it doesn't compete with the actual form. ---- */
.hud-landing-intro {
  text-align: center;
  margin: 0 0 var(--sp-5, 20px);
}

.hud-landing-intro p {
  color: var(--hud-text);
  font-size: 15px;
  margin: 0 0 var(--sp-2, 8px);
}

.hud-landing-intro a {
  color: var(--hud-green-2);
  font-weight: 600;
  text-decoration: none;
}

.hud-landing-intro a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * how-it-works.html (Fredy 26-Jul-2026) — standalone static explainer,
 * linked from the landing intro above. Emoji-led step cards, scoped to
 * #hiw-page so nothing here leaks into the app shell's own .card usage.
 * ------------------------------------------------------------------ */
#hiw-page .hiw-hero {
  text-align: center;
  margin-bottom: var(--sp-6, 24px);
}

#hiw-page .hiw-hero .hiw-emoji {
  display: block;
  font-size: 40px;
  line-height: 1;
  margin-bottom: var(--sp-2, 8px);
}

#hiw-page .hiw-hero h1 {
  text-shadow: 0 0 12px rgba(57, 255, 136, .4);
}

#hiw-page .hiw-hero p {
  color: var(--hud-green-dim);
}

#hiw-page .hiw-step {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4, 16px);
  background: linear-gradient(180deg, rgba(57, 255, 136, .05), rgba(57, 255, 136, .015)), rgba(4, 7, 10, .6);
  border-color: var(--hud-green-line);
}

#hiw-page .hiw-step-emoji {
  flex: none;
  width: 40px;
  font-size: 26px;
  line-height: 1;
  text-align: center;
}

#hiw-page .hiw-step h3 {
  margin: 0 0 var(--sp-1, 4px);
  color: var(--hud-text);
}

#hiw-page .hiw-step p {
  margin: 0;
  color: var(--hud-green-dim);
  font-size: 14px;
}

#hiw-page .hiw-cta {
  text-align: center;
  margin-top: var(--sp-8, 32px);
}

#hiw-page .hiw-cta .btn {
  margin: 0 var(--sp-2, 8px) var(--sp-3, 12px);
}

#hiw-page .hiw-cta-back {
  margin-top: var(--sp-2, 8px);
}

#hiw-page .hiw-cta-back a {
  color: var(--hud-green-dim);
  font-size: 13px;
}

/* ------------------------------------------------------------------ *
 * Identity row — #operator-card (radar-ring avatar + callsign + the
 * "★ RANK" pill under the name, as of M8 Task 3's fidelity pass — was
 * callsign only) and #hq-stats (flame + gold balance, the mockup's own
 * right-hand column — the rank pill moved out of here into #operator-card,
 * see #hq-rank-pill below). Element ids stay the same JS-facing contract as
 * before (stats.renderHeader() still targets #hq-stats and #hq-rank-pill by
 * plain getElementById, loadout.mountOperatorHeader() still owns
 * #operator-card's callsign/avatar text); this restyles the containers and
 * the classes/ids they already emit: .pill.gold, .flame, .hud-rank-pill.
 *
 * #operator-card is a real <button> as of M8 Task 2 (see index.html) so it
 * opens the customize sub-screen (shared/boot.js's openCustomize()) —
 * appearance/font/text-align/cursor below neutralize the browser's native
 * button chrome so it still reads as the same plain identity chip it always
 * was, and :focus-visible restores a visible keyboard focus ring (native
 * outline would otherwise be the only affordance a sighted keyboard user
 * gets, easy to lose against this dark background).
 * ------------------------------------------------------------------ */

.hud-identity {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px 14px;
}

#hq-header.hud-scr .hud-identity .operator-card {
  appearance: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

#hq-header.hud-scr .hud-identity .operator-card:focus-visible {
  outline: 2px solid var(--hud-green-2);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Name + rank pill column — mockup 1a puts the rank pill directly under the
   callsign, inside the same flex:1 middle column as the name (not stacked
   on the right with flame/coin — see #hq-stats below). align-items:flex-start
   keeps both children their own intrinsic width instead of stretching to
   the column's full width (the flex column default). */
#hq-header.hud-scr .hud-identity .op-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
}

#hq-header.hud-scr .hud-identity .op-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  /* Responsive so it doesn't wrap/overwhelm on a narrow phone (was a flat 33px,
     too big on mobile) while staying bold on the wider desktop panel. */
  font-size: clamp(23px, 5.6vw, 30px);
  line-height: 1.02;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #e8fff2;
  text-shadow: 0 0 12px rgba(57, 255, 136, .4);
  white-space: normal;
}

/* "AGENT " literal prefix — mockup's name line reads "AGENT VIPER", i.e.
   the literal word plus the operator's own callsign, not a callsign that
   happens to start with "Agent". Painted via ::before rather than baked
   into op-name's textContent so mountOperatorHeader() keeps writing the
   plain display_name (still needed bare for e.g. initialsFrom() upstream in
   shared/loadout.js) and this stays a pure CSS concern. */
#hq-header.hud-scr .hud-identity .op-name::before {
  content: 'AGENT ';
}

#hq-header.hud-scr .hud-identity .hud-rank-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  color: #052b16;
  background: linear-gradient(90deg, var(--hud-green-2), #8affc0);
  padding: 5px 11px;
  border-radius: 20px;
  box-shadow: 0 0 14px rgba(57, 255, 136, .4);
  white-space: nowrap;
}

/* Radar-ring avatar — outer 82px ring + two inset border rings (6px/18px,
   real elements below, not pseudo-elements — data-cosmetic-avatar's
   textContent write in shared/loadout.js would otherwise wipe them out
   every repaint, see .op-avatar-glyph) + rotating sweep (a-sweep) + blip
   (a-blip) pseudo-elements, kept behind the avatar's own glyph (initials or
   an equipped emoji) via negative z-index within this element's own
   stacking context (position:relative + z-index:0 below). */
#hq-header.hud-scr .hud-identity .op-avatar.hud-radar-avatar {
  position: relative;
  z-index: 0;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 1px solid rgba(57, 255, 136, .35);
  box-shadow: inset 0 0 22px rgba(57, 255, 136, .25), 0 0 20px rgba(57, 255, 136, .15);
  background: #05130c;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 34px;
  color: #c9ffe4;
  text-shadow: 0 0 10px rgba(57, 255, 136, .8);
  overflow: hidden;
}

.hud-radar-ring {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.hud-radar-ring--outer {
  inset: 6px;
  border: 1px solid rgba(57, 255, 136, .2);
}

.hud-radar-ring--inner {
  inset: 18px;
  border: 1px solid rgba(57, 255, 136, .16);
}

.hud-radar-avatar::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  transform-origin: right center;
  background: conic-gradient(from -90deg at 100% 50%, rgba(57, 255, 136, .55), transparent 55%);
  animation: a-sweep 3.2s linear infinite;
}

.hud-radar-avatar::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 53%;
  top: 30%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hud-green-2);
  box-shadow: 0 0 8px var(--hud-green-2);
  animation: a-blip 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hud-radar-avatar::before,
  .hud-radar-avatar::after {
    animation: none;
  }
}

/* #hq-stats — flame streak chip beside the gold coin/balance chip (the rank
   pill lives under the name instead — see .hud-rank-pill). Moved out of
   .hud-identity into .hud-statusbar-left, under the title (Fredy's call,
   18-Jul-2026 — an earlier top-right placement alongside AGENT/BOSS +
   EN/bell/power was reverted) — it used to sit beside the 108px avatar,
   vertically centered against the whole identity row, which crowded the
   name/rank pill on longer callsigns. The individual chip classes
   (.pill.gold / .flame / .mult-chip) are the exact same classes stats.js
   already emits — only their look changes here, never their markup or the
   JS that writes them. */
#hq-header.hud-scr .hud-statusbar-left .hq-stats {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

#hq-header.hud-scr .hud-statusbar-left .pill.gold {
  font-family: 'Rajdhani', sans-serif;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 14px;
  background: rgba(255, 207, 63, .14);
  border-color: rgba(255, 207, 63, .4);
  color: var(--hud-gold);
  text-shadow: 0 0 8px rgba(255, 207, 63, .4);
}

/* Bigger gold coin icon in the header balance pill (matches the enlarged text). */
#hq-header.hud-scr .hud-statusbar-left .pill.gold .hud-coin-icon {
  width: 16px;
  height: 16px;
}

#hq-header.hud-scr .hud-statusbar-left .flame {
  font-family: 'Rajdhani', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 122, 26, .14);
  border: 1px solid rgba(255, 122, 26, .4);
  border-radius: 20px;
  padding: 4px 11px;
  font-weight: 700;
  font-size: 14px;
  color: var(--hud-flame);
}

#hq-header.hud-scr .hud-statusbar-left .flame .mult-chip {
  color: var(--hud-flame);
  border-color: rgba(255, 122, 26, .4);
  background: rgba(255, 122, 26, .18);
}

/* Flame glyph — the mockup wraps just the 🔥 emoji in its own
   animate-in-place span (a-flame: a subtle scale/rotate pulse), not the
   whole chip. */
.hud-flame-icon {
  display: inline-block;
  animation: a-flame 1.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hud-flame-icon { animation: none; }
}

/* ------------------------------------------------------------------ *
 * XP bar — painted by shared/boot.js (renderXpBar) from the same
 * getDashboard() payload stats.renderHeader already uses; stats.js itself
 * is untouched. Hidden until boot has real dash data.
 * ------------------------------------------------------------------ */

.hud-xpbar {
  position: relative;
  z-index: 6;
  padding: 0 18px 14px;
}

.hud-xpbar-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--hud-green-dim);
  margin-bottom: 6px;
}

.hud-xpbar-track {
  height: 8px;
  background: rgba(57, 255, 136, .1);
  border: 1px solid var(--hud-green-line);
  position: relative;
  overflow: hidden;
}

.hud-xpbar-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--hud-green-2), #39d0ff);
  box-shadow: 0 0 14px rgba(57, 255, 136, .7);
  transition: width .4s ease;
}

.hud-xpbar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, .3) 18px 20px);
  animation: a-xp 3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hud-xpbar-fill { transition: none; }
  .hud-xpbar-fill::after { animation: none; }
}

/* ------------------------------------------------------------------ *
 * Tab bar — #tabs (nav) gets .hud-tabbar, each .tab-btn also gets .hud-tab.
 * M8 Task 2: 4 tabs, values copied verbatim from the mockup's flush tab row
 * (repeats byte-identically across 1a/2a/3a/4a — e.g. 1a's "tabs" comment).
 *
 * app.css's base .tab-btn rule sets flex:1 0 auto + min-width:max-content —
 * fine for scrolling 5 wide labels (the M7 fix for that overflow), but with
 * only 4 short labels now the brief's own fix is to go back to a genuinely
 * shrinkable flex:1 (grow AND shrink, 0 basis) + min-width:0 here, so the
 * bar fits flush in 390px with no scroll needed (verified in Step 4's E2E:
 * document.documentElement.scrollWidth <= 390).
 * ------------------------------------------------------------------ */

.hud-tabbar {
  display: flex;
  width: 100%;
  gap: 0;
  border-bottom: 1px solid rgba(57, 255, 136, .2);
}

.hud-tab {
  flex: 1;
  min-width: 0;
  min-height: auto;
  text-align: center;
  padding: 11px 0;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--hud-green-dim);
}

.hud-tab[aria-pressed="true"] {
  color: #04070a;
  background: var(--hud-green-2);
  box-shadow: 0 0 16px rgba(57, 255, 136, .6);
  border-color: transparent;
  border-radius: 0;
  /* Sharp angular tab with a slanted right edge, matching Fredy's mockup
     (top edge full-width, bottom-right cut inward). */
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

/* ------------------------------------------------------------------ *
 * .hud-coin — reusable coin-amount pattern for Tasks 3-6 (Loadout/History/
 * Rewards content): <img src="assets/coin.png" class="hud-coin-icon"> next
 * to an amount. Not used by this task's own header (the balance pill above
 * is unchanged JS from stats.js and keeps its 🪙 emoji), but defined here so
 * later tasks never have to redefine it.
 * ------------------------------------------------------------------ */

.hud-coin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--hud-gold);
}

.hud-coin-icon {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  filter: drop-shadow(0 0 4px rgba(255, 207, 63, .6));
  animation: coinflip 2.4s linear infinite;
  transform-style: preserve-3d;
}

@media (prefers-reduced-motion: reduce) {
  .hud-coin-icon { animation: none; }
}

/* ------------------------------------------------------------------ *
 * Rewards tab panel wrapper.
 * ------------------------------------------------------------------ */

.hud-panel {
  padding: var(--sp-4, 16px) 0;
}

/* ------------------------------------------------------------------ *
 * Mission cards (Task 3 — Missions/"Today" tab). shared/missions.js keeps
 * emitting the functional classes/attributes it always has (.mission-card,
 * .staged, .card-face, [data-instance], [data-claim], [data-briefing],
 * .swipe-reveal, .redo-note, .briefing, .meta, .actions) — event wiring in
 * missions.js queries those directly and is untouched. These hud-* classes
 * are additive, purely visual, and lifted from the mockup's 1a "mission
 * list" block (OPEN/REDO/STAGED/EMPTY cards) at
 *   docs/superpowers/design-imports/2026-07-11-agent-dashboard-reinvention/
 *     project/Agent Dashboard.dc.html (search id="1a", "mission list").
 * Compounded with .mission-card so these rules reliably outrank app.css's
 * plain `.mission-card{...}` regardless of link order (same convention as
 * the #hq-header.hud-scr rules above).
 * ------------------------------------------------------------------ */

/* Squad filter chips — ALL + one per squad, rendered by missions.js's
   renderToday() above the kicker (and above the EMPTY state too, so
   switching away from an empty squad never loses the selector). Hidden
   entirely for 0/1 squads (squadChipsHtml()'s own early return). Same
   look as the Rewards tab's squad picker — see .hud-rewards-squad-chip. */
.hud-mission-squads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.hud-mission-squad-chip {
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--hud-green-line);
  color: var(--hud-green-dim);
  letter-spacing: .06em;
  font-size: 11px;
}

.hud-mission-squad-chip.active {
  color: #04070a;
  background: var(--hud-green-2);
  border-color: transparent;
  box-shadow: 0 0 12px rgba(57, 255, 136, .4);
}

/* Section kicker — "▸ TONIGHT · N ACTIVE", rendered by missions.js's
   renderToday() directly above the card list (skipped for the EMPTY
   state — see .hud-mission-empty below, which never appears alongside a
   populated list). Values (font-size/letter-spacing/color/opacity) match
   the mockup's own day-group-style label convention reused across this
   file (e.g. .hud-history-day-label). */
.hud-mission-kicker {
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--hud-green-dim);
  opacity: .8;
  /* Matches app.css's existing .mission-card { margin-bottom: var(--sp-4) }
     card-to-card gap (16px) rather than the mockup's literal 14px flex-gap —
     that 16px rhythm is already established between every card below and
     re-deriving a one-off 14px here just for the kicker would read as a
     visible seam, not a fidelity win. */
  margin-bottom: var(--sp-4, 16px);
}

.mission-card.hud-mission-card {
  border: none;
  border-left: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

/* The tinted background lives on .hud-mission-face (not the outer
   .mission-card) and is layered over an OPAQUE var(--hud-bg) base — never a
   bare translucent gradient — because .card-face sits on top of
   .swipe-reveal (full-solid-green, z-index 0, revealed by dragging
   .card-face aside) at z-index 1. A translucent-only face background lets
   that green layer bleed through underneath at rest, before any swipe even
   starts; this app.css-owned mechanic must stay hidden pre-swipe. */
.mission-card.hud-mission-card .hud-mission-face {
  padding: 14px 15px;
}

.mission-card.hud-mission-card.hud-mission-card--open {
  border: 1px solid rgba(57, 255, 136, .32);
}

/* Card faces are translucent (rgba base instead of the opaque --hud-bg token)
   so the page's topo-grid background shows through "a bit" (Fredy 13-Jul-2026,
   matching the mockup). The green swipe-reveal that sits behind the face is
   softened to a faint translucent green just below (.hud-mission-card
   .swipe-reveal) so it no longer bleeds solid-green through the now-translucent
   face at rest. */
.mission-card.hud-mission-card.hud-mission-card--open .hud-mission-face {
  background: linear-gradient(180deg, rgba(57, 255, 136, .07), rgba(57, 255, 136, .02)), rgba(4, 7, 10, .42);
}

.mission-card.hud-mission-card.hud-mission-card--redo {
  border: 1px solid rgba(255, 140, 50, .4);
}

.mission-card.hud-mission-card.hud-mission-card--redo .hud-mission-face {
  background: linear-gradient(180deg, rgba(255, 122, 26, .09), rgba(255, 122, 26, .02)), rgba(4, 7, 10, .42);
}

/* The face is translucent, so the swipe-to-complete layer (solid green + its
   "✓ MISSION COMPLETE" label) would show through at rest. Keep it hidden until
   a drag is in progress — missions.js toggles .dragging on the card. */
.mission-card.hud-mission-card .swipe-reveal {
  opacity: 0;
  transition: opacity .12s ease;
}

.mission-card.hud-mission-card.dragging .swipe-reveal {
  opacity: 1;
}

.mission-card.hud-mission-card.hud-mission-card--staged {
  border: 1px dashed rgba(255, 207, 63, .45);
}

/* Mockup's STAGED face is a flat rgba(255,207,63,.05) wash (no gradient) —
   expressed as a same-color-twice linear-gradient (not a plain color) for
   the same reason as OPEN/REDO above: the multi-layer `background` shorthand
   only allows a plain color as its FINAL layer, so layering this tint over
   the opaque var(--hud-bg) base needs an image-type (gradient) first layer
   even when that layer is visually flat. */
.mission-card.hud-mission-card.hud-mission-card--staged .hud-mission-face {
  background: linear-gradient(rgba(255, 207, 63, .05), rgba(255, 207, 63, .05)), var(--hud-bg);
}

.hud-mission-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.hud-mission-info { min-width: 0; }

.hud-mission-label {
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--hud-green-2);
}

/* --staged used to be a bare `.hud-mission-label--staged` suffix-class rule
   tying (and winning only by source order) against the equally-bare base
   `.hud-mission-label` rule above — the exact same fragile shape that broke
   `.hud-mission-title--staged` earlier (see that fix's history). Not
   currently broken (nothing has boosted the base label rule's specificity),
   but hardened proactively to the same ancestor-compounded pattern already
   used for --redo, so this can't silently regress later either. */
.mission-card.hud-mission-card.hud-mission-card--redo .hud-mission-label { color: #ff9a3a; }
.mission-card.hud-mission-card.hud-mission-card--staged .hud-mission-label { color: var(--hud-gold); }

/* .hud-mission-title/-meta/-actions collide with app.css's plain
   `.mission-card h3`, `.mission-card .meta`, `.mission-card .actions`
   (each (0,1,1) or (0,2,0)) — a bare single-class `.hud-mission-title`
   etc. ((0,1,0)) loses that fight regardless of link order. Compounded
   with `.mission-card.hud-mission-card` (the outer card wrapper) so these
   always win on specificity, not just cascade order. */
.mission-card.hud-mission-card .hud-mission-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.05;
  margin: 4px 0 0;
  color: var(--hud-text);
}

.mission-card.hud-mission-card.hud-mission-card--redo .hud-mission-title { color: #ffe9d6; }
.mission-card.hud-mission-card.hud-mission-card--staged .hud-mission-title { color: #fff2cd; }

.mission-card.hud-mission-card .hud-mission-meta { margin-top: 5px; }

/* Meta chips — group name / due-countdown / proof-needed / squad-op are real
   data with no equivalent in the mockup's own (fictional) OPEN card copy, so
   there's no literal mockup value to copy here. Restyled as bordered mono
   micro-chips instead so they read as part of the HUD language rather than
   app.css's rounded default `.chip` pill — border/color lifted from this
   file's other mono micro-label conventions (e.g. `--hud-green-line` /
   `--hud-green-dim`, already used throughout). Compounded three deep
   (`.mission-card.hud-mission-card .hud-mission-meta .chip`) to outrank
   app.css's plain `.chip` (0,1,0) the same way every other collision in
   this block is handled. */
.mission-card.hud-mission-card .hud-mission-meta .chip {
  padding: 3px 8px;
  min-height: 0;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--hud-green-line);
  color: var(--hud-green-dim);
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .04em;
}

.mission-card.hud-mission-card .hud-mission-meta .chip.due.overdue {
  border-color: rgba(255, 122, 26, .4);
  color: #ff9a3a;
  background: transparent;
}

.hud-mission-reward {
  flex: none;
  text-align: right;
}

.hud-mission-coin {
  justify-content: flex-end;
  font-size: 16px;
}

.hud-mission-xp {
  color: var(--hud-green);
  font-size: 16px;
  margin-top: 3px;
}

/* Streak-bonus tag on a mission card's coin reward (missions.js) — shows the
   boosted payout is a killstreak bonus (🔥×1.1 / ×1.25). Small flame pill,
   inline after the coin icon. */
.hud-mission-mult {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 177, 90, .16);
  border: 1px solid rgba(255, 177, 90, .45);
  color: var(--hud-flame);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Same specificity gap as .hud-mission-title above, vs. app.css's
   `.mission-card .redo-note` (0,2,0) — compounded so the intended
   non-italic #ffcaa0 @ 11px actually wins over app.css's italic
   var(--gold) @ 13px. */
.mission-card.hud-mission-card .hud-mission-redo-note {
  margin: 10px 0 0;
  border-left: 2px solid #ff7a1a;
  padding: 7px 10px;
  background: rgba(255, 122, 26, .08);
  font-size: 11px;
  font-style: normal;
  color: #ffcaa0;
  line-height: 1.4;
}

.hud-mission-redo-tag {
  color: #ff9a3a;
  letter-spacing: .1em;
}

/* Same gap vs. app.css's `.mission-card .briefing` (0,2,0) — compounded so
   the intended green #7fd9ab @ 11px wins outright (color AND font-size),
   not just color-by-load-order-luck. */
.mission-card.hud-mission-card .hud-mission-briefing {
  color: #7fd9ab;
  font-size: 11px;
  line-height: 1.4;
  margin-top: 5px;
}

.mission-card.hud-mission-card.hud-mission-card--redo .hud-mission-briefing { color: #ffcaa0; }

.mission-card.hud-mission-card .hud-mission-actions { margin-top: 12px; }

/* .hud-mission-btn collides with app.css's plain `.btn` (padding,
   border-radius, font, color, background — all (0,1,0), same weight as a
   bare `.hud-mission-btn`) — same fragile-cascade-order risk as above, so
   compounded here too even though it wasn't the specific case that broke. */
.mission-card.hud-mission-card .hud-mission-btn {
  width: 100%;
  border: none;
  border-radius: 0;
  padding: 11px 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: .14em;
  font-size: 14px;
  text-align: center;
  background: linear-gradient(90deg, var(--hud-green-2), #39d0ff);
  color: #052b16;
  box-shadow: 0 8px 24px -6px rgba(57, 255, 136, .6);
}

.mission-card.hud-mission-card.hud-mission-card--redo .hud-mission-btn {
  background: linear-gradient(90deg, #ff7a1a, #ffb15a);
  color: #2a1204;
  box-shadow: 0 8px 24px -6px rgba(255, 122, 26, .6);
}

/* Compounded with .hud-mission-face (not just .hud-mission-btn) so this
   unconditionally outranks the --redo variant's box-shadow override above
   (which is itself 4 classes deep) regardless of state — a disabled button
   must never keep a colored glow shadow. */
.mission-card.hud-mission-card .hud-mission-face .hud-mission-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

.hud-mission-incoming {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--hud-gold);
  letter-spacing: .02em;
}

.hud-mission-spinner {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 207, 63, .4);
  border-top-color: var(--hud-gold);
  animation: a-sweep 2s linear infinite;
}

/* Same collision shape as the rest of this block, vs. app.css's plain
   `.empty-state` (0,1,0) — both bare single-class rules targeting the same
   element (<div class="empty-state hud-mission-empty">), disagreeing on
   padding (22px 16px vs 40px 16px) and color (var(--hud-green-dim) vs
   var(--muted)); only "won" today because hud.css loads after app.css.
   Compounded so it wins outright. */
.empty-state.hud-mission-empty {
  text-align: center;
  padding: 22px 16px;
  border: 1px dashed rgba(57, 255, 136, .2);
  color: var(--hud-green-dim);
}

.hud-mission-empty-icon {
  font-size: 26px;
  opacity: .5;
}

.hud-mission-empty-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: .14em;
  font-size: 14px;
  color: var(--hud-green);
  margin-top: 6px;
}

/* This one is a <p> (shared/missions.js), so app.css's bare `p { color:
   var(--text); ... }` type selector declares a color on the same element —
   a declared value always beats inheriting var(--hud-green-dim) from the
   .hud-mission-empty ancestor (which is how the mockup gets this tone),
   regardless of specificity. Found during the specificity sweep below;
   fixed by declaring the color explicitly rather than relying on
   inheritance to survive a competing rule. */
.hud-mission-empty-sub {
  font-size: 11px;
  margin-top: 4px;
  color: var(--hud-green-dim);
  opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
  .hud-mission-spinner { animation: none; }
}

/* ------------------------------------------------------------------ *
 * Scoreboard (Task 4 — Score tab). Podium (top 3, radar-ring avatars, gold
 * #1) + ranked roster (own-row highlight, streak, xp, rank_change arrow),
 * lifted from the mockup's 2a "Scoreboard" screen (see
 * docs/superpowers/design-imports/2026-07-11-agent-dashboard-reinvention/
 * project/Agent Dashboard.dc.html, turn t2 option 2a — search
 * "SQUAD RANKINGS"). shared/stats.js's renderScoreboard() emits
 * .hud-scoreboard > (.group-chips, unchanged M6 markup/CSS, out of scope
 * here) + .hud-podium + .hud-roster.
 *
 * Specificity note: every class name below (.hud-scoreboard, .hud-podium*,
 * .hud-roster*) is brand new — grepped against shared/app.css in full and
 * confirmed zero hits — so unlike Tasks 2/3's .hud-mission-card etc., there
 * is no bare-single-class collision to out-rank here. Everything is still
 * scoped under the stable .hud-scoreboard ancestor for readability/
 * encapsulation and to match this file's established convention, not
 * because a specificity fight requires it.
 * ------------------------------------------------------------------ */

.hud-scoreboard {
  position: relative;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
}

/* ---- Title row ("SQUAD RANKINGS" + "WEEK <n>" chip) + reset countdown —
   M8 Task 4 fidelity pass, mockup 2a's title block. No left/right padding of
   its own: unlike the mockup's standalone phone-frame demo (where every
   block pads itself 16-18px against a zero-padding .scr wrapper), this
   component lives inside <main>, which already supplies that horizontal
   inset — same convention every other .hud-scoreboard/.hud-history block in
   this file already follows. ---- */

.hud-scoreboard-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2, 8px);
  margin-bottom: 4px;
}

.hud-scoreboard-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .06em;
  color: var(--hud-text);
  text-shadow: 0 0 12px rgba(57, 255, 136, .4);
}

.hud-scoreboard-week {
  flex: none;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--hud-green-dim);
  border: 1px solid rgba(57, 255, 136, .3);
  padding: 3px 8px;
}

.hud-scoreboard-resets {
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--hud-green-dim);
  opacity: .8;
  margin-bottom: 10px;
}

/* ---- Podium — top 3, mockup visual order #2/#1/#3, #1 tallest + gold. ---- */

.hud-scoreboard .hud-podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  padding: 6px 4px 4px;
  margin-bottom: 4px;
}

/* Small-squad fallback (Step 2) — fewer than 3 real slots: cap each slot's
   width instead of letting the base flex:1 rule stretch it to a full third
   of the row, so justify-content:center above centers a narrower block of
   1-2 avatars instead of two evenly-stretched columns. */
.hud-scoreboard .hud-podium--compact .hud-podium-slot {
  flex: 0 1 110px;
}

.hud-scoreboard .hud-podium-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hud-scoreboard .hud-podium-star {
  font-size: 16px;
  color: var(--hud-gold);
  filter: drop-shadow(0 0 6px rgba(255, 207, 63, .7));
}

/* Avatar glyph (equipped-cosmetic emoji, or the initials fallback — mockup
   2a shows "VP"/"GH"/"FL" centered in every podium ring) is the element's
   own textContent, flex-centered; the sweep ::before sits behind it at
   z-index -1 within this element's own stacking context. Text styles are
   the mockup's literal values (Rajdhani 700 17px #c9ffe4; #1: 20px
   #ffe9ab). */
.hud-scoreboard .hud-podium-avatar {
  position: relative;
  z-index: 0;
  overflow: hidden;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--hud-green-line);
  box-shadow: inset 0 0 14px rgba(57, 255, 136, .25);
  background: #05130c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #c9ffe4;
}

.hud-scoreboard .hud-podium-slot--1 .hud-podium-avatar {
  width: 64px;
  height: 64px;
  border-color: rgba(255, 207, 63, .5);
  box-shadow: inset 0 0 16px rgba(255, 207, 63, .3), 0 0 18px rgba(255, 207, 63, .25);
  background: #130f05;
  font-size: 20px;
  color: #ffe9ab;
}

/* Radar sweep, reusing the a-sweep keyframe already declared at the top of
   this file (header radar-avatar) — kept behind the avatar's own emoji text
   via negative z-index within the avatar's own stacking context (position:
   relative + z-index:0 above), same technique as #hq-header's radar-avatar. */
.hud-scoreboard .hud-podium-avatar::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  transform-origin: right center;
  background: conic-gradient(from -90deg at 100% 50%, rgba(57, 255, 136, .45), transparent 55%);
  animation: a-sweep 4s linear infinite;
}

.hud-scoreboard .hud-podium-slot--1 .hud-podium-avatar::before {
  background: conic-gradient(from -90deg at 100% 50%, rgba(255, 207, 63, .5), transparent 55%);
  animation-duration: 3.2s;
}

.hud-scoreboard .hud-podium-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--hud-text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-scoreboard .hud-podium-slot--1 .hud-podium-name {
  font-size: 13px;
  color: #ffe9ab;
}

.hud-scoreboard .hud-podium-bar {
  width: 100%;
  height: 50px;
  background: linear-gradient(180deg, rgba(57, 255, 136, .12), rgba(57, 255, 136, .03));
  border: 1px solid rgba(57, 255, 136, .32);
  border-bottom: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.hud-scoreboard .hud-podium-slot--2 .hud-podium-bar { height: 66px; }

.hud-scoreboard .hud-podium-slot--1 .hud-podium-bar {
  height: 92px;
  background: linear-gradient(180deg, rgba(255, 207, 63, .2), rgba(255, 207, 63, .05));
  border-color: rgba(255, 207, 63, .5);
}

.hud-scoreboard .hud-podium-rank-num {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--hud-green);
}

.hud-scoreboard .hud-podium-slot--1 .hud-podium-rank-num {
  font-size: 30px;
  color: var(--hud-gold);
  text-shadow: 0 0 12px rgba(255, 207, 63, .6);
}

.hud-scoreboard .hud-podium-meta {
  display: flex;
  align-items: center;
  gap: 9px;
}

.hud-scoreboard .hud-podium-streak {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  color: var(--hud-flame);
}

.hud-scoreboard .hud-podium-xp {
  font-size: 10px;
  color: var(--hud-green);
}

.hud-scoreboard .hud-podium-slot--1 .hud-podium-xp { color: var(--hud-gold); }

.hud-scoreboard .hud-podium-slot--me .hud-podium-avatar {
  box-shadow: inset 0 0 14px rgba(57, 255, 136, .25), 0 0 14px rgba(57, 255, 136, .5);
}

.hud-scoreboard .hud-podium-you {
  display: inline-block;
  font-size: 8px;
  letter-spacing: .1em;
  color: #04070a;
  background: var(--hud-green-2);
  padding: 1px 4px;
  border-radius: 4px;
  vertical-align: 1px;
  margin-left: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hud-scoreboard .hud-podium-avatar::before { animation: none; }
}

/* ---- Divider — gradient hairline between the podium and the roster.
   Only ever rendered by stats.js when a roster actually follows (2/3-row
   small-squad fallback has nothing below the podium, so no dangling
   divider). ---- */

.hud-scoreboard-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(57, 255, 136, .4), transparent);
  margin: 4px 0 14px;
}

/* ---- Roster — rank 4+, own-row highlight, streak, xp, movement glyph. ---- */

.hud-scoreboard .hud-roster {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hud-scoreboard .hud-roster-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 1px solid var(--hud-green-line);
}

.hud-scoreboard .hud-roster-row--me {
  background: linear-gradient(90deg, rgba(57, 255, 136, .14), rgba(57, 255, 136, .03));
  border: 1px solid rgba(57, 255, 136, .5);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  box-shadow: 0 0 18px rgba(57, 255, 136, .15);
}

.hud-scoreboard .hud-roster-rank {
  flex: none;
  width: 22px;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--hud-green-dim);
}

.hud-scoreboard .hud-roster-row--me .hud-roster-rank {
  font-size: 16px;
  color: var(--hud-green-2);
}

.hud-scoreboard .hud-roster-avatar {
  position: relative;
  z-index: 0;
  overflow: hidden;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #05130c;
  border: 1px solid rgba(57, 255, 136, .24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--hud-green);
}

.hud-scoreboard .hud-roster-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hud-scoreboard .hud-roster-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .03em;
  color: #daffe9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-scoreboard .hud-roster-row--me .hud-roster-name { color: var(--hud-text); }

.hud-scoreboard .hud-roster-you {
  font-size: 9px;
  letter-spacing: .14em;
  color: #04070a;
  background: var(--hud-green-2);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
}

.hud-scoreboard .hud-roster-streak {
  font-size: 10px;
  color: var(--hud-green-dim);
  margin-top: 2px;
}

.hud-scoreboard .hud-roster-side {
  flex: none;
  text-align: right;
}

.hud-scoreboard .hud-roster-xp {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--hud-green);
}

.hud-scoreboard .hud-roster-move {
  display: block;
  font-size: 10px;
  margin-top: 1px;
  color: var(--hud-green-dim);
}

.hud-scoreboard .hud-roster-move--up { color: var(--hud-green-2); }
.hud-scoreboard .hud-roster-move--down { color: #ff9a3a; }
.hud-scoreboard .hud-roster-move--new { color: var(--hud-gold); letter-spacing: .06em; }

/* ---- Bottom banner — mockup 2a's weekly-cache teaser line. Reuses
   .hud-coin-icon (already defined above for Loadout/History/Rewards) rather
   than inventing a parallel coin-image pattern; .hud-scoreboard-banner-coin
   only overrides the icon's size down to the mockup's own 13px (the shared
   .hud-coin-icon default is 15px, sized for the larger amount readouts
   elsewhere — this is the one place the mockup itself draws it smaller). ---- */

.hud-scoreboard-banner {
  text-align: center;
  margin-top: var(--sp-4, 16px);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--hud-green-dim);
  opacity: .7;
}

.hud-scoreboard-banner-coin.hud-coin-icon {
  width: 13px;
  height: 13px;
}

/* ------------------------------------------------------------------ *
 * History (Task 5 — History tab; M8 Task 6 added the filter-chip row —
 * see .hud-history-filters/.hud-history-filter-chip below — and switched
 * the day-group headings to relative copy, a stats.js-only change with no
 * new CSS of its own). Weekly summary strip (CLEARED / 🪙
 * EARNED / XP GAINED) + a colored-dot timeline grouped by day, lifted from
 * the mockup's 4a "History — Debrief Log" screen (see
 * docs/superpowers/design-imports/2026-07-11-agent-dashboard-reinvention/
 * project/Agent Dashboard.dc.html, turn t4 option 4a). shared/stats.js's
 * renderHistory() emits .hud-history > (.hud-history-summary,
 * .hud-history-day* repeated).
 *
 * The mockup's amber-dashed "🔥 STREAK MILESTONE" entry type is deliberately
 * NOT styled here — renderHistory() never emits it (no backing event log
 * for a streak-milestone moment exists in this schema; see the ENTRY_META
 * comment in stats.js), so there is nothing here to render it.
 *
 * Specificity note: every class below (.hud-history*, .hud-timeline*) is
 * brand new — grepped against shared/app.css in full and confirmed zero
 * hits (same check Task 4 ran for .hud-scoreboard*), so there's no bare
 * single-class collision to out-rank. `.hud-coin`/`.hud-coin-icon` ARE
 * reused as-is (already defined above, already used by Task 3's
 * shared/missions.js) — only `.hud-timeline-coin--neg` is new, and it's
 * compounded with `.hud-coin` in the markup so it wins on source order
 * *and* would still need no extra specificity since `.hud-coin` itself
 * only sets `color: var(--hud-gold)`, not `!important` or anything this
 * single added class can't already override by appearing later in this
 * same file. No tag-selector risk either — every element in this block's
 * markup is a `<div>`/`<span>`/`<img>`, never a bare `<p>`/`<h1>`-`<h3>`
 * that app.css declares a color/margin on (the exact gotcha Task 3's sweep
 * found for `.hud-mission-empty-sub`).
 * ------------------------------------------------------------------ */

.hud-history {
  position: relative;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
}

/* ---- Weekly summary strip ---- */

.hud-history-summary {
  display: flex;
  gap: 1px;
  margin-bottom: var(--sp-4, 16px);
  border: 1px solid var(--hud-green-line);
  background: rgba(57, 255, 136, .05);
}

.hud-history-summary-cell {
  flex: 1;
  text-align: center;
  padding: 11px 6px;
}

.hud-history-summary-cell + .hud-history-summary-cell {
  border-left: 1px solid rgba(57, 255, 136, .18);
}

.hud-history-summary-value {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--hud-text);
}

.hud-history-summary-value--gold { color: var(--hud-gold); }
.hud-history-summary-value--green { color: var(--hud-green); }

.hud-history-summary-label {
  font-size: 8.5px;
  letter-spacing: .14em;
  color: var(--hud-green-dim);
  margin-top: 3px;
}

/* ---- Filter chips (M8 Task 6) ----
 * Mockup 4a: `display:flex;gap:7px;padding:14px 16px 6px;font-size:10px;
 * letter-spacing:.1em`, active chip `background:#39ff88;color:#04070a;
 * font-weight:700`, inactive `border:1px solid rgba(57,255,136,.28);
 * color:#4fd39a` — no border-radius, no border on the active chip. `.chip`
 * is a shared bare class (app.css, mission-card metadata chips) with its
 * own border-radius/background/color/font-size — every property below is
 * set explicitly (not just the ones that differ) so this compound
 * `.hud-history .hud-history-filter-chip` selector, which already outranks
 * a bare `.chip` on specificity alone, doesn't let any app.css chip
 * property leak through. Same pattern as `.hud-rewards .hud-rewards-
 * filter-chip` above.
 * Row container: NOT copied verbatim — the mockup's `padding:14px 16px 6px`
 * bakes its own 16px gutter into the row, but here `main`'s own
 * `clamp(16px,4vw,32px)` horizontal padding already supplies that, so only
 * the vertical 14px/6px is reproduced (as padding, matching the mockup's
 * box model, not margin) to keep the vertical rhythm without doubling the
 * gutter. M8 Task 9 QA sweep caught this row using `margin:0 0 8px`
 * (no top rhythm at all, non-mockup bottom value) — fixed below. */

.hud-history-filters {
  display: flex;
  gap: 7px;
  padding: 14px 0 6px;
}

.hud-history .hud-history-filter-chip {
  display: inline-flex;
  cursor: pointer;
  border-radius: 0;
  padding: 5px 11px;
  border: 1px solid var(--hud-green-line);
  background: transparent;
  color: var(--hud-green-dim);
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .1em;
}

.hud-history .hud-history-filter-chip.active {
  border-color: transparent;
  background: var(--hud-green-2);
  color: #04070a;
  font-weight: 700;
}

/* ---- Day groups + timeline ---- */

.hud-history-day { margin-bottom: 4px; }

.hud-history-day-label {
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--hud-green-dim);
  opacity: .8;
  padding: 10px 2px 4px;
}

.hud-timeline-row {
  display: flex;
  gap: 12px;
}

.hud-timeline-rail {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 16px;
}

.hud-timeline-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-top: 14px;
  background: var(--hud-green-2);
  box-shadow: 0 0 8px var(--hud-green-2);
}

.hud-timeline-line {
  flex: 1;
  width: 1px;
  background: rgba(57, 255, 136, .22);
}

.hud-timeline-entry {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  margin-bottom: 10px;
  border: 1px solid rgba(57, 255, 136, .28);
  background: linear-gradient(90deg, rgba(57, 255, 136, .08), transparent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.hud-timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2, 8px);
}

.hud-timeline-tag {
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--hud-green-2);
}

.hud-timeline-time {
  flex: none;
  font-size: 10px;
  color: var(--hud-green-dim);
}

.hud-timeline-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--hud-text);
  margin-top: 3px;
}

.hud-timeline-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
}

.hud-timeline-coin { font-size: 12px; }

/* Streak-bonus tag on a History coin row (stats.js) — explains a boosted award
   with the tier that produced it. Mirrors the mission card's .hud-mission-mult. */
.hud-timeline-mult {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 177, 90, .16);
  border: 1px solid rgba(255, 177, 90, .45);
  color: var(--hud-flame);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.hud-timeline-xp { color: var(--hud-green); }

.hud-timeline-note {
  font-size: 11px;
  color: #ffcaa0;
  margin-top: 5px;
  line-height: 1.35;
}

/* ---- Per-status dot/tag/entry color variants ---- */

.hud-timeline-row--redo .hud-timeline-dot { background: #ff7a1a; box-shadow: 0 0 8px #ff7a1a; }
.hud-timeline-row--redo .hud-timeline-tag { color: #ff9a3a; }
.hud-timeline-row--redo .hud-timeline-entry {
  border-color: rgba(255, 140, 50, .4);
  background: linear-gradient(90deg, rgba(255, 122, 26, .08), transparent);
}
.hud-timeline-row--redo .hud-timeline-title { color: #ffe9d6; }

.hud-timeline-row--partial .hud-timeline-dot { background: var(--hud-gold); box-shadow: 0 0 8px var(--hud-gold); }
.hud-timeline-row--partial .hud-timeline-tag { color: var(--hud-gold); }
.hud-timeline-row--partial .hud-timeline-entry {
  border-color: rgba(255, 207, 63, .3);
  background: linear-gradient(90deg, rgba(255, 207, 63, .06), transparent);
}

.hud-timeline-row--reward .hud-timeline-dot { background: var(--hud-gold); box-shadow: 0 0 8px var(--hud-gold); }
.hud-timeline-row--reward .hud-timeline-tag { color: var(--hud-gold); }
.hud-timeline-row--reward .hud-timeline-entry {
  border-color: rgba(255, 207, 63, .35);
  background: linear-gradient(90deg, rgba(255, 207, 63, .07), transparent);
}
.hud-timeline-row--reward .hud-timeline-title { color: #fff2cd; }
/* Spend is a negative — reads orange even though the CACHE REDEEMED tag
   above it reads gold, exactly matching the mockup's own color split. */
.hud-timeline-coin--neg { color: #ff9a3a; }

.hud-timeline-row--rejected .hud-timeline-dot { background: #ff5d5d; box-shadow: 0 0 8px #ff5d5d; }
.hud-timeline-row--rejected .hud-timeline-tag { color: #ff5d5d; }
.hud-timeline-row--rejected .hud-timeline-entry {
  border-color: rgba(255, 93, 93, .35);
  background: linear-gradient(90deg, rgba(255, 93, 93, .08), transparent);
}

.hud-timeline-row--expired .hud-timeline-dot { background: var(--hud-green-dim); box-shadow: none; }
.hud-timeline-row--expired .hud-timeline-tag { color: var(--hud-green-dim); }
.hud-timeline-row--expired .hud-timeline-entry {
  border: 1px dashed rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .02);
}
.hud-timeline-row--expired .hud-timeline-title { color: var(--hud-green-dim); }

/* ------------------------------------------------------------------ *
 * Rewards (Task 6 — Rewards tab / "Reward Cache"). Balance strip +
 * featured hero card(s) + ALL/PHYSICAL/DIGITAL filter chips + a 2-column
 * supply-crate grid (redeemable / Boss-pending / locked-with-progress /
 * digital-link states), lifted from the mockup's 3a "Loadout — Reward
 * Cache" screen (see docs/superpowers/design-imports/
 * 2026-07-11-agent-dashboard-reinvention/project/Agent Dashboard.dc.html,
 * turn t3 option 3a). shared/rewards.js emits .hud-rewards >
 * (.hud-rewards-balance, .hud-rewards-featured* repeated, .hud-rewards-
 * filters, .hud-rewards-section-label, .hud-crate-grid > .hud-crate*).
 *
 * The mockup's grid shows only 5 of its 6 seeded physical crates — the 6th
 * (Friend Sleepover, featured=true) appears ONLY as the hero card above the
 * grid, never duplicated below (its own "6 AVAILABLE" count label = 5 grid
 * crates + 1 hero) — rewards.js's filteredGridItems() excludes every
 * featured=true item from the grid to match.
 *
 * Specificity: the class names below (.hud-rewards*, .hud-crate*) are
 * grepped against shared/app.css in full and confirmed zero hits — same
 * "brand new, no bare collision" situation as Tasks 4/5's .hud-scoreboard*
 * and .hud-timeline* rules. `.chip`/`.btn`/`.hud-coin-icon` ARE reused as base classes
 * here though (filter chips, REDEEM/OPEN ARCADE actions, coin icons), so
 * every override of THOSE three is compounded with the stable `.hud-rewards`
 * ancestor to reliably outrank app.css's bare `.chip`/`.btn` rules and this
 * file's own bare `.hud-coin-icon` rule, regardless of link/declaration
 * order (Lesson from Task 3's fix rounds — never rely on load order alone).
 * ------------------------------------------------------------------ */

.hud-rewards {
  position: relative;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
}

/* ---- Balance strip ---- */

.hud-rewards .hud-rewards-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  margin-bottom: var(--sp-4, 16px);
  border: 1px solid rgba(255, 207, 63, .4);
  background: linear-gradient(90deg, rgba(255, 207, 63, .12), rgba(255, 207, 63, .02));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.hud-rewards-balance-label {
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--hud-gold);
  opacity: .85;
}

.hud-rewards-balance-value {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: #ffe9ab;
  text-shadow: 0 0 14px rgba(255, 207, 63, .5);
  line-height: 1;
}

.hud-rewards .hud-rewards-balance .hud-rewards-balance-icon {
  width: 26px;
  height: 26px;
}

.hud-rewards-earned {
  flex: none;
  text-align: right;
  font-size: 10px;
  color: var(--hud-green-dim);
  line-height: 1.5;
}

.hud-rewards-earned-value { color: var(--hud-green); }

/* ---- Featured hero card(s) ---- */

.hud-rewards .hud-rewards-featured {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 15px 16px 16px;
  border: 1px solid rgba(57, 255, 136, .4);
  background: linear-gradient(160deg, rgba(57, 255, 136, .1), rgba(57, 255, 136, .02));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.hud-rewards-featured-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hud-rewards-featured-tag {
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--hud-green-2);
}

.hud-rewards-featured-icon {
  font-size: 44px;
  line-height: .7;
  opacity: .5;
  margin-top: -6px;
}

.hud-rewards-featured-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--hud-text);
  line-height: 1;
  margin-top: 6px;
}

.hud-rewards-featured-desc {
  font-size: 11px;
  color: #7fd9ab;
  margin-top: 5px;
  line-height: 1.4;
}

.hud-rewards-featured-action {
  margin-top: 14px;
}

/* Bigger, clip-cornered variant of .hud-crate-btn for the hero card only —
   compounded three deep so it always outranks the plain grid-crate rule
   below it in source order regardless of link order. */
.hud-rewards .hud-rewards-featured .hud-crate-btn {
  padding: 11px 0;
  font-size: 14px;
  letter-spacing: .1em;
  color: #052b16;
  background: linear-gradient(90deg, var(--hud-green-2), #39d0ff);
  box-shadow: 0 8px 24px -6px rgba(57, 255, 136, .6);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%);
}

/* ---- Filter chips (ALL / PHYSICAL / DIGITAL) ---- */

.hud-rewards-squads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.hud-rewards .hud-rewards-squad-chip {
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--hud-green-line);
  color: var(--hud-green-dim);
  letter-spacing: .06em;
  font-size: 11px;
}

.hud-rewards .hud-rewards-squad-chip.active {
  color: #04070a;
  background: var(--hud-green-2);
  border-color: transparent;
  box-shadow: 0 0 12px rgba(57, 255, 136, .4);
}

.hud-rewards-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.hud-rewards .hud-rewards-filter-chip {
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--hud-green-line);
  color: var(--hud-green-dim);
  letter-spacing: .08em;
  font-size: 11px;
}

.hud-rewards .hud-rewards-filter-chip.active {
  color: #04070a;
  background: var(--hud-green-2);
  border-color: transparent;
  box-shadow: 0 0 12px rgba(57, 255, 136, .4);
}

.hud-rewards-section-label {
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--hud-green-dim);
  opacity: .8;
  padding: 0 2px 10px;
}

/* ---- Supply crate grid ---- */

.hud-crate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hud-crate {
  border: 1px solid rgba(57, 255, 136, .3);
  background: linear-gradient(180deg, rgba(57, 255, 136, .06), transparent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  padding: 13px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hud-crate-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.hud-crate-icon {
  font-size: 30px;
  line-height: 1;
}

.hud-crate-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--hud-text);
  line-height: 1.05;
}

.hud-crate-cost {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  color: var(--hud-gold);
  font-size: 13px;
}

.hud-rewards .hud-crate-btn {
  width: 100%;
  border: none;
  border-radius: 0;
  padding: 8px 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 12px;
  text-align: center;
  background: var(--hud-green-2);
  color: #04070a;
  box-shadow: 0 0 12px rgba(57, 255, 136, .4);
}

.hud-rewards .hud-crate-btn--digital {
  background: linear-gradient(90deg, #39d0ff, var(--hud-green-2));
  color: #04070a;
}

/* Pending — dashed amber border + spinner + "AWAITING BOSS OK" tag. */

.hud-crate--pending {
  border: 1px dashed rgba(255, 207, 63, .5);
  background: rgba(255, 207, 63, .05);
}

.hud-crate--pending .hud-crate-title { color: #fff2cd; }

.hud-crate-spinner {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 207, 63, .35);
  border-top-color: var(--hud-gold);
  animation: a-sweep 2s linear infinite;
}

.hud-crate-pending-tag {
  text-align: center;
  padding: 8px 0;
  border: 1px solid rgba(255, 207, 63, .5);
  color: var(--hud-gold);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: 11px;
}

/* Digital — informational link-out only (Task 1's design note: the arcade
   spends its own points when the kid presses Play there — nothing here ever
   calls redeem_reward for one of these). Distinct cyan tint so it never
   looks interchangeable with a real coin-spending physical crate. */

.hud-crate--digital {
  border-color: rgba(57, 208, 255, .35);
  background: linear-gradient(180deg, rgba(57, 208, 255, .08), transparent);
}

.hud-crate--digital .hud-crate-title { color: #d8f6ff; }

/* Locked crate — grayed icon, progress bar toward cost. Rendered only as the
   compact 2-col grid card (.hud-crate--locked-compact below); the former
   full-width .hud-crate--locked row was removed 18-Jul-2026 (uniform grid). */

.hud-crate-progress-track {
  height: 7px;
  margin-top: 9px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  position: relative;
  overflow: hidden;
}

.hud-crate-progress-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, #1f9c5f, var(--hud-green-2));
  opacity: .7;
}

.hud-crate-progress-label {
  font-size: 10px;
  letter-spacing: .08em;
  color: #9fb3ac;
  margin-top: 6px;
}

/* Locked crate — the uniform 2-col grid card for every locked reward. Same
   chassis as an affordable crate (.hud-crate's notch, padding, icon/title
   layout) so it reads as a peer in the grid, with the locked palette (grey
   border/bg, grayed icon, muted #c6d3cc title, #9fb3ac cost line). Progress
   bar reuses .hud-crate-progress-track/-fill/-label. */

.hud-crate--locked-compact {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .02);
  opacity: .92;
}

.hud-crate--locked-compact .hud-crate-icon {
  filter: grayscale(.6);
  opacity: .7;
}

.hud-crate--locked-compact .hud-crate-title { color: #c6d3cc; }

.hud-crate--locked-compact .hud-crate-cost { color: #9fb3ac; }

.hud-crate--locked-compact .hud-crate-cost .hud-coin-icon {
  filter: grayscale(.5);
  opacity: .7;
}

.hud-crate--locked-compact .hud-crate-progress-track {
  height: 4px;
  margin-top: 7px;
}

.hud-crate--locked-compact .hud-crate-progress-label {
  font-size: 9px;
  margin-top: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .hud-crate-spinner { animation: none; }
}

/* ------------------------------------------------------------------ *
 * Customize Agent sub-screen (M8 Task 7) — mockup 5a. shared/loadout.js's
 * renderCustomizeBody() emits .hud-cz-topbar, .hud-cz-preview (reusing the
 * generic .hud-radar-avatar/.hud-radar-ring pseudo-elements + keyframes
 * already declared near the top of this file for #operator-card, just at
 * this screen's own 104px size), .hud-cz-chips, .hud-cz-kicker, and
 * .hud-cz-grid > .hud-cz-item (equipped/owned/buyable/locked). See
 * docs/superpowers/design-imports/2026-07-11-agent-dashboard-reinvention/
 * project/Agent Dashboard.dc.html, turn t5 option 5a.
 *
 * #customize-back/#panel-customize/#customize-body are index.html's own
 * static markup (Task 2) — untouched here except restyling the existing
 * button. The mockup's back square sits flush on the same row as the
 * "CUSTOMIZE AGENT" title; #customize-back is taken out of flow
 * (position:absolute, same "icon-only 34px bordered square" treatment as
 * .hud-statusbar .bell-btn above) so #customize-body can stay ONE plain
 * full-width block below it (loadout.js only ever owns #customize-body's
 * innerHTML — see index.html's own comment on why the back button must
 * never be inside it) — .hud-cz-topbar's padding-left just clears the
 * square's footprint so the title/coin chip read as being beside it.
 * Positioned elements paint above static in-flow siblings regardless of
 * DOM order (CSS 2.1 stacking rules), so the back button is never occluded
 * by .hud-cz-topbar underneath it, and — being painted on top — still
 * receives its own clicks unblocked.
 *
 * Specificity: .hud-cz-* are brand new (grepped against shared/app.css,
 * zero hits, same convention note as Tasks 4-6's own additions) — the item
 * action tags (.hud-cz-tag*) are a from-scratch button/span family rather
 * than another .chip override, since .chip has no bare app.css collision to
 * guard against here. `.btn.ghost` (unequip + sign-out) and `.hud-coin-icon`
 * (coin chips) ARE reused as base classes, compounded with a stable
 * `.hud-cz-*` ancestor/class so those two overrides reliably outrank
 * app.css's bare rules regardless of link order (same convention as
 * .hud-rewards above). `.loadout-item-avatar`/`.loadout-item-swatch`
 * (app.css, M6) are reused unmodified for each item's preview CONTENT
 * (emoji / camo swatch / "AGENT" callsign-style swatch — real cosmetic
 * data, not the mockup's fictional frame-skin names) inside a new circular
 * .hud-cz-item-preview frame whose border/glow color carries this card's
 * state instead.
 * ------------------------------------------------------------------ */

#panel-customize {
  position: relative;
  padding: 6px 0 28px;
}

/* Icon-only 34px bordered square — same treatment as .hud-statusbar
   .bell-btn above (font-size:0 hides the "◂ BACK" text node visually only,
   keeping it as the button's real accessible name; ::before paints the
   glyph). Taken out of flow so #customize-body can stay a single full-width
   block below/around it — see the section comment above. */
#customize-back {
  position: absolute;
  top: 6px;
  left: 0;
  z-index: 2;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0;
  border-radius: 8px;
  border: 1px solid var(--hud-green-line);
  background: rgba(57, 255, 136, .06);
  color: var(--hud-green);
}

#customize-back:hover {
  border-color: var(--hud-green-2);
  color: var(--hud-green-2);
}

#customize-back::before {
  content: '◂';
  font-size: 15px;
}

/* ---- Top bar (title + coin chip, beside the back square) ---- */

.hud-cz-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding-left: 44px; /* clears #customize-back's 34px + 10px gap */
  margin-bottom: 6px;
}

.hud-cz-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hud-text);
}

.hud-cz-coin {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--hud-gold);
}

.hud-cz-coin .hud-coin-icon {
  width: 15px;
  height: 15px;
}

/* ---- Live preview (104px radar-ring avatar + name + rank pill) ---- */

.hud-cz-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 18px;
  text-align: center;
}

.hud-cz-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 50% 30%, rgba(57, 255, 136, .14), transparent 70%);
  pointer-events: none;
}

.hud-cz-preview-avatar.hud-radar-avatar {
  position: relative;
  z-index: 0;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 1.5px solid rgba(57, 255, 136, .45);
  box-shadow: inset 0 0 26px rgba(57, 255, 136, .3), 0 0 26px rgba(57, 255, 136, .2);
  background: #05130c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hud-cz-preview .hud-radar-ring--outer { inset: 8px; }
.hud-cz-preview .hud-radar-ring--inner { inset: 22px; }

.hud-cz-preview-glyph {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 34px;
  color: #c9ffe4;
  text-shadow: 0 0 12px rgba(57, 255, 136, .8);
}

.hud-cz-preview-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hud-text);
  margin-top: 12px;
  text-shadow: 0 0 12px rgba(57, 255, 136, .4);
}

/* "AGENT " literal prefix — same convention as #hq-header's own .op-name::before
   (see that rule's comment): loadout.js keeps writing the plain display_name. */
.hud-cz-preview-name::before {
  content: 'AGENT ';
}

.hud-cz-preview-rank {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  color: #052b16;
  background: linear-gradient(90deg, var(--hud-green-2), #8affc0);
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 0 14px rgba(57, 255, 136, .4);
}

/* ---- Category chips ---- */

.hud-cz-chips {
  display: flex;
  gap: 7px;
  padding: 0 2px 6px;
  overflow-x: auto;
  font-size: 10px;
  letter-spacing: .1em;
}

/* Compounded with .chip (both classes are in the markup — see loadout.js's
   chipsHtml()) so these overrides reliably beat app.css's bare .chip rule
   regardless of link order — never rely on load order alone (Task 3's own
   fix-round lesson, see .hud-rewards-filter-chip above for the precedent). */
.chip.hud-cz-chip {
  flex: none;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--hud-green-line);
  border-radius: 0;
  background: transparent;
  color: var(--hud-green-dim);
  font-weight: 700;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 5px 100%);
}

.chip.hud-cz-chip.active {
  border-color: transparent;
  background: var(--hud-green-2);
  color: #04070a;
}

.hud-cz-kicker {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hud-green-dim);
  opacity: .8;
  padding: 10px 2px 10px;
}

/* ---- Item grid ---- */

.hud-cz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 11px;
  padding-bottom: 4px;
}

.hud-cz-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 11px 8px 9px;
  text-align: center;
  border: 1px solid var(--hud-green-line);
  background: rgba(57, 255, 136, .03);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.hud-cz-item--equipped {
  border: 1.5px solid var(--hud-green-2);
  background: rgba(57, 255, 136, .08);
  box-shadow: 0 0 16px rgba(57, 255, 136, .2);
}

.hud-cz-item--buyable {
  border-color: rgba(255, 207, 63, .3);
  background: rgba(255, 207, 63, .03);
}

.hud-cz-item--locked {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .02);
  opacity: .85;
}

.hud-cz-item-preview {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(57, 255, 136, .5);
  box-shadow: inset 0 0 12px rgba(57, 255, 136, .3);
  background: #05130c;
}

.hud-cz-item--buyable .hud-cz-item-preview {
  border-color: rgba(255, 207, 63, .5);
  box-shadow: inset 0 0 12px rgba(255, 207, 63, .25);
  background: #130f05;
}

.hud-cz-item--locked .hud-cz-item-preview {
  border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
  background: #0b0e0d;
  filter: grayscale(.6);
}

/* Nested reuse of app.css's M6 preview content (emoji / camo swatch /
   callsign-style swatch) at this frame's own round 52px footprint — real
   cosmetic content, not the mockup's fictional frame-skin art. */
.hud-cz-item-preview .loadout-item-avatar {
  font-size: 26px;
}

.hud-cz-item-preview .loadout-item-swatch {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 8px;
}

/* ==================================================================== *
 * Cosmetic skins — card_camo (camo-*) + callsign_style (cs-*). The real,
 * developed look for both catalog sections (16-Jul-2026). Three render
 * contexts, each needs its own specificity to win the cascade:
 *   1. Shop swatch  — .hud-cz-item-preview .loadout-item-swatch.<class>
 *      (0,3,0) beats the swatch's own `background: transparent` above so the
 *      full pattern / gradient-text actually shows in the round 52px preview.
 *   2. Equipped name — [data-cosmetic-name].cs-* (0,2,0), loaded after
 *      app.css, so it beats `.operator-card .op-name` (tie, source order) and
 *      `.hud-cz-preview-name`. Covers both the header pill and the customize
 *      live-preview callsign.
 *   3. Equipped card — .camo-* (0,1,0), loaded after app.css's `.operator-card`
 *      / `.hud-cz-preview`, so the equipped camo skins the operator pill and
 *      the customize banner with a legible, subtle themed wash (NOT the loud
 *      shop pattern — text must stay readable on top).
 * Palette stays inside the night-ops tokens (greens/gold/flame/danger/ice
 * greys); no third-party imagery. ---- */

/* ---- 1. Shop swatches — the loud, recognisable pattern per camo ---- */
.hud-cz-item-preview .loadout-item-swatch.camo-digital-forest {
  background:
    repeating-linear-gradient(45deg, #0d3a1e 0 5px, transparent 5px 11px),
    repeating-linear-gradient(-45deg, #1f6a34 0 4px, transparent 4px 10px),
    linear-gradient(135deg, #164a2a 0%, #0a2415 100%);
  background-color: #0f3420;
}
.hud-cz-item-preview .loadout-item-swatch.camo-night-tiger {
  background:
    repeating-linear-gradient(112deg,
      #0a0603 0 6px, #1c0f03 6px 9px, #ff7a1a 9px 12px, #1c0f03 12px 15px);
}
.hud-cz-item-preview .loadout-item-swatch.camo-arctic-wolf {
  background:
    repeating-linear-gradient(58deg, #e6f2fa 0 3px, transparent 3px 9px),
    repeating-linear-gradient(-58deg, #9cc6e2 0 3px, transparent 3px 10px),
    linear-gradient(135deg, #2a3b45 0%, #0e1519 100%);
  background-color: #223039;
}
.hud-cz-item-preview .loadout-item-swatch.camo-desert-storm {
  background:
    repeating-linear-gradient(45deg, #6e5320 0 5px, transparent 5px 11px),
    repeating-linear-gradient(-45deg, #b8862f 0 4px, transparent 4px 10px),
    linear-gradient(135deg, #4a3714 0%, #2a1f0b 100%);
  background-color: #40300f;
}
.hud-cz-item-preview .loadout-item-swatch.camo-neon-grid {
  background:
    repeating-linear-gradient(0deg, rgba(255,93,93,.85) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(255,93,93,.85) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 50% 45%, #300c16 0%, #0a0406 100%);
  background-color: #0a0406;
}

/* ---- 1b. Shop swatches — callsign-style text ("AGENT") ---- */
.hud-cz-item-preview .loadout-item-swatch[class*="cs-"] {
  font-weight: 800;
  letter-spacing: .12em;
}
.hud-cz-item-preview .loadout-item-swatch.cs-neon-stencil {
  color: #8ffcc0;
  text-shadow: 0 0 4px rgba(57,255,136,.85), 0 0 9px rgba(57,255,136,.5);
}
.hud-cz-item-preview .loadout-item-swatch.cs-red-stencil {
  color: #ff6b6b;
  text-transform: uppercase;
  text-shadow: 0 0 4px rgba(255,93,93,.55), 1px 1px 0 rgba(0,0,0,.55);
}
.hud-cz-item-preview .loadout-item-swatch.cs-gold-braid,
.hud-cz-item-preview .loadout-item-swatch.cs-ice-type,
.hud-cz-item-preview .loadout-item-swatch.cs-steel-type {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.hud-cz-item-preview .loadout-item-swatch.cs-gold-braid {
  background-image: linear-gradient(180deg, #fff0b8 0%, #ffcf3f 45%, #c8880f 100%);
  filter: drop-shadow(0 0 3px rgba(255,176,32,.45));
}
.hud-cz-item-preview .loadout-item-swatch.cs-ice-type {
  background-image: linear-gradient(180deg, #ffffff 0%, #bfe6ff 50%, #7fb8dd 100%);
  filter: drop-shadow(0 0 4px rgba(159,199,224,.6));
}
.hud-cz-item-preview .loadout-item-swatch.cs-steel-type {
  background-image: linear-gradient(180deg, #f0f4f6 0%, #aab4ba 45%, #5c676d 100%);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.55));
}

/* ---- 2. Equipped callsign — the operator's name text on pill + banner ---- */
[data-cosmetic-name].cs-neon-stencil {
  color: #8ffcc0;
  letter-spacing: .1em;
  text-shadow: 0 0 5px rgba(57,255,136,.75), 0 0 11px rgba(57,255,136,.4);
}
[data-cosmetic-name].cs-red-stencil {
  color: #ff6b6b;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-shadow: 0 0 5px rgba(255,93,93,.5), 1px 1px 0 rgba(0,0,0,.5);
}
[data-cosmetic-name].cs-gold-braid,
[data-cosmetic-name].cs-ice-type,
[data-cosmetic-name].cs-steel-type {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
[data-cosmetic-name].cs-gold-braid {
  background-image: linear-gradient(180deg, #fff0b8 0%, #ffcf3f 48%, #c8880f 100%);
  font-weight: 800;
  letter-spacing: .08em;
  filter: drop-shadow(0 0 4px rgba(255,176,32,.4));
}
[data-cosmetic-name].cs-ice-type {
  background-image: linear-gradient(180deg, #ffffff 0%, #bfe6ff 50%, #7fb8dd 100%);
  letter-spacing: .08em;
  filter: drop-shadow(0 0 5px rgba(159,199,224,.5));
}
[data-cosmetic-name].cs-steel-type {
  background-image: linear-gradient(180deg, #f0f4f6 0%, #aab4ba 45%, #5c676d 100%);
  font-weight: 800;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
}

/* ---- 3. Equipped camo — subtle themed wash on the card surface. Dark base
   keeps the light callsign/rank text legible; the pattern rides at low
   opacity, with a themed border + soft glow. Applied to .operator-card (pill)
   and .hud-cz-preview (banner). ---- */
.camo-digital-forest {
  border-color: rgba(79,211,154,.55);
  background-color: #0c1a12;
  background-image: repeating-linear-gradient(45deg, rgba(79,211,154,.10) 0 7px, transparent 7px 15px);
  box-shadow: inset 0 0 14px rgba(79,211,154,.14), 0 0 8px rgba(79,211,154,.12);
}
.camo-night-tiger {
  border-color: rgba(255,122,26,.55);
  background-color: #1a0f06;
  background-image: repeating-linear-gradient(112deg, rgba(255,122,26,.16) 0 6px, transparent 6px 13px);
  box-shadow: inset 0 0 14px rgba(255,122,26,.14), 0 0 8px rgba(255,122,26,.12);
}
.camo-arctic-wolf {
  border-color: rgba(159,198,226,.55);
  background-color: #131c22;
  background-image: repeating-linear-gradient(58deg, rgba(198,224,240,.12) 0 6px, transparent 6px 13px);
  box-shadow: inset 0 0 14px rgba(159,198,226,.14), 0 0 8px rgba(159,198,226,.1);
}
.camo-desert-storm {
  border-color: rgba(255,176,32,.55);
  background-color: #1c1608;
  background-image: repeating-linear-gradient(45deg, rgba(184,134,47,.16) 0 6px, transparent 6px 13px);
  box-shadow: inset 0 0 14px rgba(255,176,32,.12), 0 0 8px rgba(255,176,32,.1);
}
.camo-neon-grid {
  border-color: rgba(255,93,93,.5);
  background-color: #14090c;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,93,93,.14) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(90deg, rgba(255,93,93,.14) 0 1px, transparent 1px 11px);
  box-shadow: inset 0 0 14px rgba(255,93,93,.12), 0 0 8px rgba(255,93,93,.12);
}

.hud-cz-item-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  color: var(--hud-text);
}

.hud-cz-item--locked .hud-cz-item-name { color: #c6d3cc; }

.hud-cz-item-action {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.hud-cz-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  font-size: 8.5px;
  letter-spacing: .1em;
  padding: 3px 7px;
}

.hud-cz-tag--equipped {
  color: #04070a;
  background: var(--hud-green-2);
}

/* --equip/--buy are real <button>s (data-equip/data-buy — loadout.js's
   delegated click handling), unlike the plain <span> equipped/locked tags —
   this resets the browser's native button chrome (no .btn base class is
   used here; see the section comment on why .hud-cz-* is a from-scratch
   family rather than another .chip/.btn override) before the per-state
   colors below. */
button.hud-cz-tag {
  appearance: none;
  cursor: pointer;
  font: inherit;
  margin: 0;
}

button.hud-cz-tag--equip {
  color: var(--hud-green);
  background: transparent;
  border: 1px solid rgba(57, 255, 136, .4);
}

button.hud-cz-tag--buy {
  font-size: 9px;
  color: #04070a;
  background: var(--hud-gold);
  border: none;
}

.hud-cz-tag--buy .hud-coin-icon {
  width: 11px;
  height: 11px;
}

.hud-cz-tag--locked {
  color: #9fb3ac;
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: 8px;
}

/* Small secondary unequip affordance under the "✓ EQUIPPED" tag — the
   mockup's own equipped card has no unequip control, but this app's
   existing per-item equip/buy handlers (M6) always offered one; dropping it
   would change transaction semantics the Task 7 brief says fidelity must
   never touch. Compounded three deep so it reliably beats app.css's plain
   .btn.ghost sizing regardless of link order (same convention as
   .hud-rewards .hud-crate-btn above). */
.hud-cz-item .btn.ghost.hud-cz-unequip {
  min-height: auto;
  padding: 4px 8px;
  border-radius: 0;
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: none;
  color: #9fb3ac;
  border-color: rgba(255, 255, 255, .14);
}

.hud-cz-item .btn.ghost.hud-cz-unequip:hover {
  border-color: var(--hud-green-2);
  color: var(--hud-green-2);
}

/* ---- ACCOUNT section (M9 Task 5, spec S3) — sits between the item grid
   and the sign-out row (see loadout.js's renderCustomizeBody() HTML order
   and its accountSectionHtml()). Reuses .hud-cz-kicker verbatim for its own
   "▸ ACCOUNT" label (same visual grammar as the item-grid kicker above it)
   and app.css's bare .field/.field input/.error classes for the
   claim-email form — the same "unthemed plain form" convention
   reset.html/reset.js already established for this app's standalone
   auth-adjacent forms; no hud-specific input skin exists anywhere in this
   codebase, so none is invented here either. */

.hud-cz-account {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.hud-cz-account-login {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--hud-green-dim);
  margin: 2px 0 10px;
}

.hud-cz-account-login strong {
  color: var(--hud-text);
  font-weight: 700;
}

.hud-cz-account-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 8px;
}

/* Same gradient recipe as .hud-cz-preview-rank above (green-2 → mint) —
   "confirmed/good" state reuses that established pill treatment. */
.hud-cz-account-chip--linked {
  color: #052b16;
  background: linear-gradient(90deg, var(--hud-green-2), #8affc0);
  box-shadow: 0 0 14px rgba(57, 255, 136, .35);
}

/* Gold, matching the item grid's --buyable state color (rgba(255,207,63,*))
   above — "in-progress/awaiting action" reuses that established amber. */
.hud-cz-account-chip--pending {
  color: #2b1f05;
  background: linear-gradient(90deg, var(--hud-gold), #ffe08a);
  box-shadow: 0 0 14px rgba(255, 207, 63, .3);
}

.hud-cz-account-note {
  color: var(--hud-green-dim);
  opacity: .85;
  font-size: 12px;
  margin: 0 0 12px;
}

.hud-cz-account-form {
  margin-top: 4px;
}

/* ==================================================================== *
 * HQ (Boss) view reskin — command.html (14-Jul-2026). Brings the admin
 * console onto the same Recon HUD skin as the agent view. The page shell
 * (body.hud-app + atmosphere, #hq-header.hud-scr panel, #cmd-tabs.hud-tabbar)
 * reuses the shared recipes; this block themes the HQ-specific chrome and the
 * content the debrief/builder/roster/ledger/curate modules render. Everything
 * is scoped to command-only hooks (#hq-header .hud-hq-brand, #view-command,
 * #view-denied, .cmd-bar) so it never touches index.html, which shares some
 * class names (.card, .btn, .chip, .empty-state). #-scoped selectors also
 * out-rank app.css's plain .card/.btn/.brand rules.
 * ==================================================================== */

/* Brand — shield + wordmark + HQ tag. #hq-header scope beats app.css's
   `#hq-header .brand { flex-direction: column }`. */
#hq-header .hud-hq-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}

#hq-header .hud-hq-brand img {
  display: block;
  filter: drop-shadow(0 0 6px rgba(57, 255, 136, .5));
}

#hq-header .hud-hq-brand .brand-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--hud-text);
  text-shadow: 0 0 10px rgba(57, 255, 136, .35);
  white-space: nowrap;
}

#hq-header .hud-hq-brand .tagline {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .18em;
  color: #04070a;
  background: var(--hud-green-2);
  padding: 2px 7px;
  border-radius: 5px;
  text-transform: none;
}

/* Command bar — squad picker + New Squad. */
#view-command .cmd-bar { align-items: center; }

#view-command .select {
  background: rgba(57, 255, 136, .06);
  border: 1px solid var(--hud-green-line);
  color: var(--hud-text);
  border-radius: 8px;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  padding: 8px 10px;
}

#view-command .squad-picker-btn {
  background: rgba(57, 255, 136, .06);
  border: 1px solid var(--hud-green-line);
  color: var(--hud-text);
  border-radius: 8px;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  padding: 8px 10px;
}

#view-command .squad-picker-panel {
  background: linear-gradient(180deg, rgba(57, 255, 136, .08), rgba(57, 255, 136, .02)), rgba(4, 7, 10, .92);
  border: 1px solid var(--hud-green-line);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#view-command .squad-picker-option {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  color: var(--hud-text);
}

#view-command .squad-picker-option:hover,
#view-command .squad-picker-option:focus-visible {
  background: rgba(57, 255, 136, .1);
}

#view-command .squad-picker-option.active {
  color: var(--hud-green-2);
}

#view-command .squad-picker-option .check {
  color: var(--hud-green-2);
}

#view-command .squad-picker-section-label {
  color: var(--hud-green-dim);
  font-family: 'Share Tech Mono', ui-monospace, monospace;
}

/* Generic HQ content surfaces — translucent dark over the topo grid, green
   edges — echoing the mission cards on the agent view. */
#view-command .card,
#view-command .debrief-card,
#view-command .after-action-card,
#view-command .action-panel,
#view-command .dialog {
  background: linear-gradient(180deg, rgba(57, 255, 136, .05), rgba(57, 255, 136, .015)), rgba(4, 7, 10, .55);
  border: 1px solid var(--hud-green-line);
  border-radius: 12px;
  color: var(--hud-text);
}

#view-command .roster-row,
#view-command .ledger-row,
#view-command .mission-row,
#view-command .claw-row,
#view-command .aa-member-row,
#view-command .check-row {
  background: rgba(4, 7, 10, .45);
  border: 1px solid var(--hud-green-line);
  border-radius: 10px;
}

/* Section headings + secondary labels — mono, dim green. */
#view-command .section-head,
#view-command .debrief-head,
#view-command .aa-headline,
#view-command .aa-stat-label,
#view-command .field label,
#view-command .panel-note,
#view-command .debrief-meta,
#view-command .debrief-note {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  color: var(--hud-green-dim);
  letter-spacing: .04em;
}

/* Inputs. */
#view-command .field input,
#view-command .field select,
#view-command .field textarea,
#view-command input[type="text"],
#view-command input[type="number"],
#view-command input[type="date"],
#view-command input[type="time"],
#view-command textarea,
#view-command select {
  background: rgba(4, 7, 10, .5);
  border: 1px solid var(--hud-green-line);
  color: var(--hud-text);
  border-radius: 8px;
}

/* Chips. */
#view-command .chip {
  border: 1px solid var(--hud-green-line);
  color: var(--hud-green);
  background: rgba(57, 255, 136, .06);
}

/* Primary buttons → the shared green→blue neon gradient; ghost → green
   outline. High enough specificity (id + class) to beat app.css's .btn. */
#view-command .btn:not(.ghost),
#view-denied .btn:not(.ghost) {
  background: linear-gradient(90deg, var(--hud-green-2), #39d0ff);
  color: #052b16;
  border: none;
  box-shadow: 0 8px 24px -6px rgba(57, 255, 136, .5);
}

#view-command .btn.ghost {
  border-color: var(--hud-green-line);
  color: var(--hud-green);
  background: transparent;
}

/* Empty / denied states. */
#view-command .empty-state,
#view-denied .empty-state {
  color: var(--hud-green-dim);
}

/* Invite-code readout (squad tab). */
#view-command .invite-code {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  color: var(--hud-green-2);
  background: rgba(57, 255, 136, .08);
  border: 1px dashed var(--hud-green-line);
  border-radius: 8px;
}

/* Invite rows (Squad tab) — the Copy/Delete buttons overflowed the card on
   phones because .mission-row-actions is flex-shrink:0 and the long join URL
   in .claw-main had no min-width:0 to shrink below. Let the row wrap so the
   actions drop onto their own line, and break the URL (Fredy 14-Jul-2026). */
#view-command .claw-row {
  flex-wrap: wrap;
}

#view-command .claw-main {
  min-width: 0;
  flex: 1 1 auto;
}

#view-command .claw-main .invite-code,
#view-command .claw-main .debrief-meta {
  overflow-wrap: anywhere;
}

#view-command .claw-row .mission-row-actions {
  flex: 1 1 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* After-action report — the gold coin.png (with its coinflip spin) replaces the
   flat 🪙 emoji (Fredy 14-Jul-2026). Size the one beside the big "Coins earned"
   value up to match; the member-row/chip coins keep the 15px default. */
#view-command .aa-stat-value .aa-coin-icon {
  width: 22px;
  height: 22px;
  vertical-align: -3px;
}

/* Disband (danger-zone) button — red outline so it reads as destructive next to
   the green ghost buttons. */
#view-command .hud-danger-btn {
  border-color: rgba(255, 93, 93, .45);
  color: #ff8a8a;
}

#view-command .hud-danger-btn:hover {
  border-color: #ff5d5d;
  color: #ffb3b3;
}

/* ------------------------------------------------------------------ *
 * SQUAD tab (agent view) — shared/squad.js. Reuses .hud-rewards-section-label
 * for headers; cards borrow the crate surface recipe (translucent panel,
 * green hairline border) so the tab reads as part of the same HUD.
 * ------------------------------------------------------------------ */

.hud-squad { padding: 2px 0 8px; }

.hud-squad-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 26px;
}

.hud-squad-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid var(--hud-green-line);
  border-radius: 12px;
  background: rgba(57, 255, 136, .035);
}

.hud-squad-card-main { min-width: 0; }

.hud-squad-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--hud-text);
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-squad-meta {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--hud-green-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hud-squad-role {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid currentColor;
}

.hud-squad-role--boss { color: var(--hud-gold); }
.hud-squad-role--agent { color: var(--hud-green-2); }

.hud-squad-leave {
  flex: none;
  padding: 8px 16px;
  font-size: 12px;
  letter-spacing: .1em;
  border: 1px solid rgba(255, 93, 93, .45);
  color: #ff8a8a;
  background: transparent;
}

.hud-squad-leave:hover:not(:disabled) {
  border-color: #ff5d5d;
  color: #ffb3b3;
}

.hud-squad-leave:disabled { opacity: .5; }

.hud-squad-join-label { padding-top: 4px; }

.hud-squad-join {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.hud-squad-join-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hud-text);
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--hud-green-line);
  border-radius: 10px;
}

.hud-squad-join-input::placeholder {
  color: var(--hud-green-dim);
  opacity: .55;
  letter-spacing: .12em;
}

.hud-squad-join-input:focus {
  outline: none;
  border-color: var(--hud-green-2);
  box-shadow: 0 0 0 2px rgba(57, 255, 136, .18);
}

.hud-squad-join-btn {
  flex: none;
  padding: 12px 22px;
  font-size: 13px;
  letter-spacing: .12em;
  border: 1px solid var(--hud-green-2);
  color: var(--hud-bg);
  background: var(--hud-green-2);
}

.hud-squad-join-btn:hover:not(:disabled) { filter: brightness(1.08); }
.hud-squad-join-btn:disabled { opacity: .5; }

.hud-squad-join-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--hud-green-dim);
  opacity: .75;
}

/* ==================================================================== *
 * Reward thumbnails (035_group_rewards) — a Boss-uploaded photo fills the
 * Agent reward-crate icon box in place of the emoji glyph. Explicit boxes
 * because the emoji slots size by font-size alone. Locked crates keep their
 * container's grayscale/dim (can't-afford treatment) so the photo dims too.
 * ==================================================================== */
.hud-crate-thumb { display: block; object-fit: cover; border-radius: 9px; }
.hud-crate-icon .hud-crate-thumb { width: 46px; height: 46px; }
.hud-crate--locked-compact .hud-crate-icon .hud-crate-thumb { width: 42px; height: 42px; }
.hud-rewards-featured-icon .hud-crate-thumb {
  width: 62px; height: 62px; border-radius: 12px; opacity: 1; margin-top: 0;
  border: 1px solid rgba(57, 255, 136, .3);
}

/* ==================================================================== *
 * HQ Rewards tab (rewards-admin.js) — the Boss creates/edits/removes their
 * squad's rewards. Recon-HUD skin, reusing the app.css .overlay/.dialog/
 * .field/.btn modal chrome for the create/edit form.
 * ==================================================================== */
.hud-rwa-loading {
  padding: 28px 4px;
  color: var(--hud-green-dim);
  font-size: 14px;
}

.hud-rwa-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 14px;
}
.hud-rwa-kicker {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--hud-green);
  text-transform: uppercase;
}
.btn.hud-rwa-new {
  flex: none;
  padding: 8px 14px;
  font-size: 13px;
  white-space: nowrap;
}

.hud-rwa-empty { margin-top: 6px; }

.hud-rwa-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hud-rwa-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--hud-green-line);
  border-radius: 12px;
  background: rgba(6, 20, 13, .55);
}

.hud-rwa-thumb {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #06130c;
  border: 1px solid rgba(57, 255, 136, .35);
}
.hud-rwa-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hud-rwa-thumb--icon { font-size: 26px; }

.hud-rwa-body { flex: 1 1 auto; min-width: 0; }
.hud-rwa-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--hud-text);
  line-height: 1.15;
}
.hud-rwa-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
}
.hud-rwa-cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 14px;
  color: var(--hud-gold);
}
.hud-rwa-tag {
  font-size: 10.5px;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  color: #b9c9c1;
  text-transform: uppercase;
}
.hud-rwa-tag--approval { color: var(--hud-flame); border-color: rgba(255, 177, 90, .4); }
.hud-rwa-tag--instant { color: var(--hud-green); border-color: var(--hud-green-line); }
.hud-rwa-tag--featured { color: var(--hud-gold); border-color: rgba(255, 214, 92, .4); }
.hud-rwa-desc {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: #9fb3ac;
}

.hud-rwa-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hud-rwa-row .btn.ghost.hud-rwa-edit,
.hud-rwa-row .btn.ghost.hud-rwa-del {
  padding: 5px 12px;
  font-size: 12px;
  min-width: 78px;
}
.hud-rwa-row .btn.ghost.hud-rwa-del { color: var(--danger); border-color: rgba(255, 93, 93, .35); }

/* Create/edit dialog extras (on top of app.css .dialog) */
.hud-rwa-dialog { max-width: 420px; }
.hud-rwa-formrow {
  display: flex;
  gap: 12px;
}
.hud-rwa-formrow .field { flex: 1 1 auto; }
.hud-rwa-formrow .field:last-child { flex: 0 0 88px; }
.hud-rwa-opt { color: var(--muted); font-weight: 400; font-size: .85em; }
.hud-rwa-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 12px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
}
.hud-rwa-check input { width: 17px; height: 17px; flex: none; accent-color: var(--accent); }
.hud-rwa-preview {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 12px;
  margin: 4px 0 10px;
  border: 1px solid var(--hud-green-line);
}

/* ================================================================= *
 * Photo-proof capture dialog (proof.js) — recon "viewfinder" skin.
 *
 * This overlay is appended to <body>, outside the #view-command scope,
 * so it styles itself directly from the :root HUD tokens. The bare
 * <input type=file> is hidden inside a big tappable viewfinder tile so
 * agents (kids) see a camera target + reticle corners, not the browser's
 * "Choose File" control. On a phone the tile opens the camera directly.
 * ================================================================= */
.dialog.hud-proof {
  background:
    linear-gradient(180deg, rgba(57, 255, 136, .06), rgba(57, 255, 136, .015)),
    rgba(4, 7, 10, .92);
  border: 1px solid var(--hud-green-line);
  color: var(--hud-text);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(57, 255, 136, .06) inset;
}
.dialog.hud-proof h2 {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  color: var(--hud-green-2);
  letter-spacing: .04em;
  text-shadow: 0 0 12px rgba(57, 255, 136, .35);
}
.hud-proof-sub {
  color: var(--hud-green-dim) !important;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  letter-spacing: .02em;
}

/* The capture tile = a camera viewfinder the whole thing is tappable. */
.hud-proof-capture {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 var(--sp-4);
  border-radius: 14px;
  border: 2px dashed var(--hud-green-line);
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(57, 255, 136, .10), transparent 70%),
    rgba(4, 7, 10, .6);
  cursor: pointer;
  overflow: hidden;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.hud-proof-capture:hover,
.hud-proof-capture:focus-visible {
  border-color: var(--hud-green-2);
  box-shadow: 0 0 0 3px rgba(57, 255, 136, .12), 0 0 28px -4px rgba(57, 255, 136, .35) inset;
}
.hud-proof-capture:active { transform: scale(.99); }
.hud-proof-capture.has-photo {
  border-style: solid;
  border-color: var(--hud-green-2);
}

/* Native file input — hidden but kept focusable/clickable via the label. */
.hud-proof-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.hud-proof-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  text-align: center;
  padding: var(--sp-4);
}
.hud-proof-cam {
  font-size: 46px;
  line-height: 1;
  filter: drop-shadow(0 0 14px rgba(57, 255, 136, .45));
  animation: hud-proof-bob 2.2s ease-in-out infinite;
}
@keyframes hud-proof-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-5px) rotate(2deg); }
}
.hud-proof-cta {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--hud-green-2);
  text-shadow: 0 0 10px rgba(57, 255, 136, .4);
}
.hud-proof-hint {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--hud-green-dim);
  opacity: .8;
}

.hud-proof-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.hud-proof-retake {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #052b16;
  background: linear-gradient(90deg, var(--hud-green-2), #39d0ff);
  box-shadow: 0 6px 18px -4px rgba(57, 255, 136, .6);
  pointer-events: none; /* the label owns the tap → re-opens the camera */
}

/* Corner reticle brackets — the "targeting" viewfinder frame. */
.hud-proof-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--hud-green-2);
  z-index: 2;
  pointer-events: none;
  opacity: .9;
}
.hud-proof-corner.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.hud-proof-corner.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.hud-proof-corner.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.hud-proof-corner.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }

/* Buttons — matched to the HUD primary/ghost skin. */
.dialog.hud-proof .btn:not(.ghost) {
  background: linear-gradient(90deg, var(--hud-green-2), #39d0ff);
  color: #052b16;
  border: none;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 8px 24px -6px rgba(57, 255, 136, .5);
}
.dialog.hud-proof .btn.ghost {
  border: 1px solid var(--hud-green-line);
  color: var(--hud-green);
  background: rgba(57, 255, 136, .05);
}
.dialog.hud-proof .btn:disabled { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .hud-proof-cam { animation: none; }
}

/* ====================================================================
 * Trending missions (049) — the "borrow a popular chore" picker in the
 * Boss Missions tab. Rows reuse .mission-row theming; only the command-bar
 * layout, panel header, and the post-add button state need new rules.
 * ==================================================================== */

/* With two buttons (Trending + New Mission) the heading gets its own line and
   the buttons share the row below, so nothing crowds on a phone. Scoped to the
   Missions tab so other .cmd-bar tabs (roster/rewards) are untouched. */
#tab-missions .cmd-bar { flex-wrap: wrap; }
#tab-missions .cmd-bar .section-head { flex: 1 1 100%; }
#tab-missions .cmd-bar .btn { flex: 1 1 0; text-align: center; white-space: nowrap; }

#view-command .trending-panel { margin-bottom: var(--sp-3); }
#view-command .trending-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-1);
}
#view-command .trending-head h3 {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  color: var(--hud-green); letter-spacing: .04em;
}
#view-command .trending-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
/* Subtle flame-green left edge so borrowed picks read a touch warmer than the
   Boss's own catalogue rows. */
#view-command .trending-row { border-left: 2px solid rgba(255, 179, 71, .45); }
#view-command .trending-row .btn { white-space: nowrap; }

/* Post-add confirmation — stays legible (green), not dimmed like a normal
   disabled button (app.css .btn:disabled greys it out). */
#view-command .btn.added,
#view-command .btn.ghost.added {
  background: rgba(57, 255, 136, .16);
  color: var(--hud-green);
  border: 1px solid var(--hud-green-line);
  box-shadow: none; opacity: 1; filter: none; cursor: default;
}

/* ====================================================================
 * Per-mission private toggle (050) — icon in the top-right corner of each
 * Boss mission card. A reserved right gutter (padding-right on the row)
 * keeps Edit/Retire clear of the corner so nothing overlaps.
 * ==================================================================== */
#view-command .mission-row { position: relative; padding-right: 2.85rem; }

#view-command .mission-priv-toggle {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
  background: rgba(4, 7, 10, .5);
  border: 1px solid var(--hud-green-line);
  border-radius: 8px; color: var(--hud-text); cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#view-command .mission-priv-toggle:hover { border-color: var(--hud-green); }
#view-command .mission-priv-toggle:focus-visible {
  outline: none; border-color: var(--hud-green);
  box-shadow: 0 0 0 2px rgba(57, 255, 136, .35);
}
/* Private state — warm amber accent, distinct from the green "shared" default. */
#view-command .mission-priv-toggle.is-private {
  border-color: rgba(255, 179, 71, .6);
  background: rgba(255, 179, 71, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 179, 71, .25);
}
#view-command .mission-priv-toggle:disabled { opacity: .5; cursor: not-allowed; }
