/* ============================================================
   delineation.css — Delineation Lab
   Cache-bust ?v=N in delineation.html on every change.

   Palette, radii and shadows are inherited from css/styles.css :root.
   Landmark colours follow the app's segment palette (shared with ARIA), with
   the paper-safe PR yellow (#c2a200) convention. The working canvas is the
   app's PAPER renderer theme, not the dark monitor: delineation is a
   measurement task, and paper is this app's measurement idiom.
   ============================================================ */

.dl-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 22px 24px 60px;
}

/* ── page head + mode switch ──────────────────────────────── */
.dl-head {
    display: flex; align-items: flex-end; gap: 20px;
    flex-wrap: wrap; margin-bottom: 18px;
}
.dl-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600; font-size: 30px; letter-spacing: -.015em;
    color: #232e3a; margin: 0 0 4px;
}
.dl-sub { font-size: 13.5px; color: #6b7280; margin: 0; max-width: 62ch; line-height: 1.55; }

.dl-modes { margin-left: auto; display: flex; gap: 4px; background: #fff;
            border: 1px solid var(--ctrl-border, #e0e0e0); border-radius: 11px; padding: 4px; }
.dl-mode {
    border: 0; background: none; cursor: pointer;
    font: 600 13px/1 'Inter', system-ui, sans-serif;
    color: #6b7280; padding: 9px 18px; border-radius: 8px;
    transition: background .16s, color .16s;
}
.dl-mode:hover { color: #26408b; }
.dl-mode.is-on { background: #26408b; color: #fff; }
.dl-mode:focus-visible { outline: 2px solid #26408b; outline-offset: 2px; }

/* ── stage picker ─────────────────────────────────────────── */
.dl-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
             gap: 10px; margin-bottom: 18px; }
.dl-stage {
    text-align: left; cursor: pointer; background: #fff;
    border: 1px solid var(--card-border, rgba(0,0,0,.07));
    border-radius: var(--r-widget, 12px); padding: 12px 13px;
    display: grid; gap: 3px; transition: border-color .16s, box-shadow .16s, transform .16s;
    font-family: 'Inter', system-ui, sans-serif;
}
.dl-stage:hover { border-color: #c3cee6; box-shadow: 0 4px 14px rgba(15,20,35,.07); transform: translateY(-1px); }
.dl-stage.is-on { border-color: #26408b; box-shadow: 0 0 0 1px #26408b inset; }
.dl-stage:focus-visible { outline: 2px solid #26408b; outline-offset: 2px; }
.dl-stage-n { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600; color: #9aa0aa; }
.dl-stage-t { font-family: 'Fraunces', Georgia, serif; font-size: 14.5px; font-weight: 600; color: #232e3a; }
.dl-stage-h { font-size: 11.5px; color: #7c828d; line-height: 1.45; }
.dl-stage-p { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: #d4830a; margin-top: 2px; }

/* ── the workbench card ───────────────────────────────────── */
.dl-card {
    background: #fff; border: 1px solid var(--card-border, rgba(0,0,0,.07));
    border-radius: var(--r-card, 16px);
    box-shadow: var(--card-shadow, 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06));
    overflow: hidden;
}
.dl-cardhead {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 16px; border-bottom: 1px solid #eceef2;
}
.dl-cardhead h2 {
    font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 16px;
    color: #232e3a; margin: 0; letter-spacing: -.01em;
}
.dl-chip {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: #fdf1dd; color: #8a5a00; border: 1px solid #f0d9ab;
    border-radius: 99px; padding: 3px 10px;
}
.dl-meta { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8a8f99; }
.dl-progress { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #4a5160; font-weight: 600; }

.dl-body { display: flex; align-items: stretch; }
.dl-main { flex: 1; padding: 14px 16px 16px; min-width: 0; }
.dl-rail {
    width: 214px; flex: none; border-left: 1px solid #eceef2;
    background: #fcfcfd; padding: 14px 14px 16px;
}

.dl-eyebrow {
    font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #9e9e9e; margin: 0 0 7px;
}
.dl-paper { background: #fff; border: 1px solid #ececf0; border-radius: var(--r-widget, 12px); display: block; width: 100%; }
.dl-canvaswrap { position: relative; margin-top: 4px; }
#dlWork { height: 304px; }
#dlOverlay { position: absolute; inset: 0; width: 100%; height: 304px; cursor: default; touch-action: none; }

.dl-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; padding-top: 9px; border-top: 1px solid #f0f1f4; }
.dl-legend span { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #7c828d; }
.dl-legend i { width: 16px; height: 0; display: inline-block; }

/* ── landmark rail ────────────────────────────────────────── */
.dl-lmk {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 8px; border-radius: 9px; margin-bottom: 2px;
    border: 1px solid transparent; cursor: pointer;
}
.dl-lmk:focus-visible { outline: 2px solid #26408b; outline-offset: 1px; }
.dl-sw { width: 3px; height: 20px; border-radius: 2px; flex: none; }
.dl-nm { font-family: 'Fraunces', Georgia, serif; font-size: 13px; font-weight: 600; color: #232e3a; }
.dl-v  { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: #9aa0aa; }
.dl-lmk.is-set  { background: #fff; border-color: #e9edf4; }
.dl-lmk.is-set .dl-v { color: #4a5160; }
.dl-lmk.is-now  { background: #fff8ec; border-color: #f0d9ab; }
.dl-lmk.is-now .dl-v { color: #d4830a; font-weight: 600; }
.dl-lmk.is-todo { opacity: .55; }
.dl-lmk.is-absent { opacity: .38; cursor: default; }
.dl-lmk.is-absent .dl-nm { text-decoration: line-through; text-decoration-thickness: 1px; }
.dl-lmk.is-hit  { background: #f1f8f2; border-color: #cfe6d3; }
.dl-lmk.is-hit .dl-v  { color: #2e7d32; font-weight: 600; }
.dl-lmk.is-miss { background: #fdf2f2; border-color: #f0d2d2; }
.dl-lmk.is-miss .dl-v { color: #c0392b; font-weight: 600; }

.dl-absent-note { font-size: 11px; line-height: 1.5; color: #8a8f99; margin: 8px 2px 0; font-style: italic; }

.dl-teach { margin-top: 12px; background: #232e3a; border-radius: 11px; padding: 11px 12px; }
.dl-teach .dl-tt { font-family: 'Fraunces', Georgia, serif; font-size: 13.5px; font-weight: 600; color: #fff; margin: 0 0 4px; }
.dl-teach p { font-size: 11.5px; line-height: 1.55; color: #c8cfda; margin: 0; }

.dl-btn {
    display: block; width: 100%; margin-top: 12px; cursor: pointer;
    background: #26408b; color: #fff; border: 0; border-radius: 10px;
    padding: 11px; font: 600 12.5px/1 'Inter', system-ui, sans-serif;
    transition: background .16s;
}
.dl-btn:hover { background: #1d3272; }
.dl-btn:disabled { opacity: .5; cursor: default; }
.dl-btn:focus-visible { outline: 2px solid #26408b; outline-offset: 2px; }
.dl-btn-quiet { background: #fff; color: #6b7280; border: 1px solid var(--ctrl-border, #e0e0e0); font-weight: 500; margin-top: 6px; padding: 9px; }
.dl-btn-quiet:hover { background: #f7fafe; color: #26408b; }

/* ── verdict bar ──────────────────────────────────────────── */
.dl-verdict {
    margin-top: 12px; border-radius: 11px; padding: 11px 14px;
    font-size: 13px; color: #232e3a; border: 1px solid;
    display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
    animation: dlFade .2s ease-out;
}
.dl-verdict.is-good  { background: #f1f8f2; border-color: #cfe6d3; }
.dl-verdict.is-mixed { background: #fff8ec; border-color: #f0d9ab; }
.dl-verdict.is-bad   { background: #fdf2f2; border-color: #f0d2d2; }
.dl-vmiss { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: #c0392b; }
@keyframes dlFade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ── learn mode ───────────────────────────────────────────── */
.dl-learn-card {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 22px; align-items: center;
    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: 20px 22px; margin-bottom: 14px;
}
.dl-learn-k { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.015em; }
.dl-learn-def { font-size: 14px; color: #232e3a; margin: 0 0 8px; line-height: 1.5; }
.dl-learn-how { font-size: 13px; color: #4a5160; margin: 0 0 10px; line-height: 1.6; }
.dl-learn-how b { color: #232e3a; }
.dl-learn-tol { font-size: 12px; color: #7c828d; margin: 0; line-height: 1.6; border-left: 2px solid #e6e9ef; padding-left: 11px; }
.dl-learn-tol b { color: #d4830a; font-family: 'IBM Plex Mono', monospace; }
.dl-learn-canvas { width: 100%; height: 170px; background: #fff; border: 1px solid #ececf0; border-radius: var(--r-widget, 12px); display: block; }

.dl-learn-lede {
    background: #232e3a; color: #dfe5ee; border-radius: var(--r-card, 16px);
    padding: 22px 24px; margin-bottom: 16px;
}
.dl-learn-lede h2 { font-family: 'Fraunces', Georgia, serif; font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.dl-learn-lede p { font-size: 13.5px; line-height: 1.65; margin: 0 0 8px; max-width: 78ch; }
.dl-learn-lede p:last-child { margin-bottom: 0; }
.dl-learn-lede b { color: #F3BD5C; }

/* ── results ──────────────────────────────────────────────── */
.dl-res-top { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dl-res-tile {
    flex: 1; min-width: 190px; 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: 18px 20px;
}
.dl-res-k { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #9e9e9e; margin: 0 0 6px; }
.dl-res-n { font-family: 'Fraunces', Georgia, serif; font-size: 34px; font-weight: 700; color: #232e3a; line-height: 1; margin: 0; }
.dl-res-s { font-size: 12px; color: #8a8f99; margin: 7px 0 0; line-height: 1.5; }

.dl-heatgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 10px; margin-bottom: 18px; }
.dl-heat {
    background: #fff; border: 1px solid var(--card-border, rgba(0,0,0,.07));
    border-left-width: 3px; border-radius: var(--r-widget, 12px); padding: 13px 14px;
}
.dl-heat-sw { display: none; }
.dl-heat.is-good { border-left-color: #66bb6a; }
.dl-heat.is-mid  { border-left-color: #d4830a; }
.dl-heat.is-poor { border-left-color: #c0392b; }
.dl-heat.is-untested { border-left-color: #d5d9e0; opacity: .7; }
.dl-heat-nm  { font-family: 'Fraunces', Georgia, serif; font-size: 14px; font-weight: 600; color: #232e3a; margin: 0 0 4px; }
.dl-heat-pct { font-family: 'IBM Plex Mono', monospace; font-size: 21px; font-weight: 600; color: #232e3a; margin: 0; line-height: 1; }
.dl-heat-sub { font-size: 11px; color: #7c828d; margin: 6px 0 0; line-height: 1.45; }
.dl-heat-tol { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #a4a9b2; margin: 4px 0 0; }

.dl-res-actions { display: flex; gap: 10px; }
.dl-res-actions .dl-btn { width: auto; margin-top: 0; padding: 11px 22px; }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 980px) {
    .dl-body { flex-direction: column; }
    .dl-rail { width: auto; border-left: 0; border-top: 1px solid #eceef2; }
    .dl-learn-card { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
    .dl-wrap { padding: 16px 14px 44px; }
    .dl-title { font-size: 24px; }
    .dl-modes { margin-left: 0; width: 100%; }
    .dl-mode { flex: 1; }
    #dlWork, #dlOverlay { height: 256px; }
}

@media (prefers-reduced-motion: reduce) {
    .dl-stage, .dl-mode, .dl-btn { transition: none; }
    .dl-verdict { animation: none; }
}

/* ── lead switcher ────────────────────────────────────────── */
/* QTDB is 2-lead and the annotation is one time for the record, so switching
   is purely a viewing aid: the student's markers do not move. */
.dl-workhead { display: flex; align-items: center; gap: 12px; margin: 0 0 7px; }
.dl-leads { margin-left: auto; display: flex; gap: 4px; }
/* One segmented control, matching the Learn/Practice toggle at the top of the
   page. Each segment previews its own lead so the choice is visible before it
   is made. */
.dl-leads {
    margin-left: auto; display: flex; gap: 3px;
    background: #f1f3f7; border: 1px solid #e6e9ef; border-radius: 10px; padding: 3px;
}
.dl-lead {
    cursor: pointer; border: 1px solid transparent; background: transparent;
    color: #6b7280; border-radius: 7px; padding: 3px 9px 3px 7px;
    display: flex; align-items: center; gap: 7px;
    transition: background .16s, color .16s, box-shadow .16s;
}
.dl-lead:hover { background: rgba(255,255,255,.85); color: #26408b; }
.dl-lead.is-on {
    background: #26408b; color: #fff;
    box-shadow: 0 1px 3px rgba(38,64,139,.28);
}
.dl-lead:focus-visible { outline: 2px solid #26408b; outline-offset: 2px; }
.dl-leadspark { width: 46px; height: 17px; display: block; flex: none; }
.dl-leadname { font: 600 10.5px/1 'IBM Plex Mono', monospace; letter-spacing: .02em; }

.dl-kbd {
    font: 600 9.5px/1 'IBM Plex Mono', monospace; color: #5d6470;
    background: #fff; border: 1px solid #dfe3ea; border-bottom-width: 2px;
    border-radius: 4px; padding: 2px 4px; text-transform: none; letter-spacing: 0;
}

/* ── empty state ──────────────────────────────────────────── */
/* Beats are admin-curated; the Lab shows nothing until they are approved. */
.dl-empty-box {
    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: 40px 32px; text-align: center;
}
.dl-empty-t { font-family: 'Fraunces', Georgia, serif; font-size: 19px; font-weight: 600; color: #232e3a; margin: 0 0 8px; }
.dl-empty-p { font-size: 13.5px; line-height: 1.6; color: #6b7280; margin: 0 auto; max-width: 60ch; }