/* ==================================================================
   ZAYTOOLIT UI — reusable components (ztl- namespace)

   Rules: components read ONLY semantic tokens from theme.css (no raw
   colours), so light and dark both work without per-component overrides.
   Page-specific layout lives in site.css.

   Adapted from freebounce.studio:
   - css/neumorphic.css  → surface / card / button structure and border
                           handling (the heavy neumorphic shadows are not used)
   - css/tools-kit.css   → card grid rhythm
   - css/sliders.css     → .ztl-range track / thumb / progress structure,
                           flattened (no glow, no metallic knob)
   Not taken: chrome edges or type, star sprites, logo spin, transitions,
   icon fonts, and freebounce.studio's fonts.
   ================================================================== */

/* ------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--ztl-bg);
  scroll-padding-top: calc(var(--ztl-header-h) + var(--ztl-space-4));
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--ztl-bg);
  color: var(--ztl-text);
  font-family: var(--ztl-font-body);
  font-size: var(--ztl-fs-md);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--ztl-dur-normal), color var(--ztl-dur-normal);
}
main { flex: 1; }

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-family: var(--ztl-font-display); font-weight: 600; line-height: 1.2; color: var(--ztl-text); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
em { font-style: normal; color: var(--ztl-text-2); }
[hidden] { display: none !important; }

a { color: var(--ztl-accent); text-decoration: none; transition: color var(--ztl-dur-fast); }
a:hover { color: var(--ztl-accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* one visible focus ring everywhere */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ztl-focus); outline-offset: 2px; border-radius: var(--ztl-radius-sm); }
::selection { background: var(--ztl-accent-soft); color: var(--ztl-text); }

.ztl-sr-only, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ztl-skip {
  position: fixed; left: 12px; top: -80px; z-index: 200;
  padding: 10px 14px; border-radius: var(--ztl-radius-md);
  background: var(--ztl-surface); color: var(--ztl-text); border: 1px solid var(--ztl-border-strong);
}
.ztl-skip:focus { top: 12px; }

/* data: BPM, durations, prices, years, catalog numbers */
.ztl-mono, .mono { font-family: var(--ztl-font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ------------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------------ */
.ztl-container {
  width: 100%;
  max-width: calc(var(--ztl-container) + var(--ztl-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--ztl-gutter);
}

/* tight uniform grid; set --cols per breakpoint */
.ztl-grid {
  --cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--ztl-space-3);
  align-items: start;
}
@media (min-width: 720px) { .ztl-grid { gap: var(--ztl-space-4); } }

.ztl-divider { height: 1px; border: 0; margin: 0; background: var(--ztl-border); }

/* ------------------------------------------------------------------
   SURFACES
   ------------------------------------------------------------------ */
.ztl-card {
  position: relative; min-width: 0;
  background: var(--ztl-surface);
  border: 1px solid var(--ztl-border);
  border-radius: var(--ztl-radius-lg);
  transition: background-color var(--ztl-dur-normal), border-color var(--ztl-dur-normal);
}
.ztl-card--interactive:hover { background: var(--ztl-surface-hover); border-color: var(--ztl-border-strong); }
.ztl-card--active { border-color: var(--ztl-accent-border); }
.ztl-card--feature { overflow: hidden; }

/* ------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------ */
.ztl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ztl-space-2);
  min-height: 40px; padding: 0 var(--ztl-space-4);
  border: 1px solid transparent; border-radius: var(--ztl-radius-md);
  font-family: var(--ztl-font-body); font-size: var(--ztl-fs-sm); font-weight: 500; line-height: 1;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color var(--ztl-dur-fast), border-color var(--ztl-dur-fast), color var(--ztl-dur-fast);
}
.ztl-btn:hover { text-decoration: none; }
.ztl-btn:disabled, .ztl-btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
.ztl-btn svg { width: 16px; height: 16px; flex: none; }

.ztl-btn--primary { background: var(--ztl-accent); color: var(--ztl-accent-contrast); }
.ztl-btn--primary:hover { background: var(--ztl-accent-hover); color: var(--ztl-accent-contrast); }
.ztl-btn--primary svg { fill: currentColor; }

.ztl-btn--secondary { background: var(--ztl-surface-2); border-color: var(--ztl-border); color: var(--ztl-text); }
.ztl-btn--secondary:hover { background: var(--ztl-surface-hover); border-color: var(--ztl-border-strong); color: var(--ztl-text); }

.ztl-btn--ghost { background: transparent; color: var(--ztl-text-2); }
.ztl-btn--ghost:hover { background: var(--ztl-tint); color: var(--ztl-text); }

.ztl-btn--sm { min-height: 32px; padding: 0 var(--ztl-space-3); font-size: var(--ztl-fs-xs); }
.ztl-btn--md { min-height: 40px; }
.ztl-btn--icon { width: 36px; min-height: 36px; padding: 0; }
.ztl-btn--icon.ztl-btn--sm { width: 32px; min-height: 32px; }

/* ------------------------------------------------------------------
   INPUTS
   ------------------------------------------------------------------ */
.ztl-input, .ztl-select {
  min-height: 36px; padding: 6px var(--ztl-space-3);
  background: var(--ztl-surface);
  border: 1px solid var(--ztl-border-strong); border-radius: var(--ztl-radius-md);
  color: var(--ztl-text); font-size: var(--ztl-fs-sm);
  transition: border-color var(--ztl-dur-fast);
}
.ztl-input { font-size: max(16px, var(--ztl-fs-sm)); }   /* 16px stops iOS zoom */
.ztl-input::placeholder { color: var(--ztl-text-3); }
.ztl-input:hover, .ztl-select:hover { border-color: var(--ztl-text-3); }
.ztl-input:focus-visible, .ztl-select:focus-visible { border-color: var(--ztl-focus); outline: 2px solid var(--ztl-focus); outline-offset: 0; }
.ztl-select option { background: var(--ztl-surface); color: var(--ztl-text); }
.ztl-input:disabled, .ztl-select:disabled { opacity: .5; cursor: default; }
textarea.ztl-input { display: block; width: 100%; min-height: 96px; padding-block: 8px; line-height: 1.5; resize: vertical; }
/* invalid: set aria-invalid="true" and fill the field's error text */
.ztl-input[aria-invalid="true"], .ztl-select[aria-invalid="true"] { border-color: var(--ztl-danger); }
.ztl-input[aria-invalid="true"]:focus-visible { border-color: var(--ztl-danger); outline-color: var(--ztl-danger); }

/* form field: label, control, error text (hidden while empty) */
.ztl-field { display: grid; gap: 6px; min-width: 0; }
.ztl-label { font-size: var(--ztl-fs-sm); font-weight: 500; color: var(--ztl-text); }
.ztl-field__error { font-size: var(--ztl-fs-xs); color: var(--ztl-danger); }
.ztl-field__error:empty { display: none; }

/* segmented control: aria-pressed marks the current item */
.ztl-segmented {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
  background: var(--ztl-surface);
  border: 1px solid var(--ztl-border); border-radius: var(--ztl-radius-md);
}
.ztl-segmented__item {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 var(--ztl-space-3);
  border: 0; border-radius: var(--ztl-radius-sm);
  background: transparent; color: var(--ztl-text-2);
  font-size: var(--ztl-fs-xs); font-weight: 500; cursor: pointer;
  transition: background-color var(--ztl-dur-fast), color var(--ztl-dur-fast);
}
.ztl-segmented__item:hover { color: var(--ztl-text); background: var(--ztl-tint); }
.ztl-segmented__item[aria-pressed="true"] { color: var(--ztl-text); background: var(--ztl-tint-strong); }
.ztl-segmented__count { font-family: var(--ztl-font-mono); font-size: 12px; color: var(--ztl-text-3); font-variant-numeric: tabular-nums; }
.ztl-segmented__item[aria-pressed="true"] .ztl-segmented__count { color: var(--ztl-text-2); }

/* range: adapted from freebounce.studio css/sliders.css, flat */
.ztl-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 20px; background: transparent; cursor: pointer;
}
.ztl-range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--ztl-radius-full); background: var(--ztl-border-strong); }
.ztl-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
  background: var(--ztl-text); border: 0;
}
.ztl-range::-moz-range-track { height: 4px; border-radius: var(--ztl-radius-full); background: var(--ztl-border-strong); }
.ztl-range::-moz-range-progress { height: 4px; border-radius: var(--ztl-radius-full); background: var(--ztl-text-2); }
.ztl-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ztl-text); border: 0; }
.ztl-range:focus-visible { outline: 2px solid var(--ztl-focus); outline-offset: 2px; }
.ztl-range:disabled { opacity: .45; cursor: default; }

/* ------------------------------------------------------------------
   LISTS
   ------------------------------------------------------------------ */
.ztl-list { display: flex; flex-direction: column; min-width: 0; }
.ztl-row {
  display: flex; align-items: center; gap: var(--ztl-space-3);
  min-height: 48px; padding: var(--ztl-space-1) var(--ztl-space-3);
  border-bottom: 1px solid var(--ztl-border);
  color: var(--ztl-text);
  transition: background-color var(--ztl-dur-fast);
}
.ztl-row:hover { background: var(--ztl-tint); color: var(--ztl-text); text-decoration: none; }
.ztl-row[aria-current="true"], .ztl-row.is-active { background: var(--ztl-tint-strong); }
.ztl-list > li:last-child > .ztl-row, .ztl-list > .ztl-row:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------
   BADGE
   ------------------------------------------------------------------ */
.ztl-badge {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 var(--ztl-space-2);
  border: 1px solid var(--ztl-border); border-radius: var(--ztl-radius-sm);
  background: var(--ztl-surface-2); color: var(--ztl-text-2);
  font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
}

/* ------------------------------------------------------------------
   HEADER + NAV
   ------------------------------------------------------------------ */
.ztl-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ztl-header-bg);
  border-bottom: 1px solid var(--ztl-border);
}
.ztl-header__bar {
  height: var(--ztl-header-h);
  display: flex; align-items: center; gap: var(--ztl-space-6);
}
.ztl-header__brand {
  flex: none; font-family: var(--ztl-font-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em;
  color: var(--ztl-text);
}
.ztl-header__brand:hover { color: var(--ztl-text); text-decoration: none; }
.ztl-header__actions { display: flex; align-items: center; gap: var(--ztl-space-2); flex: none; }

.ztl-nav ul { display: flex; gap: var(--ztl-space-1); }
.ztl-nav a {
  display: block; padding: var(--ztl-space-2) 10px; border-radius: var(--ztl-radius-sm);
  font-size: 15px; font-weight: 500; color: var(--ztl-text-2);
}
.ztl-nav a:hover { color: var(--ztl-text); text-decoration: none; }
.ztl-nav a[aria-current="page"] {
  color: var(--ztl-text);
  text-decoration: underline; text-decoration-color: var(--ztl-accent);
  text-decoration-thickness: 2px; text-underline-offset: 8px;
}

/* ------------------------------------------------------------------
   OVERLAYS — backdrop, side drawer, modal
   ------------------------------------------------------------------ */
.ztl-overlay { position: absolute; inset: 0; background: var(--ztl-overlay); }

.ztl-drawer { position: fixed; inset: 0; z-index: 100; }
.ztl-drawer .ztl-overlay { opacity: 0; transition: opacity var(--ztl-dur-normal); }
.ztl-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(320px, 100%);
  display: flex; flex-direction: column;
  background: var(--ztl-surface); border-left: 1px solid var(--ztl-border-strong);
  transform: translateX(100%); transition: transform 200ms cubic-bezier(.2, .7, .2, 1);
  overflow-y: auto; overscroll-behavior: contain;
}
.ztl-drawer.is-open .ztl-overlay { opacity: 1; }
.ztl-drawer.is-open .ztl-drawer__panel { transform: none; }
@media (max-width: 599px) { .ztl-drawer__panel { width: 100%; border-left: 0; } }
.ztl-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ztl-space-3);
  min-height: var(--ztl-header-h); padding: 0 var(--ztl-space-3) 0 var(--ztl-space-5);
  border-bottom: 1px solid var(--ztl-border);
}
.ztl-drawer__title { font-size: 17px; font-weight: 600; }
.ztl-drawer__foot {
  margin-top: auto; padding: var(--ztl-space-4) var(--ztl-space-5);
  border-top: 1px solid var(--ztl-border);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ztl-space-2);
  font-size: var(--ztl-fs-xs); color: var(--ztl-text-2);
}
html.has-drawer, html.has-drawer body { overflow: hidden; }

.ztl-modal {
  width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; border: 0; border-radius: var(--ztl-radius-lg); overflow: visible;
  background: transparent; color: var(--ztl-text);
}
.ztl-modal::backdrop { background: var(--ztl-overlay); }
.ztl-modal__panel {
  display: flex; flex-direction: column; gap: var(--ztl-space-4);
  max-height: calc(100dvh - 24px); overflow-y: auto;
  padding: var(--ztl-space-6); border-radius: var(--ztl-radius-lg);
  background: var(--ztl-surface); border: 1px solid var(--ztl-border-strong);
  box-shadow: var(--ztl-shadow);
}

/* ------------------------------------------------------------------
   PLAY TRIGGER — any [data-play] button (assets/js/player/player-core.js
   toggles .is-current / .is-playing and aria-pressed)
   ------------------------------------------------------------------ */
.ztl-play { cursor: pointer; }
.ztl-play .i-pause { display: none; }
.ztl-play.is-playing .i-play { display: none; }
.ztl-play.is-playing .i-pause { display: block; }
.ztl-play__icon { display: inline-flex; }
.ztl-play svg { width: 14px; height: 14px; fill: currentColor; }
.ztl-play:disabled { cursor: default; opacity: .5; }
/* round overlay button on artwork */
.ztl-play:not(.ztl-btn) {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ztl-text); color: var(--ztl-bg);
  transition: background-color var(--ztl-dur-fast), color var(--ztl-dur-fast);
}
.ztl-play:not(.ztl-btn) .i-play { margin-left: 2px; }
.ztl-play:not(.ztl-btn):hover, .ztl-play:not(.ztl-btn).is-current { background: var(--ztl-accent); color: var(--ztl-accent-contrast); }

/* quiet "⋯" button on cards: shows on hover/focus where hover exists */
.card-more { background: var(--ztl-surface); border: 1px solid var(--ztl-border); color: var(--ztl-text); }
.card-more svg { width: 16px; height: 16px; fill: currentColor; }
.card-more:hover { background: var(--ztl-surface-hover); color: var(--ztl-text); }
@media (hover: hover) {
  [data-play-card] .rel__media .card-more { opacity: 0; }
  [data-play-card]:hover .card-more, [data-play-card]:focus-within .card-more, .card-more[aria-expanded="true"] { opacity: 1; }
}

/* ------------------------------------------------------------------
   MENU — small popover list (the card source menu)
   ------------------------------------------------------------------ */
.ztl-menu {
  position: fixed; z-index: 70;
  min-width: 220px; max-width: calc(100vw - 16px); padding: 4px;
  background: var(--ztl-surface); border: 1px solid var(--ztl-border-strong); border-radius: var(--ztl-radius-md);
  box-shadow: var(--ztl-shadow);
}
.ztl-menu__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ztl-space-3);
  width: 100%; min-height: 36px; padding: 0 10px;
  border: 0; border-radius: var(--ztl-radius-sm); background: none;
  color: var(--ztl-text); font-size: var(--ztl-fs-sm); text-align: left; text-decoration: none; cursor: pointer;
}
.ztl-menu__item:hover, .ztl-menu__item:focus-visible { background: var(--ztl-tint-strong); color: var(--ztl-text); text-decoration: none; outline-offset: -2px; }
.ztl-menu__arrow { color: var(--ztl-text-3); }
.ztl-menu__sep { height: 1px; margin: 4px 6px; background: var(--ztl-border); }
.ztl-menu__status { padding: 6px 10px; font-size: 12px; color: var(--ztl-text-3); }

/* ------------------------------------------------------------------
   DOCK — the global player (assets/js/player/player-ui.js)
   ------------------------------------------------------------------ */
body.has-dock { padding-bottom: var(--ztl-dock-h-desktop, 64px); }
.ztl-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; color: var(--ztl-text); }
.ztl-dock__audio { display: none; }

.ztl-dock__bar {
  position: relative;
  display: flex; align-items: center; gap: var(--ztl-space-3);
  height: var(--ztl-dock-h-desktop, 64px); padding: 0 var(--ztl-gutter);
  background: var(--ztl-surface); border-top: 1px solid var(--ztl-border);
}
.ztl-dock__bar-controls, .ztl-dock__bar-controls > .ztl-dock__controls { display: contents; }
.ztl-dock__art { flex: none; width: 40px; height: 40px; border-radius: 4px; object-fit: cover; background: var(--ztl-surface-2); }
.ztl-dock__meta { flex: 0 1 260px; min-width: 0; }
.ztl-dock__title { font-size: var(--ztl-fs-sm); font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ztl-dock__artist, .ztl-dock__error { font-size: 12px; line-height: 1.35; color: var(--ztl-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ztl-dock__error { color: var(--ztl-danger); }
.ztl-dock__error a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ztl-dock__badge { flex: none; margin-left: auto; }
.ztl-dock__toggle { flex: none; }
.ztl-dock__seek { flex: 1 1 auto; min-width: 120px; display: flex; align-items: center; gap: var(--ztl-space-2); }
.ztl-dock__vol { flex: none; display: flex; align-items: center; gap: 6px; color: var(--ztl-text-3); }
.ztl-dock__vol .ztl-range { width: 84px; }
.ztl-dock__vol-icon svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.ztl-dock__range { flex: 1; min-width: 0; }
.ztl-dock__time { flex: none; font-family: var(--ztl-font-mono); font-size: 12px; color: var(--ztl-text-2); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: center; }
.ztl-dock .ztl-btn svg { width: 16px; height: 16px; }
.ztl-dock__prev svg, .ztl-dock__next svg, .ztl-dock__toggle svg { fill: currentColor; }
.ztl-dock__toggle .i-pause { display: none; }
.ztl-dock__toggle.is-playing .i-play { display: none; }
.ztl-dock__toggle.is-playing .i-pause { display: block; }
.ztl-dock[data-state="buffering"] .ztl-dock__toggle { opacity: .7; }
.ztl-dock__expand svg { transition: transform var(--ztl-dur-normal); }
.ztl-dock[data-expanded="true"] .ztl-dock__expand svg { transform: rotate(180deg); }
.ztl-dock__line { display: none; }
@media (max-width: 999px) { .ztl-dock__badge { display: none; } }

/* expanded panel: a sheet above the bar. Collapsed it is only hidden
   (visibility + inert), so provider iframes stay mounted and keep playing. */
.ztl-dock__panel {
  position: absolute; left: 0; right: 0; bottom: 100%;
  max-height: min(420px, 70vh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--ztl-surface); border-top: 1px solid var(--ztl-border-strong);
  box-shadow: var(--ztl-shadow);
  visibility: hidden; pointer-events: none;
}
.ztl-dock[data-expanded="true"] .ztl-dock__panel { visibility: visible; pointer-events: auto; }
.ztl-dock__panel-in { display: grid; gap: var(--ztl-space-4); max-width: calc(var(--ztl-container) + var(--ztl-gutter) * 2); margin-inline: auto; padding: var(--ztl-space-4) var(--ztl-gutter); }
.ztl-dock__panel-controls:empty { display: none; }
.ztl-dock__embeds:not(:has(.ztl-dock__embed:not([hidden]) iframe)) { display: none; }
.ztl-dock__embed iframe { display: block; width: 100%; border: 0; border-radius: var(--ztl-radius-lg); }
.ztl-dock__h { margin-bottom: var(--ztl-space-2); font-size: var(--ztl-fs-xs); font-weight: 600; font-family: var(--ztl-font-body); color: var(--ztl-text-2); }
.ztl-dock__qrow {
  display: grid; grid-template-columns: 2.5ch minmax(0, 1fr) minmax(0, .8fr); gap: var(--ztl-space-3);
  width: 100%; min-height: 40px; border: 0; background: none; text-align: left; cursor: pointer; font-size: var(--ztl-fs-sm);
}
.ztl-dock__qn { font-size: 12px; color: var(--ztl-text-3); }
.ztl-dock__qt, .ztl-dock__qa { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ztl-dock__qa { color: var(--ztl-text-2); }
.ztl-dock__qrow[aria-current="true"] .ztl-dock__qt { color: var(--ztl-accent); }

@media (max-width: 719px) {
  body.has-dock { padding-bottom: var(--ztl-dock-h-mobile, 60px); }
  .ztl-dock__bar { height: var(--ztl-dock-h-mobile, 60px); gap: 10px; }
  .ztl-dock__meta { flex: 1 1 auto; }
  .ztl-dock__panel-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ztl-space-2); }
  .ztl-dock__controls { display: contents; }
  .ztl-dock__badge { display: inline-flex; margin-left: 0; }
  .ztl-dock__seek { flex: 1 1 100%; order: -1; }
  .ztl-dock__vol { display: none; }
  .ztl-dock__close { margin-left: auto; }
  /* 2px progress line along the top edge of the dock */
  .ztl-dock__line { display: block; position: absolute; left: 0; right: 0; bottom: var(--ztl-dock-h-mobile, 60px); z-index: 1; height: 2px; background: var(--ztl-border); pointer-events: none; }
  .ztl-dock__line span { display: block; height: 100%; width: 0; background: var(--ztl-accent); }
  .ztl-dock[data-expanded="true"] .ztl-dock__line { display: none; }
}

/* ------------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  /* 0s, not 1ms: a 1ms transition on every property would also delay visibility changes (menus, the dock panel) */
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .ztl-drawer__panel { transform: none; }
  .ztl-dock__expand svg { transition: none; }
}