/* shared/brand.css — Brand-scoped skinning applied via body[data-brand].
 * Companion to shared/brand-apply.js. Both get loaded on every page that
 * supports multi-brand hosting (SHIROFES / FSC / Chross Cross).
 *
 * Design constraint: SHIROFES pages must look IDENTICAL to today (zero
 * regression). These rules only kick in for non-SHIROFES brands, because
 * body[data-brand] is only set by brand-apply.js, and the `[data-brand="fsc"]`
 * selectors don't match SHIROFES.
 */

/* ── Text-based wordmark fallback ──────────────────────────────────────
   brand-apply.js replaces `<img class="header-wordmark">` elements with
   `<span class="brand-wordmark-text">` for non-SHIROFES brands (no FSC/CC
   PNG asset yet). This span should read as a confident wordmark — bold,
   tracked-out, aligned with surrounding header. */
.brand-wordmark-text {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    color: #fff;
    line-height: 1;
    padding: 0.35em 0.5em;
    background: var(--shirofes-red, #E50012);
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
    text-transform: none;
    white-space: nowrap;
}

/* Kiosk wordmark is larger — scale the text fallback up to match. */
.brand-wordmark-text.kiosk-header-wordmark,
.brand-wordmark-text[class*="kiosk"] {
    font-size: 1.4rem;
    padding: 0.5em 0.7em;
}

/* Landing wordmark (big display on index.html) — scale up. */
.brand-wordmark-text.landing-wordmark {
    font-size: 2.2rem;
    padding: 0.4em 0.7em;
    letter-spacing: 0.15em;
}

/* ── Per-brand overrides ──────────────────────────────────────────────
   Shared across brands for now (FSC accent = SHIROFES red = #E50012).
   When brand-specific accents diverge, adjust here. */
body[data-brand="fsc"] .brand-wordmark-text {
    background: #E50012;
}
body[data-brand="cc"] .brand-wordmark-text {
    background: #1B6CFF;
}

/* Title suffix area — used by pages that show "SHIROFES OS" as a small
   header label. These selectors are safe no-ops on SHIROFES pages. */
body[data-brand="fsc"] [data-replace-on-fsc] { display: none !important; }
body[data-brand="cc"]  [data-replace-on-cc]  { display: none !important; }

/* SHIROFES landing-logo is a bespoke kanji PNG (「白」 medallion). No FSC/CC
   counterpart — hide for non-SHIROFES brands so the landing wordmark stands
   alone. brand-apply.js already swaps the wordmark PNG for a text span. */
body[data-brand="fsc"] .landing-logo,
body[data-brand="cc"]  .landing-logo,
body[data-brand="ros"] .landing-logo { display: none !important; }

/* SHIROFES-only UI — demo-data buttons seed SAMURAI Open fixtures that are
   meaningless for FSC / Chross Cross admins and would pollute per-event data.
   Also: pages that don't exist in the FSC / Chross Cross workflow (cast, portal,
   crew, timetable, mc monitor, prep, debrief, reflect) are tagged this way so
   their nav tiles / buttons vanish on non-SHIROFES subdomains.
   Hide by default; only reveal when body[data-brand="shirofes-os"] is set.
   Use `display: revert` so the element's natural cascade value (e.g. a flex
   mode-card, a span, a div) is preserved — `display: inline` would clobber
   .mode-card's flex layout on SHIROFES. This avoids a flash-of-visible-tile
   before brand-apply.js runs. */
[data-shirofes-only="1"] { display: none !important; }
body[data-brand="shirofes-os"] [data-shirofes-only="1"] { display: revert !important; }

/* Events-OS-only UI (FSC / Chross Cross) — inverse of the above. Payment sync
   bridge is FSC/CC-only; SHIROFES OS uses Buzz Ticket for 2026 and has no
   reception-sheet bridge. Hide by default; `display: revert` below restores
   the element's normal cascade value (e.g. .nav-item's display:flex) rather
   than forcing a specific value — so this works for buttons, spans, divs. */
[data-events-only="1"] { display: none !important; }
body[data-brand="fsc"] [data-events-only="1"],
body[data-brand="cc"]  [data-events-only="1"],
body[data-brand="ros"] [data-events-only="1"] { display: revert !important; }

/* Direct content overrides for the SHIROFES-red theme color. Non-SHIROFES
   brands may want to adjust the accent at the CSS token layer later. For
   now the red is shared. */


/* ══════════════════════════════════════════════════════════════════════
   FSC — Funky Stadium Cup brand pack
   Applied when body[data-brand="fsc"] is set by brand-apply.js.
   ───────────────────────────────────────────────────────────────────── */

/* FSC tokens — ivory paper + diagonal scratches + grain.
   Matches the approved creative drop under
   /SFS Events/Funky Cup/Funky Stadium CUP creatives/FUNKY CUP/backdrop/. */
body[data-brand="fsc"] {
    --fsc-paper:           #f1ecdd;
    --fsc-ink:             #0a0a0a;
    --fsc-scratch-opacity: 0.48;
    --fsc-grain-opacity:   0.55;
}

/* brand-apply.js injects a `.fsc-backdrop` element as the first child of
   <body> on public-facing FSC pages. The element itself does nothing on
   SHIROFES pages (hidden by default). */
.fsc-backdrop { display: none; }
body[data-brand="fsc"] .fsc-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: var(--fsc-paper);
}
body[data-brand="fsc"] .fsc-backdrop__scratches {
    position: absolute;
    inset: 0;
    opacity: var(--fsc-scratch-opacity);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'><g stroke='%230a0a0a' stroke-linecap='square' fill='none'><line x1='-20' y1='40' x2='160' y2='-80' stroke-width='2.2'/><line x1='60' y1='180' x2='240' y2='30' stroke-width='1.5'/><line x1='200' y1='-20' x2='410' y2='200' stroke-width='3.2'/><line x1='320' y1='80' x2='500' y2='-40' stroke-width='1.8'/><line x1='440' y1='60' x2='560' y2='220' stroke-width='2.6'/><line x1='-40' y1='260' x2='140' y2='120' stroke-width='2.0'/><line x1='80' y1='380' x2='310' y2='230' stroke-width='1.4'/><line x1='260' y1='300' x2='460' y2='180' stroke-width='3.0'/><line x1='420' y1='300' x2='560' y2='440' stroke-width='1.6'/><line x1='-60' y1='460' x2='120' y2='340' stroke-width='2.4'/><line x1='150' y1='520' x2='360' y2='360' stroke-width='2.0'/><line x1='300' y1='540' x2='480' y2='420' stroke-width='1.2'/><line x1='30' y1='60' x2='210' y2='210' stroke-width='1.3'/><line x1='350' y1='420' x2='520' y2='540' stroke-width='2.2'/><line x1='180' y1='440' x2='400' y2='280' stroke-width='1.8'/></g></svg>");
    background-size: 520px 520px;
    background-repeat: repeat;
}
body[data-brand="fsc"] .fsc-backdrop__grain {
    position: absolute;
    inset: 0;
    opacity: var(--fsc-grain-opacity);
    mix-blend-mode: multiply;
    background-image:
        radial-gradient(circle at 23% 31%, rgba(0,0,0,0.06) 1px, transparent 1.5px),
        radial-gradient(circle at 67% 74%, rgba(0,0,0,0.04) 1px, transparent 1.5px),
        radial-gradient(circle at 45% 50%, rgba(0,0,0,0.03) 1px, transparent 1.4px);
    background-size: 5px 5px, 7px 7px, 11px 11px;
}
@media (max-width: 900px) {
    body[data-brand="fsc"] .fsc-backdrop__scratches { opacity: calc(var(--fsc-scratch-opacity) * 0.85); }
}
@media (max-width: 640px) {
    body[data-brand="fsc"] .fsc-backdrop__scratches {
        background-size: 360px 360px;
        opacity: calc(var(--fsc-scratch-opacity) * 0.75);
    }
}
@media (prefers-contrast: more) {
    body[data-brand="fsc"] .fsc-backdrop__scratches { opacity: 0.25; }
    body[data-brand="fsc"] .fsc-backdrop__grain     { opacity: 0.3;  }
}

/* Public-facing shells (landing, kiosk) — strip the SHIROFES red+sayagata
   surface so the ivory backdrop reads through. We keep `.landing` /
   `.kiosk-container` as the positioning container but neutralize its
   background + ::before pattern. Cards on top keep their dark chrome
   because that's the readable contrast pairing against ivory. */
body[data-brand="fsc"] .landing,
body[data-brand="fsc"] .kiosk-container {
    background: transparent !important;
}
body[data-brand="fsc"] .landing::before,
body[data-brand="fsc"] .landing::after,
body[data-brand="fsc"] .kiosk-container::before {
    display: none !important;
}

/* On ivory, the sayagata overlay inside .mode-grid reads as muddy noise.
   Turn it off. */
body[data-brand="fsc"] .mode-grid::before { display: none !important; }

/* Text colors on the ivory surface. Section labels + taglines need to flip
   from white-on-red to ink-on-ivory. Mode cards stay dark (they're their
   own inverted surface).
   Values are solid ink-black (same as register.html tokens post-v4) so the
   "mushy grey on ivory" failure mode doesn't recur here — the inline-style
   descriptions below used to composite at rgba(10,10,10, 0.62) = ~#8a8680
   on ivory, readable-ish but still grey. Now ink, hierarchy from weight. */
body[data-brand="fsc"] .section-label,
body[data-brand="fsc"] .landing-tagline {
    color: #0f1116 !important;
    text-shadow: none !important;
}
body[data-brand="fsc"] .landing > div[style*="rgba(255,255,255"] {
    color: #0f1116 !important;
    opacity: 1 !important;
}

/* Wordmark — brand-apply.js swaps the SHIROFES PNG src for the FSC PNG.
   On ivory landing we want the BLACK wordmark (high contrast), on dark
   chrome headers (admin/staff/stage/judge) we want the WHITE wordmark.
   The existing styles.css rules apply `filter: invert(1)` to the SHIROFES
   white wordmark PNG to get a black result on light surfaces; for FSC we
   already ship separate black + white PNGs, so we neutralize the filter
   wherever we've swapped to an FSC source. brand-apply.js tags the img
   with data-brand-img so the selector stays specific. */
body[data-brand="fsc"] img[data-brand-img="fsc"] {
    filter: none !important;
}
/* Landing wordmark sits on ivory — FSC black wordmark, generous max-height. */
body[data-brand="fsc"] .landing-wordmark {
    height: auto;
    max-height: 96px;
    max-width: min(92vw, 440px);
}
/* Kiosk header wordmark on ivory — black PNG. */
body[data-brand="fsc"] .kiosk-header-wordmark {
    max-height: 72px;
    max-width: min(88vw, 360px);
}
/* Header wordmark on admin/staff/stage/judge — backdrop stays dark there,
   so we keep the white PNG and leave existing sizing alone. */

/* Since the FSC landing uses its own wordmark, hide the SHIROFES kanji
   "landing-logo" medallion entirely (already set earlier in this file at
   lines 64–65, but re-asserted here for clarity alongside the rest of the
   FSC block). */

/* ══════════════════════════════════════════════════════════════════════
   CC — Chross Cross brand pack
   Applied when body[data-brand="cc"] is set by brand-apply.js.
   v135.503 — first-class creative treatment. Brand color locked at
   #1B6CFF (electric blue) — chosen from the 3 prepared per-event
   gradient examples (green/blue/orange) at SFS Events/Chross Cross/.
   Blue carries the "weekday night party" energy best (night + club +
   blue-hour) and is distinct from FSC red + SHIROFES red.
   Per-event brackets rotate the gradient color via
   eventConfig.brand.bracketAccentColor — see core/docs/cc-brand-spec.md.
   ───────────────────────────────────────────────────────────────────── */

/* CC tokens — black ink base + electric-blue accent + open-road backdrop.
   Rationale: CC is biweekly and urban/club-flavored ("a weekday night
   party" tagline). FSC = monthly ivory paper + scratches (handmade zine
   energy); SHIROFES = annual red + sayagata (traditional surface). CC
   stays cleanly distinct from both. */

/* v135.507 WCAG contrast pattern (mirrors --shirofes-red / --shirofes-red-on-dark).
   --cc-accent (#1B6CFF) is a DECORATIVE token — gradients, chips, hover
   states, non-text uses. Contrast against white = 4.32:1 (fails AA 4.5:1
   for normal text; passes 3:1 for large text + UI components). Against
   dark #0c0c1a = 4.59:1 (passes AA normal text).

   Three sibling tokens for text-on-color use:
     --cc-accent-on-light: #1A56DB → 6.10:1 on white (passes AA normal). Use
                                      for any blue text on white/ivory surfaces.
     --cc-accent-on-dark:  #4D8DFF → 6.50:1 on #0c0c1a (passes AA normal).
                                      Brighter for emphasis on dark chrome.
     --cc-accent-text-on-accent: #FFFFFF → 4.59:1+ on --cc-accent (passes AA
                                      large + UI). Use for white text ON the
                                      blue-filled chip/button.

   Migration path for failing sites: replace `color: var(--cc-accent)` (when
   the surface is light) with `color: var(--cc-accent-on-light)`. Pages that
   compose dark text on `--cc-accent` background pair `--cc-accent-text-on-accent`
   (white) for AA compliance. Documented in core/docs/cc-brand-spec.md.

   Categorical alignment: SHIROFES already does this with --shirofes-red +
   --shirofes-red-on-dark (variables.css:9). FSC's --fsc-paper / --fsc-ink is
   ivory + ink-black so AA is automatic (16:1+ both directions). */
body[data-brand="cc"] {
    --cc-ink:          #000000;
    --cc-ink-2:        #0a0a14;
    --cc-accent:       #1B6CFF;                   /* decorative-only */
    --cc-accent-on-light: #1A56DB;                /* text on white/ivory — AA normal */
    --cc-accent-on-dark:  #4D8DFF;                /* text on dark chrome — AA normal */
    --cc-accent-text-on-accent: #FFFFFF;          /* text on --cc-accent surface */
    --cc-accent-soft:  rgba(27, 108, 255, 0.28);
    --cc-line-opacity: 0.38;
    --cc-grain-opacity: 0.25;
    /* Per-event override hook. Set via eventConfig.brand.bracketAccentColor
       at runtime; brand-apply.js writes it to this CSS var, allowing each
       Chross Cross edition to rotate the gradient color (green / orange /
       magenta / etc.) without code changes. Defaults to --cc-accent.
       Per-event overrides should also set --cc-event-accent-on-light and
       --cc-event-accent-on-dark when their hue's contrast differs; otherwise
       text-on-color sites fall back to --cc-accent-on-light/-dark. */
    --cc-event-accent: var(--cc-accent);
    --cc-event-accent-on-light: var(--cc-accent-on-light);
    --cc-event-accent-on-dark:  var(--cc-accent-on-dark);
}

/* CC backdrop — open-road photo + black-to-accent vertical gradient.
   Mirrors the FSC `.fsc-backdrop` pattern exactly (3-layer fixed-position
   div injected by brand-apply.js as first child of <body>). The road
   photo lives at shared/assets/cc/backdrop.png. Gradient overlays via
   `linear-gradient` so per-event accent can swap by changing one CSS var.

   Layout intent (matches the prepared creative examples):
     • backdrop.png fades road perspective from top horizon down.
     • black-to-accent gradient sits in the upper ~40% (party-light
       glow at the horizon).
     • lower 60% stays mostly transparent so the road reads through. */
.cc-backdrop { display: none; }
body[data-brand="cc"] .cc-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: var(--cc-ink);
}
body[data-brand="cc"] .cc-backdrop__photo {
    position: absolute;
    inset: 0;
    background-image: url('shared/assets/cc/backdrop.png');
    background-size: cover;
    background-position: center bottom;
    opacity: 0.65;
}
body[data-brand="cc"] .cc-backdrop__gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            #000000 0%,
            #000000 18%,
            var(--cc-event-accent) 38%,
            transparent 62%,
            transparent 100%
        );
    mix-blend-mode: screen;
    opacity: 0.85;
}
body[data-brand="cc"] .cc-backdrop__grain {
    position: absolute;
    inset: 0;
    opacity: var(--cc-grain-opacity);
    mix-blend-mode: overlay;
    background-image:
        radial-gradient(circle at 23% 31%, rgba(255,255,255,0.06) 1px, transparent 1.5px),
        radial-gradient(circle at 67% 74%, rgba(255,255,255,0.04) 1px, transparent 1.5px);
    background-size: 5px 5px, 11px 11px;
}
@media (prefers-contrast: more) {
    body[data-brand="cc"] .cc-backdrop__gradient { opacity: 0.6; }
    body[data-brand="cc"] .cc-backdrop__grain    { opacity: 0.1; }
}

/* Public-facing shells (landing, kiosk) — strip the SHIROFES red surface
   so the .cc-backdrop element (injected by brand-apply.js) reads through.
   Mirrors the FSC pattern. */
body[data-brand="cc"] .landing,
body[data-brand="cc"] .kiosk-container {
    background: transparent !important;
}

/* ───────────────────────────────────────────────────────────────────────
 * v135.602/v135.609 — RULER OF SPACE brand skin
 *
 * v135.602-v135.608: concrete-texture backdrop on landing/bracket surfaces
 * (mirror of CC pattern). Through three opacity bumps (0.55 → 0.65 → 0.85)
 * the texture never read clearly on operator displays.
 *
 * v135.609 OPERATOR DECISION: drop the backdrop entirely. ROS pivots to a
 * clean black-on-white skin — white background across ALL pages (landing,
 * kiosk, admin, staff, judge, etc.), BLACK wordmark variant, dark legible
 * text. Minimalist brutalism via typography + contrast, not photographic
 * texture. SHIROFES (red+sayagata), FSC (ivory+scratches), CC (gradient),
 * ROS (pure white) — each brand owns a distinct surface treatment.
 * ─────────────────────────────────────────────────────────────────────── */
body[data-brand="ros"] {
    --ros-ink:       #0c0c1a;    /* near-black for text, borders, accents */
    --ros-paper:     #ffffff;    /* pure white surface */
    --ros-accent:    #0c0c1a;    /* primary accent = ink (was white in v135.608) */
    --shirofes-red:  #0c0c1a;    /* repurpose the red token to ink — match the all-mono creative voice */
}

/* v135.609 — pure-white surface across the whole body. Replaces v135.608's
   dark-ink fallback. The body background flows through every page chrome
   (landing, kiosk, admin, staff, judge, stage, etc.) unless a child element
   sets its own background. */
body[data-brand="ros"] {
    background: var(--ros-paper) !important;
    color: var(--ros-ink);
}

/* v135.609 — retire the backdrop. .ros-backdrop is no longer injected by
   brand-apply.js (see comment block in shared/brand-apply.js); this rule
   defensively hides it on any stale-cache page that still renders one. */
body[data-brand="ros"] .ros-backdrop { display: none !important; }

/* v135.609 — public-facing shells (landing, kiosk) had SHIROFES dark-red
   surfaces with sayagata patterns. Strip them so the pure-white body
   shows through, mirroring the FSC pattern for the same shell selectors. */
body[data-brand="ros"] .landing,
body[data-brand="ros"] .kiosk-container {
    background: transparent !important;
}
body[data-brand="ros"] .landing::before,
body[data-brand="ros"] .landing::after,
body[data-brand="ros"] .kiosk-container::before {
    display: none !important;
}
body[data-brand="ros"] .mode-grid::before { display: none !important; }

/* v135.612 — categorical SHIROFES-creative gate for non-SHIROFES brands.
   Following the v135.607 .landing-logo precedent: SHIROFES-specific decorative
   elements (kasumi mist accents, sayagata pattern overlays) should not render
   on FSC / CC / ROS unless the page explicitly opts in via data-shirofes-only="1".
   Audit 2026-05-18: 6 pages (admin/judge/staff/stage/post-event/export) have
   <span class="kasumi-accent-sm"> in their page headers without a gate, and
   admin.html has a .kasumi-divider in its content. .mode-card::before applies
   sayagata to every mode-card on the landing across all brands.
   Rather than chase 7 page edits, hide the classes themselves on non-SHIROFES.
   SHIROFES retains all SHIROFES creative as default behavior. */
body[data-brand="fsc"] .kasumi-accent-sm,
body[data-brand="cc"]  .kasumi-accent-sm,
body[data-brand="ros"] .kasumi-accent-sm,
body[data-brand="fsc"] .kasumi-accent,
body[data-brand="cc"]  .kasumi-accent,
body[data-brand="ros"] .kasumi-accent,
body[data-brand="fsc"] .kasumi-divider,
body[data-brand="cc"]  .kasumi-divider,
body[data-brand="ros"] .kasumi-divider {
    display: none !important;
}
body[data-brand="fsc"] .mode-card::before,
body[data-brand="cc"]  .mode-card::before,
body[data-brand="ros"] .mode-card::before {
    display: none !important;
}

/* v135.609 — section labels + landing taglines flip from white-on-red to
   ink-on-white. Mirrors the FSC pattern for the same selectors. Inline
   white-rgba text on landing surfaces also gets re-inked. */
body[data-brand="ros"] .section-label,
body[data-brand="ros"] .landing-tagline {
    color: var(--ros-ink) !important;
    text-shadow: none !important;
}
body[data-brand="ros"] .landing > div[style*="rgba(255,255,255"] {
    color: var(--ros-ink) !important;
    opacity: 1 !important;
}

/* v135.609 — subtle drop shadow on ROS BLACK wordmark on white surfaces.
   Down from v135.608's hard 2px-offset shadow (which made sense for white
   wordmark on concrete backdrop). On white BG with black wordmark, a soft
   1px offset adds just enough depth without looking like a glitch. */
body[data-brand="ros"] .landing-wordmark,
body[data-brand="ros"] .header-wordmark,
body[data-brand="ros"] .kiosk-header-wordmark {
    filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.18));
}

/* v135.605/v135.609 FOUC guard preserved — hide the wordmark on ROS until
   brand-apply.js swaps the src + sets data-brand-applied. Prevents the
   SHIROFES wordmark from flashing for ~50-150ms before being replaced. */
body[data-brand="ros"] .landing-wordmark:not([data-brand-applied]),
body[data-brand="ros"] .header-wordmark:not([data-brand-applied]),
body[data-brand="ros"] .kiosk-header-wordmark:not([data-brand-applied]) {
    visibility: hidden;
}

/* v135.609 — wordmark IMG already swapped to black PNG via brand-registry;
   neutralize any inherited invert() filter that styles.css applies to the
   default SHIROFES white wordmark on light surfaces (mirror of FSC pattern). */
body[data-brand="ros"] img[data-brand-img="ros"] {
    filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.18)) !important;
}

/* ───────────────────────────────────────────────────────────────────────
 * v135.611 — page-private CSS-variable namespace overrides for ROS
 *
 * Categorical fix for the "white-on-white text" class of bug that surfaced
 * on prep.html after v135.609. Root cause: each backstage page defines its
 * OWN private CSS-variable namespace inline (--prep-text, --prep-text-dim,
 * --prep-text-faint, --prep-bg, --prep-surface, etc.) that the brand.css
 * platform-token overrides never reach. When v135.609 flipped the body
 * background to white, the page-local white-rgba text tokens turned
 * invisible because nothing flipped them in parallel.
 *
 * Audit (grep ^\\s*--*-(bg|surface|text|border|paper|ink|card) across all
 * 17 production HTML pages) shows only THREE private namespaces in use:
 *   • prep.html: full --prep-* token set (~12 vars)
 *   • debrief.html: --card-bg
 *   • live.html: --card-bg
 *
 * Every other page (admin/staff/stage/mc/mc-script/portal/cast/judge/dj/
 * post-event/reflect/crew/kiosk/register/register-cast/index) routes
 * through platform tokens (--text-primary/--text-secondary/etc.) so the
 * existing brand.css ROS rules already cover them via cascade.
 *
 * Future protection (plan-doc'd for v135.612+): add a CI gate that
 * flags new page-private --*-(text|bg|surface|border) namespaces unless
 * brand.css has a corresponding `body[data-brand="ros"]` override block.
 * Mechanically prevents this class of bleed before next ship.
 * ─────────────────────────────────────────────────────────────────────── */

/* prep.html private namespace — dark navy chrome by default; for ROS we
   flip to white page surface + light-grey content panels + ink-on-light
   text. Panels keep visual separation from the page via a slightly
   darker shade (#f5f5f7) plus a 1px ink border via --prep-border. */
body[data-brand="ros"] {
    --prep-bg:            #ffffff;
    --prep-surface:       #f6f6f8;
    --prep-surface-hover: #ececef;
    --prep-border:        rgba(0, 0, 0, 0.14);
    --prep-text:          #0c0c1a;
    --prep-text-dim:      rgba(12, 12, 26, 0.72);
    --prep-text-faint:    rgba(12, 12, 26, 0.5);
    /* --prep-accent intentionally inherits from --shirofes-red which is
       already re-aliased to ink for ROS — so .prep-battle-card's left
       accent rail renders as a clean black bar, not red. */
    /* Status colors stay close to their defaults but darkened a notch
       so they read on white. The default danger/warn/info/success
       text colors were tuned for dark BG — on white they need
       saturated, slightly-darker equivalents. */
    --prep-danger-text:   #b91c1c;
    --prep-warn-text:     #b45309;
    --prep-info-text:     #1d4ed8;
    --prep-success-text:  #047857;
}

/* prep.html body explicitly uses `color: var(--text-primary, #fff)` at
   the body scope — that platform token stays white-rgba globally for ROS
   (other surfaces like .mode-card-desc on landing rely on it). Override
   color directly at the prep page-shell level via the .prep-mast +
   .prep-content + .prep-sidebar containers so any direct-body text on
   prep flips to ink without affecting other pages. */
body[data-brand="ros"] .prep-mast,
body[data-brand="ros"] .prep-content,
body[data-brand="ros"] .prep-sidebar,
body[data-brand="ros"] .prep-card,
body[data-brand="ros"] .prep-modal-box {
    color: var(--prep-text);
}

/* debrief.html + live.html each define a single --card-bg as dark navy
   for their content panels. On ROS we flip to a light-grey card BG so
   ink text inside the cards reads. Both pages use this token uniformly
   so a single override is enough. */
body[data-brand="ros"] {
    --card-bg: #f6f6f8;
}

/* v135.612 — explicit FSC + CC inheritance decisions for the prep + card
   namespaces. The check-brand-private-token-coverage CI gate (v135.612)
   requires every page-private namespace with brand-aware overrides to
   declare a block for EVERY registered brand, not just the ones that
   currently differ from the default. FSC + CC operators see the
   SHIROFES default dark chrome on prep / debrief / live today (FSC has
   ivory landing/kiosk but dark backstage, mirroring the FSC pattern in
   styles.css; CC similar). Restating those values explicitly here
   satisfies the gate AND surfaces an explicit decision in code for
   future maintainers — "yes, FSC + CC prep is intentionally the same
   dark navy as SHIROFES." If a future ship wants FSC ivory backstage,
   this block is where the values get flipped. */
body[data-brand="fsc"] {
    --prep-bg:            #0c0c1a;
    --prep-surface:       #14142a;
    --prep-surface-hover: #1c1c3a;
    --prep-border:        rgba(255,255,255,0.09);
    --prep-text:          #fff;
    --prep-text-dim:      rgba(255,255,255,0.7);
    --prep-text-faint:    rgba(255,255,255,0.45);
    --prep-danger-text:   #fca5a5;
    --prep-warn-text:     #fbbf24;
    --prep-info-text:     #93c5fd;
    --prep-success-text:  #34d399;
    --card-bg:            #1a1a32;
}
body[data-brand="cc"] {
    --prep-bg:            #0c0c1a;
    --prep-surface:       #14142a;
    --prep-surface-hover: #1c1c3a;
    --prep-border:        rgba(255,255,255,0.09);
    --prep-text:          #fff;
    --prep-text-dim:      rgba(255,255,255,0.7);
    --prep-text-faint:    rgba(255,255,255,0.45);
    --prep-danger-text:   #fca5a5;
    --prep-warn-text:     #fbbf24;
    --prep-info-text:     #93c5fd;
    --prep-success-text:  #34d399;
    --card-bg:            #1a1a32;
}

/* ───────────────────────────────────────────────────────────────────────
 * v135.609 — admin-auth.js overlay surface flip for ROS
 *
 * shared/admin-auth.js renders the sign-in overlay (#authOverlay) with
 * inline styles that read `var(--shirofes-black, #0c0c1a)` for the full-
 * page background and `var(--bg-card, #1a1a32)` for the sign-in/access-
 * request panels. Inline text colors read `var(--text-secondary, white-
 * rgba)` and similar white-tinted fallbacks — invisible on a white panel.
 *
 * Four-layer fix (v135.609 → v135.609 hotfix):
 *   1. Force #authOverlay background to white (overrides the inline
 *      --shirofes-black via !important — we don't redefine the token
 *      globally because stage.css uses it as a dark text color on amber).
 *   2. Override --bg-card + --text-* tokens SCOPED TO #authOverlay so
 *      the inline `var()` references resolve to ink-on-white inside the
 *      overlay WITHOUT cascading to other dark surfaces on the page
 *      (e.g. .mode-card-desc on landing reads var(--text-secondary)
 *      and needs to stay white-rgba for legibility on dark cards).
 *      Initial v135.609 ship placed these on body[data-brand="ros"]
 *      which bled into the landing mode-cards — operator flagged via
 *      screenshot showing dark-ink description text on dark navy cards.
 *      Scoping to #authOverlay isolates the white-skin token bundle.
 *   3. Border + text-color overrides on the panels themselves for any
 *      child element that doesn't pick up the var() flip cleanly.
 *   4. Button/form-input overrides scoped to #authOverlay so .btn-primary
 *      / .form-input on other surfaces (admin.html etc.) stay default.
 * ─────────────────────────────────────────────────────────────────────── */
body[data-brand="ros"] #authOverlay {
    --bg-card:        #ffffff;
    --text-primary:   #0c0c1a;
    --text-secondary: rgba(12, 12, 26, 0.72);
    --text-tertiary:  rgba(12, 12, 26, 0.55);
    --border-color:   rgba(0, 0, 0, 0.14);
    background: var(--ros-paper) !important;
    color: var(--ros-ink);
}
body[data-brand="ros"] #authSignInPanel,
body[data-brand="ros"] #authAccessRequestPanel {
    background: var(--ros-paper) !important;
    border: 2px solid var(--ros-ink) !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.08);
    color: var(--ros-ink) !important;
}
/* Inline-styled headings + paragraphs inside the overlay had no explicit
   color (inherited from --shirofes-black=#0c0c1a → white text in default
   skin); on the white panel they need an explicit ink color. */
body[data-brand="ros"] #authOverlay h1,
body[data-brand="ros"] #authOverlay h2,
body[data-brand="ros"] #authOverlay p,
body[data-brand="ros"] #authOverlay label,
body[data-brand="ros"] #authOverlay form span,
body[data-brand="ros"] #authOverlay #authCurrentEmailDisplay {
    color: var(--ros-ink) !important;
}
/* Form inputs (.form-input) default to dark surface; flip to white-on-ink-
   border so the email/password fields read legibly on the white panel. */
body[data-brand="ros"] #authOverlay .form-input {
    background: #ffffff !important;
    color: var(--ros-ink) !important;
    border: 1px solid rgba(0, 0, 0, 0.22) !important;
}
body[data-brand="ros"] #authOverlay .form-input:focus {
    border-color: var(--ros-ink) !important;
    outline: 2px solid rgba(0, 0, 0, 0.15);
    outline-offset: 1px;
}
/* Primary action button (Sign in / Submit request) inherits .btn-primary
   which is brand-red on default skin. For ROS we want it black-on-white. */
body[data-brand="ros"] #authOverlay .btn.btn-primary {
    background: var(--ros-ink) !important;
    color: #ffffff !important;
    border: 2px solid var(--ros-ink) !important;
}
body[data-brand="ros"] #authOverlay .btn.btn-secondary {
    background: #ffffff !important;
    color: var(--ros-ink) !important;
    border: 2px solid var(--ros-ink) !important;
}
body[data-brand="ros"] #authOverlay .btn.btn-ghost {
    background: transparent !important;
    color: rgba(12, 12, 26, 0.65) !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
}
/* "新規登録 / Create account" link uses --shirofes-red which we re-aliased
   to ink for ROS — already correct, but force-override for clarity. */
body[data-brand="ros"] #authOverlay a {
    color: var(--ros-ink) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
body[data-brand="cc"] .landing::before,
body[data-brand="cc"] .landing::after,
body[data-brand="cc"] .kiosk-container::before {
    display: none !important;
}
body[data-brand="cc"] .mode-grid::before { display: none !important; }

/* Text colors on CC's ink-navy — near-white with cyan-tinted secondary. */
body[data-brand="cc"] .section-label,
body[data-brand="cc"] .landing-tagline {
    color: rgba(240, 248, 255, 0.94) !important;
    text-shadow: none !important;
}
body[data-brand="cc"] .landing > div[style*="rgba(255,255,255"] {
    color: rgba(200, 230, 255, 0.68) !important;
}

/* Landing wordmark text-span — bigger footprint for landing surface.
   v135.503 — text-span fallback retained for surfaces without a logo
   image. When shared/assets/cc/wordmark-*.png ships (handled by
   brand-apply.js' BRAND_WORDMARKS map below), this rule applies only
   to elements that didn't get the image swap. */
body[data-brand="cc"] .brand-wordmark-text.landing-wordmark {
    font-size: 2.5rem;
    padding: 0.45em 0.75em;
    letter-spacing: 0.12em;
    background: var(--cc-accent);
    color: #ffffff;    /* white text on electric-blue for night-party energy */
}

/* Kiosk header wordmark text-span — CC keeps electric-blue-on-dark. */
body[data-brand="cc"] .brand-wordmark-text.kiosk-header-wordmark {
    background: var(--cc-accent);
    color: #ffffff;
}

/* CC img wordmark — neutralize the SHIROFES `filter: invert(1)` that the
   base styles.css applies (white wordmark PNG → black on light surfaces).
   CC ships dedicated black + white PNGs so we want the source unchanged.
   Mirrors the FSC pattern at line 199. */
body[data-brand="cc"] img[data-brand-img="cc"] {
    filter: none !important;
}

/* Header wordmark on admin/staff/stage/judge — CC stays cyan-on-dark
   chrome; small size already set by base rule. */

/* CC accent threading — reuse SHIROFES's --shirofes-red token in a few
   places (header bars, connection dots, primary buttons). We remap via
   --shirofes-red inside the CC scope so existing components pick up the
   cyan without having to rewrite every selector.
   NOTE: Only safe because --shirofes-red is used exclusively as an
   ACCENT, not as a literal brand color in SHIROFES-specific chrome.
   The FSC section intentionally does NOT remap this for the same reason
   (FSC uses #E50012 which happens to equal --shirofes-red by chance).

   v135.511 WCAG fix: --shirofes-red is used as `color: var(--shirofes-red)`
   text across ~25 dark-chrome pages (admin/stage/live/dj/judge/etc.). The
   v135.507 remap to --cc-accent (#1B6CFF, 4.32:1 on white / 3.78:1 on dark
   #0c0c1a) failed AA on both. v135.511 remaps --shirofes-red itself to
   --cc-accent-on-dark (#4D8DFF, 6.50:1 on dark — passes AA), since the
   overwhelmingly common surface is dark. Light-surface pages
   (register.html, kiosk/landing, privacy.html) override with
   --cc-accent-on-light (#1A56DB) inside their local body styles — see
   the per-page light-surface overrides at the bottom of this file. */
body[data-brand="cc"] {
    --shirofes-red: var(--cc-accent-on-dark);
    --shirofes-red-on-dark: var(--cc-accent-on-dark);
}

/* Light-surface CC pages — override --shirofes-red to the AA-on-light
   variant so text inherits readable contrast (#1A56DB = 6.10:1 on white).
   This pattern is selector-based not body-class-based; it catches public
   pages that compose against ivory/white surfaces.

   register.html, privacy.html: already have local `body { ... }` light
   token blocks; this rule slots in via :where() so specificity matches.
   kiosk.html landing surface: --kiosk-bg is ivory under FSC/CC.
   landing index: .landing has transparent surface; backdrop reads behind. */
body[data-brand="cc"].light-surface,
body[data-brand="cc"][data-light-surface="1"] {
    --shirofes-red: var(--cc-accent-on-light);
    --shirofes-red-on-dark: var(--cc-accent-on-light);
}

/* Per-page light-surface markers — register.html + privacy.html + kiosk
   public landing all carry data-light-surface="1" on body since v135.511.
   For pages that don't (yet) carry the marker, the dark-on-dark default is
   correct — most pages are dark chrome. */