/* web/static/css/devlib-margin.css
 * Margin panel (notes/todos/questions/snippets) for /library/dev/:slug
 * and chapter test runner block.
 * Theme variables only — no hardcoded hex.
 */

/* ── Layout integration ──────────────────────────────────────────────────── */

.devlib-reader__layout--with-margin {
    grid-template-columns: 200px minmax(0, 1fr) 260px;
}

/* ── Margin panel ─────────────────────────────────────────────────────────── */

.dlm-panel {
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-sans);
    font-size: 0.85em;
    overflow: hidden;
}

/* tabs */
.dlm-panel__tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.dlm-panel__tab {
    flex: 1;
    padding: 7px 4px;
    font-family: var(--font-sans);
    font-size: 0.82em;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dlm-panel__tab:hover { color: var(--text-primary); }

.dlm-panel__tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* tag filter */
.dlm-tags {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    position: relative;
}

.dlm-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
}

.dlm-tags__tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: color-mix(in srgb, var(--accent) 15%, var(--bg-elevated));
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-size: 0.82em;
}

.dlm-tags__remove {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.dlm-tags__remove:hover { color: var(--text-primary); }

.dlm-tags__input {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 0.84em;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 3px 8px;
    outline: none;
    transition: border-color var(--transition);
}

.dlm-tags__input:focus { border-color: var(--accent); }

.dlm-tags__dropdown {
    position: absolute;
    left: 8px;
    right: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 20;
}

.dlm-tags__dropdown:empty { display: none; }

.dlm-tags__suggestion {
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.88em;
    color: var(--text-secondary);
    transition: background var(--transition);
}

.dlm-tags__suggestion:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--text-primary);
}

/* body / scroll area */
.dlm-panel__body {
    overflow-y: auto;
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dlm-panel__empty {
    color: var(--text-muted);
    font-size: 0.88em;
    text-align: center;
    padding: 24px 8px;
    line-height: 1.55;
}

.dlm-panel__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84em;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    margin-bottom: 4px;
}

/* ── Note card ──────────────────────────────────────────────────────────── */

.dlm-note-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dlm-note {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    transition: border-color var(--transition);
}

.dlm-note:hover { border-color: var(--border); }

.dlm-note__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.dlm-note__kind {
    font-size: 0.74em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 5px;
    border-radius: var(--radius-sm);
}

.dlm-note__kind--note     { background: color-mix(in srgb, var(--accent)  15%, transparent); color: var(--accent); }
.dlm-note__kind--todo     { background: color-mix(in srgb, #60a0e0 15%, transparent); color: #60a0e0; }
.dlm-note__kind--question { background: color-mix(in srgb, #a070d0 15%, transparent); color: #a070d0; }
.dlm-note__kind--idea     { background: color-mix(in srgb, #d0a030 15%, transparent); color: #d0a030; }
.dlm-note__kind--snippet  { background: color-mix(in srgb, #50b080 15%, transparent); color: #50b080; }

.dlm-note__date {
    color: var(--text-muted);
    font-size: 0.8em;
    margin-left: auto;
}

.dlm-note__selection {
    font-style: italic;
    color: var(--text-secondary);
    border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
    margin: 0 0 5px;
    padding: 0 8px;
    font-size: 0.85em;
    line-height: 1.45;
}

.dlm-note__body {
    margin: 0 0 4px;
    color: var(--text-primary);
    font-size: 0.9em;
    line-height: 1.5;
}

.dlm-note__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}

.dlm-note__tag {
    font-size: 0.78em;
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    padding: 1px 5px;
}

.dlm-note__done-check {
    margin-right: 6px;
    accent-color: var(--accent);
}

.dlm-note__ask-btn,
.dlm-note__sandbox-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Tutor response */
.dlm-note__tutor-response {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 0.88em;
    color: var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
    max-height: 320px;
    overflow-y: auto;
}

/* ── Floating action bar (selection) ─────────────────────────────────────── */

.dlm-action-bar {
    position: fixed;
    z-index: 900;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--bg-primary) 60%, transparent);
    display: flex;
    gap: 2px;
    padding: 4px;
    pointer-events: all;
}

.dlm-action-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    font-family: var(--font-sans);
    font-size: 0.8em;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}

.dlm-action-bar__btn:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--text-primary);
}

/* ── Related panel ──────────────────────────────────────────────────────── */

.dlm-related {
    margin: 8px 0 20px;
}

.dlm-related__toggle {
    font-family: var(--font-sans);
    font-size: 0.82em;
    color: var(--text-muted);
    background: none;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color var(--transition), border-color var(--transition);
}

.dlm-related__toggle:hover {
    color: var(--text-secondary);
    border-color: var(--border);
}

.dlm-related__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.dlm-related__card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-family: var(--font-sans);
    font-size: 0.86em;
}

.dlm-related__card-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.dlm-related__card-book {
    color: var(--text-muted);
    font-size: 0.88em;
}

/* ── Chapter test runner ─────────────────────────────────────────────────── */

.chtest {
    margin: 36px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--border-subtle);
}

.chtest__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.chtest__title {
    font-family: var(--font-sans);
    font-size: 0.88em;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.chtest__title .civ-icon { filter: var(--icon-filter); }

.chtest__run-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.chtest__summary {
    font-family: var(--font-sans);
    font-size: 0.84em;
    color: var(--text-muted);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.chtest__badge {
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.chtest__badge--pass { background: color-mix(in srgb, #50b080 18%, transparent); color: #50b080; }
.chtest__badge--fail { background: color-mix(in srgb, var(--danger, #c07070) 18%, transparent); color: var(--danger, #c07070); }

.chtest__output-wrap {
    margin-top: 8px;
}

.chtest__output {
    font-family: var(--font-mono);
    font-size: 0.86em;
    line-height: 1.5;
    background: color-mix(in srgb, var(--bg-primary) 70%, var(--bg-surface) 30%);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 10px 14px;
    overflow-x: auto;
    color: var(--text-primary);
    white-space: pre;
    max-height: 400px;
    overflow-y: auto;
}

.chtest__output--pass { border-left-color: #50b080; }
.chtest__output--fail { border-left-color: var(--danger, #c07070); }

/* ── Export modal ─────────────────────────────────────────────────────────── */

.dlm-export-modal {
    min-width: 280px;
    max-width: 360px;
}

.dlm-export-modal__title {
    font-family: var(--font-sans);
    font-size: 1em;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--text-primary);
}

.dlm-export-modal__options {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.dlm-export-modal__opt {
    flex: 1;
    padding: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.88em;
    text-align: center;
    color: var(--text-secondary);
    transition: border-color var(--transition), color var(--transition);
}

.dlm-export-modal__opt:hover,
.dlm-export-modal__opt--selected {
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Narrow screen adjustments ───────────────────────────────────────────── */

@media (max-width: 1100px) {
    .devlib-reader__layout--with-margin {
        grid-template-columns: 1fr;
    }
    .dlm-panel {
        position: static;
        max-height: none;
        max-width: 100%;
    }
}