/* Tape-specific controls only; the shared stylesheet owns the product-card
   grid, page width, typography, padding and responsive block order. */
:root {
  color-scheme: dark;
  color: #ffffff;
  background: #161c26;
  /* Current TapeEngine manual's cover accent, not a new approximation. */
  --tape-accent: #f59c00;
  --tab-color: var(--tape-accent);
  --player-accent: var(--tape-accent);
}

* { box-sizing: border-box; }

a { color: inherit; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--tape-accent); outline-offset: 5px; }

.draft-header { min-height: 108px; padding: 30px 32px 20px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px; }
.draft-brand { display: inline-flex; }
.draft-brand img { display: block; width: 228px; max-width: 100%; height: auto; }
.draft-home { color: #aeb7c8; font-size: 14px; line-height: 1.5; text-decoration: none; }
.draft-home:hover { color: var(--tape-accent); text-decoration: underline; }
.draft-home span { margin-left: 6px; }
.draft-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
#tape-language { padding: 8px 10px; border: 1px solid #62616a; border-radius: 5px; color: #d4d7df; background: #242832; font: inherit; font-size: 14px; }

.draft-main { padding: 0; }
.draft-intro { min-width: 0; }
.draft-template-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 32px; color: #9da5b8; font-size: 13px; line-height: 1.5; }
.draft-status { display: inline-block; border: 1px solid rgba(245, 156, 0, 0.35); border-radius: 999px; padding: 8px 13px; color: var(--tape-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.draft-intro .subtitle { color: var(--tape-accent); }
.draft-intro .subtitle .benefit-highlight { white-space: nowrap; }
.draft-intro .manual-link { color: var(--tape-accent); }
#tape-description { display: contents; }
#tape-description p:last-child { margin-bottom: 16px; }
.cta-row.draft-cta-row { grid-template-columns: minmax(0, 1fr); }
.draft-free-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 126px; padding: 20px 14px; border: 1px solid #98e1cd; border-radius: 12px; background: #6fd0b4; color: #0d201c; font: inherit; text-align: center; box-shadow: inset 0 1px 0 #ffffff28, 0 4px 0 #0004, 0 10px 24px #0002; }
.draft-free-button:disabled { opacity: 1; cursor: not-allowed; }
.draft-free-button:not(:disabled) { cursor: pointer; }
.draft-free-button:hover { background: #7cdcc0; }
.draft-free-button:active { transform: translateY(2px); }
.draft-free-label { font-size: clamp(32px, 3vw, 40px); line-height: 1.1; font-weight: 700; }
.draft-free-note { font-size: 19px; line-height: 1.3; font-weight: 700; }
.draft-visual { aspect-ratio: 960 / 700; }
.draft-visual::after { display: none; }
.draft-poster, .draft-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  background: #343841;
  box-shadow: 0 0 60px rgba(157, 165, 184, 0.35), 0 0 144px rgba(80, 91, 112, 0.24), 0 38px 70px rgba(0, 0, 0, 0.26);
  transform: rotateX(var(--tilt-x, 2deg)) rotateY(var(--tilt-y, -9deg)) rotateZ(var(--tilt-z, 1deg));
  transform-origin: center center;
  transition: transform 140ms ease-out, opacity 200ms ease;
  will-change: transform;
}
.draft-video { position: absolute; inset: 0; border-radius: 0; }
.draft-visual.is-fallback .draft-video { visibility: hidden; }
.draft-visual:not(.is-fallback) .draft-poster { visibility: hidden; }
/* 123px = the existing 82px card height x 1.5. Mode colours stay neutral
   until the owner supplies the four TapeEngine switch colours. */
.draft-audio .player-stack { gap: 10px; }
.draft-audio .audio-card { min-height: 123px; padding: 13px 14px; background: #23262e; border-color: #43434b; }
.draft-audio .audio-card-head { min-height: 34px; align-items: center; gap: 8px; }
.draft-audio .audio-title { color: #dddfe6; font-size: 14px; }
.draft-audio .mode-toggle { gap: 5px; }
.draft-audio .mode-toggle > span { display: none; }
.draft-audio .mode-toggle button { padding: 7px 6px; border: 1px solid #61616a; border-radius: 4px; color: #b9bbc5; background: #303139; white-space: nowrap; }
.draft-audio .mode-toggle button.active { color: #fff; background: #50515b; border-color: #c6c6d0; }
.draft-audio .mode-toggle button:disabled { cursor: wait; }
.draft-audio .player-body { grid-template-columns: 42px minmax(0, 1fr); gap: 13px; margin-top: 8px; }
.draft-audio .play-button { width: 42px; height: 42px; background: #393a43; }
.draft-audio .play-button:disabled { cursor: wait; }
.draft-audio .wave { height: 51px; }
.tape-download-dialog { max-width: min(620px, calc(100vw - 32px)); }
.tape-download-dialog .download-submit:disabled { cursor: not-allowed; }
.draft-footer { border-top: 1px solid rgba(157, 165, 184, 0.18); padding-top: 20px; color: #9da5b8; font-size: 12px; line-height: 1.6; }
.draft-footer p { margin: 0; }

@media (max-width: 760px) {
  .draft-header { min-height: 132px; padding: 22px 16px; gap: 10px 16px; }
  .draft-brand img { width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .draft-visual .draft-video { visibility: hidden; }
  .draft-visual .draft-poster { visibility: visible; }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .draft-poster, .draft-video { transform: none; transition: none; will-change: auto; }
}

@media (max-width: 480px) {
  .draft-brand img { width: 170px; }
  .draft-free-note { font-size: 17px; }
  .draft-audio .audio-card-head { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .draft-audio .mode-toggle { justify-content: space-between; }
  .draft-audio .mode-toggle button { flex: 1; min-height: 32px; padding-inline: 4px; }
}
@media (max-width: 360px) {
  .draft-audio .mode-toggle { gap: 3px; }
  .draft-audio .mode-toggle button { font-size: 11px; padding-inline: 3px; }
}