/**
 * Unified Tune Detail Modal Styles
 *
 * Provides consistent styling for tune detail modals across all contexts
 * with responsive behavior for desktop and mobile views.
 */

/* The --modal-* surface variables live in theme.css (loaded on every page),
   so there is no load-order dependency on this file. */

/* Modal overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Fallbacks matter: the live-logging shell loads this file without theme.css */
    background-color: var(--scrim, rgba(0, 0, 0, 0.5));
    z-index: var(--z-modal-overlay, 1900);
    display: none;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.modal-overlay.show {
    display: flex;
    opacity: 1;
}

/* Modal dialog */
.modal-dialog {
    background: var(--bg-color, white);
    border-radius: 8px;
    padding: 0;
    max-width: 600px;
    width: 90%;
    max-height: calc(100vh - 80px);
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    color: var(--text-color);
    position: relative;
    pointer-events: auto;
    z-index: 1;
    overflow: hidden;
}

#tune-detail-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: 16px;
}

/* Header section - table layout prevents wrapping */
.modal-header-section {
    margin-bottom: -6px;
    margin-left: -10px;
    width: calc(100% + 10px);
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 10px 0;
}

.modal-header-section td {
    vertical-align: top;
    padding: 0;
}

.modal-header-pill-cell {
    width: 1%;
    white-space: nowrap;
}

.modal-header-title-cell {
    width: 300px;
}

.modal-header-spacer-cell {
    text-align: center;
    padding: 0;
    padding-top: 10px;
}

.modal-header-close-cell {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

/* Close button - in table layout, override absolute positioning */
#tune-detail-content .modal-header-section .modal-close-btn {
    position: relative;
    top: auto;
    right: auto;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--modal-text-muted);
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: 32px;
    height: 32px;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#tune-detail-content .modal-header-section .modal-close-btn:hover {
    color: var(--text-color);
}

.modal-tune-title {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--text-color);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.modal-tune-title-clickable {
    cursor: pointer;
}

.modal-tune-title-clickable:hover {
    color: var(--primary);
}

/* Tune type pill */
.tune-type-pill {
    display: inline-block;
    font-size: 11px;
    padding: 3px 8px;
    background-color: var(--primary-fill);
    color: white;
    border-radius: 3px;
    text-transform: capitalize;
    white-space: nowrap;
}

/* TheSession link icon (logo image) */
.thesession-link-icon {
    text-decoration: none;
    display: flex;
    align-items: center;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.thesession-link-icon:hover {
    opacity: 1;
}

.thesession-logo-img {
    height: 18px;
    width: auto;
}

/* ABC Tools link icon */
.abctools-link-icon {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    opacity: 0.8;
    transition: opacity 0.2s;
    vertical-align: middle;
}

.abctools-link-icon:hover {
    opacity: 1;
}

.abctools-logo-img {
    height: 16px;
    width: 16px;
    object-fit: contain;
}

/* Configure section */
.configure-section {
    background-color: var(--modal-bg-secondary);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 6px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.configure-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.configure-field-group-inline {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: baseline;
}

/* Make inputs and selects in inline groups flex to fill remaining space */
.configure-field-group-inline .configure-input,
.configure-field-group-inline .configure-select,
.configure-field-group-inline .input-with-button {
    flex: 1;
    min-width: 0; /* Allow flex items to shrink below their content size */
}

.configure-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}

/* In inline groups, labels should not wrap */
.configure-field-group-inline .configure-label {
    white-space: nowrap;
    flex-shrink: 0;
}

.configure-value {
    font-size: 14px;
    color: var(--modal-text-muted);
}

.configure-input,
.configure-select {
    padding: 8px 10px;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 4px;
    font-size: 14px;
    background-color: var(--bg-color, white);
    color: var(--text-color);
    width: 100%;
}

.configure-input:focus,
.configure-select:focus {
    outline: none;
    border-color: var(--primary);
}

.field-error {
    color: #dc3545;
    font-size: 13px;
    margin-top: 4px;
}

/* Tunebook status section */
/* "Log to current session" action (spec 024) — shown when a session is in progress. */
.active-session-log-section {
    margin: 4px 0 8px;
}

.active-session-log-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border: none;
    border-radius: 6px;
    background-color: #2ea043;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.active-session-log-btn:hover {
    background-color: #3fb950;
}

.active-session-log-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.tunebook-status-section {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Box is tinted by the roll-up status (.tunebook-status-<status> below); the active
       toggle in each row additionally carries its own status color. */
}

.tunebook-status-not-on-list {
    background-color: #4a1f1f;
    color: #f8d7da;
}

.tunebook-status-want-to-learn {
    background-color: #1f3a4a;
    color: #cce5ff;
}

.tunebook-status-learning {
    background-color: #4a3f1f;
    color: #ffeaa7;
}

.tunebook-status-learned {
    background-color: #1f4a2f;
    color: #c3e6cb;
}

/* Unified status control. Each block is a thin label line (full name — never truncated)
   above its full-width segmented control, so the main roll-up and every instrument line
   up identically. */
.tsc-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.tsc-label-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 20px;
}
.tsc-name { font-size: 14px; }
.tsc-inst-block .tsc-name { font-weight: 500; }
/* Text toggle for the per-instrument rows: "View By Instrument" below the roll-up when
   collapsed, "Hide Instruments" below the last instrument when expanded. */
.tsc-expand-link {
    align-self: center;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    padding: 0;
    opacity: 0.75;
    text-decoration: underline;
}
.tsc-expand-link:hover { opacity: 1; }
.tsc-manual {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.6;
    margin-left: 6px;
}
.tsc-remove {
    flex: 0 0 auto;
    font: inherit;
    font-size: 12px;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 0 2px;
}
.tsc-remove:hover { opacity: 1; text-decoration: underline; }
.tsc-instruments {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Status segmented control — full width with three equal-width buttons so the main
   roll-up and every instrument line up. The ACTIVE button carries the status color. */
.tunebook-status-seg {
    display: flex;
    width: 100%;
    border: 1.5px solid currentColor;
    border-radius: 6px;
    overflow: hidden;
}
.tunebook-status-seg.saving { opacity: 0.6; pointer-events: none; }
.tunebook-status-opt {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 4px;
    border: 0;
    border-left: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.12s ease;
}
.tunebook-status-opt:first-child { border-left: 0; }
.tunebook-status-opt:hover { background-color: rgba(255, 255, 255, 0.06); }
.tunebook-status-opt.active { font-weight: 700; }

/* Not-on-list mode of the bar: two compartments — a wide non-clickable label plus an
   "Add" action — in the red scheme regardless of the surrounding section's tint. */
.tunebook-status-seg.tsc-notlist-seg { color: #f8d7da; background-color: #4a1f1f; }
.tsc-notlist-label {
    flex: 2 1 0;
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tsc-notlist-label:hover { background-color: transparent; }
/* The Add compartment gets a lighter fill so it reads as clickable; hover lightens further. */
.tsc-notlist-add { background-color: rgba(255, 255, 255, 0.1); }
.tsc-notlist-add:hover { background-color: rgba(255, 255, 255, 0.18); }
.tunebook-status-opt.active[data-status="want to learn"] { background-color: #2a5a8a; color: #eaf3ff; }
.tunebook-status-opt.active[data-status="learning"] { background-color: #7a5f1e; color: #fff3d4; }
.tunebook-status-opt.active[data-status="learned"] { background-color: #2f6b40; color: #e6f6ea; }

/* Heard count section */
.heard-count-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: var(--modal-bg-secondary);
    border-radius: 6px;
}


.heard-count-label {
    font-size: 14px;
    color: var(--text-color);
}

.heard-count-controls {
    display: flex;
    gap: 8px;
}

.heard-count-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 4px;
    background-color: var(--bg-color, white);
    color: var(--text-color);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.heard-count-btn:hover:not(:disabled) {
    background-color: var(--hover-bg, #e9ecef);
}

.heard-count-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.heard-count-btn-plus {
    font-weight: bold;
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

.heard-count-btn-plus:hover:not(:disabled) {
    background-color: #218838;
    border-color: #1e7e34;
}

/* Heard count spinner */
.heard-count-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    opacity: 0.4;
}

.spinner-icon {
    animation: spinner-rotate 1s linear infinite;
    width: 100%;
    height: 100%;
}

.spinner-path {
    stroke: var(--text-color, #333);
    stroke-linecap: round;
    animation: spinner-dash 1.5s ease-in-out infinite;
}

@keyframes spinner-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinner-dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* Notes section */
.notes-section {
    display: flex;
    flex-direction: column;
}

.notes-textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    background-color: var(--bg-color, white);
    color: var(--text-color);
    resize: vertical;
}

.notes-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.notes-textarea::placeholder {
    color: var(--modal-text-muted);
}

/* Action buttons */
.modal-action-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.btn-primary {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
    background-color: var(--primary-fill);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--primary-fill-hover);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
    background-color: var(--secondary-text, #6c757d);
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* Additional links. align-items keeps each anchor sized to its text — as
   stretched (default) flex children the links hovered/fired from anywhere
   horizontally level with them. */
.modal-additional-links {
    font-size: 13px;
    color: var(--modal-text-muted);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.modal-additional-links a {
    color: var(--primary);
    text-decoration: none;
}

.modal-additional-links a:hover {
    text-decoration: underline;
}

.modal-additional-links a.remove-link {
    color: #dc3545;
}

.modal-additional-links a.remove-link:hover {
    color: #c82333;
}

/* Tabs section */
.modal-tabs-section {
    /* No own margin-top — the content gap already separates it from the notation.
       Tighter padding above the tab row keeps the divider close to the tabs. */
    margin-top: 0;
    border-top: 1px solid var(--border-color, #dee2e6);
    padding-top: 10px;
}

.modal-tabs-header {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color, #dee2e6);
    margin-bottom: 16px;
}

.modal-tab {
    /* Equal share of the full header width, label centered. */
    flex: 1 1 0;
    padding: 10px 8px;
    text-align: center;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--modal-text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.modal-tab:hover {
    color: var(--text-color);
}

.modal-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.modal-tab-pane {
    display: none;
}

.modal-tab-pane.active {
    display: block;
}

/* Stats tab */
.stat-card {
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    background-color: var(--input-bg, #f8f9fa);
}

.stat-card:last-child {
    margin-bottom: 0;
}

.stat-line {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.5;
}

.stat-number {
    font-weight: 600;
}

.stat-subline {
    margin-top: 2px;
    font-size: 12px;
    font-style: italic;
    color: var(--modal-text-muted);
}

.stat-note {
    margin-left: 4px;
    font-size: 12px;
    color: var(--modal-text-muted);
    opacity: 0.75;
}

.refresh-btn {
    margin-left: 4px;
    padding: 2px 6px;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 3px;
    background-color: var(--bg-color, white);
    color: var(--text-color);
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
}

.refresh-btn:hover {
    background-color: var(--hover-bg, #e9ecef);
}

/* History tab */
.no-history,
.history-loading {
    padding: 20px;
    text-align: center;
    color: var(--modal-text-muted);
    font-size: 14px;
}

.history-scope-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.history-scope-btn {
    padding: 4px 12px;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 14px;
    background-color: var(--modal-bg-secondary);
    color: var(--modal-text-muted);
    font-size: 13px;
    cursor: pointer;
    line-height: 1.4;
}

.history-scope-btn.active {
    background-color: var(--primary-fill);
    border-color: var(--primary-fill);
    color: #fff;
}

.history-truncated {
    margin-top: 10px;
    text-align: center;
    color: var(--modal-text-muted);
    font-size: 12px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-item {
    padding: 12px;
    background-color: var(--modal-bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color, #dee2e6);
}


.history-instance-name {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.history-instance-name a {
    color: var(--primary);
    text-decoration: none;
}

.history-instance-name a:hover {
    text-decoration: underline;
}

.history-position,
.history-setting {
    font-size: 13px;
    color: var(--modal-text-muted);
}

/* Played With tab */
.played-with-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.played-with-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--modal-bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color, #dee2e6);
    cursor: pointer;
}

.played-with-item:hover {
    background-color: var(--hover-bg, #e9ecef);
}

.played-with-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}

.played-with-count {
    font-size: 13px;
    color: var(--modal-text-muted);
    flex-shrink: 0;
}

/* Loading states */
.modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 16px;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color, #dee2e6);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* @keyframes spin lives in theme.css */


.modal-loading p {
    color: var(--modal-text-muted);
    font-size: 14px;
}

/* Error state */
.modal-error {
    padding: 40px 20px;
    text-align: center;
}

.modal-error h3 {
    color: #dc3545;
    margin-bottom: 12px;
}

.modal-error p {
    color: var(--text-color);
    font-size: 14px;
}

/* Mobile styles */
@media (max-width: 768px) {
    .modal-dialog {
        width: 100%;
        max-width: 100%;
        height: calc(100vh - 40px);
        margin: 0;
        margin-top: 40px;
        border-radius: 0;
        position: fixed;
        right: 0;
        top: 0;
        transform: translateX(100%);
        transition: transform 0.3s ease-out;
    }

    .modal-overlay.show .modal-dialog {
        transform: translateX(0);
    }

    #tune-detail-content .modal-header-section .modal-close-btn {
        font-size: 0;
        width: 40px;
        height: 40px;
        background-color: var(--bg-color);
        border: 1px solid var(--border-color);
        border-radius: 4px;
    }

    #tune-detail-content .modal-header-section .modal-close-btn::before {
        content: '>';
        font-size: 24px;
        font-weight: bold;
        color: var(--text-color);
    }

    .modal-header-title-cell {
        width: 300px;
    }
}

/* ABC Notation Section */
.abc-notation-section {
    margin: 5px 0 0;
    padding: 6px;
    padding-bottom: 0;
    background-color: var(--modal-bg-secondary);
    border-radius: 4px;
    border: 1px solid var(--border-color);
    position: relative;
}

/* No cached notation: the section holds only the Generate Notation link */
.abc-notation-section.abc-notation-empty {
    padding-bottom: 6px;
    text-align: center;
}

.generate-notation-link {
    background: none;
    border: none;
    padding: 6px 8px;
    font-size: 13px;
    color: var(--primary);
    cursor: pointer;
}

.generate-notation-link:hover:not(:disabled) {
    text-decoration: underline;
}

.generate-notation-link:disabled {
    color: var(--modal-text-muted);
    cursor: default;
}

/* Controls row - mode tabs on left, external links on right */
.notation-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    padding: 0 6px 6px 6px;
}

/* Mode Tabs - left side */
.notation-mode-tabs {
    display: flex;
    gap: 0;
}

/* External links - right side */
.notation-external-links {
    display: flex;
    align-items: center;
    gap: 0;
}

.notation-external-link {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--secondary-text);
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: lowercase;
    text-decoration: none;
}

.notation-external-link:hover {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.notation-mode-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--secondary-text);
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: lowercase;
}

.notation-mode-tab:hover {
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

.notation-mode-tab.active {
    color: var(--text-color);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.abc-notation-display {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    line-height: 0;
    color: var(--text-color);
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    min-height: 70px;
    display: flex;
    align-items: center;
}

/* ABC Notation - Incipit (larger font) */
.abc-notation-display.abc-notation-incipit {
    font-size: 16px;
    line-height: 1.4;
}

/* ABC Notation - Clickable (for toggle) */
.abc-notation-display.abc-notation-clickable {
    cursor: pointer;
    transition: background-color 0.2s;
}

.abc-notation-display.abc-notation-clickable:hover {
    background-color: var(--hover-bg);
}

/* ABC Notation - Text Display */
.abc-notation-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    line-height: 1.3;
    color: var(--text-color);
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    flex: 1;
    width: 100%;
}

.abc-notation-text.abc-notation-incipit {
    font-size: 16px;
    line-height: 1.4;
}

/* ABC Notation - Image Display */
.abc-notation-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 4px;
    background: white;
    padding: 5px;
    box-sizing: border-box;
    vertical-align: top;
    max-width: 100%;
    flex: 1;
}

.abc-notation-image.abc-notation-incipit {
    /* Incipit images fit full width with minimal padding */
    width: 100%;
    padding: 2px;
}

/* Input with Button Layout */
.input-with-button {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-with-button .configure-input {
    flex: 1;
}

.fetch-setting-btn {
    padding: 8px 16px;
    background-color: var(--primary-fill);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.fetch-setting-btn:hover:not(:disabled) {
    background-color: var(--primary-fill-hover);
}

.fetch-setting-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Spinner for fetch setting button */
.fetch-setting-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: fetch-setting-spin 0.8s linear infinite;
}

@keyframes fetch-setting-spin {
    to { transform: rotate(360deg); }
}

.fetch-setting-btn-loading {
    min-width: 70px; /* Prevent button from shrinking during loading */
}

/* ==========================================================================
   Spec 037 — the restructured drawer
   ========================================================================== */

/* The "aka" line under the title. The title is the most personal name for the tune;
   this names the next layer down that is meaningfully a DIFFERENT name. Usually absent. */
.modal-tune-aka {
    font-size: 12px;
    color: var(--secondary-text, #888);
    margin-top: 2px;
    line-height: 1.35;
}

/* The title no longer opens anything, so it must not look like it does. */
.modal-tune-title {
    cursor: default;
}

/* You're looking at the session's setting, not yours. The link swaps the staff over and
   back — a warning you can't act on is just an irritant. */
.notation-mismatch {
    margin-top: 9px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--secondary-text, #888);
}
.notation-mismatch-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--link-color, #65b464);
    cursor: pointer;
    text-decoration: underline;
}
.notation-mismatch-link:hover { color: var(--link-hover-color, #92ca91); }

/* The action row at the foot of the status block. Configure + View By Instrument cluster
   left and wrap together (both expand more UI); Remove stays right and TOP-aligned, so it
   holds the first line even when the left cluster wraps to two on a phone. */
.tsc-action-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--border-color, #444);
}
.tsc-action-left {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    min-width: 0;
}
.tsc-action-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    color: var(--text-muted, #888);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.tsc-action-link:hover {
    color: var(--link-hover-color, #92ca91);
    text-decoration: underline;
}
.tsc-action-danger:hover { color: var(--danger, #e85a5a); }
/* Was a 9px `▸` — a triangle at a size no icon should be, inheriting the font's
   metrics. Drawn now (lib/Chevron.svelte), so only its placement lives here. */
.tsc-caret {
    margin-right: 4px;
}
/* The expand link sits in the row now, not centred under the roll-up. */
.tsc-action-row .tsc-expand-link {
    align-self: auto;
    font-size: 12.5px;
    opacity: 1;
    text-decoration: none;
}
.tsc-action-row .tsc-expand-link:hover { text-decoration: underline; }

/* Personal config, expanded inside the status block. */
.tsc-config-body {
    margin-top: 12px;
    background: transparent;
    border: none;
    border-top: 1px dashed var(--border-color, #444);
    border-radius: 0;
    padding: 12px 0 0;
}
.tsc-config-body .notes-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 64px;
    resize: vertical;
}
.tsc-config-body .modal-action-buttons {
    justify-content: flex-end;
    align-items: center;
}
.tsc-offline-hint {
    margin-right: auto;
    font-size: 11px;
    color: var(--warning-text, #ffd700);
}

/* Centered per-instrument toggle: sits right under the roll-up now (not in the action
   row), so the status box stays compact. */
.tsc-expand-center {
    align-self: center;
    margin-top: 2px;
}

/* Notes & tags panel: always visible for a tune on my list, below the (now compact)
   status box. Auto-saves on blur — no Save button. Relative so the little save flash
   can pin to the top-right without shifting the layout. */
.tsc-personal-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}
/* The flex gap already spaces the action row from the fields; drop its own margin so
   the divider (border-top) doesn't float too far down. */
.tsc-personal-panel .tsc-action-row {
    margin-top: 0;
}
.tsc-personal-panel .notes-textarea {
    box-sizing: border-box;
    min-height: 72px;
    resize: vertical;
}
.tsc-autosave {
    position: absolute;
    top: -2px;
    right: 0;
    font-size: 11px;
    pointer-events: none;
}
.tsc-autosave-saving { color: var(--text-muted, #888); }
.tsc-autosave-saved { color: var(--success-text, #7dd492); }
.tsc-autosave-error { color: var(--danger, #e85a5a); }

/* Stats: the canonical name and id, which used to sit above everything you actually
   opened the drawer to see. */
.stat-canonical {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color, #444);
    font-size: 12px;
    color: var(--text-muted, #888);
}

/* ---- The Session tab ---- */

/* The droplist IS the heading. It names the session ("At The Cobblestone") and the list
   continues the sentence downward ("… on Tue 8 Jul"), so no separate title is needed. */
.sess-scope-row {
    margin-bottom: 12px;
}
.sess-scope-row .configure-select {
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    padding: 9px 11px;
}

/* The count line + the "while I was there" filter, sitting just above the list. */
.hist-controls {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin: 14px 0 10px;
}
.hist-summary {
    font-size: 13px;
    color: var(--secondary-text, #888);
}
/* margin-left:auto on the PAIR, not justify-content:space-between on the row — the filter
   must hold its place on the right whether or not the summary line is there, or it jumps
   left the moment the filter is switched on and the count steps aside. Anchoring the pair
   (hint + filter) means the transient hint grows leftward and the checkbox never moves. */
.hist-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.hist-attended-hint {
    font-size: 12px;
    color: var(--success-text, #90ee90);
    white-space: nowrap;
    animation: hist-hint-fade 1.6s ease-out forwards;
}
@keyframes hist-hint-fade {
    0%, 55% { opacity: 1; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hist-attended-hint { animation: none; }
}
.hist-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted, #888);
    cursor: pointer;
    white-space: nowrap;
}
.hist-filter input { accent-color: var(--primary-fill, #4a8049); cursor: pointer; }
.hist-filter:hover { color: var(--text-color, #e0e0e0); }

/* Were you there? A quiet mark on the row, not a label competing with it. */
.history-attended-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 7px;
    padding: 0;
    border: 1px solid var(--success-border, #3d6e42);
    border-radius: 50%;
    background: var(--success-bg, #2d5a32);
    color: var(--success-text, #90ee90);
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
}
.history-attended-mark:hover {
    border-color: var(--success, #4daf5a);
}

/* Editing is the rarer errand on this tab, so the form waits until it's asked for. */
.sess-edit-link {
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    color: var(--text-muted, #888);
    cursor: pointer;
    text-align: left;
}
.sess-edit-link:hover {
    color: var(--link-hover-color, #92ca91);
    text-decoration: underline;
}
.sess-form-readonly .configure-value {
    color: var(--text-color, #e0e0e0);
}
.sess-danger-foot {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #444);
}

/* ---- The Details tab ---- */

/* The session's own name / setting / key, above the stats. 037 put this under the History
   droplist, where nobody found it — so here it is open, not behind a link, with a heading
   that names whose statement it is ("At Mueller Session"). That heading is what keeps it
   from reading as another personal Configure form; the two look alike on purpose. */
.details-sess-block {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color, #444);
}
.details-sess-heading {
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted, #888);
}

/* Offline: the three override fields are read-only, and must LOOK it. Notes stays live
   (set_notes is an offline op — a phone in a pub basement is exactly where someone types
   a note about a tune).

   Scoped to the inputs on purpose: .fetch-setting-btn is also `disabled` while it's
   showing its ✓/⚠/✗ feedback, and dimming that would swallow the signal. */
.configure-input:disabled,
.configure-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--already-added-bg, #3a3a3a);
}