/* ============================================================================
   KICC · glass brand layer  —  loaded LAST (after approved-design.css and
   rebuild.css) so it re-skins every existing route without touching page
   logic. Palette: frosted white glass · near-black · deep red · brown
   (the yellow/ochre is retired). Nothing here needs a build step.
   ============================================================================ */
:root{
  /* ── canvas: near-black ─────────────────────────────────────────────── */
  --dark-canvas:#0B0B0D;
  --surface:#121214;
  --card:rgba(255,255,255,.06);
  --ink:#0B0B0D;
  --bone:#F4F1EC;          --bone-dim:rgba(244,241,236,.62);
  --paper:#0B0B0D;

  /* ── frosted white glass ────────────────────────────────────────────── */
  --glass-bg:rgba(255,255,255,.10);
  --glass-border:rgba(255,255,255,.18);
  --glass-blur:blur(22px) saturate(1.45);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.28);
  --glass-light-bg:rgba(255,255,255,.64);
  --glass-light-border:rgba(255,255,255,.78);

  /* ── deep red ───────────────────────────────────────────────────────── */
  --kicc-red:#7A1E1E;      --kicc-red-hover:#5E1414;
  /* ── brown — retires the yellow ─────────────────────────────────────── */
  --kicc-gold:#1c1c1c;     --gold-soft:#8A6446;   --ochre-deep:#553A24;
  --brown-deep:#3E2A1B;    --brown-lift:#8A6446;  --acacia:#1c1c1c;  --acacia-lift:#8A6446;

  --text:#F4F1EC;          --text-muted:rgba(244,241,236,.66);
  --hairline:rgba(255,255,255,.16);  --hairline-soft:rgba(255,255,255,.09);
  --kicc-navy:#121214;     --navy-hover:#1C1C20;
  --light-bg:#F7F5F2;      --sand-alt:#E9E3DB;
  --info-blue:#6E7F8C;     --green:#4F6B47;

  /* ── softer, glass-appropriate corners + light ──────────────────────── */
  --radius:22px; --radius-sm:14px; --radius-xs:10px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-card:0 24px 70px rgba(0,0,0,.55);
  --shadow-gold:0 0 60px rgba(28,28,28,.35);

  /* ── ui-* tokens consumed by rebuild.css (defined here so the rb-*
        components are never unstyled when 00.core.css is absent) ──────── */
  --ui-ink:#F4F1EC; --ui-muted:rgba(244,241,236,.60);
  --ui-surface:rgba(255,255,255,.06); --ui-glass:rgba(255,255,255,.10);
  --ui-line:rgba(255,255,255,.18); --ui-accent:#7A1E1E;
  --ui-raised:rgba(255,255,255,.90);

  --font-display:'Fraunces',Georgia,serif;
  --font-head:'Fraunces',Georgia,serif;
  --font-ui:'Inter Tight','Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}

/* light world — frosted white glass on a warm paper ground */
html[data-theme="light"]{
  --ui-ink:#17150F; --ui-muted:rgba(23,21,15,.62);
  --ui-surface:rgba(255,255,255,.60); --ui-glass:rgba(255,255,255,.66);
  --ui-line:rgba(23,21,15,.14); --ui-raised:#121214;
  --glass-bg:rgba(255,255,255,.60); --glass-border:rgba(255,255,255,.78);
  --text:#17150F; --text-muted:rgba(23,21,15,.64);
}
body.light-world{background:var(--light-bg);color:#17150F}

/* ── 2 · glass surfaces ───────────────────────────────────────────────── */
.glass,.rb-panel,.rb-media-admin,.rb-notice,.rb-toast,.card,.panel,.tile,
.county-tile,.tile-card,.pc,.hls-stage,.viewer3d,.map-stage,.tm-window,
.rb-media-admin video,.rb-media-admin img{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card),var(--glass-highlight);
}
.hls-stage,.viewer3d,.map-stage{background:rgba(11,11,13,.72)}
.rb-panel{padding:28px}
/* graceful degradation where backdrop-filter is unsupported */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.rb-panel,.rb-notice,.rb-toast{background:rgba(20,20,23,.92)}
}

/* ── 3 · controls that used the retired yellow ────────────────────────── */
.btn.gold,.g-btn{background:linear-gradient(135deg,var(--kicc-gold),var(--brown-deep));color:#F7F2EC}
.btn.gold:hover{background:linear-gradient(135deg,var(--brown-lift),var(--kicc-gold))}
.pill.active,.pager button.on,.toggle-group button.on,.waypoint-pill:hover{
  background:var(--kicc-gold);color:#F7F2EC;border-color:var(--kicc-gold);font-weight:600}
.media-tile .play-fab{background:rgba(122,30,30,.92);color:#F7F2EC}
::selection{background:var(--kicc-red);color:#F7F2EC}
.btn.primary,.btn.red{background:var(--kicc-red);color:#F7F2EC}
.btn.primary:hover,.btn.red:hover{background:var(--kicc-red-hover)}

/* ── 4 · fallback tile — used when an entity has no verified video ─────── */
.rb-fallback{display:grid;place-items:center;height:100%;background:linear-gradient(160deg,#121214,#0b0b0b);color:#EFE1C8;text-align:center;padding:25px}
.rb-fallback span{font:italic 100px var(--font-display);color:var(--brown-lift)}
.gk-tile-media{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:16/10;background:#121214}
.gk-tile-media img,.gk-tile-media video{width:100%;height:100%;object-fit:cover;display:block}
.gk-badge{position:absolute;left:12px;bottom:12px;z-index:3;font:11px var(--font-mono);
  padding:6px 10px;border-radius:999px;background:rgba(11,11,13,.72);color:#EFE1C8;
  border:1px solid var(--glass-border);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.gk-badge.rep{background:rgba(28,28,28,.82)}
.gk-badge.vid{background:rgba(122,30,30,.86)}

/* ── 5 · admin media manager ──────────────────────────────────────────── */
.gk-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin:24px 0}
.gk-mcard{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--shadow-card),var(--glass-highlight);overflow:hidden;display:flex;flex-direction:column}
.gk-mcard .body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.gk-mcard .meta{font:11px var(--font-mono);color:var(--ui-muted);word-break:break-all}
.gk-mcard .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.gk-pill{display:inline-block;font:10px var(--font-mono);padding:3px 8px;border-radius:999px;
  border:1px solid var(--glass-border);color:var(--ui-ink)}
.gk-pill.ready{background:rgba(79,107,71,.35)} .gk-pill.failed{background:rgba(122,30,30,.35)}
.gk-pill.missing{background:rgba(28,28,28,.35)}
.gk-toolbar{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin:22px 0}
.gk-toolbar label{font-size:12px;color:var(--ui-muted);display:block;margin-bottom:6px}
.gk-toolbar input,.gk-toolbar select{padding:11px;border-radius:12px;border:1px solid var(--ui-line);
  background:var(--ui-surface);color:var(--ui-ink);min-width:190px}
.gk-danger{border:1px solid var(--kicc-red);background:rgba(122,30,30,.14);color:var(--ui-ink);
  padding:12px 16px;border-radius:12px}
@media(max-width:760px){.gk-mgrid{grid-template-columns:1fr}}

/* =====================================================================
   Legacy-token override layer  (appended 2026-10-08)
   approved-design.css still defines the retired ochre/gold system
   (--kicc-gold:#ffcd05, rgba(255,205,5,…) glows). This block re-points
   every legacy token and hard-coded gold affordance at the brown/deep-red
   palette so the glass skin wins without touching page logic or layout.
   ===================================================================== */
:root,
html[data-theme],
html[data-theme="dark"],
html[data-theme="light"]{
  --kicc-gold:#1c1c1c;          /* retired yellow → brown */
  --gold-soft:#8A6440;
  --ochre-deep:#573A24;
  --kicc-red:#7A1E1E;           /* deep red */
  --kicc-red-hover:#5E1616;
  --shadow-gold:0 0 60px rgba(28,28,28,.30);
}
/* gold buttons / pills / toggles → brown, white text */
.btn.gold,
a.btn.gold,
button.btn.gold{
  background:var(--kicc-gold) !important;
  border-color:var(--kicc-gold) !important;
  color:#FFF7F2 !important;
  box-shadow:0 10px 30px rgba(87,58,36,.35) !important;
}
.btn.gold:hover,a.btn.gold:hover,button.btn.gold:hover{
  background:var(--ochre-deep) !important;border-color:var(--ochre-deep) !important;
}
.pill.active,.pager button.on,.toggle-group button.on,.seg button.on{
  background:var(--kicc-gold) !important;color:#FFF7F2 !important;border-color:var(--kicc-gold) !important;
}
/* hard-coded ochre literals in approved-design.css */
.media-tile .play-fab{background:rgba(28,28,28,.94) !important;color:#FFF7F2 !important}
.hologram{background:radial-gradient(circle at 50% 45%, rgba(28,28,28,.35), transparent 60%) !important}
::selection{background:var(--kicc-red) !important;color:#FFF7F2 !important}
/* deep-red accents */
.tag,.badge.red,.chip.red{background:var(--kicc-red) !important;color:#FFF7F2 !important}

/* =====================================================================
   Closer-ancestor scopes  (appended 2026-10-08)
   approved-design.css re-declares the retired gold inside body.light-world
   / .shader-dark, i.e. on a CLOSER ancestor than :root. A later :root block
   cannot win that cascade, which is why the CTA still rendered ochre. This
   re-points the tokens (and the source tokens they derive from) in every
   scope that declares them.
   ===================================================================== */
body,
body.light-world,
body.light-world *,
.light-world,
.shader-dark,
.shader-dark *,
html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="dark"],
html[data-theme="dark"] body{
  --kicc-gold:#1c1c1c;
  --gold-soft:#8A6446;
  --ochre-deep:#553A24;
  --kicc-red:#7A1E1E;
  --kicc-red-hover:#5E1414;
  --au-400:#1c1c1c;
  --au-500:#8A6446;
  --cr-600:#7A1E1E;
  --shadow-gold:0 0 60px rgba(28,28,28,.28);
}
body .btn.gold,
body.light-world .btn.gold,
.shader-dark .btn.gold{
  background:#1c1c1c !important;
  border-color:#1c1c1c !important;
  color:#FFF7F2 !important;
}
body .btn.gold:hover,
body.light-world .btn.gold:hover,
.shader-dark .btn.gold:hover{
  background:#553A24 !important;border-color:#553A24 !important;
}
body .btn.ghost:hover{color:#1c1c1c !important;border-color:#1c1c1c !important}