/* ============================================================================
   learn-more.css — the shared "Learn More" card
   ----------------------------------------------------------------------------
   These rules used to live inline inside practice.html. They are the visual
   half of practice-learn-more.js: the collapsed card, the three levels of tab
   strip, the content blocks, and the code surface with its Copy button.

   They moved out here the moment a SECOND page needed them. The Authentication
   Lab's Step 1 Learn More is now built by the same renderer from the same data
   shape, so it has to be painted by the same rules — pasting a copy into that
   page would have guaranteed the two drifted apart the first time either was
   restyled, which is the opposite of the consistency the move is for.

   Pages that use this file:
     · practice.html                   (every module's Learn More)
     · authentication-state-lab.html   (Step 1's Learn More)

   Nothing here is page-specific. Per-page tab styling — .m1-tab and friends —
   deliberately stayed behind in practice.html, because that is what it is.
   ============================================================================ */

/* ══════════════════════════════════════════════════════════════════
   Module-level "Learn More" (practice-learn-more.js).
   Token colours are the ones the Authentication Lab's hand-written code
   blocks already use, so a highlighted snippet here reads identically to
   one over there.
   ══════════════════════════════════════════════════════════════════ */
.plm-card { border: 1px solid #E2E8F0; border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.04); overflow: hidden; }
/* The whole row is the control — there is no heading above it. */
/* The toggle row reads as a control, and open looks different from closed.
   It used to be white on white with green text: nothing marked it as
   pressable, and opening it changed the background by two percent, so
   there was no way to tell at a glance which card was open. Now closed is
   a grey bar, open is the green tint with a green edge, and the label is
   near-black — green is an accent here, not body copy, and a heading in
   the accent colour reads as a link that goes somewhere. */
.plm-toggle { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .95rem 1.25rem; background: #F5F7FA; border: none; border-left: 3px solid transparent; cursor: pointer; text-align: left; color: #0F172A; font-weight: 700; font-size: .9375rem; transition: background-color .15s ease, border-color .15s ease; }
.plm-toggle:hover { background: #EDF1F6; }
.plm-toggle.is-open { background: #EAF7F0; border-left-color: #2E8B57; }
.plm-toggle.is-open:hover { background: #E0F2E8; }
.plm-toggle:focus-visible { outline: 2px solid #2E8B57; outline-offset: -2px; }
/* The chevron keeps the accent, so the card still has one green mark. */
.plm-chev { display: inline-block; width: .8rem; color: #2E8B57; transition: transform .15s ease; }
.plm-toggle-sub { font-weight: 500; font-size: .75rem; color: #94A3B8; }
@media (max-width: 640px) { .plm-toggle-sub { display: none; } }
.plm-panel-outer { border-top: 1px solid #EAEFF5; background: #F8FAFC; padding: 1.1rem 1.25rem 1.35rem; }

.plm-tabs { display: flex; gap: 1.15rem; overflow-x: auto; padding-right: .5rem; }
.plm-tabs-underline { border-bottom: 1px solid #E2E8F0; margin-bottom: 1rem; }
.plm-tabs-sub { gap: .95rem; }
.plm-tab { background: none; border: none; cursor: pointer; white-space: nowrap; font-weight: 600; font-size: .8125rem; color: #64748B; padding: .5rem .15rem; border-bottom: 2px solid transparent; }
.plm-tab:hover { color: #2E8B57; }
.plm-tabs-underline .plm-tab[aria-selected="true"] { color: #2E8B57; border-bottom-color: #2E8B57; }
.plm-tab:focus-visible { outline: 2px solid #2E8B57; outline-offset: 2px; border-radius: .25rem; }
.plm-tabs-pill { gap: .4rem; border-bottom: none; margin-bottom: .75rem; }
.plm-tabs-pill .plm-tab { border: 1px solid #E2E8F0; background: #fff; border-radius: 999px; padding: .3rem .8rem; font-size: .75rem; }
.plm-tabs-pill .plm-tab[aria-selected="true"] { background: #EAF7F0; border-color: #A7D9BE; color: #226844; }
/* Third level: one BLOCK on screen at a time within a topic. Three tab
   strips in a column need to be told apart at a glance, so each level
   looks different rather than smaller: level 1 underlined, level 2 solid
   green pills, level 3 outlined pills with a green edge. */
.plm-tabs-block { margin: .1rem 0 .9rem; }
.plm-tabs-block .plm-tab { font-size: .72rem; padding: .28rem .7rem; color: #475569; background: #fff; border-color: #E2E8F0; }
.plm-tabs-block .plm-tab:hover { border-color: #A7D9BE; color: #226844; }
.plm-tabs-block .plm-tab[aria-selected="true"] { background: #fff; border-color: #2E8B57; color: #226844; box-shadow: inset 0 -2px 0 #2E8B57; }

/* Topic strip: one topic on screen at a time instead of all of them stacked. */
.plm-tabs-topic { margin-bottom: 1rem; }
.plm-tabs-topic .plm-tab { font-size: .78rem; padding: .34rem .78rem; }
.plm-tabs-topic .plm-tab[aria-selected="true"] { background: #2E8B57; border-color: #2E8B57; color: #fff; }
/* ── No jump while the content files land ───────────────────────────
   A [data-learn-more] host is an empty div until its module's data file
   has parsed and the engine has built the card into it. Twenty-five files
   arrive over a second or two, so without this every card's arrival
   shoved everything below it down the page.

   The reserve is the height of the collapsed bar the card will become, so
   the space is already the right size when it fills. Released the moment
   the host is mounted — after that the card's own height governs. */
[data-learn-more]:not([data-mounted]) { min-height: 3.5rem; }

/* Concept lead-in: shown once above the Locators / Automation / Tasks /
   Interview Tips strip in Modules 1–3, so "what am I looking at" stays
   answered whichever aspect of it you are reading. Kept to a badge and a
   sentence — anything taller pushes the tab row off the first screen. */
.plm-lead { margin-bottom: .9rem; }
.plm-lead .plm-p { margin-bottom: 0; max-width: 62rem; }

/* Card lead-in: the module's own introduction, above the CONCEPT strip in
   Module 5. Two paragraphs rather than one sentence, so they need the
   spacing between them that a concept lead does not, and a rule under them
   to separate the module from the concepts it is about to offer. */
.plm-card-lead {
  margin-bottom: 1.05rem; padding-bottom: .95rem;
  border-bottom: 1px solid #E2E8F0;
}
.plm-card-lead .plm-p + .plm-p { margin-top: .6rem; }
.plm-badge { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: 0 0 .5rem; }
.plm-badge-k {
  font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: #226844; background: #EAF7F0; border: 1px solid #C9E7D6;
  border-radius: .3rem; padding: .17rem .45rem; white-space: nowrap;
}
.plm-badge-v {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; color: #1A2B22; background: #F1F5F9;
  border: 1px solid #E2E8F0; border-radius: .3rem; padding: .1rem .4rem;
}
.plm-sub-intro { margin-bottom: .75rem; }
.plm-auto-flat { padding: 0; border-top: none; }

.plm-h { font-size: .95rem; font-weight: 700; color: #1A2B22; margin: 1.4rem 0 .5rem; }
.plm-panel > .plm-h:first-child { margin-top: 0; }
.plm-p { font-size: .875rem; line-height: 1.65; color: #475569; max-width: 62rem; margin-bottom: .7rem; }
.plm-note { font-size: .8125rem; line-height: 1.6; color: #334155; background: #EAF7F0; border: 1px solid #C9E7D6; border-left: 3px solid #2E8B57; border-radius: .55rem; padding: .65rem .85rem; margin: .8rem 0; max-width: 62rem; }

.plm-el { border: 1px solid #E2E8F0; border-radius: .75rem; background: #fff; padding: .9rem 1rem; margin-bottom: .85rem; }
.plm-el-title { font-size: .875rem; font-weight: 700; color: #1A2B22; margin-bottom: .55rem; }
.plm-el-rows { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .6rem; }
.plm-el-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; font-size: .8125rem; }
.plm-el-k { flex: 0 0 11rem; max-width: 11rem; font-weight: 600; color: #64748B; }
.plm-el-k code { font-family: ui-monospace, monospace; font-size: .74rem; font-weight: 700; }
@media (max-width: 640px) { .plm-el-k { flex-basis: 100%; max-width: 100%; } }
.plm-el-v { color: #334155; flex: 1 1 14rem; min-width: 0; }
.plm-el-note { font-size: .78rem; line-height: 1.55; color: #64748B; border-top: 1px dashed #E2E8F0; padding-top: .55rem; margin-top: .1rem; }

/* ── Element card, two columns ──────────────────────────────────────
   Attribute reference on the left, the real markup on the right, because
   they are read together — "id is name" means more with the tag in view.
   Named grid areas rather than nested wrappers, so the title and the
   closing note still span both columns and one media query restacks the
   whole thing without touching the DOM.

   The key column narrows inside the split: 11rem was right across a full
   panel and is half the column at this width. minmax(0, …) on both tracks
   is what stops a long unbroken code line from widening the grid and
   pushing the panel sideways. */
.plm-el-split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  grid-template-areas: "title title" "main aside" "note note";
  column-gap: 1.15rem;
  align-items: start;
}
.plm-el-split > .plm-el-title { grid-area: title; }
.plm-el-split > .plm-el-main  { grid-area: main; min-width: 0; }
.plm-el-split > .plm-el-aside { grid-area: aside; min-width: 0; }
.plm-el-split > .plm-el-note  { grid-area: note; margin-top: .35rem; }
.plm-el-split .plm-el-rows { margin-bottom: 0; }
.plm-el-split .plm-el-k { flex: 0 0 8.25rem; max-width: 8.25rem; }
.plm-el-split .plm-el-v { flex: 1 1 8rem; }
.plm-el-split .plm-code { margin: 0; }
/* The aside is usually a response body, which can run long. Capped and
   scrollable so one large JSON payload cannot stretch the whole card —
   scoped to the aside only, so an ordinary markup example elsewhere on the
   platform keeps rendering at its natural height. */
.plm-el-aside .plm-pre { max-height: 17rem; overflow-y: auto; }
/* One column below 900px: two columns of code and prose stop being
   readable well before they stop fitting. */
@media (max-width: 900px) {
  .plm-el-split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "main" "aside" "note";
  }
  .plm-el-split .plm-el-rows { margin-bottom: .6rem; }
  .plm-el-split .plm-el-k { flex-basis: 11rem; max-width: 11rem; }
}
@media (max-width: 640px) {
  .plm-el-split .plm-el-k { flex-basis: 100%; max-width: 100%; }
}

/* A numbered list (Step 1's Overview) has a one- or two-character key, not an
   attribute name — the normal 11rem (or 8.25rem inside a split card) reads as
   a wall of empty space between "1" and its sentence. Narrowed here, after
   every .plm-el-k rule above (including the split and its own breakpoints)
   so this wins at every width instead of only on the widest one — a number
   belongs on the same line as its text regardless of screen size. */
.plm-el-rows--compact .plm-el-k { flex: 0 0 1.35rem; max-width: 1.35rem; }
@media (max-width: 900px) { .plm-el-rows--compact .plm-el-k { flex-basis: 1.35rem; max-width: 1.35rem; } }
@media (max-width: 640px) { .plm-el-rows--compact .plm-el-k { flex-basis: 1.35rem; max-width: 1.35rem; } }

.plm-code { position: relative; margin: .55rem 0 .85rem; }
.plm-code-label { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #94A3B8; margin-bottom: .3rem; }
.plm-pre { background: #fff; border: 1px solid #E2E8F0; border-radius: .6rem; padding: .75rem .9rem; overflow-x: auto; max-width: 100%; }
.plm-pre code { white-space: pre; }
.plm-copy { position: absolute; top: .35rem; right: .4rem; z-index: 2; font-size: .65rem; font-weight: 700; color: #64748B; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: .35rem; padding: .18rem .5rem; cursor: pointer; opacity: .85; }
.plm-copy:hover { color: #2E8B57; border-color: #A7D9BE; opacity: 1; }
.plm-scratch { position: fixed; left: -9999px; top: 0; }
.plm-method { font-size: .78rem; line-height: 1.55; color: #334155; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: .5rem; padding: .5rem .7rem; margin-bottom: .5rem; }

/* Shared token palette — identical to the Authentication Lab's .code-block */
.code-block { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: .72rem; line-height: 1.7; font-variant-ligatures: none; }
.code-block .kw  { color: #1d4ed8; font-weight: 600; }
.code-block .fn  { color: #b45309; }
.code-block .str { color: #15803d; }
.code-block .cm  { color: #94a3b8; font-style: italic; }
.code-block .num { color: #0f766e; }

/* ── Locator comparison ─────────────────────────────────────────────
   One row per locator: name, code, verdict and reasoning side by side.
   Six locators used to be six screens of name / code / paragraph, which
   defeats the point of the block — comparing them means seeing them at
   once.

   A grid, not a table: the same DOM restacks into readable blocks on a
   narrow screen by redefining one property. A table would either overflow
   the page or squeeze the code column to nothing. minmax(0, …) on the two
   flexible tracks keeps a long locator from widening the grid. */
.plm-loc { border: 1px solid #E2E8F0; border-radius: .75rem; background: #fff; padding: .9rem 1rem; margin-bottom: .85rem; }
.plm-loc-el { font-size: .875rem; font-weight: 700; color: #1A2B22; margin-bottom: .6rem; }
.plm-loc-items { display: flex; flex-direction: column; gap: 0; }
.plm-loc-hdr,
.plm-loc-item {
  display: grid;
  grid-template-columns: minmax(6.5rem, 15%) minmax(0, 34%) minmax(0, 51%);
  column-gap: .9rem;
  align-items: start;
}
.plm-loc-hdr { font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #94A3B8; padding: 0 0 .35rem .75rem; border-bottom: 1px solid #EAEFF5; }
.plm-loc-item { border-left: 3px solid #EAF7F0; padding: .5rem 0 .5rem .75rem; border-bottom: 1px solid #F1F5F9; }
.plm-loc-item:last-child { border-bottom: none; padding-bottom: .1rem; }
.plm-loc-item:hover { border-left-color: #A7D9BE; background: #FCFDFE; }
.plm-loc-m { font-family: ui-monospace, monospace; font-size: .76rem; font-weight: 700; color: #1A2B22; word-break: break-word; padding-top: .2rem; }
.plm-loc-codewrap { position: relative; min-width: 0; }
.plm-loc-guide { min-width: 0; }
.plm-loc-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .2rem; }
/* A compact copy button for a single-line snippet. It only appears on
   hover or keyboard focus — six of these sitting on top of six code
   samples would be the loudest thing in the panel. */
.plm-copy-sm { top: .18rem; right: .22rem; font-size: .6rem; padding: .1rem .35rem; opacity: 0; transition: opacity .12s ease; }
.plm-loc-item:hover .plm-copy-sm,
.plm-copy-sm:focus-visible { opacity: .9; }
@media (hover: none) { .plm-copy-sm { opacity: .75; } }

/* One column below 820px. The header strip is meaningless once the cells
   are stacked, so it goes; each row keeps its own order and reads on its
   own. Font size is unchanged — a locator you cannot read is not a
   compact locator. */
@media (max-width: 820px) {
  .plm-loc-hdr { display: none; }
  .plm-loc-item { grid-template-columns: minmax(0, 1fr); row-gap: .3rem; padding: .6rem 0 .65rem .75rem; }
  .plm-loc-m { padding-top: 0; }
}
.plm-loc-badge { font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: .1rem .45rem; }
.plm-rec-best { background: #dcfce7; color: #15803d; }
.plm-rec-good { background: #dbeafe; color: #1d4ed8; }
.plm-rec-mid  { background: #ffedd5; color: #c2410c; }
.plm-rec-bad  { background: #fee2e2; color: #dc2626; }
.plm-loc-code { display: block; font-family: ui-monospace, 'JetBrains Mono', monospace; font-variant-ligatures: none; font-size: .74rem; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: .45rem; padding: .35rem .55rem; overflow-x: auto; white-space: pre; margin-bottom: .3rem; }
.plm-loc-code .kw{color:#1d4ed8;font-weight:600}.plm-loc-code .fn{color:#b45309}.plm-loc-code .str{color:#15803d}.plm-loc-code .cm{color:#94a3b8;font-style:italic}.plm-loc-code .num{color:#0f766e}
.plm-loc-why { font-size: .78rem; line-height: 1.5; color: #64748B; }

/* ── "Try it" ───────────────────────────────────────────────────────
   Numbered steps rather than a paragraph. Same instructions, but you can
   keep your place in them while you work through the exercise. */
.plm-try { border: 1px solid #C9E7D6; border-left: 3px solid #2E8B57; border-radius: .55rem; background: #F6FBF8; padding: .7rem .9rem; margin: .8rem 0; max-width: 62rem; }
.plm-try-h { font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #226844; margin-bottom: .35rem; }
.plm-try-intro { font-size: .78rem; line-height: 1.5; color: #334155; margin-bottom: .4rem; }
.plm-try-steps { list-style: decimal; margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: .22rem; }
.plm-try-steps li { font-size: .78rem; line-height: 1.5; color: #334155; }
.plm-try-steps code { font-family: ui-monospace, monospace; font-size: .72rem; background: #fff; border: 1px solid #DCEBE2; border-radius: .28rem; padding: .04rem .3rem; }

.plm-task { border: 1px solid #E2E8F0; border-radius: .7rem; background: #fff; padding: .7rem .9rem; margin-bottom: .55rem; }
.plm-task-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.plm-task-n { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #2E8B57; }
.plm-task-level { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: .1rem .45rem; }
.plm-level-starter { background: #dcfce7; color: #15803d; }
.plm-level-intermediate { background: #dbeafe; color: #1d4ed8; }
.plm-level-advanced { background: #ffedd5; color: #c2410c; }
.plm-task-text { font-size: .8125rem; line-height: 1.6; color: #334155; }
.plm-task-hint { font-size: .75rem; line-height: 1.55; color: #64748B; margin-top: .35rem; }
.plm-task-hint-k { font-weight: 800; text-transform: uppercase; font-size: .62rem; letter-spacing: .05em; color: #94A3B8; }

.plm-qa { border-left: 3px solid #EAF7F0; padding-left: .8rem; margin-bottom: .85rem; }
.plm-qa-q { font-size: .8125rem; font-weight: 700; color: #1A2B22; margin-bottom: .2rem; }
.plm-qa-a { font-size: .8125rem; line-height: 1.6; color: #475569; }

.plm-auto { border: 1px solid #E2E8F0; border-radius: .75rem; background: #fff; margin-bottom: .7rem; overflow: hidden; }
.plm-auto > summary { list-style: none; cursor: pointer; }
.plm-auto > summary::-webkit-details-marker { display: none; }
.plm-auto-sum { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .65rem .9rem; background: #F8FAFC; }
.plm-auto-sum:hover { background: #F1F5F9; }
.plm-auto-title { font-size: .8125rem; font-weight: 700; color: #334155; }
.plm-auto-chev { color: #94A3B8; font-size: .8rem; transition: transform .18s ease; }
.plm-auto[open] .plm-auto-chev { transform: rotate(180deg); }
.plm-auto-body { padding: .85rem .9rem 1rem; border-top: 1px solid #E2E8F0; }