/* ============================================================================
   KOSIS — assets/css/kosis-setlist-songs.css
   ----------------------------------------------------------------------------
   v1.0 · Session 25 ("Tier 1") — Set list ↔ song linking.

   Presentation for the songs listed inside each set list card, their manager
   reorder/remove controls, the drag affordance, and the searchable "Add a song"
   picker. Behaviour lives in kosis.js §15; this file is presentation only.
   Scoped under .ks-setsong-* / .ks-songpicker* so it can't affect other pages.
   Loaded by pages/setlists.php after the page stylesheets, so it inherits the
   brand tokens (--ks-navy, --ks-gold, --ks-sage, --ks-cream).
   ========================================================================= */

/* ── The song list inside a set list card ──────────────────────────────── */
.ks-setsong-list {
    margin: 12px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ks-setsong-empty {
    margin: 4px 0;
    font-size: 0.86rem;
    color: rgba(31, 41, 82, 0.6);
    font-style: italic;
}

.ks-setsong-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid rgba(31, 41, 82, 0.10);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
    transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    min-width: 0;        /* allow flex children to shrink + ellipsis to work */
    overflow: hidden;    /* an unbreakable title string can't widen the row */
}
.ks-setsong-row:hover {
    background: rgba(255, 255, 255, 0.92);
}

/* Drag states (kosis.js §15 toggles .is-dragging on the lifted row). */
.ks-setsong-row.is-dragging {
    opacity: 0.55;
    box-shadow: 0 4px 14px rgba(31, 41, 82, 0.18);
    background: var(--ks-cream, #FDFAF1);
}

.ks-setsong-grip {
    cursor: grab;
    color: rgba(31, 41, 82, 0.38);
    font-size: 1rem;
    line-height: 1;
    user-select: none;
    flex: 0 0 auto;
}
.ks-setsong-grip:active { cursor: grabbing; }

.ks-setsong-num {
    flex: 0 0 auto;
    min-width: 1.6em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ks-gold, #D4A955);
    font-size: 0.9rem;
}

.ks-setsong-link {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-decoration: none;
    color: inherit;
}
.ks-setsong-link:hover .ks-setsong-title { text-decoration: underline; }

.ks-setsong-title {
    font-size: 0.95rem;
    color: var(--ks-navy, #1F2952);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ks-setsong-composer {
    font-size: 0.78rem;
    color: rgba(31, 41, 82, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Manager reorder / remove controls. */
.ks-setsong-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.ks-setsong-mini { margin: 0; display: inline; }

.ks-setsong-btn {
    border: 1px solid rgba(31, 41, 82, 0.18);
    background: #fff;
    color: var(--ks-navy, #1F2952);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    line-height: 1;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.ks-setsong-btn:hover:not(:disabled) {
    background: var(--ks-navy, #1F2952);
    color: #fff;
    border-color: var(--ks-navy, #1F2952);
}
.ks-setsong-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ── Set-list primary actions: visible, uniform buttons ────────────────────
   Session 53 follow-up. The three set-list actions — "+ Add a song",
   "+ Import from a practice list", and "Edit set list" — are <summary> toggles
   inside <details> (so they collapse with NO JavaScript — PWA / offline safe).
   Their base .ks-summary-toggle look is faint 12px sage text, which on a busy
   hero card doesn't read as a button. The .ks-summary-toggle--action modifier
   re-skins them as real buttons in the canonical brand vocabulary (Session 53):
       · --gold          gold solid     the primary ADD action (Add a song)
       · --gold-outline   gold outline   a secondary add (Import a practice list)
       · --secondary      navy outline   a configure/edit action (Edit set list)
   They remain <summary> elements, so the open/close behaviour is unchanged.
   Grouped in .ks-setlist-actions, a wrapping row that keeps them aligned and
   gives the card one clear band of actions. */
.ks-setlist-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 2px;
}

/* The <details> wrappers shouldn't stretch; each sizes to its toggle button so
   the row reads as separate buttons, and the revealed panel drops below. */
.ks-setlist-actions .ks-setsong-add,
.ks-setlist-actions .ks-setlist-manage__edit { margin: 0; }

/* When a panel is OPEN, give its <details> a full row so the revealed panel
   spans the card width and the OTHER (closed) buttons stay tidy on their own
   line, instead of the open item growing and scattering its siblings. */
.ks-setlist-actions > details[open] {
    flex: 1 1 100%;
    order: 2;            /* the open panel drops below the closed buttons */
}
.ks-setlist-actions > details:not([open]) {
    order: 1;
}

.ks-summary-toggle--action {
    /* reset the faint text-link look */
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--ks-radius-input, 10px);
    font-family: var(--ks-font-sans);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.1;
    border: 1px solid transparent;
    transition: filter .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.ks-summary-toggle--action::-webkit-details-marker { display: none; }   /* hide the native ▸ */
.ks-summary-toggle--action:hover { filter: brightness(0.97); }
.ks-summary-toggle--action:focus-visible {
    outline: 2px solid var(--ks-gold, #D4A955);
    outline-offset: 2px;
}

/* gold solid — the primary "Add a song" action (matches add=gold in S53) */
.ks-summary-toggle--gold {
    background: var(--ks-gold, #D4A955);
    color: var(--ks-navy, #1F2952);
    border-color: var(--ks-gold, #D4A955);
}

/* gold outline — secondary add ("Import from a practice list") */
.ks-summary-toggle--gold-outline {
    background: transparent;
    color: #9a7b2e;                 /* readable gold-brown on a light card */
    border-color: var(--ks-gold, #D4A955);
}
.ks-summary-toggle--gold-outline:hover {
    background: rgba(212, 169, 85, 0.12);
    filter: none;
}

/* light outline — the configure/edit action ("Edit set list").
   These action buttons sit on the DARK navy hero card (.ks-card--hero), so a
   navy-on-navy outline rendered the label invisible (it read as an empty box).
   Use a cream outline so the text is legible against the navy card; the open
   state below fills it cream with navy text as the "pressed" cue. */
.ks-summary-toggle--secondary {
    background: transparent;
    color: var(--ks-cream, #FDFAF1);
    border-color: rgba(253, 250, 241, 0.55);
}
.ks-summary-toggle--secondary:hover {
    background: rgba(253, 250, 241, 0.12);
    border-color: var(--ks-cream, #FDFAF1);
    filter: none;
}

/* Open-state cue: when a panel is open, its toggle reads as "pressed" so the
   user can see which one is expanded. */
details[open] > .ks-summary-toggle--gold {
    filter: brightness(0.93);
}
details[open] > .ks-summary-toggle--gold-outline {
    background: rgba(212, 169, 85, 0.18);
}
details[open] > .ks-summary-toggle--secondary {
    background: var(--ks-navy, #1F2952);
    color: var(--ks-cream, #FDFAF1);
}

/* On phones the three buttons go full-width so they're easy tap targets and
   never crowd into a thin sage line. */
@media (max-width: 640px) {
    .ks-setlist-actions { flex-direction: column; gap: 8px; }
    .ks-setlist-actions .ks-setsong-add,
    .ks-setlist-actions .ks-setlist-manage__edit,
    .ks-summary-toggle--action { width: 100%; }
}

/* ── The searchable "Add a song" picker ────────────────────────────────── */
.ks-setsong-add { margin: 8px 0 2px; }

.ks-songpicker {
    margin-top: 8px;
    border: 1px solid rgba(31, 41, 82, 0.12);
    border-radius: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.55);
}

.ks-songpicker__search { width: 100%; margin-bottom: 8px; }

.ks-songpicker__list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 280px;
    overflow-y: auto;
}

.ks-songpicker__item { margin: 0; display: block; }

.ks-songpicker__btn {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    color: inherit;
}
.ks-songpicker__btn:hover {
    background: var(--ks-cream, #FDFAF1);
    border-color: rgba(212, 169, 85, 0.5);
}

.ks-songpicker__plus {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ks-gold, #D4A955);
    color: #fff;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    font-size: 0.95rem;
}

.ks-songpicker__main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.ks-songpicker__main strong {
    font-size: 0.92rem;
    color: var(--ks-navy, #1F2952);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ks-songpicker__composer {
    font-size: 0.76rem;
    color: rgba(31, 41, 82, 0.6);
}

.ks-songpicker__empty,
.ks-songpicker__nomatch {
    margin: 6px 2px;
    font-size: 0.84rem;
    color: rgba(31, 41, 82, 0.6);
    font-style: italic;
}

/* ── Desktop drag affordance ───────────────────────────────────────────────
   Drag-and-drop reorder is a DESKTOP-ONLY enhancement: the HTML5 drag API
   (dragstart/dragover/drop) does not fire from touch on phones/tablets, so the
   grip is only meaningful with a mouse. On desktop both methods are available
   (drag the grip OR use the ▲/▼ buttons). On touch/narrow screens we hide the
   grip entirely so it can't imply a gesture that won't work — the ▲/▼ buttons
   are the reorder method there. */

/* ── Mobile (≤640px): icon fix + button-only reorder ───────────────────────
   Three corrections from Session 25 testing on iPhone-width viewports:
     #10 The set-list feature card put its big music icon in a tall left
         column that ate ~25% of the phone width. Here we stack the card and
         shrink the icon to a small badge that sits inline at the top-left,
         beside the title and the "N songs · created…" meta line.
     #11 Drag can't work on touch (see above) — hide the grip; the song rows
         lay their ▲/▼/✕ controls on their OWN line below the title, with
         larger tap targets, so nothing overlaps the song name.
   These rules live here (this sheet loads last) so they override the base
   .ks-setlist-feature layout in kosis-pages.css without editing it. */
@media (max-width: 640px) {

    /* #10 — stack the feature card; icon becomes a small top-left badge. */
    .ks-setlist-feature {
        flex-direction: column;
        gap: 4px;
    }
    .ks-setlist-feature__icon {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px;
        align-self: flex-start;   /* top-left, not vertically centered */
        margin-bottom: 2px;
    }
    .ks-setlist-feature__icon svg {
        width: 18px;
        height: 18px;
    }

    /* #11 — hide the (non-functional on touch) drag grip. */
    .ks-setsong-grip { display: none; }

    /* #11 — reorder controls drop to their own line under the song title,
       full width, with comfortable touch targets that don't crowd the name.
       The number + title stay TOGETHER on the first line (the link takes the
       remaining width beside the number, rather than claiming a full row). */
    .ks-setsong-row {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .ks-setsong-num {
        flex: 0 0 auto;   /* stays on the first line, beside the title */
    }
    .ks-setsong-link {
        flex: 1 1 auto;   /* fills the rest of the first line next to the number */
        min-width: 0;
    }
    .ks-setsong-actions {
        flex: 1 1 100%;   /* forces the buttons onto their own second line */
        justify-content: flex-end;
        gap: 6px;
    }
    .ks-setsong-btn {
        width: 38px;
        height: 36px;
        font-size: 0.9rem;
    }
}

/* ── Edit-panel action row: Save + Cancel side by side ─────────────────────
   The "Edit set list" panel's buttons sit in a flex row so Save and Cancel
   read as a pair; on phones they stay side by side but can wrap if narrow. */
.ks-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

/* ── Long-title safety: wrap pathological set-list names + clamp song titles ──
   A very long unbroken set-list name (or song title) must not blow out the
   card width. The feature heading wraps; the per-row song title ellipsizes on
   one line (the full title is reachable by opening the song). overflow-wrap
   breaks even space-less strings so nothing escapes the card. */
.ks-setlist-feature__title {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ks-setlist-feature__body {
    min-width: 0;
    max-width: 100%;
}

/* ── Session 26: edit-panel hint + just-created highlight ───────────────────
   Q2=A keeps song management in ONE place (the picker + list above the edit
   panel) rather than duplicating it inside "Edit set list". This hint is a
   small tinted callout (info icon + text) that explains the split and points
   up to the song list. The highlight briefly draws the eye to a set list card
   the user just created (arrived via ?added=<id>#setlist-<id>). */
.ks-edit-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 0;
    padding: 9px 11px;
    background: #E1F2F3;
    border-left: 3px solid #2E9CA8;
    border-radius: 6px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #1F2952;
}
.ks-edit-hint__icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    color: #2E9CA8;
}
.ks-edit-hint__text {
    flex: 1 1 auto;
    min-width: 0;
    color: #1F2952;        /* explicit dark navy so the text is always readable */
}

/* Brief gold ring on the just-created card so it's easy to spot after the
   create redirect. Fades out on its own; no layout shift. */
@keyframes ksJustAddedGlow {
    0%   { box-shadow: 0 0 0 3px rgba(212, 169, 85, 0.55); }
    100% { box-shadow: 0 0 0 3px rgba(212, 169, 85, 0); }
}
.ks-card.ks-just-added {
    animation: ksJustAddedGlow 2.4s ease-out 1;
}

/* Give the anchor scroll some breathing room below the sticky top bar. */
.ks-card[id^="setlist-"] {
    scroll-margin-top: 84px;
}

/* ── Session 27: import a practice list's songs into a set list ───────────
   A second collapsible beside "+ Add a song". Lists the manager's own +
   shared-with-them practice lists; clicking one imports its tracks' distinct
   songs (in the list's order), skipping any already present. Styled to match
   the song picker. */
.ks-setsong-import { margin-top: 4px; }

.ks-importpl {
    padding: 6px 2px 2px;
}
.ks-importpl__search { width: 100%; margin-bottom: 8px; }
.ks-importpl__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 280px;
    overflow-y: auto;
}
.ks-importpl__nomatch {
    margin: 6px 2px;
    font-size: 0.84rem;
    color: rgba(31, 41, 82, 0.6);
    font-style: italic;
}
.ks-importpl__note,
.ks-importpl__empty {
    margin: 0 0 8px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #6b6f76;
}
.ks-importpl__item { margin: 0; }
.ks-importpl__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    background: #FDFAF1;
    border: 1px solid #ece4d2;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    margin-bottom: 6px;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.ks-importpl__btn:hover {
    background: #f6efe0;
    border-color: #D4A955;
}
.ks-importpl__icon {
    flex: 0 0 auto;
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #E1F2F3;
    color: #2E9CA8;
}
.ks-importpl__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.ks-importpl__main strong {
    color: #1F2952;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ks-importpl__meta {
    font-size: 0.76rem;
    color: #6b6f76;
}
.ks-importpl__plus {
    flex: 0 0 auto;
    font-size: 1.1rem;
    font-weight: 700;
    color: #4A6F5C;
    line-height: 1;
}