:root {
  color-scheme: dark;
  --bg: #05090a;
  --surface: #0b1113;
  --surface-2: #11191c;
  --surface-3: #162126;
  --border: #26363b;
  --border-strong: #2d6d70;
  --text: #eff7f5;
  --muted: #96aaa8;
  --teal: #2fd1bd;
  --teal-dark: #123b3a;
  --cyan: #58aeb6;
  --amber: #f0b45f;
  --red: #ff746c;
  --shadow: 0 20px 50px rgb(0 0 0 / 28%);
}

* { box-sizing: border-box; }

html {
  min-width: 20rem;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}

button,
input,
select { font: inherit; }

a { color: inherit; }

button,
a,
input,
select,
summary { outline-color: var(--teal); }

[hidden] { display: none !important; }
/* One game's parts while another game is picked in the switch (app.js applyGame). */
#protected-workspace[data-game="lyrania"] [data-game-only="manarion"],
#protected-workspace:not([data-game="lyrania"]) [data-game-only="lyrania"] { 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;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 20;
  padding: 0.65rem 0.9rem;
  transform: translateY(-160%);
  background: var(--teal);
  color: #03100e;
  font-weight: 800;
}

.skip-link:focus { transform: translateY(0); }

.site-header,
.app-shell,
footer {
  width: min(96rem, calc(100% - 3rem));
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5.5rem;
  border-bottom: 1px solid var(--border);
}

.identity {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
}

.identity strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  font-weight: 500;
}

.identity-mark {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--teal);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
}

.eyebrow {
  display: block;
  margin: 0 0 0.3rem;
  color: var(--teal);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.service-state {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.header-actions,
.account-state {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-actions { justify-content: flex-end; }

.account-state {
  padding-left: 1rem;
  border-left: 1px solid var(--border);
  color: var(--teal);
  font-size: 0.8rem;
}

.text-button {
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.state-dot,
.hero-signals i {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--amber);
}

.service-state[data-state="online"] .state-dot,
.hero-signals i[data-state="live"] { background: var(--teal); }

.service-state[data-state="offline"] .state-dot { background: var(--red); }
.hero-signals i[data-state="public"] { background: var(--cyan); }
.hero-signals i[data-state="private"] { background: var(--amber); }

.app-shell {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  padding-block: 2.25rem 4rem;
}

.game-rail {
  display: grid;
  gap: 0.6rem;
  align-self: start;
  position: sticky;
  top: 1rem;
}

.game-choice {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--teal);
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
}

.game-choice strong,
.game-choice small { display: block; }
.game-choice small { margin-top: 0.15rem; color: var(--teal); }

.game-glyph {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 auto;
  place-items: center;
  background: var(--teal-dark);
  color: var(--teal);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
}

.future-game {
  display: flex;
  gap: 0.75rem;
  padding: 1.1rem 0.8rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.future-game > span {
  color: var(--border-strong);
  font-size: 1.5rem;
}

.future-game p { margin: 0; }

.game-workspace { min-width: 0; }

.access-gate {
  display: grid;
  min-height: 34rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.6fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
  padding: clamp(2rem, 6vw, 5rem);
  border: 1px solid var(--border);
  border-top-color: var(--teal);
  background: linear-gradient(135deg, var(--surface), #071112 65%, var(--teal-dark));
  box-shadow: var(--shadow);
}

.login-form {
  display: grid;
  gap: 0.9rem;
  padding: 1.4rem;
  border: 1px solid var(--border-strong);
  background: rgb(5 9 10 / 80%);
}

.login-forms { display: grid; gap: 0.9rem; align-content: start; }
.login-alternative { border: 1px solid var(--border); background: rgb(5 9 10 / 60%); }
.login-alternative > summary { cursor: pointer; padding: 0.9rem 1.4rem; color: var(--teal); font-weight: 750; }
.login-alternative > .login-form { border: 0; border-top: 1px solid var(--border); }

.form-message {
  min-height: 2.5rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
}

/* The signed-in workspace's heading is one quiet line: the owner wants each view on one screen
   (2026-10-04), and the large heading and source list took 400 pixels of every tab. The heading
   stays for screen readers. */
.game-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 0 0.5rem;
}
.game-hero .hero-copy,
.game-hero .hero-signals { display: none; }

h1,
h2,
h3,
p { margin-top: 0; }

h1,
h2,
h3 {
  margin-bottom: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.13;
}

h1 { max-width: 46rem; font-size: clamp(2.25rem, 5vw, 4.4rem); }
h2 { font-size: clamp(1.65rem, 3vw, 2.45rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); }

.hero-copy {
  max-width: 43rem;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}
/* The second paragraph of the sign-in intro: what each game gets, in a smaller line (2026-10-13). */
.hero-games { font-size: 0.92rem; }
.hero-games strong { color: var(--text); font-weight: 600; }

.hero-signals {
  display: grid;
  flex: 0 0 auto;
  gap: 0.5rem;
  padding: 0.85rem 0;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.hero-signals span {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.tabs {
  display: flex;
  overflow-x: auto;
  border-block: 1px solid var(--border);
  scrollbar-width: thin;
}

.tabs button {
  min-height: 3.4rem;
  flex: 0 0 auto;
  padding: 0.7rem 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
}

.tabs button:hover { color: var(--text); }

.tabs button[aria-selected="true"] {
  border-bottom-color: var(--teal);
  color: var(--teal);
}

.tab-panel { padding-top: 1.1rem; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.metric-card,
.mini-metric {
  min-width: 0;
  min-height: 8rem;
  padding: 1rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.metric-card span,
.mini-metric span,
.metric-card small,
.mini-metric small {
  display: block;
  color: var(--muted);
}

.metric-card span,
.mini-metric span { font-size: 0.8rem; }
.metric-card small,
.mini-metric small { margin-top: 0.65rem; font-size: 0.73rem; }

.metric-card strong,
.mini-metric strong {
  display: block;
  overflow: hidden;
  margin-top: 0.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  text-overflow: ellipsis;
}

#market-state[data-state="fresh"] { color: var(--teal); }
#market-state[data-state="stale"] { color: var(--amber); }
#market-state[data-state="offline"] { color: var(--red); }

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.overview-grid { margin-top: 1rem; }

.content-card {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.content-card h2,
.content-card h3 { margin-bottom: 1rem; }
.content-card > p:not(.eyebrow) { color: var(--muted); }
.accent-card { border-top-color: var(--teal); }

.decision-flow,
.plain-list,
.readiness-list {
  display: grid;
  gap: 0.85rem;
  padding: 0;
  margin: 1.6rem 0 0;
  list-style: none;
}

.decision-flow li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.8rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.decision-flow li > span,
.step-number {
  color: var(--teal);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
}

.decision-flow p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.plain-list { list-style: square; padding-left: 1.2rem; }
.plain-list li { padding-left: 0.2rem; color: var(--muted); }
.plain-list li::marker { color: var(--teal); }

.panel-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.panel-intro > p {
  max-width: 32rem;
  margin-bottom: 0.2rem;
  color: var(--muted);
}

.calculator-grid { grid-template-columns: repeat(2, minmax(20rem, 1fr)); }
.upgrade-evidence-card { grid-column: 1 / -1; }
.benefit-evidence-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.evidence-tag,
.module-badge {
  display: inline-block;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--border-strong);
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.content-card .evidence-tag { margin-bottom: 1rem; }
.live-tag { color: var(--teal); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.compact-form { grid-template-columns: 2fr repeat(3, minmax(4.5rem, 0.65fr)); }

label {
  display: grid;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface-2);
  color: var(--text);
}

input:focus,
select:focus,
textarea:focus { border-color: var(--teal); }
/* Text areas took the browser's grey box and monospace font. */
textarea { font: inherit; resize: vertical; }

.calculator-result {
  display: block;
  min-height: 5rem;
  margin-top: 1.25rem;
  padding: 1rem;
  border-left: 3px solid var(--teal);
  background: var(--surface-2);
  color: var(--teal);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 3vw, 1.8rem);
}

.fine-print {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.result-list {
  display: grid;
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--border);
}

.result-list > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.result-list dt { color: var(--muted); }
.result-list dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-align: right; }

.button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--teal);
  border-radius: 0;
  background: var(--teal);
  color: #03100e;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
}

.button:hover { background: #6ce3d4; }

.discord-button {
  width: 100%;
  border-color: #5865f2;
  background: #5865f2;
  color: #fff;
}

.discord-button:hover { background: #6b77f5; }

.form-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.35rem 0;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.form-divider::before,
.form-divider::after {
  height: 1px;
  flex: 1;
  background: var(--border);
  content: "";
}
.button:disabled { cursor: wait; opacity: 0.55; }
.button.secondary { background: transparent; color: var(--text); }
.button.danger { border-color: var(--red); background: transparent; color: var(--red); }

.empty-state {
  display: grid;
  min-height: 19rem;
  place-items: center;
  align-content: center;
  text-align: center;
}

.empty-state p { max-width: 40rem; }

.empty-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  place-items: center;
  border: 1px solid var(--border-strong);
  color: var(--teal);
  font-size: 1.4rem;
}

.inline-actions {
  display: flex;
  align-items: end;
  gap: 0.6rem;
}

.search-field { min-width: min(18rem, 50vw); }

.leaderboard-form { flex-wrap: wrap; }
.leaderboard-form label { min-width: 9rem; }
.leaderboard-form label:first-child { flex: 2 1 18rem; }
.leaderboard-pagination { justify-content: flex-end; margin-top: 1rem; }

.source-strip {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-bottom: 0;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.78rem;
}

.market-history-card {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--border);
  border-top-color: var(--teal);
  background: var(--surface);
}

.market-history-heading,
.market-history-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.market-history-picker { width: min(22rem, 44vw); }

.market-history-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.25rem 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.market-history-metrics > div {
  min-width: 0;
  padding: 0.8rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.market-history-metrics dt {
  color: var(--muted);
  font-size: 0.72rem;
}

.market-history-metrics dd {
  overflow: hidden;
  margin: 0.25rem 0 0;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1.05rem;
  text-overflow: ellipsis;
}

.market-history-toolbar { align-items: center; margin-bottom: 0.75rem; }
.market-history-toolbar p { margin: 0; color: var(--muted); font-size: 0.76rem; text-align: right; }

.history-range-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.history-range-buttons button,
.market-item-history-button {
  min-height: 2.25rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 750;
}

.history-range-buttons button:hover,
.market-item-history-button:hover { border-color: var(--teal); color: var(--teal); }

.history-range-buttons button[aria-pressed="true"] {
  border-color: var(--teal);
  background: var(--teal-dark);
  color: var(--teal);
}

.market-item-history-button {
  min-height: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  color: var(--text);
  text-align: left;
}

.market-history-chart {
  position: relative;
  min-height: 22rem;
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), #090e10);
}

.market-history-chart > p {
  display: grid;
  min-height: 22rem;
  margin: 0;
  place-items: center;
  padding: 1.5rem;
  color: var(--muted);
  text-align: center;
}

.market-history-chart svg { display: block; width: 100%; height: auto; min-height: 22rem; }
.history-grid-line { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.history-axis-label { fill: var(--muted); font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.history-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.history-line.buy { stroke: var(--amber); }
.history-line.sell { stroke: var(--cyan); }
.history-crosshair { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.market-history-readout { margin: 0.5rem 0 0; min-height: 1.4em; color: var(--text); font-variant-numeric: tabular-nums; }
.history-overlay { fill: transparent; cursor: crosshair; pointer-events: all; touch-action: pan-y; }
.history-marker { fill: var(--surface-2); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.history-marker.buy { stroke: var(--amber); }
.history-marker.sell { stroke: var(--cyan); }
.history-trend { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.history-trend.buy { stroke: var(--amber); }
.history-trend.sell { stroke: var(--cyan); }
.market-history-chart.trend-on .history-line { opacity: 0.35; }
.market-history-legend .trend-key i { height: 0.2rem; background: linear-gradient(90deg, var(--amber) 50%, var(--cyan) 50%); }
.history-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.history-tools button { border: 1px solid var(--border); border-radius: 0.4rem; background: transparent; color: var(--text); padding: 0.35rem 0.7rem; font: inherit; cursor: pointer; }
.history-tools button:hover { border-color: var(--teal); color: var(--teal); }
.history-tools button[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: var(--surface-2); }
.market-history-stats { margin: 0.35rem 0 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.market-movers { margin: 1rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: 0.5rem; }
.market-movers h3 { margin: 0 0 0.75rem; }
.market-movers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.market-movers h4 { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--muted); }
.market-movers ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.market-movers li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.market-movers li small { color: var(--muted); font-variant-numeric: tabular-nums; }
.market-change { font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-trend="up"] { color: var(--teal); }
[data-trend="down"] { color: var(--red); }
[data-trend="flat"] { color: var(--muted); }
.market-watch-column { width: 2rem; }
.refinery-card { grid-column: 1 / -1; }
.refinery-result p { margin: 0.35rem 0; }
.refinery-beyond td { color: var(--muted, #6b7280); background: color-mix(in srgb, currentColor 6%, transparent); }
#refinery-buildings input[type="number"] { max-width: 8rem; }
.market-watch-button { background: none; border: 0; padding: 0 0.25rem; font-size: 1.1rem; line-height: 1; color: var(--muted); cursor: pointer; }
.market-watch-button[aria-pressed="true"] { color: var(--amber); }
.market-watch-filter { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
/* The phone's sort menu: the table's header sorts on a wider screen, so the menu only shows here. */
.market-sort-phone { display: none; align-items: center; gap: 0.4rem; white-space: nowrap; }
@media (max-width: 38rem) { .market-sort-phone { display: inline-flex; } }
th[data-market-sort] button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
th[aria-sort="ascending"] button::after { content: " ▲"; }
th[aria-sort="descending"] button::after { content: " ▼"; }
.history-price-label { fill: var(--text); stroke: var(--surface-2); stroke-width: 4px; paint-order: stroke; font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; pointer-events: none; }
.history-point { stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.history-point.buy { fill: var(--surface-2); stroke: var(--amber); }
.history-point.sell { fill: var(--surface-2); stroke: var(--cyan); }
.history-point-hit { fill: transparent; stroke: transparent; pointer-events: all; }

.market-history-legend {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.market-history-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.market-history-legend i { display: inline-block; width: 1.4rem; height: 0.15rem; background: var(--muted); }
.market-history-legend i.buy { background: var(--amber); }
.market-history-legend i.sell { background: var(--cyan); }

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 0.84rem;
}

th,
td {
  padding: 0.72rem 0.8rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

td:not(:first-child) { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
tbody tr:hover { background: rgb(47 209 189 / 6%); }
tbody tr:last-child td { border-bottom: 0; }

.lookup-bar {
  display: flex;
  align-items: end;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.lookup-bar label { min-width: min(24rem, 70vw); }

.player-dashboard { display: grid; gap: 1rem; }

.player-heading,
.snapshot-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--border);
  background: var(--surface);
}

.player-heading .eyebrow { margin-bottom: 0.35rem; }
.player-grid { grid-template-columns: minmax(17rem, 0.65fr) minmax(0, 1.7fr); }

.readiness-list { margin-top: 1rem; }
.readiness-list li { display: flex; align-items: flex-start; gap: 0.65rem; color: var(--muted); }
.readiness-list .ready .readiness-mark { color: var(--teal); }
.readiness-list .waiting .readiness-mark { color: var(--amber); }
.readiness-copy { display: grid; gap: 0.15rem; }
.readiness-copy small { color: var(--muted); font-size: 0.72rem; }

.planning-grid { margin-top: 1rem; }
.planning-table-card { margin-top: 1rem; }
.planning-summary { color: var(--text); }
.mage-tower-planner { margin-top: 1rem; }
.mage-tower-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.mage-tower-form {
  grid-template-columns: minmax(12rem, 18rem) auto;
  align-items: end;
  margin-top: 1rem;
}
.mage-tower-form .button { width: fit-content; }
.roi-metrics { margin: 1rem 0; }
.planner-status {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.planner-status.caution { color: var(--amber); }
.planner-details { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.planner-details summary { cursor: pointer; color: var(--teal); font-weight: 750; }
.planner-details .table-wrap { margin-top: 0.75rem; }
.affordability-form { margin-top: 1rem; }
.affordability-result {
  min-height: 4.5rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.affordability-result strong { display: block; font-size: 1.1rem; }
.affordability-result .positive { color: var(--teal); }
.affordability-result .caution { color: var(--amber); }
.privacy-notice { margin-top: 1rem; border-left: 3px solid var(--amber); }
.owned-inputs { margin-top: 1rem; }
.gear-changes-card { margin-top: 1rem; }
.gear-effects-card { margin-top: 1rem; }
.gear-effects-card td small { display: block; margin-top: 0.25rem; }
.spending-card { margin-bottom: 1rem; }
.gear-change-piece { display: grid; gap: 0.15rem; }
.gear-change-piece + .gear-change-piece { margin-top: 0.45rem; }
.gear-change-pieces small,
.gear-changes-card td small { display: block; margin-top: 0.25rem; }
.nested-data-details { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.nested-data-details summary { cursor: pointer; color: var(--teal); font-weight: 750; }

.data-details summary,
.capture-page summary {
  cursor: pointer;
  color: var(--teal);
  font-weight: 750;
}

.json-view {
  max-height: 34rem;
  overflow: auto;
  margin: 1rem 0 0;
  padding: 1rem;
  border: 1px solid var(--border);
  background: #030606;
  color: #d7e7e4;
  font-size: 0.72rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.connection-grid { margin-bottom: 1rem; }
.step-number { display: block; margin-bottom: 1rem; }
.collector-status-card { margin-bottom: 1rem; }
.collector-status-table table { min-width: 48rem; }
.collector-install-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.collector-install-status-icon {
  display: inline-grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border: 2px solid currentcolor;
  border-radius: 0.25rem;
  background: var(--surface);
  font-size: 1rem;
  line-height: 1;
}
.collector-install-status[data-state="current"] { color: var(--teal); }
.collector-install-status[data-state="outdated"] { color: var(--red); }
.collector-install-status[data-state="ahead"] { color: var(--amber); }
.snapshot-viewer { display: grid; grid-template-columns: minmax(15rem, 0.7fr) minmax(22rem, 1fr); gap: 2rem; }
.snapshot-form { align-content: start; }
.snapshot-form .inline-actions { grid-column: 1 / -1; }
.snapshot-content { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid var(--border); }
.snapshot-list { grid-column: 1 / -1; padding: 1rem; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.snapshot-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.snapshot-choice { padding: 0.45rem 0.65rem; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; }
.snapshot-choice:hover { border-color: var(--teal); color: var(--teal); }
.snapshot-heading { margin-bottom: 0.75rem; box-shadow: none; }
.snapshot-heading span { color: var(--muted); font-size: 0.78rem; }
.capture-page { padding: 0.8rem 0; border-bottom: 1px solid var(--border); }
.compact-table { margin-top: 0.75rem; }
.compact-table table { min-width: 35rem; }

.noscript-message {
  width: min(96rem, calc(100% - 3rem));
  margin: 1rem auto;
  padding: 1rem;
  border: 1px solid var(--amber);
  color: var(--amber);
}

footer {
  display: flex;
  justify-content: space-between;
  padding-block: 1.3rem 2rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 74rem) {
  .app-shell { grid-template-columns: 1fr; }
  .game-rail { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
  .game-rail > .eyebrow { margin: 0; }
  .game-choice { width: auto; min-width: 13rem; }
  .future-game { display: none; }
  .player-grid { grid-template-columns: 1fr; }
}

@media (max-width: 58rem) {
  .game-hero,
  .panel-intro { align-items: flex-start; flex-direction: column; }
  .access-gate { grid-template-columns: 1fr; }
  .hero-signals { grid-template-columns: repeat(3, auto); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calculator-grid,
  .content-grid,
  .snapshot-viewer { grid-template-columns: 1fr; }
  .snapshot-content { grid-column: auto; }
  .market-heading .inline-actions { width: 100%; }
  .search-field { min-width: 0; flex: 1; }
  .market-history-heading,
  .market-history-toolbar { align-items: stretch; flex-direction: column; }
  .market-history-picker { width: 100%; }
  .market-history-toolbar p { text-align: left; }
}

@media (max-width: 38rem) {
  .site-header,
  .app-shell,
  footer { width: min(100% - 1.25rem, 96rem); }
  .site-header { align-items: flex-start; flex-direction: column; justify-content: center; gap: 0.7rem; padding-block: 1rem; }
  .header-actions { width: 100%; align-items: flex-start; flex-direction: column; gap: 0.5rem; }
  .account-state { padding-left: 0; border-left: 0; }
  .app-shell { padding-top: 1.25rem; }
  .game-rail > .eyebrow { display: none; }
  .game-choice { width: 100%; }
  .hero-signals { grid-template-columns: 1fr; }
  .metric-grid,
  .form-grid,
  .compact-form,
  .benefit-evidence-metrics { grid-template-columns: 1fr; }
  .mage-tower-heading { flex-direction: column; }
  .market-history-metrics { grid-template-columns: 1fr; }
  .inline-actions,
  .lookup-bar,
  .source-strip,
  .player-heading,
  .snapshot-heading,
  footer { align-items: stretch; flex-direction: column; }
  .lookup-bar label { min-width: 0; width: 100%; }
  .search-field { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .button,
  .tabs button,
  .skip-link { transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease; }
}

.collector-key-card { margin-bottom: 1rem; }
.guild-access-card { margin-bottom: 1rem; }
.guild-access-form { margin: 1rem 0; }
#guild-access-status[data-state="full"],
#guild-access-status[data-state="owner"],
#guild-access-tier[data-state="full"] { color: var(--teal); }
#guild-access-status[data-state="limited"],
#guild-access-tier[data-state="limited"] { color: var(--amber); }
#guild-access-status[data-state="unavailable"] { color: var(--red); }

.collector-key-value {
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.95rem;
  word-break: break-all;
}

.client-state {
  margin: 0.75rem 0 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  background: var(--surface-2);
}

/* Suggestions board. Player-authored text: every value is written with textContent,
   so nothing here needs to escape markup at render time. */
.suggestion-form label { display: block; margin-top: 0.75rem; font-weight: 600; }
.suggestion-form input,
.suggestion-form textarea {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line, #2a3b46);
  border-radius: 6px;
  background: var(--surface-2, #0d181d);
  color: inherit;
  font: inherit;
}
.suggestion-form textarea { resize: vertical; min-height: 5rem; }
.suggestion-actions { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.9rem; flex-wrap: wrap; }

.suggestion-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.suggestion-item {
  border: 1px solid var(--line, #2a3b46);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  background: var(--surface-2, #0d181d);
}
.suggestion-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.suggestion-title { font-weight: 700; }
/* Body text is player-written and may contain newlines; preserve them without
   allowing any markup interpretation. */
.suggestion-body { margin: 0.4rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.suggestion-meta { margin: 0.45rem 0 0; opacity: 0.75; font-size: 0.85em; }

.suggestion-status-badge {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.status-open { color: #7fd8c4; }
.status-planned { color: #7fb2ff; }
.status-done { color: #8fe08f; }
.status-declined { color: #ff9d94; }
/* Bug report statuses. Each badge also says its status in words. */
.status-confirmed { color: #ffc86b; }
.status-fixed { color: #8fe08f; }
.status-not_reproducible,
.status-duplicate { color: #9aa7ad; }

.bug-leads { margin-top: 0.5rem; padding: 0.35rem 0.65rem; border-left: 3px solid var(--line, #2a3b46); }
.bug-leads p { margin: 0; }
.bug-leads ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }

.suggestion-controls { display: flex; gap: 0.4rem; margin-top: 0.6rem; flex-wrap: wrap; }
.suggestion-controls button { font-size: 0.85em; padding: 0.25rem 0.6rem; }

/* Confidence tones on measured figures.
   The label already carries the meaning as text, so colour is reinforcement and never
   the only signal - a reader who cannot distinguish these still sees "Measured",
   "Estimated" or "Not enough data" written in the cell. */
td[data-tone="ok"] { color: var(--teal); }
td[data-tone="warn"] { color: var(--amber); }
td[data-tone="muted"] { color: var(--muted); }

/* A statement the reader must not skip past. Used where a table's shape invites a
   conclusion the data does not support - ranked upgrades with times beside them
   reading as a best-upgrade ranking. */
.callout-warning {
  border-left: 3px solid var(--amber);
  padding: 0.6rem 0.85rem;
  background: color-mix(in srgb, var(--amber) 8%, transparent);
  color: var(--text);
}

/* The setup checklist. Shown only while a step is left, so it is the first thing a
   half-set-up player sees, and nothing anyone else ever sees. */
.setup-checklist {
  border-left: 3px solid var(--amber);
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  background: color-mix(in srgb, var(--amber) 8%, transparent);
  color: var(--text);
}
.setup-checklist h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.setup-steps { margin: 0.5rem 0 0; padding-left: 1.3rem; display: grid; gap: 0.5rem; }
.setup-steps li[data-state="done"] { color: var(--muted); }
.setup-steps li[data-state="next"] { font-weight: 600; }
.setup-steps .setup-detail { display: block; font-weight: 400; margin-top: 0.15rem; }
.setup-steps .button { margin-top: 0.35rem; }

.income-rate-card td:nth-child(2),
.income-rate-card td:nth-child(3),
.affordability-card td:nth-child(2),
.affordability-card td:nth-child(3),
.affordability-card td:nth-child(4) {
  /* Figures line up digit by digit, so magnitudes can be compared down the column
     rather than read one at a time. */
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Phones: an affordability row stacks, the upgrade on one line and its steps, cost and time to
   afford under it, each labelled. The table's 35rem minimum put those three columns off the side
   of a 390px screen, reached only by swiping the table (2026-10-07). */
@media (max-width: 38rem) {
  .affordability-card .compact-table table { min-width: 0; }
  .affordability-card thead { display: none; }
  .affordability-card tbody tr {
    display: grid;
    /* The same three tracks in every row, so steps, cost and time line up down the list. */
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border);
  }
  .affordability-card tbody td,
  .affordability-card tbody td:nth-child(n) { padding: 0; border: 0; text-align: left; }
  .affordability-card tbody td.afford-name,
  .affordability-card tbody td[colspan] { grid-column: 1 / -1; padding-bottom: 0.35rem; }
  .affordability-card tbody tr.afford-more td:first-child { display: none; }
  .affordability-card tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 400;
  }
}

/* Data connection: the collector key and the other games across the top, shared by every game, above the
   sub-tabs; the key takes the row when the other-games card is hidden. */
.connection-shared { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.connection-shared > .content-card { flex: 1 1 22rem; margin: 0; }
.connection-shared > .collector-key-card { flex-grow: 2; }
#panel-connection > .connection-records { margin-top: 1rem; }

/* Gatherer pay (Guild > Gatherer pay): the total owed across the top, then a block a gatherer with their
   Mana Dust owed large and a row a resource under it. */
.payroll-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0.9rem 0 1rem; }
.payroll-summary .metric-card { min-height: 0; }
.payroll-summary .metric-card.payroll-total strong { color: var(--teal); }
.payroll-gatherers { display: grid; gap: 0.75rem; }
.payroll-gatherer { padding: 0.85rem 1rem; border: 1px solid var(--border); border-left: 3px solid var(--teal); background: var(--surface); }
.payroll-gatherer-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem; }
.payroll-who { flex: 1 1 12rem; min-width: 0; }
.payroll-who h4 { margin: 0; font-size: 1.05rem; }
.payroll-who small,
.payroll-owed span { display: block; color: var(--muted); font-size: 0.75rem; }
.payroll-who small { margin-top: 0.2rem; }
.payroll-owed { text-align: right; }
.payroll-owed strong {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--teal);
}
.payroll-owed.payroll-ahead strong { color: var(--amber); }
.payroll-seen { color: var(--teal); }
.payroll-unseen { color: var(--amber); }
.payroll-share { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; font-size: 0.8rem; color: var(--text); cursor: pointer; }
.payroll-pay { display: flex; gap: 0.5rem; align-items: center; }
.payroll-pay input { width: 9rem; }
.payroll-workings { margin-top: 0.6rem; color: var(--muted); font-size: 0.85rem; }
.payroll-workings summary { cursor: pointer; }
.payroll-gatherer .table-wrap { margin-top: 0.5rem; }
.payroll-gatherer td.payroll-none { color: var(--muted); }
@media (max-width: 38rem) {
  .payroll-summary { grid-template-columns: 1fr; }
  .payroll-owed { text-align: left; }
  .payroll-pay { flex: 1 1 100%; }
  .payroll-pay input { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* Phones: every table in a .table-wrap (app.js sets data-stack; "off" opts out) shows each row as a block, its title cell across the top and
   every other cell in three columns under its column's name (labelStackedTable in app.js), instead
   of columns off the side of the screen. The roster's Contributing column, the reason the page
   exists, was one of those (2026-10-07). */
@media (max-width: 38rem) {
  .table-wrap table[data-stack]:not([data-stack="off"]) { min-width: 0; }
  table[data-stack]:not([data-stack="off"]) thead { display: none; }
  table[data-stack]:not([data-stack="off"]) tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem 0.75rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border);
  }
  table[data-stack]:not([data-stack="off"]) tbody td,
  table[data-stack]:not([data-stack="off"]) tbody td:nth-child(n),
  table[data-stack]:not([data-stack="off"]) #guild-roster td:nth-child(n) {
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
    /* A long figure or name wraps inside its third of the row rather than pushing it wider. */
    white-space: normal;
    overflow-wrap: anywhere;
  }
  table[data-stack]:not([data-stack="off"]) tbody td.stack-title,
  table[data-stack]:not([data-stack="off"]) tbody td[colspan] { grid-column: 1 / -1; order: -1; }
  table[data-stack]:not([data-stack="off"]) tbody td.stack-title { font-weight: 600; }
  table[data-stack]:not([data-stack="off"]) tbody td.stack-wide { grid-column: span 2; }
  table[data-stack]:not([data-stack="off"]) tbody td.stack-full { grid-column: 1 / -1; }
  /* A cell left empty because the row above already says it (a gatherer's second resource). */
  table[data-stack]:not([data-stack="off"]) tbody td.stack-skip { display: none; }
  table[data-stack]:not([data-stack="off"]) tbody td[data-label]:not(.stack-title)::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 400;
  }
}

/* Crosstrade requests (0.64.4): the offer's terms, each buyer's request with its answers, and the
   form a buyer asks with. */
.trade-terms { margin: 0.35rem 0; color: var(--text); font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.trade-offer > .fine-print { margin: 0.15rem 0; }
.trade-requests { display: grid; gap: 0.35rem; margin: 0.5rem 0; padding-left: 0.75rem; border-left: 2px solid var(--border); }
.trade-request p { margin: 0; font-size: 0.85rem; }
.trade-request .inline-actions { margin-top: 0.25rem; }
.trade-whispers:not(:empty) { margin-top: 0.35rem; padding-left: 0.6rem; border-left: 2px solid var(--border); }
.trade-whispers .trade-whisper { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8rem; overflow-wrap: anywhere; }
.trade-request-state[data-tone="ok"] { color: var(--teal); }
.trade-request-state[data-tone="warn"] { color: var(--amber); }
.trade-request-state[data-tone="muted"] { color: var(--muted); }
.trade-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.6rem;
  margin: 0.7rem 0 0.2rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.trade-ask label { display: grid; gap: 0.2rem; font-size: 0.78rem; flex: 1 1 9rem; }
.trade-ask input, .trade-ask select { min-width: 0; width: 100%; }
.trade-ask .button { flex: 0 0 auto; }
.trade-ask-cost { flex-basis: 100%; margin: 0; }

/* Trading channel. An offer is a card rather than a table row because it carries a
   conversation, and a thread does not fit a cell. */
.trade-offer {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
  background: var(--surface-2);
  padding: 0.85rem 1rem 0.7rem;
}
.trade-offer[data-status="filled"], .trade-offer[data-status="expired"] { border-top-color: var(--border-strong); }
/* Offers side by side on a wide screen, one a row on a phone (the owner, 2026-10-08: "make all of it look nicer"). */
#trade-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
  gap: 0.8rem;
  align-items: start;
}
#trade-list > p { grid-column: 1 / -1; }
/* Current offers' filters: two choices and a switch in a row, stacked on a phone. */
.trade-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem 0.8rem;
  margin: 0.4rem 0 0.8rem;
}
.trade-filters > label:has(select) { flex: 1 1 12rem; max-width: 18rem; }
.trade-filters > label:has(> input[type="checkbox"]) { min-height: 2.75rem; }
.trade-filters > p { flex-basis: 100%; margin: 0; }
.trade-filters > p:empty { display: none; }
.trade-sides {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
}
.trade-side { display: grid; gap: 0.1rem; }
.trade-side small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.trade-side strong { font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.trade-arrow { color: var(--teal); font-size: 1.2rem; }
.trade-offer-actions {
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
}
.trade-report { color: var(--red); border-bottom-color: rgba(255, 116, 108, 0.45); }
/* The links stay a row on a phone, where other button rows stack. */
@media (max-width: 38rem) {
  .trade-offer-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
  .trade-offer-actions > * { width: auto; flex: 0 0 auto; }
}
.trade-offer[data-status="disputed"] { border-left-color: var(--red); }
.trade-offer[data-status="withdrawn"],
.trade-offer[data-status="settled"] { opacity: 0.72; }
.trade-offer-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.trade-status {
  padding: 0.12rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.trade-status[data-tone="ok"] { color: var(--teal); }
.trade-status[data-tone="warn"] { color: var(--amber); }
.trade-status[data-tone="muted"] { color: var(--muted); }
.trade-thread {
  border-left: 2px solid var(--border);
  margin: 0.6rem 0;
  padding-left: 0.75rem;
}
.trade-message { margin: 0.25rem 0; font-size: 0.9rem; }
#trade-form fieldset {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  border: 1px solid var(--border);
  padding: 0.65rem 0.8rem 0.8rem;
  margin: 0;
  background: rgba(255, 255, 255, 0.015);
}
#trade-form legend { padding: 0 0.4rem; color: var(--teal); font-size: 0.78rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
/* Three columns across the card: You sell, Paid in, Price; then Options beside the note; then the
   summary beside the button. One column on a phone. */
#trade-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}
#trade-form .trade-note { grid-column: span 2; }
#trade-form .trade-note { grid-template-rows: auto 1fr; }
#trade-form .trade-note textarea { height: 100%; min-height: 4.5rem; }
.trade-post-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding-top: 0.2rem;
}
.trade-post-foot .button { min-width: 9rem; margin-left: auto; }
@media (max-width: 60rem) { #trade-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } #trade-form .trade-price { grid-column: 1 / -1; } }
@media (max-width: 38rem) {
  #trade-form { grid-template-columns: 1fr; }
  #trade-form .trade-note, #trade-form .trade-price { grid-column: auto; }
  .trade-post-foot .button { width: 100%; }
}
.trade-post-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  margin-bottom: 0.9rem;
}
.trade-post-head h3 { margin: 0.35rem 0 0; }
.trade-warning {
  flex: 1 1 26rem;
  max-width: 46rem;
  margin: 0;
  padding: 0.5rem 0.8rem;
  border-left: 3px solid var(--amber, #e9a23b);
  background: rgba(233, 162, 59, 0.07);
  color: var(--muted);
  font-size: 0.85rem;
}
.trade-warning strong { color: var(--text); }
.trade-help { margin-top: 0.6rem; color: var(--muted); font-size: 0.85rem; }
.trade-help summary { cursor: pointer; color: var(--teal); font-weight: 700; }
.trade-help p { margin: 0.5rem 0 0; }

/* Upgrade ranking. The cheapest row in a stat is marked, because within one stat that
   is a genuine recommendation - unlike any ordering across stats, which is why none is
   shown. */
.ranking-group { margin-bottom: 1.25rem; }
.ranking-group h4 { margin: 0 0 0.15rem; }
.ranking-group tr[data-best="true"] { background: color-mix(in srgb, var(--teal) 10%, transparent); }
.ranking-group tr[data-best="true"] td:first-child::before { content: "★ "; color: var(--teal); }
.ranking-group tr[data-tone="warn"] td:last-child { color: var(--amber); }
.upgrade-ranking-card td:nth-child(n+2) { font-variant-numeric: tabular-nums; text-align: right; }

/* Sub-tabs. Visually subordinate to the main nav so the hierarchy is legible without
   reading the labels - a second row of identical-looking tabs would just read as more
   top-level tabs. */
.subtab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}
.subtab-bar button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  padding: 0.35rem 0.7rem;
}
.subtab-bar button:hover { color: var(--text); }
.subtab-bar button[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--teal);
  box-shadow: inset 0 -2px 0 var(--teal);
}
.subtab-bar button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* The panel-intro inside a sub-panel repeats context the sub-tab already gave, so it
   is quieter than a top-level one. */
.subtab-panel .panel-intro h2 { font-size: 1.25rem; }

/* A menu inside a sub-tab: Calculators and Player upgrades show one part at a time, so a
   reader is not faced with every card at once (the owner, 2026-10-03). Pills, so it does not
   read as a third row of tabs. */
.section-menu {
  border-bottom: 0;
  gap: 0.4rem;
  margin: 1.25rem 0 1rem;
  padding-bottom: 0;
}
.section-menu button {
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.88rem;
  padding: 0.3rem 0.85rem;
}
.section-menu button[aria-selected="true"] {
  background: var(--teal-dark);
  border-color: var(--teal);
  box-shadow: none;
}
/* The affordability table: one row per upgrade, its name over a quiet line of detail, and its
   other step counts opened beneath it. */
.afford-name strong { display: block; }
.afford-name .fine-print { display: block; margin: 0.15rem 0 0; }
.afford-more td { border-top: 0; color: var(--muted); }
.afford-toggle { font-size: 0.82rem; margin-left: 0.4rem; }
/* A section with one card gives it the full width. */
.section-panel > .calculator-grid > :only-child,
.income-rate-card,
.affordability-card { grid-column: 1 / -1; }

/* Guild roster. A non-contributing member is dimmed rather than hidden - the roster
   exists to show who is not participating as much as who is. */
#guild-roster tr[data-contributing="false"] { opacity: 0.68; }
/* Left, as their headers are (the owner's Guild tab, 2026-10-12: right-aligned under left headers read as misplaced). */
#guild-roster td:nth-child(1),
#guild-roster td:nth-child(3) { font-variant-numeric: tabular-nums; text-align: left; }
/* A strip of three cards fills its row on a wide screen; the members strip has three. Narrower, the
   strips' own two- and one-column rules stand. */
@media (min-width: 58.01rem) { .metric-grid.metric-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Three short columns read best close together, not across the whole card. */
.economy-funds { max-width: 46rem; }

/* A claim code is meant to be selected and pasted into a game profile, so it is
   monospaced and given room rather than styled as prose. */
.claim-code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin: 0.6rem 0;
  padding: 0.6rem 0.8rem;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  user-select: all;
}
.claim-card td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }

.system-health [data-health="ok"] { color: var(--positive, #4ade80); }
.system-health [data-health="late"] { color: var(--warning, #fbbf24); }
.system-health [data-health="stopped"] { color: var(--negative, #f87171); }
.health-problem td { background: color-mix(in srgb, currentColor 8%, transparent); }
/* System health (Admin): the status strip, the readers' state words, two-line reader rows on a phone. */
.health-tiles { margin: 0.6rem 0 0.4rem; }
.health-reader-state[data-health="ok"] .health-state-word { color: var(--positive, #4ade80); }
.health-reader-state[data-health="late"] .health-state-word { color: var(--warning, #fbbf24); }
.health-reader-state[data-health="stopped"] .health-state-word { color: var(--negative, #f87171); }
.health-reader-state[data-health="unknown"] .health-state-word { color: var(--muted); }
.health-readers-table .health-reader-due { white-space: nowrap; }
@media (max-width: 640px) {
  /* The table gives up its table width (the wrap's 560 px minimum would push the right column behind a
     scroll) and lays each reader out as two lines: name and state, then the times. */
  .table-wrap.health-readers-wrap table.health-readers-table, .table-wrap.health-readers-wrap table.health-readers-table tbody { display: block; width: 100%; min-width: 0; }
  .health-readers-table thead { display: none; }
  .health-readers-table tr { display: grid; grid-template-columns: 1fr max-content; gap: 0 0.6rem; padding: 0.35rem 0; border-top: 1px solid #141c1f; }
  .health-readers-table td { display: block; padding: 0; border: 0; font-size: 0.84rem; }
  /* Three lines a reader: name and state; when it last wrote; its cadence and when it is next due. */
  .health-readers-table .health-reader-name { order: 0; font-weight: 600; }
  .health-readers-table .health-reader-state { order: 1; text-align: right; }
  .health-readers-table .health-reader-last { order: 2; grid-column: 1 / -1; color: var(--muted); }
  .health-readers-table .health-reader-every { order: 3; color: var(--muted); }
  .health-readers-table .health-reader-every::before { content: "every "; }
  .health-readers-table .health-reader-due { order: 4; text-align: right; color: var(--muted); white-space: normal; }
  .health-readers-table .health-reader-due::before { content: "next "; }
}
.health-group { margin: 0.5rem 0 0.8rem; }
.health-group h5 { margin: 0 0 0.25rem; font-size: 0.9rem; }
.health-group-count { font-weight: 400; color: var(--muted); font-size: 0.8rem; }
.health-more { display: inline; }
.health-more summary { display: inline; cursor: pointer; color: var(--accent, #2dd4bf); text-decoration: underline; }
.health-more[open] summary { display: none; }
.enemy-card { grid-column: 1 / -1; }
.gear-card { grid-column: 1 / -1; }
.enemy-card .enemy-best td { font-weight: 600; }
.enemy-card .enemy-over td { color: var(--muted); }


.access-prompt { margin-block: 1rem; }

/* The Player overview's "In game" board: everything about one character on one screen, laid out
   like the game's own panels (the owner, 2026-10-03: "put all this information on 1 page where you
   can see all of it without scrolling"). Small type, four hand-balanced columns, the game's
   small-caps serif. */
.game-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
.game-toolbar .section-menu { margin: 0; }
.game-toolbar .fine-print { margin: 0; }
.game-picker { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.8rem; }
.game-picker select { padding: 0.2rem 0.4rem; font-size: 0.85rem; }
/* The board takes the whole page width: the one-game rail beside it costs a fifth of the screen. */
/* Profile must be open too: Player overview stays selected inside it while another top tab shows. */
.app-shell:has(#panel-profile:not([hidden]) #panel-player:not([hidden]) #panel-player-game:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
.app-shell:has(#panel-profile:not([hidden]) #panel-player:not([hidden]) #panel-player-game:not([hidden])) .game-rail { display: none; }
.game-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 0.5rem;
  align-items: start;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.74rem;
  line-height: 1.3;
}
.game-board > .fine-print { grid-column: 1 / -1; }
.game-column { display: grid; gap: 0.5rem; min-width: 0; }
.game-panel {
  min-width: 0;
  padding: 0.4rem 0.55rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #050607;
}
.game-panel h3 {
  margin: 0 0 0.3rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 0.84rem;
  font-variant: small-caps;
  letter-spacing: 0.03em;
}
.game-character h3 { color: #c9a5ff; }
.game-rows { display: grid; gap: 0.08rem; margin: 0; }
.game-rows.two { grid-template-columns: 1fr 1fr; column-gap: 0.7rem; }
.game-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.4rem; min-width: 0; }
.game-row dt { color: var(--muted); font-variant: small-caps; }
.game-row dd { margin: 0; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.game-row dd small { color: var(--muted); font-size: 0.92em; }
.game-row[data-tone="warn"] dd { color: var(--amber); }
.game-mini-bar { flex-basis: 100%; height: 3px; overflow: hidden; border-radius: 2px; background: #1d2a2e; }
.game-mini-bar span { display: block; height: 100%; background: var(--teal); }
.game-bar { position: relative; height: 1.05rem; margin-bottom: 0.2rem; overflow: hidden; border-radius: 2px; background: #1d2a2e; }
.game-bar-fill { position: absolute; inset: 0 auto 0 0; background: #17c45a; }
.game-bar[data-tone="mana"] .game-bar-fill { background: #2f7cf6; }
.game-bar[data-tone="enemy"] .game-bar-fill { background: #8a3b3b; }
.game-bar small { position: relative; padding-left: 0.35rem; color: #fff; font-size: 0.68rem; line-height: 1.05rem; text-shadow: 0 1px 1px #000; }
.game-line { margin: 0.1rem 0; }
.game-line[data-tone="good"] { color: #3ddc6f; }
.game-line[data-tone="bad"] { color: var(--red); }
.game-line[data-tone="loot"] { color: var(--amber); }
.game-fight .game-rows { margin-top: 0.25rem; }
.game-chips { display: flex; flex-wrap: wrap; gap: 0.15rem; }
.game-chip { padding: 0 0.25rem; border: 1px solid var(--border); border-radius: 3px; font-size: 0.68rem; font-variant: small-caps; }
.game-item { padding: 0.12rem 0; border-top: 1px solid #141c1f; }
.game-panel h3 + .game-item { border-top: 0; }
.game-item-head { display: flex; align-items: baseline; gap: 0.35rem; min-width: 0; margin: 0; }
.game-slot { flex: 0 0 2.6rem; color: var(--muted); font-variant: small-caps; }
.game-item-name { min-width: 0; overflow: hidden; font-variant: small-caps; text-overflow: ellipsis; white-space: nowrap; }
.game-item-name[data-rarity="1"] { color: #c9c9c9; }
.game-item-name[data-rarity="2"] { color: #3ecf5a; }
.game-item-name[data-rarity="3"] { color: #4a90ff; }
.game-item-name[data-rarity="4"] { color: #b062ff; }
.game-item-name[data-rarity="5"] { color: #ff9a1f; }
.game-item-name[data-rarity="6"] { color: #e6c34a; }
.game-item-name[data-rarity="7"] { color: #ff4b4b; }
/* An item's tooltip, as the game draws it (the owner, 2026-10-09: "make hover over equipment"): on
   hover, or on a tap or keyboard focus. It opens to the item's left, since Equipment is the board's
   last column; on a narrow screen, where the columns stack, it opens under the item instead. */
.game-item { position: relative; border-radius: 2px; }
.game-item:focus-visible { outline: 1px solid var(--teal); outline-offset: 1px; }
.game-tooltip {
  display: none;
  position: absolute;
  z-index: 30;
  top: 0;
  right: calc(100% + 0.5rem);
  width: 22rem;
  max-width: calc(100vw - 2rem);
  padding: 0.55rem 0.7rem 0.5rem;
  border: 1px solid #5a5a5a;
  background: #0b0b0c;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
  color: #e8e8e8;
  font-size: 0.8rem;
  line-height: 1.35;
  pointer-events: none;
}
.game-item:hover .game-tooltip, .game-item:focus .game-tooltip, .game-item:focus-within .game-tooltip { display: block; }
.game-item[data-tip-side="right"] .game-tooltip { right: auto; left: calc(100% + 0.5rem); }
.game-tooltip p { margin: 0; }
.game-tooltip-title { font-weight: 700; font-size: 0.88rem; font-variant: small-caps; letter-spacing: 0.02em; }
.game-tooltip-title[data-rarity="1"] { color: #c9c9c9; }
.game-tooltip-title[data-rarity="2"] { color: #3ecf5a; }
.game-tooltip-title[data-rarity="3"] { color: #4a90ff; }
.game-tooltip-title[data-rarity="4"] { color: #b062ff; }
.game-tooltip-title[data-rarity="5"] { color: #ff9a1f; }
.game-tooltip-title[data-rarity="6"] { color: #e6c34a; }
.game-tooltip-title[data-rarity="7"] { color: #ff4b4b; }
.game-tooltip-kind {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.2rem 0 0.35rem !important;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #333;
  font-variant: small-caps;
}
.game-tooltip-lines { margin: 0; }
.game-tooltip-lines > div { display: flex; justify-content: space-between; gap: 1rem; }
.game-tooltip-lines dt { font-variant: small-caps; font-weight: 600; }
.game-tooltip-lines dd { margin: 0; font-variant-numeric: tabular-nums; }
.game-tooltip-lines > div[data-tone="enchant"] { color: #3ecf5a; }
.game-tooltip-prefix { margin-top: 0.35rem !important; color: #3ecf5a; font-variant: small-caps; line-height: 1.3; }
.game-tooltip-foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.4rem !important; padding-top: 0.3rem; border-top: 1px solid #333; font-variant: small-caps; }
@media (max-width: 60rem) {
  .game-tooltip { position: static; width: auto; max-width: none; margin-top: 0.35rem; box-shadow: none; }
}
.game-item-stats { margin: 0 0 0 2.95rem; color: var(--muted); font-size: 0.65rem; }
.game-note { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.64rem; }
@media (max-width: 38rem) {
  .game-board,
  .game-rows.two { grid-template-columns: 1fr; }
}

/* Admin: the summary line and Refresh sit above the sections, so they serve every one. */
.admin-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.admin-toolbar .fine-print { margin: 0; }

/* System health findings: a warning is something to act on, information is not. */
.health-findings { margin: 0.4rem 0 1rem; font-size: 0.86rem; }
.health-findings ul { display: grid; gap: 0.3rem; margin: 0; padding-left: 1.1rem; }
.health-findings li[data-severity="warn"] { color: var(--amber); }
.health-findings li[data-severity="info"] { color: var(--muted); }

/* Next actions: each action ends with its own divider and its "Why" sits under it, rather than
   above the next action's border where it read as the next one's (screenshot, 2026-10-04). */
.next-action-list { margin: 0.5rem 0 0; padding-left: 1.4rem; }
.next-action-order { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0.25rem; }
.next-action-order button[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: var(--surface-2); }
.next-action .next-action-strength { color: var(--teal); }
.next-action { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.next-action .planning-summary { margin: 0.15rem 0; }
.next-action small { display: block; color: var(--muted); }
.next-action .planner-details { margin-top: 0.2rem; padding-top: 0; border-top: 0; }
.next-action .planner-details summary { font-size: 0.85rem; font-weight: 600; }
.next-action-more { margin-top: 0.6rem; }

/* A result that is sentences rather than one figure reads at body size: the enemy calculator's
   three sentences took 520 pixels at the figure size (Chromium, 2026-10-04). */
.enemy-card .calculator-result,
.gear-card .calculator-result,
.refinery-card .calculator-result { font-size: 1rem; line-height: 1.5; }
.enemy-card .calculator-result p,
.gear-card .calculator-result p { margin: 0 0 0.4rem; }

/* Player upgrades and other sub-tabs: the introduction, the name bar and the number tiles took
   about 430 pixels before the first action (Chromium, 2026-10-04). Tiles hold one figure each, so
   they no longer reserve 8rem. */
.subtab-panel .panel-intro { gap: 1rem; margin-bottom: 0.75rem; }
.subtab-panel .panel-intro > p { font-size: 0.85rem; }
.mini-metric { min-height: 0; padding: 0.6rem 0.85rem; }
.mini-metric small { margin-top: 0.3rem; }
.player-dashboard { gap: 0.6rem; }

/* A locked account reads as locked at a glance. */
#admin-players tr[data-locked="true"] td { color: var(--red); }
.admin-lock { margin-left: 0.5rem; }

/* Two-factor sign-in, the Terms and the recovery codes (2026-10-04). */
.login-step-title { margin: 0; font-size: 1.1rem; }
.check-label { display: flex; gap: 0.5rem; align-items: center; font-size: 0.85rem; }
.check-label input { width: auto; }
.setup-key {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.08em;
  word-break: break-all;
  user-select: all;
}
.recovery-code-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-left: 2rem;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  user-select: all;
}
.qr-holder:empty { display: none; }
.qr-code { display: block; width: min(13rem, 100%); height: auto; margin-block: 0.4rem; }
.account-history { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; font-size: 0.85rem; }
.account-history li[data-warning="true"] { color: var(--amber); }
.admin-account-detail { display: block; color: var(--muted); font-size: 0.72rem; }
footer a { color: inherit; }
.terms-page { width: min(48rem, calc(100% - 2rem)); margin: 2rem auto 4rem; line-height: 1.6; }
.terms-page h2 { margin-top: 2rem; font-size: 1.1rem; }
.terms-page li { margin-block: 0.35rem; }

/* ---- The signed-in workspace at the In game board's density ---------------------------------
   The owner, 2026-10-05: "resize everything make sure it all looks great i love what you did
   with in-game". Every tab uses the whole width, as the board does, with smaller headings,
   tight table rows and small controls. The sign-in pages keep their large type. Account, Suggestions, Bugs and
   Admin sit beside #protected-workspace rather than in it, hence the second selector. `:where()`
   keeps these rules as weak as the ones they replace, so the board's own rules still win. */
.app-shell:has(#protected-workspace:not([hidden])) { grid-template-columns: minmax(0, 1fr); padding-block: 1.25rem 2.5rem; }
.app-shell:has(#protected-workspace:not([hidden])) .game-rail { display: none; }
:where(#protected-workspace, .game-workspace > .tab-panel) h2 { font-size: 1.3rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) h3 { font-size: 1.05rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) .tabs button { min-height: 2.6rem; padding: 0.45rem 0.9rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) .tab-panel { padding-top: 0.6rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) .panel-intro { gap: 1.25rem; margin-bottom: 0.7rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) .panel-intro > p { max-width: 42rem; font-size: 0.8rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) .content-grid { gap: 0.75rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) .content-card { padding: 0.85rem 1rem; box-shadow: none; }
:where(#protected-workspace, .game-workspace > .tab-panel) .content-card h2,
:where(#protected-workspace, .game-workspace > .tab-panel) .content-card h3 { margin-bottom: 0.4rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) .content-card > p:not(.eyebrow) { margin-bottom: 0.5rem; font-size: 0.84rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) .content-card .evidence-tag { margin-bottom: 0.5rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) .evidence-tag { padding: 0.15rem 0.4rem; font-size: 0.62rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) .metric-card,
:where(#protected-workspace, .game-workspace > .tab-panel) .mini-metric { min-height: 0; padding: 0.55rem 0.75rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) .metric-card small,
:where(#protected-workspace, .game-workspace > .tab-panel) .mini-metric small { margin-top: 0.3rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) .metric-card strong,
:where(#protected-workspace, .game-workspace > .tab-panel) .mini-metric strong { font-size: 1.05rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) .form-grid { gap: 0.45rem 0.7rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) label { gap: 0.2rem; font-size: 0.72rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) input,
:where(#protected-workspace, .game-workspace > .tab-panel) select,
:where(#protected-workspace, .game-workspace > .tab-panel) textarea { min-height: 2rem; padding: 0.25rem 0.5rem; font-size: 0.84rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) .button { min-height: 2rem; padding: 0.25rem 0.75rem; font-size: 0.84rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) table { font-size: 0.8rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) th,
:where(#protected-workspace, .game-workspace > .tab-panel) td { padding: 0.28rem 0.55rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) th { font-size: 0.64rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) .calculator-result { min-height: 0; margin-top: 0.6rem; padding: 0.55rem 0.8rem; font-size: 1rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) .result-list { margin-top: 0.6rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) .result-list > div { padding: 0.3rem 0; }
:where(#protected-workspace, .game-workspace > .tab-panel) .fine-print { margin-top: 0.45rem; font-size: 0.74rem; }
:where(#protected-workspace, .game-workspace > .tab-panel) .section-menu { margin: 0.6rem 0; }
:where(#protected-workspace, .game-workspace > .tab-panel) .section-menu button { min-height: 0; padding: 0.2rem 0.75rem; font-size: 0.8rem; }

/* Lists of label and value in a card: one quiet row each, as on the In game board. */
.stat-list { display: grid; margin: 0.6rem 0 0; border-top: 1px solid var(--border); font-size: 0.86rem; }
.stat-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px solid var(--border); }
.stat-list dt { color: var(--muted); }
.stat-list dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-align: right; }
/* Balances, laid out like the game's inventory. */
.ledger-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 1.5rem; margin: 0.5rem 0 0; font-size: 0.8rem; }
.ledger-grid > div { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.18rem 0; border-bottom: 1px solid var(--border); }
.ledger-grid > div[data-empty="true"] { opacity: 0.45; }
.ledger-grid dt { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.ledger-grid dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-align: right; white-space: nowrap; }
.ledger-grid small[data-trend="up"] { color: var(--teal); }
.ledger-grid small[data-trend="down"] { color: var(--red); }
/* "Show all" under a table that starts short. */
tr.start-short-toggle td { padding-block: 0.35rem; text-align: center; }
tr.start-short-toggle:hover { background: transparent; }
/* A form's button sits on its inputs' line, not stretched to the row. */
:where(#protected-workspace, .game-workspace > .tab-panel) .form-grid > .button,
:where(#protected-workspace, .game-workspace > .tab-panel) .form-grid > button { align-self: end; }
/* The price chart is drawn at its shown width (renderLiveMarketHistory), so no stretching. */
.market-history-chart,
.market-history-chart > p,
.market-history-chart svg { min-height: 0; }
.market-history-chart > p { min-height: 12rem; }
/* Stat costs: one small table per stat, side by side. */
#ranking-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(30rem, 100%), 1fr)); gap: 0.4rem 1rem; }
#ranking-groups > :not(.ranking-group) { grid-column: 1 / -1; }
#ranking-groups .ranking-group h4 { margin: 0.4rem 0 0.1rem; }
#ranking-groups .ranking-group .fine-print { margin: 0 0 0.25rem; }
/* Check boxes keep their own size, beside their words. */
input[type="checkbox"],
input[type="radio"] { width: auto; min-height: 0; padding: 0; accent-color: var(--teal); }
label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 0.4rem; }
/* Player upgrades' header on one row: the character box, then the profile's name beside its four
   figures. It took about 260 px above every sub-tab (2026-10-05). */
:where(#protected-workspace) #panel-upgrades .lookup-bar { margin-bottom: 0.5rem; padding: 0.45rem 0.75rem; }
#player-content.player-dashboard:has(> .player-heading) { grid-template-columns: minmax(13rem, 0.3fr) minmax(0, 1fr); align-items: stretch; }
#player-content.player-dashboard > :not(.player-heading):not(.player-metrics) { grid-column: 1 / -1; }
#player-content .player-heading { padding: 0.5rem 0.8rem; }
#player-content .player-heading .eyebrow { margin-bottom: 0.15rem; font-size: 0.62rem; }
#player-content .player-metrics .metric-card { padding: 0.4rem 0.7rem; }
@media (max-width: 60rem) {
  #player-content.player-dashboard:has(> .player-heading) { grid-template-columns: minmax(0, 1fr); }
}
/* While the setup checklist is showing, it is the one thing to do: the calculator prompt beneath
   it said the same in other words, on every tab (seen as a new account, 2026-10-05). */
#protected-workspace:has(#setup-checklist:not([hidden])) #access-prompt { display: none; }

/* The game picker in the workspace header (the owner, 2026-10-07: the platform is for more games
   than Manarion, and the signed-in view had lost the way to choose one when the Games rail was
   hidden for density in 0.62.0). It reads as part of the eyebrow line and takes no room from the
   tabs; the list comes from /api/games, so a new game appears when the server knows it. */
.game-switch label { display: inline-flex; align-items: baseline; gap: 0.15rem; vertical-align: baseline; }
.game-switch select {
  display: inline-block;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  line-height: inherit;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--teal);
  border-radius: 0;
  padding: 0 0.1rem;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.game-switch label::after { content: " \25BE"; }
.game-switch select:focus { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Account, Notifications: the Discord line, then its buttons, spaced when they wrap on a phone. */
.account-discord {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.account-discord > p { flex-basis: 100%; margin-bottom: 0.25rem; }
/* A linked Discord account outside the Hub's server: the bot cannot message it. */
#account-discord-state.account-discord-away { color: var(--amber); }

/* Account, Notifications: each notice, then its Email and Discord switches (rule 24). */
.notice-choice {
  border-top: 1px solid var(--line, #2a3b46);
  padding: 0.5rem 0;
}
.notice-choice p {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
}
.notice-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}
.notice-channel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.notice-channel small {
  margin-left: 0.2rem;
}

/* The Auto Sync bookmark address: one long line, shown whole, never styled as a link. */
.phone-bookmark {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
  color: var(--text, #effaf8);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(32, 205, 185, 0.4);
  padding: 8px;
}

/* A claim code on a phone: large, one tap selects all of it, and a Copy button beside it. */
.claim-code-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0.6rem 0;
}
.claim-code-row .claim-code {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}
.claim-code-row .fine-print { flex-basis: 100%; margin: 0; }
.claim-list-code td { padding-top: 0; border-top: 0; }

/* Crosstrade, Post an offer: You sell and Paid in side by side, three fields each, then the Price across
   both: the rate on one line and the total price beside it, worked out, as a result rather than a box
   to type in (the owner, 2026-10-08: "make this look nicer"). */
.trade-price-grid {
  display: grid;
  gap: 0.55rem;
}
.trade-field {
  display: grid;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.trade-rate-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
}
.trade-rate-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 9rem;
}
.trade-rate-pair input { flex: 1 1 4.5rem; min-width: 4.5rem; }
.trade-unit {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}
.trade-per { color: var(--muted); font-size: 0.82rem; font-weight: 600; }
.trade-total {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  background: var(--surface-2);
  color: var(--teal);
  font-size: 1.05rem;
  font-weight: 750;
}
.trade-total[data-empty] { border-left-color: var(--border-strong); color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.trade-rate-summary { margin: 0; color: var(--muted); font-size: 0.88rem; }
/* What the week's offers and trades say the chosen pair goes for, under the rate. */
.trade-going-rate { margin: 0.55rem 0 0; }
/* Post an offer: the owner's referral link under a game the reader has not said they play. */
.trade-game-invite { display: block; margin: -0.2rem 0 0.2rem; font-size: 0.78rem; color: var(--teal); }
/* Your trades: the game's command for a Lyrania side, ready to copy (rule 25). */
.trade-wire { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-top: 0.45rem; }
.trade-wire code { padding: 0.3rem 0.45rem; border: 1px solid var(--border-strong); background: var(--surface); font-size: 0.82rem; overflow-wrap: anywhere; user-select: all; }
.trade-wire .button { min-height: 2rem; padding: 0.25rem 0.7rem; }
.trade-wire small:empty { display: none; }
.trade-leg-exact { display: block; margin-top: 0.4rem; color: var(--muted); }
.trade-going-rate:empty { display: none; }
.trade-rate-summary:empty { display: none; }

/* Crosstrade, Moderation: each dispute, report and ban as a card, in the offers' grid, under small
   headings; a dispute marked red, a report amber. */
.trade-moderation h4 {
  margin: 1.1rem 0 0.45rem;
  color: var(--teal);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.trade-moderation > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
  gap: 0.6rem;
}
.trade-moderation > div > .trade-request {
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  background: var(--surface-2);
  padding: 0.6rem 0.75rem;
}
#trade-moderation-disputes > .trade-request { border-left-color: var(--red); }
#trade-moderation-bans > .trade-request { border-left-color: var(--border-strong); }
.trade-moderation > div > .fine-print { grid-column: 1 / -1; margin: 0; }
.trade-moderation .trade-request .inline-actions { margin-top: 0.45rem; }
#trade-moderation-status { color: var(--text); font-weight: 650; }
/* Moderation, Look up a player: the name and a button in a row, then each player found as a full-width card. */
.trade-lookup { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 0.7rem; }
.trade-lookup > label { flex: 1 1 16rem; max-width: 26rem; }
#trade-lookup-results { margin-top: 0.6rem; }
#trade-lookup-results > .trade-lookup-player {
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  background: var(--surface-2);
  padding: 0.7rem 0.85rem;
}
.trade-lookup-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.trade-lookup-head h5 { margin: 0; font-size: 1rem; }
.trade-lookup-tag { border: 1px solid var(--border-strong); padding: 0.05rem 0.45rem; font-size: 0.72rem; font-weight: 700; }
.trade-lookup-tag.banned { border-color: var(--red); color: var(--red); }
.trade-lookup-player h6 { margin: 0.8rem 0 0.35rem; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; }
.trade-lookup-player p { margin: 0.3rem 0; }
.trade-lookup-offer { border-top: 1px solid var(--border); padding-top: 0.4rem; margin-top: 0.4rem; }
.trade-lookup-offer > .trade-request { margin: 0.35rem 0 0 0.8rem; padding-left: 0.6rem; border-left: 2px solid var(--border-strong); }
.trade-lookup-player > .trade-request { margin: 0.35rem 0; padding-left: 0.6rem; border-left: 2px solid var(--border-strong); }
.trade-funds { color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.trade-funds:empty { display: none; }
.trade-funds[data-tone="warn"] { color: var(--amber); }
.trade-discord-join { align-self: center; font-size: 0.85rem; color: var(--teal); }

/* The Overview: your Hub at a glance. Characters beside the best next upgrade, then Crosstrade, the
   guild and notifications; one column on a phone. */
.overview-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 0.8rem;
}
#overview-next { grid-column: span 2; }
.overview-card { display: flex; flex-direction: column; gap: 0.35rem; }
.overview-card > .evidence-tag { align-self: flex-start; }
.overview-card h3 { margin: 0.25rem 0 0; font-size: 1.05rem; }
.overview-card > .text-button, .overview-actions { margin-top: auto; align-self: flex-start; }
.overview-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.overview-detail { margin: 0; color: var(--muted); font-size: 0.86rem; }
#overview-next-title { color: var(--teal); }
.overview-rows { display: grid; gap: 0.3rem; margin: 0.2rem 0 0.4rem; }
.overview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 0.6rem;
  padding: 0.35rem 0.5rem;
  border-left: 3px solid var(--teal);
  background: var(--surface-2);
  font-size: 0.86rem;
}
.overview-row[data-tone="warn"] { border-left-color: var(--amber); }
.overview-row small { grid-column: 1 / -1; color: var(--muted); font-size: 0.75rem; }
.overview-row small:empty { display: none; }
.overview-about { margin-top: 1rem; }
.overview-about > summary { cursor: pointer; color: var(--teal); font-weight: 700; }
.overview-about .overview-grid { margin-top: 0.7rem; }
@media (max-width: 60rem) { .overview-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) {
  .overview-board { grid-template-columns: 1fr; }
  #overview-next { grid-column: auto; }
  /* The four status tiles two by two, not a screen of their own. */
  #panel-overview .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.overview-buy { color: var(--text); }
.overview-buy:empty { display: none; }

/* Crosstrade, Your trades: each deal a card in the offers' grid, its two sides as panels, what has
   arrived marked teal and what has not amber. */
.trade-mine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.trade-legs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.trade-leg {
  display: grid;
  gap: 0.25rem;
  align-content: start;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  background: var(--surface);
}
.trade-leg[data-done="yes"] { border-left-color: var(--teal); }
.trade-leg-head { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.trade-leg-head small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.trade-leg-state { font-size: 0.75rem; font-weight: 700; color: var(--amber); }
.trade-leg[data-done="yes"] .trade-leg-state { color: var(--teal); }
.trade-leg strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.trade-leg-where { color: var(--text); font-size: 0.85rem; }
.trade-leg-when { color: var(--muted); font-size: 0.75rem; }
.trade-leg .button { justify-self: start; margin-top: 0.3rem; }
@media (max-width: 38rem) { .trade-legs { grid-template-columns: 1fr; } }
.manarion-invite a, a.manarion-invite { color: var(--teal); }

/* Which games a player plays: the sign-up question and the "do you play these too?" card. */
.signup-games { border: 1px solid var(--border); padding: 0.5rem 0.75rem 0.25rem; margin: 0.25rem 0; }
.signup-games legend { font-size: 0.9rem; color: var(--muted); padding: 0 0.25rem; }
.signup-games .check-label { display: inline-flex; margin: 0 0.9rem 0.4rem 0; }
.other-games { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.other-games li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--border); }
.other-games li:first-child { border-top: 0; }
.other-games .game-name { font-weight: 700; min-width: 6rem; }
.other-games .game-answer { color: var(--muted); }
.other-games .game-answers { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; }
.other-games a { color: var(--teal); }


/* Data connection (the owner, 2026-10-09: "make the data connection page look nicer"): the three setup
   steps in a wide main column, the guild key, games and who sees what in a side column, the records
   folded at the end. One column below 75rem. */
.connection-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
  gap: 0.9rem;
  align-items: start;
}
.connection-main, .connection-side { display: grid; gap: 0.9rem; min-width: 0; }
.connection-main > .content-card, .connection-side > .content-card { margin: 0; }
@media (max-width: 75rem) { .connection-layout { grid-template-columns: minmax(0, 1fr); } }
.connection-step {
  display: inline-grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  margin-right: 0.35rem;
  border: 1px solid var(--teal);
  border-radius: 50%;
  color: var(--teal);
  font-size: 0.85rem;
  font-weight: 700;
  vertical-align: 0.1rem;
}
.connection-lyrania-link { margin-top: 0.6rem; }
.connection-lyrania-link .text-button { padding: 0; color: var(--teal); text-decoration: underline; }
.connection-side h3 small { color: var(--muted); font-size: 0.75rem; font-weight: 600; margin-left: 0.35rem; }
.connection-side .compact-form, .connection-side .guild-access-form { grid-template-columns: 1fr; }
/* The scripts: one game at a time, picked here. */
.scripts-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.scripts-head h3 { margin: 0; }
.scripts-game { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.scripts-game select { width: auto; min-width: 10rem; }
.script-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.6rem; align-items: start; }
@media (max-width: 40rem) { .script-steps { grid-template-columns: minmax(0, 1fr); } }
.script-steps[hidden] { display: none; }
.script-steps > .fine-print { grid-column: 1 / -1; margin: 0; }
.script-step { border: 1px solid var(--border); background: var(--surface-2); padding: 0.7rem 0.8rem; }
.script-step h3, .script-step h4 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.script-step p { margin: 0 0 0.5rem; font-size: 0.85rem; line-height: 1.45; }
.script-step .button { margin-top: 0.15rem; }
.script-step .step-number { display: inline; margin: 0 0.4rem 0 0; color: var(--teal); }
.script-step-main { border-left: 3px solid var(--teal); }
.script-phone { grid-column: 1 / -1; }
.script-phone > summary, .phone-bookmark-address > summary, .sharing-more > summary, .connection-records > summary { cursor: pointer; font-weight: 650; }
.script-phone[open] > summary { margin-bottom: 0.5rem; }
.phone-bookmark-address { margin: 0.4rem 0; }
.phone-bookmark-address > summary { font-weight: 500; color: var(--muted); font-size: 0.85rem; }
/* Who sees what: a short summary, the full rules a click away. */
.sharing-card { border-left: 3px solid var(--amber); }
.sharing-card > p { margin: 0 0 0.4rem; }
.sharing-more > p { font-size: 0.85rem; margin: 0.45rem 0 0; }
/* The records, folded: most players never open them. */
.connection-records { margin-top: 0.9rem; }
.connection-records[open] > summary { margin-bottom: 0.7rem; }
.connection-records > section + section { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.other-games-card .other-games li { padding: 0.35rem 0; }

/* Your scripts' status on a phone: one entry in two lines, the character and its script, then the
   status, the installed version and when it was last seen (it was six labelled lines an entry, nine
   characters two phone screens). The Hub's version is the same for everyone, so it is left out. */
@media (max-width: 40rem) {
  .collector-status-table table { min-width: 0; }
  .collector-status-table thead { display: none; }
  .collector-status-table tbody tr {
    display: grid;
    grid-template-columns: 7.4rem auto minmax(0, 1fr);
    grid-template-areas: "name script script" "status installed seen";
    align-items: center;
    gap: 0.2rem 0.6rem;
    padding: 0.45rem 0.1rem;
    border-bottom: 1px solid var(--border);
  }
  .collector-status-table tbody td { display: block; padding: 0; border: 0; font-size: 0.82rem; }
  .collector-status-table tbody td:nth-child(1) { grid-area: name; font-weight: 650; overflow-wrap: anywhere; }
  .collector-status-table tbody td:nth-child(2) { grid-area: script; color: var(--muted); }
  .collector-status-table tbody td:nth-child(3) { grid-area: installed; font-variant-numeric: tabular-nums; }
  .collector-status-table tbody td:nth-child(4) { display: none; }
  .collector-status-table tbody td:nth-child(5) { grid-area: status; white-space: nowrap; }
  .collector-status-table tbody td:nth-child(6) { grid-area: seen; color: var(--muted); text-align: right; font-size: 0.75rem; }
  .collector-status-table tbody td[colspan] { grid-column: 1 / -1; grid-area: auto; }
}

/* Data connection on a phone: the guild card says one thing while it loads, and each game in "Do you
   play these too?" is its name, then its three answers on one line (they wrapped to two). */
#guild-access-note:empty { display: none; }
@media (max-width: 40rem) {
  .other-games li { gap: 0.3rem 0.4rem; }
  .other-games .game-name { flex-basis: 100%; }
  .other-games li .button { min-height: 2.1rem; padding: 0.25rem 0.55rem; font-size: 0.78rem; }
}

/* Data connection: a step already done says so beside its title. */
.connection-state {
  margin-left: 0.45rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--teal);
  color: var(--teal);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: 0.15rem;
  white-space: nowrap;
}

/* Your trades: the name to send to, ready to copy (rule 25). */
.trade-copy-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-top: 0.45rem; }
.trade-copy-name .button { min-height: 2rem; padding: 0.25rem 0.7rem; }
.trade-copy-name small:empty { display: none; }

/* ---- Polish (2026-10-12, the owner: "make all the tabs on the website look nicer") ------------
   Style only, on the shared classes: nothing here changes an id, a class a script sets or reads, the
   phone stacking, or the text. Corners are softened a little, cards get a faint top light and depth,
   long tables get row banding and a firmer header, the chosen tab and the focused field show more
   clearly, and the phone header fits in two lines rather than three. The In game board keeps its own
   rules, which are more specific than these. */
:root {
  --radius: 0.45rem;
  --radius-small: 0.3rem;
  --focus-ring: 0 0 0 3px rgb(47 209 189 / 22%);
  --card-light: rgb(255 255 255 / 3.5%);
  --row-band: rgb(255 255 255 / 2.2%);
}
.content-card,
.metric-grid,
.login-form,
.login-alternative,
.lookup-bar,
.player-heading,
.snapshot-heading,
.planner-status,
.affordability-result,
.calculator-result,
.market-history-card,
.table-wrap,
.access-gate {
  border-radius: var(--radius);
}
.content-card {
  background: linear-gradient(180deg, var(--card-light), transparent 3.5rem) var(--surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%), 0 1px 2px rgb(0 0 0 / 35%);
}
.metric-grid { overflow: hidden; }
.metric-card,
.mini-metric { background: linear-gradient(180deg, var(--card-light), transparent 2.5rem) var(--surface); }
.identity-mark,
.game-glyph,
.evidence-tag,
.module-badge,
.empty-icon { border-radius: var(--radius-small); }
.button,
input,
select,
textarea,
.section-menu button,
.text-button { border-radius: var(--radius-small); }
.button { transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; }
.button:not(:disabled):hover { box-shadow: 0 2px 10px rgb(47 209 189 / 25%); }
.button.secondary:not(:disabled):hover { background: rgb(47 209 189 / 10%); }
.button.danger:not(:disabled):hover { background: rgb(255 116 108 / 10%); box-shadow: none; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible { border-color: var(--teal); box-shadow: var(--focus-ring); outline: none; }
/* Tables: a firmer header line and row banding for the long ones. On a phone the banding follows
   the stacked rows, so each member or item stands apart from the next. The banding is weaker than
   any row's own colour (a selected monster, a group heading, a marked cheapest row), so those win. */
th { border-bottom: 1px solid var(--border-strong); }
:where(tbody tr:nth-child(even)) { background: var(--row-band); }
tr.start-short-toggle,
tr.start-short-toggle:hover { background: transparent; }
/* The chosen tab and sub-tab: a soft fill under the teal line, so the place in the hierarchy is
   read at a glance rather than from the underline alone. */
.tabs button {
  border-radius: var(--radius-small) var(--radius-small) 0 0;
  transition: color 120ms ease, background-color 120ms ease;
}
.tabs button:hover { background: rgb(255 255 255 / 3%); }
.tabs button[aria-selected="true"] { background: rgb(47 209 189 / 8%); }
.subtab-bar button { border-radius: var(--radius-small) var(--radius-small) 0 0; }
.subtab-bar button[aria-selected="true"] { background: rgb(47 209 189 / 7%); }
.section-menu button[aria-selected="true"] { box-shadow: 0 0 0 1px rgb(47 209 189 / 25%); }
/* Links in a card's foot ("All next actions", "Members"): teal on hover, so they read as the way on. */
.content-card a:not(.button):hover { color: var(--teal); }
/* The service dot breathes once a second while the server is being checked, and sits still after. */
.service-state[data-state="online"] .state-dot { box-shadow: 0 0 0 3px rgb(47 209 189 / 18%); }
/* Phones: the header in two lines, the identity on the first and the state and account sharing the
   second, so the content starts about a line higher on every tab. */
@media (max-width: 38rem) {
  .site-header { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding-block: 0.6rem; }
  .identity strong { font-size: 1.15rem; }
  .identity-mark { width: 2.3rem; height: 2.3rem; font-size: 1.15rem; }
  .header-actions { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.35rem 1rem; }
  /* The tab bars scroll sideways on a phone; the right edge fades, so a cut-off name says there is more. */
  .tabs { mask-image: linear-gradient(90deg, #000 calc(100% - 2.75rem), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.75rem), transparent); }
  .service-state,
  .account-state { font-size: 0.78rem; }
  .app-shell { padding-top: 0.9rem; }
}