/* Ritorneremo faction tools — dark, minimal. One page, one script: war.js. */

:root {
  --bg: #0a0c11;
  --surface: rgba(255, 255, 255, .028);
  --surface-2: rgba(255, 255, 255, .05);
  --line: rgba(255, 255, 255, .09);
  --line-soft: rgba(255, 255, 255, .06);

  --fg: #e9edf4;
  --fg-dim: #a7b0c0;
  --muted: #78829a;

  --accent: #5eead4;
  --accent-2: #38bdf8;
  --accent-ink: #04211c;

  --danger: #fca5a5;
  --danger-bg: rgba(248, 113, 113, .09);
  --danger-line: rgba(248, 113, 113, .28);

  --ok: #86efac;
  --ok-bg: rgba(134, 239, 172, .08);
  --ok-line: rgba(134, 239, 172, .26);

  /* Opaque ground for anything that floats over the page: a sticky header or
     a toast must not let the rows behind it show through. */
  --sticky: #12151d;

  --radius: 14px;
  --radius-lg: 20px;
  --wrap: 1020px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter,
          Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  background-image:
    radial-gradient(70vw 46vw at 50% -12%, rgba(56, 189, 248, .10), transparent 62%),
    radial-gradient(58vw 42vw at 88% 4%, rgba(94, 234, 212, .07), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.18;
  letter-spacing: -.02em;
  font-weight: 650;
}

p { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  padding: .12em .4em;
  border-radius: 5px;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: .88em;
  color: var(--fg-dim);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.skip:focus { left: 12px; z-index: 20; }

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(10, 12, 17, .78);
  backdrop-filter: blur(12px);
}

.topbar-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--fg);
  text-decoration: none;
}
.brand:hover { text-decoration: none; }

.brand-mark { display: block; }

.brand-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.02rem;
  letter-spacing: -.01em;
}

.brand-tag {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--muted);
}

.nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.nav a {
  padding: 7px 13px;
  border-radius: 9px;
  color: var(--fg-dim);
  font-size: .92rem;
  font-weight: 500;
}
.nav a:hover { background: var(--surface-2); color: var(--fg); text-decoration: none; }
.nav a.is-active { background: var(--surface-2); color: var(--fg); }

.signout {
  display: flex;
  align-items: center;
  gap: 12px;
}

.who {
  font-size: .88rem;
  color: var(--muted);
}

/* ---------- layout ---------- */

.wrap {
  flex: 1;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 40px 22px 72px;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.page-head h1 { font-size: clamp(1.6rem, 4vw, 2.05rem); }

.page-sub {
  margin-top: 7px;
  color: var(--muted);
  font-size: .93rem;
}

.section-title {
  margin: 30px 0 12px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- hero ---------- */

.hero {
  padding: 46px 0 54px;
  max-width: 660px;
}

.eyebrow {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero h1 {
  margin-top: 18px;
  font-size: clamp(2.1rem, 6.4vw, 3.4rem);
  letter-spacing: -.035em;
  background: linear-gradient(150deg, #ffffff 24%, var(--accent) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  margin-top: 20px;
  max-width: 52ch;
  font-size: 1.06rem;
  color: var(--fg-dim);
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.hero-note {
  margin-top: 22px;
  font-size: .87rem;
  color: var(--muted);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font: inherit;
  font-size: .95rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease, border-color .15s ease;
}
.btn:hover { filter: brightness(1.07); text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-quiet {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--fg);
}
.btn-quiet:hover { border-color: rgba(255, 255, 255, .22); filter: none; }

.btn-block { width: 100%; margin-top: 18px; }
.btn-sm { padding: 7px 13px; font-size: .87rem; border-radius: 9px; }

/* ---------- cards, panels ---------- */

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card, .panel, .stat, .note {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.card { padding: 22px; transition: border-color .15s ease, background .15s ease; }
.card:hover { border-color: rgba(255, 255, 255, .16); background: var(--surface-2); }
.card h3 { font-size: 1.02rem; }
.card p { margin-top: 9px; color: var(--muted); font-size: .93rem; }

.panel {
  margin-top: 34px;
  padding: 30px;
  border-radius: var(--radius-lg);
}
.panel h2 { font-size: 1.32rem; }
.panel-lede {
  margin-top: 10px;
  margin-bottom: 22px;
  max-width: 62ch;
  color: var(--fg-dim);
  font-size: .96rem;
}
.panel-foot {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: .85rem;
}

.note { padding: 20px; }
.note h3 {
  font-size: .95rem;
  color: var(--fg);
}
.note p {
  margin-top: 9px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.62;
}
.note-key {
  border-color: rgba(94, 234, 212, .3);
  background: rgba(94, 234, 212, .05);
}
.note-key h3 { color: var(--accent); }

.list {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: .93rem;
}
.list li { margin-bottom: 8px; }
.list strong { color: var(--fg-dim); font-weight: 600; }

/* ---------- stats ---------- */

.stat { padding: 20px 22px; }

.stat-label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat-value {
  margin-top: 10px;
  font-size: 1.9rem;
  font-weight: 650;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.stat-value.is-empty { color: var(--line); }

.stat-note {
  margin-top: 4px;
  font-size: .78rem;
  color: var(--muted);
}

.badge {
  align-self: center;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
}
.badge-idle { background: var(--surface-2); }

/* ---------- empty state ---------- */

.empty {
  padding: 34px 20px 30px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .16);
}
.empty-mark { opacity: .5; }
.empty h2 { margin-top: 14px; font-size: 1.1rem; }
.empty p {
  margin: 10px auto 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: .92rem;
}

/* ---------- auth ---------- */

.auth {
  display: flex;
  justify-content: center;
  padding: 36px 0 20px;
}

.auth-card {
  width: 100%;
  max-width: 430px;
  padding: 34px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.auth-card h1 { font-size: 1.55rem; }

.auth-sub {
  margin-top: 8px;
  margin-bottom: 24px;
  color: var(--muted);
  font-size: .93rem;
}
.auth-sub strong { color: var(--fg-dim); font-weight: 600; }

label {
  display: block;
  margin-bottom: 8px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

input[type="password"] {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(0, 0, 0, .3);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: .18em;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="password"]:focus {
  outline: none;
  border-color: rgba(94, 234, 212, .5);
  box-shadow: 0 0 0 3px rgba(94, 234, 212, .12);
}

.field-hint {
  margin-top: 8px;
  font-size: .8rem;
  color: var(--muted);
}

.warn {
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px solid rgba(94, 234, 212, .28);
  border-radius: var(--radius);
  background: rgba(94, 234, 212, .05);
}
.warn-title {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--accent);
  text-transform: uppercase;
}
.warn p + p { margin-top: 8px; }
.warn p:not(.warn-title) {
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.6;
}

.auth-foot {
  margin-top: 20px;
  text-align: center;
  font-size: .85rem;
}
.auth-foot a { color: var(--muted); }

/* ---------- alerts ---------- */

.alert {
  margin: 0 0 20px;
  padding: 12px 15px;
  border: 1px solid var(--danger-line);
  border-radius: 11px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: .9rem;
  line-height: 1.5;
}
.alert-ok {
  border-color: var(--ok-line);
  background: var(--ok-bg);
  color: var(--ok);
}

.hero .alert { max-width: 46ch; margin-top: 26px; }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, .2);
}

.footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .82rem;
}
.footer-inner a { color: var(--muted); }

/* ---------- responsive ---------- */

@media (max-width: 620px) {
  .topbar-inner { padding: 11px 16px; gap: 12px; }
  .nav { order: 3; width: 100%; margin-left: 0; }
  .nav a { flex: 1; text-align: center; }
  .signout { margin-left: auto; }
  .who { display: none; }
  .wrap { padding: 28px 16px 56px; }
  .hero { padding: 26px 0 34px; }
  .panel { padding: 22px 18px; }
  .auth-card { padding: 26px 20px; }
  .footer-inner { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================================================
   Application chrome added with the faction data tools
   ============================================================ */

.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mt { margin-top: 18px; }

.lede-sm {
  margin-bottom: 18px;
  max-width: 68ch;
  color: var(--muted);
  font-size: .9rem;
}

.who-rank {
  display: block;
  font-size: .72rem;
  color: var(--line);
}

/* freshness strip */

.freshness {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: rgba(255, 255, 255, .02);
}

.freshness-text { font-size: .84rem; color: var(--muted); }

.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-danger {
  background: transparent;
  border-color: var(--danger-line);
  color: var(--danger);
}
.btn-danger:hover { background: var(--danger-bg); filter: none; }

.locked {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}

/* stats variants */

.stat-flat { border: 0; background: transparent; padding: 6px 0; }
.stat-sub { font-size: 1rem; color: var(--muted); font-weight: 500; }
.stat-money { font-size: 1.5rem; }

/* key / value list */

.kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2px 24px;
  margin: 0;
}
.kv > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.kv dt { color: var(--muted); font-size: .88rem; }
.kv dd { margin: 0; font-size: .9rem; text-align: right; }

/* tables */

.table-scroll { overflow-x: auto; margin: 0 -4px; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .89rem;
}
.table th {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.table th.num, .table th.right { text-align: right; }
.table td {
  padding: 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.table tbody tr:hover { background: rgba(255, 255, 255, .022); }
.table .is-me { background: rgba(94, 234, 212, .05); }
.table .is-dim td { opacity: .55; }
.table td .muted { font-size: .82rem; margin-left: 5px; }

/* status dot */

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--muted);
  vertical-align: middle;
}
.dot-green { background: #4ade80; }
.dot-red { background: #f87171; }
.dot-blue { background: #60a5fa; }

/* pills, chips, badges */

.pill {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .74rem;
  color: var(--fg-dim);
  white-space: nowrap;
}
.pill-mugged { border-color: rgba(94, 234, 212, .35); color: var(--accent); }
.pill-hospitalized { border-color: rgba(248, 113, 113, .3); color: var(--danger); }
.pill-lost, .pill-stalemate { border-color: rgba(248, 113, 113, .3); color: var(--danger); }

.tier-chip {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid rgba(94, 234, 212, .3);
  border-radius: 999px;
  background: rgba(94, 234, 212, .07);
  color: var(--accent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.badge-live {
  border-color: rgba(94, 234, 212, .4);
  background: rgba(94, 234, 212, .1);
  color: var(--accent);
}

.claim-mine { color: var(--accent); font-weight: 600; }
.claim-other { color: var(--fg-dim); }

.countdown.is-out { color: var(--accent); }

/* chain picker */

.chain-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.chain-chip {
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .02);
  color: var(--fg);
  text-decoration: none;
}
.chain-chip:hover { border-color: rgba(255, 255, 255, .2); text-decoration: none; }
.chain-chip.is-active { border-color: rgba(94, 234, 212, .45); background: rgba(94, 234, 212, .07); }
.chain-hits { display: block; font-weight: 650; font-size: .95rem; }
.chain-meta { display: block; margin-top: 3px; font-size: .76rem; color: var(--muted); }

/* forms inside tables and panels */

.inline-form { display: inline-flex; gap: 6px; align-items: center; }

.stack { display: flex; flex-direction: column; gap: 8px; }
.stack .btn { margin-top: 4px; }

.field { display: flex; flex-direction: column; gap: 7px; }

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

input[type="text"], input[type="number"], select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, .3);
  color: var(--fg);
  font: inherit;
  font-size: .92rem;
}
input[type="text"]:focus, input[type="number"]:focus, select:focus {
  outline: none;
  border-color: rgba(94, 234, 212, .5);
  box-shadow: 0 0 0 3px rgba(94, 234, 212, .12);
}
select { appearance: none; padding-right: 30px; }

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: var(--fg-dim);
  font: inherit;
  font-size: .8rem;
  font-family: var(--mono);
  cursor: pointer;
}
.chip:hover { border-color: var(--danger-line); color: var(--danger); }
.chip-x { margin-left: 4px; }

/* compact legal note at the foot of the landing page */

.disclaimer {
  max-width: 74ch;
  margin: 56px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.disclaimer h2 {
  margin-bottom: 9px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.disclaimer p {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.65;
}
.disclaimer strong { color: var(--fg-dim); font-weight: 600; }
.disclaimer-foot { margin-top: 10px; color: var(--line); }

/* ---------- landing page ---------- */

.landing {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 32px 24px 30px;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.landing-core {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.landing-mark { opacity: .9; }

.landing-name {
  margin-top: 20px;
  font-size: clamp(2.2rem, 8vw, 3rem);
  font-weight: 600;
  letter-spacing: -.035em;
}

.landing-sub {
  margin-top: 10px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
}

.landing-action { margin-top: 38px; }
.landing-action .btn { padding: 12px 40px; }

.landing .alert {
  margin: 28px 0 0;
  font-size: .84rem;
  text-align: left;
}

.landing-legal {
  flex-shrink: 0;
  margin: 40px auto 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.75;
  opacity: .75;
}

/* ===========================================================================
   War Manager board
   ========================================================================= */

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* scoreboard */

.scoreboard { padding-bottom: 18px; }

.score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
}
.score-side { min-width: 0; }
.score-them { text-align: right; }

.score-name {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.score-value {
  margin-top: 2px;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.score-us .score-value { color: var(--accent); }
.score-note { margin-top: 2px; color: var(--muted); font-size: .8rem; }

.score-mid { text-align: center; padding: 0 6px; }
.score-label {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.score-clock {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg-dim);
}

/* the member's own panel */

.stat-form { margin-top: 14px; }

.stat-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.stat-inputs label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  color: var(--fg-dim);
  font-size: .9rem;
  cursor: pointer;
}
.check input { margin-top: 3px; accent-color: var(--accent); }
.check-inline { margin-top: 0; align-items: center; white-space: nowrap; }

.kv > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: .89rem;
}
.kv > div:last-child { border-bottom: 0; }
.kv span { color: var(--muted); }

/* board chrome */

.board-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.board-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.board-tools input[type="search"] {
  width: 200px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: .87rem;
}

/* the grid itself */

.grid-table { font-size: .87rem; }
.grid-table th.sortable { cursor: pointer; user-select: none; }
.grid-table th.sortable:hover { color: var(--fg-dim); }
.grid-table th.sortable::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: 6px;
  vertical-align: middle;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
.grid-table th.is-sorted { color: var(--accent); }
.grid-table th.is-sorted::after { border-bottom-color: var(--accent); }
.grid-table th.is-sorted.is-desc::after {
  border-bottom: 0;
  border-top: 4.5px solid var(--accent);
}

.grid-table td { padding: 8px 10px; }
.grid-table tr.is-pinned { background: rgba(94, 234, 212, .045); }
.grid-table tr.is-pinned td { border-bottom-color: rgba(94, 234, 212, .16); }

.col-pin { width: 40px; padding-right: 0 !important; }
.pin {
  padding: 0;
  border: 0;
  background: none;
  color: var(--line);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.pin:hover { color: var(--fg-dim); }
.pin.is-on { color: var(--accent); }

.col-target { min-width: 190px; }
.col-target details > summary {
  list-style: none;
  cursor: pointer;
}
.col-target details > summary::-webkit-details-marker { display: none; }
.col-target details > summary::before {
  content: "\203A";
  display: inline-block;
  width: 11px;
  margin-right: 3px;
  color: var(--muted);
  transition: transform .12s ease;
}
.col-target details[open] > summary::before { transform: rotate(90deg); }
.t-name { font-weight: 600; color: var(--fg); }
.t-pos {
  margin-left: 6px;
  color: var(--muted);
  font-size: .78rem;
}

.t-detail {
  margin: 8px 0 4px 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--line);
  color: var(--fg-dim);
  font-size: .82rem;
}
.t-source { color: var(--fg-dim); }
.t-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2px 16px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}
.t-facts strong { color: var(--fg-dim); font-weight: 600; }
.t-war { margin-top: 8px; color: var(--muted); }
.t-links { margin-top: 8px; font-size: .82rem; }

/* stat estimate */

.col-stats { min-width: 128px; line-height: 1.35; }
.stat-main { font-weight: 650; font-variant-numeric: tabular-nums; }
.stat-range {
  display: block;
  color: var(--muted);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
}

.src {
  display: inline-block;
  margin-left: 5px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  vertical-align: 1px;
  cursor: help;
}
.src-spy  { border-color: rgba(94, 234, 212, .45); color: var(--accent); }
.src-ffs  { border-color: rgba(94, 234, 212, .30); color: var(--accent); }
.src-ff   { border-color: rgba(56, 189, 248, .42); color: var(--accent-2); }
.src-bss  { border-color: rgba(56, 189, 248, .26); color: var(--accent-2); }
.src-rank { border-color: var(--line); color: var(--muted); }

/* the read */

.col-read { min-width: 118px; }

.tag {
  display: inline-block;
  padding: 1px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
}
.tag-easy    { border-color: rgba(148, 163, 184, .4);  color: #94a3b8; }
.tag-good    { border-color: rgba(56, 189, 248, .45);  color: var(--accent-2); }
.tag-optimal { border-color: rgba(94, 234, 212, .55);  background: rgba(94, 234, 212, .1); color: var(--accent); }
.tag-risky   { border-color: rgba(251, 191, 36, .45);  color: #fbbf24; }
.tag-avoid   { border-color: rgba(248, 113, 113, .45); color: var(--danger); }
.tag-unknown { border-color: var(--line-soft); color: var(--muted); }

.ff {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}

.col-status { min-width: 132px; }
.col-status .state { font-size: .84rem; }
.col-status .countdown { margin-left: 6px; font-size: .78rem; color: var(--fg-dim); }
.dot-amber { background: #fbbf24; }

.col-claim { min-width: 96px; }
.col-actions { white-space: nowrap; }
.col-actions .inline-form { margin-left: 6px; }

/* attack: the one destructive thing on the page, and it should look like it */

.btn-attack {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid rgba(248, 113, 113, .7);
  border-radius: 7px;
  background: rgba(248, 113, 113, .22);
  color: #fecaca;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-attack:hover {
  background: rgba(248, 113, 113, .3);
  border-color: rgba(248, 113, 113, .95);
  color: #fff;
  text-decoration: none;
}
.btn-attack .ico { flex: none; }

/* presence: where the target is right now, next to the pin */

.pres {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .26);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4);
  vertical-align: middle;
  cursor: help;
}
.pres-online {
  background: #4ade80;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), 0 0 7px rgba(74, 222, 128, .55);
}
.pres-idle {
  background: #fbbf24;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), 0 0 7px rgba(251, 191, 36, .45);
}

.legend { color: var(--muted); font-size: .8rem; line-height: 2.1; }
.legend .tag { margin: 0 3px 0 8px; }
.legend .tag:first-child { margin-left: 0; }
.panel-foot .src { margin-left: 0; margin-right: 3px; }

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

select {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: .9rem;
}

@media (max-width: 720px) {
  .score { grid-template-columns: 1fr; text-align: center; }
  .score-them { text-align: center; }
  .board-tools input[type="search"] { width: 100%; }
}


.stat-form .btn { align-self: flex-start; margin-top: 12px; }

/* --- staying put ---------------------------------------------------------
   Booking a target must not move the page. The click is handled in place by
   war.js, and on a screen wide enough to show the whole grid the header row
   stays put while the rows scroll under it, so the columns are still readable
   two hundred pixels down. Below that width the grid scrolls sideways instead,
   and a sticky header cannot work inside a horizontal scroller — so it is only
   asked for where it can actually be delivered. */

@media (min-width: 1024px) {
  .board .table-scroll { overflow: visible; }

  .board .grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--sticky);
    box-shadow: 0 1px 0 var(--line);
  }
}

.badge-off {
  border-color: rgba(248, 113, 113, .32);
  background: var(--danger-bg);
  color: var(--danger);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 40;
  max-width: min(520px, calc(100vw - 32px));
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--sticky);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
  color: var(--fg);
  font-size: .9rem;
  opacity: 0;
  transform: translate(-50%, 14px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.toast.is-up { opacity: 1; transform: translate(-50%, 0); }
.toast-ok  { border-color: var(--ok-line); }
.toast-bad { border-color: var(--danger-line); }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* ===========================================================================
   The board, tightened.

   One row per target and nothing wrapping: during a chain the whole roster
   should be readable without scrolling past it. Everything that used to take a
   second line — the bracket, the fair fight, what the hit pays — moved into the
   row's own disclosure, so the density costs no information, only clicks for
   the detail you rarely need.
   ========================================================================= */

.board-head h2 { font-size: 1.1rem; }

.count {
  margin-left: 7px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  vertical-align: 2px;
}

.board-tools { gap: 8px; font-size: .82rem; }
.board-tools input[type="search"] {
  width: 150px;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: .82rem;
}
.board-tools .check-inline { font-size: .78rem; color: var(--muted); }
.board-tools .check-inline input { margin-top: 0; }

.board-fresh {
  color: var(--muted);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.btn-xs {
  padding: 3px 9px;
  border-radius: 7px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .01em;
}

/* the grid */

.grid-table { font-size: .82rem; }

.grid-table thead th {
  padding: 6px 8px;
  font-size: .64rem;
  letter-spacing: .13em;
}

.grid-table tbody td {
  padding: 3px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  white-space: nowrap;
  vertical-align: middle;
}
.grid-table tbody tr:hover { background: rgba(255, 255, 255, .03); }

.col-pin { width: 48px; padding-right: 0 !important; }
.pin { font-size: .82rem; }
.pres { width: 11px; height: 11px; margin-right: 7px; }

.col-target { max-width: 260px; }
.col-lv { width: 34px; color: var(--muted); }
.col-stats { width: 96px; }
.col-read { width: 88px; }
.col-status { width: 148px; }
.col-hit { width: 34px; }
.col-claim { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.col-actions { width: 152px; }

/* target cell: a single line that opens */

.col-target details > summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
}
.col-target details > summary::before { width: 9px; margin-right: 0; font-size: .8rem; }
.t-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.t-pos {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .72rem;
}

.t-detail {
  margin: 6px 0 8px 12px;
  padding: 9px 11px;
  border-left: 2px solid var(--line);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, .02);
  white-space: normal;
  font-size: .78rem;
}
.t-source + .t-source { margin-top: 4px; }
.t-facts { font-size: .76rem; gap: 1px 14px; }

/* estimate: figure plus a one-letter provenance mark */

.stat-main { font-family: var(--mono); font-size: .82rem; font-weight: 600; }

.src {
  display: inline-block;
  width: 14px;
  margin-left: 5px;
  padding: 0;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  vertical-align: 1px;
  cursor: help;
}
.src-spy  { background: rgba(94, 234, 212, .16); border-color: transparent; color: var(--accent); }
.src-ffs  { background: rgba(94, 234, 212, .09); border-color: transparent; color: var(--accent); }
.src-ff   { background: rgba(56, 189, 248, .16); border-color: transparent; color: var(--accent-2); }
.src-bss  { background: rgba(56, 189, 248, .09); border-color: transparent; color: var(--accent-2); }
.src-rank { background: rgba(255, 255, 255, .05); border-color: transparent; color: var(--muted); }

/* read tag */

.tag {
  padding: 1px 7px;
  border-radius: 5px;
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* status */

.col-status .dot { width: 6px; height: 6px; margin-right: 6px; }
.col-status .state { font-size: .8rem; }
.col-status .countdown {
  margin-left: 6px;
  font-size: .74rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.col-claim .claim-mine, .col-claim .claim-other { font-size: .8rem; }

/* actions: an icon for the thing you do a hundred times a war */

.col-actions .inline-form { display: inline-flex; margin-left: 5px; }

/* the dense grid gets a tighter Attack, but it keeps its word and its colour */
.btn-attack {
  gap: 4px;
  padding: 2px 7px;
  font-size: .65rem;
  letter-spacing: .04em;
}

.ico { display: block; }

/* legend */

.legend { line-height: 1.9; font-size: .76rem; }
.legend .tag { margin: 0 4px 0 0; }
.legend .src { margin: 0 3px; }

/* the panels around it, on the same diet */

.page-head h1 { font-size: clamp(1.35rem, 3vw, 1.7rem); }
.panel { padding: 18px 20px; }
.panel h2 { font-size: 1.1rem; }
.scoreboard { padding: 14px 20px; }
.score-value { font-size: clamp(1.5rem, 4vw, 2.1rem); }
.lede-sm { font-size: .84rem; }

.kv > div { padding: 5px 0; font-size: .84rem; }

.stat-inputs { gap: 8px; grid-template-columns: repeat(5, 1fr); }
.stat-inputs label { font-size: .66rem; gap: 4px; }
.stat-inputs input { padding: 6px 9px; font-size: .84rem; }

@media (max-width: 1023px) {
  /* Horizontal scrolling is back, so the row can breathe a little again. */
  .grid-table tbody td { padding: 5px 8px; }
}

/* ===========================================================================
   Ordering on more than one column, the last minute before a target walks out,
   and the panel that moved under the board.
   ========================================================================= */

/* the sort chain, spelled out under the board header */

.sort-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.sort-chips-label {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sort-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px solid rgba(94, 234, 212, .3);
  border-radius: 999px;
  background: rgba(94, 234, 212, .07);
  color: var(--accent);
  font: inherit;
  font-size: .74rem;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
}
.sort-chip:hover { border-color: var(--accent); }
.sort-chip .chip-x { color: var(--muted); }
.sort-chip:hover .chip-x { color: var(--danger); }
.sort-hint { margin-left: 2px; color: var(--muted); font-size: .7rem; }

/* which column is read first when several are */

.sort-rank {
  display: inline-block;
  min-width: 13px;
  margin-left: 4px;
  border-radius: 3px;
  background: rgba(94, 234, 212, .18);
  color: var(--accent);
  font-size: .58rem;
  line-height: 13px;
  text-align: center;
  vertical-align: 1px;
}

/* the last minute in hospital: the row asks to be looked at, and the clock on
   it gets big enough to read across the desk */

.grid-table tr.is-soon td {
  opacity: 1;
  animation: tw-soon 1.7s ease-in-out infinite;
}
@keyframes tw-soon {
  0%, 100% { background-color: rgba(94, 234, 212, .035); }
  50%      { background-color: rgba(94, 234, 212, .13); }
}
.grid-table tr.is-soon .col-status .state { color: var(--fg); }
.grid-table tr.is-soon .col-status .countdown {
  font-size: .97rem;
  font-weight: 700;
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .grid-table tr.is-soon td {
    animation: none;
    background-color: rgba(94, 234, 212, .1);
  }
}

/* a panel that is read once and then folded out of the way */

.fold > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
  list-style: none;
  cursor: pointer;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: "\25B8";
  display: inline-block;
  color: var(--muted);
  font-size: .8rem;
  transition: transform .12s ease;
}
.fold[open] > summary::before { transform: rotate(90deg); }
.fold-title { font-size: 1.1rem; font-weight: 600; }
.fold-note { color: var(--muted); font-size: .82rem; }
.fold-warn { color: #fbbf24; }
.fold-body { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .fold > summary::before { transition: none; }
}

/* ── Distopvian: side door ──────────────────────────────────────────────
   A small mark in the bottom-right corner, almost invisible until the
   pointer finds it. Keyboard users get it on focus, which is why the
   visible state is not tied to :hover alone. Nothing here restyles
   anything else: every rule is scoped to .dv-door.
   ------------------------------------------------------------------- */

.dv-door {
  position: fixed;
  right: 14px;
  bottom: 12px;
  z-index: 50;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: #35e0d0;
  font-size: 11px;
  line-height: 1;
  text-decoration: none;
  opacity: .07;
  transition: opacity .18s ease, background-color .18s ease, border-color .18s ease;
  border: 1px solid transparent;
  background-color: transparent;
}

.dv-door:hover,
.dv-door:focus-visible {
  opacity: 1;
  border-color: rgba(53, 224, 208, .45);
  background-color: rgba(53, 224, 208, .08);
}

.dv-door:focus-visible {
  outline: 2px solid rgba(53, 224, 208, .6);
  outline-offset: 2px;
}

/* Senza puntatore non esiste il passaggio del mouse: su un telefono resta
   appena percettibile, che è esattamente quel che deve fare. */
@media (hover: none) {
  .dv-door { opacity: .12; }
}

@media (prefers-reduced-motion: reduce) {
  .dv-door { transition: none; }
}

/* ── Live source, and the viewer's own API key ──────────────────────────
   The badge next to the freshness label says where target status is coming
   from: the member's own key, straight from Torn, or the copy the server
   shares with everybody. Clicking it opens the box that takes the key.
   ------------------------------------------------------------------- */

.live-direct,
.live-shared,
.live-bad {
  cursor: pointer;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .68rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.live-direct {
  color: var(--ok);
  border-color: var(--ok-line);
  background: var(--ok-bg);
}

.live-shared {
  color: var(--muted);
}

.live-bad {
  color: var(--danger);
  border-color: var(--danger-line);
  background: var(--danger-bg);
  text-transform: none;
}

.keybox {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.keybox > label {
  display: block;
  margin-bottom: 6px;
  font-size: .78rem;
  color: var(--fg-dim);
}

.keyrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.keyrow input {
  flex: 1 1 190px;
  min-width: 0;
  font-family: var(--mono);
  font-size: .82rem;
}

.keybox .field-hint {
  margin-top: 7px;
}

/* ── The freshness reading ──────────────────────────────────────────────
   It sits next to the buttons and it changes every second, so it must never
   change width: it used to alternate between "live" and "updated 12s ago"
   and pushed everything beside it around. Fixed slot, right aligned, tabular
   figures, and never more than four characters of content.
   ------------------------------------------------------------------- */

.board-fresh {
  min-width: 5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Older than a few seconds: say so quietly rather than pretending. */
.board-fresh.is-late {
  color: var(--danger);
}

/* ── Language switch ─────────────────────────────────────────────────────
   Two letters, the current one lit. In the top bar it sits at the far end;
   on the landing page it sits in the corner.
   ------------------------------------------------------------------- */

.lang {
  display: inline-flex;
  gap: 2px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.lang a,
.lang-on {
  padding: 3px 7px;
  border-radius: 7px;
  text-decoration: none;
}

.lang a { color: var(--muted); }
.lang a:hover { color: var(--fg); background: var(--surface-2); }
.lang-on { color: var(--accent); background: rgba(94, 234, 212, .08); }

.landing-lang {
  display: flex;
  justify-content: flex-end;
}

/* ── The battle stats gate ───────────────────────────────────────────────
   Shown over the whole page until a member has said what their stats are,
   because without them every row reads as a dash.
   ------------------------------------------------------------------- */

.gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px 16px;
  background: rgba(5, 7, 11, .82);
  overflow-y: auto;
}

.gate-card {
  width: 100%;
  max-width: 540px;
  padding: 24px 24px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--sticky);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.gate-card h2 { font-size: 1.25rem; }
.gate-card .lede-sm { margin-top: 4px; }
.gate-card .alert { margin: 14px 0 0; }

/* Two ways in, and a plain "or" between them. The fields of the way not
   chosen are hidden, so the two can never be mixed. */

.mode-pick {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 10px;
}

.mode {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

.mode input { margin-top: 3px; accent-color: var(--accent); }

.mode strong {
  display: block;
  color: var(--fg);
  font-size: .92rem;
}

.mode small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.35;
}

.mode:has(input:checked) {
  border-color: rgba(94, 234, 212, .5);
  background: rgba(94, 234, 212, .06);
}

.mode-or {
  align-self: center;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.statmode .mode-split,
.statmode .mode-total { margin-top: 14px; }

.statmode:has(input[value="total"]:checked) .mode-split,
.statmode:has(input[value="split"]:checked) .mode-total,
.statmode:not(:has(input[name="mode"]:checked)) .mode-split,
.statmode:not(:has(input[name="mode"]:checked)) .mode-total {
  display: none;
}

.statmode:not(:has(input[name="mode"]:checked)) .field-hint,
.statmode:not(:has(input[name="mode"]:checked)) button { display: none; }

@media (max-width: 520px) {
  .mode-pick { grid-template-columns: 1fr; }
  .mode-or { justify-self: center; }
}

/* ── Who uses it (Leader's panel) ────────────────────────────────────── */

.dot-off { opacity: .35; background: var(--muted); }

.events {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .86rem;
  columns: 2 280px;
  column-gap: 28px;
}

.events li {
  break-inside: avoid;
  padding: 3px 0;
  color: var(--fg-dim);
}

.events .muted {
  display: inline-block;
  min-width: 7ch;
}

/* Signed out there is no nav to push it right. */
.brand + .lang { margin-left: auto; }