/* Skin 1 — the Jedi Archives (Jedi Temple, Coruscant).
   Two temperatures: cool holo light for data, warm bronze for the architecture that holds it.
   The lamp (--locator) is the only warm glow in the stacks: it marks where you are. */

:root[data-skin="jedi"] {
  --bg: #070b14; --panel: #0b1220; --panel-2: #121c2e; --line: #1f2a3d; --line-2: #34405a;
  --ink: #e8f3f8; --dim: #92a3b7; --faint: #56657c;
  --frame: #a97d45; --frame-hi: #dfb77c; --accent: #7fd8ff; --locator: #ffcf7a; --conflict: #e5484d;
  --radius: 3px;

  /* canvas tokens (read by the field, ribbon and map) */
  --c-stage-top: #0c1628; --c-stage-bot: #070b14;
  --c-shelf: rgba(127, 216, 255, 0.028); --c-shelf-line: rgba(127, 216, 255, 0.10);
  --c-grid: #111b2e; --c-era-line: #26324a; --c-era-text: #55688a;
  --c-axis-line: #a97d45; --c-axis-tick: #5d4b33; --c-axis-major: #a97d45; --c-axis-text: #d9c29a; --c-axis-dim: #7a8aa2;
  --c-label: #d5e4ec; --c-label-dim: #9fb3c4; --c-event: #eadcbf; --c-event-text: #c6b999; --c-leg-event: #b8a4e3;
  --c-world-1: #ffcf7a; --c-world-2: #bfefff; --c-callout-bg: #070b14; --c-glow: rgba(127, 216, 255, 0.55);
  --c-ribbon-density: #28436a; --c-ribbon-window: rgba(255, 207, 122, 0.12);
  --c-map-bg: #060a12; --c-map-ring: rgba(127, 216, 255, 0.10); --c-map-ring-text: #4f6384; --c-map-grid: rgba(169, 125, 69, 0.10);
  --c-map-unknown: rgba(3, 5, 10, 0.72); --c-map-planet: #6f86a3; --c-map-lit: #7fd8ff;
  --c-map-route: rgba(223, 183, 124, 0.36); --c-map-route-text: #a48a62;
  --c-era-blocks: #1a2a44 #203352 #1a2a44 #203352;

  /* lanes: a cool holo spectrum; warm tones only where a show's own identity is warm */
  --l-hist: #eadcbf; --l-film: #f2d49b; --l-yja: #9be7c4; --l-aco: #c3a6ff; --l-tales: #8fb6ff; --l-tcw: #7fd8ff;
  --l-tbb: #6fdcc5; --l-msl: #e08aa6; --l-owk: #a9ccff; --l-and: #b7c4d6; --l-reb: #ffb37a; --l-fod: #f1a6d4;
  --l-man: #cfd9e4; --l-bobf: #d2ac7e; --l-skc: #9fd6a2; --l-ahs: #e4ecff; --l-res: #ff9f6e; --l-leg: #b39ddb;

  /* visions & crossings */
  --v-wbw: #f4e6c4; --v-mortis: #c7a6ff; --v-vision: #7fd8ff; --v-prophecy: #e9b8ff; --v-force-ghost: #a8f0ff; --v-echo: #9fb6ff; --v-return: #ff6b7f;
}

/* ───────── architecture: bronze fittings, corner brackets, the aisle ───────── */
[data-skin="jedi"] .top { position: relative; padding-bottom: 2px; }
[data-skin="jedi"] .brand h1 { font-weight: 600; text-shadow: 0 0 18px rgba(223, 183, 124, 0.18); }
[data-skin="jedi"] .ribbon { border-top: 1px solid rgba(169, 125, 69, 0.45); border-bottom: 1px solid rgba(169, 125, 69, 0.45); padding: 4px 0; height: 64px; }
[data-skin="jedi"] .ribbon::before, [data-skin="jedi"] .ribbon::after {
  content: ''; position: absolute; top: -4px; width: 7px; height: 7px; background: var(--frame); transform: rotate(45deg);
}
[data-skin="jedi"] .ribbon::before { left: -3px; }
[data-skin="jedi"] .ribbon::after { right: -3px; }

[data-skin="jedi"] .stage,
[data-skin="jedi"] .readout {
  border: 1px solid rgba(169, 125, 69, 0.28);
  background:
    linear-gradient(var(--frame), var(--frame)) top left / 14px 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) top left / 1px 14px no-repeat,
    linear-gradient(var(--frame), var(--frame)) top right / 14px 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) top right / 1px 14px no-repeat,
    linear-gradient(var(--frame), var(--frame)) bottom left / 14px 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--frame), var(--frame)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) bottom right / 1px 14px no-repeat,
    var(--panel);
}
[data-skin="jedi"] .stage { background-color: var(--c-stage-bot); }
[data-skin="jedi"] .rhead { border-bottom-color: rgba(169, 125, 69, 0.28); }
[data-skin="jedi"] .rk { font-family: var(--font-ui); font-weight: 500; }
[data-skin="jedi"] .rbody h2 { color: #f1e6cf; }

[data-skin="jedi"] .navbtn { position: relative; padding-left: 22px; }
[data-skin="jedi"] .navbtn::before { content: ''; position: absolute; left: 9px; top: 50%; width: 5px; height: 5px; margin-top: -3px; border: 1px solid var(--faint); transform: rotate(45deg); }
[data-skin="jedi"] .navbtn[aria-current="true"]::before { background: var(--locator); border-color: var(--locator); box-shadow: 0 0 8px rgba(255, 207, 122, .6); }
[data-skin="jedi"] .navbtn[aria-current="true"] { background: linear-gradient(90deg, rgba(169, 125, 69, .16), rgba(169, 125, 69, 0) 90%); }

[data-skin="jedi"] .lanelabel { color: #07101c; box-shadow: 0 0 10px rgba(127, 216, 255, .08); }
[data-skin="jedi"] .chip { color: #07101c; }
[data-skin="jedi"] .yearhead { font-family: var(--font-display); font-size: 14px; letter-spacing: .03em; }

@media (max-width: 900px) { [data-skin="jedi"] .navbtn { padding-left: 20px; } }

/* ───────── the gate: a Jedi holocron that opens when you enter ───────── */
[data-skin="jedi"] .gate {
  background: radial-gradient(60% 50% at 50% 38%, #0f2036 0%, #070b14 70%);
}
[data-skin="jedi"] .gate-art { --s: min(118px, 25vw); perspective: 820px; display: grid; place-items: center; }
[data-skin="jedi"] .holo-core {
  position: absolute; left: 50%; top: 50%; width: calc(var(--s) * 0.9); height: calc(var(--s) * 0.9); margin: calc(var(--s) * -0.45) 0 0 calc(var(--s) * -0.45);
  border-radius: 50%; background: radial-gradient(circle, #f4fdff 0%, #9be6ff 22%, rgba(127, 216, 255, .35) 45%, rgba(127, 216, 255, 0) 70%);
  filter: blur(2px); opacity: .55; animation: coreBreath 3.2s ease-in-out infinite; transition: transform 1s cubic-bezier(.2, .7, .2, 1), opacity 1s;
}
[data-skin="jedi"] .holo-halo {
  position: absolute; inset: 6%; border-radius: 50%; border: 1px solid rgba(169, 125, 69, .35);
  box-shadow: inset 0 0 40px rgba(127, 216, 255, .06);
}
[data-skin="jedi"] .holo-halo::after {
  content: ''; position: absolute; inset: 7%; border-radius: 50%; border: 1px dashed rgba(127, 216, 255, .16); animation: haloTurn 40s linear infinite;
}
[data-skin="jedi"] .cube { position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; animation: holoSpin 18s linear infinite; }
[data-skin="jedi"] .face {
  position: absolute; inset: 0; border: 1px solid rgba(223, 183, 124, .75);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%239fe6ff' stroke-width='1.4'%3E%3Crect x='12' y='12' width='76' height='76' opacity='.8'/%3E%3Cpath d='M50 16 L84 50 L50 84 L16 50 Z'/%3E%3Cpath d='M12 12 L88 88 M88 12 L12 88' opacity='.35'/%3E%3Ccircle cx='50' cy='50' r='11'/%3E%3Cpath d='M50 30 V70 M30 50 H70' opacity='.5'/%3E%3C/g%3E%3Cg fill='%23c8964f'%3E%3Crect x='0' y='0' width='13' height='13'/%3E%3Crect x='87' y='0' width='13' height='13'/%3E%3Crect x='0' y='87' width='13' height='13'/%3E%3Crect x='87' y='87' width='13' height='13'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100%,
    radial-gradient(circle at 50% 50%, rgba(127, 216, 255, .32), rgba(12, 32, 58, .82) 72%);
  box-shadow: 0 0 22px rgba(127, 216, 255, .22), inset 0 0 18px rgba(127, 216, 255, .25);
  backface-visibility: visible; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), opacity 1s .15s;
}
[data-skin="jedi"] .face.f1 { transform: rotateY(0deg) translateZ(calc(var(--s) / 2)); }
[data-skin="jedi"] .face.f2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
[data-skin="jedi"] .face.f3 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
[data-skin="jedi"] .face.f4 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
[data-skin="jedi"] .face.f5 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
[data-skin="jedi"] .face.f6 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
[data-skin="jedi"] .gate.ready .holo-core { opacity: .9; }
[data-skin="jedi"] .gate.ready .cube { animation-duration: 12s; }
/* opening: each face lifts away along its own axis and the light inside comes out */
[data-skin="jedi"] .gate.opening .face.f1 { transform: rotateY(0deg) translateZ(calc(var(--s) * 1.9)); opacity: 0; }
[data-skin="jedi"] .gate.opening .face.f2 { transform: rotateY(90deg) translateZ(calc(var(--s) * 1.9)); opacity: 0; }
[data-skin="jedi"] .gate.opening .face.f3 { transform: rotateY(180deg) translateZ(calc(var(--s) * 1.9)); opacity: 0; }
[data-skin="jedi"] .gate.opening .face.f4 { transform: rotateY(-90deg) translateZ(calc(var(--s) * 1.9)); opacity: 0; }
[data-skin="jedi"] .gate.opening .face.f5 { transform: rotateX(90deg) translateZ(calc(var(--s) * 1.9)); opacity: 0; }
[data-skin="jedi"] .gate.opening .face.f6 { transform: rotateX(-90deg) translateZ(calc(var(--s) * 1.9)); opacity: 0; }
[data-skin="jedi"] .gate.opening .holo-core { transform: scale(7); opacity: 0; }
[data-skin="jedi"] .gate-title { text-shadow: 0 0 24px rgba(223, 183, 124, .2); }
[data-skin="jedi"] .gate-quote { font-family: var(--font-body); }

@keyframes holoSpin { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(360deg); } }
@keyframes coreBreath { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1.06); } }
@keyframes haloTurn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  [data-skin="jedi"] .cube { animation: none; transform: rotateX(-24deg) rotateY(38deg); }
}