/* ============================================================
   SQUAD — coaching-area feature layer (aizome, performance cut)
   ------------------------------------------------------------
   Component tokens for My Squad / Assess / Coach Settings
   (.design/coaching-area/DESIGN_BRIEF.md). Scoped to .squad-scope,
   the module root — nothing here leaks into other screens.

   RULES OF THIS FILE
   · Aliases only. Every color token points at a canonical token
     from app.css/daylight.css, so club branding and the
     opt-in dark palette flow through with ZERO overrides here.
     Adding a raw hex to this file is a bug.
   · Playful color is fenced to badge ARTWORK (the SVGs carry
     their own palettes). Chrome around badges uses these tokens
     and stays aizome. If a screen reads playful with the badges
     removed, the fence has failed.
   · Platform-generic values (tap target, motion) live in
     tokens.css — do not duplicate them here.
   ============================================================ */
.squad-scope {
  /* ── Roster grid ───────────────────────────────────────────── */
  --sq-card-min:   150px;             /* card grid minmax() floor (2-up at 375px) */
  --sq-card-photo: 72px;              /* avatar/photo diameter on roster cards */
  --sq-detail-w:   clamp(400px, 42%, 600px); /* desktop detail pane; the roster takes the rest */

  /* ── Assess instruments ────────────────────────────────────── */
  --sq-step-btn:   var(--tap-min);    /* ± stepper buttons — thumb-sized, always */
  --sq-step-value: var(--fs-2xl);     /* the score numeral */
  --sq-ghost:      var(--text-4);     /* previous-month ghost values */
  --sq-track:      var(--hair);       /* stepper/score track lines */

  /* ── Score deltas (existing status colors — never sole carrier,
        always paired with an arrow glyph) ─────────────────────── */
  --sq-delta-up:        var(--green);
  --sq-delta-up-tint:   var(--green-tint);
  --sq-delta-down:      var(--red);
  --sq-delta-down-tint: var(--red-tint);

  /* ── Badge sizing (art is full-color SVG, theme-independent) ── */
  --sq-badge-sm: 32px;                /* journey rows, card dots, pickers */
  --sq-badge-lg: 96px;                /* award sheet, badges tab feature */

  /* ── Badge category accents (grouping chips/rails in the picker
        and settings — canonical hues, one per catalogue kind) ─── */
  --sq-cat-tenure:      var(--blue);
  --sq-cat-attendance:  var(--green);
  --sq-cat-character:   var(--amber);
  --sq-cat-performance: var(--accent-warm);

  /* ── Full-screen player card (mobile assess surface) ────────── */
  --sq-header-h:   132px;             /* photo header incl. seigaiha wash */
  --sq-tabbar-h:   48px;
  --sq-actionbar-h: calc(var(--tap-min) + var(--space-4)); /* bottom-anchored save bar */
}

/* ════════════════════════════════════════════════════════════════
   Components. Mobile-first; ≥901px switches to the two-pane office
   layout (true dual render, not a squeeze).
   ════════════════════════════════════════════════════════════════ */

/* ── Squad hero: the club's ink ground ────────────────────────────
   Daylight doctrine: WARM = your day, COOL = the club. The squad IS
   the club, so this hero flips to the ink ground the sidebar wears.
   No photograph: photography left the app on 30 Aug (daylight.css),
   and the muted club-photo layer this hero carried cropped whatever
   the club had uploaded. */
.hero.sq-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink, #111A20);
}
.hero.sq-hero .hero-title,
.hero.sq-hero .hero-sub { color: var(--paper, #F1EEE7); }
.hero.sq-hero .hero-sub { opacity: 0.85; }
.hero.sq-hero .hero-eyebrow { color: var(--paper, #F1EEE7); opacity: 0.9; }
.hero.sq-hero .btn.ghost {
  color: var(--paper, #F1EEE7);
  border-color: color-mix(in srgb, var(--paper, #F1EEE7) 45%, transparent);
  background: transparent;
}
.hero.sq-hero .btn.ghost:hover {
  background: color-mix(in srgb, var(--paper, #F1EEE7) 10%, transparent);
}
.hero.sq-hero .pill.gray {
  color: var(--paper, #F1EEE7);
  background: color-mix(in srgb, var(--paper, #F1EEE7) 14%, transparent);
}

.squad-scope .fade-up { animation: fadeUp var(--dur-normal) var(--ease-out) both; }

/* ── Age-band filter ──────────────────────────────────────────────
   The Daylight segmented row (.dl-seg, daylight.css) — the same control
   the Score grid uses for these bands. Nothing to restate here. */

/* ── Roster grid ──────────────────────────────────────────────── */
.squad-scope .sq-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--sq-card-min), 1fr));
  gap: var(--space-3);
}
.squad-scope .sq-card {
  --sq-ground: var(--surface);        /* what the ✓ ring and chips sit on; tiers override */
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: var(--space-1); padding: var(--space-4) var(--space-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2);
  cursor: pointer; text-align: center;
  transition: border-color var(--dur-fast) var(--ease-default), box-shadow var(--dur-fast) var(--ease-default);
}
.squad-scope .sq-card:hover { border-color: var(--border-2); box-shadow: var(--shadow-sm); }
.squad-scope .sq-card:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* The shared focus glow is 24% action red: invisible on the five tier
   grounds. Tiered cards take a paper outline instead. */
.squad-scope .sq-card[class*='sq-card--t']:focus-visible {
  box-shadow: none; outline: 2px solid var(--sq-paper); outline-offset: 2px;
}
.squad-scope .sq-card--open { border-color: var(--accent); }
.squad-scope .sq-card__photo {
  position: relative; width: var(--sq-card-photo); height: var(--sq-card-photo);
  border-radius: 50%; overflow: visible; background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
}
.squad-scope .sq-card__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.squad-scope .sq-card__initial {
  position: relative;
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em;
  font-size: var(--fs-xl); color: var(--text-2);
}
/* No photo: the kamon diamond — the mark the player drawer, boot splash
   and crest slots wear — so an unphotographed child reads deliberate,
   not missing. Ink on the paper card; paper on the tier lacquers. */
.squad-scope .sq-card__photo--kamon,
.squad-scope .sq-detail__photo--kamon { background: none; border-radius: 0; overflow: visible; }
.squad-scope .sq-card__photo--kamon::before,
.squad-scope .sq-detail__photo--kamon::before {
  content: ''; position: absolute; inset: 15%;
  transform: rotate(45deg);
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.squad-scope .sq-card__tick {
  position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--green); color: var(--surface-2);
  font-size: 12px; line-height: 20px; text-align: center; font-weight: var(--fw-bold);
  /* A ring in the card's own ground separates the disc from the avatar
     and from the tier lacquers, where green on crimson is under 2:1. */
  box-shadow: 0 0 0 2px var(--sq-ground);
}
.squad-scope .sq-card__name { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.squad-scope .sq-card__meta { font-size: var(--fs-xs); line-height: 1.3; color: var(--text-3); }
.squad-scope .sq-card__badges {
  position: absolute; top: var(--space-2); right: var(--space-2);
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-full);
  background: var(--amber-tint); color: var(--amber);
  font-size: 11px; line-height: 20px; font-weight: var(--fw-bold);
}

/* ── Layout: mobile = roster only, detail is a takeover ───────── */
.squad-scope .sq-detail {
  display: none;
}
.squad-scope .sq-detail--open {
  display: flex; flex-direction: column;
  /* Above the page and the mobile sidebar, BELOW the shell's overlay
     layer (.ov-back 100 / .drawer + modal 101) so confirm modals opened
     from inside the takeover render on top of it. */
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg); overflow-y: auto;
  /* No entrance animation: the takeover appears in place. modalIn (app.css)
     is a centred-modal keyframe and slid this fullscreen pane off-centre
     then snapped it back on every tap. */
}

/* The shell's bottom tab bar sits at z-index 900, above the takeover, and
   would collide with the takeover's own bottom-anchored save bar. While
   the portal is mounted the player card IS the screen — hide the bar. */
body:has(#sq-portal) #kh-tabbar { display: none !important; }

/* ── Detail header ────────────────────────────────────────────── */
/* wrap + the id's minimum width are what keep a phone honest: without
   them the fixed-width nav cluster (Gamecard · Journey · ‹ · ›) forces
   the row past the viewport and crushes the name to one word per line.
   On a wide pane nothing wraps, so desktop renders exactly as before. */
.squad-scope .sq-detail__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-4); border-bottom: 1px solid var(--hair, var(--border));
  background: var(--surface);
}
.squad-scope .sq-detail__close {
  width: var(--tap-min); height: var(--tap-min); flex: 0 0 auto;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface-2); color: var(--text); font-size: var(--fs-lg); cursor: pointer;
}
.squad-scope .sq-detail__close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.squad-scope .sq-detail__photo {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: var(--bg-2); display: flex; align-items: center; justify-content: center;
}
.squad-scope .sq-detail__photo img { width: 100%; height: 100%; object-fit: cover; }
.squad-scope .sq-detail__initial {
  position: relative;
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em;
  font-size: var(--fs-lg); color: var(--text-2);
}
/* Stated after .sq-detail__photo so the kamon wins its background; the
   box must be positioned or the diamond sizes itself to the whole pane. */
.squad-scope .sq-detail__photo--kamon { position: relative; background: none; border-radius: 0; overflow: visible; }
.squad-scope .sq-detail__id { flex: 1 1 12ch; min-width: 12ch; }
.squad-scope .sq-detail__name { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text); }
.squad-scope .sq-detail__meta { font-size: var(--fs-xs); color: var(--text-3); }
.squad-scope .sq-detail__nav {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: var(--space-1); flex: 0 0 auto; margin-left: auto;
}
.squad-scope .sq-detail__nav .btn { min-width: var(--tap-min); min-height: var(--tap-min); }
.squad-scope .sq-detail__empty {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--text-3); font-size: var(--fs-base); padding: var(--space-6);
}

/* ── Tabs ─────────────────────────────────────────────────────── */
/* Five labels ("Family memories" included) cannot share 375px — folding
   them to two lines reads as clutter, and letting them push the page
   sideways is worse. The strip scrolls inside itself instead, per the
   wide-content rule; on desktop everything fits and nothing scrolls. */
.squad-scope .sq-tabs {
  display: flex; height: var(--sq-tabbar-h);
  border-bottom: 1px solid var(--border); background: var(--surface);
  position: sticky; top: 0; z-index: 2;
  overflow-x: auto; scrollbar-width: none;
}
.squad-scope .sq-tabs::-webkit-scrollbar { display: none; }
.squad-scope .sq-tab {
  flex: 1 0 auto; white-space: nowrap; padding: 0 var(--space-3);
  border: none; background: none; cursor: pointer;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-3);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-default);
}
.squad-scope .sq-tab--on { color: var(--text); border-bottom-color: var(--accent); }
.squad-scope .sq-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.squad-scope .sq-tabpanel { padding: var(--space-4); padding-bottom: calc(var(--sq-actionbar-h) + var(--space-6)); }

/* ── Score tab ────────────────────────────────────────────────── */
.squad-scope .sq-month { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.squad-scope .sq-month .btn { min-width: var(--tap-min); min-height: var(--tap-min); }
.squad-scope .sq-month__label { font-size: var(--fs-md); font-weight: var(--fw-semibold); min-width: 10em; text-align: center; }
.squad-scope .sq-steppers { display: flex; flex-direction: column; gap: var(--space-2); }
.squad-scope .sq-step {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--sq-track);
}
.squad-scope .sq-step__lbl { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--text); }
.squad-scope .sq-step__ghost {
  /* Last month's value, on its own line under the label ("Aug · 4") so it
     never reads as a date beside the parameter name. */
  display: block; margin-top: 2px;
  font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--sq-ghost);
  font-variant-numeric: tabular-nums;
}
.squad-scope .sq-step__ctl { display: flex; align-items: center; gap: var(--space-2); }
.squad-scope .sq-step__btn {
  width: var(--sq-step-btn); height: var(--sq-step-btn);
  border: 1px solid var(--border-2); border-radius: var(--r);
  background: var(--surface); color: var(--text); font-size: var(--fs-lg); cursor: pointer;
}
.squad-scope .sq-step__btn:disabled { opacity: 0.35; cursor: default; }
.squad-scope .sq-step__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.squad-scope .sq-step__val {
  min-width: 2.6em; text-align: center;
  font-size: var(--sq-step-value); font-weight: var(--fw-bold); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.squad-scope .sq-step__val--empty { color: var(--text-4); }
.squad-scope .sq-step__of { font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--text-4); }
.squad-scope .sq-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end;
}
.squad-scope .sq-save { min-height: var(--tap-min); min-width: 50%; }

/* ── Hints, feeds, composers ──────────────────────────────────── */
.squad-scope .sq-hint { font-size: var(--fs-sm); color: var(--text-3); margin: 0 0 var(--space-3); }
.squad-scope .sq-hint--lock { color: var(--text-2); }
.squad-scope .sq-compose { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.squad-scope .sq-compose textarea {
  width: 100%; padding: var(--space-3); border: 1px solid var(--border-2); border-radius: var(--r);
  background: var(--surface-2); color: var(--text); font-size: var(--fs-base); line-height: var(--lh-normal);
  resize: vertical;
}
.squad-scope .sq-compose .btn { align-self: flex-end; min-height: var(--tap-min); }
.squad-scope .sq-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.squad-scope .sq-feed__item {
  padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2);
}
.squad-scope .sq-feed__item p { margin: 0 0 var(--space-1); font-size: var(--fs-base); line-height: var(--lh-normal); white-space: pre-wrap; }
.squad-scope .sq-feed__meta { font-size: var(--fs-xs); color: var(--text-3); }
.squad-scope .sq-feed__item--sent .sq-feed__meta { color: var(--sq-delta-up); }
.squad-scope .sq-quote {
  margin: var(--space-3) 0 0; padding: var(--space-3);
  border-left: 3px solid var(--border-2); background: var(--bg-2); border-radius: var(--r);
  font-size: var(--fs-base); white-space: pre-wrap;
}

/* ── Badges tab ───────────────────────────────────────────────── */
.squad-scope .sq-actionrow { margin-bottom: var(--space-4); }
.squad-scope .sq-actionrow .btn { min-height: var(--tap-min); }
.squad-scope .sq-suggest {
  margin-bottom: var(--space-4); padding: var(--space-3);
  border: 1px dashed var(--border-2); border-radius: var(--r-2); background: var(--surface);
}
.squad-scope .sq-suggest__h { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-2); margin-bottom: var(--space-2); }
.squad-scope .sq-suggest__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) 0; }
.squad-scope .sq-suggest__lbl { flex: 1; font-size: var(--fs-base); }
.squad-scope .sq-badgegrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-4);
}
.squad-scope .sq-badge { text-align: center; }
.squad-scope .sq-badge__art svg { width: var(--sq-badge-lg); height: var(--sq-badge-lg); }
.squad-scope .sq-badge__lbl { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-top: var(--space-1); }
.squad-scope .sq-badge__meta { font-size: var(--fs-xs); color: var(--text-3); }
.squad-scope .sq-badge__fallback { font-size: 24px; }
.squad-scope .sq-badge--new .sq-badge__art { animation: sqBadgePop var(--dur-slower) var(--ease-bounce); }
@keyframes sqBadgePop { 0% { transform: scale(0.4); } 100% { transform: scale(1); } }

/* Award sheet (inside the shared modal) */
.squad-scope.sq-award, .squad-scope .sq-award { max-height: 60vh; overflow-y: auto; }
.squad-scope .sq-award__kind {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-3); margin: var(--space-4) 0 var(--space-2);
}
.squad-scope .sq-award__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.squad-scope .sq-award__opt {
  display: flex; align-items: center; gap: var(--space-2); text-align: left;
  min-height: var(--tap-min); padding: var(--space-2);
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); cursor: pointer;
  font-size: var(--fs-sm);
}
.squad-scope .sq-award__opt:hover { border-color: var(--border-2); }
.squad-scope .sq-award__opt:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.squad-scope .sq-award__opt svg { flex: 0 0 auto; }

/* ── Settings ─────────────────────────────────────────────────── */
/* The page body wears .content for the standard hero gutter; the column
   is capped so the parameter rows don't stretch a Retire button to the
   far edge of a wide screen. Sections are .dl-card chapters (daylight.css)
   — same recipe as the account page (owner, 4 Sep). */
.squad-scope.sq-settings, .squad-scope .sq-settings { display: block; max-width: 960px; }
.squad-scope .sq-set { margin-bottom: var(--space-4); }
.squad-scope .sq-set__h { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 0 0 var(--space-2); }
.squad-scope .sq-set__list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.squad-scope .sq-set__row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--sq-track);
}
.squad-scope .sq-set__row input {
  flex: 1 1 auto; min-width: 0; min-height: var(--tap-min);
  padding: 0 var(--space-3); border: 1px solid transparent; border-radius: var(--r);
  background: transparent; color: var(--text); font-size: var(--fs-base);
}
.squad-scope .sq-set__row input:hover { border-color: var(--border); }
.squad-scope .sq-set__row input:focus { border-color: var(--border-2); background: var(--surface-2); outline: none; }
.squad-scope .sq-set__row--off input, .squad-scope .sq-set__row--off .sq-set__kind { color: var(--text-4); }
.squad-scope .sq-set__row--off .sq-set__art { opacity: 0.35; }
.squad-scope .sq-set__tools { display: flex; gap: var(--space-1); flex: 0 0 auto; }
.squad-scope .sq-set__tools .btn { min-height: var(--tap-min); }
.squad-scope .sq-set__art { flex: 0 0 auto; display: flex; }
.squad-scope .sq-set__badgemain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.squad-scope .sq-set__kind { font-size: var(--fs-xs); color: var(--text-3); padding: 0 var(--space-3); }
.squad-scope .sq-set__add { display: flex; gap: var(--space-2); }
.squad-scope .sq-set__add input {
  flex: 1; min-height: var(--tap-min); padding: 0 var(--space-3);
  border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface-2);
  color: var(--text); font-size: var(--fs-base);
}
.squad-scope .sq-icos { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.squad-scope .sq-ico { cursor: pointer; border: 2px solid transparent; border-radius: var(--r); padding: 2px; display: flex; }
.squad-scope .sq-ico input { position: absolute; opacity: 0; }
.squad-scope .sq-ico:has(input:checked) { border-color: var(--accent); }

/* ── Skeleton ─────────────────────────────────────────────────── */
.squad-scope .sq-skeleton, .sq-skeleton {
  height: 180px; border-radius: var(--r-2);
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--surface) 50%, var(--bg-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite linear;
}

/* ── Phone density: 3-up, so a 30-player squad is two thumbs of
   scrolling rather than seven. Smaller avatar and padding; the meta
   line may wrap to two. ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .squad-scope { --sq-card-min: 96px; --sq-card-photo: 52px; }
  .squad-scope .sq-grid { gap: var(--space-2); }
  .squad-scope .sq-card { padding: var(--space-3) var(--space-1); }
  .squad-scope .sq-card__name { font-size: var(--fs-base); }
  .squad-scope .sq-card__initial { font-size: var(--fs-lg); }
  .squad-scope .sq-card__rank { white-space: nowrap; letter-spacing: 0.04em; }
}

/* ════════════════════════════════════════════════════════════════
   Desktop office layout (>900px): two panes, no takeover.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  /* Both panes are always present: the roster keeps a stable column count
     and the detail pane has a home before a player is picked, instead of
     the grid collapsing from 7-up to 2-up on the first click. */
  .squad-scope .sq-layout--detail { display: grid; grid-template-columns: minmax(0, 1fr) var(--sq-detail-w); gap: var(--space-5); align-items: start; }
  .squad-scope .sq-layout--detail .sq-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .squad-scope .sq-layout--detail .sq-detail {
    display: flex; flex-direction: column;
    position: sticky; top: var(--space-4); inset: auto; z-index: 1;
    border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2);
    max-height: calc(100vh - var(--space-6)); overflow-y: auto;
    animation: none;
  }
  /* Empty pane: a quiet stone panel with the prompt, hairline dashed. */
  .squad-scope .sq-layout--detail .sq-detail:not(.sq-detail--open) {
    background: var(--bg-2); border-style: dashed; min-height: 320px;
  }
  .squad-scope .sq-detail--open .sq-detail__close { display: none; }
  .squad-scope .sq-actionbar { position: sticky; bottom: 0; border-radius: 0 0 var(--r-2) var(--r-2); }
  .squad-scope .sq-tabpanel { padding-bottom: var(--space-4); }
}
/* Narrow office (a 1024 laptop beside the rail): a slimmer pane and a
   smaller card floor keep the roster at two or three columns instead
   of collapsing to one. */
@media (min-width: 901px) and (max-width: 1180px) {
  .squad-scope { --sq-detail-w: 360px; }
  .squad-scope .sq-layout--detail .sq-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .squad-scope .sq-layout--detail .sq-card { padding: var(--space-3) var(--space-2); }
}

/* ════════════════════════════════════════════════════════════════
   Samurai tiers (brief addendum 2026-09-02). Owner chose FULL card
   recolor on the roster. Five lacquer grounds, paper text on all —
   the ONE hardcoded palette in the squad area, because ranks are the
   game's identity, not club branding (same footing as badge art).
   ════════════════════════════════════════════════════════════════ */
.squad-scope {
  --sq-t1: #46494E;                       /* 足軽 Ashigaru — stone */
  --sq-t2: #232A4D;                       /* 武士 Bushi — indigo */
  --sq-t3: #6E1A1E;                       /* 侍 Samurai — crimson lacquer */
  --sq-t4: #23324B;                       /* 大名 Daimyō — night indigo, gold trim */
  --sq-t5: #0C0C0E;                       /* 将軍 Shōgun — black, gold trim */
  --sq-gold: #C9A227;
  --sq-paper: #F1EEE7;
}

/* Roster: full tier recolor */
.squad-scope .sq-card[class*='sq-card--t'] { border: 1px solid transparent; }
.squad-scope .sq-card--t1 { background: var(--sq-t1); --sq-ground: var(--sq-t1); }
.squad-scope .sq-card--t2 { background: var(--sq-t2); --sq-ground: var(--sq-t2); }
.squad-scope .sq-card--t3 { background: var(--sq-t3); --sq-ground: var(--sq-t3); }
.squad-scope .sq-card--t4 { background: var(--sq-t4); --sq-ground: var(--sq-t4); border-color: var(--sq-gold); }
.squad-scope .sq-card--t5 { background: var(--sq-t5); --sq-ground: var(--sq-t5); border-color: var(--sq-gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sq-gold) 45%, transparent); }
.squad-scope .sq-card[class*='sq-card--t'] .sq-card__name { color: var(--sq-paper); }
.squad-scope .sq-card[class*='sq-card--t'] .sq-card__meta { color: color-mix(in srgb, var(--sq-paper) 72%, transparent); } /* 72%: clears 4.5:1 on the stone tier */
.squad-scope .sq-card[class*='sq-card--t'] .sq-card__photo { background: color-mix(in srgb, var(--sq-paper) 12%, transparent); }
.squad-scope .sq-card[class*='sq-card--t'] .sq-card__photo--kamon { background: none; }
.squad-scope .sq-card[class*='sq-card--t'] .sq-card__photo--kamon::before {
  border-color: color-mix(in srgb, var(--sq-paper) 32%, transparent);
  background: color-mix(in srgb, var(--sq-paper) 6%, transparent);
}
.squad-scope .sq-card[class*='sq-card--t'] .sq-card__initial { color: color-mix(in srgb, var(--sq-paper) 88%, transparent); }
.squad-scope .sq-card[class*='sq-card--t'] .sq-card__badges { background: color-mix(in srgb, var(--sq-paper) 16%, transparent); color: var(--sq-paper); }
.squad-scope .sq-card[class*='sq-card--t']:hover { border-color: color-mix(in srgb, var(--sq-paper) 45%, transparent); }
.squad-scope .sq-card--t4:hover, .squad-scope .sq-card--t5:hover { border-color: var(--sq-gold); }
.squad-scope .sq-card__rank {
  font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.08em;   /* 11px is the floor — nothing smaller in the app */
  color: color-mix(in srgb, var(--sq-paper) 85%, transparent);
}
.squad-scope .sq-card--t4 .sq-card__rank, .squad-scope .sq-card--t5 .sq-card__rank { color: var(--sq-gold); }
.squad-scope .sq-card__rank [lang='ja'] { letter-spacing: normal; }

/* ── Gamecard overlay: full-screen ink reveal ─────────────────── */
.sq-gc-overlay {
  position: fixed; inset: 0; z-index: 95;         /* above takeover (90), below modals (100) */
  display: flex; align-items: center; justify-content: center;
}
.sq-gc-backdrop { position: absolute; inset: 0; background: rgba(10, 14, 18, 0.86); }
.sq-gc-close {
  position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: 16px;
  width: var(--tap-min); height: var(--tap-min);
  border: 1px solid rgba(241, 238, 231, 0.4); border-radius: var(--r-full);
  background: transparent; color: #F1EEE7; font-size: 22px; cursor: pointer;
}
.sq-gc-close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* The card itself — trading proportions, tier ground, gold trim on
   the top ranks. The reveal is the second sanctioned --ease-bounce. */
.sq-gc {
  position: relative; z-index: 1;
  width: min(86vw, 360px); aspect-ratio: 63 / 88;
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 18px; overflow: hidden;
  color: var(--sq-paper, #F1EEE7);
  border: 2px solid color-mix(in srgb, #F1EEE7 35%, transparent);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  animation: sqCardReveal var(--dur-slower) var(--ease-bounce);
}
@keyframes sqCardReveal { from { transform: scale(0.55) rotate(-2deg); opacity: 0; } }
.sq-gc--t1 { background: linear-gradient(165deg, color-mix(in srgb, var(--sq-t1) 82%, #fff), var(--sq-t1) 55%); }
.sq-gc--t2 { background: linear-gradient(165deg, color-mix(in srgb, var(--sq-t2) 82%, #fff), var(--sq-t2) 55%); }
.sq-gc--t3 { background: linear-gradient(165deg, color-mix(in srgb, var(--sq-t3) 80%, #fff), var(--sq-t3) 55%); }
.sq-gc--t4 { background: linear-gradient(165deg, color-mix(in srgb, var(--sq-t4) 80%, #fff), var(--sq-t4) 55%); border-color: var(--sq-gold); }
.sq-gc--t5 {
  background: linear-gradient(165deg, #1A1A1E, var(--sq-t5) 55%);
  border-color: var(--sq-gold);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), inset 0 0 0 2px color-mix(in srgb, var(--sq-gold) 40%, transparent);
}
/* Asanoha 麻の葉 across the whole card face (Japanese-touch mock, 2 Sept):
   the hemp-leaf lattice traditionally sewn into children's clothes as a
   wish for strong growth — the coach side's pattern, where seigaiha
   (waves, calm) belongs to the parent surfaces. Inside the frame only. */
.sq-gc::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='80'><g stroke='%23EEF1F7' stroke-width='1' fill='none'><path d='M23 0 46 40 23 80 0 40Z'/><path d='M23 0v80M0 40h46M23 40 11.5 20M23 40 34.5 20M23 40 11.5 60M23 40 34.5 60'/></g></svg>");
  background-size: 46px 80px; background-repeat: repeat;
  opacity: 0.09;
}

/* Tategaki spine — the club name runs vertical down the card's left
   edge like a maker's mark, muted gold on the top ranks. */
.sq-gc-tate {
  position: absolute; left: 10px; top: 72px; bottom: 60px;
  writing-mode: vertical-rl;
  font: 400 10px/1 var(--font-jp, serif);
  letter-spacing: 0.3em;
  color: color-mix(in srgb, var(--sq-paper) 40%, transparent);
  pointer-events: none; overflow: hidden;
}
.sq-gc--t4 .sq-gc-tate, .sq-gc--t5 .sq-gc-tate { color: color-mix(in srgb, var(--sq-gold) 55%, transparent); }
.sq-gc-crest {
  position: absolute; right: -8%; bottom: -4%; width: 55%; opacity: 0.07;
  filter: grayscale(1); pointer-events: none;
}
.sq-gc-top { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.sq-gc-rank { display: flex; flex-direction: column; line-height: 1.15; }
.sq-gc-kanji { font-size: 34px; font-weight: 600; }
.sq-gc-romaji { font-size: 11px; letter-spacing: 0.22em; opacity: 0.75; }
.sq-gc--t4 .sq-gc-romaji, .sq-gc--t5 .sq-gc-romaji,
.sq-gc--t4 .sq-gc-kanji,  .sq-gc--t5 .sq-gc-kanji { color: var(--sq-gold); }
.sq-gc-overall { text-align: right; line-height: 1; }
.sq-gc-overall b { font-size: 42px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.sq-gc-overall span { display: block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; margin-top: 4px; }
.sq-gc-photo {
  width: 92px; height: 92px; margin-top: 6px; position: relative; z-index: 1;
  border-radius: 50%; overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--sq-paper) 55%, transparent);
  background: color-mix(in srgb, var(--sq-paper) 10%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.sq-gc-photo img { width: 100%; height: 100%; object-fit: cover; }
.sq-gc-kamon { transform: rotate(45deg); width: 58%; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--sq-paper) 45%, transparent); display: flex; align-items: center; justify-content: center; }
.sq-gc-kamon span { transform: rotate(-45deg); font-size: 30px; font-weight: var(--fw-semibold); }
.sq-gc-name { margin-top: 10px; font-size: var(--fs-lg); font-weight: var(--fw-semibold); text-align: center; position: relative; z-index: 1; }
.sq-gc-meta { font-size: var(--fs-xs); opacity: 0.75; text-align: center; margin-top: 2px; }
.sq-gc-radar { width: 100%; flex: 1; min-height: 0; margin-top: 4px; }
.sq-gc-axis { font-size: 10.5px; fill: currentColor; opacity: 0.85; font-family: inherit; }
.sq-gc-axisval { font-weight: 700; opacity: 1; }
.sq-gc-bars { width: 100%; margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.sq-gc-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; font-size: var(--fs-xs); }
.sq-gc-bar i { grid-column: 1 / -1; height: 5px; background: currentColor; opacity: 0.7; }
.sq-gc-badges { display: flex; gap: var(--space-2); margin-top: auto; padding-top: 8px; position: relative; z-index: 1; }

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

/* ── Journey badge art (rendered by journey.js) ───────────────── */
.jrn-badge-art { display: inline-flex; flex: 0 0 auto; }
.jrn-badge-art svg { display: block; }

/* ── Reduced motion: entrances collapse to plain appearance ───── */
@media (prefers-reduced-motion: reduce) {
  .squad-scope .fade-up { animation: none; }
  .squad-scope .sq-badge--new .sq-badge__art { animation: none; }
}