:root {
  --bg: #0b0d10;
  --panel: #14181d;
  --panel-2: #1a1f25;
  --border: #262d36;
  --text: #e6e9ee;
  --muted: #8b94a3;
  --accent: #4ade80;
  --accent-dim: #166534;
  --warn: #fbbf24;
  --danger: #f87171;
  --link: #60a5fa;
  --atk: #f4a48f;
  --def: #9bc1ee;
}

/* ── Light theme (day mode). Attribute selector outranks :root, so it wins
   over the dark defaults regardless of source order. Toggle in the header. ── */
html[data-theme="light"] {
  --bg: #f4f6f9;
  --panel: #ffffff;
  --panel-2: #eceff3;
  --border: #d4d9e1;
  --text: #131822;
  --muted: #5a6675;
  --accent: #15803d;       /* darker green: legible as text/links on light */
  --accent-dim: #d6f5e0;   /* light green: active-pill & primary-button bg */
  --warn: #b45309;
  --danger: #dc2626;
  --link: #2563eb;
  --atk: #c2410c;
  --def: #2563eb;
  --bf-orange: #ea580c;
  --bf-orange-bg: rgba(234, 88, 12, 0.10);
  --bf-orange-border: rgba(234, 88, 12, 0.5);
}
body { transition: background-color .2s ease, color .2s ease; }

/* Theme toggle in the header */
.header-actions { display: flex; align-items: center; gap: 12px; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex: none;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  color: var(--muted); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--muted); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .ic-moon { display: none; }
html[data-theme="light"] .theme-toggle .ic-sun { display: none; }
html[data-theme="light"] .theme-toggle .ic-moon { display: inline-block; }

/* Light-mode contrast fixes: the step check/X are near-black for the bright
   dark-mode accent; on light the accent darkens, so flip them to white. */
html[data-theme="light"] .step[data-state="done"] .step-icon::after { border-color: #fff; }
html[data-theme="light"] .step[data-state="error"] .step-icon::before,
html[data-theme="light"] .step[data-state="error"] .step-icon::after { background: #fff; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Header ──────────────────────────────────────────────────────── */
header {
  border-bottom: 1px solid var(--border);
}
.header-top {
  padding: 18px 32px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}

.brand {
  text-decoration: none;
  color: inherit;
  display: block;
}
.brand:hover { text-decoration: none; }
.brand h1 {
  margin: 0;
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.01em;
  transition: color 0.15s;
}
.brand:hover h1 { color: var(--accent); }
.brand .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

.back-link {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.back-link:hover {
  color: var(--text);
  border-color: #3a4350;
  background: var(--panel-2);
  text-decoration: none;
}
.back-link[hidden] { display: none; }

/* Segmented filter buttons (used by the MU tool). */
.seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.seg-btn {
  background: var(--bg);
  border: none; border-radius: 0;
  padding: 8px 12px;
  font: inherit; font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn:hover  { background: var(--panel-2); color: var(--text); }
.seg-btn.active { background: var(--panel-2); color: var(--text); font-weight: 600; }

input[type="text"] {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  padding: 8px 12px; border-radius: 6px; font-size: 13px; min-width: 220px;
  font-family: inherit;
}
input:focus { outline: none; border-color: #3a4350; }
button {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  padding: 8px 14px; border-radius: 6px; font-size: 13px; cursor: pointer;
  font-family: inherit;
}
button:hover:not(:disabled) { background: var(--panel-2); border-color: #3a4350; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

main { padding: 24px 32px; max-width: 1400px; margin: 0 auto; width: 100%; flex: 1; }

footer {
  padding: 20px 32px;
  border-top: 1px solid var(--border);
  color: var(--muted); font-size: 13px; text-align: center;
}
footer .heart { color: var(--danger); }
footer .sep { margin: 0 6px; opacity: 0.5; }
footer a { color: var(--muted); }
footer a:hover { color: var(--text); }

.view { display: none; }
.view.active { display: block; }

/* ── Tool view header ────────────────────────────────────────────── */
/* Each tool view opens with one of these: a page-level title and
   subtitle on the left, the tool's controls on the right, separated
   from the content below by a thin border. No dedicated background
   bar, so it reads as part of the page rather than a strip pinned
   to the chrome. */
.tool-header {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.tool-header .title-block {
  flex: 1 1 280px;
  min-width: 0;
}
.tool-header h2 {
  margin: 0;
  font-size: 20px; font-weight: 600;
  line-height: 1.2;
  display: flex; align-items: center; gap: 10px;
  color: var(--text);
}
.tool-header .title-block p {
  margin: 6px 0 0;
  color: var(--muted); font-size: 13px;
  line-height: 1.5;
  max-width: 60ch;
}
.tool-header .controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Home view ───────────────────────────────────────────────────── */
.home { max-width: 760px; margin: 16px auto; }
.home .lede {
  font-size: 16px; color: var(--text); line-height: 1.6;
  margin: 0 0 28px;
}
.home .lede a { color: var(--accent); }
.tool-cards { display: grid; gap: 14px; }
.tool-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: border-color 0.15s, background 0.15s;
}
.tool-card:hover {
  text-decoration: none;
  border-color: rgba(74, 222, 128, 0.45);
  background: var(--panel-2);
}
.tool-card-icon {
  font-size: 36px; line-height: 1; flex-shrink: 0;
}
.tool-card-body { flex: 1; min-width: 0; }
.tool-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--text); }
.tool-card p {
  margin: 0 0 10px;
  color: var(--muted); font-size: 13px; line-height: 1.5;
}
.tool-card .tool-link {
  color: var(--accent); font-size: 13px; font-weight: 500;
}

/* ── Shared status + step panel ──────────────────────────────────── */
.status {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 16px; margin-bottom: 16px; color: var(--muted); font-size: 13px;
}
.status.error { color: var(--danger); border-color: #4a1d1d; }
.status.hidden { display: none; }

.hint {
  color: var(--muted); font-size: 13px; text-align: center;
  padding: 48px 16px;
}
.hint.hidden { display: none; }

.steps {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 18px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 12px;
  transition: opacity 0.4s ease;
}
.steps.hidden { display: none; }
.steps.fading { opacity: 0; pointer-events: none; }

.step {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13px; line-height: 1.35;
}
.step-icon {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
  border-radius: 50%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.step[data-state="pending"] .step-icon { border: 1.5px solid var(--border); }
.step[data-state="active"]  .step-icon {
  border: 1.5px solid rgba(96, 165, 250, 0.22);
  border-top-color: var(--link);
  animation: step-spin 0.7s linear infinite;
}
.step[data-state="done"]    .step-icon { background: var(--accent); }
.step[data-state="done"]    .step-icon::after {
  content: '';
  width: 4px; height: 8px;
  border: solid #052e0e;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(0, -1px);
}
.step[data-state="error"]   .step-icon { background: var(--danger); }
.step[data-state="error"]   .step-icon::before,
.step[data-state="error"]   .step-icon::after {
  content: ''; position: absolute;
  width: 9px; height: 1.8px; background: #2a0a0a; border-radius: 1px;
}
.step[data-state="error"]   .step-icon::before { transform: rotate(45deg); }
.step[data-state="error"]   .step-icon::after  { transform: rotate(-45deg); }
@keyframes step-spin { to { transform: rotate(360deg); } }

.step-body { flex: 1; min-width: 0; }
.step-title { color: var(--muted); font-weight: 500; transition: color 0.2s; }
.step[data-state="active"] .step-title,
.step[data-state="error"]  .step-title { color: var(--text); }
.step[data-state="done"]   .step-title { color: var(--muted); }

.step-sub {
  color: var(--muted); font-size: 12px; margin-top: 2px;
  font-variant-numeric: tabular-nums;
  display: none;
}
.step[data-state="active"] .step-sub:not(:empty),
.step[data-state="error"]  .step-sub:not(:empty) { display: block; }
.step[data-state="error"]  .step-sub { color: var(--danger); }

.step-count {
  color: var(--muted); font-size: 12px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0; align-self: center;
}
.step[data-state="done"] .step-count { color: var(--accent); }

/* ── Shared howto disclosure ─────────────────────────────────────── */
details.howto {
  margin-top: 24px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
}
details.howto.hidden { display: none; }
details.howto summary {
  cursor: pointer; padding: 12px 18px;
  color: var(--muted); font-size: 13px; user-select: none;
  list-style: none;
}
details.howto summary::-webkit-details-marker { display: none; }
details.howto summary::before {
  content: '▸'; display: inline-block;
  margin-right: 0.4em;
  transition: transform 0.15s;
}
details.howto[open] summary::before { transform: rotate(90deg); }
details.howto summary:hover { color: var(--text); }
details.howto .howto-body {
  padding: 0 18px 16px; font-size: 12px; color: var(--muted); line-height: 1.6;
}
details.howto ul { margin: 0; padding-left: 20px; }
details.howto li { margin-bottom: 6px; }
details.howto code {
  background: var(--panel-2); padding: 1px 5px; border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px;
}

/* ── MU view ─────────────────────────────────────────────────────── */
.mu-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.mu-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.mu-card .card-head { display: flex; gap: 12px; align-items: center; }
.mu-avatar {
  width: 48px; height: 48px; border-radius: 8px; background: var(--panel-2);
  flex-shrink: 0; object-fit: cover; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--muted);
  font-weight: 600; font-size: 18px;
}
.mu-card .card-title { flex: 1; min-width: 0; }
.mu-card .card-title h3 {
  margin: 0; font-size: 15px; font-weight: 600; word-break: break-word;
  display: flex; align-items: center; gap: 8px;
}
.mu-card .card-title .game-link {
  display: inline-flex; align-items: center;
  color: var(--muted); transition: color 0.15s;
}
.mu-card .card-title .game-link:hover { color: var(--link); }
.mu-card .card-title .game-link svg { width: 14px; height: 14px; }
.mu-card .card-title > .badge { margin-top: 4px; }

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  background: rgba(74, 222, 128, 0.12); color: var(--accent);
}
.badge.full { background: rgba(248, 113, 113, 0.12); color: var(--danger); }

.mu-card .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-size: 12px; }
.mu-card .stat { background: var(--panel-2); padding: 8px 10px; border-radius: 6px; }
.mu-card .stat .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.mu-card .stat .v { font-weight: 600; margin-top: 2px; word-break: break-word; }
.mu-card .stat .v.warn { color: var(--danger); }

.members { font-size: 12px; }
.members .m-head {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; padding: 6px 0; user-select: none;
}
.members .m-head:hover { color: var(--accent); }
.members ul { list-style: none; margin: 0; padding: 8px 0 0 0; max-height: 220px; overflow-y: auto; }
.members li {
  padding: 4px 8px; border-radius: 4px;
  font-size: 12px; color: var(--text); background: var(--panel-2); margin-bottom: 4px;
  word-break: break-all;
  display: flex; align-items: center; gap: 6px;
}
.members li.foreign { opacity: 0.55; }
.members li .role {
  display: inline-block;
  font-size: 10px; padding: 1px 6px; border-radius: 3px;
  background: rgba(96, 165, 250, 0.15); color: var(--link);
  font-weight: 600; letter-spacing: 0.02em;
}
.members li .flag { font-size: 11px; }
.members .arrow { transition: transform 0.2s; display: inline-block; }
.members[data-open="true"] .arrow { transform: rotate(90deg); }
.members[data-open="false"] ul { display: none; }

/* ── Advisor view ────────────────────────────────────────────────── */
.adv-grid { display: flex; flex-direction: column; gap: 12px; }

.adv-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden;
}
.adv-card .card-head {
  padding: 14px 18px;
  display: flex; align-items: center;
  gap: 10px; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.adv-card .card-head .title {
  display: flex; align-items: center; gap: 12px;
  font-size: 16px; font-weight: 600;
  min-width: 0;
}
.icon-box {
  width: 32px; height: 32px;
  background: var(--panel-2); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; line-height: 0; overflow: hidden;
}
.icon-box img { width: 24px; height: 24px; object-fit: contain; display: block; }
.icon-box .fallback {
  width: 24px; height: 24px;
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.adv-card .card-head .sub-title {
  color: var(--muted); font-size: 13px; font-weight: normal;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adv-card .card-head .link-icon {
  color: var(--muted); text-decoration: none;
  padding: 4px; border-radius: 4px;
  display: inline-flex; align-items: center; line-height: 0;
}
.adv-card .card-head .link-icon svg { width: 14px; height: 14px; }
.adv-card .card-head .link-icon:hover {
  color: var(--link); background: var(--panel-2); text-decoration: none;
}
.worker-badge {
  font-size: 11px; font-weight: 500;
  background: rgba(96, 165, 250, 0.12); color: var(--link);
  border: 1px solid rgba(96, 165, 250, 0.3);
  padding: 2px 8px; border-radius: 999px;
  white-space: nowrap; cursor: help;
}
.adv-card .card-head .chev {
  display: inline;
  color: var(--muted); font-size: 12px;
  transition: transform 0.15s;
}
.adv-card.expanded .card-head .chev { transform: rotate(180deg); }

.verdict {
  margin-left: auto;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent;
}
.verdict.optimal { background: rgba(74, 222, 128, 0.1);  color: var(--accent); border-color: rgba(74, 222, 128, 0.3); }
.verdict.move    { background: rgba(251, 191, 36, 0.1);  color: var(--warn);   border-color: rgba(251, 191, 36, 0.3); }
.verdict.huge    { background: rgba(248, 113, 113, 0.1); color: var(--danger); border-color: rgba(248, 113, 113, 0.3); }

.adv-card .body { padding: 16px 18px; }
.adv-card .panels { display: grid; gap: 12px; }
.adv-card:not(.expanded) .body,
.adv-card:not(.expanded) details.alts-wrap { display: none; }
.adv-card .panels.compare { grid-template-columns: 1fr auto 1fr; }
.adv-card .panels.compare .arrow {
  align-self: center; color: var(--muted); font-size: 20px; user-select: none;
}

.side {
  background: var(--panel-2); border-radius: 6px; padding: 14px;
}
.side .label {
  font-size: 11px; text-transform: uppercase; color: var(--muted);
  letter-spacing: 0.6px; margin-bottom: 8px; font-weight: 500;
}
.side .country {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 14px; margin-bottom: 10px;
}
.side .country .region { font-weight: 600; }
.side .country .controller { color: var(--muted); font-size: 12px; }
.side .country .flag { font-size: 14px; }
.side .stats { display: flex; gap: 16px; font-size: 13px; flex-wrap: wrap; }
.side .stat-label { color: var(--muted); font-size: 12px; }
.side .stat-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.side .stat-value.pos      { color: var(--accent); }
.side .stat-value.tax-low  { color: var(--accent); }
.side .stat-value.tax-mid  { color: var(--warn); }
.side .stat-value.tax-high { color: var(--danger); }
.delta {
  margin-left: 4px; font-size: 11px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.delta.good { color: var(--accent); }
.delta.bad  { color: var(--danger); }
.side .net {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px;
}
.side .net .net-val {
  font-weight: 600; font-variant-numeric: tabular-nums; font-size: 15px;
}
.breakdown {
  margin-top: 6px; font-size: 11px; color: var(--muted); line-height: 1.6;
}

details.alts-wrap { border-top: 1px solid var(--border); }
details.alts-wrap summary {
  cursor: pointer; padding: 10px 18px;
  color: var(--muted); font-size: 12px; user-select: none;
  background: var(--panel-2);
  list-style: none;
}
details.alts-wrap summary::-webkit-details-marker { display: none; }
details.alts-wrap summary::before {
  content: '▸'; display: inline-block;
  margin-right: 0.4em;
  transition: transform 0.15s;
}
details.alts-wrap[open] summary::before { transform: rotate(90deg); }
details.alts-wrap summary:hover { color: var(--text); }
.alts { background: var(--panel-2); }
.alt {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 18px; font-size: 12px; gap: 10px;
  border-top: 1px solid var(--border);
}
.alt.curr { background: rgba(96, 165, 250, 0.05); }
.alt.worse { opacity: 0.5; }
.alt .rank { color: var(--muted); margin-right: 6px; font-variant-numeric: tabular-nums; }
.alt .right { font-variant-numeric: tabular-nums; white-space: nowrap; }
.alt .right .v { font-weight: 600; }

@media (max-width: 720px) {
  .header-top { padding: 10px 20px; }
  main { padding: 12px 20px; }
  footer { padding: 16px 20px; }

  .brand h1 { font-size: 18px; }
  .brand .sub { display: none; }   /* tagline is dead weight on a phone */
  .back-link { padding: 6px 12px; font-size: 12px; }

  /* Reclaim vertical space in the toolkit chrome on small screens. */
  .stg-sticky { margin-bottom: 12px; }
  .stg-idbar { padding: 8px 0 10px; }
  .stg-tools-head { margin: 0 0 6px; }
  .stg-tool-info { padding: 11px 13px; margin-bottom: 12px; }
  .stg-tool-info .stg-ti-icon { font-size: 19px; }

  .tool-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    gap: 12px 16px;
  }
  .tool-header h2 { font-size: 18px; }
  .tool-header .title-block p { font-size: 12.5px; }

  /* Home page: tighter on mobile so two cards fit one viewport. */
  .home { margin: 8px auto; }
  .home .lede { font-size: 15px; margin-bottom: 20px; }
  .tool-card { padding: 14px; gap: 14px; }
  .tool-card-icon { font-size: 32px; }
  .tool-card h3 { font-size: 15px; margin-bottom: 4px; }
  .tool-card p { font-size: 12.5px; margin-bottom: 8px; }

  .adv-card .panels.compare { grid-template-columns: 1fr; }
  .adv-card .panels.compare .arrow { transform: rotate(90deg); justify-self: center; }
  .alt { flex-direction: column; align-items: flex-start; gap: 4px; }
  .alt .right { white-space: normal; padding-left: 18px; }
  .adv-card .card-head { flex-wrap: wrap; }
  .adv-card .card-head .title { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
  .adv-card .card-head .chev { margin-left: auto; order: 2; }
  .verdict {
    margin-left: 0; order: 3; flex-basis: 100%;
    white-space: normal; text-align: center;
  }
}

/* ── Battle Orders gate (encrypted tool) ─────────────────────────── */
input[type="password"] {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  padding: 8px 12px; border-radius: 6px; font-size: 13px;
  font-family: inherit;
}
input[type="password"]:focus { outline: none; border-color: #3a4350; }

.btn-primary {
  background: var(--accent-dim); border-color: var(--accent);
  color: var(--accent); font-weight: 600;
}
.btn-primary:hover:not(:disabled) { background: rgba(74, 222, 128, 0.2); }

.tool-card .lock-pill {
  background: rgba(251, 191, 36, 0.12);
  color: var(--warn);
  border: 1px solid rgba(251, 191, 36, 0.3);
  padding: 1px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-left: 6px;
}

.bo-gate {
  max-width: 420px;
  margin: 40px auto 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px 28px;
  text-align: center;
}
.bo-gate .lock-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.7; }
.bo-gate h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.bo-gate p { margin: 0 0 20px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.bo-gate-form { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.bo-gate-form input[type="password"] {
  width: 100%; text-align: center; font-size: 14px; padding: 10px 12px;
}
.bo-gate-form button { padding: 10px 14px; font-size: 14px; font-weight: 500; }
.bo-gate-error {
  color: var(--danger); font-size: 12px;
  min-height: 16px; margin-top: 4px;
}
@media (max-width: 720px) {
  .bo-gate { padding: 24px 18px; margin: 24px auto; }
}

/* ── Skill tags (Eco / War / Mixed) in MU member lists ───────────── */
.members li .skill-tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.members li .skill-tag.skill-eco {
  background: rgba(74, 222, 128, 0.15);
  color: var(--accent);
}
.members li .skill-tag.skill-war {
  background: rgba(248, 113, 113, 0.15);
  color: var(--danger);
}
.members li .skill-tag.skill-mixed {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warn);
}


/* ═══════════════════════════════════════════════════════════════════
 *  EMPLOYEE CLOCK-IN MONITOR
 *  Styles scoped with clockin- prefix to avoid colliding with the rest
 *  of the portal. Reuses existing CSS variables (--bg, --panel, --accent,
 *  --warn, --danger, --link, --muted, --text, --border, --accent-dim).
 * ═══════════════════════════════════════════════════════════════════ */

/* Summary bar */
.clockin-summary-bar {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  align-items: center; margin-bottom: 18px;
  padding: 14px 18px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
}
.clockin-sum-stat { display: flex; flex-direction: column; gap: 2px; }
.clockin-sum-stat .k {
  color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.clockin-sum-stat .v {
  font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.clockin-sum-stat .v .sub {
  font-size: 12px; font-weight: 400;
  color: var(--muted); margin-left: 6px;
}
.clockin-sum-stat .v .sub .pos { color: var(--accent); font-weight: 600; }
.clockin-sum-stat .v .sub .neg { color: var(--danger); font-weight: 600; }
.clockin-sum-stat .v .sub .sep { opacity: 0.5; margin: 0 4px; }
.clockin-spacer { flex: 1; }
.clockin-filter-group {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.clockin-filter-toggle {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none;
  color: var(--muted); font-size: 12px;
}
.clockin-filter-toggle input { margin: 0; cursor: pointer; }
.clockin-sort-group {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.clockin-sort-group label {
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
  color: var(--muted);
  background: var(--panel-2);
  user-select: none;
}
.clockin-sort-group label:hover { color: var(--text); }
.clockin-sort-group input { position: absolute; opacity: 0; pointer-events: none; }
.clockin-sort-group input:checked + label {
  background: var(--accent-dim); color: var(--accent);
}
.clockin-sort-group label + input + label { border-left: 1px solid var(--border); }

/* Worker cards */
.clockin-worker-list { display: flex; flex-direction: column; gap: 8px; }

.clockin-worker-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden;
}
.clockin-worker-head {
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.clockin-worker-name {
  font-weight: 600; font-size: 14px;
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.clockin-worker-name a { color: inherit; text-decoration: none; }
.clockin-worker-name a:hover { color: var(--link); text-decoration: underline; }
.clockin-link-icon {
  color: var(--muted); padding: 2px;
  display: inline-flex; align-items: center; line-height: 0;
}
.clockin-link-icon:hover { color: var(--link); }
.clockin-link-icon svg { width: 12px; height: 12px; }

.clockin-worker-meta {
  color: var(--muted); font-size: 12px;
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-left: auto;
}
.clockin-item { display: inline-flex; align-items: center; gap: 4px; }
.clockin-item strong {
  color: var(--text); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.clockin-ago { color: var(--accent); }
.clockin-ago.warn   { color: var(--warn); }
.clockin-ago.danger { color: var(--danger); }
.clockin-ago.never  { color: var(--muted); font-style: italic; }

/* Timeline */
.clockin-worker-timeline {
  padding: 4px 16px 14px;
  border-top: 1px solid var(--border);
}
.clockin-timeline-track {
  position: relative;
  height: 28px;
  margin-top: 14px;
  overflow: visible;
}
.clockin-timeline-track::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 2px;
  background: var(--border);
  transform: translateY(-50%);
  border-radius: 1px;
}
.clockin-timeline-now {
  position: absolute; top: -3px; bottom: -3px;
  width: 2px;
  background: var(--link);
  border-radius: 1px;
  z-index: 2;
}
.clockin-timeline-now::after {
  content: 'now';
  position: absolute; top: -16px;
  transform: translateX(-50%);
  color: var(--link); font-size: 10px;
  font-weight: 600;
  background: var(--bg);
  padding: 0 4px;
  white-space: nowrap;
}
.clockin-punch {
  position: absolute;
  top: 50%;
  width: 10px; height: 10px;
  background: var(--accent);
  border: 2px solid var(--bg);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: help;
  transition: transform 0.15s, box-shadow 0.15s;
  z-index: 1;
}
.clockin-punch:hover {
  transform: translate(-50%, -50%) scale(1.4);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
  z-index: 3;
}
.clockin-timeline-axis {
  position: relative;
  height: 18px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.clockin-axis-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.clockin-axis-tick::before {
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  width: 1px; height: 4px;
  background: var(--border);
}
.clockin-no-punches {
  color: var(--muted); font-style: italic; font-size: 12px;
  padding: 8px 0 4px;
}

/* Collapsible episode detail */
.clockin-ep-detail { margin-top: 12px; }
.clockin-ep-detail > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  list-style: none;
  user-select: none;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.clockin-ep-detail > summary::-webkit-details-marker { display: none; }
.clockin-ep-detail > summary::before {
  content: '▸';
  transition: transform 0.15s;
  display: inline-block;
  font-size: 9px;
}
.clockin-ep-detail[open] > summary::before { transform: rotate(90deg); }
.clockin-ep-detail > summary:hover { color: var(--text); }

/* Episode list */
.clockin-ep-list {
  margin-top: 10px;
  display: flex; flex-direction: column;
  gap: 1px;
  background: var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.clockin-ep {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 4px 14px;
  padding: 8px 12px;
  background: var(--panel-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.clockin-ep-time   { color: var(--text); font-weight: 500; white-space: nowrap; }
.clockin-ep-ago    { color: var(--muted); font-size: 11px; white-space: nowrap; }
.clockin-ep-amount { color: var(--accent); font-weight: 600; white-space: nowrap; text-align: right; }
.clockin-ep-meta   { color: var(--muted); font-size: 11px; white-space: nowrap; text-align: right; }
.clockin-ep-gap {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
  white-space: nowrap;
  padding-top: 2px;
  border-top: 1px dashed var(--border);
  margin-top: 4px;
}
.clockin-ep-gap.long { color: var(--warn); font-style: normal; }
.clockin-show-more {
  background: var(--panel);
  border: none;
  color: var(--muted);
  font-size: 11px;
  padding: 8px 12px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
}
.clockin-show-more:hover { color: var(--link); background: var(--panel-2); }

/* Payroll projection panel — sits between the summary bar and the
 * worker list. Two cards show pace-based projections (3h, 6h) derived
 * from each worker's last 24h of wages; the third is the energy-cap
 * theoretical ceiling (10h). Uses existing variables only — no new
 * colours introduced. */
.clockin-projection {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 18px;
  margin-top: 24px;     /* breathing room above when sitting under the */
  margin-bottom: 16px;  /* worker list, like the howto disclosure does */
}
.clockin-proj-head { margin-bottom: 12px; }
.clockin-proj-title {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.clockin-proj-hint {
  font-size: 12px; color: var(--muted); margin-top: 3px;
}
.clockin-proj-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
.clockin-proj-card {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 14px;
}
.clockin-proj-card.max { border-color: rgba(96, 165, 250, 0.35); }
.clockin-proj-label {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 6px;
}
.clockin-proj-label .max-tag {
  background: rgba(96, 165, 250, 0.15); color: var(--link);
  padding: 1px 6px; border-radius: 3px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.clockin-proj-value {
  font-size: 22px; font-weight: 600; margin-top: 4px;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.clockin-proj-sub {
  font-size: 11px; color: var(--muted); margin-top: 2px;
}

/* "Last Nh actual" reference shown under each projection card. Sits
 * separated from the projection above with a dashed line — clearly a
 * different kind of number (factual, not predicted). */
.clockin-proj-actual {
  font-size: 11px; color: var(--muted);
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-variant-numeric: tabular-nums;
}

/* Mobile clock-in adjustments — keep everything below the 720px
 * breakpoint in one place so the file's easier to scan.
 * - 720px: summary-bar filters wrap, worker meta drops to full-width,
 *          episode list collapses from 4 columns to 2.
 * - 640px: projection grid drops from 3 cols to 2, with the ceiling
 *          card spanning both columns of row 2.
 * - 380px: projection grid drops to a single column for very narrow
 *          screens (iPhone SE, foldables). */
@media (max-width: 720px) {
  .clockin-summary-bar { gap: 10px 16px; }
  .clockin-spacer { display: none; }
  .clockin-filter-group {
    width: 100%;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    gap: 10px;
  }
  .clockin-worker-meta { margin-left: 0; width: 100%; gap: 10px; }

  .clockin-ep {
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding: 10px 12px;
  }
  .clockin-ep-time   { grid-column: 1; grid-row: 1; }
  .clockin-ep-amount { grid-column: 2; grid-row: 1; }
  .clockin-ep-ago    { grid-column: 1; grid-row: 2; }
  .clockin-ep-meta   { grid-column: 2; grid-row: 2; }
  .clockin-ep-gap    { grid-column: 1 / -1; grid-row: 3; padding-top: 2px; }
}

@media (max-width: 640px) {
  .clockin-projection { padding: 12px 14px; }
  .clockin-proj-head { margin-bottom: 10px; }
  .clockin-proj-title { font-size: 13px; }
  .clockin-proj-hint { font-size: 11.5px; line-height: 1.45; }
  .clockin-proj-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .clockin-proj-card.max { grid-column: 1 / -1; }
  .clockin-proj-card { padding: 10px 12px; }
  .clockin-proj-label { font-size: 10.5px; }
  .clockin-proj-value { font-size: 18px; margin-top: 3px; }
  .clockin-proj-sub { font-size: 10.5px; }
}

@media (max-width: 380px) {
  .clockin-proj-grid { grid-template-columns: 1fr; }
  .clockin-proj-card.max { grid-column: auto; }
}

/* Company chip on each worker card — reuses the global .icon-box
 * from the advisor (same item icon styling). Sits between the
 * worker name and the meta row, wrapping below on narrow cards. */
.clockin-company {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); text-decoration: none;
  font-size: 12px;
  padding: 2px 8px 2px 2px;
  border-radius: 6px;
  background: var(--panel-2);
  transition: color 0.15s, background 0.15s;
}
.clockin-company:hover {
  color: var(--text); background: #20262e;
  text-decoration: none;
}
.clockin-company .icon-box {
  width: 20px; height: 20px; border-radius: 4px;
}
.clockin-company .icon-box img { width: 14px; height: 14px; }
.clockin-company .icon-box .fallback {
  width: 14px; height: 14px; font-size: 12px;
}
.clockin-company-name {
  font-weight: 500; color: var(--text);
}

/* Skill chips — sit inside .clockin-item alongside the existing
 * status pill and "Last clock-in" entries. The icon takes a per-skill
 * accent colour so production, energy, etc. are scannable. */
.clockin-skill-icon {
  width: 11px; height: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.clockin-skill-icon svg { width: 11px; height: 11px; }
.clockin-skill-icon[data-skill="production"] { color: #c7a875; }    /* pickaxe gold */
.clockin-skill-icon[data-skill="energy"]     { color: var(--warn); } /* bolt yellow */
.clockin-skill-icon[data-skill="strength"]   { color: #f4a48f; }
.clockin-skill-icon[data-skill="damage"]     { color: var(--danger); }

/* ═══════════════════════════════════════════════════════════════════
 *  BUDDY FINDER
 *  Scoped with bf- prefix. Reuses --bg, --panel, --panel-2, --border,
 *  --text, --muted, --accent, --link, --warn, --danger.
 *  Adds one bespoke colour for the "mismatched" priority badge
 *  (orange), since the existing palette is green/yellow/red and we
 *  need a fourth distinct accent here.
 * ═══════════════════════════════════════════════════════════════════ */
:root {
  --bf-orange: #fb923c;
  --bf-orange-bg: rgba(251, 146, 60, 0.10);
  --bf-orange-border: rgba(251, 146, 60, 0.55);
}

/* Intro card with the buddy-system pitch */
.bf-intro {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.6;
}
.bf-intro h3 {
  margin: 0 0 8px;
  font-size: 15px; font-weight: 600;
  color: var(--text);
}
.bf-intro p {
  margin: 0 0 8px;
  color: var(--muted);
}
.bf-intro p:last-child { margin-bottom: 0; }
.bf-intro strong { color: var(--text); font-weight: 600; }

/* Maths disclosure inside the intro */
.bf-intro details.bf-maths {
  margin-top: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.bf-intro details.bf-maths > summary {
  cursor: pointer; padding: 8px 12px;
  user-select: none; list-style: none;
  font-size: 12.5px; color: var(--link);
  transition: background 0.15s;
}
.bf-intro details.bf-maths > summary::-webkit-details-marker { display: none; }
.bf-intro details.bf-maths > summary::before {
  content: '▸';
  color: var(--muted);
  font-size: 10px;
  display: inline-block;
  width: 10px; text-align: center;
  margin-right: 4px;
  transition: transform 0.15s;
}
.bf-intro details.bf-maths[open] > summary::before { transform: rotate(90deg); }
.bf-intro details.bf-maths > summary:hover { background: var(--bg); }
.bf-intro details.bf-maths[open] > summary { border-bottom: 1px solid var(--border); }
.bf-maths-body {
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.bf-maths-body h4 {
  color: var(--text); font-size: 12px; font-weight: 600;
  margin: 10px 0 4px;
}
.bf-maths-body h4:first-child { margin-top: 0; }
.bf-maths-body strong { color: var(--text); }
.bf-maths-body ul {
  margin: 6px 0 8px;
  padding-left: 20px;
}
.bf-maths-body li { margin-bottom: 4px; }
.bf-maths-body .num {
  color: var(--accent); font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.bf-maths-body .neg {
  color: var(--danger); font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.bf-maths-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 8px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.bf-maths-table th, .bf-maths-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.bf-maths-table th {
  color: var(--text); font-weight: 600;
  background: var(--bg);
}
.bf-maths-table td:first-child { color: var(--text); }
.bf-punchline {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
}
.bf-punchline strong { color: var(--accent); }
.bf-maths-footnote {
  margin-top: 10px;
  font-size: 11px;
  opacity: 0.7;
}

/* The two action cards (waitlist, find a buddy) */
.bf-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 16px;
}
.bf-card h3 {
  margin: 0 0 6px;
  font-size: 15px; font-weight: 600;
  color: var(--text);
}
.bf-card-sub {
  color: var(--muted);
  font-size: 12.5px;
  margin: 0 0 10px;
  line-height: 1.5;
}
.bf-card-sub:last-of-type { margin-bottom: 14px; }
.bf-card-sub.warn { color: var(--warn); }
.bf-card-sub strong { color: var(--text); font-weight: 600; }

.bf-input-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.bf-input-row input[type="text"] {
  flex: 1; min-width: 0;
  padding: 9px 12px;
  font-size: 14px;
}
.bf-input-row button {
  padding: 9px 16px;
  font-size: 13px;
  white-space: nowrap;
}
.bf-stats-line {
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.bf-stats-line strong { color: var(--text); font-weight: 600; }

/* Inline status messages under each card (lighter weight than the
   shared .status panel — these appear next to a single input field) */
.bf-inline-status {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 10px;
}
.bf-inline-status.info {
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.25);
  color: var(--link);
}
.bf-inline-status.success {
  background: rgba(74, 222, 128, 0.10);
  border: 1px solid rgba(74, 222, 128, 0.30);
  color: var(--accent);
}
.bf-inline-status.warn {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: var(--warn);
}
.bf-inline-status.error {
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.25);
  color: var(--danger);
}
.bf-inline-status.hidden { display: none; }
.bf-inline-status strong { color: inherit; font-weight: 600; }

/* Tiny inline spinner for status messages */
.bf-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--border);
  border-top-color: var(--link);
  border-radius: 50%;
  animation: bf-spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes bf-spin { to { transform: rotate(360deg); } }

/* Match results */
.bf-match-results { margin-top: 16px; }
.bf-results-head {
  font-size: 13px; font-weight: 600;
  margin: 0 0 10px;
  color: var(--text);
}
.bf-results-head strong { color: var(--text); }
.bf-results-head .bf-count {
  color: var(--muted); font-weight: 400; font-size: 12px;
}

/* Player card */
.bf-player {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 8px;
  min-width: 0;
}
.bf-avatar {
  width: 32px; height: 32px; border-radius: 4px;
  flex-shrink: 0;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 13px; font-weight: 600;
  overflow: hidden;
}
.bf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bf-player-body { flex: 1; min-width: 0; }
.bf-name-row {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.bf-name {
  color: var(--text); font-weight: 600;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.bf-name:hover { color: var(--link); text-decoration: none; }
.bf-link-icon {
  width: 11px; height: 11px;
  opacity: 0.5;
  flex-shrink: 0;
}
.bf-name:hover .bf-link-icon { opacity: 1; }
.bf-meta-row {
  display: flex; align-items: center; gap: 6px 10px;
  flex-wrap: wrap;
  color: var(--muted); font-size: 11.5px;
}
.bf-stat { font-variant-numeric: tabular-nums; }
.bf-stat strong { color: var(--text); font-weight: 600; }

/* Priority badges */
.bf-priority-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.35);
}
.bf-priority-badge.imbalanced {
  color: var(--bf-orange);
  background: var(--bf-orange-bg);
  border-color: var(--bf-orange-border);
}

/* Empty state when no candidates */
.bf-empty-state {
  padding: 18px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  background: var(--panel-2);
  border: 1px dashed var(--border);
  border-radius: 6px;
}

/* "Show more" pagination row */
.bf-see-more-row {
  text-align: center;
  margin-top: 14px;
}
.bf-see-more-note {
  color: var(--muted); font-size: 11.5px;
  margin-top: 6px;
}

/* Next-steps panel after a successful match search */
.bf-next-steps {
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 8px;
}
.bf-next-steps h3 {
  margin: 0 0 8px;
  font-size: 13px; font-weight: 600;
  color: var(--accent);
}
.bf-next-steps ol {
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.7;
}
.bf-next-steps ol li { margin-bottom: 4px; }
.bf-next-steps strong { color: var(--text); font-weight: 600; }

.bf-dm-template {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.bf-dm-actions {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.bf-copy-btn {
  background: var(--accent);
  color: #052e0e;
  border: 1px solid var(--accent);
  font-weight: 600;
  font-size: 11.5px;
  padding: 5px 10px;
}
.bf-copy-btn:hover:not(:disabled) {
  background: #6ee78f;
  border-color: #6ee78f;
}
.bf-copy-status {
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}
.bf-copy-status.shown { color: var(--accent); font-style: normal; }

@media (max-width: 600px) {
  .bf-input-row { flex-direction: column; }
  .bf-input-row button { width: 100%; }
}

/* Waitlist pairs — surfaced matches among waitlist members */
.bf-wl-pairs { margin-top: 16px; }
.bf-wl-pairs.hidden { display: none; }
.bf-wl-pairs-head {
  margin: 0 0 10px; font-size: 14px; font-weight: 600;
  color: var(--text);
}
.bf-wl-pairs-head .bf-count {
  color: var(--muted); font-weight: 400; font-size: 12px;
}
.bf-wl-pair {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px; margin-bottom: 10px;
}
.bf-wl-pair:last-child { margin-bottom: 0; }
.bf-wl-pair-players {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 600px) {
  .bf-wl-pair-players { grid-template-columns: 1fr; }
}
.bf-wl-pair-hint {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted); line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════════
 *  STAGING: Unified Irish Toolkit (prototype)
 *  Reuses existing vars + the .lock-pill / .btn-primary patterns.
 * ═══════════════════════════════════════════════════════════════════ */
.stg { max-width: 1400px; margin: 0 auto; }
.stg-head { margin-bottom: 12px; }
.stg-head h2 {
  margin: 0; font-size: 20px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.stg-head p { margin: 6px 0 0; color: var(--muted); font-size: 13px; max-width: 60ch; }
.stg-head .lock-pill {
  background: rgba(251, 191, 36, 0.12); color: var(--warn);
  border: 1px solid rgba(251, 191, 36, 0.3);
  padding: 1px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}

/* Only the tools pin to the top — the username bar scrolls away with the
 *  page (it sits outside this block). Its containing block is the tall .stg,
 *  so it stays stuck through the whole results list. */
.stg-sticky {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  margin-bottom: 18px;
  padding-top: 10px;
  border-bottom: 1px solid var(--border);
}
/* Landing state: tools are gated, so this wrapper is empty — drop its chrome
 *  so no stray divider/strip shows under the username bar. */
.stg-sticky:not(:has(.stg-nav:not(.hidden))) {
  border-bottom: none; background: none; padding-top: 0; margin-bottom: 0;
}
/* Divider under the username bar (was previously the sticky block's border). */
.stg-idbar { padding: 10px 0 12px; border-bottom: 1px solid var(--border); }
.stg-idbar-row { display: flex; gap: 8px; }
.stg-idbar-row input { flex: 1; min-width: 0; padding: 9px 12px; font-size: 14px; }
.stg-idbar-row button { padding: 9px 18px; font-size: 13px; white-space: nowrap; }
.stg-idbar-hint { color: var(--muted); font-size: 12px; margin-top: 8px; line-height: 1.5; }
.stg-idbar-hint strong { color: var(--text); }

.stg-nav {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 4px 0 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.stg-nav::-webkit-scrollbar { display: none; }
.stg-tab {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--muted); font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.stg-tab:hover { background: var(--panel-2); color: var(--text); }
.stg-tab.active {
  background: var(--accent-dim); border-color: var(--accent); color: var(--accent);
  font-weight: 600;
}

/* Hosted tool views render inside the mount (override .view{display:none}). */
.stg-mount > .view { display: block; }
/* Tool chrome the shell hides; staging.js toggles this. */
.stg-hide { display: none !important; }

@media (max-width: 720px) {
  .stg-head h2 { font-size: 18px; }
  .stg-tab span { font-size: 12.5px; }
}

/* Gated regions, hidden until a username is entered */
.stg-nav.hidden, .stg-mount.hidden, .stg-empty.hidden, .stg-recent.hidden, .stg-tools-head.hidden, .stg-tool-info.hidden { display: none; }

/* Section label above the tool pills */
.stg-tools-head { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin: 2px 0 8px; }

/* Per-tool explainer box (shown for the active tool, replaces its own header) */
.stg-tool-info {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; margin: 0 0 16px;
}
.stg-tool-info .stg-ti-icon { font-size: 22px; line-height: 1.15; flex: none; }
.stg-tool-info .stg-ti-body h3 { margin: 0 0 3px; font-size: 15px; font-weight: 650; color: var(--text); }
.stg-tool-info .stg-ti-body p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Empty / waiting state */
.stg-empty { padding: 0 0 40px; }

/* Landing preview of the tools (shown before a username is entered) */
/* Home landing reuses the .home/.tool-cards/.tool-card look from gov/community.
   Reset <button> defaults so the preview cards match the <a> cards exactly. */
.stg-preview button.tool-card {
  width: 100%; font: inherit; text-align: left; cursor: pointer;
}

/* Recent-username quick-pick chips */
.stg-recent { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.stg-recent-label { color: var(--muted); font-size: 12px; }
.stg-recent-chip {
  display: inline-flex; align-items: center;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden;
}
.stg-recent-pick {
  background: none; border: none; border-radius: 0;
  color: var(--text); font-size: 12px; padding: 4px 4px 4px 11px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.stg-recent-pick:hover { background: var(--panel-2); color: var(--accent); }
.stg-recent-del {
  background: none; border: none; border-radius: 0;
  color: var(--muted); font-size: 14px; line-height: 1;
  padding: 4px 9px 4px 5px; cursor: pointer;
}
.stg-recent-del:hover { color: var(--danger); background: var(--panel-2); }

/* Wrapper lets us paint an edge fade over the scrolling pills. */
.stg-nav-wrap { position: relative; }
.stg-nav-wrap::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 12px;
  width: 36px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bg));
  opacity: 1; transition: opacity 0.2s;
}
.stg-nav-wrap.at-end::after { opacity: 0; }

.stg-nav {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 4px 0 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.stg-nav::-webkit-scrollbar { display: none; }
.stg-tab { scroll-snap-align: start; }

/* Mobile: show every tool at once as a 2-col grid instead of a horizontal
   scroll, so nothing's hidden off-screen and there's no back-and-forth.
   Placed after both .stg-nav rules so it wins on small screens. */
@media (max-width: 680px) {
  .stg-nav {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    overflow-x: visible; scroll-snap-type: none;
    padding: 2px 0 10px;
  }
  .stg-tab {
    flex: unset; justify-content: center; gap: 5px;
    padding: 8px 6px; font-size: 12px; scroll-snap-align: none;
  }
  .stg-nav-wrap::after { display: none; }   /* no horizontal overflow to fade now */
}

/* Community tab category headings */
.community-cat {
  margin: 28px 0 12px;
  font-size: 13px; font-weight: 600;
  color: var(--text);
  text-transform: uppercase; letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.community-cat:first-of-type { margin-top: 20px; }

/* Partner guide (#partner-guide) — plain prose page, reuses .home/.lede/
   .community-note/.community-cat from the rest of the site. */
[data-view="partner-guide"] .home p,
[data-view="partner-guide"] .home ul,
[data-view="partner-guide"] .home ol {
  color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 14px;
}
[data-view="partner-guide"] .home ul,
[data-view="partner-guide"] .home ol { padding-left: 22px; }
[data-view="partner-guide"] .home li { margin: 4px 0; }
[data-view="partner-guide"] .home li ul { margin: 8px 0 0; }
[data-view="partner-guide"] .home strong { color: var(--text); }
[data-view="partner-guide"] .home h4 { font-size: 13.5px; margin: 16px 0 8px; }
[data-view="partner-guide"] .home a { color: var(--accent); }
.taxguide-report {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; font-size: 12.5px; line-height: 1.6; color: var(--text);
  white-space: pre-wrap; margin: 8px 0 0;
}


/* ═══════════════════════════════════════════════════════════════════
 *  BEER — Bunker Monitor (encrypted tool)
 *  Every selector scoped under #beer-content so the bunker's bespoke
 *  classes (.rcard, .pill, .hist, .tl, …) never collide with the rest
 *  of the portal. The bunker's own :root is dropped; its variable names
 *  are remapped here onto the umbrella tokens (structural greys) while
 *  keeping the Irish green/orange + the data-viz accents it relies on.
 *  Page chrome from the standalone (header/footer/.wrap) is gone — the
 *  umbrella .tool-header supplies the title, and the payload injects its
 *  body straight into #beer-content.
 * ═══════════════════════════════════════════════════════════════════ */
#beer-content {
  --bg: #0b0d10;
  --bg2: #14181d;
  --card: #14181d;
  --card2: #1a1f25;
  --line: #262d36;
  --line2: #374253;
  --txt: #e6e9ee;
  --muted: #8b94a3;
  --faint: #6b7785;
  --green: #009A49;
  --green2: #4ade80;
  --orange: #FF7900;
  --orange2: #fb923c;
  --accent: #4ade80;
  --warn: #fbbf24;
  --danger: #f87171;
  --blue: #60a5fa;
  --teal: #2dd4bf;
  --pink: #f472b6;
  --purple: #a78bfa;
  --indigo: #818cf8;
  --crimson: #dc2626;
  --gray: #9ca3af;
  --radius: 12px;
}

#beer-content a { color: var(--green2); text-decoration: none; }

/* Controls bar. The standalone pinned this sticky to the viewport top;
 * inside the portal that would slide under the page header, so it's a
 * plain block here. */
#beer-content .controls {
  background: var(--bg);
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
#beer-content .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#beer-content .search {
  flex: 1 1 260px; min-width: 220px; display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line2); border-radius: 10px; padding: 0 12px;
}
#beer-content .search input {
  flex: 1; background: none; border: 0; color: var(--txt); font-size: 15px; padding: 11px 0; outline: none;
  min-width: 0;
}
#beer-content .search .mag { color: var(--faint); }
#beer-content select, #beer-content .chip {
  background: var(--card); border: 1px solid var(--line2); color: var(--txt);
  border-radius: 10px; padding: 10px 12px; font-size: 14px; cursor: pointer;
}
#beer-content .country-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#beer-content .cc-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--card2);
  border: 1px solid var(--line2); border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 13px;
}
#beer-content .cc-chip button {
  background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px;
}
#beer-content .cc-chip button:hover { color: var(--danger); }
#beer-content .toggles { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
#beer-content .chip { display: inline-flex; align-items: center; gap: 7px; user-select: none; font-size: 13px; }
#beer-content .chip input { accent-color: var(--green2); width: 15px; height: 15px; margin: 0; }
#beer-content .chip.seg { padding: 0; overflow: hidden; }
#beer-content .chip.seg button {
  background: none; border: 0; color: var(--muted); padding: 8px 12px; cursor: pointer; font-size: 13px;
}
#beer-content .chip.seg button.on { background: var(--green); color: #fff; }

#beer-content .panel-title {
  display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: 13px;
  text-transform: uppercase; letter-spacing: .6px; color: var(--faint); font-weight: 600;
}
#beer-content .panel-title .count { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }

#beer-content .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
#beer-content .rcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; cursor: pointer; transition: border-color .12s, transform .12s;
}
#beer-content .rcard:hover { border-color: var(--line2); transform: translateY(-1px); }
#beer-content .rcard .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
#beer-content .rname { font-weight: 600; font-size: 15px; }
#beer-content .rcode { color: var(--faint); font-size: 12px; margin-top: 1px; font-family: ui-monospace, monospace; }
#beer-content .rgame { color: var(--faint); font-size: 16px; padding: 2px 4px; flex: 0 0 auto; line-height: 1; }
#beer-content .rgame:hover { color: var(--green2); }
#beer-content .ctry { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--muted); }
#beer-content .ctry .arrow { color: var(--faint); }
#beer-content .occ-pill {
  font-size: 11px; color: var(--orange2); border: 1px solid var(--orange);
  border-radius: 6px; padding: 1px 6px; margin-left: 2px;
}
#beer-content .status-line { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
#beer-content .pill {
  font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line2);
  color: var(--muted); white-space: nowrap;
}
#beer-content .pill.on { color: var(--green2); border-color: #1f5132; background: #0f2419; }
#beer-content .pill.off { color: var(--gray); border-color: #3a3f47; }
#beer-content .pill.dis { color: var(--warn); border-color: #5a4a14; background: #241f0c; }
#beer-content .pill.pend { color: var(--indigo); border-color: #3a3f6b; background: #161a2e; }
#beer-content .pill.none { color: var(--faint); }

#beer-content .res { margin-top: 11px; }
#beer-content .res-bar { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
#beer-content .res-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--crimson)); }
#beer-content .res-bar.owned > i { background: linear-gradient(90deg, #2f6b46, var(--green2)); }
#beer-content .res-meta { display: flex; justify-content: space-between; color: var(--faint); font-size: 11px; margin-top: 4px; }
#beer-content .evcount { color: var(--faint); font-size: 12px; margin-top: 10px; }

#beer-content .empty {
  color: var(--muted); text-align: center; padding: 40px 16px;
  border: 1px dashed var(--line2); border-radius: var(--radius);
}
#beer-content .empty .big { font-size: 30px; margin-bottom: 8px; }

#beer-content .upcoming .ucard {
  background: var(--card2); border: 1px solid var(--line2); border-radius: 10px;
  padding: 11px 13px; display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer;
}
#beer-content .upcoming .ucard:hover { border-color: var(--indigo); }
#beer-content .ucard .when { text-align: right; white-space: nowrap; }
#beer-content .ucard .when .abs { font-size: 12px; color: var(--muted); }
#beer-content .ucard .when .rel { font-size: 13px; color: var(--indigo); font-weight: 600; }

#beer-content .ov {
  position: fixed; inset: 0; background: rgba(4,7,11,.72); z-index: 50; display: none;
  align-items: flex-start; justify-content: center; padding: 24px 14px; overflow: auto;
}
#beer-content .ov.show { display: flex; }
#beer-content .modal {
  background: var(--bg2); border: 1px solid var(--line2); border-radius: 16px;
  width: 100%; max-width: 760px; padding: 0; overflow: hidden;
}
#beer-content .modal .mhead { padding: 18px 20px; border-bottom: 1px solid var(--line); position: relative; }
#beer-content .modal .mhead .close {
  position: absolute; top: 14px; right: 14px; background: var(--card); border: 1px solid var(--line2);
  color: var(--muted); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 16px; line-height: 1;
}
#beer-content .modal h2 { margin: 0; font-size: 19px; }
#beer-content .mbody { padding: 18px 20px; }
#beer-content .mc-code { color: var(--faint); font-family: ui-monospace, monospace; font-size: 12px; margin-top: 2px; }
#beer-content .mc-ctry { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }
#beer-content .mgame { display: inline-block; margin-top: 10px; font-size: 13px; }
#beer-content .next-act { margin-top: 14px; background: #13182b; border: 1px solid #2c335c; border-radius: 10px; padding: 12px 14px; }
#beer-content .next-act .lbl { color: var(--indigo); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
#beer-content .next-act .v { font-size: 16px; margin-top: 3px; }
#beer-content .next-act .rel { color: var(--muted); font-size: 13px; margin-top: 2px; }

#beer-content .sec { margin-top: 22px; }
#beer-content .sec h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); margin: 0 0 10px; }
#beer-content .hist { display: flex; align-items: flex-end; gap: 2px; height: 84px; padding-top: 6px; }
#beer-content .hist .b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; min-width: 0; }
#beer-content .hist .b .seg { width: 100%; border-radius: 1px; }
#beer-content .hist .b .on { background: var(--green2); }
#beer-content .hist .b .off { background: var(--danger); }
#beer-content .hist .b .other { background: var(--blue); }
#beer-content .hist-ax { display: flex; gap: 2px; margin-top: 4px; }
#beer-content .hist-ax span { flex: 1; text-align: center; color: var(--faint); font-size: 9px; min-width: 0; }
#beer-content .hist-leg { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
#beer-content .hist-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; }

#beer-content .tl { display: flex; flex-direction: column; }
#beer-content .tl .ev { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
#beer-content .tl .ev:first-child { border-top: 0; }
#beer-content .tl .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; }
#beer-content .tl .ebody { flex: 1; min-width: 0; }
#beer-content .tl .etop { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
#beer-content .tl .etype { font-weight: 600; font-size: 14px; }
#beer-content .tl .etime { color: var(--faint); font-size: 12px; white-space: nowrap; }
#beer-content .tl .edesc { color: var(--muted); font-size: 13px; margin-top: 2px; }
#beer-content .tl .ectry { color: var(--faint); font-size: 12px; margin-top: 3px; }

#beer-content .loading { text-align: center; color: var(--muted); padding: 50px; }
#beer-content .hidden { display: none !important; }

/* Last-updated note rendered into the tool-header controls slot. */
#beer-controls .beer-updated { color: var(--muted); font-size: 12px; }

/* Push the BEER tab to the far right of the nav. */
#tabs { display: flex; }
#tabs .tab[data-tab="beer"] { margin-left: auto; }
/* Push the BEER tab right, but only where there's room for one row. */
@media (max-width: 720px) {
  #tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #tabs::-webkit-scrollbar { display: none; }
  #tabs .tab { flex: 0 0 auto; white-space: nowrap; }
}

/* ═══════════════════════════════════════════════════════════════════
 *  WEALTH MONITOR (#wealth) — see js/wealth.js
 * ═══════════════════════════════════════════════════════════════════ */

/* The result cards start hidden and are revealed on lookup. There is no
   global .hidden utility (each component scopes its own), so scope one
   here for the wealth-monitor cards. */
#wm-stats-card.hidden, #wm-chart-card.hidden { display: none; }

/* Resolved-player summary header (lives in its own stats box) */
.wm-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wm-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--muted); overflow: hidden;
}
.wm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wm-name { font-size: 16px; font-weight: 650; color: var(--text); }
.wm-name a { color: inherit; text-decoration: none; }
.wm-name a:hover { color: var(--link); }
.wm-total { margin-left: auto; font-size: 18px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; text-align: right; }
.wm-total small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }

.wm-bd { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wm-bd span b { color: var(--text); font-weight: 600; }
.wm-bd .wm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* Chart controls */
.wm-controls { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-bottom: 14px; }
.wm-control { display: flex; align-items: center; gap: 8px; }
.wm-control > label { font-size: 12px; color: var(--muted); }
.wm-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.wm-seg button {
  border: none; border-radius: 0; padding: 6px 12px; font-size: 12.5px;
  background: var(--bg); color: var(--muted); border-left: 1px solid var(--border);
  font-family: inherit; cursor: pointer;
}
.wm-seg button:first-child { border-left: none; }
.wm-seg button.active { background: var(--accent-dim); color: var(--text); }
.wm-seg button:disabled { opacity: .4; cursor: default; }

/* Chart */
.wm-chart-box { position: relative; }
.wm-chart { width: 100%; height: auto; display: block; user-select: none; touch-action: none; }
.wm-grid-line { stroke: var(--border); stroke-width: 1; }
.wm-axis-text { fill: var(--muted); font-size: 10px; font-family: inherit; }
.wm-series-line { fill: none; stroke-width: 2; }
.wm-series-dot { stroke: var(--panel); stroke-width: 1.5; }
.wm-hover-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.wm-tooltip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; font-size: 11.5px; color: var(--text);
  box-shadow: 0 4px 16px rgba(0,0,0,.4); min-width: 130px; opacity: 0; transition: opacity .1s;
}
.wm-tooltip .wm-tt-date { color: var(--muted); margin-bottom: 5px; font-size: 11px; }
.wm-tooltip .wm-tt-row { display: flex; align-items: center; gap: 6px; line-height: 1.7; white-space: nowrap; }
.wm-tooltip .wm-tt-row .wm-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.wm-tooltip .wm-tt-row .wm-tt-val { margin-left: auto; font-weight: 600; padding-left: 10px; }

.wm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
.wm-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.wm-legend-item .wm-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.wm-legend-item.wm-toggle { cursor: pointer; user-select: none; }
.wm-legend-item.wm-toggle:hover { color: var(--text); }
.wm-legend-item.off { opacity: .4; text-decoration: line-through; }
.wm-legend-hint { font-size: 11px; color: var(--muted); opacity: .65; font-style: italic; }

.wm-chart-box .wm-chart-empty { color: var(--muted); font-size: 13px; padding: 28px 4px; text-align: center; }
#wm-chart-card h4 { margin: 0 0 14px; font-size: 13.5px; font-weight: 600; color: var(--text); }

/* Breakdown: small multiples (one mini-chart per category, own scale) */
.wm-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.wm-mini { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px 4px; cursor: pointer; transition: border-color .15s; }
.wm-mini:hover { border-color: var(--link); }
.wm-mini.expanded { grid-column: 1 / -1; cursor: default; }
.wm-mini.expanded:hover { border-color: var(--border); }
.wm-mini-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.wm-mini-head .wm-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.wm-mini-val { margin-left: auto; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.wm-mini-expand { display: inline-flex; color: var(--muted); opacity: .6; }
.wm-mini:hover .wm-mini-expand { opacity: 1; color: var(--link); }
.wm-mini-chart { width: 100%; height: auto; display: block; touch-action: none; }
/* ═══════════════════════════════════════════════════════════════════
 *  DAILY PROFIT (dp-) — merged from daily-profit.html
 * ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
 *  DAILY PROFIT — tool-specific styles (dp- prefix). Drop-in
 *  <section class="view" data-view="profit"> for index.html on merge.
 * ═══════════════════════════════════════════════════════════════════ */
#dp-stats-card.hidden, #dp-table-card.hidden { display: none; }

.dp-assump { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-start; }
.dp-field { display: flex; flex-direction: column; gap: 4px; }
.dp-field label { font-size: 11px; color: var(--muted); white-space: nowrap; }
.dp-field input {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 9px; font-size: 13px; font-family: inherit;
  font-variant-numeric: tabular-nums; width: 140px;
}
.dp-field .dp-suffix { font-size: 11px; color: var(--muted); }
.dp-select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; font-size: 13px; font-family: inherit; }

/* Income summary cards */
.dp-income { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.dp-inc { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 11px 13px; }
.dp-inc .dp-inc-label { font-size: 12px; color: var(--muted); }
.dp-inc .dp-inc-val { font-size: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 2px; }
.dp-inc .dp-inc-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.dp-inc.total { border-color: rgba(74,222,128,.35); }
.dp-inc.total .dp-inc-val { color: var(--accent); }
.dp-inc-chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.dp-inc-chk input { accent-color: var(--accent); cursor: pointer; margin: 0; flex: none; }
.dp-inc-off { opacity: .55; }
.dp-inc-off .dp-inc-val { color: var(--muted); }
.dp-cases-in, .dp-moves-in {
  width: 64px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 2px 6px; font-size: 12px; font-family: inherit;
  font-variant-numeric: tabular-nums; margin-right: 2px;
}
.dp-inc-deduct .dp-inc-val { color: var(--danger); }

/* Throughput trio (Engine / Staff / Total): equal widths, no spinners, and a
   clean read-only "result" look for the disabled total so they harmonise. */
#dp-engines, #dp-staff, #dp-tp-total { width: 150px; }
#dp-tp-total {
  color: var(--accent); -webkit-text-fill-color: var(--accent);
  font-weight: 600; opacity: 1; cursor: default; background: var(--panel-2);
}
.dp-field input[type=number]::-webkit-outer-spin-button,
.dp-field input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dp-field input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* "How to use" intro: a collapsible details (reuses details.howto), sitting at
   the very top so it needs no top margin; Adro credit line at the foot. */
.dp-howto { margin-top: 0; margin-bottom: 16px; }
.dp-howto strong { color: var(--text); }
.dp-howto .dp-credit { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; }
.dp-howto .dp-credit strong { color: var(--accent); }

/* Per-product table */
.dp-table-wrap { overflow-x: auto; }
table.dp-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.dp-table th, table.dp-table td { padding: 7px 10px; text-align: right; white-space: nowrap; }
table.dp-table th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--border); }
table.dp-table td.dp-l, table.dp-table th.dp-l { text-align: left; }
table.dp-table tbody tr { border-bottom: 1px solid var(--border); }
table.dp-table tbody tr:hover { background: var(--panel-2); }
table.dp-table tbody tr.dp-owned { background: rgba(74,222,128,.06); }
table.dp-table tbody tr.dp-owned:hover { background: rgba(74,222,128,.1); }
.dp-prod { display: inline-flex; align-items: center; gap: 7px; }
.dp-prod .icon-box { width: 22px; height: 22px; }
.dp-cat { font-size: 11px; color: var(--muted); }
.dp-pill { display: inline-block; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.dp-pill.product { border-color: rgba(96,165,250,.4); color: var(--link); }
.dp-netpp { font-weight: 700; color: var(--text); }
.dp-netpp.neg { color: var(--danger); }
.dp-bonus { color: var(--accent); }
.dp-tax { color: var(--muted); font-weight: 400; }
.dp-dep { color: var(--warn); white-space: nowrap; font-size: 12px; }
.dp-muted { color: var(--muted); }
.dp-actual { color: var(--accent); font-weight: 600; }
.dp-na { color: var(--muted); opacity: .6; }
.dp-note { font-size: 12px; color: var(--muted); margin: 12px 0 0; line-height: 1.5; }
.dp-note code { background: var(--panel-2); padding: 1px 5px; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 11px; }

/* Daily Profit — employee profitability panel */
.dp-emp-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dp-emp {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 13px;
}
.dp-emp-bad { border-color: rgba(248,113,113,.45); background: rgba(248,113,113,.07); }
.dp-emp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dp-emp-name { font-weight: 600; color: var(--text); }
.dp-emp-co { font-size: 11.5px; color: var(--muted); }
.dp-emp-be { font-size: 11px; color: var(--muted); margin-top: 1px; }
.dp-emp-be strong { color: var(--text); font-variant-numeric: tabular-nums; }
.dp-emp-fld { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.dp-fid-in, .dp-wage-in {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 3px 6px; font-size: 13px; font-family: inherit; font-variant-numeric: tabular-nums;
}
.dp-fid-in { width: 52px; }
.dp-wage-in { width: 74px; }
.dp-emp-adj { font-size: 11px; color: var(--muted); white-space: nowrap; min-width: 70px; text-align: right; }
.dp-emp-adj strong { color: var(--text); font-variant-numeric: tabular-nums; }
.dp-emp-net { min-width: 92px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.dp-emp-gain { color: var(--accent); }
.dp-emp-loss { color: var(--danger); }
.dp-emp-badcount { color: var(--danger); }
@media (max-width: 560px) {
  .dp-emp { flex-wrap: wrap; gap: 8px 12px; }
  .dp-emp-main { flex: 1 1 100%; }
}

/* Daily Profit — companies table totals row */
table.dp-table tr.dp-comp-total td { border-top: 2px solid var(--border); font-weight: 600; }

/* Daily Profit — buddy chip in the employee panel */
.dp-emp-buddy { font-size: 10.5px; color: var(--accent); border: 1px solid rgba(74,222,128,.4); border-radius: 999px; padding: 0 6px; margin-left: 6px; white-space: nowrap; }

/* Daily Profit (dev) — sortable headers + profitable-worker indicator */
table.dp-table th.dp-sortable { cursor: pointer; user-select: none; }
table.dp-table th.dp-sortable:hover { color: var(--text); }
table.dp-table th.dp-sortable .dp-sort-arrow { margin-left: 3px; opacity: .7; }
.dp-lowwage-good { color: var(--accent); font-weight: 600; }
.dp-lowwage-warn { color: var(--warn); font-weight: 600; }
.dp-lowwage-bad { color: var(--danger); font-weight: 600; }
.dp-profit-yes { color: var(--accent); }
.dp-profit-warn { color: var(--warn); }
.dp-profit-no { color: var(--danger); }

/* ═══════════════════════════════════════════════════════════════════
 *  MY DASHBOARD (#dashboard) — single-column detailed cards
 *  Styled after the warera-toie personal dashboard.
 * ═══════════════════════════════════════════════════════════════════ */
.dash { max-width: 620px; margin: 0 auto; padding: 10px 0 40px; }
.dash .tool-header { margin-bottom: 22px; }
.dash-idbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
/* Recent chips sit between the input and the cards — give them clear space below. */
#dash-recent { margin: 0 0 20px; }
.dash-idbar input[type="text"] { flex: 1 1 240px; min-width: 200px; }

.dash-loading, .dash-skel { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.dash-loading { padding: 40px 0; justify-content: center; }
.dash-spinner {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  display: inline-block; animation: dash-spin .7s linear infinite;
}
@keyframes dash-spin { to { transform: rotate(360deg); } }

/* Single column of stacked cards. */
.dash-grid { display: flex; flex-direction: column; gap: 16px; }

.dash-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px 18px; }
.dash-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.dash-card-icon { font-size: 16px; line-height: 1; }
.dash-card-head h3 {
  margin: 0; flex: 0 0 auto;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.dash-card-note { flex: 1; font-size: 11.5px; color: var(--muted); }
.dash-open {
  font-size: 12px; color: var(--link); text-decoration: none; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; border: 1px solid transparent;
}
.dash-open:hover { border-color: var(--border); background: var(--panel-2); }

/* Lead figure + supporting line. */
/* Lead figure: present but not shouting — harmonised across every card. */
.dash-lead { font-size: 20px; font-weight: 600; line-height: 1.15; letter-spacing: -.2px; font-variant-numeric: tabular-nums; color: var(--text); }
.dash-lead small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.dash-sub { color: var(--muted); font-size: 12.5px; margin-top: 6px; line-height: 1.45; }
.dash-sub.small { font-size: 11.5px; margin-top: 3px; }
.dash-sub a, .dash-row-title a { color: var(--link); text-decoration: none; }
.dash-sub a:hover, .dash-row-title a:hover { text-decoration: underline; }
.dash-muted { color: var(--muted); }
.dash-pos { color: var(--accent); }
.dash-neg { color: var(--danger); }

.dash-statline { font-size: 13px; margin-bottom: 2px; }
.dash-statline strong { color: var(--text); }

/* Pills (status / membership). */
.dash-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.dash-pill.ok   { background: rgba(74,222,128,.15);  color: var(--accent); }
.dash-pill.warn { background: rgba(251,191,36,.15);  color: var(--warn); }
.dash-pill.loss { background: rgba(248,113,113,.14); color: var(--danger); }

/* Stat chips. */
.dash-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dash-chip {
  font-size: 11px; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 7px; padding: 2px 7px; white-space: nowrap;
}
.dash-chip i { color: var(--muted); font-style: normal; margin-right: 5px; }

/* Per-row lists (workers, companies). */
.dash-rows { margin-top: 10px; }
.dash-row { padding: 10px 0; border-top: 1px solid var(--border); }
.dash-rows .dash-row:first-child, .dash-more .dash-row:first-child { border-top: none; }
.dash-row-main { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.dash-row-title { font-size: 13.5px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.dash-row-title strong { font-weight: 600; }

/* Item icon box (reused for company tags & migration rows). */
.dash-ic { display: inline-flex; width: 20px; height: 20px; border-radius: 5px; overflow: hidden; align-items: center; justify-content: center; background: var(--panel-2); flex: 0 0 auto; font-size: 12px; }
.dash-ic img { width: 100%; height: 100%; object-fit: contain; }
.dash-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; padding: 1px 7px 1px 4px; }
.dash-tag .dash-ic { width: 16px; height: 16px; }

/* Migration verdict boxes. */
.dash-verdict { font-size: 12px; font-weight: 600; white-space: nowrap; text-align: right; }
.dash-verdict.ok   { color: var(--accent); }
.dash-verdict.move { color: var(--warn); }
.dash-verdict.move b { margin-left: 6px; color: var(--text); }

/* Daily-profit income rows. */
.dash-inc-list { margin-top: 12px; }
.dash-inc { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--border); }
.dash-inc:first-child { border-top: none; }
.dash-inc-l { font-size: 13px; }
.dash-inc-v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-inc-s { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }

/* CTA buttons (join buddy / join MU). */
.dash-cta { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(74,222,128,.4); }
.dash-cta:hover { background: var(--accent-dim); }

/* "Show more" disclosure. */
.dash-more { margin-top: 6px; }
.dash-more > summary { cursor: pointer; font-size: 12px; color: var(--link); padding: 6px 0; list-style: none; }
.dash-more > summary::-webkit-details-marker { display: none; }
.dash-more > summary::before { content: '▸ '; }
.dash-more[open] > summary::before { content: '▾ '; }

/* Wealth area chart. */
.dash-chart-wrap { position: relative; margin-top: 12px; }
.dash-chart { width: 100%; height: 130px; display: block; }
.dash-chart-hl { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.dash-chart-tip { position: absolute; top: -2px; transform: translateX(-50%); font-size: 11px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; pointer-events: none; opacity: 0; transition: opacity .12s; white-space: nowrap; }
.dash-chart-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 2px; }

.dash-err { color: var(--danger); font-size: 12.5px; line-height: 1.45; }

/* Dashboard — wealth metric/bucket tabs (segmented controls). */
.dash-seg-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.dash-seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.dash-seg-btn { background: none; border: none; color: var(--muted); font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.dash-seg-btn:not(.active):hover { color: var(--text); background: var(--panel); }
.dash-seg-btn.active { background: #16a34a; color: #fff; }
.dash-seg-btn.active:hover { background: #138a3e; color: #fff; }
.dash-seg.wrap { flex-wrap: wrap; }

/* Dashboard — wealth breakdown small-multiples. */
.dash-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.dash-mini { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px 4px; }
.dash-mini-head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.dash-mini-val { margin-left: auto; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-mini .dash-chart { height: 64px; }
.dash-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dash-chart-note { color: var(--muted); font-size: 12px; padding: 16px 4px; }

/* Dashboard — buddy "why join" pitch. */
.dash-why { margin-top: 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; }
.dash-why > strong { font-size: 12.5px; color: var(--text); }
.dash-why ul { margin: 8px 0 0; padding-left: 2px; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.dash-why li { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.dash-why li strong { color: var(--text); }
.dash-why-foot { margin: 9px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* Dashboard — wealth trend headline row (value · delta · metric name). */
.dash-wlead-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; margin: 12px 0 2px; }
.dash-wdelta { font-size: 13px; font-weight: 600; }
.dash-wmetric { font-size: 13px; font-weight: 600; }
.dash-chart-hint { color: var(--muted); }

/* Dashboard — migration "move suggested" warning banner. */
.dash-warn { display: flex; align-items: flex-start; gap: 8px; background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.30); border-radius: 9px; padding: 9px 11px; font-size: 12.5px; color: var(--text); line-height: 1.45; margin-bottom: 8px; }
.dash-warn .dash-pill { flex: 0 0 auto; }
.dash-warn strong { color: var(--warn); }

/* ═══════════════════════════════════════════════════════════════════
 *  ROSTER (#roster) — unlisted Irish citizens list
 *  All colours via theme variables so light/dark mode just works.
 * ═══════════════════════════════════════════════════════════════════ */

.rs-loading { color: var(--muted); font-size: 13px; padding: 24px 0; text-align: center; }
.rs-loading .rs-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; margin-right: 8px; vertical-align: middle;
  animation: rs-spin .7s linear infinite;
}
@keyframes rs-spin { to { transform: rotate(360deg); } }

.rs-summary {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding: 12px 16px; margin-bottom: 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; color: var(--muted);
}
.rs-summary strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.rs-table-wrap { overflow-x: auto; }
table.rs-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.rs-table th, .rs-table td {
  padding: 8px 10px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.rs-table th {
  color: var(--muted); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .03em;
  background: var(--panel);
}
.rs-table tbody tr:hover { background: var(--panel-2); }
.rs-table .rs-name { font-weight: 600; }
.rs-table .rs-name a { color: var(--text); text-decoration: none; }
.rs-table .rs-name a:hover { color: var(--link); }

.rs-build {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em;
}
.rs-build.combat  { background: rgba(248,113,113,.14); color: var(--danger); }
.rs-build.economy { background: rgba(74,222,128,.14); color: var(--accent); }
.rs-build.mixed   { background: rgba(251,191,36,.14); color: var(--warn); }
.rs-build.unknown { background: var(--panel-2); color: var(--muted); }

.rs-pill {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px;
}
.rs-pill.active   { background: rgba(74,222,128,.14); color: var(--accent); }
.rs-pill.inactive { color: var(--muted); }

.rs-bar {
  display: inline-block; width: 70px; height: 7px;
  background: var(--panel-2); border-radius: 4px; overflow: hidden;
  vertical-align: middle; margin-right: 6px;
}
.rs-bar > i { display: block; height: 100%; background: var(--accent); }
.rs-bar.low > i { background: var(--warn); }
.rs-bar.crit > i { background: var(--danger); }
.rs-bar-val { font-size: 11.5px; color: var(--muted); }

.rs-mu { font-size: 12px; }
.rs-mu a { color: var(--link); text-decoration: none; }
.rs-mu a:hover { text-decoration: underline; }
.rs-mu .rs-none { color: var(--muted); font-style: italic; }

.rs-online { color: var(--muted); font-size: 12px; }
.rs-online.fresh { color: var(--accent); }
.rs-online.stale { color: var(--warn); }
.rs-online.dead  { color: var(--danger); }

.rs-empty {
  padding: 30px 16px; text-align: center;
  color: var(--muted); font-size: 13px;
  background: var(--panel-2); border: 1px dashed var(--border); border-radius: 8px;
}

@media (max-width: 720px) {
  .rs-table th, .rs-table td { padding: 7px 8px; font-size: 12px; }
  .rs-bar { width: 50px; }
}

/* Roster — filter bar, sortable headers, buff/debuff chips
   (added for the build/pill/filter update). */
.rs-controls {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  align-items: flex-end; margin-bottom: 14px;
}
.rs-filter {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600;
}
.rs-filter select {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 7px 10px; font-size: 13px; font-family: inherit;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.rs-filter select:focus { outline: none; border-color: #3a4350; }
.rs-clear { align-self: flex-end; padding: 7px 12px; font-size: 12.5px; }

/* Sortable column headers (the global .rs-table th sets the base colour) */
.rs-table th.rs-th { cursor: pointer; user-select: none; }
.rs-table th.rs-th:hover { color: var(--text); }
.rs-table th.rs-th.active { color: var(--accent); }

/* Pill cell — buff (good, green) / debuff (bad, red). Same tint pattern
   as .rs-build so light/dark both work through the theme vars. */
.rs-eff {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
}
.rs-eff.rs-buff   { background: rgba(74,222,128,.14); color: var(--accent); }
.rs-eff.rs-debuff { background: rgba(248,113,113,.14); color: var(--danger); }
.rs-eff.rs-none   { background: none; color: var(--muted); padding: 0; }

/* Roster — small inline player avatar in the name cell. Sized for a
   dense table row, unlike the buddy finder's bigger card avatar. */
.rs-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--panel-2); color: var(--muted);
  font-size: 11px; font-weight: 600;
  margin-right: 7px; vertical-align: middle;
  overflow: hidden; flex: none;
}
.rs-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Roster — small inline MU avatar, next to the MU name. */
.rs-mu-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--panel-2); color: var(--muted);
  font-size: 10px; font-weight: 600;
  margin-right: 5px; vertical-align: middle;
  overflow: hidden; flex: none;
}
.rs-mu-avatar:not(span) { object-fit: cover; } /* only applies to the <img> case */

/* Roster — "Battle Intel Ireland" brand banner above the dynamic
   per-country <h2>. Smaller and accent-coloured so it reads as a
   fixed label, not competing with the real heading below it. */
.rs-brand {
  margin: 0 0 2px; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
}

/* Country picker — typeahead replacing the old username input. */
.rs-controls .controls,
.tool-header .controls { position: relative; }
.rs-country-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; z-index: 10;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.rs-country-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer; font-size: 13px;
}
.rs-country-opt:hover { background: var(--panel-2); }
.rs-country-flag { font-size: 15px; }

/* Irish Factory Tax (#tax) CSS moved into tax-payload.js — the tool is
 * now password-gated (see js/irish-tax.js), so its styling ships inside
 * the encrypted payload rather than here. */

/* ═══════════════════════════════════════════════════════════════════
 *  SKILL POINT ADVISOR (spa-)
 *  Pure client-side calculator — no trpc calls. Styled to match the
 *  dp-* assumption fields and tax-* result cards already in use.
 * ═══════════════════════════════════════════════════════════════════ */
.spa-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; margin-bottom: 16px;
}
.spa-card h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--text); }

.spa-stats-card { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.spa-stats-inputs { flex: 0 0 auto; }
.spa-current-alloc { flex: 1 1 0; min-width: 220px; padding-left: 24px; border-left: 1px solid var(--border); }
.spa-current-alloc.hidden { display: none; }
.spa-sp-remaining { font-size: 12px; color: var(--muted); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); line-height: 1.5; }
.spa-sp-remaining.hidden { display: none; }
.spa-remain-count { font-weight: 600; color: var(--text); }

.spa-assump { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-start; }
.spa-field { display: flex; flex-direction: column; gap: 4px; }
.spa-field label { font-size: 11px; color: var(--muted); white-space: nowrap; }
.spa-field input {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 7px 10px; font-size: 14px; font-family: inherit;
  font-variant-numeric: tabular-nums; width: 140px;
}
.spa-field input:focus { outline: none; border-color: #3a4350; }
.spa-field input[type=number]::-webkit-outer-spin-button,
.spa-field input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.spa-field input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.spa-suffix { font-size: 11px; color: var(--muted); margin-top: 2px; }

.spa-error {
  margin-top: 12px; padding: 10px 12px;
  background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.3);
  border-radius: 6px; color: var(--danger); font-size: 13px; line-height: 1.5;
}
.spa-error.hidden { display: none; }

/* Two result cards side by side on desktop, stacked on mobile.
   Flexbox rather than grid — equally correct for a simple even 2-column
   split, and verified to render correctly across more tooling. */
.spa-results {
  display: flex; gap: 14px;
  margin-bottom: 16px;
}
.spa-results > .spa-result-card { flex: 1 1 0; min-width: 0; }
.spa-result-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px;
}
.spa-result-card.spa-optimal { border-color: rgba(74,222,128,.35); }
.spa-result-card.spa-noresets { border-color: rgba(96,165,250,.35); }

.spa-result-label { font-size: 14px; font-weight: 600; color: var(--text); }
.spa-result-sub { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

.spa-build-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px;
  margin-top: 14px;
}
.spa-build-chip {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; min-width: 0;
}
.spa-build-chip .k {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  display: flex; align-items: center; gap: 4px;
  word-break: break-word; overflow-wrap: break-word; line-height: 1.3;
}
.spa-build-chip .v {
  font-size: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums;
}
.spa-build-chip .v small { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 4px; }

.spa-leftover { font-size: 11.5px; color: var(--muted); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

.spa-noresets-empty {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted); line-height: 1.5;
}
.spa-noresets-empty.hidden { display: none; }

/* Lookup status — shown briefly while auto-populating from a profile lookup.
   Same info/success/error pattern as .bf-inline-status, scoped under spa- so
   it doesn't collide if both happen to be visible on the same shell page. */
.spa-lookup-status {
  padding: 8px 12px; border-radius: 6px;
  font-size: 12px; line-height: 1.5; margin-top: 10px;
}
.spa-lookup-status.hidden { display: none; }
.spa-lookup-status.info {
  background: rgba(96, 165, 250, 0.08); border: 1px solid rgba(96, 165, 250, 0.25); color: var(--link);
}
.spa-lookup-status.success {
  background: rgba(74, 222, 128, 0.10); border: 1px solid rgba(74, 222, 128, 0.30); color: var(--accent);
}
.spa-lookup-status.error {
  background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.25); color: var(--danger);
}
.spa-lookup-status strong { color: inherit; font-weight: 600; }

/* Hide eco-only fields in war mode */
.spa-field-hidden { display: none; }

/* Build type toggle */
.spa-build-type-field { margin-top: 2px; }
.spa-build-toggle { display: flex; gap: 8px; margin-top: 2px; }
.spa-toggle-opt {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--text); cursor: pointer;
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border);
  transition: border-color .15s, background .15s;
}
.spa-toggle-opt:has(input:checked) {
  border-color: rgba(96,165,250,.6); background: rgba(96,165,250,.08);
}
.spa-toggle-opt input { margin: 0; cursor: pointer; }

/* War build card */
.spa-result-card.spa-war { border-color: rgba(251,146,60,.35); }
.spa-result-card.hidden { display: none; }
.spa-war-empty { font-size: 12px; color: var(--muted); margin-top: 10px; }
.spa-war-empty.hidden { display: none; }

@media (max-width: 720px) {
  .spa-results { flex-direction: column; }
  .spa-stats-card { flex-direction: column; gap: 16px; }
  .spa-current-alloc { padding-left: 0; border-left: none; border-top: 1px solid var(--border); padding-top: 16px; }
  .spa-assump { gap: 10px 16px; }
  .spa-field input { width: 80px; }
  .spa-build-row { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; }
  .spa-build-chip { padding: 6px 8px; }
  .spa-build-chip .k { font-size: 9.5px; }
  .spa-build-chip .v { font-size: 15px; }
  .spa-toggle-opt { font-size: 12px; padding: 4px 8px; }
  .spa-result-card { padding: 14px; }
}