/* The PSMT guide (PsmtGuide.js, content/psmt/). The prototype was Claude
   Chat's recreation of this app, so here it is drawn with the app's own
   pieces (docs/ui.md): the "ed" tile for section numbers, Skill progress for
   the overall count, chips, badges, cards, buttons and the quiet fold rows.
   PsmtGuide.js adds the app's classes and icons to the content's markup;
   this file only places them and styles what the app has no piece for
   (the checklist, the annotation tags, the report excerpts). Tokens only. */

/* ---- hero: the headline and the overall count ------------------------- */
.psmt-page .hero h1 { max-width: 24ch; text-wrap: balance; }
.psmt-page .hero h1 span { color: inherit; }
.psmt-progress { margin-top: var(--s-4); }
/* plain mint as it fills, the highlight green once every box is ticked */
.psmt-progress .sp-fill { background: var(--green-100); }
.psmt-progress .is-mastered .sp-fill { background: var(--green-400); }

/* ---- one reading column ----------------------------------------------- */
.psmt { max-width: 820px; display: flex; flex-direction: column; gap: var(--s-6); font: var(--t-body); color: var(--ink); }
.psmt p { margin: 0; }
.psmt a:not(.btn):not(.chip) { color: inherit; }

/* contents: one chip per section; a finished section's chip turns mint */
.psmt-toc { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.psmt-toc .chip { text-decoration: none; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.psmt-toc .chip:hover { border-color: var(--primary); background: var(--surface-quiet); }
.psmt-toc .chip b { font-weight: var(--w-semibold); color: var(--muted); font-variant-numeric: tabular-nums; }
.psmt-toc .chip.is-done { background: var(--surface-mint); border-color: var(--surface-mint); color: var(--green-800); }
.psmt-toc .chip.is-done b { color: var(--green-800); }

/* fold rows: the app's quiet disclosure, in a flush card */
.psmt-folds.card { padding: 0; overflow: hidden; }   /* the hover tint keeps the card's corners */
.psmt-fold + .psmt-fold { border-top: 1px solid var(--line); }
.psmt-fold summary {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-6); cursor: pointer; list-style: none;
  font: var(--t-body); font-weight: var(--w-semibold); transition: background var(--dur-1) var(--ease);
}
.psmt-fold summary::-webkit-details-marker { display: none; }
.psmt-fold summary:hover { background: var(--surface-quiet); }
.psmt-fold summary .psmt-chev { margin-left: auto; color: var(--primary); display: inline-flex; transition: transform var(--dur-2) var(--ease); }
.psmt-fold[open] summary .psmt-chev { transform: rotate(180deg); }
.psmt-fold .body { padding: 0 var(--s-6) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.psmt-fold ul { margin: 0; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }

/* best order to write it in: numbered like the quiz's questions */
.psmt-order { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; counter-reset: o; }
.psmt-order li { counter-increment: o; display: flex; align-items: center; gap: var(--s-3); }
.psmt-order li::before {
  content: counter(o); flex: none; width: 26px; height: 26px; border-radius: var(--r-full); display: grid; place-items: center;
  background: var(--primary); color: var(--white); font: var(--t-caption); font-weight: var(--w-semibold);
}
.psmt-order li > a {
  flex: 1; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  text-decoration: none; transition: background var(--dur-1) var(--ease);
}
.psmt-order li > a:hover { background: var(--surface-quiet); }
.psmt-order .n { min-width: 2.2em; font: var(--t-label); color: var(--muted); font-variant-numeric: tabular-nums; }
.psmt-order .ttl { font-weight: var(--w-medium); }

/* ---- a section ----------------------------------------------------------- */
.psmt-sec { display: flex; flex-direction: column; gap: var(--s-5); padding-top: var(--s-6); scroll-margin-top: calc(var(--topbar-h) + var(--s-4)); }
.psmt-sec > header { display: flex; align-items: center; gap: var(--s-4); }
.psmt-sec > header .lesson-tile { flex: none; }
.psmt-sec h2 { font: var(--t-h2); flex: 1; min-width: 0; text-wrap: balance; }
.psmt-secprog { flex: none; }
.psmt-sec.is-full .psmt-secprog { background: var(--primary); color: var(--white); }
.psmt-rule { font: var(--t-body-lg); }

/* the checklist: rows like the lesson page's, a box to tick on each */
.psmt-tasks { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.psmt-checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.psmt-checks li { border-bottom: 1px solid var(--line); }
.psmt-checks label {
  display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-3) var(--s-3); cursor: pointer; border-radius: var(--r-md);
  transition: background var(--dur-1) var(--ease);
}
.psmt-checks label:hover { background: var(--surface-quiet); }
.psmt-checks input {
  appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0;
  border: 1.5px solid var(--control-line); border-radius: var(--r-sm); background: var(--surface);
  display: grid; place-content: center; cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.psmt-checks label:hover input { border-color: var(--primary); }
.psmt-checks input::after {
  content: ""; width: 10px; height: 6px; border-left: 2.5px solid var(--white); border-bottom: 2.5px solid var(--white);
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0;
}
.psmt-checks input:checked { background: var(--primary); border-color: var(--primary); }
.psmt-checks input:checked::after { opacity: 1; }
.psmt-checks .t { display: flex; flex-direction: column; min-width: 0; }
.psmt-checks .t b { font-weight: var(--w-semibold); }
.psmt-checks .t small { font: var(--t-caption); color: var(--muted); font-size: 13px; line-height: 18px; }

/* ---- an annotated example (a card) ------------------------------------- */
.psmt-ex { position: relative; display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.psmt-exhead { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.psmt-pill { align-self: flex-start; }
.psmt-pill.is-amber { background: var(--amber-bg); color: var(--amber-text); gap: 6px; }
.psmt-pill.is-amber::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--amber); }
.psmt-prose { font: var(--t-body-lg); line-height: 34px; }
.psmt-hl { border-radius: 3px; transition: background var(--dur-1) var(--ease); }
.psmt-hl.is-active { background: var(--surface-mint); }
.psmt-ex.is-weak .psmt-hl.is-active { background: var(--amber-bg); }

/* the tag after an annotated sentence: a small mint chip with a plus */
.psmt-tag {
  display: inline-flex; align-items: center; gap: var(--s-1); height: 24px; padding: 0 var(--s-2) 0 var(--s-3); margin-inline: var(--s-1) 2px;
  vertical-align: 2px; border: 1px solid var(--surface-mint); border-radius: var(--r-full); background: var(--surface-mint); color: var(--green-800);
  font: var(--t-caption); font-weight: var(--w-semibold); white-space: nowrap; cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
/* the plus, drawn as two bars so it turns smoothly into a cross on its own layer */
.psmt-x { position: relative; flex: none; width: 10px; height: 10px; transform: rotate(0deg); will-change: transform;
  transition: transform var(--dur-3) var(--ease); }
.psmt-x::before, .psmt-x::after { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 2px; border-radius: 1px; background: currentColor; }
.psmt-x::after { transform: rotate(90deg); }
.psmt-tag:hover { border-color: var(--primary); }
.psmt-tag[aria-expanded="true"] { background: var(--primary); border-color: var(--primary); color: var(--white); }
.psmt-tag[aria-expanded="true"] .psmt-x { transform: rotate(45deg); }
.psmt-ex.is-weak .psmt-tag { background: var(--amber-bg); border-color: var(--amber-bg); color: var(--amber-text); }
.psmt-ex.is-weak .psmt-tag:hover { border-color: var(--amber); }
.psmt-ex.is-weak .psmt-tag[aria-expanded="true"] { background: var(--amber-text); border-color: var(--amber-text); color: var(--white); }

/* its note: drawn like the app's toasts */
.psmt-pop {
  position: absolute; z-index: 5; width: min(340px, calc(100% - var(--s-6))); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md); background: var(--band); color: var(--green-50); box-shadow: var(--e4); font: var(--t-body);
  animation: rise var(--dur-2) var(--ease);
}
.psmt-pop::before { content: ""; position: absolute; top: -5px; left: var(--arrow, 20px); width: 11px; height: 11px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.psmt-pop b { display: block; margin-bottom: 2px; font: var(--t-label); color: var(--green-400); }
.psmt-pop .how { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid rgba(211, 255, 233, .16); color: var(--on-band-muted); }
.psmt-ex.is-weak .psmt-pop { background: var(--amber-text); color: var(--white); }
.psmt-ex.is-weak .psmt-pop b, .psmt-ex.is-weak .psmt-pop .how { color: var(--amber-bg); }
.psmt-ex.is-weak .psmt-pop .how { border-top-color: rgba(255, 255, 255, .2); }

/* 2.1: assumptions and observations, one row each */
.psmt-stmts { display: flex; flex-direction: column; }
.psmt-stmthead, .psmt-stmt { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: var(--s-4); }
.psmt-stmthead { font: var(--t-label); color: var(--muted); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-strong); }
.psmt-stmthead-2 { margin-top: var(--s-5); }
.psmt-stmt { padding-block: var(--s-4); border-bottom: 1px solid var(--line); font: var(--t-body); line-height: 28px; }
.psmt-stmt:last-child { border-bottom: 0; padding-bottom: 0; }
.psmt-stmt > div { min-width: 0; }
.psmt-stmt .k { display: none; font: var(--t-label); color: var(--muted); }
/* A1, O1 ...: white with a dark green edge, like the technology tag */
.psmt-stmt .id { margin-right: var(--s-2); vertical-align: 1px; background: var(--surface); border: 1.5px solid var(--primary); color: var(--primary); }
.psmt-stmt .psmt-tag { margin-left: var(--s-2); }
@media (max-width: 640px) {
  .psmt-stmthead { display: none; }
  .psmt-stmt { grid-template-columns: 1fr; gap: var(--s-2); }
  .psmt-stmt .k { display: block; }
}

/* a report excerpt: what a student would write */
.psmt-rep { display: flex; flex-direction: column; gap: var(--s-3); font: var(--t-body-lg); line-height: 32px; }
.psmt-rep h4 { margin-top: var(--s-3); font: var(--t-h3); }
.psmt-rep h4:first-child { margin-top: 0; }
.psmt-cap, .psmt-fig figcaption { font: var(--t-body); color: var(--muted); }
.psmt-cap { margin-top: calc(-1 * var(--s-2)) !important; }
.psmt-fig { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.psmt-fig svg { width: 100%; max-width: 460px; height: auto; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.psmt-fig .grid line { stroke: var(--muted); stroke-width: 1.2; }
.psmt-fig .grid line.faint { stroke: var(--line-strong); stroke-dasharray: 3 4; }
.psmt-fig .lbl text { fill: var(--muted); font: 12px var(--font-ui); }
.psmt-fig .fit { stroke: var(--primary); stroke-width: 2.5; }
.psmt-fig .pt circle { fill: var(--green-400); stroke: var(--primary); stroke-width: 1.5; }
.psmt-fig .eqn { fill: var(--primary); font: var(--t-label); }
.psmt-fig .ttl { fill: var(--ink); font: var(--t-label); font-size: 14px; }
.psmt-fig .arrow polygon { fill: var(--muted); }
.psmt-tblwrap { overflow-x: auto; }
.psmt-tbl { border-collapse: collapse; font: var(--t-body); font-variant-numeric: tabular-nums; min-width: 300px; }
.psmt-tbl th { font: var(--t-label); color: var(--muted); text-align: left; padding: var(--s-2) var(--s-4) var(--s-2) 0; border-bottom: 1px solid var(--line-strong); }
.psmt-tbl td { padding: var(--s-2) var(--s-4) var(--s-2) 0; border-bottom: 1px solid var(--line); }
.psmt-tbl tr.on td { font-weight: var(--w-semibold); }
.psmt-tbl tr.on td:first-child { color: var(--primary); }
.psmt-code td:last-child { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; }

/* working: a quiet mint panel, every line alike, lined up on the sign */
.psmt-eq {
  display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: var(--s-1) .4em;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface-quiet); border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.psmt-eq > span { grid-column: 1 / -1; justify-self: start; line-height: 34px; }
.psmt-eq > span.eqline { display: grid; grid-template-columns: subgrid; justify-self: stretch; }
.psmt-eq .eqline .l { text-align: right; }
.psmt-eq > button { grid-column: 1 / -1; justify-self: start; }
.psmt-math { font-size: 1.05em; math-style: normal; }

/* "What the ISMG says": the criterion as printed, its targeted lines lit */
.psmt-ismg { border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.psmt-ismg + .psmt-ismg { margin-top: var(--s-1); }
.psmt-ismg .h { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.psmt-ismg .h b { font: var(--t-h3); }
.psmt-ismg .s { padding: var(--s-3) var(--s-4) var(--s-1); font: var(--t-body); color: var(--muted); }
.psmt-ismg ul { list-style: none; margin: 0; padding: var(--s-1) var(--s-2) var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); }
.psmt-ismg li { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-2) var(--s-2); border-radius: var(--r-sm); color: var(--muted); }
.psmt-ismg li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: var(--r-full); border: 1.5px solid var(--control-line); }
.psmt-ismg li.on { background: var(--surface-quiet); color: var(--ink); font-weight: var(--w-medium); }
.psmt-ismg li.on::before { background: var(--primary); border-color: var(--primary); }
.psmt-ismg mark { background: var(--surface-mint); color: inherit; border-radius: 3px; padding-inline: 2px; }

.psmt-quote { margin: 0; padding: var(--s-3) var(--s-4); border-left: 3px solid var(--green-400); background: var(--surface-quiet); border-radius: 0 var(--r-md) var(--r-md) 0; display: flex; flex-direction: column; gap: var(--s-2); font: var(--t-body); }
.psmt-quote cite { font: var(--t-caption); font-style: normal; color: var(--muted); }

.psmt .btn { align-self: flex-start; }
.psmt-sign { padding-top: var(--s-6); font: var(--t-body-lg); color: var(--muted); }

/* Students read the guide on their own phones, so this page alone lifts the
   app's laptop minimum (base.css) and fits its top bar to a narrow screen. */
body:has(.psmt-page) { min-width: 0; }
@media (max-width: 720px) {
  body:has(.psmt-page) .topbar { gap: var(--s-2); padding-inline: var(--s-4); }
  body:has(.psmt-page) .topbar .brand img { height: 22px; }
  body:has(.psmt-page) .mainnav { margin-left: 0; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; }
  body:has(.psmt-page) .topbar > .grow { display: none; }
  body:has(.psmt-page) .mainnav > a { padding: 0 var(--s-2); }
  body:has(.psmt-page) .mainnav > a svg,
  body:has(.psmt-page) .topbar .who,
  body:has(.psmt-page) .view-chip > span:not(.vc-exit),
  body:has(.psmt-page) .view-chip > svg { display: none; }
  body:has(.psmt-page) .view-chip { padding: 0 var(--s-1); }
  .psmt-page .page-body, .psmt-page .hero-in { padding-inline: var(--s-4); }
  .psmt-page .card.psmt-ex { padding: var(--s-4); }
  .psmt-fold summary { padding-inline: var(--s-4); }
  .psmt-fold .body { padding-inline: var(--s-4); }
  .psmt-page .skill-progress.size-lg .sp-bar { width: 180px; }
  .psmt .btn { white-space: normal; height: auto; min-height: var(--btn-h); padding-block: var(--s-2); text-align: left; }
}

/* Touch (a student's phone or tablet): fingertip-sized targets. The tags sit
   in the prose, so they keep their look and get a larger invisible hit area. */
@media (pointer: coarse) {
  .psmt-toc .chip, .psmt-order li > a { min-height: 44px; }
  .psmt-tag { position: relative; }
  .psmt-tag::before { content: ""; position: absolute; inset: -10px -3px; }
}