/* Systems Detective narration player. Designs override the custom properties. */
:root {
  --sdn-bg: rgba(13, 27, 42, 0.86);
  --sdn-fg: #E8E8E8;
  --sdn-muted: #9AA5B4;
  --sdn-accent: #C5A55A;
  --sdn-accent-ink: #0D1B2A;
  --sdn-track: rgba(232, 232, 232, 0.16);
  --sdn-border: rgba(197, 165, 90, 0.22);
  --sdn-highlight: rgba(197, 165, 90, 0.12);
  --sdn-highlight-ring: rgba(197, 165, 90, 0.35);
  --sdn-radius: 14px;
  --sdn-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sdn-height: 64px;
}

body.sdn-active { padding-bottom: calc(var(--sdn-height) + 16px); }

.sdn-bar {
  position: fixed; left: 50%; bottom: 12px; z-index: 900;
  transform: translateX(-50%);
  width: min(960px, calc(100% - 24px)); height: var(--sdn-height);
  display: flex; align-items: center; gap: 6px; padding: 0 14px;
  background: var(--sdn-bg); color: var(--sdn-fg);
  border: 1px solid var(--sdn-border); border-radius: var(--sdn-radius);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  font: 13px/1.3 var(--sdn-font);
}
.sdn-btn {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: transparent; color: var(--sdn-fg); cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.sdn-btn svg { width: 22px; height: 22px; }
.sdn-btn:hover { background: rgba(255, 255, 255, 0.07); }
.sdn-btn:active { transform: scale(0.94); }
.sdn-btn:focus-visible, .sdn-track:focus-visible, .sdn-resume:focus-visible {
  outline: 2px solid var(--sdn-accent); outline-offset: 2px;
}
.sdn-play { width: 44px; height: 44px; background: var(--sdn-accent); color: var(--sdn-accent-ink); }
.sdn-play:hover { background: var(--sdn-accent); filter: brightness(1.08); }
.sdn-main { flex: 1; min-width: 0; padding: 0 8px; }
.sdn-meta { display: flex; gap: 10px; align-items: baseline; white-space: nowrap; overflow: hidden; }
.sdn-time { font-variant-numeric: tabular-nums; color: var(--sdn-fg); }
.sdn-label { color: var(--sdn-muted); overflow: hidden; text-overflow: ellipsis; }
.sdn-track {
  position: relative; height: 4px; margin-top: 8px; border-radius: 4px;
  background: var(--sdn-track); cursor: pointer; overflow: hidden;
}
.sdn-track::before { content: ''; position: absolute; inset: -8px 0; }
.sdn-fill {
  position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0);
  background: var(--sdn-accent); border-radius: inherit;
}
.sdn-rate {
  width: auto; min-width: 46px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--sdn-border); font: 600 12px/1 var(--sdn-font);
}

.sdn-resume {
  position: fixed; left: 50%; bottom: calc(var(--sdn-height) + 24px); z-index: 901;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--sdn-border);
  background: var(--sdn-bg); color: var(--sdn-fg); font: 13px/1 var(--sdn-font);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  cursor: pointer; transition: opacity 0.25s, transform 0.25s;
}
.sdn-resume::before { content: '↺  '; color: var(--sdn-accent); }
.sdn-resume.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

.sd-reading {
  background: var(--sdn-highlight);
  box-shadow: 0 0 0 0.45em var(--sdn-highlight), 0 0 0 calc(0.45em + 1px) var(--sdn-highlight-ring);
  border-radius: 0.4em;
  transition: background 0.45s ease, box-shadow 0.45s ease;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sdn-bar.is-started ~ * [data-k] { cursor: default; }

@media (max-width: 560px) {
  :root { --sdn-height: 58px; }
  .sdn-bar { gap: 2px; padding: 0 8px; }
  .sdn-label { display: none; }
  .sdn-btn { width: 34px; height: 34px; }
  .sdn-play { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-reading, .sdn-resume, .sdn-btn { transition: none; }
}
@media print { .sdn-bar, .sdn-resume { display: none; } }