/* ==========================================================================
   Practice menus + "+" menu overhaul (web port of flowBuilder.ios#88)
   --------------------------------------------------------------------------
   Linked after modern.css. One small kit shared by the Create sheet ("+"),
   Breathe, Meditate, Vision, Tones, Generate, the player's Options sheet,
   the Flow Library (import) modal, the Video-to-Flow sources and the
   Pose-to-Flow explainer, so the web feels like the iOS menus:

     - drifting radial-glow backdrop in each menu's mood colour
       (.pm-screen::before; transform-only, ~90 s loop, no blur pass)
     - floating glass-bead orb header with a breathing halo (.practice-hero)
     - frosted cards (radius 24), tiles (radius 20), 44 px wrapping chips
     - a pinned, glowing primary action (.pm-primary-bar / .gen-generate-bar)

   Moods (the glow colour; interactive colour stays the user's accent so
   themes keep working): breathe sky-teal, meditate indigo, vision rose,
   generate pink, frequency sea-teal, + menu / library lavender.

   Accessibility: everything that moves stops under Reduce Motion (the OS
   query and html[data-reduce-motion]); prefers-reduced-transparency makes
   cards opaque and drops the glow; prefers-contrast: more strengthens
   hairlines; forced-colors falls back to system colours.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
    --pm-card-radius: 24px;
    --pm-tile-radius: 20px;
    --pm-chip-min: 44px;
    --pm-glow-rgb: 167, 139, 250;            /* lavender (+ menu, library) */
    --pm-glow-alpha: 0.30;
    --pm-card-bg: rgba(255, 255, 255, 0.74);
    --pm-card-solid: #ffffff;
    --pm-card-stroke: rgba(255, 255, 255, 0.85);
    --pm-card-edge: rgba(17, 17, 26, 0.07);
    --pm-card-shadow: 0 1px 2px rgba(17, 17, 26, 0.04), 0 10px 30px rgba(var(--pm-glow-rgb), 0.14);
    --pm-chip-bg: rgba(255, 255, 255, 0.82);
    --pm-page-fade: rgba(255, 255, 255, 0.88);
    --pm-ease-bloom: cubic-bezier(0.34, 1.56, 0.64, 1);
}
html[data-mode="dark"] {
    --pm-glow-alpha: 0.22;
    --pm-card-bg: rgba(28, 28, 30, 0.74);
    --pm-card-solid: #1c1c1e;
    --pm-card-stroke: rgba(255, 255, 255, 0.07);
    --pm-card-edge: rgba(255, 255, 255, 0.08);
    --pm-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.45);
    --pm-chip-bg: rgba(44, 44, 46, 0.82);
    --pm-page-fade: rgba(0, 0, 0, 0.86);
}
[data-pm-mood="breathe"] { --pm-glow-rgb: 90, 200, 224; }
[data-pm-mood="meditate"] { --pm-glow-rgb: 99, 102, 241; }
[data-pm-mood="vision"] { --pm-glow-rgb: 244, 114, 182; }
[data-pm-mood="generate"] { --pm-glow-rgb: 236, 72, 153; }
[data-pm-mood="frequency"] { --pm-glow-rgb: 45, 212, 191; }
[data-pm-mood="library"] { --pm-glow-rgb: 167, 139, 250; }

/* 2. Screen + drifting backdrop ------------------------------------------- */
.pm-screen {
    position: relative;
    isolation: isolate;
}
.pm-screen::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(55% 40% at 12% 8%, rgba(var(--pm-glow-rgb), var(--pm-glow-alpha)), transparent 70%),
        radial-gradient(50% 38% at 92% 30%, rgba(var(--accent-rgb), calc(var(--pm-glow-alpha) * 0.7)), transparent 70%),
        radial-gradient(65% 45% at 45% 100%, rgba(var(--pm-glow-rgb), calc(var(--pm-glow-alpha) * 0.6)), transparent 72%);
    will-change: transform;
    animation: pmDrift 96s ease-in-out infinite alternate;
}
@keyframes pmDrift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(3%, 2%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, 3%, 0) scale(1.03); }
}
.pm-screen .feature-header {
    background: var(--surface-bar);
    border-bottom-color: var(--hairline);
}
.pm-screen { --pm-gutter: 20px; }
@media (max-width: 600px) {
    .pm-screen { --pm-gutter: 16px; }
}
.pm-screen .feature-main {
    max-width: 640px;
    padding: 16px var(--pm-gutter) 0;
}
/* Breathe keeps a wide pattern grid on desktop; the rest stays a 640 px column. */
.pm-screen .feature-main.breathwork-main { max-width: 960px; }
.pm-screen .breathwork-main > :not(.pm-section):not(.pm-primary-bar) {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* 3. Orb header ------------------------------------------------------------ */
.pm-head { text-align: center; margin: 4px 0 18px; }
.pm-screen .practice-hero,
.pm-library .practice-hero,
.pm-explainer .practice-hero {
    position: relative;
    width: 84px;
    height: 84px;
    margin: 6px auto 12px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #ffffff;
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 44%),
        linear-gradient(150deg, rgb(var(--pm-glow-rgb)) 0%, var(--accent-fill) 78%);
    box-shadow:
        inset 0 -8px 16px rgba(0, 0, 0, 0.14),
        0 12px 32px rgba(var(--pm-glow-rgb), 0.38);
    animation: pmFloat 6s ease-in-out infinite;
}
.pm-screen .practice-hero svg,
.pm-library .practice-hero svg,
.pm-explainer .practice-hero svg { width: 36px; height: 36px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18)); }
.pm-screen .practice-hero::after,
.pm-library .practice-hero::after,
.pm-explainer .practice-hero::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 1px solid rgba(var(--pm-glow-rgb), 0.45);
    background: radial-gradient(circle, rgba(var(--pm-glow-rgb), 0.16), transparent 70%);
    animation: pmHalo 5s ease-in-out infinite;
}
@keyframes pmFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
@keyframes pmHalo {
    0%, 100% { transform: scale(0.94); opacity: 0.7; }
    50% { transform: scale(1.06); opacity: 1; }
}
.pm-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-md, 15px);
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.pm-screen .tones-subtitle { margin-top: 8px; }

/* 4. Cards, section titles, badges ---------------------------------------- */
.pm-screen .pm-card,
.pm-screen .practice-options,
.pm-screen .gen-main > .gen-section,
.pm-screen .gen-more,
.pm-screen .vision-sliders,
.pm-screen .med-guided-container .med-session-card,
.pm-library .import-option {
    background: var(--pm-card-bg);
    border: 1px solid var(--pm-card-edge);
    border-radius: var(--pm-card-radius);
    box-shadow: var(--pm-card-shadow);
}
.pm-screen .pm-card,
.pm-screen .gen-main > .gen-section {
    padding: 16px 16px 18px;
    margin: 0 0 14px;
}
.pm-screen .practice-options { margin: 0 0 14px; }
.pm-screen .practice-options > summary { min-height: 56px; border-radius: var(--pm-card-radius); }
.pm-screen .practice-options > summary:focus-visible { border-radius: var(--pm-card-radius); }
.pm-screen .gen-more { margin: 0 0 14px; }
.pm-screen .gen-more-toggle { min-height: 56px; border-radius: var(--pm-card-radius); }
.pm-screen .pm-section { margin: 0 0 6px; }
.pm-screen .pm-section-title,
.pm-screen .gen-main > .gen-section > h3,
.pm-screen .freq-category h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: var(--fs-lg, 17px);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.pm-screen .pm-section-title svg { flex: 0 0 auto; color: var(--accent-text); }
.pm-section > .pm-section-title { padding: 0 4px; }
.pm-summary-label { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.pm-badge {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    background: var(--accent-tint-2, rgba(var(--accent-rgb), 0.14));
    color: var(--accent-text);
}
.pm-badge-accent { background: var(--accent-fill); color: var(--accent-on); }
.pm-screen .settings-toggle-row { min-height: 48px; margin: 0; padding: 4px 0; }
.pm-screen .pm-card .settings-toggle-row + .settings-toggle-row { border-top: 1px solid var(--hairline); }

/* 5. Chips (wrapping, >= 44 px) ------------------------------------------- */
.pm-screen .duration-pills,
.pm-screen .gen-tags,
.pm-screen .gen-segmented,
.pm-screen .ambient-buttons,
.pm-screen .vision-duration-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0;
}
.pm-screen .duration-pill,
.pm-screen .gen-tag,
.pm-screen .gen-seg-btn,
.pm-screen .ambient-btn,
.pm-screen .vision-dur-chip {
    flex: 0 0 auto;
    min-height: var(--pm-chip-min);
    padding: 10px 18px;
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
    background: var(--pm-chip-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-md, 15px);
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
    cursor: pointer;
    transform: none;
    transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-press) var(--ease-out),
        box-shadow var(--dur-press) var(--ease-out), border-color var(--dur-press) var(--ease-out);
}
.pm-screen .gen-seg-btn:not(:last-child) { border-right: 1px solid var(--hairline-strong); }
.pm-screen .duration-pill:hover:not(.active),
.pm-screen .gen-tag:hover:not(.active),
.pm-screen .gen-seg-btn:hover:not(.active),
.pm-screen .ambient-btn:hover:not(.active),
.pm-screen .vision-dur-chip:hover:not(.active) {
    border-color: var(--accent-text);
    color: var(--text-primary);
    transform: none;
}
.pm-screen .duration-pill.active,
.pm-screen .gen-tag.active,
.pm-screen .gen-seg-btn.active,
.pm-screen .ambient-btn.active,
.pm-screen .vision-dur-chip.active {
    background: var(--accent-fill);
    border-color: transparent;
    color: var(--accent-on);
    box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.32);
    transform: translateY(-1px);
}
.pm-screen .duration-pill:active,
.pm-screen .gen-tag:active,
.pm-screen .gen-seg-btn:active,
.pm-screen .ambient-btn:active,
.pm-screen .vision-dur-chip:active { transform: scale(var(--press-scale, 0.97)); }
.pm-screen .duration-pill:focus-visible,
.pm-screen .gen-tag:focus-visible,
.pm-screen .gen-seg-btn:focus-visible,
.pm-screen .ambient-btn:focus-visible,
.pm-screen .vision-dur-chip:focus-visible,
.pm-screen .breath-pattern-select:focus-visible,
.pm-screen .breath-info-btn:focus-visible,
.pm-screen .med-mode-btn:focus-visible,
.pm-screen .feature-begin-btn:focus-visible,
.create-row:focus-visible,
.create-tile:focus-visible,
.vidf-source:focus-visible,
.pm-library .template-btn:focus-visible,
.pm-library .upload-btn:focus-visible {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring, var(--accent-text));
    outline-offset: 2px;
}

/* Meditate: glass Timer / Guided switch. */
.pm-screen .med-mode-picker {
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--pm-card-edge);
    border-radius: 999px;
    background: var(--pm-card-bg);
    box-shadow: var(--pm-card-shadow);
    overflow: visible;
}
.pm-screen .med-mode-btn {
    min-height: 40px;
    border-radius: 999px;
    border: 0;
    transition: background-color var(--dur-press) var(--ease-out), color var(--dur-press) var(--ease-out);
}
.pm-screen .med-mode-btn + .med-mode-btn { border-left: 0; }
.pm-screen .med-mode-btn.active {
    background: var(--accent-fill);
    color: var(--accent-on);
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.3);
}

/* 6. Breathe pattern tiles -------------------------------------------------- */
.pm-screen .breath-patterns { margin: 0 0 10px; }
.pm-screen .breath-pattern-card {
    padding: 0;
    border: 1px solid var(--pm-card-edge);
    border-radius: var(--pm-tile-radius);
    background: var(--pm-card-bg);
    box-shadow: var(--pm-card-shadow);
    transform: scale(0.98);
    text-align: left;
    align-items: stretch;
    cursor: default;
}
.pm-screen .breath-pattern-card:hover { transform: scale(0.98); box-shadow: var(--pm-card-shadow); }
.pm-screen .breath-pattern-card:active { transform: scale(0.98); }
.pm-screen .breath-pattern-card.selected {
    background: linear-gradient(150deg, var(--accent-fill), color-mix(in srgb, var(--accent-fill) 80%, rgb(var(--pm-glow-rgb))));
    background-color: var(--accent-fill);
    border-color: transparent;
    box-shadow: 0 12px 28px rgba(var(--accent-rgb), 0.34);
    transform: none;
}
.breath-pattern-select {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    min-height: 132px;
    padding: 14px 14px 16px;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.breath-card-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-tint-2, rgba(var(--accent-rgb), 0.14));
    color: var(--accent-text);
    margin-bottom: 4px;
}
.breath-card-icon svg { width: 26px; height: 26px; }
.breath-card-icon svg [stroke="#6d28d9"] { stroke: currentColor; }
.breath-card-icon svg [fill="#6d28d9"] { fill: currentColor; }
.breath-card-name { font-size: var(--fs-md, 15px); font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.pm-screen .breath-pattern-card .breath-timing { font-size: var(--fs-sm, 13px); font-weight: 500; color: var(--text-secondary); }
.pm-screen .breath-pattern-card.selected .breath-card-icon { background: rgba(255, 255, 255, 0.22); color: #ffffff; }
.pm-screen .breath-pattern-card.selected .breath-card-name,
.pm-screen .breath-pattern-card.selected .breath-timing,
.pm-screen .breath-pattern-card.selected .breath-info-btn { color: var(--accent-on); }
.pm-screen .breath-info-btn { z-index: 1; top: 6px; right: 6px; width: 32px; height: 32px; display: grid; place-items: center; }
@media (max-width: 768px) {
    /* Phones: a snapping carousel bleeding to the screen edge (iOS parity). */
    .pm-screen .breath-patterns {
        margin: 0 calc(-1 * var(--pm-gutter)) -8px;
        padding: 6px var(--pm-gutter) 26px;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--pm-gutter);
        gap: 10px;
    }
    .pm-screen .breath-pattern-card.selected { box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.28); }
    .pm-screen .breath-pattern-card { min-width: 156px; max-width: 180px; scroll-snap-align: start; }
}

/* 7. Pinned glowing primary action ---------------------------------------- */
.pm-primary-bar,
.pm-screen .gen-generate-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 6px calc(-1 * var(--pm-gutter, 20px)) 0;
    padding: 18px var(--pm-gutter, 20px) calc(14px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to bottom, transparent, var(--pm-page-fade) 45%);
}
/* Breathe's column is wider on desktop (pattern grid); keep its bar 640 px. */
@media (min-width: 769px) {
    .pm-screen .breathwork-main > .pm-primary-bar { max-width: calc(640px + 2 * var(--pm-gutter)); margin-left: auto; margin-right: auto; }
}
.pm-screen .feature-begin-btn,
.vidf-panel .feature-begin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    margin-top: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent-fill), color-mix(in srgb, var(--accent-fill) 80%, rgb(var(--pm-glow-rgb))));
    background-color: var(--accent-fill);
    color: var(--accent-on);
    font-size: var(--fs-lg, 17px);
    font-weight: 600;
    box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out);
}
.pm-screen .feature-begin-btn:hover { background-color: var(--accent-fill-hover); box-shadow: 0 12px 32px rgba(var(--accent-rgb), 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.pm-screen .feature-begin-btn:active { transform: scale(var(--press-scale, 0.97)); }
.pm-screen .feature-begin-btn:disabled { box-shadow: none; }

/* 8. Tones ----------------------------------------------------------------- */
.pm-screen .freq-category { padding: 16px; margin: 0 0 14px; }
.pm-screen .freq-category h4 { font-size: var(--fs-md, 15px); }
.pm-screen .freq-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; }
.pm-screen .freq-cell { min-height: 44px; border-radius: 16px; padding: 8px 2px; }
.pm-screen .freq-cell-name { font-size: var(--fs-xs, 12px); text-align: center; overflow-wrap: anywhere; }
.pm-screen .freq-custom-row { font-size: var(--fs-md, 15px); font-weight: 600; padding-top: 0; }
.pm-screen .freq-visualizer { margin-bottom: 14px; }

/* 9. Vision ------------------------------------------------------------------ */
.pm-screen .vision-preview { border-radius: var(--pm-card-radius); }
.pm-screen .vision-mood-card { border-radius: var(--pm-tile-radius); }
.pm-screen .vision-sliders { padding: 12px 16px; }
.pm-screen .vision-section-h { font-size: var(--fs-lg, 17px); }
.pm-screen .vision-duration-chips { margin-bottom: 14px; }
/* vision.js renders Begin as the last child of #visionSetup: pin it there. */
.pm-screen #visionSetup > .feature-begin-btn {
    position: sticky;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    margin: 6px 0 14px;
}

/* 10. Player options sheet --------------------------------------------------- */
/* Opaque on purpose: it sits over the live countdown ring. */
.pm-options .pos-panel {
    background: var(--surface-overlay, var(--surface));
    border-top-left-radius: var(--pm-card-radius);
    border-top-right-radius: var(--pm-card-radius);
}
@media (min-width: 600px) {
    .pm-options .pos-panel { border-radius: var(--pm-card-radius); }
}
.pos-row-label { display: inline-flex; align-items: center; gap: 12px; }

/* 11. Create sheet ("+") ------------------------------------------------------ */
.create-fab {
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent-fill) 78%, #a78bfa), var(--accent-fill));
    background-color: var(--accent-fill);
    box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.12), 0 8px 26px rgba(var(--accent-rgb), 0.42);
}
.create-fab svg { transition: transform var(--dur-sheet) var(--pm-ease-bloom); }
.create-sheet-backdrop {
    background:
        radial-gradient(90% 60% at 100% 100%, rgba(167, 139, 250, 0.32), transparent 70%),
        rgba(0, 0, 0, 0.32);
}
.create-sheet {
    background:
        radial-gradient(110% 55% at 100% 100%, rgba(167, 139, 250, 0.18), transparent 65%),
        radial-gradient(90% 40% at 0% 0%, rgba(var(--accent-rgb), 0.07), transparent 70%),
        var(--surface-overlay, var(--surface));
}
.create-section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-3) 0 var(--space-2);
    padding: 4px 10px;
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
    background: var(--pm-chip-bg);
    color: var(--text-secondary);
    font-size: var(--fs-2xs, 11px);
}
.create-section-label svg { color: var(--accent-text); }
.create-make { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.create-sheet .create-row {
    min-height: 56px;
    padding: 7px 16px 7px 7px;
    border-radius: 999px;
    gap: 12px;
    box-shadow: 0 1px 2px rgba(17, 17, 26, 0.04), 0 4px 14px rgba(167, 139, 250, 0.12);
}
.create-sheet .create-row-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(150deg, color-mix(in srgb, var(--accent-fill) 70%, #a78bfa), var(--accent-fill));
    background-color: var(--accent-fill);
    color: var(--accent-on);
    box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.12);
}
.create-row-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.create-sheet .create-row-label { font-size: var(--fs-md, 15px); font-weight: 600; }
.create-row-sub {
    color: var(--text-secondary);
    font-size: var(--fs-sm, 13px);
    font-weight: 400;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.create-sheet .create-row-hero {
    min-height: 64px;
    margin-top: 4px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-fill) 82%, #a78bfa), var(--accent-fill));
    background-color: var(--accent-fill);
    border-color: transparent;
    color: var(--accent-on);
    box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.create-sheet .create-row-hero .create-row-label { font-size: var(--fs-lg, 17px); }
.create-sheet .create-row-hero .create-row-sub { color: var(--accent-on); opacity: 0.88; }
.create-sheet .create-row-hero .create-row-icon { background: rgba(255, 255, 255, 0.2); box-shadow: none; }
.create-practise { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.create-sheet .create-tile {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 64px;
    padding: 8px 10px 8px 8px;
    border-radius: var(--pm-tile-radius);
    text-align: left;
    font-size: var(--fs-md, 15px);
    box-shadow: 0 1px 2px rgba(17, 17, 26, 0.04), 0 4px 14px rgba(167, 139, 250, 0.12);
}
.create-sheet .create-tile .create-row-icon { width: 36px; height: 36px; }
.create-sheet .create-tile .create-row-label { font-weight: 600; }
.create-sheet .create-tile .create-row-sub { font-size: var(--fs-xs, 12px); }
/* Wider screens: the popover anchored to the + -- Practise as four compact
   tiles (subtitles stay available to screen readers via aria-describedby). */
@media (min-width: 600px) {
    .create-sheet { width: 400px; }
    .create-practise { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .create-sheet .create-tile {
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 10px 4px 8px;
        min-height: 76px;
        text-align: center;
        font-size: var(--fs-sm, 13px);
    }
    .create-sheet .create-tile .create-row-text { align-items: center; }
    .create-sheet .create-tile .create-row-sub { display: none; }
    .create-sheet .create-tile { min-height: 68px; padding-top: 8px; padding-bottom: 6px; }
    .create-make { gap: 6px; }
    .create-sheet .create-row { min-height: 48px; padding-top: 4px; padding-bottom: 4px; }
    .create-sheet .create-row-icon { width: 36px; height: 36px; }
    .create-sheet .create-row-hero { min-height: 56px; }
}
/* Short screens (iOS ViewThatFits): drop subtitles before the list scrolls. */
@media (max-height: 760px) {
    .create-sheet .create-row:not(.create-row-hero) .create-row-sub,
    .create-sheet .create-tile .create-row-sub { display: none; }
    .create-sheet .create-row { min-height: 48px; padding-top: 4px; padding-bottom: 4px; }
    .create-sheet .create-tile { min-height: 52px; }
}

/* 12. Quick Menu editor (Settings) ----------------------------------------- */
.pm-qm-group {
    margin: var(--space-3) 0 var(--space-2);
    color: var(--text-secondary);
    font-size: var(--fs-xs, 12px);
    font-weight: 600;
    letter-spacing: var(--tracking-caps, 0.06em);
    text-transform: uppercase;
}
.pm-qm-card {
    border: 1px solid var(--hairline);
    border-radius: 16px;
    background: var(--surface-raised);
    padding: 0 12px;
}
.pm-qm-card .pm-qm-row { min-height: 56px; margin: 0; padding: 6px 0; gap: 12px; }
.pm-qm-card .pm-qm-row + .pm-qm-row { border-top: 1px solid var(--hairline); }
.pm-qm-label { display: inline-flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.pm-qm-text { display: flex; flex-direction: column; min-width: 0; }
.pm-qm-sub { color: var(--text-secondary); font-size: var(--fs-sm, 13px); font-weight: 400; }
.pm-qm-always { flex: 0 0 auto; color: var(--text-secondary); font-size: var(--fs-sm, 13px); }

/* 13. Flow Library (import modal) ------------------------------------------ */
.pm-library .modal-content {
    border-radius: var(--pm-card-radius);
    background:
        radial-gradient(90% 45% at 0% 0%, rgba(var(--pm-glow-rgb), 0.22), transparent 70%),
        radial-gradient(80% 40% at 100% 100%, rgba(var(--accent-rgb), 0.12), transparent 70%),
        var(--surface-overlay, var(--surface));
}
.pm-library .modal-content > h2,
.pm-library .modal-content > .modal-description { text-align: center; }
.pm-library .import-option { border-width: 1px; padding: 18px; }
.pm-library .template-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.pm-library .template-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 14px 8px 8px;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--pm-tile-radius);
    background: var(--pm-chip-bg);
    color: var(--text-primary);
    text-align: left;
    box-shadow: 0 4px 14px rgba(var(--pm-glow-rgb), 0.14);
}
.pm-library .template-btn:hover { border-color: var(--accent-text); box-shadow: 0 8px 22px rgba(var(--pm-glow-rgb), 0.28); }
.pm-library .upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: 999px;
    background: var(--accent-fill);
    color: var(--accent-on);
    box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.32);
}

/* 14. Video to Flow sources + Pose to Flow explainer ----------------------- */
.pm-overlay .vidf-panel {
    border-radius: var(--pm-card-radius);
    background:
        radial-gradient(90% 40% at 0% 0%, rgba(167, 139, 250, 0.2), transparent 70%),
        var(--bg-primary);
}
.vidf-sources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 14px 0 6px;
}
.vidf-source {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-height: 96px;
    padding: 14px;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--pm-tile-radius);
    background: var(--pm-chip-bg);
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(167, 139, 250, 0.16);
    transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), border-color var(--dur-press) var(--ease-out);
}
.vidf-source[hidden] { display: none; }
.vidf-source:hover { border-color: var(--accent-text); box-shadow: 0 8px 22px rgba(167, 139, 250, 0.3); }
.vidf-source:active { transform: scale(var(--press-scale, 0.97)); }
.vidf-source .pm-badge { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-fill); color: var(--accent-on); }

.pm-explainer {
    --pm-glow-rgb: 167, 139, 250;
    border-radius: var(--pm-card-radius);
    text-align: center;
    background:
        radial-gradient(90% 45% at 0% 0%, rgba(var(--pm-glow-rgb), 0.22), transparent 70%),
        var(--bg-primary, #ffffff);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}
.pm-explainer .practice-hero { width: 72px; height: 72px; }
.pm-explainer .practice-hero svg { width: 30px; height: 30px; }
.ptf-intro-card.pm-explainer .pm-explainer-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 12px;
    gap: 10px;
    text-align: left;
    border: 1px solid var(--pm-card-edge);
    border-radius: 18px;
    background: var(--pm-card-bg);
}
.pm-explainer-list li { display: flex; align-items: flex-start; gap: 10px; }
.pm-explainer-list li > span:last-child { padding-top: 5px; }
.pm-explainer-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.pm-explainer-actions .ptf-intro-dsa { justify-content: center; margin: 0; }
.pm-explainer-actions .ptf-intro-begin {
    min-height: 52px;
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(var(--accent-rgb), 0.36);
}

/* 15. Reduce Motion / Transparency / Contrast ------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .pm-screen::before,
    .pm-screen .practice-hero,
    .pm-screen .practice-hero::after,
    .pm-library .practice-hero,
    .pm-library .practice-hero::after,
    .pm-explainer .practice-hero,
    .pm-explainer .practice-hero::after { animation: none; }
    .pm-screen .duration-pill.active,
    .pm-screen .gen-tag.active,
    .pm-screen .gen-seg-btn.active,
    .pm-screen .ambient-btn.active,
    .pm-screen .vision-dur-chip.active,
    .pm-screen .breath-pattern-card,
    .pm-screen .breath-pattern-card:hover { transform: none; }
    .create-fab svg { transition: none; }
}
html[data-reduce-motion] .pm-screen::before,
html[data-reduce-motion] .pm-screen .practice-hero,
html[data-reduce-motion] .pm-screen .practice-hero::after,
html[data-reduce-motion] .pm-library .practice-hero,
html[data-reduce-motion] .pm-library .practice-hero::after,
html[data-reduce-motion] .pm-explainer .practice-hero,
html[data-reduce-motion] .pm-explainer .practice-hero::after { animation: none; }
html[data-reduce-motion] .pm-screen .duration-pill.active,
html[data-reduce-motion] .pm-screen .gen-tag.active,
html[data-reduce-motion] .pm-screen .gen-seg-btn.active,
html[data-reduce-motion] .pm-screen .ambient-btn.active,
html[data-reduce-motion] .pm-screen .vision-dur-chip.active,
html[data-reduce-motion] .pm-screen .breath-pattern-card,
html[data-reduce-motion] .pm-screen .breath-pattern-card:hover { transform: none; }
html[data-reduce-motion] .create-fab svg { transition: none; }

@media (prefers-reduced-transparency: reduce) {
    :root,
    html[data-mode="dark"] { --pm-card-bg: var(--pm-card-solid); --pm-chip-bg: var(--pm-card-solid); }
    .pm-screen::before { display: none; }
    .pm-screen .practice-hero::after,
    .pm-library .practice-hero::after,
    .pm-explainer .practice-hero::after { display: none; }
    .pm-primary-bar,
    .pm-screen .gen-generate-bar { background: var(--bg-app); }
}
@media (prefers-contrast: more) {
    :root,
    html[data-mode="dark"] { --pm-card-edge: var(--text-secondary); }
    .pm-screen .duration-pill,
    .pm-screen .gen-tag,
    .pm-screen .gen-seg-btn,
    .pm-screen .ambient-btn,
    .pm-screen .vision-dur-chip,
    .create-sheet .create-row,
    .create-sheet .create-tile { border-color: var(--text-secondary); }
    .pm-screen .breath-pattern-card.selected,
    .pm-screen .feature-begin-btn,
    .create-sheet .create-row-hero { background: var(--accent-fill); }
}
@media (forced-colors: active) {
    .pm-screen::before { display: none; }
    .pm-screen .practice-hero,
    .pm-library .practice-hero,
    .pm-explainer .practice-hero { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}