/* ============================================================
   delineation-admin.css — Delineation Curation (ADMIN)
   Cache-bust ?v=N in delineation-admin.html on every change.

   Deliberately denser and more utilitarian than the student Lab: this is a
   bulk triage tool, so information density and scan speed beat polish.
   Palette still inherited from css/styles.css.
   ============================================================ */

.da-wrap { max-width: 1560px; margin: 0 auto; padding: 20px 22px 50px; }

.da-head { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 14px; }
.da-title {
    font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 27px;
    letter-spacing: -.015em; color: #232e3a; margin: 0 0 4px;
}
.da-sub { font-size: 13px; color: #6b7280; margin: 0; max-width: 76ch; line-height: 1.55; }
.da-sub b { color: #232e3a; }

.da-approved {
    margin-left: auto; flex: none; background: #fff;
    border: 1px solid var(--card-border, rgba(0,0,0,.07)); border-radius: var(--r-card, 16px);
    box-shadow: var(--card-shadow); padding: 13px 16px; min-width: 210px;
}
.da-approved-k { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #9e9e9e; margin: 0 0 3px; }
.da-approved-n { font-family: 'Fraunces', Georgia, serif; font-size: 30px; font-weight: 700; color: #232e3a; line-height: 1; margin: 0 0 7px; }
.da-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.da-pill { font-size: 10px; color: #7c828d; background: #f4f6fa; border-radius: 99px; padding: 2px 8px; }
.da-pill b { color: #232e3a; font-family: 'IBM Plex Mono', monospace; }

.da-status {
    font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: #5d6470;
    background: #fff; border: 1px solid #e6ebf3; border-radius: 9px;
    padding: 8px 12px; margin: 0 0 12px;
}
.da-status.is-bad { background: #fdf2f2; border-color: #f0d2d2; color: #c0392b; }

/* ── toolbar ──────────────────────────────────────────────── */
.da-toolbar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--card-border, rgba(0,0,0,.07));
    border-radius: var(--r-widget, 12px); padding: 10px 14px; margin-bottom: 12px;
}
.da-field { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #6b7280; font-weight: 600; }
.da-field select, .da-field input[type=range] {
    font: 500 12px 'Inter', system-ui, sans-serif; color: #2c2c3e;
    border: 1px solid var(--ctrl-border, #e0e0e0); border-radius: 7px; padding: 5px 8px; background: #fff;
}
.da-field input[type=range] { padding: 0; width: 130px; }
#daMinQVal { font-family: 'IBM Plex Mono', monospace; color: #d4830a; }
.da-count { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8a8f99; margin-left: auto; }
.da-btn {
    cursor: pointer; background: #26408b; color: #fff; border: 0; border-radius: 9px;
    padding: 9px 16px; font: 600 12px 'Inter', system-ui, sans-serif;
}
.da-btn:hover { background: #1d3272; }
.da-btn:focus-visible { outline: 2px solid #26408b; outline-offset: 2px; }
.da-btn-danger { background: #fff; color: #c0392b; border: 1px solid #f0d2d2; }
.da-btn-danger:hover { background: #fdf2f2; color: #a93226; }

/* ── layout ───────────────────────────────────────────────── */
.da-body { display: flex; gap: 12px; align-items: flex-start; }
.da-side {
    width: 178px; flex: none; background: #fff;
    border: 1px solid var(--card-border, rgba(0,0,0,.07)); border-radius: var(--r-widget, 12px);
    padding: 11px; position: sticky; top: 74px; max-height: calc(100vh - 96px); overflow: auto;
}
.da-eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9e9e9e; margin: 0 0 7px; }
.da-records { display: flex; flex-direction: column; gap: 2px; }
.da-rec {
    cursor: pointer; text-align: left; background: none; border: 0; border-radius: 6px;
    padding: 5px 8px; font: 500 11.5px 'IBM Plex Mono', monospace; color: #5d6470;
    display: flex; align-items: center; gap: 6px;
}
.da-rec:hover { background: #f4f6fa; color: #26408b; }
.da-rec.is-on { background: #26408b; color: #fff; }
.da-rec.has-any { font-weight: 600; color: #2e7d32; }
.da-rec.is-on.has-any { color: #fff; }
.da-recn { margin-left: auto; background: #66bb6a; color: #fff; border-radius: 99px; padding: 0 6px; font-size: 9.5px; }

.da-main { flex: 1; min-width: 0; }
.da-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 9px; }
.da-empty { font-size: 13px; color: #8a8f99; padding: 30px; text-align: center; grid-column: 1/-1; }

.da-card {
    cursor: pointer; background: #fff; border: 1px solid var(--card-border, rgba(0,0,0,.07));
    border-radius: 10px; padding: 5px; transition: border-color .12s, box-shadow .12s;
}
.da-card:hover { border-color: #c3cee6; }
.da-card.is-focus { border-color: #26408b; box-shadow: 0 0 0 1px #26408b inset; }
.da-card.is-sel { background: #f1f8f2; border-color: #66bb6a; box-shadow: 0 0 0 1px #66bb6a inset; }
.da-card.is-bad { background: #fdf7f7; }
.da-mini { width: 100%; height: 92px; display: block; border-radius: 6px; }
.da-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; padding: 0 3px 2px; }
.da-meta span { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: #8a8f99; }
.da-q { font-weight: 600; color: #4a5160 !important; }
.da-stage { margin-left: auto; background: #eef2fb; color: #26408b !important; border-radius: 5px; padding: 1px 5px; font-weight: 600; }
.da-warn { color: #c0392b !important; background: #fdecea; border-radius: 5px; padding: 1px 5px; }

/* ── detail ───────────────────────────────────────────────── */
.da-detail {
    position: fixed; right: 18px; bottom: 18px; width: 620px; max-width: calc(100vw - 40px);
    background: #fff; border: 1px solid var(--card-border, rgba(0,0,0,.07));
    border-radius: var(--r-card, 16px); box-shadow: 0 18px 50px rgba(15,20,35,.22);
    padding: 14px 16px 16px; z-index: 60;
}
.da-detail-head { display: flex; align-items: center; gap: 10px; }
.da-detail-head h2 { font-family: 'Fraunces', Georgia, serif; font-size: 16px; font-weight: 600; color: #232e3a; margin: 0; }
.da-x { margin-left: auto; cursor: pointer; background: none; border: 0; color: #8a8f99; font-size: 15px; }
.da-x:hover { color: #232e3a; }
.da-detail-sub { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: #8a8f99; margin: 3px 0 8px; }
.da-detail-sub b { color: #4a5160; }

.da-marks { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.da-mark {
    font: 600 10px 'IBM Plex Mono', monospace; border-radius: 5px; padding: 2px 7px;
    color: #b8bec7; background: #f4f6fa; border: 1px solid #eceef2;
    text-decoration: line-through;
}
.da-mark.is-on { color: #fff; background: var(--c); border-color: var(--c); text-decoration: none; }

#daBig { width: 100%; height: 260px; display: block; background: #fff; border: 1px solid #ececf0; border-radius: 10px; }

.da-detail-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.da-leads { display: flex; gap: 4px; }
.da-lead {
    cursor: pointer; border: 1px solid var(--ctrl-border, #e0e0e0); background: #fff; color: #6b7280;
    border-radius: 7px; padding: 4px 9px; font: 600 10px 'IBM Plex Mono', monospace;
}
.da-lead.is-on { background: #26408b; border-color: #26408b; color: #fff; }
.da-detail-foot .da-btn { margin-left: auto; }

.da-denied { font-size: 14px; color: #6b7280; padding: 60px 0; text-align: center; }

@media (max-width: 1100px) {
    .da-body { flex-direction: column; }
    .da-side { width: auto; position: static; max-height: 200px; }
    .da-records { flex-direction: row; flex-wrap: wrap; }
    .da-detail { position: static; width: auto; margin-top: 14px; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .da-card { transition: none; } }

/* ── one-time setup helper ────────────────────────────────── */
.da-setup {
    background: #fff8ec; border: 1px solid #f0d9ab; border-radius: var(--r-widget, 12px);
    padding: 12px 14px; margin: 0 0 12px;
}
.da-setup-t { font-size: 12.5px; color: #8a5a00; margin: 0 0 7px; font-weight: 600; }
.da-setup-c {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #232e3a;
    background: #fff; border: 1px solid #f0e2c4; border-radius: 7px;
    padding: 8px 10px; margin: 0; overflow-x: auto; white-space: pre;
}

/* ── already in the Lab ───────────────────────────────────── */
/* Distinct from .is-sel (marked, not yet saved) so the two states are never
   confused: teal = live in the Lab, green = pending save. */
.da-card.is-live { background: #eef7fb; border-color: #a6cfd5; box-shadow: 0 0 0 1px #a6cfd5 inset; }
.da-card.is-live .da-stage { background: #a6cfd5; color: #14343d !important; }
.da-card.is-live.is-sel { background: #f1f8f2; border-color: #66bb6a; box-shadow: 0 0 0 1px #66bb6a inset; }
.da-detail-foot #daRemove { margin-left: auto; }
.da-detail-foot #daRemove + .da-btn { margin-left: 0; }

/* ── landmark completeness ────────────────────────────────── */
/* T onset is annotated per RECORD, not per beat, so completeness is mostly a
   property of which record you open. Surfacing it in the rail turns finding
   complete material into picking a record rather than hunting through beats. */
.da-check { gap: 6px; cursor: pointer; }
.da-check input { accent-color: #26408b; }
.da-recfilter {
    width: 100%; font: 500 11.5px 'Inter', system-ui, sans-serif; color: #2c2c3e;
    border: 1px solid var(--ctrl-border, #e0e0e0); border-radius: 7px;
    padding: 5px 7px; background: #fff; margin-bottom: 6px;
}
.da-recsummary { font-size: 10px; line-height: 1.4; color: #8a8f99; margin: 0 0 8px; }
.da-recid { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.da-rec.is-complete .da-recid { color: #1d3272; font-weight: 600; }
.da-rec.is-on.is-complete .da-recid { color: #fff; }
.da-recfull {
    background: #eef2fb; color: #26408b; border: 1px solid #d6e0f5;
    border-radius: 99px; padding: 0 6px; font-size: 9.5px; font-weight: 600; flex: none;
}
.da-rec.is-on .da-recfull { background: rgba(255,255,255,.22); color: #fff; border-color: transparent; }
.da-n.is-full { background: #eef2fb; color: #26408b !important; border-radius: 5px; padding: 1px 5px; font-weight: 600; }