/* ==========================================================================
   Assess search pages (New UI only - every rule is under body.nui-on)
   Shared language for Find Items (_assess/items/workspace/...nui.html) and
   Find Assessments (_assess/assessments/catalog/...nui.html): scope tabs,
   a left filter rail with per-option counts, a chips/sort row, and a
   windowed list of result rows. Tokens come from the dashboard tracker
   sheet (new-ui-dashboard-card.css declares --dc-* on .dc-page; the page
   root carries .asr-page.dc-page). Brand: Montserrat, blue #0074C5
   primary, teal #00AEC4 for the Add action. No page title block - the
   breadcrumb bar already names the page.
   ========================================================================== */

.nui-on .asr-page {
    --asr-blue: var(--aa-blue, #0074C5);
    --asr-blue-soft: rgba(0, 116, 197, .10);
    --asr-teal: var(--aa-teal, #00AEC4);
    --asr-teal-soft: rgba(0, 174, 196, .12);
    --asr-ink: var(--dc-ink, #222831);
    --asr-muted: var(--dc-muted, #7B8E92);
    --asr-text: var(--aa-grey-700, #4A5358);
    --asr-border: var(--dc-border, #E3E8EB);
    --asr-bg: var(--aa-off-white, #F7F9FA);
    --asr-white: #fff;
    --asr-radius: 14px;
    --asr-radius-sm: 8px;
    --asr-row-h: 128px;
    --asr-font: var(--font-display, "Montserrat", sans-serif);
    font-family: var(--asr-font);
    color: var(--asr-ink);
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: calc(100vh - 48px); /* fills the viewport below the 48px topbar so .asr-list is the scroller */
    min-height: 0;
    padding: 12px 18px 18px;
}

/* inside a padded .main-container (Items Workspace) the viewport-bound page
   has to give the wrapper's 18px top + bottom padding back */
.nui-on .main-container > .asr-page { height: calc(100vh - 48px - 36px); }

/* ---- top row: scope tabs left, search + primary action right ---------- */
.nui-on .asr-top {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
    min-width: 0;
}
.nui-on .asr-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--asr-white);
    border: 1px solid var(--asr-border);
    border-radius: 10px;
    flex: 0 0 auto;
}
.nui-on .asr-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--asr-text);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    background: transparent;
}
.nui-on .asr-tab > i { font-size: 13px; color: var(--asr-muted); }
.nui-on .asr-tab:hover { background: var(--asr-bg); color: var(--asr-ink); }
.nui-on .asr-tab.active {
    background: var(--asr-blue-soft);
    border-color: rgba(0, 116, 197, .25);
    color: var(--asr-blue);
}
.nui-on .asr-tab.active > i { color: var(--asr-blue); }
.nui-on .asr-top-spacer { flex: 1 1 auto; min-width: 0; }
.nui-on .asr-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 460px;
    min-width: 160px;
    height: 38px;
    padding: 0 12px;
    background: var(--asr-white);
    border: 1px solid var(--asr-border);
    border-radius: 10px;
}
.nui-on .asr-search:focus-within { border-color: var(--asr-blue); box-shadow: 0 0 0 3px var(--asr-blue-soft); }
.nui-on .asr-search > i { color: var(--asr-muted); font-size: 13px; }
.nui-on .asr-search > input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--asr-font);
    font-size: 13px;
    color: var(--asr-ink);
}
.nui-on .asr-search > input::placeholder { color: var(--asr-muted); }
/* Exact match: a small toggle chip inside the search box (right end) */
.nui-on .asr-exact {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 24px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid var(--asr-border);
    border-radius: 12px;
    background: var(--asr-white);
    color: var(--asr-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.nui-on .asr-exact input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.nui-on .asr-exact:hover { border-color: var(--asr-blue); color: var(--asr-blue); }
.nui-on .asr-exact.is-on { background: var(--asr-blue-soft); border-color: var(--asr-blue); color: var(--asr-blue); }
.nui-on .asr-exact:focus-within { outline: 2px solid var(--asr-blue); outline-offset: 1px; }
.nui-on .asr-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    font-family: var(--asr-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid var(--asr-border);
    background: var(--asr-white);
    color: var(--asr-text);
    text-decoration: none;
}
.nui-on .asr-btn:hover { border-color: var(--asr-blue); color: var(--asr-blue); text-decoration: none; }
.nui-on .asr-btn-primary { background: var(--asr-blue); border-color: var(--asr-blue); color: #fff; }
.nui-on .asr-btn-primary:hover { background: #0063a8; border-color: #0063a8; color: #fff; }
/* anchors styled as buttons: new-ui-pages.css paints every #AppContainer a[href]
   brand blue with id-level specificity, so these need !important */
.nui-on .asr-page a.asr-btn, .nui-on .asr-page a.asr-btn:hover, .nui-on .asr-page a.asr-btn:focus { color: var(--asr-text) !important; text-decoration: none; }
.nui-on .asr-page a.asr-btn-primary, .nui-on .asr-page a.asr-btn-primary:hover, .nui-on .asr-page a.asr-btn-primary:focus { color: #fff !important; }
.nui-on .asr-page a.asr-btn-teal, .nui-on .asr-page a.asr-btn-teal:hover, .nui-on .asr-page a.asr-btn-teal:focus { color: #00879A !important; }
.nui-on .asr-btn[disabled] { opacity: .5; pointer-events: none; }
.nui-on .asr-btn-sm { height: 30px; padding: 0 11px; font-size: 12px; border-radius: 8px; }
.nui-on .asr-btn-teal { background: var(--asr-teal-soft); border-color: transparent; color: #00879A; }
.nui-on .asr-btn-teal:hover { background: rgba(0, 174, 196, .22); color: #00707f; border-color: transparent; }

/* ---- layout ------------------------------------------------------------ */
.nui-on .asr-layout {
    display: flex;
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
}
.nui-on .asr-rail {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    background: var(--asr-white);
    border: 1px solid var(--asr-border);
    border-radius: var(--asr-radius);
    min-height: 0;
    position: relative;      /* holds the .nk-edge-toggle on its right edge */
    transition: flex-basis .18s ease;
}
/* collapsed: a 44px strip (icon + vertical "Filters"); the filter markup
   stays mounted so select2 widgets and selections survive */
.nui-on .asr-rail.is-collapsed { flex-basis: 44px; }
.nui-on .asr-rail.is-collapsed > :not(.nk-edge-toggle):not(.asr-rail-strip) { display: none; }
.nui-on .asr-rail-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 44px 0 14px;
    height: 100%;
    color: var(--asr-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
}
.nui-on .asr-rail-strip > i { color: var(--asr-muted); }
.nui-on .asr-rail-strip > span { writing-mode: vertical-rl; transform: rotate(180deg); }
.nui-on .asr-rail-strip:hover, .nui-on .asr-rail-strip:hover > i { color: var(--asr-blue); }
.nui-on .asr-results {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--asr-white);
    border: 1px solid var(--asr-border);
    border-radius: var(--asr-radius);
    min-height: 0;
    overflow: hidden;
}

/* ---- rail -------------------------------------------------------------- */
.nui-on .asr-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 8px;
}
.nui-on .asr-rail-head > strong { font-size: 13px; font-weight: 700; }
/* Search lives with the filters: Filters ... Clear all [Search] */
.nui-on .asr-rail-head { gap: 10px; padding-right: 22px; } /* clear the edge toggle */
.nui-on .asr-rail-head > strong { margin-right: auto; }
.nui-on .asr-link { font-size: 12px; color: var(--asr-blue); cursor: pointer; text-decoration: none; }
.nui-on .asr-link:hover { text-decoration: underline; color: var(--asr-blue); }
.nui-on .asr-rail-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 6px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--asr-border);
    border-radius: 8px;
    background: var(--asr-bg);
}
.nui-on .asr-rail-search > i { color: var(--asr-muted); font-size: 12px; }
.nui-on .asr-rail-search > input { flex: 1; border: 0; outline: 0; background: transparent; font-family: var(--asr-font); font-size: 12px; min-width: 0; }
.nui-on .asr-rail-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 6px 10px; }
.nui-on .asr-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--asr-text);
}
.nui-on .asr-section { border-top: 1px solid var(--asr-border); }
.nui-on .asr-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--asr-ink);
    cursor: pointer;
    user-select: none;
}
.nui-on .asr-section-head > .asr-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--asr-blue);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nui-on .asr-section-head > .asr-chev { margin-left: auto; font-size: 11px; color: var(--asr-muted); transition: transform .15s; }
.nui-on .asr-section:not(.open) > .asr-section-head > .asr-chev { transform: rotate(-90deg); } /* right closed, down open (system rule) */
.nui-on .asr-options { padding: 0 4px 8px; }
.nui-on .asr-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 6px;
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--asr-text);
    cursor: pointer;
}
.nui-on .asr-option:hover { background: var(--asr-bg); }
.nui-on .asr-option > input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--asr-blue);
    cursor: pointer;
}
.nui-on .asr-option > .asr-option-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nui-on .asr-option.checked > .asr-option-label { color: var(--asr-ink); font-weight: 600; }
.nui-on .asr-count { font-size: 11px; color: var(--asr-muted); font-variant-numeric: tabular-nums; }
.nui-on .asr-option-more { padding: 4px 6px; }

/* ---- results head: chips + total + sort --------------------------------- */
.nui-on .asr-results-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px solid var(--asr-border);
}
.nui-on .asr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 13px;
    background: var(--asr-blue-soft);
    color: var(--asr-blue);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.nui-on .asr-chip > i { font-size: 11px; cursor: pointer; opacity: .8; }
.nui-on .asr-chip > i:hover { opacity: 1; }
/* status quick filters: Grading Center chip language - soft tint of the
   status colour, colour dot, label; solid tint + ring when applied */
.nui-on .asr-chip-status {
    --c: var(--chip-color, var(--asr-blue));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 13px;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--c) 10%, #fff);
    color: color-mix(in srgb, var(--c) 75%, #222831);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.nui-on .asr-chip-status:hover { background: color-mix(in srgb, var(--c) 16%, #fff); }
.nui-on .asr-chip-status.active { background: color-mix(in srgb, var(--c) 20%, #fff); border-color: var(--c); }
.nui-on .asr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--asr-blue)); flex: 0 0 auto; }
.nui-on .asr-total { margin-left: auto; font-size: 12px; color: var(--asr-muted); white-space: nowrap; }
.nui-on .asr-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--asr-text); }
.nui-on .asr-sort select, .nui-on .asr-results-head select.form-control {
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--asr-border);
    border-radius: 8px;
    background: var(--asr-white);
    font-family: var(--asr-font);
    font-size: 12px;
    color: var(--asr-ink);
    width: auto;
}
.nui-on .asr-head-actions { display: inline-flex; gap: 6px; }

/* ---- list (windowed scroller) ------------------------------------------- */
.nui-on .asr-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    padding: 8px 10px 10px;
}
.nui-on .asr-spacer { display: block; width: 100%; }
.nui-on .asr-row {
    display: flex;
    gap: 14px;
    align-items: stretch;
    height: var(--asr-row-h);
    box-sizing: border-box;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: var(--asr-white);
    border: 1px solid var(--asr-border);
    border-radius: 12px;
    position: relative;
    transition: box-shadow .12s, border-color .12s;
}
.nui-on .asr-row:hover { border-color: #C9D4DA; box-shadow: var(--shadow-sm, 0 1px 2px rgba(34, 40, 49, .06), 0 2px 8px rgba(34, 40, 49, .06)); }
.nui-on .asr-row.selected { border-color: rgba(0, 116, 197, .45); background: #F5FAFF; }
.nui-on .asr-row.expanded { height: auto; }
.nui-on .asr-check { flex: 0 0 auto; align-self: flex-start; margin-top: 2px; }
.nui-on .asr-check > input { width: 15px; height: 15px; margin: 0; accent-color: var(--asr-blue); cursor: pointer; }
.nui-on .asr-tile {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    background: var(--tile-bg, var(--asr-blue-soft));
    color: var(--tile-fg, var(--asr-blue));
    align-self: flex-start;
}
/* tile palette keyed by type via class */
.nui-on .asr-tile.t-blue  { --tile-bg: rgba(0, 116, 197, .12); --tile-fg: #0074C5; }
.nui-on .asr-tile.t-teal  { --tile-bg: rgba(0, 174, 196, .14); --tile-fg: #00879A; }
.nui-on .asr-tile.t-green { --tile-bg: rgba(46, 160, 67, .14);  --tile-fg: #2E8B57; }
.nui-on .asr-tile.t-amber { --tile-bg: rgba(255, 171, 0, .16);  --tile-fg: #B26B00; }
.nui-on .asr-tile.t-violet{ --tile-bg: rgba(113, 76, 212, .14); --tile-fg: #6A3FC9; }
.nui-on .asr-tile.t-rose  { --tile-bg: rgba(226, 54, 112, .13); --tile-fg: #C8275C; }
.nui-on .asr-tile.t-grey  { --tile-bg: var(--asr-bg);          --tile-fg: var(--asr-muted); }
.nui-on .asr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nui-on .asr-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nui-on .asr-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--asr-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.nui-on .asr-title:hover { color: var(--asr-blue); }
.nui-on .asr-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--asr-muted); white-space: nowrap; }
.nui-on .asr-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--asr-muted); white-space: nowrap; overflow: hidden; }
.nui-on .asr-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.nui-on .asr-meta b { color: var(--asr-text); font-weight: 600; }
.nui-on .asr-desc {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--asr-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nui-on .asr-tags { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; margin-top: auto; }
.nui-on .asr-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 11px;
    background: var(--asr-bg);
    border: 1px solid var(--asr-border);
    font-size: 11px;
    font-weight: 600;
    color: var(--asr-text);
    white-space: nowrap;
}
.nui-on .asr-tag.std { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
.nui-on .asr-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.nui-on .asr-pill.type { background: var(--asr-blue-soft); color: var(--asr-blue); }
.nui-on .asr-pill.easy { background: rgba(46, 160, 67, .14); color: #2E8B57; }
.nui-on .asr-pill.medium { background: rgba(255, 171, 0, .16); color: #B26B00; }
.nui-on .asr-pill.hard { background: rgba(226, 54, 112, .13); color: #C8275C; }
.nui-on .asr-pill.muted { background: var(--asr-bg); color: var(--asr-text); border: 1px solid var(--asr-border); }
.nui-on .asr-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; }
.nui-on .asr-thumb {
    width: 96px;
    height: 64px;
    border-radius: 8px;
    border: 1px solid var(--asr-border);
    background: var(--asr-bg) center / cover no-repeat;
    object-fit: cover;
}
.nui-on .asr-actions { display: inline-flex; align-items: center; gap: 6px; }
.nui-on .asr-more {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--asr-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.nui-on .asr-more:hover { background: var(--asr-bg); color: var(--asr-ink); }
.nui-on .asr-row .dropdown-menu { font-family: var(--asr-font); font-size: 12.5px; border-radius: 8px; border: 1px solid var(--asr-border); box-shadow: 0 6px 20px rgba(34, 40, 49, .12); }
.nui-on .asr-row .dropdown-menu > li > a { padding: 7px 14px; cursor: pointer; }
.nui-on .asr-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.nui-on .asr-preview {
    margin: -4px 0 8px;
    padding: 12px 14px 14px;
    border: 1px solid var(--asr-border);
    border-radius: 12px;
    background: var(--asr-white);
}
.nui-on .asr-loading-more { text-align: center; padding: 10px; font-size: 12px; color: var(--asr-muted); }
/* Windowed lists: the browser's scroll anchoring would nudge scrollTop whenever
   rows are swapped and the spacers resize, fighting the window math (jitter at
   the bottom of the list). The footer has a fixed height so "Loading more"
   appearing/disappearing never changes the list's scroll height. */
.nui-on .asr-list { overflow-anchor: none; }
.nui-on .asr-list-foot { height: 36px; display: flex; align-items: center; justify-content: center; }
.nui-on .asr-list-foot .asr-loading-more { padding: 0; }
.nui-on .asr-back-top { position: absolute; right: 24px; bottom: 18px; z-index: 3; }

/* ---- skeleton + empty ---------------------------------------------------- */
.nui-on .asr-skel-row { height: var(--asr-row-h); box-sizing: border-box; margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--asr-border); border-radius: 12px; display: flex; gap: 14px; }
.nui-on .asr-skel { background: linear-gradient(90deg, #EEF1F2 0%, #F7F9FA 50%, #EEF1F2 100%); background-size: 200% 100%; animation: asr-shimmer 1.2s linear infinite; border-radius: 6px; }
.nui-on .asr-skel.tile { width: 44px; height: 44px; border-radius: 10px; flex: 0 0 44px; }
.nui-on .asr-skel.line { height: 12px; margin-bottom: 8px; }
.nui-on .asr-skel.w60 { width: 60%; } .nui-on .asr-skel.w40 { width: 40%; } .nui-on .asr-skel.w90 { width: 90%; }
@keyframes asr-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.nui-on .asr-empty { padding: 48px 20px; text-align: center; color: var(--asr-muted); font-size: 13px; }
.nui-on .asr-empty > i { display: block; font-size: 28px; margin-bottom: 10px; color: var(--asr-border); }

@media (max-width: 1200px) {
    .nui-on .asr-rail { flex-basis: 230px; }
    .nui-on .asr-thumb { display: none; }
    .nui-on .asr-tab > span { display: none; }
}

/* ---- view toggle: Cards / Rows / Compact ---------------------------------
   Kept per tab in sessionStorage by the page controller. Line heights here
   must match VIEW_MODES in the controller (windowed list math):
   rows 128 + 8 margin, compact 44 + 4, cards 184 + 12. */
.nui-on .asr-view {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--asr-white);
    border: 1px solid var(--asr-border);
    border-radius: 8px;
    flex: 0 0 auto;
}
.nui-on .asr-view > button {
    width: 30px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--asr-muted);
    font-size: 12px;
    cursor: pointer;
}
.nui-on .asr-view > button:hover { color: var(--asr-ink); background: var(--asr-bg); }
.nui-on .asr-view > button.is-active { background: var(--asr-blue-soft); color: var(--asr-blue); }
.nui-on .asr-view > button:focus-visible { outline: 2px solid var(--asr-blue); outline-offset: 1px; }

/* compact: one 44px line per item - title, meta, actions */
.nui-on .asr-view-compact .asr-row {
    height: 44px;
    margin-bottom: 4px;
    padding: 6px 12px;
    gap: 10px;
    align-items: center;
    border-radius: 8px;
}
.nui-on .asr-view-compact .asr-row.expanded { height: 44px; }
.nui-on .asr-view-compact .asr-check { align-self: center; margin-top: 0; }
.nui-on .asr-view-compact .asr-tile { flex-basis: 28px; width: 28px; height: 28px; font-size: 13px; border-radius: 7px; align-self: center; }
.nui-on .asr-view-compact .asr-main { flex-direction: row; align-items: center; gap: 12px; }
.nui-on .asr-view-compact .asr-title-row { flex: 1 1 auto; }
.nui-on .asr-view-compact .asr-meta { flex: 0 1 auto; min-width: 0; text-overflow: ellipsis; }
.nui-on .asr-view-compact .asr-desc,
.nui-on .asr-view-compact .asr-tags,
.nui-on .asr-view-compact .asr-thumb,
.nui-on .asr-view-compact .asr-pill.muted { display: none; }
.nui-on .asr-view-compact .asr-side { flex-direction: row; align-items: center; }
.nui-on .asr-view-compact .asr-btn-sm { height: 28px; }

/* cards: a grid, columns set by the controller as --asr-cols */
.nui-on .asr-list.asr-view-cards {
    display: grid;
    grid-template-columns: repeat(var(--asr-cols, 3), minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 0;
    align-content: start;
}
.nui-on .asr-view-cards > :not(.asr-cell) { grid-column: 1 / -1; }
/* Card: tile + content on top (title 2 lines, type + ID, one meta line, one
   line of tags), actions along the bottom. Height must match the cards
   lineHeight in both controllers (184 + 12 gap = 196). Works for both row
   shapes: Find Items keeps its title inside .asr-title-row (pulled to the
   front), Find Assessments has .asr-title as a sibling. */
.nui-on .asr-view-cards .asr-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "check tile main" "side side side";
    gap: 10px 10px;
    height: 184px;
    margin-bottom: 12px;
    padding: 12px 12px 10px;
}
.nui-on .asr-view-cards .asr-check { grid-area: check; margin-top: 4px; }
.nui-on .asr-view-cards .asr-tile { grid-area: tile; flex: none; width: 30px; height: 30px; font-size: 13px; border-radius: 8px; }
.nui-on .asr-view-cards .asr-main { grid-area: main; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
.nui-on .asr-view-cards .asr-title-row { order: 2; flex-wrap: wrap; row-gap: 4px; column-gap: 6px; }
.nui-on .asr-view-cards .asr-main > .asr-title,
.nui-on .asr-view-cards .asr-title-row > .asr-title {
    order: -1;
    flex: 1 1 100%;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.3;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nui-on .asr-view-cards .asr-main > .asr-title { order: 1; }
.nui-on .asr-view-cards .asr-id { font-size: 10.5px; }
.nui-on .asr-view-cards .asr-pill { height: 18px; padding: 0 7px; font-size: 10.5px; }
.nui-on .asr-view-cards .asr-pill.muted { display: none; }
.nui-on .asr-view-cards .asr-meta { order: 3; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nui-on .asr-view-cards .asr-desc { display: none; }
.nui-on .asr-view-cards .asr-tags { order: 4; flex-wrap: nowrap; overflow: hidden; max-height: 20px; margin-top: 0; }
.nui-on .asr-view-cards .asr-tag { flex: 0 0 auto; }
.nui-on .asr-view-cards .asr-side { grid-area: side; flex-direction: row; align-items: center; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--asr-border); }
.nui-on .asr-view-cards .asr-thumb { display: none; }
.nui-on .asr-view-cards .asr-actions { gap: 6px; }

/* ---- motion ---------------------------------------------------------------
   Small and quick: results fade up on a new search (staggered over the first
   ~14 cells), filter sections open/close (ngAnimate ng-if hooks), applied
   chips and count badges pop in, skeleton rows fade in. Off for reduced motion. */
@keyframes asr-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes asr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes asr-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes asr-open { from { max-height: 0; opacity: 0; } to { max-height: 520px; opacity: 1; } }
@keyframes asr-close { from { max-height: 520px; opacity: 1; } to { max-height: 0; opacity: 0; } }

.nui-on .asr-list.is-entering .asr-cell {
    animation: asr-rise .34s cubic-bezier(.2, .7, .3, 1) backwards;
    animation-delay: calc(var(--i, 14) * 26ms);
}
.nui-on .asr-list.is-entering .asr-cell:nth-child(1) { --i: 0; }
.nui-on .asr-list.is-entering .asr-cell:nth-child(2) { --i: 1; }
.nui-on .asr-list.is-entering .asr-cell:nth-child(3) { --i: 2; }
.nui-on .asr-list.is-entering .asr-cell:nth-child(4) { --i: 3; }
.nui-on .asr-list.is-entering .asr-cell:nth-child(5) { --i: 4; }
.nui-on .asr-list.is-entering .asr-cell:nth-child(6) { --i: 5; }
.nui-on .asr-list.is-entering .asr-cell:nth-child(7) { --i: 6; }
.nui-on .asr-list.is-entering .asr-cell:nth-child(8) { --i: 7; }
.nui-on .asr-list.is-entering .asr-cell:nth-child(9) { --i: 8; }
.nui-on .asr-list.is-entering .asr-cell:nth-child(10) { --i: 9; }
.nui-on .asr-list.is-entering .asr-cell:nth-child(11) { --i: 10; }
.nui-on .asr-list.is-entering .asr-cell:nth-child(12) { --i: 11; }
.nui-on .asr-list.is-entering .asr-cell:nth-child(13) { --i: 12; }
.nui-on .asr-list.is-entering .asr-cell:nth-child(14) { --i: 13; }

.nui-on .asr-skel-row { animation: asr-fade .25s ease-out backwards; }

.nui-on .asr-options.ng-enter,
.nui-on .asr-options.ng-leave { overflow: hidden; }
.nui-on .asr-options.ng-enter { animation: asr-open .22s cubic-bezier(.2, .7, .3, 1); }
.nui-on .asr-options.ng-leave { animation: asr-close .16s ease-in; }

.nui-on .asr-chip.ng-enter,
.nui-on .asr-badge.ng-enter { animation: asr-pop .18s ease-out; }
.nui-on .asr-chip.ng-leave { animation: asr-fade .12s ease-in reverse; }

.nui-on .asr-row { transition: box-shadow .12s, border-color .12s; }
.nui-on .asr-preview { animation: asr-rise .22s ease-out backwards; }

@media (prefers-reduced-motion: reduce) {
    .nui-on .asr-list.is-entering .asr-cell,
    .nui-on .asr-skel-row,
    .nui-on .asr-options.ng-enter,
    .nui-on .asr-options.ng-leave,
    .nui-on .asr-chip.ng-enter,
    .nui-on .asr-chip.ng-leave,
    .nui-on .asr-badge.ng-enter,
    .nui-on .asr-preview { animation: none; }
}

/* ---- rail controls: switch row, form-style sections (passage, pool) ------ */
.nui-on .asr-toggle-row {
    gap: 12px;
    margin: 2px 0 6px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--asr-border);
    cursor: pointer;
}
.nui-on .asr-switch {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    position: relative;
    width: 32px;
    height: 18px;
    margin: 0;
    border-radius: 9px;
    background: var(--asr-border);
    cursor: pointer;
    transition: background .15s;
}
.nui-on .asr-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--asr-white);
    box-shadow: 0 1px 2px rgba(34, 40, 49, .25);
    transition: transform .15s;
}
.nui-on .asr-switch:checked { background: var(--asr-blue); }
.nui-on .asr-switch:checked::after { transform: translateX(14px); }
.nui-on .asr-switch:focus-visible { outline: 2px solid var(--asr-blue); outline-offset: 2px; }

.nui-on .asr-options-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 8px 12px;
}
.nui-on .asr-input {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--asr-border);
    border-radius: 8px;
    background: var(--asr-white);
    font: 400 12.5px/1 var(--asr-font);
    color: var(--asr-ink);
    box-shadow: none;
}
.nui-on .asr-input::placeholder { color: var(--asr-muted); }
.nui-on .asr-input:focus { outline: 0; border-color: var(--asr-blue); box-shadow: 0 0 0 3px var(--asr-blue-soft); }
.nui-on .asr-options-form .select2-container .select2-selection {
    min-height: 34px;
    border: 1px solid var(--asr-border);
    border-radius: 8px;
}
.nui-on .asr-btn-row { display: flex; gap: 6px; }
.nui-on .asr-btn-row > .asr-btn { flex: 1 1 0; justify-content: center; padding: 0 8px; }
.nui-on .asr-btn[disabled] { opacity: 1; background: var(--asr-bg); color: var(--asr-muted); border-color: var(--asr-border); cursor: not-allowed; }

/* ---- labelled rail fields, static legend chips -------------------------- */
.nui-on .asr-field-label { margin: 4px 0 -4px; font-size: 11.5px; font-weight: 600; color: var(--asr-text); }
.nui-on .asr-options-form > div { display: flex; flex-direction: column; gap: 8px; }
.nui-on .asr-chip-status.is-static,
.nui-on .asr-chip-status.is-static:hover { cursor: default; background: color-mix(in srgb, var(--c) 10%, #fff); }

/* ---- hierarchy tree (e.g. Standards): .asr-tree on the angular-ui-tree root,
   inside a scrolling .asr-tree-body. One row per node: chevron, optional
   classic markers (.mark-important / .mark-new keep their classic glyphs),
   monospace code (.asr-id), statement. Children indent 22px with a guide rule.
   Chevrons right closed / down open come from the markup. ------------------ */
.nui-on .asr-tree-hint {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--asr-border);
    font-size: 12px;
    color: var(--asr-muted);
}
.nui-on .asr-tree-hint i { margin-right: 4px; color: var(--asr-text); }
.nui-on .asr-tree-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 10px 14px; }
.nui-on .asr-skel-row.asr-skel-row-sm { height: 40px; margin-bottom: 6px; padding: 14px; align-items: center; }
.nui-on .asr-skel-row.asr-skel-row-sm > .asr-skel { margin: 0; }
.nui-on .asr-tree ol { list-style: none; margin: 0; padding: 0; }
.nui-on .asr-tree.tree-markable ol ol {
    padding-left: 22px !important;
    margin-left: 13px;
    border-left: 1px solid var(--asr-border);
}
.nui-on .asr-tree dl { margin: 0; padding: 0; border: 0; background: transparent; }
.nui-on .asr-tree dl > dt {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-height: 34px;
    padding: 6px 8px;
    border-radius: var(--asr-radius-sm);
    font-weight: 400;
    color: var(--asr-text);
}
.nui-on .asr-tree dl:hover { background: transparent; }
.nui-on .asr-tree dl:hover > dt { background: var(--asr-bg); }
.nui-on .asr-tree dl > dt::before, .nui-on .asr-tree dl > dt::after { display: none; }
.nui-on .asr-tree .tree-handle,
.nui-on .asr-tree dl:hover .tree-handle {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--asr-muted);
    cursor: pointer;
    float: none;
    overflow: visible;
}
/* classic paints the glyph as a 22px bordered tile; flatten to a bare chevron */
.nui-on .asr-tree .tree-handle > i.fas {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px !important;
    height: 22px;
    line-height: 1;
    font-size: 10px;
    background: transparent;
    border: 0 !important;
    transition: color .12s;
}
.nui-on .asr-tree .tree-handle:hover { color: var(--asr-blue); background: var(--asr-blue-soft); }
.nui-on .asr-tree .mark-important,
.nui-on .asr-tree .mark-new { float: none; flex: 0 0 22px; width: 22px; height: 22px; }
.nui-on .asr-tree .this-name {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    float: none;
    padding: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--asr-ink);
    white-space: normal;
}
/* top level = the section (grade band / course): bolder, whole name toggles */
.nui-on .asr-tree > ol > li > dl > dt > .this-name { font-weight: 700; cursor: pointer; }
.nui-on .asr-tree .this-name > .asr-id { margin-right: 8px; font-size: 11.5px; font-weight: 600; color: var(--asr-text); }
.nui-on .asr-tree-body { animation: asr-fade .2s ease-out backwards; }
@media (prefers-reduced-motion: reduce) {
    .nui-on .asr-tree-body { animation: none; }
}

/* ==========================================================================
   Assess > Dashboard (/dashboard) widget board - layouts.nui.html,
   new-ui/dashboard/dashboard-layouts.nui.html, new-ui/dashboard/dashboard.nui.html.
   Root .asr-page.dc-page.nk-dash. Head row reuses .asr-top/.asr-tabs (layout
   tabs); the board's actions (.nk-dash-actions, rendered inside the dashboard
   directive) are lifted into the right of that row. Widgets are white cards.
   ========================================================================== */
.nui-on .nk-dash { padding-bottom: 0; }
.nui-on .nk-dash-host {
    position: relative; /* anchor for .nk-dash-actions */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.nui-on .nk-dash-top { min-height: 38px; padding-right: 380px; }
.nui-on .nk-dash-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.nui-on .nk-dash-tabs::-webkit-scrollbar { display: none; }
.nui-on .nk-dash-tabs .asr-tab.is-loading { opacity: .6; pointer-events: none; }
.nui-on .nk-dash-tab-x { font-size: 11px; margin-left: 2px; opacity: .55; }
.nui-on .nk-dash-tab-x:hover { opacity: 1; color: var(--dc-danger, #D23F31); }
.nui-on .nk-dash-tab-add { padding: 0 10px; }
.nui-on .nk-dash-tab-form { display: inline-flex; margin: 0; }
.nui-on .nk-dash-tab-form .asr-input { height: 26px; width: 150px; }

.nui-on .nk-dash-actions {
    position: absolute;
    top: 0;
    right: 0;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
}
.nui-on .nk-dash-icon { width: 36px; padding: 0; justify-content: center; }
.nui-on .nk-dash-filter-menu { width: 360px; padding: 8px; border-radius: 10px; }

.nui-on .nk-dash-board {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 18px;
}
.nui-on .nk-dash-board .dashboard-widget-area { margin: 0 -8px; }
.nui-on .nk-dash-board .widget-container { padding: 0 8px; margin-bottom: 16px; }

/* widget card */
.nui-on .nk-dash .nk-dash-card.panel {
    background: var(--asr-white);
    border: 1px solid var(--asr-border);
    border-radius: var(--asr-radius);
    box-shadow: none;
    margin: 0;
    overflow: hidden;
    animation: asr-rise .32s ease-out backwards;
}
.nui-on .nk-dash .nk-dash-card-head.panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--asr-border);
    padding: 10px 10px 10px 16px;
    cursor: grab;
}
.nui-on .nk-dash .nk-dash-card-head .panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font: 700 13px/1.3 var(--asr-font);
    color: var(--asr-ink);
}
.nui-on .nk-dash .nk-dash-card-head .widget-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nui-on .nk-dash .nk-dash-card-head.edit-active span.widget-title { display: none; }
.nui-on .nk-dash .nk-dash-card-head form.widget-title { display: flex; align-items: center; gap: 6px; margin: 0; }
.nui-on .nk-dash .nk-dash-card-head form.widget-title .asr-input { height: 28px; }
.nui-on .nk-dash-card-tools { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.nui-on .nk-dash-wbtn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--asr-muted);
    font-size: 12px;
    cursor: pointer;
}
.nui-on .nk-dash-wbtn:hover { background: var(--asr-bg); color: var(--asr-blue); }
.nui-on .nk-dash .nk-dash-card > .widget-content { padding: 14px 16px; }

/* notices (announcements, course completions) */
.nui-on .nk-dash-notice {
    position: relative;
    background: var(--asr-white);
    border: 1px solid var(--asr-border);
    border-left: 3px solid var(--asr-teal);
    border-radius: 10px;
    flex: 0 0 auto;
}
.nui-on .nk-dash-notice-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 6px 44px 6px 14px;
    border: 0;
    background: transparent;
    font: 600 12.5px/1.3 var(--asr-font);
    color: var(--asr-ink);
    text-align: left;
}
.nui-on button.nk-dash-notice-head { padding-right: 14px; cursor: pointer; }
.nui-on .nk-dash-notice-head > i, .nui-on .nk-dash-notice-head > .material-symbols-rounded { color: var(--asr-teal); font-size: 15px; }
.nui-on .nk-dash-notice-head > span:not(.material-symbols-rounded) { flex: 1 1 auto; }
.nui-on .nk-dash-notice-head .nk-chev { color: var(--asr-muted); font-size: 11px; }
.nui-on .nk-dash-notice-close { position: absolute; top: 6px; right: 8px; }
.nui-on .nk-dash-notice-list { list-style: none; margin: 0; padding: 0 14px 6px; }
.nui-on .nk-dash-notice-list > li { position: relative; padding: 10px 36px 10px 0; border-top: 1px solid var(--asr-border); }
.nui-on .nk-dash-notice-list > li > .nk-dash-wbtn { position: absolute; top: 8px; right: 0; }
.nui-on .nk-dash-notice-list h5 { margin: 0 0 4px; font: 700 13px/1.3 var(--asr-font); color: var(--asr-ink); }
.nui-on .nk-dash-notice-list p { margin: 0; font-size: 12.5px; color: var(--asr-text); }
.nui-on .nk-dash-notice-complete { margin-bottom: 12px; }
.nui-on .nk-dash-roster { position: absolute; top: 100%; left: 50%; width: 400px; margin-left: -200px; z-index: 5; }

/* empty + loading */
.nui-on .nk-dash-empty { padding: 40px 20px; }
.nui-on .nk-dash-empty-actions { margin-top: 12px; display: flex; justify-content: center; gap: 8px; }
.nui-on .nk-dash-skel { display: flex; flex-direction: column; gap: 16px; }
.nui-on .nk-dash-skel-tabs { width: 280px; height: 38px; border-radius: 10px; }
.nui-on .nk-dash-skel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nui-on .nk-dash-skel-grid > .asr-skel { height: 220px; border-radius: var(--asr-radius); }

/* Add widgets picker (modal) */
.nui-on .nk-dash-picker-hint { margin: 0 0 12px; font-size: 12.5px; color: var(--dc-muted, #5B6B7A); }
.nui-on .nk-dash-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.nui-on .nk-dash-pick {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--dc-border, #E6EAEE);
    border-radius: 12px;
    background: #fff;
    text-align: left;
    font: 600 12.5px/1.3 "Montserrat", sans-serif;
    color: var(--dc-ink, #1B2733);
    cursor: pointer;
}
.nui-on .nk-dash-pick:hover { border-color: var(--aa-blue, #0074C5); }
.nui-on .nk-dash-pick figure { margin: 0; border-radius: 8px; overflow: hidden; background: var(--aa-off-white, #F7F9FA); }
.nui-on .nk-dash-pick img { display: block; width: 100%; height: auto; }
.nui-on .nk-dash-pick-check { position: absolute; top: 8px; right: 8px; color: var(--aa-blue, #0074C5); font-size: 16px; display: none; }
.nui-on .nk-dash-pick.is-selected { background: rgba(0, 116, 197, .10); border-color: rgba(0, 116, 197, .45); color: var(--aa-blue, #0074C5); }
.nui-on .nk-dash-pick.is-selected .nk-dash-pick-check { display: block; }

@media (max-width: 900px) {
    .nui-on .nk-dash-top { padding-right: 0; }
    .nui-on .nk-dash-actions { position: static; justify-content: flex-end; flex-wrap: wrap; height: auto; }
    .nui-on .nk-dash-skel-grid { grid-template-columns: 1fr; }
    .nui-on .nk-dash-roster { width: auto; left: 0; right: 0; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .nui-on .nk-dash .nk-dash-card.panel { animation: none; }
}