/** Shopify CDN: Minification failed

Line 271:76 Unexpected "*"
Line 272:75 Unterminated string token
Line 275:79 Unterminated string token

**/
/* Lámh Tutors Dashboard — Direction D "Course Spine".
 *
 * Loaded by blocks/custom-tutor-dashboard.liquid via stylesheet_tag rather than
 * a {% stylesheet %} block: {% stylesheet %} output is concatenated into the
 * theme-wide sheet that every page downloads, and this only ever appears on one.
 *
 * Design principle: the signs library IS the page. The spine is navigation, not
 * content, so it stays visually quieter than the canvas, and nothing here may
 * push the A-Z index below the fold in the default state.
 *
 * Uses the theme's design tokens throughout (theme-styles-variables.liquid and
 * color-schemes.liquid) so it inherits whatever scheme it is dropped into.
 */

/* Filtering toggles the `hidden` PROPERTY, not a class — the signs-list.js
 * convention. base.css sets display on list items, which outranks the UA
 * [hidden] rule, so state it explicitly. */
.td [hidden] {
  display: none !important;
}

/* Tokens live on both roots. .td is the dashboard itself (tutor block, and the
 * inner element of the student block); .td-student is the student block's outer
 * wrapper, which also holds the gate messages and the promo slot — those sit
 * OUTSIDE .td and would otherwise miss the tokens. */
.td,
.td-student {
  --td-spine-width: 240px;
  --td-gap: var(--gap-2xl, 32px);
  --td-radius: 8px;
  --td-quiet: rgb(var(--color-foreground-rgb) / 0.6);
  --td-line: rgb(var(--color-foreground-rgb) / 0.12);
  --td-surface: rgb(var(--color-foreground-rgb) / 0.04);
  --td-accent: #91b13d; /* Lámh green, carried over from the existing sign chips */
  --td-chip: #e9efd8;

  /* Download shelf (R3), from design exploration option 2a. Fixed colours, not
   * scheme tokens: the sage shelf and teal action are the panel's identity, and
   * a scheme swap that greyed them out would lose it. Named here so the one
   * green, the one teal and the one sage are stated once each. */
  --td-shelf: #eaeed8;
  --td-shelf-line: #d5dfb2;
  --td-teal: #477077;
  --td-teal-dark: #35595f;
  --td-card-line: #e4e4dc;
  --td-tile: #f7f8f2;
  --td-tile-line: #e6e9d8;
  --td-note: #fbf9f3;
  --td-note-line: #ece7d8;
  --td-note-rule: #d8b74a;
  --td-note-ink: #8a6d12;

  display: block;

  /* Dropped into a group block, this is a flex item: the theme wraps group
   * children in .layout-panel-flex (base.css). A flex item's base size is
   * `auto`, so without an explicit width the dashboard sizes to its CONTENT —
   * and the canvas visibly narrowed as filtering removed sign chips. Anchor the
   * width to the container instead so the layout is identical in every state.
   * min-width:0 keeps the long chip rows from forcing it wider again. */
  width: 100%;
  min-width: 0;
}


/* Visible only on focus, per spec 9 — a skip link into the index. */
.td__skip {
  position: absolute;
  left: -9999px;
  padding: var(--padding-sm, 8px) var(--padding-md, 12px);
  background: var(--color-background);
  border-radius: var(--td-radius);
}

.td__skip:focus {
  position: static;
  display: inline-block;
  margin-bottom: var(--margin-md, 12px);
}

/* ------------------------------------------------------------------- header */

.td__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md, 12px);
  margin-bottom: var(--margin-lg, 16px);
  padding-bottom: var(--padding-sm, 8px);
  border-bottom: 1px solid var(--td-line);
}

.td__title {
  margin: 0;
  font-size: var(--font-size--xl, 1.25rem);
}

.td__drawer-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs, 6px);
  min-height: 44px;
  padding: var(--padding-xs, 6px) var(--padding-md, 12px);
  border: 1px solid var(--td-line);
  border-radius: var(--td-radius);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.td__drawer-toggle svg {
  width: 20px;
  height: 20px;
}

/* ------------------------------------------------------------------- layout */

.td__layout {
  display: grid;
  width: 100%;
  gap: var(--td-gap);
  grid-template-columns: 1fr;
}

/* The spine is sticky and the canvas scrolls past it. At ~591 chips the canvas
 * is long, and losing the nav on scroll is the main failure mode of this
 * direction. */
@media screen and (min-width: 1024px) {
  .td__layout {
    grid-template-columns: var(--td-spine-width) minmax(0, 1fr);
    align-items: start;
  }

  .td__spine-col {
    position: sticky;
    top: var(--margin-lg, 16px);
    max-height: calc(100vh - 2 * var(--margin-lg, 16px));
    overflow-y: auto;
  }

  .td__bar {
    display: none;
  }
}

@media screen and (min-width: 1280px) {
  .td {
    --td-spine-width: 240px;
  }

  .td__canvas {
    max-width: 1040px;
  }
}

.td__canvas {
  min-width: 0;
}

/* -------------------------------------------------------------------- spine */

.td-spine__list {
  margin: 0 0 var(--margin-lg, 16px);
  padding: 0;
  list-style: none;
}

.td-spine__list--primary {
  padding-bottom: var(--padding-md, 12px);
  border-bottom: 1px solid var(--td-line);
}

.td-spine__heading {
  margin: 0 0 var(--margin-xs, 6px);
  font-size: var(--font-size--2xs, 0.6875rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--td-quiet);
}

.td-spine__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-xs, 6px);
  width: 100%;
  min-height: 44px;
  padding: var(--padding-xs, 6px) var(--padding-sm, 8px);
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--td-radius);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.td-spine__item:hover {
  background: var(--td-surface);
}

/* Selected state must not rely on colour alone (spec 9): weight and a border
 * carry it too. */
.td-spine__item.is-selected {
  border-left-color: var(--td-accent);
  background: var(--td-chip);
  font-weight: 600;
}

.td-spine__item--all {
  font-size: var(--font-size--md, 1rem);
}

.td-spine__count {
  flex: none;
  font-size: var(--font-size--2xs, 0.6875rem);
  color: var(--td-quiet);
}

.td-spine__item.is-selected .td-spine__count {
  color: inherit;
}

/* Resources and outbound links read as clearly tertiary without becoming
 * invisible, so the eye lands on the course list. */
.td-spine__list--quiet .td-spine__item,
.td-spine__list--outbound .td-spine__item {
  font-size: var(--font-size--sm, 0.875rem);
  color: var(--td-quiet);
}

.td-spine__list--quiet .td-spine__item:hover,
.td-spine__list--outbound .td-spine__item:hover {
  color: inherit;
}

.td-spine__list--outbound {
  margin-bottom: 0;
  padding-top: var(--padding-md, 12px);
  border-top: 1px solid var(--td-line);
}

.td-spine__item--outbound svg {
  flex: none;
  width: 14px;
  height: 14px;
}

/* ---------------------------------------------------- R3 course context panel */

/* Design exploration option 2a. The download shelf is the one place on this
 * page that is allowed to be louder than the library, because it is the thing a
 * tutor came here to collect.
 *
 * TWO DELIBERATE DEPARTURES from the rest of this stylesheet:
 *
 * 1. The palette is fixed rather than tokenised. The sage/teal pairing IS the
 *    identity of the panel, and a colour-scheme swap that quietly turned it
 *    grey would take the identity with it.
 * 2. The internal spacing is stated in px rather than in --padding-*/--gap-*.
 *    The theme's scale tops out at 1rem (--padding-lg), which is tuned for
 *    dense chrome; the shelf is a spacious thing and reads as cramped at half
 *    the explored proportions. Everything OUTSIDE the shelf still uses tokens,
 *    so the panel still sits on the theme's rhythm even though its inside does
 *    not follow it.
 */

.td__context {
  margin-bottom: var(--margin-lg, 16px);
}

.td__context-title {
  margin: 0 0 var(--margin-sm, 8px);
  font-size: var(--font-size--xl, 1.25rem);
}

/* The shelf header names the course, so an identical heading directly above it
 * is a stutter. It is hidden rather than deleted: it stays the panel's heading
 * for assistive tech, and it is the only course confirmation a course with NO
 * materials gets, which is why the rule is conditional on a panel being there.
 * Browsers without :has() simply show it — a duplicate line, not a break. */
.td__context:has(.td-materials:not([hidden])) .td__context-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.td-materials__disclosure {
  border: 1px solid var(--td-shelf-line);
  border-left: 6px solid var(--td-accent);
  border-radius: var(--td-radius);
  background: var(--td-shelf);
}

.td-materials__summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 28px 16px;
  cursor: pointer;
  list-style: none;
}

.td-materials__summary::-webkit-details-marker {
  display: none;
}

/* Only meaningful under content, so it appears with the content. Closed, the
 * header IS the panel and takes the full padding back. */
.td-materials__disclosure[open] .td-materials__summary {
  border-bottom: 1px solid var(--td-shelf-line);
}

.td-materials__disclosure:not([open]) .td-materials__summary {
  padding-bottom: 26px;
}

.td-materials__headings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.td-materials__title {
  font-size: 1.625rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-foreground);
}

.td-materials__sub {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: rgb(var(--color-foreground-rgb) / 0.72);
}

.td-materials__toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--td-teal);
  border-radius: 4px;
  background: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--td-teal);
}

.td-materials__toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--hover-transition-duration, 0.15s) ease;
}

.td-materials__disclosure[open] .td-materials__toggle svg {
  transform: rotate(180deg);
}

/* One label per state, swapped rather than rewritten, so no JS owns the string. */
.td-materials__toggle-open,
.td-materials__disclosure[open] .td-materials__toggle-closed {
  display: none;
}

.td-materials__disclosure[open] .td-materials__toggle-open {
  display: inline;
}

.td-materials__grid {
  display: grid;
  gap: 20px;
  padding: 20px 28px 28px;
}

/* Courses with two sets of materials sit side by side; this falls out of the
 * markup, so no course is special-cased. */
@media screen and (min-width: 1024px) {
  .td-materials__grid {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    align-items: start;
  }
}

.td-material {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--td-card-line);
  border-radius: var(--td-radius);
  background: var(--color-background);

  /* The card reflows on its OWN width, not the viewport's — the same card is
   * full width for a one-set course and half width for a two-set one, and the
   * download action has to behave in both. */
  container-type: inline-size;
}

/* Title block and download action share a row while there is width for it. */
.td-material__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.td-material__ident {
  min-width: 0;
}

.td-material__stamp {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: var(--font-size--xs, 0.8125rem);
  color: var(--td-quiet);
}

.td-material__badge {
  padding: 5px 8px;
  border-radius: 3px;
  background: rgb(var(--color-foreground-rgb) / 0.09);
  color: rgb(var(--color-foreground-rgb) / 0.75);
  font-size: 0.625rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Coloured only while the update is still news — see the two-year cutoff in
 * snippets/tutor-dashboard-materials.liquid. */
.td-material__badge--recent {
  background: var(--td-accent);
  color: #fff;
}

.td-material__name {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.25;
}

.td-material__cta {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 11px;
  max-width: 100%;
  min-height: 44px;
  padding: 14px 18px;
  border-radius: 5px;
  background: var(--td-teal);
  color: #fff;
  text-decoration: none;
  transition: background var(--hover-transition-duration, 0.15s) ease;
}

.td-material__cta:hover,
.td-material__cta:focus-visible {
  background: var(--td-teal-dark);
  color: #fff;
}

.td-material__cta-icon {
  flex: none;
}

.td-material__cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.td-material__cta-label {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.1;
}

/* The filename is reference, not instruction: kept because tutors do match it
 * against what lands in Downloads, sized so it never competes with the label. */
.td-material__cta-meta {
  font-size: 0.78125rem;
  line-height: 1.2;
  color: rgb(255 255 255 / 0.82);
  overflow-wrap: anywhere;
}

/* Replaces the download action on multi-file cards, where the files below are
 * the action and a second button here would only compete with them. */
.td-material__pill {
  flex: none;
  /* A count is a label, not a target: it must not stretch when the head stacks. */
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 20px;
  background: var(--td-shelf);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--td-teal);
}

/* Below this the title and the action no longer fit side by side, so the action
 * stops being a thing beside the title and becomes the card's full-width
 * primary button. */
@container (max-width: 520px) {
  .td-material__head {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .td-material__name {
    font-size: 1.25rem;
  }

  .td-material__cta {
    width: 100%;
  }
}

.td-material__files-block {
  padding-top: 16px;
  border-top: 1px solid var(--td-card-line);
}

.td-material__files-label {
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--td-quiet);
}

.td-material__tiles {
  display: grid;
  gap: 10px;
}

/* Two up only where a tile can still hold a zip filename without wrapping to
 * three lines. Below that they stack. */
@container (min-width: 720px) {
  .td-material__tiles {
    grid-template-columns: 1fr 1fr;
  }
}

.td-material__tile {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 13px 14px;
  border: 1px solid var(--td-tile-line);
  border-radius: 5px;
  background: var(--td-tile);
  color: inherit;
  text-decoration: none;
  transition: background var(--hover-transition-duration, 0.15s) ease,
    border-color var(--hover-transition-duration, 0.15s) ease;
}

.td-material__tile:hover,
.td-material__tile:focus-visible {
  background: var(--td-shelf);
  border-color: var(--td-accent);
  color: inherit;
}

.td-material__tile-icon {
  flex: none;
  color: var(--td-teal);
}

.td-material__tile-text {
  min-width: 0;
}

.td-material__tile-name {
  display: block;
  font-size: 0.90625rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.td-material__tile-meta {
  display: block;
  margin-top: 3px;
  font-size: 0.78125rem;
  line-height: 1.2;
  color: var(--td-quiet);
}

/* ---- description ---- */

/* The opening line and its list are what's in the download, so they are never
 * behind a toggle. Styled from the rich-text output, which a tutor authors in
 * the admin and which arrives here as plain <p>/<ul>/<li>. */
.td-material__intro {
  padding-top: 16px;
  border-top: 1px solid var(--td-card-line);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.td-material__intro > :first-child {
  margin-top: 0;
}

.td-material__intro > :last-child {
  margin-bottom: 0;
}

.td-material__intro p {
  margin: 0 0 12px;
}

.td-material__intro ul,
.td-material__intro ol {
  display: grid;
  gap: 9px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A contents list is scanned, not read in order, so it goes two-up as soon as
 * the card is wide enough to hold two entries. */
@container (min-width: 720px) {
  .td-material__intro ul,
  .td-material__intro ol {
    grid-template-columns: 1fr 1fr;
  }
}

.td-material__intro li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  line-height: 1.3;
}

.td-material__intro li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--td-accent);
  transform: translateY(-2px);
}

.td-material__more {
  padding-top: 14px;
  border-top: 1px solid var(--td-card-line);
}

/* A tutor caveat, not an update note — see the "Note:" detection in
 * snippets/tutor-dashboard-materials.liquid. It stops being a continuation of
 * the card and becomes a thing pinned to it. */
.td-material__more--note {
  padding: 16px 18px;
  border: 1px solid var(--td-note-line);
  border-left: 4px solid var(--td-note-rule);
  border-radius: 5px;
  background: var(--td-note);
}

.td-material__note-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.65625rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--td-note-ink);
}

.td-material__more-summary {
  display: block;
  cursor: pointer;
  list-style: none;
}

.td-material__more-summary::-webkit-details-marker {
  display: none;
}

/* One line of the hidden prose, so the toggle is a decision rather than a
 * gamble. Dropped once the prose itself is on screen. */
.td-material__more-preview {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.td-material__more[open] .td-material__more-preview {
  display: none;
}

.td-material__more-link {
  display: inline-block;
  margin-top: 8px;
  border-bottom: 1.5px solid var(--td-accent);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--td-teal);
}

.td-material__more-link--close,
.td-material__more[open] .td-material__more-link--open {
  display: none;
}

.td-material__more[open] .td-material__more-link--close {
  display: inline-block;
}

.td-material__more-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.td-material__more-body p {
  margin: 0;
}

/* ---- resource dialogs ---- */

/* Not part of the shelf. Resources (materials with no course) render as dialogs
 * in blocks/custom-tutor-dashboard.liquid and still use these. */

.td-material__files {
  margin: var(--margin-sm, 8px) 0 0;
  padding: 0;
  list-style: none;
}

.td-material__file {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs, 6px);
  min-height: 44px;
  color: inherit;
  font-size: var(--font-size--sm, 0.875rem);
  overflow-wrap: anywhere;
}

.td-material__file-icon {
  flex: none;
}


/* ------------------------------------------------------------- R4/R5 filters */

/* Mirrors .filter-controls in signs-list.css and signs-search-redirect.liquid.
 * Declared here too so the block is self-contained on pages that don't load
 * that stylesheet — the same reason signs-search-redirect repeats it. */
.td .filter-controls {
  margin: 0 0 var(--margin-md, 12px);
  padding: 1.5rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: var(--td-radius);
}

.td .filter-title {
  margin: 0 0 0.75rem;
}

.td .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

.td .signs-filter-group {
  display: flex;
  flex: 1 1 10rem;
  flex-direction: column;
  min-width: 0;
}

/* Give the search box roughly twice the room of the dropdown. */
.td .signs-filter-group--search {
  flex-grow: 2;
  flex-basis: 14rem;
}

.td .filter-label {
  font-style: italic;
}

.td .filter-controls input,
.td .filter-controls select {
  width: 100%;
  min-height: 44px;
}

.td .filter-row .button {
  flex: none;
  min-height: 44px;
}

/* ---------------------------------------------------------- R6 result count */

.td__count {
  margin: 0 0 var(--margin-sm, 8px);
  font-style: italic;
  color: var(--td-quiet);
}

/* ------------------------------------------------------------ R7 signs index */

.td-source {
  display: none;
}

.td-group {
  margin-bottom: var(--margin-lg, 16px);
}

/* With ~591 chips, losing the letter context on scroll is disorienting. */
.td-group__heading {
  position: sticky;
  top: 0;
  z-index: var(--layer-raised, 1);
  margin: 0 0 var(--margin-xs, 6px);
  padding: var(--padding-2xs, 4px) 0;
  background: var(--color-background);
  font-size: var(--font-size--lg, 1.125rem);
  border-bottom: 1px solid var(--td-line);
}

.td-group__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs, 6px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.td-sign__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--padding-xs, 6px) var(--padding-md, 12px);
  border-radius: var(--td-radius);
  background: var(--td-chip);
  color: #333;
  text-decoration: none;
}

.td-sign__link:hover,
.td-sign__link:focus-visible {
  background: var(--td-accent);
  color: #fff;
}

.td__empty {
  padding: var(--padding-lg, 16px);
  border: 1px solid var(--td-line);
  border-radius: var(--td-radius);
}

.td__empty-title {
  margin: 0 0 var(--margin-2xs, 4px);
  font-size: var(--font-size--md, 1rem);
}

.td__empty-body {
  margin: 0 0 var(--margin-md, 12px);
  color: var(--td-quiet);
}

.td__empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm, 8px);
}

.td__empty-action {
  min-height: 44px;
  padding: 0 var(--padding-md, 12px);
  border: 1px solid var(--td-line);
  border-radius: var(--td-radius);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.td__empty-action:hover {
  background: var(--td-surface);
}

/* ------------------------------------------------------------------ dialogs */

.td__dialog-host {
  display: contents;
}

.td__dialog {
  position: relative;
  width: min(640px, calc(100vw - 2rem));
  max-height: var(--modal-max-height, 80vh);
  padding: var(--padding-xl, 24px);
  border: 0;
  border-radius: var(--td-radius);
  background: var(--color-background);
  color: var(--color-foreground);
  overflow-y: auto;
}

.td__dialog-title {
  margin: 0 var(--margin-xl, 24px) var(--margin-2xs, 4px) 0;
  font-size: var(--font-size--lg, 1.125rem);
}

.td__dialog-date {
  margin: 0 0 var(--margin-md, 12px);
  font-size: var(--font-size--xs, 0.75rem);
  color: var(--td-quiet);
}

.td__dialog-video {
  aspect-ratio: 16 / 9;
  margin-bottom: var(--margin-md, 12px);
}

.td__dialog-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.td__dialog-close {
  position: absolute;
  top: var(--padding-sm, 8px);
  right: var(--padding-sm, 8px);
}

/* Position, width, background and the slide come from .drawer / .dialog-drawer
 * in base.css. Only the inner treatment belongs here — mirrors .facets--drawer
 * in blocks/filters.liquid. */
.td__drawer {
  padding: var(--padding-lg, 16px);
  border-radius: 0;
  border-right: var(--style-border-drawer);
  box-shadow: var(--shadow-drawer);
  color: var(--color-foreground);
  overflow-y: auto;
}

/* --------------------------------------- student dashboard gates and banner */

/* Sign-in prompt and the "no courses yet" explanation. */
.td__gate {
  padding: var(--padding-xl, 24px);
  border: 1px solid var(--td-line, rgb(0 0 0 / 0.12));
  border-radius: var(--td-radius, 8px);
}

.td__gate h2 {
  margin: 0 0 var(--margin-xs, 6px);
  font-size: var(--font-size--lg, 1.125rem);
}

.td__gate p {
  margin: 0;
  max-width: var(--max-width--body-base, 60ch);
}

/* The promo slot. Empty when no block has been added, so it must not leave a
 * gap above the dashboard in that case. */
.td__banner:not(:empty) {
  margin-bottom: var(--margin-lg, 16px);
}

/* ------------------------------------------- access promo card + explainer */
/* blocks/custom-signs-access-promo.liquid. Lives here rather than in a
 * {% stylesheet %} block so the card and the dashboard share one request when
 * they appear together, which is the common case.
 *
 * The card sits in the spine, so it must stay quiet: it is the only thing in the
 * sidebar allowed to look like content rather than nav, and even then only just.
 */

.sap {
  display: block;
}

.sap__card {
  padding: var(--padding-md, 12px);
  border: 1px solid var(--td-line, rgb(0 0 0 / 0.12));
  border-radius: var(--td-radius, 8px);
  background: var(--td-surface, rgb(0 0 0 / 0.04));
}

.sap__eyebrow {
  margin: 0;
  font-size: var(--font-size--2xs, 0.6875rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--td-quiet, rgb(0 0 0 / 0.6));
}

.sap__counts {
  margin-top: var(--margin-xs, 6px);
}

.sap__figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--gap-2xs, 4px);
  margin: 0;
}

/* The number is the argument, so it gets the size. */
.sap__figure-num {
  font-size: var(--font-size--2xl, 1.5rem);
  font-weight: 600;
  line-height: 1.1;
}

.sap__figure-label {
  font-size: var(--font-size--md, 1rem);
  font-weight: 600;
}

.sap__figure-sub {
  font-size: var(--font-size--sm, 0.875rem);
  color: var(--td-quiet, rgb(0 0 0 / 0.6));
}

.sap__bar {
  height: 6px;
  margin-top: var(--margin-2xs, 4px);
  border-radius: 999px;
  background: var(--td-line, rgb(0 0 0 / 0.12));
  overflow: hidden;
}

/* --sap-progress is set by #paintAccessCard; 0% until it runs, and the whole
 * count row is hidden until then anyway. */
.sap__bar-fill {
  display: block;
  width: var(--sap-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--td-accent, #91b13d);
}

.sap--expired .sap__bar-fill {
  background: var(--color-error, #e02229);
}

.sap__context {
  margin: var(--margin-xs, 6px) 0 0;
  font-size: var(--font-size--sm, 0.875rem);
  color: var(--td-quiet, rgb(0 0 0 / 0.6));
}

.sap__context--warn {
  color: var(--color-error, #e02229);
}

.sap__button {
  display: grid;
  width: 100%;
  min-height: 44px;
  margin-top: var(--margin-sm, 8px);
  text-decoration: none;
}

/* A link, not a second button — the card must not offer two equal actions. */
.sap__more {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: var(--margin-2xs, 4px);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--font-size--sm, 0.875rem);
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.sap__more:hover {
  text-decoration: none;
}

/* ---- What's included overlay ---- */

.sap__dialog {
  position: relative;
  width: min(520px, calc(100vw - 2rem));
  max-height: var(--modal-max-height, 80vh);
  padding: var(--padding-xl, 24px);
  border: 0;
  border-radius: var(--td-radius, 8px);
  background: var(--color-background);
  color: var(--color-foreground);
  overflow-y: auto;
}

.sap__dialog-title {
  margin: 0 var(--margin-xl, 24px) var(--margin-sm, 8px) 0;
  font-size: var(--font-size--xl, 1.25rem);
  text-wrap: balance;
}

.sap__dialog-lead {
  margin: 0 0 var(--margin-md, 12px);
  max-width: var(--max-width--body-base, 60ch);
}

.sap__dialog-body {
  margin-bottom: var(--margin-md, 12px);
}

.sap__dialog-body > *:last-child {
  margin-bottom: 0;
}

.sap__list {
  margin: 0 0 var(--margin-lg, 16px);
  padding: 0;
  list-style: none;
}

.sap__list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm, 8px);
  padding: var(--padding-2xs, 4px) 0;
}

.sap__list-item svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.25em;
  color: var(--td-accent, #91b13d);
}

.sap__dialog-cta {
  display: inline-grid;
  min-height: 44px;
  text-decoration: none;
}

.sap__dialog-close {
  position: absolute;
  top: var(--padding-sm, 8px);
  right: var(--padding-sm, 8px);
}


/* --------------------------------------------------------------- responsive */

/* The materials panel is collapsed below the desktop breakpoint so the library
 * isn't pushed off screen — see #collapseMaterialsOnNarrow in the JS. `open` is
 * an attribute, so CSS alone cannot do this. */

/* Below the desktop breakpoint the spine lives in the drawer, not in the page.
 * .td__spine-col is only its desktop home — the JS returns the nav here on
 * drawer close, and it stays hidden until the layout goes two-column. Without
 * this the courses and resources render stacked above the canvas as well as
 * inside the drawer, which makes the drawer look pointless. */
@media screen and (max-width: 1023px) {
  .td__spine-col {
    display: none;
  }
}

@media screen and (max-width: 749px) {
  .td .filter-controls {
    padding: 1rem;
  }

  /* Each control takes the full width and the buttons share the last row,
   * rather than squeezing four things onto one line. */
  .td .signs-filter-group {
    flex-basis: 100%;
  }

  .td .filter-row .button {
    flex: 1 1 auto;
  }
}

/* The shelf carries desktop-scale padding and a two-column header. On a phone
 * both cost more than they buy: the header wraps to two rows and the padding
 * comes back to the theme's own scale, where the content gets the width. The
 * cards look after themselves — see the container query on .td-material. */
@media screen and (max-width: 749px) {
  .td-materials__summary {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 18px 14px;
  }

  .td-materials__disclosure:not([open]) .td-materials__summary {
    padding-bottom: 18px;
  }

  .td-materials__title {
    font-size: 1.375rem;
  }

  .td-materials__grid {
    padding: 16px 18px 18px;
  }

  .td-material {
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .td-materials__toggle svg,
  .td-material__cta,
  .td-material__tile {
    transition: none;
  }
}