/* ==========================================================================
   Phrase Loop — practice overlay (layout rev. 2026-08-02)

   Palette taken from frontend.css rather than the prototype: the prototype
   was a warm/neutral scheme (charcoal + cream + amber) where the site is
   cool/teal (deep teal + pale teal + gold). Tokens are scoped to the
   overlay root because frontend.css declares no :root block — every colour
   there is a literal hex, so there is nothing site-wide to inherit.

   Two roles, kept apart on purpose:
     --htl-accent (#5cc2cc) — ordinary interactive: buttons, links, slider
     --htl-gold   (#bc8e55) — loop language only: marks, span, live toggle

   Layout rule: the box is a flex column with a fixed head, a stage sized
   as a share of the viewport, fixed controls, and ONE scrolling region —
   the practice loops. Player and controls never move while the list is
   browsed, and the list's clipped edge is faded so it reads as scrollable.
   ========================================================================== */

.ht-loop-overlay {
    --htl-sunken: #082028;
    --htl-surface: #0e2d3a;
    --htl-raised: #123a4a;
    --htl-rule: rgba(92, 194, 204, 0.18);
    --htl-rule-bright: rgba(92, 194, 204, 0.45);
    --htl-wash: rgba(92, 194, 204, 0.04);
    --htl-text: #e8f4f6;
    --htl-dim: #6897a5;
    --htl-faint: #5a7f8a;
    --htl-accent: #5cc2cc;
    --htl-gold: #bc8e55;
    --htl-gold-soft: rgba(188, 142, 85, 0.15);
    --htl-danger: #e05c5c;
    --htl-pad: 20px;

    /* The stage height budget. The box width is derived from it below, so
       the two can never disagree. */
    --htl-stage-h: 52vh;

    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* The overlay sets display:flex, which outranks the hidden attribute's UA
   rule — same trap as .tl-modal-overlay on the timeline modal. */
.ht-loop-overlay[hidden] {
    display: none !important;
}

.htl-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.htl-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Width follows the video, not the other way round. At 16:9 a stage of
       --htl-stage-h is exactly that tall x 16/9 wide; matching the box to it
       means the player fills the width with no side bars. Floored so the
       control row doesn't get squeezed on very short windows, and capped so
       it never outgrows a comfortable reading width. 2026-08-02 */
    max-width: max(560px, min(760px, calc(var(--htl-stage-h) * 16 / 9)));
    max-height: 94vh;
    background: var(--htl-surface);
    border: 1px solid var(--htl-rule);
    border-radius: 8px;
    color: var(--htl-text);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

html.htl-open,
html.htl-open body {
    overflow: hidden;
}

.ht-loop-overlay .htl-mark-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--htl-dim);
    margin: 0;
}

/* ── Header ── */
.htl-head {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px var(--htl-pad) 11px;
    border-bottom: 1px solid var(--htl-rule);
}

.htl-head-text {
    flex: 1;
    min-width: 0;
}

.htl-eyebrow {
    display: block;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--htl-gold);
    margin-bottom: 3px;
}

.ht-loop-overlay .htl-title {
    display: block;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--htl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ht-loop-overlay .htl-close {
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 3px;
    font-size: 19px;
    line-height: 1;
    color: var(--htl-faint);
    cursor: pointer;
}

.ht-loop-overlay .htl-close:hover {
    color: var(--htl-text);
    background: var(--htl-raised);
}

.htl-error {
    flex: none;
    margin: 0;
    padding: 12px var(--htl-pad);
    font-size: 13px;
    line-height: 1.5;
    color: var(--htl-danger);
    border-bottom: 1px solid var(--htl-rule);
}

.htl-error[hidden] {
    display: none;
}

/* ── Player ──
   The stage is a height budget, not a fixed size. When the cap bites, the
   stage box is wider than 16:9 and the inner video letterboxes at the
   sides rather than stretching. The API terms set a 200x200 minimum
   rendered size and prohibit covering or modifying the player; nothing is
   ever drawn over this box. */
.htl-stage {
    flex: none;
    position: relative;
    width: 100%;
    margin: 0 auto;
    background: #000;
    aspect-ratio: 16 / 9;
    max-height: var(--htl-stage-h);
    min-height: 200px;
}

.htl-stage-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.htl-video {
    position: relative;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
}

.htl-video iframe,
.htl-video > span {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Timeline ── */
.htl-timeline {
    flex: none;
    padding: 14px var(--htl-pad) 0;
}

.htl-track {
    position: relative;
    height: 26px;
    touch-action: none;
    cursor: crosshair;
}

.htl-track-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 6px;
    border-radius: 3px;
    background: var(--htl-rule-bright);
    transform: translateY(-3px);
}

.htl-track-span {
    position: absolute;
    top: 50%;
    height: 6px;
    border-radius: 3px;
    background: var(--htl-gold);
    transform: translateY(-3px);
}

.htl-track--live .htl-track-span {
    box-shadow: 0 0 14px var(--htl-gold-soft);
}

.htl-playhead {
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: 2px;
    border-radius: 1px;
    background: var(--htl-text);
    opacity: 0.9;
    pointer-events: none;
}

/* Pill handles, taller than the track so they visibly grip the span. */
.htl-mk {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 22px;
    margin: -11px 0 0 -4.5px;
    border-radius: 4.5px;
    background: var(--htl-gold);
    border: 2px solid var(--htl-surface);
    cursor: grab;
}

.htl-mk:active {
    cursor: grabbing;
}

/* ── Controls ── */
.htl-controls {
    flex: none;
    display: grid;
    gap: 11px;
    padding: 12px var(--htl-pad) 14px;
}

/* Every overlay button is type="button", which sidesteps the theme's
   button[type="submit"]:not(...) rule and its (0,3,1) specificity
   entirely rather than fighting it. */
.ht-loop-overlay button {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    background: var(--htl-raised);
    border: 1px solid var(--htl-rule);
    border-radius: 3px;
    color: var(--htl-text);
    padding: 8px 12px;
    cursor: pointer;
}

.ht-loop-overlay button:hover:not(:disabled) {
    border-color: var(--htl-rule-bright);
}

.ht-loop-overlay button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.ht-loop-overlay button:focus-visible,
.ht-loop-overlay input:focus-visible,
.ht-loop-overlay a:focus-visible {
    outline: 2px solid var(--htl-accent);
    outline-offset: 2px;
}

/* Marks at the ends, nudges inboard, length between — the row maps onto
   the timeline above it. */
.htl-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.ht-loop-overlay .htl-btn-mark {
    flex: 1;
    min-width: 96px;
}

.ht-loop-overlay .htl-nudge {
    flex: none;
    min-width: 30px;
    padding: 8px;
    font-size: 12px;
    color: var(--htl-dim);
}

.htl-len {
    flex: none;
    min-width: 48px;
    text-align: center;
    font-size: 12.5px;
    color: var(--htl-gold);
    font-variant-numeric: tabular-nums;
}

.ht-loop-overlay .htl-btn-loop {
    flex: none;
    width: 40px;
    margin-left: 2px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--htl-dim);
}

.ht-loop-overlay .htl-btn-loop--live {
    border-color: var(--htl-gold);
    background: var(--htl-gold-soft);
    color: var(--htl-gold);
}

.htl-btn-loop svg {
    display: block;
}

/* Bounds explanation. Transient — a mark that stops moving with no reason
   given reads as a broken control. */
.htl-bounds {
    margin: -2px 0 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--htl-gold);
}

.htl-bounds[hidden] {
    display: none;
}

.htl-speed-row {
    display: flex;
    align-items: center;
    gap: 11px;
}

.htl-speed-row .htl-mark-label {
    flex: 0 0 44px;
}

.ht-loop-overlay input[type="range"] {
    flex: 1;
    min-width: 100px;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    cursor: pointer;
    background: linear-gradient(to right,
        var(--htl-accent) 0%,
        var(--htl-accent) var(--htl-pct, 75%),
        var(--htl-rule-bright) var(--htl-pct, 75%),
        var(--htl-rule-bright) 100%);
}

.ht-loop-overlay input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--htl-accent);
    border: 2px solid var(--htl-surface);
    cursor: pointer;
}

.ht-loop-overlay input[type="range"]::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--htl-accent);
    border: 2px solid var(--htl-surface);
    cursor: pointer;
}

/* No mono face exists on the site, so tabular figures plus a fixed width
   keep the readout from jittering as digit widths change. */
.htl-speed-val {
    flex: none;
    min-width: 52px;
    text-align: right;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* ── Speed ladder ──
   A separate function from the slider, not settings for it. It only
   advances on a completed pass, so it needs an active loop. */
.htl-ladder {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--htl-dim);
}

.htl-ladder .htl-mark-label {
    flex: 0 0 44px;
    line-height: 1.25;
}

.htl-ladder-fields {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.ht-loop-overlay .htl-ladder input {
    width: 56px;
    padding: 4px 5px;
    font-family: inherit;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    background: var(--htl-raised);
    border: 1px solid var(--htl-rule);
    border-radius: 3px;
    color: var(--htl-text);
    -moz-appearance: textfield;
    appearance: textfield;
}

.ht-loop-overlay .htl-ladder input::-webkit-outer-spin-button,
.ht-loop-overlay .htl-ladder input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ht-loop-overlay .htl-ladder input#htl-ladder-reps {
    width: 44px;
}

.ht-loop-overlay .htl-ladder input:disabled {
    opacity: 0.4;
}

.htl-unit {
    color: var(--htl-text);
    margin-left: -4px;
}

.ht-loop-overlay .htl-ladder button {
    margin-left: 2px;
    padding: 6px 11px;
    font-size: 12.5px;
}

/* Status sits to the right of the controls, wrapping under only when the
   row is cramped. */
.htl-status {
    flex: 1 1 150px;
    min-width: 0;
    text-align: right;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--htl-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.htl-status--active {
    color: var(--htl-gold);
    font-variant-numeric: tabular-nums;
}

/* ── The scrolling region: practice loops + footer ──
   The fades are painted with background-attachment: local, so they appear
   only at an edge that is actually clipped. A static shadow would imply
   more content even when the content fits. */
.htl-scroll {
    flex: 1 1 auto;
    min-height: 96px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--htl-rule);
    background:
        linear-gradient(var(--htl-surface) 30%, transparent) top / 100% 26px no-repeat,
        linear-gradient(transparent, var(--htl-surface) 70%) bottom / 100% 26px no-repeat,
        radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.4), transparent) top / 100% 12px no-repeat,
        radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.4), transparent) bottom / 100% 12px no-repeat;
    background-attachment: local, local, scroll, scroll;
}

.htl-loops {
    padding: 12px var(--htl-pad) 8px;
}

.htl-loops[hidden] {
    display: none;
}

.htl-loops-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.ht-loop-overlay .htl-save-current {
    padding: 4px 9px;
    font-size: 11.5px;
    background: var(--htl-gold);
    border-color: var(--htl-gold);
    color: #17130a;
    font-weight: 600;
}

.ht-loop-overlay .htl-save-current:hover:not(:disabled) {
    filter: brightness(1.08);
}

.ht-loop-overlay .htl-save-current[hidden] {
    display: none;
}

.htl-curate-msg {
    margin: 0 0 8px;
    font-size: 11.5px;
    color: var(--htl-dim);
}

.htl-curate-msg[hidden] {
    display: none;
}

.htl-loop-item {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 2px;
    border: 1px solid transparent;
    border-radius: 3px;
}

.htl-loop-item:hover {
    background: var(--htl-raised);
    border-color: var(--htl-rule);
}

.ht-loop-overlay .htl-loop-open {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    text-align: left;
    padding: 7px 9px;
    background: transparent;
    border: 0;
}

.ht-loop-overlay .htl-loop-open:hover:not(:disabled) {
    border-color: transparent;
}

.htl-dot {
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--htl-gold);
}

.htl-lbl {
    flex: 1;
    font-size: 14px;
    color: var(--htl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.htl-time {
    flex: none;
    font-size: 11px;
    color: var(--htl-dim);
    font-variant-numeric: tabular-nums;
}

.ht-loop-overlay .htl-loop-act {
    flex: none;
    padding: 5px 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--htl-faint);
    display: flex;
    align-items: center;
}

.ht-loop-overlay .htl-loop-act:hover {
    color: var(--htl-text);
    border-color: var(--htl-rule);
}

.ht-loop-overlay .htl-loop-act--del:hover {
    color: var(--htl-danger);
}

.ht-loop-overlay .htl-loop-act--armed {
    padding: 5px 9px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--htl-danger);
    border-color: var(--htl-danger);
    background: rgba(224, 92, 92, 0.1);
}

.htl-loop-act:last-child {
    margin-right: 6px;
}

.htl-loop-act svg {
    display: block;
}

/* Naming in place: the row becomes the field, so nothing shifts. */
.htl-loop-item--editing {
    background: var(--htl-raised);
    border-color: var(--htl-rule-bright);
}

.ht-loop-overlay .htl-loop-field {
    flex: 1;
    min-width: 0;
    margin: 2px 6px;
    padding: 5px 8px;
    font-family: inherit;
    font-size: 14px;
    background: var(--htl-sunken);
    border: 1px solid var(--htl-rule);
    border-radius: 3px;
    color: var(--htl-text);
}

.ht-loop-overlay .htl-loop-field::placeholder {
    color: var(--htl-faint);
}

/* Locked rows: labels visible, values withheld server-side. Only reachable
   when GATE_PRESETS is true. */
.htl-loop-item--locked {
    opacity: 0.75;
}

.htl-loop-item--locked:hover {
    background: transparent;
    border-color: transparent;
}

.ht-loop-overlay .htl-loop-item--locked .htl-loop-open {
    cursor: not-allowed;
}

.htl-dot--locked {
    background: var(--htl-faint);
}

.htl-loop-item--locked .htl-lbl {
    color: var(--htl-dim);
}

.htl-gate {
    margin: 0 0 10px;
    padding: 9px 11px;
    border: 1px dashed var(--htl-rule-bright);
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--htl-dim);
}

.htl-gate[hidden] {
    display: none;
}

.ht-loop-overlay .htl-gate-link {
    color: var(--htl-accent);
    font-weight: 600;
    text-decoration: none;
}

.ht-loop-overlay .htl-gate-link:hover {
    text-decoration: underline;
}

/* ── Footer ── */
.htl-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px var(--htl-pad);
    border-top: 1px solid var(--htl-rule);
}

.htl-fineprint {
    margin: 0;
    max-width: 46ch;
    font-size: 11px;
    line-height: 1.4;
    color: var(--htl-faint);
}

.ht-loop-overlay .htl-watch {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--htl-gold);
    text-decoration: none;
    white-space: nowrap;
}

.ht-loop-overlay .htl-watch:hover {
    text-decoration: underline;
}

/* ── Viewport budgets ──
   Short screens give the video less; the controls never move. */
@media (max-height: 820px) {
    .ht-loop-overlay { --htl-stage-h: 44vh; }
}

@media (max-height: 700px) {
    .ht-loop-overlay { --htl-stage-h: 38vh; }
}

/* ── Mobile: bottom sheet ── */
@media (max-width: 640px) {
    .ht-loop-overlay {
        --htl-pad: 14px;
        align-items: flex-end;
        padding: 0;
    }

    .htl-box {
        max-width: none;
        max-height: 96vh;
        border-radius: 14px 14px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .ht-loop-overlay {
        --htl-stage-h: 40vh;
    }

    .ht-loop-overlay .htl-btn-mark {
        min-width: 0;
    }

    .htl-speed-row .htl-mark-label,
    .htl-ladder .htl-mark-label {
        flex: 0 0 40px;
    }

    .htl-status {
        flex-basis: 100%;
        text-align: left;
        white-space: normal;
    }

    .htl-scroll {
        min-height: 80px;
    }

    .htl-foot {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
}

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

/* ==========================================================================
   Loop control on the recording row (rev. 2026-07-29)

   frontend.css makes this row a 2-column grid — icon as an auto-placed
   ::before in column 1, anchor and .tune-recording-why explicitly in
   column 2. A third column is added here so the control sits at the right
   of the title row rather than stacking beneath it. Rows with no control
   get an auto column of zero width, so untouched rows are unaffected.

   Rows are assigned explicitly rather than left to auto-placement: the
   anchor and the control share row 1, and the "why" line drops to row 2
   under the title where it belongs.

   Specificity matches the existing (0,3,0) rules and wins on source order,
   since this file is enqueued after frontend.css.
   ========================================================================== */

.tunebook-single-content .tune-recordings .tune-link-item {
    grid-template-columns: auto 1fr auto;
}

.tunebook-single-content .tune-recordings .tune-link-item > a {
    grid-column: 2;
    grid-row: 1;
}

.tunebook-single-content .tune-recordings .tune-link-item > .tune-recording-why {
    grid-column: 2;
    grid-row: 2;
}

.tunebook-single-content .tune-recordings .tune-link-item > .tune-recording-loop {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 0;
}

/* Matches .tunebook-single-jump-link — the site's icon-and-text convention:
   pill, muted until hover, icon at reduced opacity. The earlier boxed teal
   version was far louder than anything around it. */
.tunebook-single-content .tune-recordings .tune-recording-loop-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(200, 221, 227, 0.6);
    background: rgba(92, 194, 204, 0.05);
    border: 1px solid rgba(92, 194, 204, 0.18);
    border-radius: 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.tunebook-single-content .tune-recordings .tune-recording-loop-btn:hover {
    color: #5CC2CC;
    border-color: rgba(92, 194, 204, 0.4);
    background: rgba(92, 194, 204, 0.1);
}

.tune-recording-loop-icon {
    display: flex;
    flex-shrink: 0;
    opacity: 0.7;
}

.tunebook-single-content .tune-recordings .tune-recording-loop-btn:hover .tune-recording-loop-icon {
    opacity: 1;
}

/* Presets advertise themselves — the discovery hook and the editorial
   pitch in one line. Gold is loud on purpose for now: standing out is the
   point while the feature is new. Sits before the button so the button
   stays right-aligned across every row. */
.tune-recording-loop-count {
    order: -1;
    font-size: 11.5px;
    font-weight: 500;
    color: #bc8e55;
    white-space: nowrap;
}

/* Narrow screens: the third column would squeeze the title, so the control
   drops back under it, right-aligned to the content column. */
@media (max-width: 600px) {
    .tunebook-single-content .tune-recordings .tune-link-item {
        grid-template-columns: auto 1fr;
    }

    .tunebook-single-content .tune-recordings .tune-link-item > .tune-recording-loop {
        grid-column: 2;
        grid-row: 3;
        justify-content: flex-start;
        margin-top: 6px;
    }
}