@layer legacy {
/* The Resources workspace follows the active theme instead of being forced
   light. On the dark shell it was leaving near-white cards, a grey search bar
   and grey dropdowns floating over the dark UI. Tokens are now theme-aware:
   dark surfaces + light text by default, light surfaces + dark text only when
   the light theme is active. */
.student-resources-v2 {
  --sr2-surface: var(--aios-surface);
  --sr2-surface-soft: var(--aios-surface-subtle);
  --sr2-border: var(--aios-border);
  --sr2-text: var(--aios-text);
  --sr2-muted: var(--aios-text-muted);
  --sr2-accent: var(--aios-accent-strong);
  --sr2-accent-soft: var(--aios-accent-soft);
  color: var(--sr2-text);
}

.student-resources-v2 .sr2-wide-button {
  min-height: 44px;
}

/* Keep the library and its actions visible before decorative framing. */
.student-resources-v2 .sr2-hero {
  min-height: 0;
  border-radius: 18px;
  border-color: var(--sr2-border);
  background: var(--sr2-surface);
  box-shadow: none;
}

.student-resources-v2 .sr2-hero::after {
  content: none;
}

.student-resources-v2 .sr2-hero-copy {
  padding: 24px;
}

.student-resources-v2 .sr2-hero h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.student-resources-v2 .sr2-hero-actions {
  margin-top: 18px;
}

.student-resources-v2 .sr2-hero-summary {
  margin: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.student-resources-v2 .sr2-hero-summary > div {
  background: var(--sr2-surface-soft);
  border-radius: 12px;
}

.student-resources-v2 .sr2-toolbar,
.student-resources-v2 .sr2-tabs {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Leave room for tactile edges and keyboard outlines in the scrolling row. */
.student-resources-v2 .sr2-tabs {
  padding: 6px 6px 9px;
}

.student-resources-v2 .sr2-card,
.student-resources-v2 .sr2-side-card {
  border-radius: 18px;
  box-shadow: none;
}

.student-resources-v2 .sr2-card:hover {
  transform: none;
  box-shadow: none;
}

.student-resources-v2 .sr2-card-visual,
.student-resources-v2 .sr2-card.is-personal .sr2-card-visual,
.student-resources-v2 .sr2-recommendation,
.student-resources-v2 .sr2-empty-state {
  background: var(--sr2-surface-soft);
}

.student-resources-v2 .sr2-card p,
.student-resources-v2 .sr2-side-card > p,
.student-resources-v2 .sr2-empty-state p {
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .student-resources-v2 .sr2-hero-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 20px 20px;
  }

  .student-resources-v2 .sr2-hero-summary > div {
    min-height: 80px;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 6px;
    padding: 12px 6px;
    text-align: center;
  }

  .student-resources-v2 .sr2-hero-summary strong {
    font-size: 22px;
  }

  .student-resources-v2 .sr2-hero-summary span {
    font-size: 11px;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 760px) {
  .student-resources-v2 .sr2-hero-copy {
    padding: 20px;
  }
}

.student-resources-v2 .sr2-hero,
.student-resources-v2 .sr2-toolbar,
.student-resources-v2 .sr2-tabs,
.student-resources-v2 .sr2-card,
.student-resources-v2 .sr2-side-card,
.student-resources-v2 .sr2-empty-state {
  color: var(--sr2-text);
}

.student-resources-v2 .sr2-hero-summary,
.student-resources-v2 .sr2-hero-summary > div,
.student-resources-v2 .sr2-hero-secondary,
.student-resources-v2 .sr2-add-note,
.student-resources-v2 .sr2-search,
.student-resources-v2 .sr2-select-wrap,
.student-resources-v2 .sr2-sort,
.student-resources-v2 .sr2-connection-row,
.student-resources-v2 .sr2-pronote summary,
.student-resources-v2 .sr2-pronote-fields input {
  color: var(--sr2-text);
}

.student-resources-v2 .sr2-hero p,
.student-resources-v2 .sr2-hero-summary span,
.student-resources-v2 .sr2-card p,
.student-resources-v2 .sr2-card-topline time,
.student-resources-v2 .sr2-card-source,
.student-resources-v2 .sr2-side-card > p,
.student-resources-v2 .sr2-practice-row small,
.student-resources-v2 .sr2-connection-row small,
.student-resources-v2 .sr2-pronote summary small,
.student-resources-v2 .sr2-empty-state p {
  color: var(--sr2-muted);
}

/* The search field is a magnet for browser autofill, which paints a grey/yellow
   box and drops the student's saved name into the query. Force the field to
   stay on-theme and never inherit the autofill fill colour. */
.student-resources-v2 .sr2-search input:-webkit-autofill,
.student-resources-v2 .sr2-search input:-webkit-autofill:hover,
.student-resources-v2 .sr2-search input:-webkit-autofill:focus,
.student-resources-v2 .sr2-pronote-fields input:-webkit-autofill,
.student-resources-v2 .sr2-pronote-fields input:-webkit-autofill:hover,
.student-resources-v2 .sr2-pronote-fields input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--sr2-text);
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  caret-color: var(--sr2-text);
  transition: background-color 9999s ease-out 0s;
}

/* Resource previews are rendered through the global modal portal, outside the
   .student-resources-v2 scope. On the light theme keep the light reading
   surface; on the dark theme give the reader a matching dark document so
   lesson text stays readable without a jarring white sheet. */
#app .modal .student-lesson-reader,
body .modal .student-lesson-reader {
  --resource-reader-text: #eef2fb;
  --resource-reader-muted: rgba(226, 232, 244, 0.66);
  --resource-reader-link: #8fb0ff;
  color: var(--resource-reader-text);
  color-scheme: dark;
}

body[data-theme="light"] #app .modal .student-lesson-reader,
body[data-theme="light"] .modal .student-lesson-reader {
  --resource-reader-text: #172033;
  --resource-reader-muted: #5f6b7d;
  --resource-reader-link: #1f5ed6;
  color: var(--resource-reader-text);
  color-scheme: light;
}

#app .modal .student-lesson-reader .lesson-content,
body .modal .student-lesson-reader .lesson-content {
  color: var(--resource-reader-text);
}

#app .modal .student-lesson-reader .lesson-content :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, table, thead, tbody, tr, th, td, strong, em),
body .modal .student-lesson-reader .lesson-content :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, table, thead, tbody, tr, th, td, strong, em) {
  color: inherit;
}

#app .modal .student-lesson-reader .lesson-content :where(a),
body .modal .student-lesson-reader .lesson-content :where(a) {
  color: var(--resource-reader-link);
}

#app .modal .student-lesson-reader .lesson-content :where(code, kbd, samp),
body .modal .student-lesson-reader .lesson-content :where(code, kbd, samp) {
  color: var(--resource-reader-text);
  background: rgba(255, 255, 255, 0.08);
}

body[data-theme="light"] .modal .student-lesson-reader .lesson-content :where(code, kbd, samp) {
  background: #eef2f7;
}

#app .modal .student-lesson-reader .lesson-content :where(pre),
body .modal .student-lesson-reader .lesson-content :where(pre) {
  color: var(--resource-reader-text);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

body[data-theme="light"] .modal .student-lesson-reader .lesson-content :where(pre) {
  border-color: rgba(118, 132, 154, 0.3);
  background: #f4f6fa;
}

#app .modal .student-lesson-reader > header .meta,
#app .modal .student-lesson-reader .hint,
#app .modal .student-lesson-reader .resource-meta-row,
body .modal .student-lesson-reader > header .meta,
body .modal .student-lesson-reader .hint,
body .modal .student-lesson-reader .resource-meta-row {
  color: var(--resource-reader-muted);
}

@media (max-width: 768px) {
  .student-resources-v2 :is(.sr2-search input, .sr2-pronote-fields input, .sr2-select-wrap select, select.sr2-sort) {
    min-height: 44px;
  }

  .student-resources-v2 .sr2-icon-action {
    width: 44px;
    height: 44px;
  }

  .student-resources-v2 .sr2-connection-row button {
    min-width: 44px;
    min-height: 44px;
  }
}
}