/* Lecții index: chapter cards (listă) + knowledge map (hartă). */

/* ---- Header tools ---- */
.lx-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
  min-width: min(100%, 240px);
}

.lx-search {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xs);
  padding: 0 12px;
  height: 38px;
  flex: 1;
  min-width: 170px;
  max-width: 270px;
}
.lx-search input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13.5px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  padding: 0;
}
.lx-search-clear {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: var(--r-pill);
  background: var(--sand);
  color: var(--muted);
}
.lx-search-clear:hover { background: var(--border); color: var(--ink); }
.lx-search-clear[hidden] { display: none; }

/* View panes: the [hidden] toggle must beat each pane's own `display` (a class
   selector otherwise outranks the UA `[hidden]{display:none}` rule, so the
   Listă/Hartă switch would show nothing). */
[data-lx-pane][hidden] { display: none !important; }

/* ---- Chapter cards (listă) ---- */
.lx-list { display: flex; flex-direction: column; gap: 14px; }

.lx-chapter { overflow: hidden; }

.lx-ch-head { padding: 16px 20px; cursor: pointer; display: flex; align-items: center; gap: 16px; }
.lx-ch-head:hover { background: var(--surface-2); }

.lx-ring { position: relative; width: 54px; height: 54px; flex: none; }
.lx-ring-frac {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif); font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--slate);
}

.lx-ch-main { flex: 1; min-width: 0; }
.lx-ch-title-row { display: flex; align-items: center; gap: 10px; }
.lx-ch-name { font-size: 15.5px; font-weight: 600; color: var(--ink); }
/* The pass counter ("lecție nouă" / "trecerea a N-a"), NOT a new-content flag —
   it is `pass_num` from progress/rows.py. `nowrap` is load-bearing at every
   width: without it the label broke mid-word ("trecerea a 2-" / "a") into a
   40px-tall pill and dragged the whole card's height with it. */
.lx-ch-pass {
  background: var(--surface);
  border-radius: var(--r-pill);
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  flex: none;
}
/* There used to be a teal `--new` variant here for the first pass. It is gone with
   the first-pass label itself: every chapter starts on pass 1, so the pill wore the
   loud colour on all 20 cards and the quiet colour on none. Now only "trecerea a
   N-a" is ever rendered, and a repeat pass is the thing worth noticing. */
.lx-ch-meta { margin-top: 3px; font-size: 12.5px; color: var(--muted-2); }

.lx-ch-side { display: flex; align-items: center; gap: 22px; flex: none; }
.lx-ch-stats { display: flex; align-items: center; gap: 22px; }
.lx-ch-stat { text-align: right; }
.lx-ch-stat-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.lx-ch-stat-val {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}

.lx-chevron { flex: none; transition: transform .18s ease; }
.lx-chapter.is-open .lx-chevron { transform: rotate(180deg); }

/* Open chapter body sits on white (the card colour) so the list reads as a
   clean white card against the cream page, not a low-contrast tinted block. */
.lx-ch-body { display: none; border-top: 1px solid var(--divider); background: var(--card); }
.lx-chapter.is-open .lx-ch-body { display: block; }

/* ---- Lesson rows ---- */
.lx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Indent rows so the icon/title align under the chapter name
     (header pad 20 + ring 54); reset to flush on mobile below. */
  padding: 8px 20px 8px 74px;
  /* Sized so the 28px CTA fits inside the same height as a plain 20px label —
     without it the one in-progress row is 10px taller and puts a visible step in
     the list, which is the opposite of what the button is there to do. */
  min-height: 44px;
  color: inherit;
}
.lx-row + .lx-row { border-top: 1px solid var(--divider); }
.lx-row:hover { background: var(--surface); color: inherit; }

.lx-state { flex: none; }

.lx-row-main { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.lx-row-title { font-size: 14px; font-weight: 500; color: var(--ink); }
.lx-row--new .lx-row-title { color: var(--muted-2); }
.lx-row--progress { background: var(--teal-tint-2); }
/* Teal, but NOT bold any more: the emphasis moved to the CTA beside it, and three
   signals on one row (wash + bold + button) is one too many.
   NB this does not stop the title wrapping on a phone — measured, it needs 217px
   and the row gives it 207 either way. Two lines on a 390px screen is normal here
   (two other rows in the same chapter already wrap) and it was not worth shaving
   paddings to fix one particular lesson title. */
.lx-row--progress .lx-row-title { color: var(--teal-ink); }

/* `.lx-badge` ("În curs · N%") and `.lx-tier` ("Premium") lived here. Both are
   gone from the row: the first repeated what the row's own teal treatment and
   "Continuă" already say, and the second fired on a single lesson out of 152.
   `lesson_row` still returns `pct` and `min_tier` — the map view reads them, and
   the paywall is enforced server-side in `lesson_detail` regardless. */

/* Right side of a lesson row: score OR action, then a fixed chevron slot (ghosted
   on non-done rows, so the column is always reserved). */
.lx-row-right { flex: none; display: flex; align-items: center; gap: 8px; }
.lx-value { text-align: right; white-space: nowrap; }
.lx-score {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lx-row-chev { flex: none; }
.lx-row:hover .lx-row-chev { stroke: var(--muted-2); }

/* The one CTA in a chapter: the lesson you are in the middle of. It is a <span>,
   not a <button> — the row itself is the link (see index.html). It reacts to the
   ROW's hover rather than its own, which is the honest signal: what you are
   pressing is the row, and the button is telling you what that will do. */
.lx-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  background: var(--teal);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(14, 124, 123, .22);
  transition: background .16s ease, transform .16s ease;
}
.lx-row:hover .lx-cta { background: var(--teal-hover); }
.lx-row:active .lx-cta { transform: translateY(1px); }
.lx-cta svg { flex: none; transition: transform .16s ease; }
.lx-row:hover .lx-cta svg { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .lx-cta, .lx-cta svg { transition: none; }
  .lx-row:hover .lx-cta svg { transform: none; }
}
/* `.lx-action` lived here — the "Începe" label on unstarted rows. Gone: it named the
   one thing every row in the list already does, on ~130 rows at once. What tells you
   a row opens something is the chevron, and the only row worth a word is the one you
   are in the middle of, which has `.lx-cta` above. */

.lx-noresults {
  background: var(--card);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-md);
  padding: 36px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lx-noresults[hidden] { display: none; }
.lx-noresults-title { font-size: 14.5px; font-weight: 600; color: var(--slate); }
.lx-noresults-sub { font-size: 13px; color: var(--muted-2); }

/* ---- Hartă (knowledge map) ---- */
.lx-map { padding: 22px 24px; }

.lx-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.lx-map-note { font-size: 13px; color: var(--muted); }
.lx-map-count { font-weight: 600; color: var(--ink); }

.lx-legend {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--muted-2);
}
.lx-legend-cell { width: 16px; height: 16px; border-radius: 5px; }
.lx-legend-gap { margin-left: 8px; }

.lx-map-row {
  display: flex;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 9px;
  flex-wrap: wrap;
}
/* Right-aligned single-line labels (ellipsis for long chapter names) + small
   cells, matching the dashboard map preview so the two read as one system. */
.lx-map-label { width: 208px; flex: none; display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; min-width: 0; }
.lx-map-ch { font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-map-n { font-family: var(--font-serif); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--muted-2); flex: none; }

.lx-map-cells { display: flex; flex-wrap: wrap; gap: 5px; }
.lx-cell {
  width: 19px; height: 19px;
  border-radius: 5px;
  cursor: pointer;
  transition: opacity .2s, box-shadow .2s;
}
.lx-cell:hover { box-shadow: 0 0 0 2px rgba(15, 34, 48, .25); }
.lx-cell.is-selected { box-shadow: 0 0 0 2px var(--ink); }
/* The lesson currently being read — the map's one standing landmark. */
.lx-cell.is-current { box-shadow: 0 0 0 2px var(--teal); }
/* Search: the grid never loses a cell (that would reshuffle the map), the
   misses just fade back and the hits keep their colour and get a ring. */
.lx-cell.is-dim { opacity: .22; }
.lx-cell.is-hit { box-shadow: 0 0 0 2px var(--teal); }

.lx-map-foot { margin-top: 8px; font-size: 12px; color: var(--muted-2); }

/* ---- Map + side preview ----
   On a wide screen the grid keeps its size and the room to its right becomes
   the preview panel, instead of a header pushing the map down. Below 1240px
   the grid needs the whole card, so the panel steps aside and the compact
   strip (partials/map_preview.html) takes over. */
.lx-map-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 26px;
  align-items: start;
}
.lx-map-gridcol { min-width: 0; }
/* the strip is the narrow-screen preview only */
.lx-map-gridcol .map-sel { display: none; }

.map-side {
  position: sticky;
  top: 16px;
  border-left: 1px solid var(--divider);
  padding-left: 22px;
  min-height: 190px;
}
.map-side-empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted-2);
  padding-top: 8px;
}
/* its own display:flex would otherwise beat the UA's [hidden] rule */
.map-side-empty[hidden] { display: none; }
.map-side-empty svg { color: var(--border-2, #D4CDBE); }
.map-side-empty-t { font-size: 13.5px; font-weight: 600; color: var(--slate); }
.map-side-empty-s { font-size: 12.5px; line-height: 1.5; }

.map-side-body { display: flex; flex-direction: column; gap: 12px; }
.map-side-body[hidden] { display: none; }
.map-side-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.map-side-swatch {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--border);
}
/* Serif kicker — the same face the lesson uses for its own headings, so the
   chapter line above the preview reads as part of that page rather than as a
   label bolted on top of it. */
.map-side-chapter {
  flex: 1;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.map-side-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted-2);
}
.map-side-close:hover { color: var(--ink); }

/* ---- The miniature ----
   A small copy of the lesson page: the same serif title and the same numbered
   Cuprins rows as the real left rail, so the preview is recognisably the thing
   you are about to open. Each row links into that section. */
.map-mini {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px 14px 6px;
  box-shadow: var(--shadow-card);
}
.map-mini-title {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--ink-warm, var(--ink));
}
.map-mini-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.map-mini-chip {
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-2);
  background: var(--canvas);
  border: 1px solid var(--cream-line, var(--border));
  border-radius: var(--r-pill);
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.map-mini-toc {
  margin-top: 10px;
  max-height: 246px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: 12px;
}
.map-mini-loading { font-size: 12.5px; color: var(--muted-2); padding: 6px 2px; }
.map-mini-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 6px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.map-mini-row:hover { background: var(--surface-2, #F0EEE9); color: inherit; }
.map-mini-n {
  flex: none;
  width: 21px;
  height: 21px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: #F0EEE9;
  color: var(--muted-2);
  box-sizing: border-box;
}
.map-mini-row.is-seen .map-mini-n { background: var(--teal); color: #FFFFFF; }
.map-mini-row.is-current .map-mini-n {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--teal);
  color: var(--teal-ink);
}
.map-mini-rowtitle {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-mini-row.is-seen .map-mini-rowtitle { color: var(--ink); }
.map-mini-row.is-current .map-mini-rowtitle { color: var(--teal-ink); font-weight: 600; }
.map-mini-min {
  flex: none;
  font-family: var(--font-serif);
  font-size: 11px;
  color: #B9B5AD;
  font-variant-numeric: tabular-nums;
}
/* the outline fades out at the bottom edge, like a page continuing past the frame */
.map-mini-fade {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 26px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--card));
  pointer-events: none;
}
.map-side-stats {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 0;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.map-side-stats[hidden] { display: none; }
.map-side-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.map-side-stat-label { color: var(--muted-2); }
.map-side-stat-val {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.map-side-next { font-size: 12.5px; color: var(--muted-2); }
.map-side-next[hidden] { display: none; }
.map-side-go {
  width: 100%;
  height: 40px;
  border-radius: 11px;
}

/* Narrow: one column, the strip comes back. Also shorten the chapter labels so
   a row does not wrap the cells onto their own line. */
@media (max-width: 1319px) {
  .lx-map-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .map-side { display: none; }
  .lx-map-gridcol .map-sel { display: flex; }
  .lx-map-label { width: 150px; }
}

@media (max-width: 767px) {
  .lx-ch-stats { display: none; }
  /* Mobile: label sits on its own left-aligned row above the cells. */
  .lx-map-label { width: 100%; justify-content: flex-start; }
  /* Mobile: rows go flush-left (icon under the ring), matching the design. */
  .lx-row { padding-left: 20px; }
}

/* ---- Lessons index: mobile ---- */
@media (max-width: 640px) {
  /* Header tools stack: search on its own full-width row, segmented toggle
     full-width below it — matches the design's mobile header. */
  .lx-tools { flex-basis: 100%; gap: 10px; }
  .lx-search { flex: 1 1 100%; max-width: none; }
  .lx-tools .seg { flex: 1 1 100%; display: flex; }
  .lx-tools .seg-btn { flex: 1; justify-content: center; }
  /* ---- Chapter head ----
     On a phone the pass tag must not share a line with the chapter name. Sharing
     it cost twice: the tag broke mid-word over two lines, and the ~80px it took
     from an already narrow column wrapped a title like "10 · Primul ajutor
     prespitalicesc în urgențe medico-chirurgicale" over FOUR lines. Between the
     two, chapter cards came out at five different heights (102–150px) and the
     list had no rhythm at all.

     So: the name owns the full width and is clamped to two lines; the tag drops
     onto the meta row beside "N lecții · în curs: …". One wrapper (`.lx-ch-main`)
     lays all three out by `order`, which is why `.lx-ch-title-row` is dissolved
     with `display: contents` — the tag and the name have to become siblings of
     the meta line to be re-ordered against it. */
  .lx-ch-head { gap: 13px; padding: 14px 16px; }

  .lx-ch-main { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; }
  .lx-ch-title-row { display: contents; }

  .lx-ch-name {
    order: 1;
    flex: 1 1 100%;
    min-width: 0;
    line-height: 1.32;
    /* Two lines is enough for every chapter name in the curriculum; the full
       name stays in the DOM for search (`data-name` on the card). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* `flex-basis: 0`, NOT `auto`. With `auto` the basis is the text's own width,
     which on a long meta ("9 lecții · în curs: Boala coronariană cronică") is
     wider than the column — so `flex-wrap` bumped it onto a THIRD line before it
     ever tried to shrink, and those cards came out 24px taller than the rest.
     From a zero basis it just grows into whatever is left and ellipsises. */
  .lx-ch-meta {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
    margin-top: 0;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Pinned to the right edge so the tags line up in a column down the list, and
     quieter than on desktop: at this size it is metadata on the meta line, not a
     badge competing with the chapter name. */
  .lx-ch-pass { order: 3; margin-left: auto; font-size: 10.5px; padding: 2px 8px; }

  /* One height for every card whether its name takes one line or two, so the list
     scrolls as an even rhythm instead of a ragged one. Sized to the two-line case
     (the majority), which is what the clamp above caps it at. */
  .lx-ch-head { min-height: 94px; }

  .lx-ch-side { gap: 0; }

  /* ---- Lesson rows ----
     The chevron is decorative on a phone (the whole row is the tap target) and
     the ghost copy exists only to reserve a column. Dropping both gives ~23px
     back to the title, which is what stops titles wrapping, and it keeps every
     score/Începe/Continuă on one right edge. */
  /* `min-height` keeps every row the same height whether its right side is a 20px
     label or the 32px CTA, so one in-progress lesson does not put a step in the
     list. The chevron is back (it was dropped to buy title width; deleting the two
     row badges paid that back) — it is the mark that says the row goes somewhere,
     which is exactly what the CTA is NOT saying on the other rows. */
  .lx-row { padding: 9px 16px; gap: 10px; min-height: 48px; }
  /* No arrow on the CTA here. It is worth ~21px, and on a 390px row that is the
     difference between "Cabinetul și echipa de lucru a MF" fitting on one line
     and wrapping onto two — on the one row in the chapter that must not look
     heavier than the rest. The whole row is the tap target anyway. */
  .lx-cta { height: 28px; padding: 0 12px; }
  .lx-cta svg { display: none; }

  .lx-map { padding: 18px 16px; }
  .lx-map-cells { gap: 5px; }
  .lx-cell { width: 17px; height: 17px; }
}