/* ============================================================================
   Lesson reference tabs — Farmacologie · Biochimie · Semiologie

   The whole vocabulary of the two reference panes, from the "Farmaco si
   Biochimie (Sindromul anemic)" design handoff. These panes do NOT go through
   render_content: their content is the generator's own JSON (LessonPage.data),
   so it gets its own classes here rather than borrowing the AST block ones.
   Loaded only by templates/lessons/detail.html, after lesson.css.

   Two house rules that shaped the port:

   * **Numbers follow the number rule** (CLAUDE.md → Typography): the group
     counter wears `.mono`, which is serif + tabular figures. The handoff sets it
     in the eyebrow face along with the rest of the kicker; the figure is split
     back out so it matches the section numbers on the Lecție tab beside it.
   * **The prescribing-regime badge is set in the eyebrow face, not mono.**
     `--font-mono` has exactly one sanctioned use in this app (the calculator's
     numeric input) and a code like `P-6L` is an uppercase label, which is what
     the eyebrow face is for.

   The handoff's warm greys have no token — the app's text colours are the
   blue-grey `--muted` family — so the few that carry the design's character are
   declared once on `.lp` and used from there.
   ========================================================================= */

.lp {
  /* Fills its column, left-aligned. It used to be capped at the handoff's own 920px,
     which was a fix for the wrong problem: these tabs were running with
     `lesson-no-ksb`, so the content box had annexed the sidebar's 296px and a 13.5px
     fact line ran out to ~1270px. The right column stays open on these panes now (it
     carries the assistant, with no knowledge panel), so the content box is the app's
     ordinary reading measure and the cap only left a gutter. */
  max-width: 100%;

  --lp-body: #3D3B37;          /* card + prose body */
  --lp-meta: #6F6C66;          /* the quieter second line under a value */
  --lp-line: #DCEBEA;          /* the hairline inside a teal-edged card */
  --lp-zebra: #F3F9F8;         /* every other row, in a striped list */
  --lp-legend-edge: #D3E8E6;

  /* "De reținut" — the memo strip closing a drug card */
  --lp-memo-bg: #FBF6EA;
  --lp-memo-edge: #EEE1C2;
  --lp-memo-ink: #4A3C1E;
  --lp-memo-strong: #3A2E12;

  /* "Capcane" — the trap strip closing an assay card */
  --lp-trap-bg: #FBF1EF;
  --lp-trap-edge: #F2D9D3;
  --lp-trap-ink: #6B4238;
  --lp-trap-strong: #4A2A20;

  --lp-amber-ink: #916B22;
  --lp-red-ink: #9E4436;
}

/* ---- The pane's own heading ----
   The card itself is `.lb-card--why` from lesson.css — the lesson's "De ce contează"
   box, reused rather than restyled, so the two stay one component. Only the
   provenance footnote is ours. */

.lp-head-src {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .7);
}

/* ---- Group heading: one drug class, or one part of the Biochimie page ----

   ⚠️ The LESSON's own heading, worn by class: `.lb-h2` + `.lb-h2-num` + `.lb-h2-mark`
   from lesson.css, teal number and pencil underline included (partials/
   lp_section_head.html). These panes used to draw their own — an uppercase eyebrow over a
   26px title — so the same lesson had two kinds of section heading depending on which tab
   you were on, and the reference panes read as a different product.

   Nothing about the type is set here on purpose: the size, the face and the underline are
   the lesson's, and this rule only supplies what the lesson gets from its `.lb-section`
   wrapper and these panes have none of — the rhythm above the heading, and the offset for
   the anchor the left Cuprins jumps to. */

.lp-h2 {
  margin: 44px 0 0;
  scroll-margin-top: 90px;
}
/* The section's own count — `4 medicamente`, `12 analize`. It is the pane's existing chip
   (`.lp-chip`, the "Ținte" pills) at heading scale, not a third pill dialect; the figure
   inside it is `.mono` (serif + tabular) like every number in the app.
   `vertical-align: middle` against a 29px serif line would ride high — the chip is nudged
   down to sit on the words it belongs to instead. */
.lp-tag {
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  top: -2px;
  margin-left: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--teal-tint-2);
  border: 1px solid var(--teal-border-2);
  color: var(--teal-ink);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.lp-prose { font-size: 16px; line-height: 1.65; color: var(--lp-body); }
.lp-prose > p { margin: 14px 0 0; }
.lp-prose > :first-child { margin-top: 14px; }

/* ---- The two legends: prescribing regimes, and assay categories ---- */

.lp-legend {
  margin-top: 14px;
  /* …but a little more when it follows the opening card, which has a bottom lip. */
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
}
.lp-head + .lp-legend { margin-top: 24px; }
.lp-legend-card {
  flex: 1 1 440px;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--lp-legend-edge);
  border-radius: 12px;
  overflow: hidden;
}
.lp-legend-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 7px 13px;
}
.lp-legend-row + .lp-legend-row { border-top: 1px solid var(--lp-line); }
.lp-legend-row:nth-child(even) { background: var(--lp-zebra); }
.lp-legend-ico { flex: none; display: flex; }
.lp-legend-ico svg { width: 19px; height: 19px; }
.lp-legend-text { font-size: 12.5px; color: var(--slate); }
.lp-legend-note {
  flex: 1 1 280px;
  min-width: 240px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lp-meta);
}
.lp-legend-note strong { color: var(--lp-body); }

/* The regime code. In the legend it is a square-ish key with a fixed width so the
   descriptions line up; on a card it is a pill on the teal header. */
.lp-rx {
  flex: none;
  min-width: 34px;
  text-align: center;
  font-family: var(--font-eyebrow);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--teal-ink);
  background: var(--teal-tint);
  border-radius: 6px;
  padding: 3px 8px;
}
.lp-rx--head {
  align-self: flex-start;
  margin-top: 1px;
  color: #FFFFFF;
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ---- Therapeutic targets ---- */

.lp-tinte {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.lp-tinte-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-eyebrow);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal-ink);
}
.lp-tinte-label svg { width: 16px; height: 16px; }
.lp-chip {
  background: var(--teal-tint-2);
  border: 1px solid var(--teal-border-2);
  color: var(--teal-ink);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12.5px;
  font-weight: 600;
}

/* ---- The card: one drug, one assay, or one panel ---- */

.lp-drug,
.lp-assay,
.lp-panel {
  margin-top: 16px;
  background: var(--card);
  border: 1.5px solid var(--teal-3);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(14, 124, 123, .10);
  overflow: hidden;
}
/* The first card after a heading sits a touch lower than the ones stacked below it. */
.lp-h2 + .lp-drug,
.lp-h2 + .lp-assay,
.lp-h2 + .lp-panel,
.lp-prose + .lp-drug,
.lp-tinte + .lp-drug,
.lp-legend + .lp-assay { margin-top: 18px; }

.lp-drug-head,
.lp-assay-head,
.lp-panel-head {
  background: var(--teal-3);
  padding: 10px 16px;
  display: flex;
  gap: var(--cardhead-gap);
  align-items: center;
}
.lp-panel-head { padding: var(--cardhead-pad-y) 16px; }
.lp-panel--danger { border-color: var(--trap); box-shadow: 0 8px 24px rgba(192, 83, 54, .10); }
.lp-panel--danger .lp-panel-head { background: var(--trap); }

.lp-drug-ico,
.lp-assay-ico,
.lp-panel-ico {
  width: var(--cardhead-ico);
  height: var(--cardhead-ico);
  flex: none;
  border-radius: 50%;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-drug-ico svg,
.lp-assay-ico svg,
.lp-panel-ico svg { width: var(--cardhead-svg); height: var(--cardhead-svg); }

.lp-drug-titles,
.lp-assay-titles { flex: 1; min-width: 0; }
.lp-drug-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lp-drug-dci,
.lp-assay-name {
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.25;
  font-weight: 600;
  color: #FFFFFF;
}
.lp-drug-sub { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .75); }
.lp-assay-rol { margin-top: 2px; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, .85); }

.lp-brands { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px; }
.lp-brand {
  background: rgba(255, 255, 255, .18);
  color: #FFFFFF;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
}

.lp-panel-title {
  font-family: var(--font-eyebrow);
  font-size: var(--cardhead-title);
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
}
.lp-panel-count {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
}

/* ---- One labelled fact inside a card ---- */

.lp-drug-body,
.lp-assay-body {
  padding: 12px 16px 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-fact { display: flex; gap: 11px; }
.lp-fact-ico { flex: none; margin-top: 1px; display: flex; }
.lp-fact-ico svg { width: 19px; height: 19px; }
.lp-fact-main { min-width: 0; flex: 1; }
.lp-fact-label {
  font-family: var(--font-eyebrow);
  font-size: 12.5px;
  font-weight: 700;
}
.lp-fact-label--teal { color: var(--teal-ink); }
.lp-fact-label--green { color: var(--success-ink); }
.lp-fact-label--amber { color: var(--lp-amber-ink); }
.lp-fact-label--red { color: var(--lp-red-ink); }
.lp-fact-body { margin-top: 2px; font-size: 13.5px; line-height: 1.55; color: var(--lp-body); }
.lp-fact-body strong { color: var(--ink-warm); }
.lp-fact-meta { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--lp-meta); }
/* The dose is the value the card exists for, so the whole of it carries the
   emphasis — the handoff bolds only the headline figure inside a multi-regimen
   dose, which is a per-drug judgement the data does not encode. */
.lp-dose { font-weight: 600; color: var(--ink-warm); }

/* ---- The strip that closes a card ---- */

.lp-strip {
  padding: 9px 16px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.55;
}
.lp-strip svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.lp-strip--memo {
  background: var(--lp-memo-bg);
  border-top: 1px solid var(--lp-memo-edge);
  color: var(--lp-memo-ink);
}
.lp-strip--memo strong { color: var(--lp-memo-strong); }
.lp-strip--trap {
  background: var(--lp-trap-bg);
  border-top: 1px solid var(--lp-trap-edge);
  color: var(--lp-trap-ink);
}
.lp-strip--trap strong { color: var(--lp-trap-strong); }

/* ---- Tick lists: măsuri non-farmacologice, greșeli de evitat ---- */

.lp-ticks { margin: 0; padding: 4px 16px; list-style: none; }
.lp-ticks li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 11px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lp-body);
}
.lp-ticks li + li { border-top: 1px solid var(--divider); }
.lp-tick {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-tick--ok { background: var(--teal-tint); }
.lp-tick--no { background: #F5E1DB; }

/* ---- Pattern-uri cheie ---- */

.lp-pattern {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0 14px;
  padding: 10px 16px;
  align-items: center;
}
.lp-pattern--wide { grid-template-columns: 1fr; }
.lp-pattern:nth-child(even) { background: var(--lp-zebra); }
.lp-pattern + .lp-pattern { border-top: 1px solid var(--lp-line); }
.lp-pattern-left { font-size: 13.5px; line-height: 1.55; color: var(--body-c); }
.lp-up { color: var(--teal); }
.lp-down { color: var(--error-2); }
.lp-pattern-right {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 600;
}
.lp-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
/* The tone says what KIND of verdict this is — see PATTERN_TONES in
   core/templatetags/lesson_pages.py. `hold` is the "do not treat it the way it
   looks" family (thalassaemia, haemochromatosis), which is why it wears the
   why-box navy rather than a warning colour. */
.lp-tone--plain { color: var(--teal-ink); }
.lp-tone--warn { color: var(--warn-ink); }
.lp-tone--danger { color: var(--trap-deep); }
.lp-tone--hold { color: var(--navy-2); }
.lp-tone--warn .lp-dot { background: var(--miss); }
.lp-tone--danger .lp-dot { background: var(--trap); }
.lp-tone--plain .lp-dot { background: var(--teal); }

/* ---- "În curând" ---- */

.lp-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 48px 24px 52px;
  background: var(--surface-2);
  border: 1px dashed var(--border-2);
  border-radius: 18px;
}
.lp-soon-ico { opacity: .55; margin-bottom: 4px; }
.lp-soon-kicker {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-ink);
}
.lp-soon-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 650;
  color: var(--ink);
}
.lp-soon-sub {
  margin: 0;
  max-width: 42ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
}
.lp-soon-btn { margin-top: 14px; }

/* A tab with nothing behind it yet reads a shade quieter than the rest — but stays
   fully legible and fully clickable, because the panel behind it explains itself. */
.lesson-tab.is-soon { opacity: .72; }
.lesson-tab.is-soon.is-active { opacity: 1; }

@media (max-width: 640px) {
  /* Only the rhythm tightens. The heading itself keeps the lesson's 29px at every
     width — the lesson never shrinks it either, and a heading that matched on desktop
     and not on a phone would be the same two-dialect problem in miniature. */
  .lp-h2 { margin-top: 34px; }
  .lp-prose { font-size: 15.5px; }
  /* Verdict under pattern, not beside it: at this width 1.4fr is about 12
     characters and every discriminator wrapped to four lines. */
  .lp-pattern { grid-template-columns: 1fr; gap: 5px; padding: 11px 14px; }
  .lp-drug-head,
  .lp-assay-head,
  .lp-panel-head { padding: 9px 13px; }
  .lp-drug-body,
  .lp-assay-body { padding: 11px 13px 12px; }
  .lp-strip,
  .lp-ticks { padding-left: 13px; padding-right: 13px; }
  .lp-soon { padding: 36px 18px 40px; }
}