/* ==========================================================================
   teacher-library.css — the Skills library and MAP tests screens of the
   teacher view (owner request 2026-09-24). Built only from the teacher.css
   tokens (--tv-*) and components (.tv-card, .tv-btn, .tv-seg, .tv-check ...),
   so both screens read exactly like Send a skill set and Print worksheets:
   one accent, neutral surfaces, no gradients, no emoji, 44px targets.

   Scoped to #teacherApp (.tvl-* library, .tvm-* MAP). The legacy Skills
   Navigator and MAP selector keep their own stylesheets for pupils. The
   examples are the shared previews of teacher-preview.js (.tvp-frame): the
   black-and-white paper cell, paper-white in both themes.
   ========================================================================== */

/* ---------------------------------------------------------------- Skills library */

.tvl-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px 260px;
    gap: 12px;
    align-items: center;
}
.tvl-bar .tv-input, .tvl-bar .tv-select { height: 44px; }
.tvl-head-tools { flex-wrap: nowrap; gap: 12px; }
.tvl-head-tools .tv-btn-ghost { height: 44px; }
.tvl-view .tvp-viewseg > button { height: 44px; min-width: 44px; }
.tvl-results .tv-card-head { min-height: 60px; }

.tvl-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    gap: 24px;
    align-items: start;
}

.tvl-results-body { padding: 8px 12px 16px; }

.tvl-group + .tvl-group { margin-top: 8px; border-top: 1px solid var(--tv-rule); padding-top: 8px; }
.tvl-group-h {
    margin: 0; padding: 12px 12px 4px;
    font-size: 14px; line-height: 20px; font-weight: 700; color: var(--tv-text);
}
.tvl-list { list-style: none; margin: 0; padding: 0; }
.tvl-cat {
    padding: 12px 12px 4px;
    font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tv-caption);
}
.tvl-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; min-height: 44px; padding: 0 12px; border-radius: 8px;
    border: 1px solid transparent; background: transparent; color: var(--tv-text);
    font-size: 14px; line-height: 20px; font-weight: 600; text-align: left; cursor: pointer;
}
.tvl-row:hover { background: var(--tv-subtle-2); }
.tvl-row[aria-current="true"] { background: var(--tv-accent-tint); color: var(--tv-accent); }
.tvl-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvl-row-level { flex: none; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tv-caption); font-variant-numeric: tabular-nums; }
.tvl-row[aria-current="true"] .tvl-row-level { color: var(--tv-accent); }

/* Thumbnails: a small paper cell above the name. */
.tvl-thumbs {
    list-style: none; margin: 0; padding: 8px 4px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px;
}
.tvl-thumb {
    display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%;
    padding: 8px 8px 12px; border-radius: 10px; cursor: pointer; text-align: left;
    border: 1px solid var(--tv-border); background: var(--tv-surface); color: var(--tv-text);
}
.tvl-thumb:hover { border-color: var(--tv-control-soft); }
.tvl-thumb[aria-current="true"] { border: 1.5px solid var(--tv-selected); }
.tvl-thumb .tvp-thumb { display: block; margin-bottom: 8px; }
.tvl-thumb-name { font-size: 14px; line-height: 20px; font-weight: 600; padding: 0 4px; }
.tvl-thumb-meta { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tv-caption); padding: 0 4px; }
.tvl-more { display: flex; justify-content: center; padding: 16px 0 4px; }

/* Detail: the selected skill. */
.tvl-detail { position: sticky; top: 24px; gap: 20px; }
.tvl-detail-head { display: flex; flex-direction: column; gap: 4px; }
.tvl-detail-empty { padding: 64px 16px; }
.tvl-prev { display: flex; flex-direction: column; gap: 8px; }
.tvl-prev-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tvl-prev-head .tv-btn-ghost { height: 44px; }
.tvl-stage { height: 280px; }
.tvl-actions { display: flex; flex-direction: column; gap: 8px; }
.tvl-actions-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; }
.tvl-actions-row .tv-btn { width: 100%; min-width: 0; padding: 0 12px; }
.tvl-actions-row .tv-btn span { overflow: hidden; text-overflow: ellipsis; }
.tvl-actions-row .tv-menu-wrap { display: block; }
.tvl-more-btn { padding: 0 !important; }
.tvl-actions-row .tv-btn[aria-pressed="true"] { border-color: var(--tv-selected); }
.tvl-actions .tv-menu button { height: 44px; }
/* The actions sit at the foot of the panel: the menu opens upwards, so it is never below the fold. */
.tvl-actions .tv-menu { top: auto; bottom: calc(100% + 4px); }

/* ---------------------------------------------------------------- MAP tests */

.tvm-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
    gap: 24px;
    align-items: start;
}
.tvm-grid .tv-seg > button { height: 44px; }
.tvm-help { margin-top: 8px; }
.tvm-count { max-width: 200px; }
.tvm-count .tv-select { height: 44px; }
.tvm-domains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.tvm-check { min-height: 44px; }
.tvm-bands-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tvm-bands-head .tv-btn-sm { height: 44px; }
.tvm-bands-panel { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.tvm-bands { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.tvm-band {
    height: 44px; padding: 0 8px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--tv-control-soft); background: var(--tv-surface); color: var(--tv-text);
    font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.tvm-band:hover { border-color: var(--tv-control); }
.tvm-band[aria-pressed="true"] { border-color: var(--tv-selected); background: var(--tv-selected); color: var(--tv-on-selected); font-weight: 700; }
.tvm-bands-panel .tv-btn-ghost { height: 44px; }
.tvm-go { display: flex; flex-direction: column; gap: 8px; }
#teacherApp .tvm-grid .tv-btn-ghost { height: 44px; }
#teacherApp .tvm-grid .tv-link { min-height: 24px; }
.tvm-sample-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tvm-sample-head .tv-select { height: 44px; min-width: 150px; }
.tvm-sample { height: 240px; }
.tvm-sample-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tvm-sample-foot .tv-cap { min-width: 0; }

/* ---------------------------------------------------------------- narrower screens */

@media (max-width: 1360px) {
    .tvl-bar { grid-template-columns: minmax(0, 1fr) 160px 220px; }
}

@media (max-width: 1100px) {
    .tvl-grid, .tvm-grid { grid-template-columns: minmax(0, 1fr); }
    /* The detail sits above the list, so a choice is seen at once. */
    .tvl-detail { position: static; order: -1; }
    .tvl-detail.is-empty { display: none; }
}

@media (max-width: 900px) {
    .tvl-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .tvl-bar-search { grid-column: 1 / -1; }
    .tvm-domains { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- Standards (2026-09-25)
   Quiet code tags in the skill detail (descriptor on hover / focus), the standard-code search
   banner, and the Standards coverage view (teacher-standards.js). Neutral, one accent, the
   same tokens as the rest of the library. */

.tvl-std { display: flex; flex-direction: column; gap: 6px; }
.tvl-std-row { position: relative; display: flex; align-items: flex-start; gap: 8px; }
.tvl-std-k {
    flex: none; width: 36px; padding-top: 3px;
    font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .04em; color: var(--tv-caption);
}
.tvl-std .tv-cap .tvl-std-k { display: inline; width: auto; padding: 0; margin-right: 4px; }
.tvl-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.tvl-tag {
    display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px;
    border: 1px solid var(--tv-border); background: var(--tv-page); color: var(--tv-text-2, var(--tv-text));
    font-size: 12px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
    cursor: default;
}
.tvl-tag:hover { border-color: var(--tv-control-soft); }
.tvl-tag:focus-visible { outline: 2px solid var(--tv-accent); outline-offset: 1px; }
/* The descriptor opens under the whole row, full width of the panel, so it never runs off-screen. */
.tvl-tip {
    display: none; position: absolute; z-index: 30; left: 44px; right: 0; top: calc(100% + 6px);
    padding: 10px 12px; border-radius: 8px; border: 1px solid var(--tv-border);
    background: var(--tv-surface); color: var(--tv-text); box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
    font-size: 13px; line-height: 18px; font-weight: 500;
}
.tvl-tip b { font-weight: 700; margin-right: 4px; }
.tvl-tag:hover + .tvl-tip, .tvl-tag:focus + .tvl-tip { display: block; }

.tvl-std-banner {
    display: flex; flex-direction: column; gap: 2px;
    margin: 4px 0 8px; padding: 12px; border-radius: 8px; background: var(--tv-subtle);
}
.tvl-std-banner-code { margin: 0; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--tv-text); }
.tvl-std-banner-code .tv-muted { font-weight: 500; }
.tvl-std-banner-text { margin: 0; font-size: 14px; line-height: 20px; color: var(--tv-text); }

.tvl-std-toggle { height: 44px; }
.tvl-std-toggle.is-back svg { transform: scaleX(-1); }
.tvl-std-view { display: flex; flex-direction: column; gap: 16px; }
.tvl-std-view[hidden], .tvl-bar[hidden], .tvl-grid[hidden] { display: none; }

.tvs-bar { display: grid; grid-template-columns: minmax(0, 320px) 180px minmax(0, 360px); gap: 12px; align-items: center; }
.tvs-bar .tv-select { height: 44px; }
.tvs-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.tvs-body { padding: 4px 12px 16px; }
.tvs-group + .tvs-group { border-top: 1px solid var(--tv-rule); margin-top: 8px; }
.tvs-group-h { margin: 0; padding: 16px 12px 4px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--tv-text); }
.tvs-list { list-style: none; margin: 0; padding: 0; }
.tvs-dom { padding: 12px 12px 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tv-caption); }
.tvs-row {
    display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 12px; align-items: start;
    padding: 10px 12px; border-radius: 8px;
}
.tvs-row + .tvs-row { border-top: 1px solid var(--tv-rule-soft); }
.tvs-row.is-part .tvs-code { padding-left: 12px; }
.tvs-code { font-size: 14px; line-height: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tv-text); white-space: nowrap; }
.tvs-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tvs-text { margin: 0; font-size: 14px; line-height: 20px; color: var(--tv-text); }
.tvs-skills { margin: 0; font-size: 13px; line-height: 20px; color: var(--tv-caption); }
.tvs-skills .tv-link { font-size: 13px; line-height: 20px; font-weight: 600; text-align: left; }
/* R2: the skills for a standard are a list, one per line, each link a full 44 px target. */
ul.tvs-skills { list-style: none; padding: 0; display: flex; flex-direction: column; }
ul.tvs-skills > li { display: flex; align-items: center; min-height: 32px; }
#teacherApp ul.tvs-skills .tv-link { min-width: 44px; min-height: 44px; margin: -6px 0; padding: 0 4px 0 0; }
ul.tvs-skills > li.tv-muted { min-height: 24px; }
.tvs-state {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    font-size: 12px; line-height: 20px; font-weight: 600; color: var(--tv-caption);
}
.tvs-row.is-gap .tvs-state { color: var(--tv-text); }
.tvs-row.is-gap .tvs-state span {
    padding: 0 8px; border-radius: 6px; border: 1px solid var(--tv-control-soft); background: var(--tv-page);
}

@media (max-width: 1100px) {
    .tvs-bar { grid-template-columns: minmax(0, 1fr) 160px; }
    .tvs-status { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .tvs-bar { grid-template-columns: minmax(0, 1fr); }
    .tvs-row { grid-template-columns: minmax(0, 1fr) auto; }
    .tvs-code { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- Sticky search + list previews
   (owner request 2026-09-25). Additive: these rules follow and override the ones above.

   1. The search bar and its Level / Domain filters stay pinned to the top of the window while the
      library scrolls, so a teacher never scrolls back up to search again. The bar bleeds to the
      workspace edges (the .tv-main padding) on the page colour, so rows slide cleanly under it;
      the negative block margin keeps the screen's 24px rhythm unchanged. It draws a bottom rule
      only once content is under it (.is-stuck, set by teacher-library.js). --tvl-bar-h (its
      height, measured by teacher-library.js) sets the sticky detail panel's offset and the
      document's scroll-padding, so a focused or scrolled-to row is never hidden under the bar.
   2. List rows carry the floating skill preview (teacher-preview.js). The row <li> is the
      trigger; on a touch screen the (i) button sits at the row's end as a 44px target. */

.tvl-bar {
    position: sticky; top: 0; z-index: 20;
    margin: -12px -40px; padding: 12px 40px;
    background: var(--tv-page);
    border-bottom: 1px solid transparent;
}
.tvl-bar.is-stuck {
    border-bottom-color: var(--tv-border);
    box-shadow: 0 4px 12px rgba(20, 20, 30, .06);
}
html.dark body.teacher-mode .tvl-bar.is-stuck { box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
html:has(#teacherMain .tv-screen.is-active[data-screen="library"] .tvl-bar:not([hidden])) {
    scroll-padding-top: calc(var(--tvl-bar-h, 68px) + 8px);
}
.tvl-detail { top: calc(var(--tvl-bar-h, 68px) + 16px); }

.tvl-li { display: flex; align-items: center; gap: 4px; }
.tvl-li > .tvl-row { flex: 1; min-width: 0; }
.tvl-li > .tvp-info { width: 44px; height: 44px; }

@media (max-width: 1100px) {
    .tvl-detail { top: auto; }
}
@media (max-width: 1023px) {
    .tvl-bar { margin: -12px -24px; padding: 12px 24px; }
}
@media (max-width: 600px) {
    .tvl-bar { gap: 8px; margin: -8px -24px; padding: 8px 24px; }
}