/* 05 — layers dark accent band (T04). Logical properties only. */
#layers .layers-head { max-width: 680px; margin-bottom: var(--s-9); }
#layers .layers-head .lead { margin: 0; }
#layers .layers-split { align-items: start; }
@media (min-width: 960px) { #layers .layers-media { position: sticky; inset-block-start: calc(var(--s-11) + 24px); } }

/* Clinical HUD frame: thin corner ticks around the video */
.layers-media { margin: 0; position: relative; padding: var(--s-3); }
.layers-media::before, .layers-media::after {
  content: ""; position: absolute; width: 28px; height: 28px; pointer-events: none;
  border: 0 solid var(--kx-dark-blue); opacity: .7;
}
.layers-media::before { inset-block-start: 0; inset-inline-start: 0; border-block-start-width: 1px; border-inline-start-width: 1px; }
.layers-media::after { inset-block-end: 0; inset-inline-end: 0; border-block-end-width: 1px; border-inline-end-width: 1px; }
.layers-video video { display: block; }

.layers-cap {
  display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4);
  font-size: var(--fs-micro); font-weight: var(--fw-med); color: var(--kx-dark-ink-2); letter-spacing: var(--tracking-label);
}
.layers-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--kx-dark-blue); flex: none; }
.layers-cap::after { content: ""; flex: 1; height: 1px; background: var(--kx-dark-line); }

/* Toggle: hidden without JS (native controls cover it); icon swaps by state */
html:not(.js) #layers .video-toggle { display: none; }
#layers .video-toggle { z-index: 2; min-width: 44px; min-height: 44px; transition: background .2s ease, border-color .2s ease; }
#layers .video-toggle { bottom: auto; inset-block-start: var(--s-3); } /* keep clear of the wordmark burned into the video corner */
#layers .video-toggle:hover { background: rgba(11,18,32,.9); border-color: var(--kx-dark-blue); }
#layers .video-toggle:focus-visible { outline: 3px solid var(--kx-dark-blue); outline-offset: 3px; }
#layers .video-toggle .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#layers .video-toggle .vt-play { display: none; fill: currentColor; }
#layers .video-toggle.is-paused .vt-pause { display: none; }
#layers .video-toggle.is-paused .vt-play { display: block; }

#layers .layer-legend { margin-top: 0; border-block-end: 1px solid var(--kx-dark-line); }
#layers .layer-legend li { align-items: baseline; row-gap: 2px; }
#layers .layer-legend li > b, #layers .layer-legend li > span { grid-column: 2; }
#layers .layer-legend li::before { grid-row: 1; }
#layers .layer-legend b { font-size: 1.0625rem; margin-bottom: 2px; }

.layers-mech {
  position: relative; margin: var(--s-6) 0 0; padding-inline-start: var(--s-5);
  color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-lead); line-height: 1.5;
}
.layers-mech::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block: 4px; width: 2px;
  border-radius: 2px; background: var(--kx-dark-blue);
}
.band-dark .layers-mech { color: #fff; }

@media (prefers-reduced-motion: reduce) { #layers .video-toggle { transition: none; } }
@media (forced-colors: active) { .layers-media::before, .layers-media::after { border-color: CanvasText; } }