/* page-lessons.css: Lessons (#lessons), the lesson view, the practice set view and the course detail's Lessons
   section (lessons.js, screens/lessons.SCREEN.md). Tokens and components from dibs.css only; no new colors.
   The AI-generated line is said once per screen (owner, 23 Oct): rows carry no label. */

/* ---------- rows: one link per lesson (ST417 numbered step) ---------- */
.ls-list { margin: 0; padding: 0; list-style: none; }
.ls-row {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 56px; padding: var(--s-3) var(--s-4);
  color: inherit; text-decoration: none;
}
.ls-row:hover { background: var(--bg); text-decoration: none; }
.ls-row:focus-visible { outline-offset: -2px; }
.ls-row.is-current { background: var(--surface-2); }
.ls-row > .icon { flex-shrink: 0; color: var(--muted); }
.ls-num {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2);
  font: var(--t-label); font-variant-numeric: tabular-nums;
}
.ls-row.is-current .ls-num { background: var(--accent); color: var(--on-accent); }
.ls-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ls-title { font: var(--t-item); font-weight: 500; color: var(--ink); }
.ls-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); font: var(--t-meta); color: var(--muted); }
/* quiet per-row marker: the course banner says the state once; the row only carries a muted icon (check m1) */
.ls-soon { display: inline-flex; color: var(--muted); }
.ls-soon .icon { width: 14px; height: 14px; }

/* ---------- the Lessons page ---------- */
.ls-page { max-width: var(--w-list); }
/* the one AI-generated line on each screen: quiet, under the title */
.ls-disclaimer { margin: 0 0 var(--s-4); font: var(--t-meta); color: var(--muted); }
.ls-disclaimer--page { margin: calc(-1 * var(--s-2)) 0 var(--s-4); max-width: var(--w-read); }

/* search (LN285 results with a type label column, LN284 one plain no-results line) */
.ls-search { max-width: 880px; margin: 0 0 var(--s-6); }
.ls-search .searchbox { max-width: none; height: 46px; }
.ls-search .searchbox input { height: 44px; }
.ls-count { margin: 0 0 var(--s-2); font: var(--t-label); font-weight: 400; color: var(--muted); }
.ls-hits { max-width: 880px; margin: 0; padding: 0; list-style: none; }
.ls-hit {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 56px; padding: var(--s-2) var(--s-4); color: inherit; text-decoration: none;
}
.ls-hit:hover { background: var(--bg); text-decoration: none; }
.ls-hit:focus-visible { outline-offset: -2px; }
.ls-hit > .icon { flex-shrink: 0; color: var(--muted); }
.ls-hit-k { flex: 0 0 72px; font: var(--t-meta); color: var(--muted); }
.ls-hit-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ls-hit-t { font: var(--t-item); font-weight: 500; color: var(--ink); }
.ls-hit-sub { margin-left: var(--s-2); font-weight: 400; color: var(--ink-2); }
.ls-hit-m { font: var(--t-meta); color: var(--muted); }
.ls-hits mark { background: transparent; color: inherit; font-weight: 700; }
.ls-empty { max-width: 880px; text-align: left; align-items: flex-start; padding: var(--s-6) 0; }
.ls-empty p { max-width: var(--w-read); }

/* practice set and notes per unit (CG157 file rows, SB346 name and one line with the action at the right) */
.ls-mats { margin: 0 0 var(--s-3); padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.ls-mat { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.ls-mat + .ls-mat { border-top: 1px solid var(--line); }
.ls-mat-ic { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r-control); background: var(--accent-subtle); color: var(--accent); }
.ls-mat-ic .icon { width: 20px; height: 20px; }
.ls-mat-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ls-mat-t { font: var(--t-item); font-weight: 600; color: var(--ink); }
.ls-mat-d { font: var(--t-meta); color: var(--ink-2); }
.ls-mat-m { font: var(--t-label); font-weight: 400; color: var(--muted); }
.ls-mat-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); flex-shrink: 0; }
.ls-mat-acts .btn .icon, .ls-actions .btn .icon { width: 16px; height: 16px; color: var(--muted); }
.ls-jump { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-6); }
.ls-jump .btn.is-on { background: var(--surface-2); border-color: var(--ink-2); }
.ls-course { max-width: 880px; }
.ls-course + .ls-course { margin-top: var(--s-12); }
.ls-course-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); margin-bottom: var(--s-3); }
.ls-course-head h2 { margin: 0; }
.ls-course-sub { margin: 0; font: var(--t-meta); color: var(--muted); }
.ls-banner {
  display: flex; align-items: flex-start; gap: var(--s-2);
  margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-panel); background: var(--accent-subtle); color: var(--ink);
  font: var(--t-meta);
}
.ls-banner .icon { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
/* some course files did not load: one line with its own Try again (check M1) */
.ls-banner--warn { align-items: center; flex-wrap: wrap; background: var(--warning-subtle); }
.ls-banner--warn .icon { margin-top: 0; color: var(--warning); }
.ls-banner--warn .text-btn { margin-left: auto; min-height: 44px; }
.ls-unit + .ls-unit { margin-top: var(--s-6); }
.ls-unit h3 { margin: 0 0 var(--s-2); font: var(--t-label); color: var(--muted); }
.ls-note { margin: var(--s-3) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.ls-for { margin: 0 0 var(--s-3); font: var(--t-meta); color: var(--muted); }
.ls-state { max-width: var(--w-read); }
.ls-state .loading { padding: var(--s-6); }

/* ---------- the lesson view (PX50 reading column and rail) ---------- */
.ls-back { margin-bottom: var(--s-3); }
.ls-back .icon { width: 16px; height: 16px; }
.ls-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); align-items: start; }
@media (min-width: 1100px) {
  .ls-grid { grid-template-columns: minmax(0, 760px) minmax(260px, 340px); }
  .ls-rail { position: sticky; top: var(--s-6); }
}
.ls-main { min-width: 0; }
.ls-kicker { margin: 0 0 var(--s-1); font: var(--t-label); color: var(--muted); }
.ls-main h1 { margin: 0 0 var(--s-2); }

/* the player: our own poster (GM47), 16:9, nothing from YouTube until the press */
.ls-video { margin: 0 0 var(--s-4); }
.ls-poster, .ls-frame {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden;
}
.ls-poster {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-6);
  background-color: var(--surface);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
}
.ls-poster-state {
  display: inline-flex; align-items: center; gap: var(--s-2); align-self: center; margin: auto 0; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font: var(--t-control);
}
.ls-poster-state .icon { color: var(--muted); }
.ls-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; min-height: 72px; padding: 0;
  border: 0; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  box-shadow: var(--shadow-overlay);
}
.ls-play:hover { background: var(--accent-hover); }
.ls-play .icon { width: 28px; height: 28px; margin-left: 4px; fill: currentColor; stroke: none; }
.ls-play:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ls-frame { border: 0; background: var(--surface-2); }
.ls-video figcaption { margin-top: var(--s-2); font: var(--t-label); font-weight: 400; color: var(--muted); }

.ls-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); }
.ls-slides .icon { color: var(--muted); }
.ls-facts { margin-bottom: var(--s-6); }
.ls-facts .d-line { display: block; flex-basis: 100%; }

.ls-sec { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.ls-sec h2 { margin: 0 0 var(--s-3); }
.ls-sec p { max-width: var(--w-read); font: var(--t-body); color: var(--ink); }
.ls-recap-list { max-width: var(--w-read); margin: 0; padding-left: 1.25em; }
.ls-recap-list li + li { margin-top: var(--s-2); }
.ls-check { max-width: var(--w-read); margin: 0; padding-left: 1.5em; }
.ls-check > li + li { margin-top: var(--s-4); }
.ls-check .ls-q { margin: 0 0 var(--s-1); }
.ls-a > summary { display: list-item; min-height: 44px; padding: 10px 0; box-sizing: border-box; color: var(--accent); cursor: pointer; }
.ls-a > .ls-a-body { margin: var(--s-1) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-panel); background: var(--surface-2); }
.ls-main sub, .ls-main sup, .ls-sec sub, .ls-sec sup { font-size: .75em; line-height: 0; }

/* ---------- lesson text: Markdown with KaTeX math (lessons-text.js, owner 24 Oct) ---------- */
/* padding-right 2px: KaTeX's 2px Safari strut (.vlist-s, offset by a -2px margin) paints past a subscripted formula
   that ends a line, so field 123 of the Unit 1 practice ran 2px past its column at 360 wide (mdlatex2 fix round). */
.ls-md { max-width: var(--w-read); min-width: 0; padding-right: 2px; font: var(--t-body); color: var(--ink); overflow-wrap: break-word; }
.ls-md > p, .ls-md > ul, .ls-md > ol { margin: 0 0 var(--s-2); }
.ls-md > :last-child { margin-bottom: 0; }
.ls-md ul, .ls-md ol { padding-left: 1.25em; }
.ls-md li + li { margin-top: var(--s-1); }
.ls-md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; padding: 0 .25em; border-radius: 4px; background: var(--surface-2); }
.ls-a-body code, .ls-sol code { background: var(--surface); }
.ls-recap-p + .ls-recap-p { margin-top: var(--s-3); }
/* KaTeX draws in its own serif at 1.21em by default; 1.1em sits level with Source Sans 3 body text. */
.ls-md .katex { font-size: 1.1em; color: inherit; }
/* a formula wider than the column scrolls inside its own box, never the page (lessons-text.js fit) */
.ls-md-d { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; margin: var(--s-2) 0; padding: 2px 0; }
.ls-md-d > .katex-display { margin: 0; }
.ls-mi.is-wide { display: inline-block; max-width: 100%; overflow-x: auto; overflow-y: hidden; vertical-align: middle; padding: 2px 0; }
.ls-md-d:focus-visible, .ls-mi.is-wide:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
/* Phones hide the scrollbar, so a box that scrolls fades out at each edge that has more (a mask, so it reads the same
   on any background, light or dark) and a display box gets a hint line under it. Both appear only when the formula
   is wider than its box (lessons-text.js fit adds .ls-scrolls, .at-start and .at-end). A focused box drops the fade
   so its focus ring shows in full; the hint stays. */
.ls-scrolls { --ls-fade: 28px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ls-fade), #000 calc(100% - var(--ls-fade)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--ls-fade), #000 calc(100% - var(--ls-fade)), transparent 100%); }
.ls-scrolls.at-start { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--ls-fade)), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - var(--ls-fade)), transparent 100%); }
.ls-scrolls.at-end { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ls-fade)); mask-image: linear-gradient(to right, transparent 0, #000 var(--ls-fade)); }
.ls-scrolls.at-start.at-end, .ls-scrolls:focus-visible { -webkit-mask-image: none; mask-image: none; }
.ls-scroll-hint { display: flex; align-items: center; gap: 6px; margin: calc(var(--s-1) * -1) 0 var(--s-2); font: var(--t-meta); color: var(--muted); }
.ls-scroll-hint::after { content: ''; width: 14px; height: 8px; flex-shrink: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M0 4h12M9 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M0 4h12M9 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain; }
.ls-scrolls.at-end + .ls-scroll-hint::after { transform: scaleX(-1); }
.ls-tex-err { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; color: var(--ink-2); }

.ls-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-8); }
.ls-step { min-width: 0; justify-content: flex-start; gap: var(--s-2); min-height: 56px; padding: var(--s-2) var(--s-3); text-align: left; }
.ls-step--next { grid-column: 2; justify-content: flex-end; text-align: right; }
.ls-step > span { display: flex; flex-direction: column; min-width: 0; }
.ls-step-k { font: var(--t-label); color: var(--muted); }
.ls-step-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-step .icon { flex-shrink: 0; color: var(--muted); }

.ls-rail-h { margin: 0 0 var(--s-2); font: var(--t-label); color: var(--muted); }

/* ---------- the practice set view: problems by level, each solution behind a disclosure (SN79) ---------- */
.ls-practice .ls-main { max-width: var(--w-read); }
.ls-lede { margin: 0 0 var(--s-2); font: var(--t-body); color: var(--ink-2); }
.ls-how { margin: 0 0 var(--s-2); font: var(--t-meta); color: var(--ink-2); }
.ls-level { margin-top: var(--s-8); }
.ls-level > h2 { margin: 0 0 var(--s-2); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.ls-level-n { margin-left: var(--s-2); font: var(--t-meta); color: var(--muted); }
.ls-probs { margin: 0; padding: 0; list-style: none; }
.ls-prob { padding: var(--s-4) 0; scroll-margin-top: 72px; }
.ls-prob + .ls-prob { border-top: 1px solid var(--line); }
.ls-prob-h { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-1); font: var(--t-item); font-weight: 600; }
.ls-prob-h:focus-visible { outline-offset: 4px; }
.ls-prob-for { margin: 0 0 var(--s-2); font: var(--t-meta); color: var(--muted); }
.ls-prob-for a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.ls-prob-need { margin: var(--s-2) 0 0; font: var(--t-meta); font-weight: 600; color: var(--ink-2); }
.ls-prob-q { margin: 0 0 var(--s-2); }
.ls-parts { margin: 0 0 var(--s-2); padding-left: 1.75em; list-style: lower-alpha; }
.ls-parts li + li { margin-top: var(--s-1); }
.ls-sol { margin-top: var(--s-1); padding: var(--s-3) var(--s-4); border-radius: var(--r-panel); background: var(--surface-2); }
.ls-sol p { margin: 0 0 var(--s-2); }
.ls-sol p:last-child { margin-bottom: 0; }
.ls-sol > .ls-md { margin: 0 0 var(--s-2); }
.ls-sol > .ls-md:last-child { margin-bottom: 0; }
.ls-sol-k { font: var(--t-label); color: var(--muted); }
.ls-sol-a { font-weight: 600; }
.ls-prob-q.ls-md { max-width: none; }
.ls-prob-need.ls-md { max-width: none; font: var(--t-meta); font-weight: 600; color: var(--ink-2); }
.ls-practice sub, .ls-practice sup, .ls-hits sub, .ls-hits sup { font-size: .75em; line-height: 0; }
.ls-list--rail .ls-row { min-height: 52px; padding: var(--s-2) var(--s-3); }
.ls-list--rail .ls-title { font: var(--t-meta); font-weight: 500; }

/* ---------- the course detail section (discover.js courseBody) ---------- */
.dsec--lessons .ls-row { padding: var(--s-2) var(--s-3); min-height: 52px; }
.dsec--lessons .ls-title { font: var(--t-meta); font-weight: 500; }
.dsec--lessons .ls-all { margin-top: var(--s-2); }
.dsec--lessons .ls-all .icon { width: 16px; height: 16px; }

/* ---------- department scale (owner, 24 Oct): kind filter, division groups, course rows ---------- */
/* PX227 / LN106: one row of filter chips, each with its count */
.ls-kinds { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: calc(-1 * var(--s-2)) 0 var(--s-6); }
.ls-kbtn, .ls-stab {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink-2); font: var(--t-control); text-decoration: none; white-space: nowrap;
}
/* a series pill carries the full label, so it may wrap inside the column at 320 instead of scrolling the page */
.ls-stab { max-width: 100%; white-space: normal; padding-block: var(--s-1); border-radius: 18px; }
.ls-stab .icon, .ls-stab .ls-kn { flex-shrink: 0; }
.ls-kbtn:hover, .ls-stab:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.ls-kbtn[aria-pressed="true"], .ls-stab[aria-current] { background: var(--surface-2); border-color: var(--ink-2); color: var(--ink); font-weight: 600; }
.ls-kbtn .icon, .ls-stab .icon { width: 16px; height: 16px; }
.ls-kbtn--term .icon, .ls-stab--term .icon { color: var(--accent); }
.ls-kn { font: var(--t-label); font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

/* the series kind, in words and in look: outline neutral with a list mark, term accent with a calendar mark */
.ls-kind {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 22px; padding: 1px var(--s-2);
  border-radius: var(--r-pill); font: var(--t-label);
}
.ls-kind .icon { flex-shrink: 0; width: 14px; height: 14px; }
/* the full term label ("Matched to Winter 2027 lectures, series A") wraps on a phone rather than being cut (m4) */
.ls-kind > span { min-width: 0; overflow: hidden; overflow-wrap: anywhere; }
.ls-kind--outline { background: var(--surface-2); color: var(--ink-2); }
.ls-kind--term { background: var(--accent-subtle); color: var(--accent); }

/* LN324: a header bar per division with its count, then the course rows (CG120 two columns when there is room) */
.ls-div { max-width: var(--w-list); }
.ls-div + .ls-div { margin-top: var(--s-8); }
.ls-div-h {
  display: flex; align-items: center; gap: var(--s-2); min-height: 36px; margin: 0 0 var(--s-1); padding: 0 var(--s-4);
  border-radius: var(--r-control); background: var(--surface-2); color: var(--ink-2); font: var(--t-label);
}
.ls-div-n { font-weight: 400; color: var(--muted); }
.ls-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); column-gap: var(--s-6); margin: 0; padding: 0; list-style: none; }
.ls-courses > li { border-bottom: 1px solid var(--line); }
.ls-crow { display: flex; align-items: center; gap: var(--s-3); min-height: 64px; padding: var(--s-3) var(--s-2); border-radius: var(--r-control); color: inherit; text-decoration: none; }
.ls-crow:hover { background: var(--surface); text-decoration: none; }
.ls-crow:focus-visible { outline-offset: -2px; }
.ls-crow > .icon { flex-shrink: 0; color: var(--muted); }
.ls-ctile {
  display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--r-control);
  background: var(--accent-subtle); color: var(--accent); font: 600 14px/1 var(--font-ui); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; overflow: hidden;
}
.ls-cbody { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ls-ct { font: var(--t-item); color: var(--ink); }
.ls-ccode { font-weight: 600; }
.ls-cname { margin-left: var(--s-2); font-weight: 400; color: var(--ink-2); }
.ls-cmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); font: var(--t-meta); color: var(--muted); }
.ls-ckinds { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); min-width: 0; }
.ls-cover { max-width: var(--w-read); margin: var(--s-8) 0 0; font: var(--t-meta); color: var(--muted); }
.ls-searching { padding: var(--s-4) 0; }
.ls-hit-t .icon { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--muted); }

/* a course: facts, the series pills (PX305), then the chosen series with its kind said in the heading */
.ls-cpage { max-width: 880px; }
.ls-cfacts { margin: 0 0 var(--s-4); }
.ls-stabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-6); }
.ls-shead { display: flex; align-items: flex-start; gap: var(--s-3); margin: 0 0 var(--s-3); }
.ls-sh-ic { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--r-control); background: var(--surface-2); color: var(--ink-2); }
.ls-sh-ic .icon { width: 20px; height: 20px; }
.ls-series--term .ls-sh-ic, .ls-sh-ic--term { background: var(--accent-subtle); color: var(--accent); }
.ls-sh-body { min-width: 0; }
.ls-sh-body h2 { margin: 0; }
.ls-sline { margin: 2px 0 var(--s-1); font: var(--t-meta); color: var(--ink-2); }

/* the course pane: one line for a single series, link rows when there are more */
.ls-pser { margin: 0 0 var(--s-2); padding: 0; list-style: none; }
.ls-pser > li + li { border-top: 1px solid var(--line); }
.ls-pser-row { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: var(--s-2) var(--s-1); color: inherit; text-decoration: none; }
.ls-pser-row:hover { background: var(--bg); text-decoration: none; }
.ls-pser-row > .icon { flex-shrink: 0; color: var(--muted); }
.ls-pser-row .ls-sh-ic { width: 32px; height: 32px; }
.ls-pser-b { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ls-pser-t { font: var(--t-meta); font-weight: 600; color: var(--ink); }
.ls-pser-m { font: var(--t-label); font-weight: 400; color: var(--muted); }
.ls-pser-one { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: 0 0 var(--s-2); font: var(--t-meta); color: var(--ink-2); }

/* ---------- phones ---------- */
@media (max-width: 599px) {
  .ls-poster { padding: var(--s-4); }
  .ls-play { width: 64px; height: 64px; min-height: 64px; }
  .ls-steps { grid-template-columns: minmax(0, 1fr); }
  .ls-step--next { grid-column: 1; }
  .ls-row { padding: var(--s-3); }
  .ls-hit { gap: var(--s-3); padding: var(--s-2) var(--s-3); }
  .ls-hit-k { flex-basis: 52px; }
  .ls-hit-sub { display: block; margin-left: 0; }
  .ls-mat { flex-wrap: wrap; padding: var(--s-3); }
  .ls-mat-body { flex-basis: calc(100% - 52px); }
  .ls-mat-acts { flex-basis: 100%; justify-content: flex-start; padding-left: 52px; }
  .ls-mat-acts .btn { min-height: 44px; }
  .ls-actions .btn { min-height: 44px; }
  .ls-cname { display: block; margin-left: 0; }
  .ls-kbtn, .ls-stab { min-height: 44px; }
  .ls-crow { padding: var(--s-3) 0; }
  .ls-div-h { padding: 0 var(--s-3); }
}
@media (pointer: coarse) { .ls-mat-acts .btn, .ls-actions .btn, .ls-back, .ls-kbtn, .ls-stab { min-height: 44px; } }
@media (max-width: 400px) {
  .ls-poster { padding: var(--s-3); }
  .ls-hit-k { display: none; }
  .ls-mat-acts { padding-left: 0; }
  .ls-poster-state { padding: var(--s-1) var(--s-2); font: var(--t-label); }
}