/* «Предметы» (Max 12.10): points, attendance and checks from the LMS, on top of the library (notes.css).
   Prefix sj- (subject). Reading screen: no motion of its own, colour only where it means something —
   sent back (danger), absent (danger), everything else in the text greys. */

/* ---------- Row in the subject list ---------- */
.sj-row { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.sj-row__side { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.sj-row .badge--warn { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger-text); }

.sj-score { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: end; column-gap: 1px; min-width: 64px; color: var(--text-3); font-size: var(--fs-14); }
.sj-score b { color: var(--text); font-size: var(--fs-18); font-weight: 600; letter-spacing: -0.02em; }
.sj-score i { grid-column: 1 / -1; display: block; height: 3px; margin-top: 4px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.sj-score i::before { content: ""; display: block; width: calc(var(--p) * 100%); height: 100%; border-radius: inherit; background: var(--subj, var(--accent)); }

.sj-locked { margin-bottom: 12px; color: var(--text-2); font-size: var(--fs-14); }

@media (max-width: 599px) {
  .sj-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
  .sj-row__side { grid-column: 2 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .sj-row__side .sj-score { order: -1; margin-right: auto; }
}

/* ---------- Subject page ---------- */
.sj-stats { display: grid; gap: 12px; margin-bottom: 32px; }
@media (min-width: 760px) { .sj-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sj-tile { display: grid; align-content: start; gap: 6px; padding: 20px 24px; border-radius: var(--r-xl); background: var(--surface); }
.sj-tile__label { color: var(--text-3); font-size: var(--fs-14); }
.sj-tile__big { color: var(--text-2); font-size: var(--fs-18); }
.sj-tile__big b { color: var(--text); font-family: var(--font-headline); font-size: 2.25rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; }
.sj-tile__sub { color: var(--text-3); font-size: var(--fs-14); }

.sj-bar { display: block; height: 6px; margin-top: 6px; border-radius: 6px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.sj-bar i { display: block; width: calc(var(--p) * 100%); height: 100%; border-radius: inherit; background: var(--accent); }

/* One dot per past class, oldest first: was / late / away / away for a good reason / not marked. */
.sj-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sj-dots i { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.sj-dots i.is-late { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.sj-dots i.is-absent { background: var(--danger); }
.sj-dots i.is-excused { background: transparent; box-shadow: inset 0 0 0 2px var(--danger); }
.sj-dots i.is-none { background: color-mix(in srgb, var(--text) 10%, transparent); }

.sj-section { margin-bottom: 32px; }
.sj-section__title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-family: var(--font-ui); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em; }

.sj-group { margin-bottom: 16px; }
.sj-group__title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--text-2); font-size: var(--fs-14); font-weight: 600; }
details.sj-group > summary { cursor: pointer; list-style: none; }
details.sj-group > summary::-webkit-details-marker { display: none; }
details.sj-group > summary::after { content: "\203A"; color: var(--text-3); transition: transform var(--dur-micro) var(--ease-out); }
details.sj-group[open] > summary::after { transform: rotate(90deg); }
.sj-group.is-rework .sj-group__title { color: var(--danger-text); }

.sj-topics { display: grid; border-radius: var(--r-xl); background: var(--surface); overflow: hidden; }
.sj-topic { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 16px; padding: 14px 20px; }
.sj-topic + .sj-topic::before { content: ""; position: absolute; top: 0; left: 20px; right: 0; height: 1px; background: var(--border); }
.sj-topic__body { min-width: 0; display: grid; gap: 2px; }
.sj-topic__name { font-weight: 500; letter-spacing: -0.01em; }
.sj-topic__chapter { color: var(--text-3); font-size: var(--fs-12); }
.sj-kt { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-ink); font-size: 0.6875rem; font-weight: 700; vertical-align: 2px; }
.sj-topic__score { color: var(--text-2); font-size: var(--fs-14); white-space: nowrap; }
.sj-topic.is-passed .sj-topic__score { color: var(--text); font-weight: 600; }
.sj-topic__lxp { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--text-3); }
.sj-topic__lxp:hover { background: var(--surface-2); color: var(--text); }
.sj-topic__lxp svg { width: 15px; height: 15px; }

/* What the teacher wrote on a work sent back: the reason, quoted, not retold. */
.sj-topic__comment { margin: 8px 0 0; padding: 10px 14px; border-left: 3px solid var(--danger); border-radius: 0 var(--r-md) var(--r-md) 0; background: color-mix(in srgb, var(--danger) 7%, transparent); color: var(--text); font-size: var(--fs-14); line-height: 1.5; }
.sj-topic__comment span { display: block; margin-top: 4px; color: var(--text-3); font-size: var(--fs-12); }

@media (max-width: 599px) {
  .sj-tile { padding: 18px 20px; }
  .sj-tile__big b { font-size: 1.875rem; }
  .sj-topic { padding: 14px 16px; gap: 10px; }
}

@media print {
  .sj-topic__lxp { display: none; }
}

/* The LMS mark next to the points (Max 12.10): 2 red, 3 apricot, 4 our violet, 5 sage; a dash when there is none. */
.sj-mark { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); font-weight: 700; font-size: var(--fs-14); }
.sj-mark--2 { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger-text); }
.sj-mark--3 { background: var(--warning-soft); color: color-mix(in srgb, var(--warning) 65%, var(--text)); }
.sj-mark--4 { background: var(--accent-soft); color: var(--accent-ink); }
.sj-mark--5 { background: var(--success-soft); color: color-mix(in srgb, var(--success) 75%, var(--text)); }
.sj-mark--none { background: transparent; color: var(--text-3); font-weight: 500; }

/* Critique 20.10: the list kept the browser's 40px indent, every task started a column to the right of the card. */
.sj-topics { margin: 0; padding: 0; list-style: none; }
/* The fold arrow is the same chevron as everywhere else, not a «›» glyph. */
details.sj-group > summary::after { content: none; }
details.sj-group > summary svg { width: 14px; height: 14px; color: var(--text-3); transition: transform var(--dur-state) var(--ease-out); }
details.sj-group[open] > summary svg { transform: rotate(180deg); }

/* What the subject's pairs said, in one place (Max 28.10): the teacher's lasting rules, the glossary. Same plane of
   rows as the tasks; each row leads back to the pair it came from by its date. */
.sj-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sj-section__head .sj-section__title { margin-bottom: 0; }
.sj-rules,
.sj-terms { margin: 0; padding: 0; list-style: none; border-radius: var(--r-xl); background: var(--surface); overflow: hidden; }
.sj-rule { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 13px 20px; line-height: 1.5; }
.sj-rule + .sj-rule::before,
.sj-term:nth-child(n+3)::before { content: ""; position: absolute; top: 0; left: 20px; right: 0; height: 1px; background: var(--border); }
.sj-src { color: var(--text-3); font-size: var(--fs-12); white-space: nowrap; text-decoration: none; font-variant-numeric: tabular-nums; }
.sj-src:hover { color: var(--accent-text); }
.sj-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sj-term { position: relative; display: grid; gap: 2px; padding: 12px 20px; }
.sj-term__word { justify-self: start; color: var(--text); font-weight: 600; text-decoration: none; }
.sj-term__word:hover { color: var(--accent-text); }
.sj-term__short { color: var(--text-2); font-size: var(--fs-14); line-height: 1.45; }
.sj-terms + .list-more { margin-top: 10px; }
/* «Запись» in a note row of the subject: the pair's recording from its first second. */
.lib-note__rec { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border: 0; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-text); font: inherit; font-size: var(--fs-12); font-weight: 600; cursor: pointer; }
.lib-note__rec svg { width: 11px; height: 11px; }
.lib-note__rec:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

@media (max-width: 719px) {
  .sj-terms { grid-template-columns: minmax(0, 1fr); }
  .sj-term:nth-child(2)::before { content: ""; position: absolute; top: 0; left: 20px; right: 0; height: 1px; background: var(--border); }
}
@media (max-width: 599px) {
  .sj-rule,
  .sj-term { padding: 12px 16px; }
  .sj-rule + .sj-rule::before,
  .sj-term:nth-child(n+2)::before { left: 16px; }
  .sj-section__head { flex-wrap: wrap; row-gap: 10px; }
  .sj-section__head .sj-section__title { flex: 1 0 100%; }
}
@media print {
  .lib-note__rec,
  [data-terms-quiz] { display: none; }
}