/* dwell.css — MTM dwell features (fleet lane B4). Uses the rev7 design
   tokens with literal fallbacks; navy is the ground, gold the frame,
   orange spent only on actions and play states (B1 palette law).
   All interactive targets >= 44px. Page scroll stays vertical; the
   sequencer grid scrolls inside its own box (contained-scroll law). */

.dwell {
  --dw-panel: var(--navy-850, #0E1A2E);
  --dw-cell: var(--navy-800, #122239);
  --dw-cell-edge: var(--navy-700, #1B3050);
  --dw-ink: var(--ink-light, #F5F5F7);
  --dw-muted: var(--muted-light, #A7A099);
  --dw-gold: var(--gold, #C9A45C);
  --dw-accent: var(--accent, #B93A03);
  --dw-accent-hover: var(--accent-hover, #CE4405);
  --dw-accent-bright: var(--accent-bright, #E8622C);
  --dw-frame: var(--frame, 1px solid rgba(201,164,92,.30));
  font-family: var(--font, -apple-system, "Helvetica Neue", Arial, sans-serif);
  color: var(--dw-ink);
  background: var(--dw-panel);
  border: var(--dw-frame);
  border-radius: var(--radius-lg, 18px);
  padding: 16px;
  margin: 16px 0;
}
.dwell * { box-sizing: border-box; }
.dwell-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.dwell-sub { color: var(--dw-muted); font-size: .86rem; line-height: 1.45; margin: 0 0 12px; }
.dwell-status { color: var(--dw-gold); font-size: .86rem; min-height: 1.25em; margin: 8px 0 0; }
.dwell-explainer { color: var(--dw-muted); font-size: .86rem; line-height: 1.5; margin: 12px 0 0; }

/* transport + segmented controls */
.dwell-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.dwell-row-label { color: var(--dw-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; min-width: 64px; }
.dwell-play {
  min-width: 52px; min-height: 44px; padding: 0 18px;
  border: none; border-radius: var(--radius-pill, 999px);
  background: var(--cta-bg, linear-gradient(180deg, var(--dw-accent-hover), var(--dw-accent)));
  color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.dwell-play:focus-visible, .dwell-seg button:focus-visible, .dwell-chip-cta:focus-visible,
.dwell-step:focus-visible, .dwell-btn:focus-visible { outline: 2px solid var(--focus, #E8622C); outline-offset: 2px; }
.dwell-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--dw-cell); border-radius: var(--radius-pill, 999px); padding: 4px; }
.dwell-seg button {
  min-height: 44px; padding: 0 14px; border: none; border-radius: var(--radius-pill, 999px);
  background: transparent; color: var(--dw-ink); font-size: .9rem; cursor: pointer;
}
.dwell-seg button[aria-pressed="true"] { background: var(--dw-accent); color: #fff; font-weight: 700; }
.dwell-btn {
  min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill, 999px);
  border: var(--dw-frame); background: var(--dw-cell); color: var(--dw-ink);
  font-size: .9rem; cursor: pointer;
}
.dwell-btn[aria-pressed="true"] { background: var(--dw-accent); border-color: transparent; color: #fff; font-weight: 700; }

/* product chip */
.dwell-chip { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.07); }
.dwell-chip:first-of-type { border-top: none; }
.dwell-chip-cover { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; }
.dwell-chip-body { flex: 1 1 auto; min-width: 0; }
.dwell-chip-name { font-weight: 600; font-size: .95rem; white-space: normal; overflow: visible; text-overflow: clip; }
.dwell-chip-price { color: var(--dw-muted); font-size: .82rem; }
.dwell-chip-cta {
  flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px;
  border-radius: var(--radius-pill, 999px); background: var(--dw-accent); color: #fff;
  font-weight: 700; font-size: .88rem; text-decoration: none;
}
.dwell-chip-cta:hover { background: var(--dw-accent-hover); }

/* D3 compare toggle */
.dwell-ab { display: flex; gap: 4px; background: var(--dw-cell); border-radius: var(--radius-pill, 999px); padding: 4px; }
.dwell-ab button {
  flex: 1 1 0; min-height: 48px; padding: 6px 10px; border: none; border-radius: var(--radius-pill, 999px);
  background: transparent; color: var(--dw-ink); font-size: .9rem; cursor: pointer; line-height: 1.25;
}
.dwell-ab button[aria-pressed="true"] { background: var(--dw-accent); color: #fff; font-weight: 700; }
.dwell-ab .dwell-ab-sub { display: block; font-size: .72rem; font-weight: 400; opacity: .85; }

/* D1 sequencer */
.dwell-seq-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.dwell-seq-grid { display: grid; gap: 4px; min-width: 560px; }
.dwell-seq-lanelabel {
  display: flex; align-items: center; font-size: .8rem; color: var(--dw-muted);
  padding-right: 8px; white-space: nowrap;
}
.dwell-step {
  height: 44px; min-width: 30px; border: 1px solid var(--dw-cell-edge); border-radius: 8px;
  background: var(--dw-cell); color: var(--dw-ink); cursor: pointer; padding: 0;
  font-size: .72rem; font-weight: 700; line-height: 1;
}
.dwell-step.beat { border-color: rgba(201,164,92,.45); }
.dwell-step.on { background: var(--dw-accent); border-color: var(--dw-accent-bright); color: #fff; }
.dwell-step.now { box-shadow: inset 0 0 0 2px var(--dw-gold); }
.dwell-step.on.now { box-shadow: inset 0 0 0 2px #fff; }
.dwell input[type="range"] { min-height: 44px; accent-color: var(--dw-accent); flex: 1 1 140px; }
.dwell-range-val { color: var(--dw-gold); font-size: .88rem; min-width: 74px; }

/* D6 passport + D14 radio */
.dwell-pass-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.07); }
.dwell-pass-row:first-of-type { border-top: none; }
.dwell-pass-name { font-weight: 600; font-size: .95rem; }
.dwell-pass-count { color: var(--dw-gold); font-size: .9rem; white-space: nowrap; }
.dwell-pass-missing { color: var(--dw-muted); font-size: .84rem; margin: 2px 0 6px; }
.dwell-now { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.dwell-now-cover { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; }
.dwell-now-title { font-weight: 600; font-size: .95rem; }
.dwell-now-prod { color: var(--dw-muted); font-size: .82rem; }

@media (prefers-reduced-motion: reduce) {
  .dwell * { transition: none !important; animation: none !important; }
}

/* ================================================================
   PRETTY-GLOBAL — Lane 4 (2026-10-16): dwell panels polish.
   Presentation only. Panel titles take the Anton display voice;
   micro readouts (status / counts / range values) move from gold
   to champagne — the gold ramp's codified text member — so gold
   itself stays frames and marks (DESIGN-LANGUAGE token law).
   ================================================================ */
.dwell {
  padding: 20px;
  background: linear-gradient(180deg, rgba(232,196,118,.045), rgba(232,196,118,0) 120px), var(--dw-panel);
  box-shadow: 0 1px 2px rgba(6,13,24,.50), 0 14px 34px rgba(6,13,24,.34);
}
.dwell-title {
  font-family: var(--font-display, 'Anton', 'Oswald', sans-serif);
  font-weight: 400; font-size: 1.22rem; letter-spacing: .02em; margin-bottom: 6px;
}
.dwell-status {
  color: var(--champagne, #E9DCC0);
  font-family: var(--font-label, 'Oswald', sans-serif);
  letter-spacing: .05em;
}
.dwell-range-val, .dwell-pass-count { color: var(--champagne, #E9DCC0); }
.dwell-play {
  box-shadow: 0 6px 18px rgba(232,98,44,.28), inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .3s cubic-bezier(0.28,0.11,0.32,1), filter .3s, box-shadow .3s;
}
@media (hover:hover) { .dwell-play:hover { filter: brightness(1.06); transform: translateY(-1px); } }
.dwell-play:active { transform: scale(.97); }
.dwell-btn, .dwell-seg button, .dwell-ab button, .dwell-chip-cta, .dwell-step {
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s;
}
@media (hover:hover) {
  .dwell-btn:not([aria-pressed="true"]):hover,
  .dwell-seg button:not([aria-pressed="true"]):hover,
  .dwell-ab button:not([aria-pressed="true"]):hover { background: var(--dw-cell-edge); }
  .dwell-step:not(.on):hover { border-color: rgba(201,164,92,.55); }
}
.dwell-chip-cta { box-shadow: 0 4px 14px rgba(232,98,44,.22); }
.dwell-chip-cover, .dwell-now-cover { border: var(--dw-frame); }
.dwell-step { letter-spacing: .02em; }
.dwell input[type="range"] { cursor: pointer; }

@media (max-width: 560px) {
  .dwell { padding: 16px 14px; margin: 12px 0; }
  .dwell-title { font-size: 1.08rem; }
  .dwell-chip { gap: 10px; }
  .dwell-chip-cta { padding: 0 13px; font-size: .84rem; }
  .dwell-row-label { min-width: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .dwell-play, .dwell-btn, .dwell-seg button, .dwell-ab button,
  .dwell-chip-cta, .dwell-step { transition: none !important; }
}

/* ================================================================
   PRETTY-GLOBAL 2 — ALIVE (2026-10-16): dwell panels fade up as
   they are built, and while a groove plays (playhead .now class
   exists only during playback) the Play button breathes.
   ================================================================ */
@keyframes pg-dwell-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pg-dwell-glow {
  0%, 100% { box-shadow: 0 6px 18px rgba(232,98,44,.28), inset 0 1px 0 rgba(255,255,255,.16); }
  50% { box-shadow: 0 6px 30px rgba(232,98,44,.55), inset 0 1px 0 rgba(255,255,255,.16); }
}
.dwell { animation: pg-dwell-in .5s cubic-bezier(0.28,0.11,0.32,1); }
.dwell:has(.dwell-step.now) .dwell-play { animation: pg-dwell-glow 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .dwell { animation: none !important; }
  .dwell:has(.dwell-step.now) .dwell-play { animation: none !important; }
}