/* DOCS+EDIT-FIRST: read code-docs/static/css/split_carrier.css.md before editing (comments live there). */
/*@carrier-module*/

.folder-tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; margin: 0; padding: 0 0.7rem; } /*@folder-tabs*/
.folder-tab { padding: 0.5rem 1.15rem; margin-bottom: -1px; font: 500 var(--fs-sm)/1.2 var(--font-ui); color: var(--text-faint); background: var(--surface-subtle); border: 1px solid var(--border-grey); border-bottom-color: var(--split-border); border-radius: 9px 9px 0 0; text-decoration: none; position: relative; cursor: pointer; } /*@folder-tab-inactive-bottom*/
.folder-tab:hover { color: var(--slate-ink); }
.rn-strip-nowrap { flex-wrap: nowrap; } /*@strip-nowrap-carrier*/
.rn-strip-nowrap .folder-tab { white-space: nowrap; flex-shrink: 0; } /*@strip-tabs-never-wrap-so-eviction-fires*/
.folder-tab a { color: inherit; text-decoration: none; } /*@folder-tab-inner-anchor-reset*/
.folder-tab.is-active { background: var(--card-bg); color: var(--slate-ink); font-weight: 600; border-color: var(--split-border); } /*@folder-tab-active-border*/
.folder-panel { border: 1px solid var(--split-border); border-radius: var(--radius-card); background: var(--card-bg); padding: 1.3rem 1.4rem; } /*@folder-panel-radius-token*/
.folder-panel--flush { padding: 0; } /*@folder-panel-flush*/
.folder-tab .count { color: var(--text-faint); font-weight: 400; } /*@folder-tab-count*/

/* @rn-icon-tab-shared: the bare-icon-in-a-folder-tab-header family (the "..." overflow/dots tab, and
   any other icon-only tab header built on `.folder-tab.rn-icon-tab`) — ONE definition for every
   consumer site-wide, so every folder-tab UI's icon-only headers match the SAME row height as their
   text-label siblings (TT1) instead of drifting per page. Previously only duplicated locally in
   review_notes.html + scores_detail.html; every other `.rn-icon-tab` consumer had no matching CSS at
   all. Value matches the pre-existing duplicated convention (1.05rem) so this is a zero-pixel-diff
   move for the two pages that already had it, and a first-time fix for every page that didn't. */
.rn-icon-tab { display: inline-flex; align-items: center; gap: 0.3rem; } /*@rn-icon-tab-tt1-pp1*/
.rn-icon-tab svg { width: 1.05rem; height: 1.05rem; display: block; }
.rn-icon-tab .count { margin-left: 0.1rem; }

.sd-split { display: grid; grid-template-columns: 220px 1fr; gap: 0; align-items: stretch; } /*@split-shell*/
.sd-dlist { display: flex; flex-direction: column; gap: 0.35rem; border-right: 1px solid var(--split-border);
  padding-left: var(--rail-pad-l, var(--rail-inset)); padding-right: var(--rail-pad-r, var(--rail-inset));
  padding-top: 0.7rem; padding-bottom: 0.7rem;
  --rail-pad-l: var(--rail-inset); --rail-pad-r: var(--rail-inset); --rail-row-px: 0.6rem; } /*@rail-pad-props*/ /*@sd-dlist-inner-top-padding*/
.sd-detail { padding: 1.1rem 1.4rem 2rem; } /*@sd-detail-inner-top-padding*/
.sd-detail-panel { display: none; }
.sd-detail-panel.is-sel { display: block; }
.rail-panel { background: var(--card-bg); border: 1px solid var(--split-border); border-radius: var(--radius-card); } /*@rail-panel*/
.sd-dlist > .is-sel,
.qsplit-rail-rows > .is-sel { /*@rail-sel-carrier*/
  background: var(--rail-sel-bg);
  border: 1px solid transparent; box-shadow: none; border-radius: var(--rail-row-radius);
}
@media (max-width: 760px) {
  .sd-split { grid-template-columns: 1fr; }
  .sd-dlist { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--split-border);
    padding-left: 0; padding-right: 0; padding-bottom: 0.6rem; --rail-pad-l: 0rem; --rail-pad-r: 0rem; } /*@rail-pad-narrow*/
}

.pill-circle-add { width: 1.5rem; height: 1.5rem; min-height: 1.5rem; padding: 0; /*@pill-circle-add*/
  border-radius: 50%; font-size: var(--fs-base); line-height: 1; }

.sd-split .qsplit-host:has(.pt-inst-overlay) { height: 100%; } /*@blackout-full-pane*/
.sd-split .sd-detail-panel:has(.pt-inst-overlay) { height: 100%; } /*@blackout-full-pane-detail*/

/* @folder-viewport-fill: every folder-tab/split-view panel min-height-fills the viewport (s-0830). */
.ap-content:has(.folder-panel, .sd-split), .sp-content:has(.folder-panel, .sd-split) {
  display: flex; flex-direction: column; min-height: 0;
} /*@folder-viewport-fill-content*/
.ap-content:has(.folder-panel, .sd-split) > div:has(main),
.sp-content:has(.folder-panel, .sd-split) > div:has(main) {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
} /*@folder-viewport-fill-extra-wrapper*/
.ap-content main:has(.folder-panel, .sd-split), .sp-content main:has(.folder-panel, .sd-split) {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
} /*@folder-viewport-fill-main*/
.ap-content main .admin-section:has(.folder-panel, .sd-split),
.sp-content main .admin-section:has(.folder-panel, .sd-split) {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0;
} /*@folder-viewport-fill-admin-section*/
.folder-panel { flex: 1 1 auto; } /*@folder-viewport-fill-panel*/
.folder-panel:has(> .sd-split) { display: flex; flex-direction: column; min-height: 0; } /*@folder-viewport-fill-panel-hosts-split*/
.ap-content > .sd-split, .sp-content > .sd-split,
.folder-panel > .sd-split, main > .sd-split, .admin-section > .sd-split {
  flex: 1 1 auto; min-height: 0;
} /*@folder-viewport-fill-sd-split*/
.folder-tabs { flex: 0 0 auto; } /*@folder-viewport-fill-tabs-never-grow*/
.ap-content:has(.folder-panel, .sd-split) :is(div, section):not([hidden]):has(.folder-panel, .sd-split):not(.folder-panel):not(.sd-split),
.sp-content:has(.folder-panel, .sd-split) :is(div, section):not([hidden]):has(.folder-panel, .sd-split):not(.folder-panel):not(.sd-split) {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
} /*@folder-viewport-fill-generic-wrapper*/

.folder-panel .sp-empty-state, .sd-detail .sp-empty-state, .sd-split .sp-empty-state {
  background: transparent; border: none; box-shadow: none; padding: 1.1rem 0.75rem; margin-top: 0;
} /*@pane-empty-state-unboxed*/

/* @pane-empty-state-vcenter: centers a lone empty-state vertically inside its viewport-clamped
   folder-tab/split-view pane (B46, s-0922). */
.folder-panel:not([hidden]):has(> .sp-empty-state),
.sd-split:not([hidden]):has(> .sp-empty-state),
.sd-detail:not([hidden]):has(> .sp-empty-state) {
  display: flex; flex-direction: column; justify-content: center;
} /*@pane-empty-state-vcenter*/

/* @pane-empty-state-vcenter-wrap: student_assignments.html nests one more wrapper div
   (.stu-asg-pane) between the clamped .folder-panel and the empty-state fallback (B46, s-0922). */
.folder-panel:has(> .stu-asg-pane:not([hidden]) > .sp-empty-state) {
  display: flex; flex-direction: column;
} /*@pane-empty-state-vcenter-wrap-panel*/
.stu-asg-pane:not([hidden]):has(> .sp-empty-state) {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center;
} /*@pane-empty-state-vcenter-wrap-pane*/

/* @folder-viewport-fill-nav-top: re-locks a folder-tab/split page to the viewport under Top nav. */
html body.nav-top:has(.folder-panel, .sd-split) {
  display: flex; height: 100vh; overflow: hidden;
} /*@folder-viewport-fill-nav-top-body*/
html body.nav-top:has(.folder-panel, .sd-split) .ap-main,
html body.nav-top:has(.folder-panel, .sd-split) .sp-main {
  overflow-y: auto;
} /*@folder-viewport-fill-nav-top-main*/