/* SnS player site theme — "SnS Command" dark sci-fi command-console design system.
   Ported from packages/gm-app/views/assets/app.css (Plan 6) so the player-facing site and the
   GM app share one visual language. This file targets a server-rendered, Bootstrap-based
   multi-page site (not the GM app's Alpine SPA shell) — mobile-first is a hard requirement here
   (players are expected to use this from a phone at the table), so base rules target a 375px
   viewport and larger breakpoints are additive `min-width` enhancements only.

   Every existing --sns-* custom property NAME used by templates is kept; values are refined to
   match the app's token system and new tokens/component classes are added alongside. Bootstrap's
   base classes (card, btn, badge, table, form-control, list-group, nav-pills, progress, alert…)
   remain in the markup throughout — this file recolors/reweights them to the design system
   rather than requiring every template to be rewritten off Bootstrap. Display-only: no logic. */

/* ---------------------------------------------------------------------------------------------
   DISPLAY FONT — Round 13 Lane C (Ali 2026-07-25, "you choose"): a self-hosted sci-fi display
   face so the identity reads sci-fi at a glance without dragging in a CDN. Orbitron (SIL Open
   Font License 1.1 — see static/fonts/OFL.txt) is the geometric-console face here: distinctive
   but still readable, and legal to bundle. One Latin-subset VARIABLE woff2 (Google's own subset,
   weight axis 600..900) covers every weight the display surfaces use, so there's a single ~12KB
   file to ship. Self-hosted under /static/fonts (served by web.js's /static mount); the app CSP
   already allows font-src 'self' data:, so no external origin is needed or permitted.
   font-display: swap — the readable UI stack (below) paints immediately and Orbitron swaps in
   when it lands, so a slow load never blanks a heading. RESTRAINT: this is an ACCENT applied to
   display surfaces ONLY (brand name, h1/h2 headings, the letterspaced uppercase eyebrows). Body
   and paragraph text keep --sns-font-ui untouched (the round-5 theme deliberately kept 15px+
   readable body — a takeover would undo that). */
@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url("/static/fonts/orbitron-latin-var.woff2") format("woff2");
}

/* ---------------------------------------------------------------------------------------------
   TOKENS
   ------------------------------------------------------------------------------------------- */
:root {
  /* Core palette — same hue family as the GM app's Plan 6 tokens.
     Plan 23b T1 — the names aliased in tokens.css's own legacy-bridge :root block (--sns-bg,
     --sns-card, --sns-line, --sns-tx, --sns-tx-dim, --sns-tx-faint, --sns-cy, --sns-gold,
     --sns-amber, --sns-pos, --sns-neg) are REMOVED from this block so that alias wins the
     cascade — tokens.css is the single source of truth for those eleven now. Everything with no
     spec equivalent (the -raised/-soft/-dim variants, spacing/radius/font/shadow tokens below)
     is untouched. */
  --sns-bg-raised: #090c16;
  --sns-card-raised: #13224a;
  --sns-line-soft: #17284d;
  --sns-cy-dim: #0f8fb0;
  --sns-cy-soft: rgba(46, 226, 255, 0.1);
  --sns-neg-dim: #c94848;

  /* 8px spacing scale */
  --sns-space-1: 0.25rem;  /* 4px  */
  --sns-space-2: 0.5rem;   /* 8px  */
  --sns-space-3: 0.75rem;  /* 12px */
  --sns-space-4: 1rem;     /* 16px */
  --sns-space-5: 1.5rem;   /* 24px */
  --sns-space-6: 2rem;     /* 32px */
  --sns-space-7: 3rem;     /* 48px */
  --sns-space-8: 4rem;     /* 64px */

  /* Radius */
  --sns-radius-sm: 0.25rem;
  --sns-radius-md: 0.4rem;
  --sns-radius-lg: 0.6rem;
  --sns-radius-pill: 999px;

  /* Typography — a marketing/product page for players, not an all-day app UI, so lean on a
     slightly warmer system stack than the GM app's Segoe-first order; still native-first. */
  --sns-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sns-font-mono: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
  /* Display accent — Orbitron (self-hosted, @font-face above) over the same readable UI stack as
     the swap/failure fallback, so a display surface is never left in an unstyled or blank state.
     Applied ONLY to display surfaces (brand name, headings, eyebrows); never to body/paragraph. */
  --sns-font-display: "Orbitron", var(--sns-font-ui);
  --sns-fs-h1: 1.5rem;
  --sns-fs-h2: 1.15rem;
  --sns-fs-h3: 0.85rem;
  --sns-fs-body: 0.9rem;
  --sns-fs-sm: 0.82rem;
  --sns-fs-xs: 0.72rem;
  --sns-lh-body: 1.5;

  /* Elevation */
  --sns-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sns-shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.5);
  --sns-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.6);

  /* Motion */
  --sns-transition-fast: 120ms ease;
  --sns-transition-base: 180ms ease;

  /* Touch target floor (mobile-first hard rule: every interactive control ≥44px). */
  --sns-touch: 44px;
}

[x-cloak] { display: none !important; }

* { box-sizing: border-box; }

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

.sns-body {
  background: var(--sns-bg);
  color: var(--sns-tx);
  min-height: 100dvh;
  font-family: var(--sns-font-ui);
  font-size: var(--sns-fs-body);
  line-height: var(--sns-lh-body);
  -webkit-font-smoothing: antialiased;
}

/* Round 5 T7 — deep-space shell: two faint nebula washes (cyan top-left, violet bottom-right,
   trading the old amber one for the palette's own --cdu family) over a tiled pure-CSS starfield —
   four layers of 1px-ish radial-gradient dots at co-prime tile sizes so the repeat never reads as
   a grid. No image assets; alpha stays <= 0.5 so 15px body text on any surface is never fighting
   the backdrop. NOTE: tokens.css's own body.sns-body rule (loaded after this file) deliberately
   sets background-COLOR, not the `background:` shorthand — the shorthand would reset these image
   layers to none (see that rule's comment). */
body.sns-body {
  background-image:
    radial-gradient(ellipse 1200px 800px at 15% -10%, rgba(53, 224, 255, 0.07), transparent 60%),
    radial-gradient(ellipse 900px 700px at 100% 100%, rgba(176, 122, 255, 0.05), transparent 55%),
    radial-gradient(1.4px 1.4px at 27px 43px, rgba(222, 240, 255, 0.5), transparent),
    radial-gradient(1px 1px at 141px 96px, rgba(222, 240, 255, 0.34), transparent),
    radial-gradient(1.6px 1.6px at 196px 158px, rgba(53, 224, 255, 0.38), transparent),
    radial-gradient(1px 1px at 73px 189px, rgba(222, 240, 255, 0.24), transparent);
  background-size: auto, auto, 220px 220px, 260px 260px, 340px 340px, 300px 300px;
  background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Mobile-first content well. Layout.njk's <main> keeps its Bootstrap container class; this just
   tightens gutters at phone width and lets larger breakpoints breathe like the desktop card grid
   already assumed 16:9-ish space for. */
.container {
  padding-left: var(--sns-space-3);
  padding-right: var(--sns-space-3);
}
@media (min-width: 768px) {
  .container { padding-left: var(--sns-space-4); padding-right: var(--sns-space-4); }
}

/* ---------------------------------------------------------------------------------------------
   TYPOGRAPHIC SCALE
   ------------------------------------------------------------------------------------------- */
/* Display font lands on these surfaces (brand name, headings, section eyebrows) via the
   --sns-font-display token — the ACCENT surfaces called out in the @font-face comment above.
   Everything else (body, table cells, form fields, buttons) inherits --sns-font-ui unchanged. */
.sns-title { color: var(--sns-cy); font-family: var(--sns-font-display);
  letter-spacing: 0.35em; text-indent: 0.35em; font-weight: 700;
  text-shadow: 0 0 18px rgba(53, 224, 255, 0.35); }

.sns-h1, h1.h3, h1.h4 { color: var(--sns-tx); font-family: var(--sns-font-display); font-weight: 700; letter-spacing: 0.01em; }
.sns-h2, h2.h5, h2.h6 { color: var(--sns-tx); font-family: var(--sns-font-display); font-weight: 600; letter-spacing: 0.01em; }
.sns-h3, .sns-panel-title {
  color: var(--sns-cy);
  font-family: var(--sns-font-display);
  font-size: var(--sns-fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 var(--sns-space-3);
}
/* Section sub-headers across the templates use Bootstrap's h6.text-secondary convention as the
   panel-title spot — recolor/re-letter them to the same treatment as .sns-panel-title so every
   card header reads consistently without touching markup. */
h2.text-secondary, h3.text-secondary {
  color: var(--sns-cy) !important;
  font-family: var(--sns-font-display);
  font-size: var(--sns-fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sns-caption { font-size: var(--sns-fs-xs); color: var(--sns-tx-faint); }
.sns-mono { font-family: var(--sns-font-mono); letter-spacing: 0.02em; }

.text-secondary { color: var(--sns-tx-dim) !important; }
.text-danger { color: var(--sns-neg) !important; }

/* ---------------------------------------------------------------------------------------------
   CARD — Bootstrap's .card class stays in every template; this recolors/respaces it to the
   design system rather than requiring a markup-wide rename to .sns-card-only structure.
   ------------------------------------------------------------------------------------------- */
.sns-card, .card.sns-card {
  background: var(--sns-card);
  border: 1px solid var(--sns-line);
  border-radius: var(--sns-radius-md);
  box-shadow: var(--sns-shadow-card);
  color: var(--sns-tx);
}
.card.sns-card .card-body { padding: var(--sns-space-4); }
.card.sns-card .card-body > h2:first-child,
.card.sns-card .card-body > .d-flex:first-child > h2 { margin-top: 0; }

.sns-card-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sns-space-3);
  padding: var(--sns-space-3) var(--sns-space-4);
  border-bottom: 1px solid var(--sns-line);
}
.sns-card-body { padding: var(--sns-space-4); }
.sns-card-footer {
  padding: var(--sns-space-3) var(--sns-space-4);
  border-top: 1px solid var(--sns-line);
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sns-space-2);
}

/* Nested "row card" pattern used throughout (attribute tiles, stat-strip cells) — Bootstrap's
   `.border.rounded.p-2` utility trio, recolored as a unit. */
.border.sns-card, .border.rounded.p-2 {
  background: var(--sns-bg-raised);
  border-color: var(--sns-line) !important;
}

/* ---------------------------------------------------------------------------------------------
   SECTION HEADER
   ------------------------------------------------------------------------------------------- */
.sns-section-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sns-space-3); margin-bottom: var(--sns-space-4); flex-wrap: wrap;
}
.sns-section-header-text { min-width: 0; }
.sns-section-header-desc { color: var(--sns-tx-dim); font-size: var(--sns-fs-sm); margin: var(--sns-space-1) 0 0; }
.sns-section-header-actions { display: flex; align-items: center; gap: var(--sns-space-2); flex: 0 0 auto; }

/* ---------------------------------------------------------------------------------------------
   BUTTONS — Bootstrap's .btn/.btn-sm/.btn-outline-* classes remain in markup throughout (layout,
   sizing, disabled cursor); these rules recolor them onto the design system palette. .sns-btn is
   also available standalone for the design-system-only spots.
   ------------------------------------------------------------------------------------------- */
.sns-btn, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sns-space-2);
  font-family: inherit; font-weight: 600; line-height: 1.2;
  border-radius: var(--sns-radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--sns-transition-fast), border-color var(--sns-transition-fast),
    color var(--sns-transition-fast), transform var(--sns-transition-fast), opacity var(--sns-transition-fast);
  white-space: nowrap;
  min-height: var(--sns-touch);
  padding: 0.5rem 1rem;
}
/* .btn-sm keeps its compact padding/type, but its touch target must still clear the app's
   --sns-touch floor (44px). Buttons wrapped in .sns-card-row-actions already got 48px; the loose
   .btn-sm instances (the PLAY action-economy tracker, Sign out, the target-takes Copy) previously
   fell to ~34px, under the accessibility minimum on a one-thumb screen. */
.btn.btn-sm { min-height: var(--sns-touch); padding: 0.4rem 0.75rem; font-size: var(--sns-fs-sm); }
.btn:active { transform: translateY(1px); }
/* Bootstrap's .btn-close (the reconnect recap card's dismiss X) is a ~16px glyph in a tight box —
   the last loose control under the --sns-touch floor. Give it a full 44px hit area while the X
   glyph stays visually small, centered in the box. */
.btn-close { min-width: var(--sns-touch); min-height: var(--sns-touch); background-position: center; }
.btn:disabled, .btn.disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-info, .sns-btn-primary {
  background: var(--sns-cy-dim); border-color: var(--sns-cy-dim); color: #05131a; font-weight: 600;
}
.btn-info:hover, .btn-info:focus, .sns-btn-primary:hover, .sns-btn-primary:focus {
  background: var(--sns-cy); border-color: var(--sns-cy); color: #05131a;
}
.btn-info:disabled { opacity: 0.6; }

.btn-warning {
  background: var(--sns-amber); border-color: var(--sns-amber); color: #1a1200; font-weight: 600;
}
.btn-warning:hover, .btn-warning:focus { background: var(--sns-gold); border-color: var(--sns-gold); color: #1a1200; }

.btn-outline-secondary, .sns-btn-secondary {
  background: transparent; border-color: var(--sns-line); color: var(--sns-tx);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus,
.sns-btn-secondary:hover, .sns-btn-secondary:focus {
  background: var(--sns-cy-soft); border-color: var(--sns-cy-dim); color: var(--sns-cy);
}

.btn-outline-info {
  background: transparent; border-color: var(--sns-cy-dim); color: var(--sns-cy);
}
.btn-outline-info:hover, .btn-outline-info:focus { background: var(--sns-cy-soft); border-color: var(--sns-cy); color: var(--sns-cy); }

.btn-outline-danger, .sns-btn-danger {
  background: transparent; border-color: rgba(255, 107, 107, 0.45); color: var(--sns-neg);
}
.btn-outline-danger:hover, .btn-outline-danger:focus,
.sns-btn-danger:hover, .sns-btn-danger:focus { background: rgba(255, 107, 107, 0.12); border-color: var(--sns-neg); color: #ffb3b3; }

.btn-link { min-height: auto; color: var(--sns-cy-dim); }
.btn-link:hover, .btn-link:focus { color: var(--sns-cy); }

/* Shared focus-visible ring. */
.btn:focus-visible, .sns-nav-link:focus-visible, .nav-link:focus-visible,
.form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible,
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--sns-cy);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------------------------
   BADGES / PILLS / CHIPS — Bootstrap's .badge + .text-bg-* stay in markup; recolored here.
   ------------------------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.3em;
  font-size: var(--sns-fs-xs); font-weight: 600; letter-spacing: 0.02em;
  padding: 0.3rem 0.6rem; border-radius: var(--sns-radius-pill);
  border: 1px solid transparent; line-height: 1.4;
}
.text-bg-dark, .badge.sns-badge-neutral { background: #13203f !important; color: var(--sns-tx-dim) !important; border-color: var(--sns-line); }
.text-bg-info, .badge.sns-badge-info { background: var(--sns-cy-soft) !important; color: var(--sns-cy) !important; border-color: rgba(46, 226, 255, 0.3); }
.text-bg-secondary { background: #13203f !important; color: var(--sns-tx-dim) !important; border-color: var(--sns-line); }
.text-bg-danger, .badge.sns-badge-danger { background: rgba(255, 107, 107, 0.16) !important; color: var(--sns-neg) !important; border-color: rgba(255, 107, 107, 0.32); }
.badge.sns-badge-ok { background: rgba(62, 224, 143, 0.14); color: var(--sns-pos); border-color: rgba(62, 224, 143, 0.3); }
.badge.sns-badge-warn { background: rgba(255, 179, 71, 0.14); color: var(--sns-amber); border-color: rgba(255, 179, 71, 0.32); }

.sns-badge-status { border: 1px solid var(--sns-line); }
.sns-credits { color: var(--sns-gold); font-variant-numeric: tabular-nums; font-weight: 600; }
.sns-itemstats { margin-top: var(--sns-space-1); }
.sns-itemstats > summary { cursor: pointer; color: var(--sns-tx-dim); min-height: var(--sns-touch); display: flex; align-items: center; }
.sns-itemstats > summary:hover { color: var(--sns-cy); }
.sns-itemstats-grid dt, .sns-itemstats-grid dd { padding-top: 0.15rem; padding-bottom: 0.15rem; }
.sns-itemstats-grid dt { color: var(--sns-tx-dim); }

/* Plan 16 T3 #2 — CDU "?" explainer: a <details> disclosure (same idiom as .sns-itemstats above),
   styled as a small round badge rather than a text link so it reads as a hint affordance next to
   the CDU label, not a clickable stat value. Hides the native disclosure-triangle marker in both
   marker-pseudo-element (Chromium) and list-style (Firefox) browsers — a bare "?" badge is the
   whole point, a redundant triangle beside it would look like a second, unrelated control. */
.sns-cdu-help > summary { cursor: pointer; list-style: none; }
.sns-cdu-help > summary::-webkit-details-marker { display: none; }
.sns-cdu-help[open] > summary { color: var(--sns-cy); }

.sns-chip {
  display: inline-block; background: #13203f; border: 1px solid var(--sns-line);
  border-radius: var(--sns-radius-pill); padding: 0.15rem 0.6rem; font-size: 0.78rem; margin: 0.15rem;
  color: var(--sns-tx-dim);
}

/* ---------------------------------------------------------------------------------------------
   FORM CONTROLS — Bootstrap's .form-control/.form-select/.form-check-input stay in markup.
   ------------------------------------------------------------------------------------------- */
.form-label { color: var(--sns-tx-dim); font-size: var(--sns-fs-sm); }
.form-control, .form-select, .sns-input, .sns-select {
  background: var(--sns-bg-raised); color: var(--sns-tx); border: 1px solid var(--sns-line);
  border-radius: var(--sns-radius-sm); min-height: var(--sns-touch);
  font-size: 1rem; /* ≥16px prevents iOS auto-zoom on focus */
  transition: border-color var(--sns-transition-fast), box-shadow var(--sns-transition-fast);
}
/* Small inputs/selects still tap the same --sns-touch (44px) floor as buttons — a mobile field
   the user taps to focus (help search, dice DC, situational-modifier selects) needs the target
   even though it's a single tap. */
.form-control.form-control-sm, .form-select.form-select-sm { min-height: var(--sns-touch); font-size: var(--sns-fs-sm); }
.form-control:focus, .form-select:focus, .sns-input:focus, .sns-select:focus {
  background: var(--sns-bg-raised); color: var(--sns-tx); border-color: var(--sns-cy-dim);
  box-shadow: 0 0 0 3px rgba(46, 226, 255, 0.18); outline: none;
}
.form-control::placeholder { color: var(--sns-tx-faint); }
.form-control:disabled, .form-select:disabled { opacity: 0.6; cursor: not-allowed; }

/* Plan 14 T1 #5 — Player-agent finding #4/#14: a <select> (e.g. the character-request form's
   Race field) read as visually indistinguishable from a free-text <input>, so a player tried to
   type into it. Root cause: Bootstrap's default .form-select chevron is a fixed-color data-URI
   SVG (#343a40, a dark gray meant for LIGHT backgrounds) — on this theme's dark
   --sns-bg-raised fields it was effectively invisible, not merely subtle. Bootstrap exposes the
   chevron as the CSS custom property --bs-form-select-bg-img specifically so it can be
   overridden without forking the whole background-image/position/size shorthand — retint it to
   --sns-tx-dim (the same muted-but-legible tone .form-label already uses) so every .form-select
   on the site (this Race field, ship.njk's distribute/store selects, messages.njk's
   recipient/attach selects, equipment.njk's roller-toggle and target-type selects) gets one
   consistent, visible chevron. Border also bumped to --sns-tx-faint (brighter/more contrast
   against --sns-bg-raised than .form-control's plain --sns-line, without reaching all the way to
   the cyan --sns-cy-dim reserved for the focus state) purely on .form-select so the field reads
   as a distinct control type at a glance, not just via the (now-visible) chevron alone. */
.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b96ad' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  border-color: var(--sns-tx-faint);
}

.form-check-input {
  background-color: var(--sns-bg-raised); border-color: var(--sns-line);
  width: 1.15em; height: 1.15em; margin-top: 0.2em;
}
.form-check-input:checked { background-color: var(--sns-cy-dim); border-color: var(--sns-cy-dim); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(46, 226, 255, 0.18); border-color: var(--sns-cy-dim); }
.form-check-label { min-height: var(--sns-touch); display: inline-flex; align-items: center; }

.sns-status-line { min-height: 1.5em; }
.sns-status-ok { color: var(--sns-pos); }
.sns-status-error { color: var(--sns-neg); }
.sns-status-warn { color: var(--sns-amber); }

/* Nav-pills (login mode switch) recolored to the design system instead of Bootstrap blue. */
.nav-pills .nav-link {
  color: var(--sns-tx-dim); border-radius: var(--sns-radius-sm); font-weight: 600;
  min-height: var(--sns-touch); display: flex; align-items: center; justify-content: center;
}
.nav-pills .nav-link.active { background: var(--sns-cy-dim); color: #05131a; }

/* ---------------------------------------------------------------------------------------------
   EMPTY STATES
   ------------------------------------------------------------------------------------------- */
.sns-empty { color: var(--sns-tx-faint); font-size: var(--sns-fs-sm); font-style: italic; }

/* ---------------------------------------------------------------------------------------------
   NAV — _charnav.njk. Mobile-first: a horizontally scrollable tab bar (not a hamburger — every
   tab stays one thumb-swipe away, which matters more than hiding chrome for a tabletop app used
   mid-session) with snap points and a scroll-shadow so it reads as scrollable, not truncated.
   Desktop: the scroll container simply never overflows, so it reads as a normal pill nav.
   ------------------------------------------------------------------------------------------- */
.sns-charnav-head {
  display: flex; flex-direction: column; gap: var(--sns-space-3);
  margin-bottom: var(--sns-space-4);
}
@media (min-width: 768px) {
  .sns-charnav-head { flex-direction: row; align-items: center; justify-content: space-between; }
}
.sns-charnav-name { display: flex; align-items: center; gap: var(--sns-space-2); flex-wrap: wrap; }

.sns-charnav-scroll {
  display: flex; flex-wrap: nowrap; gap: 0.35rem; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  padding-bottom: var(--sns-space-1);
  scrollbar-width: thin; scrollbar-color: var(--sns-line) transparent;
  border-bottom: 1px solid var(--sns-line);
}
.sns-charnav-scroll::-webkit-scrollbar { height: 5px; }
.sns-charnav-scroll::-webkit-scrollbar-thumb { background: var(--sns-line); border-radius: var(--sns-radius-pill); }

.sns-charnav-scroll .nav-link {
  scroll-snap-align: start; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.55rem 0.9rem; min-height: var(--sns-touch);
  color: var(--sns-tx-dim); font-size: var(--sns-fs-sm); font-weight: 600;
  border: none; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; white-space: nowrap;
}
.sns-charnav-scroll .nav-link:hover { color: var(--sns-cy); background: rgba(46, 226, 255, 0.06); }
.sns-charnav-scroll .nav-link.active {
  color: var(--sns-cy); border-bottom-color: var(--sns-cy); background: var(--sns-cy-soft); font-weight: 700;
}
@media (min-width: 768px) {
  .sns-charnav-scroll { overflow: visible; flex-wrap: wrap; border-bottom: none; }
}

/* ---------------------------------------------------------------------------------------------
   TABLES — mobile-first: wrap every table in a horizontal-scroll container (Bootstrap's
   .table-responsive already does this in markup) and keep cells from ever wrapping into a
   crushed multi-line mess at 375px; sticky first column optional per-table via CSS var, but the
   simplest and most robust mobile pattern given the diversity of tables here is scroll, not
   card-collapse (collapse would require per-table markup restructuring the brief rules out —
   "markup/classes only"). Bootstrap's .table/.table-dark/.table-sm stay in markup, recolored.
   ------------------------------------------------------------------------------------------- */
.table-responsive {
  border: 1px solid var(--sns-line); border-radius: var(--sns-radius-md);
  background: var(--sns-bg-raised);
}
/* Force genuine horizontal scroll instead of column-squeeze below the tablet breakpoint — without
   a min-width the table just compresses cells (badges/inputs/buttons) into an unreadable jumble
   rather than actually overflowing into .table-responsive's scroll container. */
.table-responsive .table { min-width: 560px; }
@media (min-width: 768px) {
  .table-responsive .table { min-width: 0; }
}
.table { width: 100%; margin-bottom: 0; color: var(--sns-tx); font-size: var(--sns-fs-sm); }
.table > :not(caption) > * > * { background: transparent; color: inherit; box-shadow: none; }
.table-dark, .table { --bs-table-bg: transparent; }
.table thead th {
  color: var(--sns-cy); font-size: var(--sns-fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--sns-line) !important; padding: 0.6rem 0.7rem; white-space: nowrap;
  background: var(--sns-card);
}
.table td {
  padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--sns-line-soft) !important; vertical-align: middle;
  white-space: nowrap;
}
.table td:first-child { white-space: normal; }
.table tbody tr:last-child td { border-bottom: none !important; }
.table tbody tr:hover td { background: rgba(46, 226, 255, 0.045); }
.table td.text-end, .table th.text-end { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------------------------
   LIST GROUPS — shop list, thread list, catalog search results. Bootstrap's .list-group /
   .list-group-item / .list-group-item-action stay in markup.
   ------------------------------------------------------------------------------------------- */
.list-group-item {
  background: var(--sns-bg-raised) !important; border-color: var(--sns-line) !important; color: var(--sns-tx);
  min-height: var(--sns-touch); display: flex; align-items: center;
  padding: 0.75rem var(--sns-space-3);
}
.list-group-item-action:hover, .list-group-item-action:focus {
  background: var(--sns-cy-soft) !important; color: var(--sns-cy);
}

/* ---------------------------------------------------------------------------------------------
   PROGRESS BARS — ship.njk hull/barrier. Bootstrap's .progress/.progress-bar stay in markup
   (inline style sets the fill width + color per-bar from server data — untouched).
   ------------------------------------------------------------------------------------------- */
.progress {
  background: var(--sns-bg-raised); border: 1px solid var(--sns-line);
  border-radius: var(--sns-radius-pill); height: 0.65rem; overflow: hidden;
}
.progress-bar { transition: width var(--sns-transition-base); }

/* ---------------------------------------------------------------------------------------------
   ALERTS — buildout.njk's build-out-mode banner. Bootstrap's .alert stays in markup.
   ------------------------------------------------------------------------------------------- */
.alert.sns-card, .alert.border.sns-card {
  color: var(--sns-tx); border-color: var(--sns-cy-dim) !important;
  background: linear-gradient(180deg, rgba(46, 226, 255, 0.06), transparent);
}

/* ---------------------------------------------------------------------------------------------
   WEAPON STAT STRIP — equipment.njk's five-number hero element (System Book contract: stays the
   page's visually prominent element). Distinct treatment from the generic .border.sns-card tile
   used elsewhere (attribute grid, etc.) — brighter card, glowing cyan value, tighter tracking.
   ------------------------------------------------------------------------------------------- */
.sns-statstrip-cell {
  background: var(--sns-card-raised) !important;
  border-color: var(--sns-cy-dim) !important;
  padding: var(--sns-space-3) var(--sns-space-2) !important;
}
.sns-statstrip-value {
  color: var(--sns-cy) !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  text-shadow: 0 0 12px rgba(46, 226, 255, 0.35);
}
@media (min-width: 768px) {
  .sns-statstrip-value { font-size: 1.3rem; }
}

/* ---------------------------------------------------------------------------------------------
   ROLLER / CRAFT RESULT BANNERS — equipment.njk and ship.njk inline `border rounded` result
   panels (border-color set inline per-outcome from Alpine state — untouched).
   ------------------------------------------------------------------------------------------- */
.border.rounded[style*="border-color"] { background: var(--sns-bg-raised); padding: var(--sns-space-3); }

/* ---------------------------------------------------------------------------------------------
   MESSAGE BUBBLES — messages.njk
   ------------------------------------------------------------------------------------------- */
.sns-bubble { background: var(--sns-card-raised); border: 1px solid var(--sns-line); border-radius: var(--sns-radius-md); }

/* ---------------------------------------------------------------------------------------------
   HR
   ------------------------------------------------------------------------------------------- */
hr { border-color: var(--sns-line); opacity: 1; }