/* Library, in colour.
   Every saved thing wears its subject: the card is tinted in the subject's hue
   (--subj from aria-subjects.js) with its emoji, so Physics notes, Physics papers and
   Physics flashcards read as one family. The type label keeps its category colour.
   Rules start with :root[data-theme] to outrank student-mono.css. */

/* ---- Header -------------------------------------------------------------- */
:root[data-theme] .lib-chip-emoji { font-size: 15px; line-height: 1; margin-right: -2px; }
:root[data-theme] .lib-subjects:not([hidden]) {
  display: flex; gap: 8px; margin: 0 -16px; padding: 2px 16px 4px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
:root[data-theme] .lib-subjects::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { :root[data-theme] .lib-subjects:not([hidden]) { margin: 0 -32px; padding: 2px 32px 4px; flex-wrap: wrap; overflow: visible; } }
:root[data-theme] .lib-subject {
  --subj: var(--ag-text);
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 8px 0 12px;
  border: 1px solid color-mix(in srgb, var(--subj) 24%, var(--ag-hairline)); border-radius: 999px;
  background: color-mix(in srgb, var(--subj) 7%, var(--ag-bg)); color: var(--ag-text);
  font: 500 13.5px var(--ag-font); cursor: pointer;
  transition: transform 0.2s var(--aria-ease), background-color 0.2s ease, border-color 0.2s ease;
}
:root[data-theme] .lib-subject:first-child { padding-right: 12px; }
:root[data-theme] .lib-subject:hover { border-color: var(--subj); }
:root[data-theme] .lib-subject:active { transform: scale(0.97); }
:root[data-theme] .lib-subject .lib-count { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--subj) 16%, var(--ag-bg)); font: 600 11.5px var(--ag-font); text-align: center; font-variant-numeric: tabular-nums; }
:root[data-theme] .lib-subject.is-on { background: var(--subj); border-color: var(--subj); color: #ffffff; }
:root[data-theme] .lib-subject.is-on .lib-count { background: rgba(255, 255, 255, 0.22); color: #ffffff; }
:root[data-theme] .lib-subject:first-child.is-on { background: var(--mono-inv); border-color: var(--mono-inv); color: var(--mono-on-inv); }

/* ---- Sections ------------------------------------------------------------ */
:root[data-theme] .lib-head-emoji { font-size: 28px; line-height: 1; margin-right: 4px; }
:root[data-theme] section.lib-filtered-out { display: none !important; }

/* ---- Cards --------------------------------------------------------------- */
:root[data-theme] .lib-card {
  position: relative; gap: 0 !important;
  border-color: color-mix(in srgb, var(--subj, var(--ag-text)) 20%, var(--ag-hairline)) !important;
  background: color-mix(in srgb, var(--subj, var(--ag-text)) 6%, var(--ag-bg)) !important;
  animation: aria-rise 0.55s var(--aria-ease) both; animation-delay: calc(var(--i, 0) * 45ms);
}
:root[data-theme] :is(#notes-grid, #exams-grid, #cards-grid, #quizzes-grid, #slides-grid) .lib-card:hover { border-color: var(--subj, var(--ag-text)) !important; transform: translateY(-3px); }
:root[data-theme] .lib-card-top { justify-content: flex-start !important; gap: 10px !important; }
:root[data-theme] .lib-emoji {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px;
  background: color-mix(in srgb, var(--subj, var(--ag-text)) 15%, var(--ag-bg)); font-size: 20px; line-height: 1;
  transition: transform 0.4s var(--aria-spring);
}
:root[data-theme] .lib-card:hover .lib-emoji { transform: rotate(-8deg) scale(1.06); }
:root[data-theme] .lib-card-top .lib-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] .lib-card h4 { margin-top: 14px; }
:root[data-theme] .lib-card .lib-where { margin-top: 6px; font-size: 13px !important; font-weight: 500; color: var(--ag-text-2) !important; -webkit-line-clamp: 1 !important; }
:root[data-theme] .lib-card .lib-preview { margin-top: 8px; }
:root[data-theme] .lib-card-foot { margin-top: auto !important; border-top-color: color-mix(in srgb, var(--subj, var(--ag-text)) 16%, var(--ag-hairline)) !important; }
/* The footer sits at the bottom, always at least 16px below the words. */
:root[data-theme] .lib-card > :nth-last-child(2) { margin-bottom: 16px; }

/* A paper's score in the score band colours. */
:root[data-theme] .lib-card .lib-score {
  align-self: flex-start; display: inline-flex !important; align-items: baseline; gap: 6px; margin: 12px 0 14px; padding: 5px 12px;
  border-radius: 999px; font-size: 13px !important; color: var(--ag-text) !important;
  background: color-mix(in srgb, var(--band, var(--ag-text-3)) 13%, var(--ag-bg));
}
:root[data-theme] .lib-card .lib-score b { font-size: 15px; color: var(--band, var(--ag-text)); font-variant-numeric: tabular-nums; }
:root[data-theme] .lib-score[data-band="good"] { --band: var(--c-good, var(--hue-green)); }
:root[data-theme] .lib-score[data-band="mid"] { --band: var(--c-mid, var(--hue-amber)); }
:root[data-theme] .lib-score[data-band="low"] { --band: var(--c-low, var(--hue-red)); }
:root[data-theme] .lib-score[data-band="none"] { --band: var(--ag-text-3); color: var(--ag-text-2) !important; }

/* A flashcard deck looks like a deck: two cards peeking out underneath, drawn as
   offset shadows so they always sit behind the front card. */
:root[data-theme] #cards-grid .lib-card {
  --edge: color-mix(in srgb, var(--subj, var(--ag-text)) 24%, var(--ag-hairline));
  --sheet: color-mix(in srgb, var(--subj, var(--ag-text)) 4%, var(--ag-bg));
  box-shadow: 0 7px 0 -5px var(--sheet), 0 7px 0 -4px var(--edge), 0 14px 0 -10px var(--sheet), 0 14px 0 -9px var(--edge) !important;
  transition: transform 0.3s var(--aria-ease), box-shadow 0.3s var(--aria-ease), border-color 0.2s ease;
}
:root[data-theme] #cards-grid .lib-card:hover {
  box-shadow: 0 9px 0 -5px var(--sheet), 0 9px 0 -4px var(--edge), 0 18px 0 -10px var(--sheet), 0 18px 0 -9px var(--edge) !important;
}
:root[data-theme] #cards-grid:not(.hidden) { row-gap: 28px !important; padding-bottom: 14px; }

/* ---- Reader -------------------------------------------------------------- */
:root[data-theme] .lib-sheet { border-top: 6px solid var(--subj, var(--ag-hairline-strong)) !important; }
:root[data-theme] .lib-sheet-icon { background: color-mix(in srgb, var(--subj, var(--ag-text)) 15%, var(--ag-bg)) !important; }
:root[data-theme] #preview-icon.is-emoji { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: 22px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .lib-card { animation: none !important; }
  :root[data-theme] #cards-grid .lib-card:hover::before, :root[data-theme] #cards-grid .lib-card:hover::after, :root[data-theme] .lib-card:hover .lib-emoji { transform: none; }
}