/* ============================================================================
   chrome.css — the app furniture that sits outside any one module:
   global search, the notification/help feed, the season selector, the sidebar
   user card, the connection bar, the detail drawer and the toast.

   Everything reads design tokens, so all of it re-themes with the rest of the
   product and works in dark mode without a single hard-coded colour.
   ============================================================================ */

/* ---- Small utilities used by drawer + feed content --------------------- */
.sm  { font-size: var(--fs-sm); }
.xs  { font-size: var(--fs-xs); }
.t-strong { color: var(--ink); font-weight: 700; }
.t-sub    { color: var(--muted); font-size: var(--fs-xs); }

/* ============================================================================
   GLOBAL SEARCH (top bar)
   ============================================================================ */
.global-search { position: relative; flex: 0 1 300px; min-width: 0; display: flex; align-items: center; }
.global-search > svg { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.global-search input {
  width: 100%; min-height: 38px; padding: 0 var(--sp-3) 0 38px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: var(--fs-sm);
}
.global-search input::placeholder { color: var(--muted); }
.global-search input::-webkit-search-cancel-button { cursor: pointer; }

.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  list-style: none; margin: 0; padding: var(--sp-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); max-height: 60vh; overflow-y: auto;
}
.search-results[hidden] { display: none; }
.search-hit {
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--sp-2) var(--sp-3); border-radius: 9px; cursor: pointer;
}
.search-hit[aria-selected="true"] { background: var(--accent-tint); }
.hit-title { color: var(--ink); font-weight: 700; font-size: var(--fs-sm); }
.hit-sub   { color: var(--muted); font-size: var(--fs-xs); }

/* ============================================================================
   THE REDUCTION IN THE TOP BAR

   Tablet and phone only. On desktop the sidebar is on screen carrying the full
   lockup, and showing the mark as well would be the brand twice in one
   viewport. Below 960px that column is off-canvas, so the top bar is the only
   place the product identifies itself.
   ============================================================================ */
.topbar .brand-mobile { display: none; align-items: center; flex: none; }
.topbar .brand-mobile .sg-mark { display: block; }

@media (max-width: 960px) {
  .topbar .brand-mobile { display: flex; }
}

/* The mark's darkest passages are near-black navy, which sits on the dark
   theme's Midnight bar with very little separation. The artwork is not
   recoloured — it is given a white plate, the same answer the sidebar uses,
   scaled down. */
:root[data-theme="dark"] .topbar .brand-mobile,
:root:not([data-theme="light"]) .topbar .brand-mobile {
  background: #FFFFFF; border-radius: var(--radius-sm); padding: 3px 7px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .topbar .brand-mobile { background: none; padding: 0; }
}

/* The top bar is a fixed-height row, so anything that WRAPS inside it spills
   out of the bar rather than widening it — which is why this needed measuring
   vertically, not horizontally. Below the desktop breakpoint the "View as"
   label goes (the select keeps its aria-label, so nothing is lost to a screen
   reader) and the row is pinned to a single line. */
@media (max-width: 960px) {
  .topbar .viewas { flex-wrap: nowrap; gap: var(--sp-2); }
  .topbar .viewas .firewall-note { display: none; }
  .topbar .viewas .field { max-width: 168px; }
  .topbar { gap: var(--sp-2); }
}
@media (max-width: 620px) {
  /* On a phone the page heading is the first thing in the content anyway, so
     the bar keeps the brand and the controls instead of a truncated title. */
  .topbar .page-title { display: none; }
  .topbar .viewas .field { max-width: 132px; padding-right: 26px; }
}

/* ---- Connection state -------------------------------------------------- */
.conn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 5px 10px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 700; cursor: default;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--body);
}
.conn-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.conn.ok      { color: var(--ok);      background: var(--ok-bg);      border-color: var(--ok-line); }
.conn.bad     { color: var(--bad);     background: var(--bad-bg);     border-color: var(--bad-line); }
.conn.neutral { color: var(--neutral); background: var(--neutral-bg); border-color: var(--neutral-line); }
@media (max-width: 760px) { .conn-txt { display: none; } .conn { padding: 7px; } }

/* ---- Notification bell ------------------------------------------------- */
.bell { position: relative; }
.bell-dot {
  position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bad); box-shadow: 0 0 0 2px var(--surface);
}
.bell.read .bell-dot { display: none; }

/* ---- Sidebar: season selector + user card ----------------------------- */
.sb-season {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-soft);
}
.sb-season > svg { color: var(--universe); flex: none; }
.season-select {
  flex: 1 1 auto; min-width: 0; min-height: 34px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  color: var(--ink); font: inherit; font-size: var(--fs-xs); font-weight: 700; padding: 0 var(--sp-2);
}

.sb-user {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.sb-user .who { display: flex; flex-direction: column; min-width: 0; }
.sb-user .who b { color: var(--ink); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user .who small { color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Nav badge tones --------------------------------------------------- */
.nav-link .badge.quiet { background: var(--neutral-bg); color: var(--neutral); border: 1px solid var(--neutral-line); }
.nav-link .badge.alert { background: var(--bad); color: var(--on-color); }

/* ============================================================================
   CONNECTION BAR — where this screen sits, and what it feeds
   ============================================================================ */
.connbar {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-5);
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
}
.connbar-mark { color: var(--universe); flex: none; }
.conn-crumbs { list-style: none; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: 0; }
.conn-crumbs li { display: flex; align-items: center; gap: var(--sp-2); }
.conn-crumbs b { color: var(--ink); }
.connbar .linklike { font-size: var(--fs-xs); font-weight: 700; text-decoration: none; }
.connbar .linklike:hover { text-decoration: underline; }
.csep { color: var(--muted); }
.conn-rel { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.conn-lbl { color: var(--muted); }
.conn-pill {
  padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700;
  background: var(--surface); border: 1px solid var(--line); color: var(--body);
}
.conn-pill:hover { border-color: var(--info-line); background: var(--accent-tint); color: var(--accent); }

/* ============================================================================
   DETAIL DRAWER — click a record, see the whole record
   ============================================================================ */
.detail-scrim {
  position: fixed; inset: 0; z-index: 50; background: rgba(6,19,64,.5);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.detail-scrim.open { opacity: 1; }
.detail-scrim[hidden] { display: none; }

.detail-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(100vw, 460px);
  display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform var(--dur) var(--ease);
  padding-right: env(safe-area-inset-right);
}
.detail-drawer.open { transform: translateX(0); }
.detail-drawer[hidden] { display: none; }

.detail-head {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line);
}
.detail-head h2 { margin: 0; font-size: var(--fs-lg); }
.detail-sub { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
.detail-body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-5); }
.detail-foot {
  display: flex; gap: var(--sp-3); justify-content: flex-end; flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); background: var(--surface-2);
  padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
}

/* ---- Content blocks used inside the drawer ---------------------------- */
.detail-hero { display: flex; align-items: center; gap: var(--sp-4); }
.detail-hero .who { min-width: 0; }
.detail-hero .who .nm { font-weight: 800; font-size: var(--fs-md); color: var(--ink); }

.drw-sec { display: flex; flex-direction: column; gap: var(--sp-2); }
.drw-sec > h3 {
  display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-1);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.drw-sec > h3 svg { color: var(--accent); }

.kv {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm);
}
.kv:last-child { border-bottom: none; }
.kv > span:first-child { color: var(--muted); flex: none; }
.kv > :last-child { text-align: right; color: var(--ink); min-width: 0; }

.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-3); }
.dl .item { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: var(--sp-3); }
.dl .k { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.dl .v { color: var(--ink); font-weight: 700; margin-top: 2px; }

/* Generated portrait frame. */
.photo-box {
  display: block; overflow: hidden; flex: none;
  border: 1px solid var(--line); background: var(--surface-3);
  box-shadow: 0 1px 3px rgba(10,31,88,.12);
}
.photo-box svg { width: 100%; height: 100%; display: block; }

/* ---- Feed rows (notifications, help, drawer lists) -------------------- */
.feed-list { display: flex; flex-direction: column; gap: 2px; }
.feed-row {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left;
  padding: var(--sp-3); border-radius: 10px; border: 1px solid transparent; background: none;
}
.feed-row:hover { background: var(--surface-2); border-color: var(--line-soft); }
.feed-row .grow { display: flex; flex-direction: column; min-width: 0; }
.feed-ic {
  width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; color: var(--on-color);
  background: var(--neutral);
}
.feed-ic.ok { background: var(--ok); } .feed-ic.warn { background: var(--warn); }
.feed-ic.bad { background: var(--bad); } .feed-ic.info { background: var(--info); }
.feed-title { color: var(--ink); font-weight: 700; font-size: var(--fs-sm); }
.feed-sub   { color: var(--muted); font-size: var(--fs-xs); }
.feed-time  { color: var(--muted); font-size: var(--fs-xs); flex: none; }

/* Which screen a notice came from. Worth the line: a feed that pools every
   module is otherwise a list of sentences with no home, and "Riverside is over
   its CARA hours" means something different depending on whose desk it lands
   on. */
.feed-where {
  color: var(--muted); font-size: var(--fs-2xs); text-transform: uppercase;
  letter-spacing: .06em; margin-top: 2px;
}

/* The row and its dismiss button are siblings rather than nested, because a
   button inside a button is invalid HTML and browsers un-nest it — which put
   the dismiss control outside the row it belonged to. */
.feed-row-wrap { display: flex; align-items: stretch; gap: 2px; }
.feed-row-wrap .feed-row { flex: 1; min-width: 0; }
.feed-x {
  flex: none; width: 32px; border: 1px solid transparent; border-radius: 10px;
  background: none; color: var(--muted); display: grid; place-items: center;
  cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.feed-x:hover { background: var(--surface-3); color: var(--ink); }

/* ============================================================================
   TOAST
   ============================================================================ */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 70;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-pill);
  background: var(--galaxy); color: var(--on-color); font-weight: 700; font-size: var(--fs-sm);
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  max-width: min(92vw, 460px);
}
.toast svg { color: var(--ok-on-dark); flex: none; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* Firewall callout tones for .note (info already lives in components.css). */
.note.bad  { background: var(--bad-bg);  border-color: var(--bad-line);  color: var(--ink); }
.note.bad svg  { color: var(--bad); }
.note.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--ink); }
.note.warn svg { color: var(--warn); }
.note.ok   { background: var(--ok-bg);   border-color: var(--ok-line);   color: var(--ink); }
.note.ok svg   { color: var(--ok); }

/* Rows that open a record read as interactive. */
tr.clickable { cursor: pointer; }
tr.clickable:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
.row-open {
  background: none; border: none; padding: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer; width: 100%;
}
.row-open:hover .who b, .row-open:hover > b { text-decoration: underline; }

/* ---- Social reach cards (Sports Information) -------------------------- */
.net-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.net-card { border: 1px solid var(--line); border-radius: 12px; padding: var(--sp-3); background: var(--surface-2); }
.net-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.net-figure { font-size: 1.5rem; /* audit-ok: drawer display figure, one step above --fs-xl */ font-weight: 800; color: var(--ink); line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ---- Rule lists (Compliance) ------------------------------------------ */
.rule-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; }
.rule-list li { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-sm); color: var(--body); }
.rule-list li svg { color: var(--ok); flex: none; margin-top: 3px; }

/* ---- Cash-flow chart (Finance) ---------------------------------------- */
.cash-chart { display: flex; gap: var(--sp-3); align-items: flex-end; height: 160px; padding-top: var(--sp-2); }
.cash-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.cash-bars { flex: 1 1 auto; width: 100%; display: flex; gap: 3px; align-items: flex-end; justify-content: center; }
.cash-bars span { flex: 1 1 0; max-width: 18px; border-radius: 4px 4px 0 0; min-height: 3px; display: block; }
.cash-in  { background: var(--ok); }
.cash-out { background: var(--planetary); }
.cash-label { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }

/* ---- Hierarchy + org chart (AD/GM dashboard) -------------------------- */
.hier-root {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--info-line); border-radius: 12px;
  background: var(--accent-tint); margin-bottom: var(--sp-4);
}
.hier-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.hier-branch { border: 1px solid var(--line); border-radius: 12px; padding: var(--sp-3); background: var(--surface-2); }
.hier-head {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left;
  background: none; border: none; padding: 0; color: inherit; font: inherit;
}
.hier-head b { color: var(--ink); display: block; font-size: var(--fs-sm); }
.hier-head:hover b { text-decoration: underline; }
.hier-head svg { color: var(--muted); flex: none; }

.org-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.org-unit { border: 1px solid var(--line); border-radius: 12px; padding: var(--sp-3); }
.org-unit-head { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink); }

/* ---- Athlete app: department feed -------------------------------------- */
.aa-post { border-top: 1px solid var(--line-soft); padding-top: var(--sp-3); margin-top: var(--sp-3); }
.aa-post:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.aa-post p { font-size: var(--fs-sm); color: var(--body); }
.aa-media {
  display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2);
  padding: var(--sp-3); border-radius: 10px; background: var(--surface-3);
  color: var(--muted); font-size: var(--fs-xs); font-weight: 600;
}
.aa-react {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
}
.aa-react[aria-pressed="true"] { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.aa-scheduled {
  display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-4);
  padding: var(--sp-2) var(--sp-3); border-radius: 10px; border: 1px dashed var(--line);
  color: var(--muted); font-size: var(--fs-xs);
}
.aa-scheduled svg { flex: none; margin-top: 1px; }

/* ---- Forms (add-record drawer) ---------------------------------------- */
.form-grid { display: flex; flex-direction: column; gap: var(--sp-4); }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-weight: 700; color: var(--ink); font-size: var(--fs-sm); }
.form-row .req { color: var(--bad); }
.input {
  width: 100%; min-height: var(--tap); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-sm);
}
textarea.input { min-height: 84px; resize: vertical; }
.input[aria-invalid="true"] { border-color: var(--bad); background: var(--bad-bg); }
.form-hint { color: var(--muted); font-size: var(--fs-xs); }
.form-err  { color: var(--bad);   font-size: var(--fs-xs); font-weight: 600; }
.form-err[hidden] { display: none; }

.form-errors {
  border: 1px solid var(--bad-line); background: var(--bad-bg); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}
.form-errors[hidden] { display: none; }
.form-errors h3 { font-size: var(--fs-sm); color: var(--ink); margin-bottom: var(--sp-2); }
.form-errors ul { margin: 0; padding-left: var(--sp-4); }
.form-errors li { font-size: var(--fs-sm); }

/* ============================================================================
   SETUP WIZARD
   ============================================================================ */
.setup-ov {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: rgba(6,19,64,.62); padding: var(--sp-4);
}
.setup-card {
  width: min(100%, 720px); max-height: min(92dvh, 820px);
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.setup-head { padding: var(--sp-5) var(--sp-6) var(--sp-4); border-bottom: 1px solid var(--line); }
.setup-head .kick {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.setup-head h2 { margin: 6px 0 4px; font-size: var(--fs-lg); }
.setup-sub { color: var(--muted); font-size: var(--fs-sm); }
.setup-progress { display: flex; gap: 6px; margin-top: var(--sp-4); }
.setup-dot { flex: 1 1 0; height: 5px; border-radius: 3px; background: var(--surface-3); }
.setup-dot.on { background: var(--accent); }

.setup-body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-5) var(--sp-6); }
.setup-foot {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--line); background: var(--surface-2);
  padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
}

.setup-2col { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.setup-3col { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.input.colour { height: 46px; padding: 4px; cursor: pointer; }
.k-lbl {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin: var(--sp-5) 0 var(--sp-2);
}
.sw-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.swatch { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.swatch i { display: block; height: 40px; }
.swatch small { display: block; padding: 6px; font-size: var(--fs-2xs); line-height: 1.3; color: var(--muted); }

/* The picker is now grouped by season, so the outer box stacks the groups and
   each group lays its own programmes out in a grid. Forty-one checkboxes in one
   undifferentiated grid is a wall; by season it is three short lists that match
   how a department already thinks about its year. */
.sport-picker { border: 1px solid var(--line); border-radius: 12px; padding: var(--sp-3);
  display: grid; gap: var(--sp-4); }

.sport-season-head { display: flex; align-items: baseline; gap: var(--sp-3);
  margin-bottom: var(--sp-2); }
.sport-season-head b { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; }
.sport-season-head .t-sub { flex: 1; }

.sport-grid { display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sport-check { display: flex; align-items: center; gap: var(--sp-2); }
.sport-check input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.sport-check label { font-size: var(--fs-sm); color: var(--body); }

.setup-review { border: 1px solid var(--line); border-radius: 12px; padding: 0 var(--sp-4); }

@media (max-width: 560px) {
  .setup-head, .setup-body, .setup-foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .setup-foot .btn { flex: 1 1 auto; }
}

/* ---- Route-level restricted page --------------------------------------- */
.restricted-page { display: flex; gap: var(--sp-4); align-items: flex-start; }
.restricted-page h2 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.restricted-page p { margin-bottom: var(--sp-2); }
.restricted-mark {
  width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center;
  background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-line);
}
@media (max-width: 560px) { .restricted-page { flex-direction: column; } }

/* ---- Read-only archive banner (past seasons) -------------------------- */
.archive-banner {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
  background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius);
  font-size: var(--fs-sm); color: var(--ink);
}
.archive-banner svg { color: var(--warn); flex: none; margin-top: 2px; }

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 1100px) {
  .global-search { flex-basis: 220px; }
}
@media (max-width: 860px) {
  /* Search collapses before the role switcher: previewing a role is the more
     important control on a small screen, and search lives in each module too. */
  .global-search { display: none; }
}
@media (max-width: 560px) {
  .detail-drawer { width: 100vw; }
  .detail-foot .btn { flex: 1 1 auto; }
}