/*
  render-the-dojo.css — "The Dojo" (SKIN-G01) Render layer
  token map aligned to BU-CORE-UIUX-001 §4.1, 2026-07-03
  ===========================================================================
  Fires when data-theme="the-dojo". ARENA/GAMIFIED category (student-facing
  only per BUP-UI-THEME-001 Rule 2).

  SOURCING CLASS: [AUTHORED PROPOSAL -- pending owner approval; no source
  values existed]. BUP-UI-SKIN-002 SKIN-G01 (lines 49-53) describes this
  skin only in prose: "Deep reds and blacks. Brush-stroke visual accents.
  Aged wood texture references... dark, respectful, historical." No hex
  values, no measured CSS, no prior mockup exists for The Dojo anywhere in
  the read documents. Every hex below is an authored interpretation of that
  prose description, built on the SAME structural/glass-recipe pattern as
  the measured Fight Night/Cobalt Dark siblings (R-S7-10: no structural
  fork) with only the color family swapped from cobalt-blue to deep-red.

  Contrast check (WCAG AA, BUP-UI-SKIN-001 L-9): text-primary #f5f0ea on
  canvas #150707 = ~17.9:1. text-secondary #c9a8a0 on canvas = ~7.3:1 —
  passes 4.5:1 minimum.
  ===========================================================================
*/

:root[data-theme="the-dojo"] {
  --theme-bg-canvas: #150707;
  --theme-bg-surface: rgba(255, 245, 240, 0.04);
  --theme-bg-frosted: var(--theme-bg-surface); /* alias — dialect has no distinct frosted-fill token; §4.1 requires this name, value derived from bg-surface */
  --theme-bg-card: rgba(255, 245, 240, 0.07);
  --theme-x-bg-sunken: #150707;
  --theme-border-inactive: rgba(255, 245, 240, 0.12);
  --theme-border-active: #8a1414;

  --theme-text-main: #f5f0ea;
  --theme-x-text-secondary: #c9a8a0;
  --theme-text-muted: #a8827a;
  --theme-x-text-inverse: #150707;
  --theme-x-text-disabled: #6b5350;

  --theme-accent-primary: #8a1414;
  --theme-accent-secondary: var(--theme-accent-primary); /* alias — no distinct secondary accent hue exists in sources; §4.1 requires this name */
  --theme-x-accent-hover: #b81e1e;
  --theme-x-accent-active: #6e0f0f;
  --theme-x-accent-disabled: rgba(138, 20, 20, 0.4);
  --theme-x-accent-text: #f5f0ea;
  --theme-x-focus-ring: #8a1414;

  --theme-state-healthy: #5c7a3a;
  --theme-state-warning: #c9a04a;
  --theme-state-error: #f5f0ea;
  --theme-x-state-info: #8a1414;

  --theme-x-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --theme-x-elevation-2: 0 15px 35px rgba(0, 0, 0, 0.35);
  --theme-x-elevation-3: 0 0 20px rgba(138, 20, 20, 0.5);
  --theme-accent-glow: 0 0 20px rgba(138, 20, 20, 0.5); /* derived — same glow value as --theme-x-elevation-3 (measured/authored glow shadow); §4.1 requires this name */
  --theme-accent-glow-secondary: 0 0 20px rgba(138, 20, 20, 0.5); /* derived — no distinct secondary glow exists in sources; aliased to primary glow value */
  --theme-x-glass-tint: rgba(255, 245, 240, 0.04);
  --theme-backdrop-blur: 20px;

  --theme-x-font-family-base: var(--structure-font-family);
  --theme-x-font-size-sm: 0.875rem;
  --theme-x-font-size-base: 1rem;
  --theme-x-font-size-lg: 1.25rem;
  --theme-x-font-size-xl: 1.75rem;
  --theme-x-line-height-base: 1.5;
  --theme-x-space-unit: 0.5rem;
}

/* Structural selector list mirrors render-greyscale-skeleton.css / render-fight-night.css
   1:1 (R-S7-10 / D-S07-FW-01: structure never forks per skin — value-only skin). */
:root[data-theme="the-dojo"] body {
  background-color: var(--theme-bg-canvas);
  color: var(--theme-text-main);
}

:root[data-theme="the-dojo"] a {
  color: var(--theme-text-main);
}

:root[data-theme="the-dojo"] h1,
:root[data-theme="the-dojo"] h2,
:root[data-theme="the-dojo"] h3,
:root[data-theme="the-dojo"] h4,
:root[data-theme="the-dojo"] h5,
:root[data-theme="the-dojo"] h6 {
  color: var(--theme-text-main);
}

:root[data-theme="the-dojo"] p,
:root[data-theme="the-dojo"] li {
  color: var(--theme-x-text-secondary);
}

:root[data-theme="the-dojo"] .bu-panel {
  background-color: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-inactive);
  border-top: 2px solid var(--theme-border-active);
  border-bottom: 2px solid var(--theme-border-active);
  box-shadow: var(--theme-x-elevation-2);
  backdrop-filter: blur(var(--theme-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--theme-backdrop-blur));
  color: var(--theme-text-main);
}

:root[data-theme="the-dojo"] .bu-rail {
  background-color: rgba(21, 7, 7, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-main);
}

:root[data-theme="the-dojo"] .bu-soffit {
  border-top: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-muted);
  font-size: var(--structure-text-sm, 0.875rem);
}

:root[data-theme="the-dojo"] .bu-soffit a {
  color: var(--theme-text-muted);
}

:root[data-theme="the-dojo"] .bu-soffit a:hover {
  color: var(--theme-text-main);
}

:root[data-theme="the-dojo"] .bu-brick {
  color: var(--theme-x-text-secondary);
}

:root[data-theme="the-dojo"] .bu-badge-tag {
  background-color: var(--theme-bg-card);
  border: 1px solid var(--theme-border-active);
  color: var(--theme-text-main);
}

:root[data-theme="the-dojo"] .bu-control {
  background-color: var(--theme-bg-surface);
  border-color: var(--theme-border-active);
  color: var(--theme-text-main);
}

:root[data-theme="the-dojo"] .bu-control:hover {
  background-color: var(--theme-x-accent-hover);
  color: var(--theme-x-text-inverse);
}

:root[data-theme="the-dojo"] .bu-control:focus-visible {
  outline: 2px solid var(--theme-x-focus-ring);
  outline-offset: 2px;
}

:root[data-theme="the-dojo"] .bu-btn {
  background-color: rgba(255, 245, 240, 0.1);
  border-top: 2px solid var(--theme-border-active);
  border-bottom: 2px solid var(--theme-border-active);
  border-left-color: transparent;
  border-right-color: transparent;
  color: var(--theme-x-accent-text);
}

:root[data-theme="the-dojo"] .bu-btn:hover {
  background-color: rgba(255, 245, 240, 0.16);
  border-top-color: var(--theme-x-accent-hover);
  border-bottom-color: var(--theme-x-accent-hover);
}

:root[data-theme="the-dojo"] .bu-btn:disabled {
  background-color: rgba(255, 245, 240, 0.04);
  border-top-color: var(--theme-x-accent-disabled);
  border-bottom-color: var(--theme-x-accent-disabled);
  color: var(--theme-x-text-disabled);
}

:root[data-theme="the-dojo"] .bu-btn-secondary {
  background-color: transparent;
  border-color: var(--theme-border-active);
  color: var(--theme-text-main);
}

:root[data-theme="the-dojo"] .bu-btn-secondary:hover {
  border-color: var(--theme-x-accent-hover);
  color: var(--theme-x-accent-hover);
}

/* PG-035 demo skin switcher active-selection state (D-S07-SKIN-02 switcher UI). */
:root[data-theme="the-dojo"] .bu-btn-secondary.is-active {
  background-color: var(--theme-accent-primary);
  border-color: var(--theme-accent-primary);
  color: var(--theme-x-accent-text);
}

:root[data-theme="the-dojo"] .bu-btn:focus-visible,
:root[data-theme="the-dojo"] .bu-btn-secondary:focus-visible {
  outline: 2px solid var(--theme-x-focus-ring);
  outline-offset: 2px;
}

:root[data-theme="the-dojo"] .bu-gate {
  background-color: var(--theme-x-glass-tint);
  backdrop-filter: blur(var(--theme-backdrop-blur));
}

/* Brand lockup accent: the "UP" half of BELT|UP carries the accent hue, the
   rest inherits .bu-nav-brand's text colour. Uniform across every skin per
   D-S07-SKIN-02 (no partial-skin fallthrough) — added 2026-08-21 when an audit
   found this styled in only 2 of 20 skins. Uses the standard accent token, NOT
   the lighter hover tone. */
:root[data-theme="the-dojo"] .bu-nav-brand span {
  color: var(--theme-accent-primary);
}

/* --- Footer band -----------------------------------------------------------
   Ported 2026-08-21 to close a partial-skin fallthrough: this family was
   coloured in only 1 of 20 Public skins, so the footer rendered untinted and
   dividerless in every other skin (D-S07-SKIN-02). Token-for-token identical to
   render-greyscale-skeleton.css — no new values invented; each token resolves
   to this skin's own palette. */
:root[data-theme="the-dojo"] .bu-footer {
  border-top: 2px solid var(--theme-border-inactive);
  background-color: var(--theme-bg-surface);
}

:root[data-theme="the-dojo"] .bu-footer-heading {
  color: var(--theme-text-main);
}

:root[data-theme="the-dojo"] .bu-footer-copyright {
  border-top: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-muted);
}

:root[data-theme="the-dojo"] .bu-footer-lab-link {
  color: var(--theme-text-muted);
}

:root[data-theme="the-dojo"] .bu-link-stealth {
  color: var(--theme-text-muted);
}

:root[data-theme="the-dojo"] .bu-link-stealth:hover {
  color: var(--theme-text-main);
}

/* ==== #234 CONSTRUCTION FAMILY BEGIN ==== (SYNTHWAVE GRID, family 6 of 8) ====
   Skin "the-dojo" belongs to the SYNTHWAVE GRID construction family. Colour variants of one
   family share this construction and differ only in the variables above. */
/* family variables: derived from this skin's own palette; contrast pairs verified >= 4.5:1 (fill/ink), >= 3:1 (edge, focus) against the canvas */
:root[data-theme="the-dojo"] {
  --fam-edge: #c42525;
  --fam-hi: #e8786a;
  --fam-hov: #a01a1a;
  --fam-fill: #8a1414;
  --fam-ink: #f5f0ea;
  --fam-deep: #4a0a0a;
  --fam-focus: #e8786a;
  --fam-glow: color-mix(in srgb, #c42525 55%, transparent);
  --theme-text-muted: #ab867e; /* AA repair (>= 4.7:1 on canvas, surface and card), hue kept semantic */
  --theme-state-healthy: #7e9663; /* AA repair (>= 4.7:1 on canvas, surface and card), hue kept semantic */
  --theme-state-error: #ff6b6b; /* AA repair (>= 4.7:1 on canvas, surface and card), hue kept semantic */
}

/* ===========================================================================
   CONSTRUCTION FAMILY 6 of 8 — SYNTHWAVE GRID  [#234 / R-0823-01 / R-0823-02]
   Reference: six-terminals.html 05 "Synthwave Grid -- gold on black, angular".
   Frame strategy: a heavy 2px outline on an ANGULAR plate (opposite corners
   cut larger than Crystal Gate and on the other diagonal: top-right and
   bottom-left), a ruled grid etched into the plate, and a hexagon-chip
   cluster. The outline pseudo carries the same clip as the plate.
   Light source: neon edge (inset glow) + ruled header with bloom.
   Palette discipline: one saturated hue on pure black.
   Type: bold, wide-tracked uppercase, display-weight headings.
   NOTE: no backdrop-filter on the clipped plate (#228).
   [PILLAR-1: Von Restorff -- the one saturated hue on black makes the call to
   action the most distinct object on the page.]
   =========================================================================== */
:root[data-theme="the-dojo"] body {
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--fam-edge) 9%, transparent) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--fam-edge) 9%, transparent) 0 1px, transparent 1px 36px);
  background-size: 100% 100%;
}
:root[data-theme="the-dojo"] .bu-panel {
  border: 0;
  border-radius: 0;
  isolation: isolate;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: var(--theme-bg-canvas);
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--fam-edge) 14%, transparent) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--fam-edge) 14%, transparent) 0 1px, transparent 1px 30px),
    linear-gradient(color-mix(in srgb, var(--theme-bg-canvas) 88%, transparent), color-mix(in srgb, var(--theme-bg-canvas) 88%, transparent));
  box-shadow: none;
}
/* grid strokes are kept at 14% of the accent: thin, low-contrast lines that
   never cut through body text legibility (the reference runs them at ~13%). */
:root[data-theme="the-dojo"] .bu-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
  box-shadow: inset 0 0 0 2px var(--fam-edge), inset 0 0 40px color-mix(in srgb, var(--fam-edge) 18%, transparent);
}
/* hexagon chip, bottom-right (reference .s5__hex) */
:root[data-theme="the-dojo"] .bu-panel::after {
  content: "";
  position: absolute;
  right: 30px;
  bottom: 14px;
  width: 13px;
  height: 15px;
  pointer-events: none;
  background: var(--fam-edge);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  opacity: 0.6;
}
:root[data-theme="the-dojo"] .bu-panel > .bu-reveal:first-child {
  border-bottom: 2px solid var(--fam-edge);
  box-shadow: 0 6px 10px -8px var(--fam-glow);
  padding-bottom: 0.6rem;
}
:root[data-theme="the-dojo"] h1, :root[data-theme="the-dojo"] h2, :root[data-theme="the-dojo"] h3 { font-weight: 700; overflow-wrap: break-word; }
:root[data-theme="the-dojo"] .bu-panel h2, :root[data-theme="the-dojo"] .bu-panel h3, :root[data-theme="the-dojo"] .bu-panel-title, :root[data-theme="the-dojo"] .bu-panel-headline {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 14px color-mix(in srgb, var(--fam-edge) 80%, transparent);
}
:root[data-theme="the-dojo"] .bu-panel-sublabel, :root[data-theme="the-dojo"] .bu-badge-tag, :root[data-theme="the-dojo"] .bu-metric-label, :root[data-theme="the-dojo"] .bu-panel-footnote {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-weight: 600;
  font-size: var(--structure-text-xs, 0.75rem);
  color: var(--fam-hi);
}
:root[data-theme="the-dojo"] .bu-badge-tag { background: transparent; border: 0; border-top: 2px solid var(--fam-edge); border-radius: 0; padding: 0.2rem 0.5rem; }
:root[data-theme="the-dojo"] .bu-rail { border-bottom: 2px solid var(--fam-edge); box-shadow: 0 8px 14px -12px var(--fam-glow); }
:root[data-theme="the-dojo"] .bu-nav-links a { font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--structure-text-sm, 0.875rem); }
:root[data-theme="the-dojo"] .bu-nav-links a:hover, :root[data-theme="the-dojo"] .bu-nav-links a.active { color: var(--fam-hi); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-color: var(--fam-edge); }
/* angular buttons: top-right and bottom-left corners cut; outline drawn inside */
:root[data-theme="the-dojo"] .bu-btn {
  background: var(--fam-fill);
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  color: var(--fam-ink);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: none;
}
:root[data-theme="the-dojo"] .bu-btn:hover { background: var(--fam-hov); color: var(--fam-ink); }
:root[data-theme="the-dojo"] .bu-btn:focus-visible, :root[data-theme="the-dojo"] .bu-btn-secondary:focus-visible { outline-offset: -5px; outline-color: var(--fam-focus); }
:root[data-theme="the-dojo"] .bu-btn-secondary {
  background: transparent;
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  box-shadow: inset 0 0 0 2px var(--fam-edge);
  color: var(--fam-hi);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
:root[data-theme="the-dojo"] .bu-btn-secondary:hover { background: color-mix(in srgb, var(--fam-edge) 20%, transparent); color: var(--fam-hi); box-shadow: inset 0 0 0 2px var(--fam-hi); }
:root[data-theme="the-dojo"] .bu-btn-secondary.is-active { background: var(--fam-fill); color: var(--fam-ink); }
:root[data-theme="the-dojo"] .bu-control, :root[data-theme="the-dojo"] .bu-field input[type="text"], :root[data-theme="the-dojo"] .bu-field input[type="email"], :root[data-theme="the-dojo"] .bu-field input[type="tel"],
:root[data-theme="the-dojo"] .bu-field input[type="password"], :root[data-theme="the-dojo"] .bu-field input[type="number"], :root[data-theme="the-dojo"] .bu-field select, :root[data-theme="the-dojo"] .bu-field textarea,
:root[data-theme="the-dojo"] input.bu-input, :root[data-theme="the-dojo"] select.bu-input, :root[data-theme="the-dojo"] textarea.bu-input {
  background: var(--theme-bg-canvas);
  border: 2px solid var(--fam-edge);
  border-radius: 0;
  color: var(--theme-text-main);
}
:root[data-theme="the-dojo"] .bu-control:hover, :root[data-theme="the-dojo"] .bu-field input:hover, :root[data-theme="the-dojo"] .bu-field select:hover, :root[data-theme="the-dojo"] .bu-field textarea:hover { border-color: var(--fam-hi); background: var(--theme-bg-canvas); color: var(--theme-text-main); }
:root[data-theme="the-dojo"] .bu-table th, :root[data-theme="the-dojo"] .bu-table td { border-bottom: 1px solid color-mix(in srgb, var(--fam-edge) 35%, transparent); }
:root[data-theme="the-dojo"] .bu-table th { text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; border-bottom: 2px solid var(--fam-edge); }

/* --- shared floors every family honours (state tokens, focus, option list) --- */
:root[data-theme="the-dojo"] .bu-field select option,
:root[data-theme="the-dojo"] select.bu-input option {
  background-color: var(--theme-bg-canvas);
  color: var(--theme-text-main);
}
:root[data-theme="the-dojo"] .bu-btn:focus-visible,
:root[data-theme="the-dojo"] .bu-btn-secondary:focus-visible,
:root[data-theme="the-dojo"] .bu-control:focus-visible,
:root[data-theme="the-dojo"] .bu-field input:focus-visible,
:root[data-theme="the-dojo"] .bu-field select:focus-visible,
:root[data-theme="the-dojo"] .bu-field textarea:focus-visible,
:root[data-theme="the-dojo"] .bu-input:focus-visible,
:root[data-theme="the-dojo"] .bu-nav-links a:focus-visible,
:root[data-theme="the-dojo"] .bu-tab-btn:focus-visible {
  outline: 2px solid var(--fam-focus);
  outline-offset: 2px;
}
:root[data-theme="the-dojo"] .bu-btn:disabled,
:root[data-theme="the-dojo"] .bu-btn-secondary:disabled {
  background: transparent;
  border-color: var(--theme-x-accent-disabled);
  color: var(--theme-x-text-disabled);
  box-shadow: none;
  filter: none;
}
:root[data-theme="the-dojo"] .bu-status-dot.is-healthy { background: var(--theme-state-healthy); }
:root[data-theme="the-dojo"] .bu-status-dot.is-warning,
:root[data-theme="the-dojo"] .bu-status-dot.is-alert { background: var(--theme-state-warning); }
:root[data-theme="the-dojo"] .bu-status-dot.is-error { background: var(--theme-state-error); }
:root[data-theme="the-dojo"] .bu-field-error { color: var(--theme-state-error); }
/* --- overlay / scroll-container panels (Admin drawers, slide-outs, the report widget) ---
   A family frame is drawn on pseudo-elements and a plate that would scroll away with the
   content, and some panel margins would leave a closed drawer peeking in. Overlay panels
   therefore get a solid attached fill, one plain outline, no pseudo frame, no clip. */
:root[data-theme="the-dojo"] .bu-drawer, :root[data-theme="the-dojo"] .bu-slideout-content, :root[data-theme="the-dojo"] .bu-report-widget-panel {
  clip-path: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: var(--theme-bg-canvas);
  background-image: linear-gradient(var(--theme-bg-surface), var(--theme-bg-surface));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  border: 1px solid var(--fam-edge);
  box-shadow: none;
  isolation: auto;
}
:root[data-theme="the-dojo"] .bu-drawer::before, :root[data-theme="the-dojo"] .bu-drawer::after,
:root[data-theme="the-dojo"] .bu-slideout-content::before, :root[data-theme="the-dojo"] .bu-slideout-content::after,
:root[data-theme="the-dojo"] .bu-report-widget-panel::before, :root[data-theme="the-dojo"] .bu-report-widget-panel::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="the-dojo"] .bu-btn, :root[data-theme="the-dojo"] .bu-btn-secondary { transition: none; transform: none; }
}
:root[data-reduced-motion="true"][data-theme="the-dojo"] .bu-btn,
:root[data-reduced-motion="true"][data-theme="the-dojo"] .bu-btn-secondary { transition: none; transform: none; }
/* ==== #234 CONSTRUCTION FAMILY END ==== */