/* OpenCD — CD Jewel Case CSS Framework */
@import "https://unpkg.com/open-props";

/* 1. Tokens */
:root {
  --cd-scale: 1;
  --cd-jewel-width:      calc(280px * var(--cd-scale));
  --cd-jewel-height:     calc(245px * var(--cd-scale));
  --cd-jewel-open-width: calc(560px * var(--cd-scale));
  --cd-disc-diameter:    calc(240px * var(--cd-scale));
  --cd-disc-hole:        calc(30px  * var(--cd-scale));
  --cd-leaflet-size:     calc(240px * var(--cd-scale));
  --cd-spine-width:      calc(14px  * var(--cd-scale));
  --cd-tray-width:       calc(260px * var(--cd-scale));
  --cd-tray-height:      calc(236px * var(--cd-scale));
  --cd-surface-0: var(--gray-0);
  --cd-surface-1: oklch(30% .015 265);
  --cd-surface-2: oklch(35% .015 265);
  --cd-surface-3: oklch(40% .015 265);
  --cd-surface-4: oklch(15% .01 265);
  --cd-font-neo-grotesque: 'Inter', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
  --cd-font-label: var(--cd-font-neo-grotesque);
  --cd-font-body: var(--font-serif);
  --cd-font-mono: var(--font-mono-code, var(--font-mono));
  --cd-font-size-body:    var(--font-size-fluid-1);
  --cd-font-size-title:   var(--font-size-fluid-2);
  --cd-font-size-display: var(--font-size-fluid-3);
  --cd-text-primary:    var(--gray-9);
  --cd-text-secondary:  var(--gray-7);
  --cd-text-muted:      var(--gray-5);
  --cd-text-on-spine:   var(--gray-1);
  --cd-advisory-red:      var(--red-6);
  --cd-advisory-red-dark: var(--red-7);
  --cd-advisory-bg:       var(--red-0);
  --cd-advisory-fg:       #000;
  --cd-advisory-fg-inv:   #fff;
  --cd-advisory-font:     'Impact', 'Arial Black', var(--cd-font-label), sans-serif;
  --cd-text-opacity-muted: 0.8;
  --cd-tray-bg:        var(--cd-surface-1);
  --cd-tray-bg-raised: var(--cd-surface-2);
  --cd-tray-bg-sunken: var(--cd-surface-3);
  --cd-spine-bg:       var(--cd-surface-4);
  --cd-grid-color:     var(--gray-3);
  --cd-grid-color-alt: var(--gray-2);
  --cd-grid-fine:      4px;
  --cd-grid-coarse:    8px;
  --cd-jewel-radius:       var(--radius-2);
  --cd-jewel-shadow:       var(--shadow-2);
  --cd-jewel-shadow-raised: var(--shadow-3);
  --cd-leaflet-radius:     var(--radius-3);
  --cd-page-shadow:      0 1px 3px rgb(0 0 0 / 0.08);
  --cd-disc-hole-shadow: inset 0 0 3px rgb(0 0 0 / 0.15);
  --cd-disc-shadow:      inset 0 0 8px rgb(0 0 0 / 0.12);
  --cd-advisory-border:   2px solid var(--cd-advisory-fg);
  --cd-tray-border-top:  1px solid var(--cd-grid-color);
  --cd-track-border-bot: 1px solid var(--cd-grid-color-alt);
  --cd-track-num-min-w:  2.5ch;
  --cd-space-inset:  var(--size-fluid-1);
  --cd-space-stack:  var(--size-fluid-2);
  --cd-space-gutter: var(--size-fluid-3);
  --cd-space-xs: var(--size-1);
  --cd-space-sm: var(--size-2);
  --cd-spine-font-xs: var(--font-size-0);
  --cd-spine-font-sm: var(--font-size-1);
  --cd-spine-font-md: var(--font-size-2);
  --cd-spine-font-lg: var(--font-size-3);
  --cd-font-weight-semibold: 600;
  --cd-letter-spacing-1: 0.05em;
  --cd-letter-spacing-2: 0.075em;
  --cd-letter-spacing-3: 0.1em;
  --cd-transition-duration: 200ms;
  --cd-ease-flip:           cubic-bezier(0.34, 1.56, 0.64, 1);
  --cd-ease-default:        var(--ease-3);
  --cd-break-sm: 350px;
  --cd-break-md-min: 351px;
  --cd-break-md-max: 549px;
  --cd-disc-hole-scale:      0.6;
  --cd-disc-hole-font-scale: 0.5;
  --cd-z-stack-base:   1;
  --cd-aspect-jewel:   280 / 245;
  --cd-aspect-leaflet: 1 / 1;
  --cd-aspect-disc:    1 / 1;
  --cd-disc-surface-1: var(--gray-4);
  --cd-disc-surface-2: var(--gray-2);
  --cd-disc-surface-3: var(--gray-6);
  --cd-disc-surface-4: var(--gray-5);
  --cd-disc-surface-5: var(--gray-7);
  --cd-disc-surface-6: var(--gray-3);
  --cd-disc-hole-text: var(--gray-4);
}

/* 2. Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { font-family: inherit; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; border: 0; background: transparent; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }

/* 3. Jewel Case */
.cd-jewel-case {
  display: grid; grid-template-columns: var(--cd-spine-width) 1fr; grid-template-rows: auto 1fr;
  width: min(var(--cd-jewel-width), calc(100% - 2rem)); min-height: var(--cd-jewel-height);
  background: var(--cd-surface-0); border-radius: var(--cd-jewel-radius);
  box-shadow: var(--cd-jewel-shadow); overflow: hidden; position: relative;
  transition: width var(--cd-transition-duration) var(--cd-ease-default);
  font-family: var(--cd-font-body); color: var(--cd-text-primary);
  container-type: inline-size;
}
.cd-jewel-case--open, .cd-jewel-case[data-jewel-state="open"] {
  width: min(var(--cd-jewel-open-width), calc(100% - 2rem));
}
.cd-jewel-case > .cd-jewel-inner {
  grid-column: 2; grid-row: 1 / -1; display: flex; flex-direction: column;
  padding: var(--cd-space-inset); gap: var(--cd-space-stack); min-height: 0;
}

/* 4. Spine */
.cd-spine {
  grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: var(--cd-spine-bg);
  color: var(--cd-text-on-spine); font-family: var(--cd-font-label);
  padding: var(--cd-space-sm) var(--cd-space-xs); gap: var(--cd-space-sm);
  writing-mode: vertical-rl; text-orientation: mixed; user-select: none;
}
.cd-spine .spine-label {
  font-size: var(--cd-spine-font-sm); font-weight: var(--cd-font-weight-semibold);
  letter-spacing: var(--cd-letter-spacing-3); text-transform: uppercase;
}
.cd-spine .spine-track { font-size: var(--cd-spine-font-xs); letter-spacing: var(--cd-letter-spacing-1); opacity: var(--cd-text-opacity-muted); }
/* side spine: inherits vertical-rl from .cd-spine, positioned by back-tray grid */
.cd-spine--side { }

/* 5. Leaflet */
.leaflet-content {
  display: flex; flex-direction: column; gap: var(--cd-space-stack);
  max-width: var(--cd-leaflet-size); position: relative;
  background: repeating-linear-gradient(0deg, transparent 0 calc(var(--cd-grid-coarse)*3 - 1px), var(--cd-grid-color) calc(var(--cd-grid-coarse)*3 - 1px) calc(var(--cd-grid-coarse)*3)), var(--cd-tray-bg);
  border-radius: var(--cd-leaflet-radius); padding: var(--cd-space-inset);
}
.leaflet-page {
  aspect-ratio: var(--cd-aspect-leaflet); background: var(--cd-surface-0);
  border-radius: calc(var(--cd-leaflet-radius) / 2); padding: var(--cd-space-inset);
  display: flex; flex-direction: column; gap: var(--cd-space-sm);
  box-shadow: var(--cd-page-shadow); position: relative;
  transition: transform var(--cd-transition-duration) var(--cd-ease-flip);
}
.leaflet-page[data-leaflet-active="true"] { box-shadow: var(--cd-jewel-shadow); }
.leaflet-page[data-leaflet-direction="rtl"] { direction: rtl; }
.leaflet-page h1, .leaflet-page h2 {
  font-family: var(--cd-font-label); font-size: var(--cd-font-size-title);
  color: var(--cd-text-primary); line-height: 1.2;
}
.leaflet-page p {
  font-family: var(--cd-font-body); font-size: var(--cd-font-size-body);
  color: var(--cd-text-secondary); line-height: 1.6;
}
.leaflet-page .leaflet-meta {
  font-family: var(--cd-font-mono); font-size: var(--cd-spine-font-xs);
  color: var(--cd-text-muted); margin-top: auto;
}
.cd-jewel-case--leaflet { width: min(var(--cd-leaflet-size), calc(100% - 2rem)); box-shadow: none; background: transparent; }
.cd-jewel-case--leaflet .cd-jewel-inner { grid-column: 2; gap: var(--cd-space-inset); }
.leaflet-page ul { margin-left: 1rem; color: var(--cd-text-secondary); line-height: 1.6; }
.leaflet-page dl { margin-top: .5rem; display: grid; gap: .25rem; font-size: var(--cd-font-size-body); }
.leaflet-page dt { font-family: var(--cd-font-mono); color: var(--cd-text-muted); }
.leaflet-page dd { color: var(--cd-text-secondary); }
.leaflet-page p + p { margin-top: .5rem; }

/* 6. Disc Art */
.disc-art {
  width: var(--cd-disc-diameter); aspect-ratio: var(--cd-aspect-disc); border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--cd-disc-surface-1) 0%, var(--cd-disc-surface-2) 40%, var(--cd-disc-surface-3) 70%, var(--cd-disc-surface-2) 100%);
  display: flex; align-items: center; justify-content: center; position: relative;
  box-shadow: var(--cd-disc-shadow);
}
.disc-art::before {
  content: ""; position: absolute; width: var(--cd-disc-hole); aspect-ratio: 1;
  border-radius: 50%; background: var(--cd-surface-0); box-shadow: var(--cd-disc-hole-shadow);
}
.disc-hole {
  position: absolute; width: calc(var(--cd-disc-hole) * var(--cd-disc-hole-scale));
  aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cd-disc-hole) * var(--cd-disc-hole-font-scale));
  color: var(--cd-disc-hole-text); z-index: var(--cd-z-stack-base); pointer-events: none;
}
.disc-art--sheen {
  background: radial-gradient(circle at 25% 25%, var(--cd-disc-surface-1) 0%, var(--cd-disc-surface-2) 35%, var(--cd-disc-surface-4) 50%, transparent 65%),
    radial-gradient(circle at 75% 75%, var(--cd-disc-surface-5) 0%, var(--cd-disc-surface-6) 40%, transparent 70%);
}

/* 7. Human Advisory */
.human-advisory {
  display: flex; flex-direction: column; align-items: center;
  background: var(--cd-advisory-fg); color: var(--cd-advisory-fg-inv);
  border: var(--cd-advisory-border); font-family: var(--cd-advisory-font);
  text-transform: uppercase; text-align: center; padding: 0; width: fit-content; max-width: 100%;
  position: absolute; bottom: var(--cd-space-inset); right: var(--cd-space-inset);
}
.human-advisory .advisory-row {
  width: 100%; padding: var(--cd-space-xs) var(--cd-space-sm);
  font-size: var(--cd-spine-font-sm); letter-spacing: var(--cd-letter-spacing-3); line-height: 1.2; white-space: nowrap;
}
.human-advisory .advisory-row--black { background: var(--cd-advisory-fg); color: var(--cd-advisory-fg-inv); }
.human-advisory .advisory-row--white { background: var(--cd-advisory-fg-inv); color: var(--cd-advisory-fg); }
.human-advisory--red .advisory-row--black { background: var(--cd-advisory-red-dark); color: var(--cd-advisory-fg-inv); }
.human-advisory--red .advisory-row--white { background: var(--cd-advisory-red); color: var(--cd-advisory-fg-inv); }
.human-advisory--inline { position: static; align-self: flex-end; }

/* 8. Back Tray */
.back-tray {
  display: grid; grid-template-columns: var(--cd-spine-width) 1fr var(--cd-spine-width);
  background: var(--cd-tray-bg); border-top: var(--cd-tray-border-top);
  padding: 0; max-height: var(--cd-tray-height); overflow-y: auto; position: relative;
}
.back-tray .tray-credits { grid-column: 2; padding: var(--cd-space-inset); display: flex; flex-direction: column; gap: var(--cd-space-stack); background: var(--cd-tray-bg-raised); border-radius: 0 0 var(--cd-leaflet-radius) var(--cd-leaflet-radius); }
.tray-credits h2 { font-family: var(--cd-font-label); font-size: var(--cd-font-size-title); color: var(--cd-text-primary); text-transform: uppercase; letter-spacing: var(--cd-letter-spacing-2); }
.tray-credits ol { list-style: none; counter-reset: track; display: flex; flex-direction: column; gap: var(--cd-space-xs); }
.tray-credits ol li { counter-increment: track; font-family: var(--cd-font-label); font-size: var(--cd-font-size-body); color: var(--cd-text-secondary); padding: var(--cd-space-xs) 0; border-bottom: var(--cd-track-border-bot); display: flex; gap: var(--cd-space-sm); }
.tray-credits ol li::before { content: counter(track, decimal-leading-zero) "."; font-family: var(--cd-font-mono); color: var(--cd-text-muted); min-width: var(--cd-track-num-min-w); }
.tray-credits .credits-label { font-family: var(--cd-font-mono); font-size: var(--cd-spine-font-xs); color: var(--cd-text-muted); text-transform: uppercase; letter-spacing: var(--cd-letter-spacing-1); }
.tray-credits p { font-family: var(--cd-font-body); font-size: var(--cd-font-size-body); color: var(--cd-text-secondary); line-height: 1.5; }
.back-tray .cd-spine { grid-row: 1; background: var(--cd-spine-bg); }
.back-tray > .cd-spine:first-child { grid-column: 1; }
.back-tray > .cd-spine:last-child { grid-column: 3; }

/* 9. Grid */
.cd-grid { background-image: repeating-linear-gradient(0deg, transparent 0 calc(var(--cd-grid-coarse) - 1px), var(--cd-grid-color) calc(var(--cd-grid-coarse) - 1px) var(--cd-grid-coarse)); }
.cd-grid--fine { background-image: repeating-linear-gradient(0deg, transparent 0 calc(var(--cd-grid-fine) - 1px), var(--cd-grid-color) calc(var(--cd-grid-fine) - 1px) var(--cd-grid-fine)); }
.cd-grid--crosshatch {
  background-image: repeating-linear-gradient(0deg, transparent 0 calc(var(--cd-grid-fine) - 1px), var(--cd-grid-color-alt) calc(var(--cd-grid-fine) - 1px) var(--cd-grid-fine)),
    repeating-linear-gradient(90deg, transparent 0 calc(var(--cd-grid-coarse) - 1px), var(--cd-grid-color) calc(var(--cd-grid-coarse) - 1px) var(--cd-grid-coarse));
}

/* 10. Open/Closed */
.cd-jewel-case .back-tray { display: none; }
.cd-jewel-case--open .back-tray, .cd-jewel-case[data-jewel-state="open"] .back-tray { display: grid; }

/* 11. Responsive */
@container (max-width: var(--cd-break-sm)) {
  .cd-jewel-case { width: 100% !important; grid-template-columns: 1fr; }
  .cd-spine { writing-mode: horizontal-tb; flex-direction: row; padding: var(--cd-space-xs) var(--cd-space-sm); grid-column: 1; grid-row: 1; }
  .cd-jewel-inner { grid-column: 1; grid-row: 2; }
  .disc-art { width: 100% !important; max-width: var(--cd-disc-diameter); margin: 0 auto; }
  .leaflet-content { max-width: 100%; }
  .human-advisory { position: static; margin-top: var(--cd-space-stack); align-self: center; }
}
@container (min-width: var(--cd-break-md-min)) and (max-width: var(--cd-break-md-max)) {
  .cd-jewel-case { width: 100% !important; max-width: var(--cd-jewel-width); }
  .leaflet-content { gap: var(--cd-space-sm); }
  .human-advisory .advisory-row { font-size: var(--cd-spine-font-xs); padding: var(--cd-space-xs) var(--cd-space-sm); }
}