/* Pear · sample report dialog, "can't read it → can read it" demo, three-question quiz.
 * Reads every colour, typeface, radius, shadow and duration from tokens.css (load that first).
 * Type is the app's: Inter (Chiron Hei HK in zh) at 400, 500 for titles and labels; every number is data and
 * is set in IBM Plex Mono Regular (--font-mono), tracking -0.01em; no 600/700 and no display face in here.
 * Everything is namespaced .ps-; nothing here styles the host page.
 * Breakpoints: 720px = report/quiz dialogs go full-screen; 900px = report goes two-column and the demo card moves
 * beside the sheet; 1440px = the demo sheet splits into two halves; 600px = phone-width table. */

/* ---------- Scope: base, resets, focus ---------- */
.ps-dialog,
.ps-magic {
  --ps-mono: var(--font-num, var(--font-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace));
  --ps-ring: var(--surface); /* gap colour around dots and between bar zones: the surface they sit on */
  font: 400 var(--fs-body)/var(--lh-body) var(--font-sans);
  color: var(--text-primary);
  text-align: left;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}
.ps-dialog *, .ps-dialog *::before, .ps-dialog *::after,
.ps-magic *, .ps-magic *::before, .ps-magic *::after { box-sizing: border-box; }

:where(.ps-dialog, .ps-magic) :where(h1, h2, h3, h4, p, ul, ol, li, figure) { margin: 0; padding: 0; }
:where(.ps-dialog, .ps-magic) :where(h1, h2, h3, h4) { font: inherit; letter-spacing: inherit; }
:where(.ps-dialog, .ps-magic) :where(ul, ol) { list-style: none; }
:where(.ps-dialog, .ps-magic) button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  border-radius: 0; text-align: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
:where(.ps-dialog, .ps-magic) svg { display: block; flex: none; }
:where(.ps-dialog, .ps-magic) img { display: block; max-width: 100%; }
.ps-dialog [hidden], .ps-magic [hidden] { display: none !important; }
/* Chinese breaks between words, never inside one: wrapZh() wraps every word in .wseg (same rule as site.css) */
:where(.ps-dialog, .ps-magic) .wseg { white-space: nowrap; }

.ps-dialog :focus-visible,
.ps-magic :focus-visible { outline: 3px solid var(--focus-on-light); outline-offset: 3px; }

/* every number that is data: IBM Plex Mono Regular */
.ps-num, .ps-unit, .ps-u, .ps-c--unit, .ps-view__num, .ps-ex__num, .ps-mark__val, .ps-tick, .ps-c--n, .ps-plan__time, .ps-progress__text, .ps-row__val b {
  font-family: var(--ps-mono); font-weight: 400; letter-spacing: -0.01em;
}
.ps-vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ps-copybuf { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* ---------- Buttons: pill, 36px, jelly glass ----------
 * The landing's jelly tokens (--jelly-* in css/site.css): a translucent sage body over a
 * blurred backdrop, a soft gloss from the top edge, a bright top highlight and no outline
 * line. The report is a light panel, so only the sage jelly is used; primary adds the
 * forest tint and a forest label, secondary keeps the ink label; both 500. */
.ps-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 36px; padding: 8px 19px; border: 0; border-radius: var(--r-pill);
  font: 500 14px/20px var(--font-sans); letter-spacing: 0.01em; white-space: nowrap; text-decoration: none;
  background-color: var(--jelly-bg); background-image: var(--jelly-gloss); color: var(--ink);
  -webkit-backdrop-filter: var(--jelly-blur); backdrop-filter: var(--jelly-blur);
  box-shadow: var(--jelly-shadow);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.ps-btn:hover { background-color: var(--jelly-bg-hover); }
.ps-btn:active { transform: scale(0.98); }
/* compact pills like the rest of the site; touch keeps a 44px target */
@media (pointer: coarse) { .ps-btn::before { content: ""; position: absolute; inset: -5px 0; } }
.ps-btn--primary { background-image: var(--jelly-gloss), linear-gradient(var(--jelly-tint), var(--jelly-tint)); color: var(--jelly-ink); }

/* Text-style buttons */
.ps-cta, .ps-linkbtn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-1); border-radius: var(--r-sm);
  font: 500 var(--fs-body)/1.3 var(--font-sans); color: var(--forest);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: color var(--dur-1) var(--ease-out);
}
.ps-cta:hover, .ps-linkbtn:hover { color: var(--forest-2); }
.ps-cta .ps-icon { transition: transform var(--dur-1) var(--ease-out); }
.ps-cta:hover .ps-icon { transform: translateX(3px); }
.ps-linkbtn--sm { min-height: 28px; font-size: var(--fs-micro); }
.ps-linkbtn.is-off { visibility: hidden; }

.ps-close, .ps-roundbtn {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card);
  transition: background-color var(--dur-1) var(--ease-out);
}
.ps-close:hover, .ps-roundbtn:hover { background: var(--sage); }
.ps-roundbtn.is-off { visibility: hidden; }

/* ---------- Tags: plain text labels, never button-shaped ---------- */
.ps-tag {
  display: inline-flex; align-items: center; flex: none; padding: 2px 8px;
  border-radius: calc(var(--r-sm) * 0.6);
  font: 500 var(--fs-micro)/18px var(--font-sans); letter-spacing: 0.01em; white-space: nowrap;
}
.ps-tag--review { background: var(--warm-soft); color: var(--warm-ink); }
.ps-tag--steady { background: var(--ok-soft); color: var(--ok-ink); }
.ps-tag--soft { background: var(--sage); color: var(--forest); }
.ps-tag--sample {
  background: rgba(255, 255, 255, 0.7); color: var(--ink-2);
  font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase;
}
html:lang(zh) .ps-tag--sample { letter-spacing: 0.04em; font-size: 12px; }
.ps-head .ps-tag--sample { background: var(--surface); }

/* ---------- Dialog shell ---------- */
.ps-dialog {
  position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden;
}
.ps-dialog[open] { display: grid; place-items: center; }
.ps-dialog::backdrop { background: rgba(9, 12, 11, 0.56); }

.ps-panel {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  width: min(1080px, calc(100% - 2 * var(--s-5))); height: min(90vh, 900px);
  background: var(--page); color: var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lift); overflow: hidden;
}
.ps-panel--quiz { width: min(640px, calc(100% - 2 * var(--s-5))); height: min(640px, 90vh); }

.ps-dialog[open] .ps-panel { animation: ps-in var(--dur-2) var(--ease-out); }
.ps-dialog[open]::backdrop { animation: ps-fade-in var(--dur-2) var(--ease-out); }
.ps-dialog.is-closing .ps-panel { animation: ps-out 200ms var(--ease-in-out) forwards; }
.ps-dialog.is-closing::backdrop { animation: ps-fade-out 200ms var(--ease-in-out) forwards; }
@keyframes ps-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes ps-out { to { opacity: 0; transform: translateY(16px); } }
@keyframes ps-fade-in { from { opacity: 0; } }
@keyframes ps-fade-out { to { opacity: 0; } }
@keyframes ps-step { from { opacity: 0; transform: translateX(16px); } }
@keyframes ps-step-back { from { opacity: 0; transform: translateX(-16px); } }

/* ---------- Report: header ---------- */
.ps-head { flex: none; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-3); }
.ps-title {
  flex: 1; min-width: 0; font: 500 var(--fs-card-h2)/1.25 var(--font-sans);
  letter-spacing: -0.015em; color: var(--text-primary); text-wrap: balance;
}
html:lang(zh) .ps-title { line-height: 1.4; letter-spacing: 0.01em; }
.ps-title__meta { font: 400 var(--fs-small)/1.5 var(--font-sans); letter-spacing: 0; color: var(--ink-2); }

/* ---------- Report: layout ---------- */
.ps-body { position: relative; flex: 1; min-height: 0; display: flex; }
.ps-main {
  flex: 1; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-1) var(--s-4) var(--s-5);
}
.ps-main > * { flex: none; }
.ps-detail { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ps-detail__bar { display: none; padding: var(--s-1) var(--s-3) var(--s-2); }
.ps-detail__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-1); }
.ps-detail__card { display: flex; flex-direction: column; gap: var(--s-5); }

@media (min-width: 900px) {
  .ps-body { gap: var(--s-4); padding: 0 var(--s-5) var(--s-4); }
  .ps-main { flex: 0 0 clamp(340px, 40%, 440px); padding: var(--s-1) var(--s-1) var(--s-2); }
  .ps-detail { flex: 1; }
}
/* Below 900px the detail is a sheet that slides over the list. */
@media (max-width: 899.98px) {
  .ps-detail {
    position: absolute; inset: 0; z-index: 3; background: var(--page);
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
  }
  .ps-panel.is-detail-open .ps-detail {
    transform: none; visibility: visible;
    transition: transform var(--dur-2) var(--ease-out), visibility 0s linear 0s;
  }
  .ps-detail__bar { display: flex; }
  .ps-detail__scroll { padding: 0 var(--s-4) var(--s-5); }
}

.ps-back {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; padding: 0 var(--s-4) 0 var(--s-2);
  border-radius: var(--r-pill); font: 500 var(--fs-body)/1 var(--font-sans); color: var(--forest);
  transition: background-color var(--dur-1) var(--ease-out);
}
.ps-back:hover { background: var(--sage); }

/* ---------- Cards and section heads ---------- */
.ps-card { min-width: 0; padding: var(--s-5); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.ps-card__head, .ps-sechead { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.ps-card__title { font: 500 var(--fs-body)/1.3 var(--font-sans); }
.ps-sechead { padding: 0 var(--s-1) var(--s-2); }
.ps-sechead__title { font: 500 var(--fs-small)/1.3 var(--font-sans); color: var(--ink-2); }

/* ---------- Overview: five systems ---------- */
.ps-sys { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); }
.ps-sys__item {
  grid-column: span 2; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--s-3) var(--s-2); text-align: center; background: var(--surface);
  border-radius: var(--r-md); box-shadow: var(--shadow-card);
}
.ps-sys__item:nth-child(n + 4) { grid-column: span 3; }
.ps-sysicon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-bottom: 2px; }
.ps-sysicon img { width: 40px; height: 40px; object-fit: contain; }
.ps-sysicon.is-fallback { border-radius: 50%; background: var(--sage); color: var(--forest); }
.ps-sys__name { font: 500 var(--fs-small)/1.3 var(--font-sans); }
.ps-sys__state { font: 500 var(--fs-micro)/1.3 var(--font-sans); }
.ps-sys__state--review { color: var(--warm-ink); }
.ps-sys__state--steady { color: var(--ok-ink); }
@media (min-width: 720px) and (max-width: 899.98px) {
  .ps-sys { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ps-sys__item, .ps-sys__item:nth-child(n + 4) { grid-column: span 1; }
}

/* ---------- Marker list ---------- */
.ps-list { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-2) var(--s-3); }
.ps-list .ps-card__head { padding: 0 var(--s-3) var(--s-1); }
.ps-group__title {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-1); font: 500 var(--fs-micro)/1.4 var(--font-sans); color: var(--ink-2);
}
.ps-rows { display: grid; gap: 2px; }
.ps-row {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 18px;
  grid-template-areas: "name tag chev" "val val chev"; align-items: center; column-gap: var(--s-3); row-gap: 2px;
  padding: var(--s-3); border-radius: var(--r-md); text-align: left;
  transition: background-color var(--dur-1) var(--ease-out);
}
.ps-row__name { grid-area: name; min-width: 0; font: 400 var(--fs-body)/1.4 var(--font-sans); }
.ps-row__val { grid-area: val; font-size: var(--fs-small); color: var(--ink-2); }
.ps-row__val b { font-size: var(--fs-body); color: var(--ink); }
.ps-row > .ps-tag { grid-area: tag; justify-self: end; }
.ps-row__chev { grid-area: chev; color: var(--ink-2); }
.ps-row:hover { background: var(--page); }
.ps-row[aria-pressed="true"] { background: var(--sage); }

/* ---------- Daily plan ---------- */
.ps-plan { display: flex; flex-direction: column; gap: var(--s-3); }
.ps-plan__note { margin-top: calc(var(--s-2) * -1); font-size: var(--fs-small); color: var(--ink-2); }
.ps-plan__list { display: grid; gap: var(--s-2); }
.ps-plan__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-3); align-items: center; }
.ps-plan__time { font-size: var(--fs-small); line-height: 1.2; color: var(--ink-2); }
.ps-plan__task { padding: var(--s-3) var(--s-4); background: var(--page); border-radius: var(--r-md); font: 400 var(--fs-small)/1.5 var(--font-sans); }

/* ---------- Detail card ---------- */
.ps-d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.ps-d-titles { min-width: 0; }
.ps-d-name { font: 500 var(--fs-card-h3)/1.3 var(--font-sans); letter-spacing: -0.005em; }
.ps-d-sub { margin-top: 2px; font-size: var(--fs-small); color: var(--ink-2); }
.ps-d-tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.ps-sec { display: flex; flex-direction: column; gap: var(--s-2); }
.ps-sec__label { font: 500 var(--fs-small)/1.3 var(--font-sans); color: var(--ink-2); }
.ps-p { font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; overflow-wrap: break-word; }

.ps-view {
  --ps-ring: var(--page); display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4); background: var(--page); border-radius: var(--r-md);
}
.ps-view__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.ps-view__read { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-view__cap { font-size: var(--fs-small); color: var(--ink-2); }
.ps-view__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); }
.ps-view__num { font-size: 36px; line-height: 1.15; letter-spacing: -0.02em; }
.ps-unit { font-size: var(--fs-small); font-weight: 400; color: var(--ink-2); }
.ps-conv { font-size: var(--fs-small); color: var(--ink-2); }
.ps-seg {
  display: inline-flex; flex: none; gap: 2px; padding: 3px; background: var(--surface);
  border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line);
}
.ps-segbtn {
  min-height: 36px; padding: 0 var(--s-4); border-radius: var(--r-pill); font: 500 var(--fs-small)/1 var(--font-sans);
  color: var(--ink-2); transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.ps-segbtn[aria-pressed="true"] { background: var(--forest); color: var(--page); }
.ps-segbtn[aria-pressed="false"]:hover { background: var(--sage); color: var(--forest); }
.ps-delta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); font-size: var(--fs-small); }
.ps-delta .ps-icon { color: var(--ink-2); }
.ps-delta__txt { font-weight: 500; }
.ps-delta__vals { color: var(--ink-2); }
.ps-key { display: flex; justify-content: flex-end; gap: var(--s-4); font-size: var(--fs-micro); color: var(--ink-2); }
.ps-key__item { display: inline-flex; align-items: center; gap: 6px; }
.ps-key__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--forest); }
.ps-key__dot--hollow { background: var(--surface); box-shadow: inset 0 0 0 2px var(--forest); }

.ps-steps { display: flex; flex-direction: column; gap: var(--s-3); counter-reset: ps-step; }
.ps-steps li { position: relative; padding-left: 40px; counter-increment: ps-step; line-height: var(--lh-body); overflow-wrap: break-word; }
.ps-steps li::before {
  content: counter(ps-step); position: absolute; left: 0; top: -1px; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--sage); color: var(--forest);
  font: 400 13px/1 var(--ps-mono);
}
.ps-steps--single li::before { content: "\2713"; }

.ps-meta { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.ps-evrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.ps-ev {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--page);
  border-radius: calc(var(--r-sm) * 0.6); font: 500 var(--fs-small)/1.3 var(--font-sans);
}
.ps-ev__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--state-optimal); }
.ps-ev--mixed .ps-ev__dot { background: var(--warm); }
.ps-ev--discuss .ps-ev__dot { background: var(--ink-2); }
.ps-source { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); overflow-wrap: break-word; }
.ps-source__label { font-weight: 500; color: var(--ink); }

/* ---------- Range bar: lab band and research scale ---------- */
.ps-range { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.ps-track { min-width: 0; }
.ps-track__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-small); line-height: 1.3; }
.ps-track__name { font-weight: 500; }
.ps-track__range { font-family: var(--ps-mono); font-size: var(--fs-micro); letter-spacing: -0.01em; color: var(--ink-2); text-align: right; }
.ps-bar { position: relative; height: 12px; margin: 33px 14px 0; }
.ps-zones { position: absolute; inset: 0; border-radius: var(--r-pill); overflow: hidden; }
.ps-zone { position: absolute; top: 0; bottom: 0; display: block; border-right: 2px solid var(--ps-ring); }
.ps-zone:last-child { border-right: 0; }
.ps-zone--in, .ps-zone--ok { background: var(--mint); }
.ps-zone--out { background: var(--warm-soft); }
.ps-zone--pre { background: var(--warm); }
.ps-zone--conf { background: var(--warm-ink); }

.ps-mark { position: absolute; top: 50%; border-radius: 50%; transition: left var(--dur-1) var(--ease-out); }
.ps-mark--cur { z-index: 3; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--forest); box-shadow: 0 0 0 3px var(--ps-ring); }
.ps-mark--prev {
  z-index: 2; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--forest), 0 0 0 2px var(--ps-ring);
}
.ps-link {
  position: absolute; z-index: 1; top: 50%; height: 2px; margin-top: -1px; background: var(--forest); opacity: 0.4;
  transition: left var(--dur-1) var(--ease-out), width var(--dur-1) var(--ease-out);
}
.ps-mark__val {
  position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%);
  padding: 0 8px; background: var(--forest); color: var(--page); border-radius: calc(var(--r-sm) * 0.6);
  font-size: var(--fs-micro); line-height: 18px; white-space: nowrap;
}
.ps-mark__val::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -4px;
  border: 4px solid transparent; border-top-color: var(--forest);
}
.ps-ticks { position: relative; height: 16px; margin: 10px 14px 0; }
.ps-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; line-height: 16px; color: var(--ink-2); white-space: nowrap; }
.ps-legend { display: flex; flex-wrap: wrap; gap: 2px var(--s-4); margin-top: var(--s-2); font-size: var(--fs-micro); line-height: 1.5; color: var(--ink-2); }
.ps-legend__item { display: inline-flex; align-items: baseline; gap: 6px; }
.ps-legend__name { color: var(--ink); }
.ps-sw { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; transform: translateY(1px); }
.ps-sw--ok { background: var(--mint); }
.ps-sw--pre { background: var(--warm); }
.ps-sw--conf { background: var(--warm-ink); }

/* ---------- Verdict: two yardsticks in words ---------- */
.ps-verdict {
  display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3) var(--s-4);
  background: var(--surface); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-small); line-height: 1.5;
}
.ps-verdict--study { min-height: 100px; }
.ps-verdict__sep { display: none; }
.ps-verdict__line { display: flex; align-items: baseline; gap: var(--s-2); font-weight: 500; }
.ps-dotmark { flex: none; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-1px); }
.ps-verdict__line--ok .ps-dotmark { background: var(--state-optimal); }
.ps-verdict__line--warn .ps-dotmark { background: var(--warm-ink); }
.ps-verdict__emph { margin-top: var(--s-1); font-weight: 500; color: var(--warm-ink); }

/* ---------- Report footer ---------- */
.ps-foot {
  flex: none; display: flex; align-items: center; gap: var(--s-4) var(--s-5);
  padding: var(--s-4) var(--s-5); background: var(--surface); border-top: 1px solid var(--line);
}
.ps-foot__note { flex: 1; min-width: 0; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }
.ps-foot__actions { display: flex; flex: none; gap: var(--s-3); }

/* ---------- Quiz ---------- */
.ps-qhead { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5) var(--s-2); }
.ps-progress__wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); }
.ps-progress { flex: 1; height: 6px; background: var(--sage-2); border-radius: var(--r-pill); overflow: hidden; }
.ps-progress__bar { display: block; width: 33.3%; height: 100%; background: var(--forest); border-radius: var(--r-pill); transition: width var(--dur-2) var(--ease-out); }
.ps-progress__text { min-width: 32px; text-align: right; font-size: var(--fs-small); line-height: 1; color: var(--ink-2); }
.ps-qscroll { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-4) var(--s-5) var(--s-5); }
.ps-qview { display: flex; flex-direction: column; gap: var(--s-4); margin: auto 0; animation: ps-step var(--dur-2) var(--ease-out); }
.ps-qview[data-dir="back"] { animation-name: ps-step-back; }
.ps-eyebrow { font: 500 var(--fs-micro)/18px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--state-optimal); }
html:lang(zh) .ps-eyebrow { font-size: var(--fs-small); letter-spacing: 0.04em; text-transform: none; }
.ps-qtitle {
  font: 500 var(--fs-card-h2)/1.25 var(--font-sans); letter-spacing: -0.015em;
  color: var(--text-primary); text-wrap: balance; outline: none;
}
html:lang(zh) .ps-qtitle { line-height: 1.4; letter-spacing: 0.01em; }
.ps-qlead { color: var(--ink-2); }
.ps-qnote { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }

.ps-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-2); }
.ps-opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 72px;
  padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-card); font: 500 17px/1.35 var(--font-sans); text-align: left;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.ps-opt:hover { border-color: var(--leaf); }
.ps-opt:active { transform: scale(0.99); }
.ps-opt[aria-pressed="true"] { background: var(--sage); border-color: var(--forest); }
.ps-opt__tick { flex: none; color: var(--forest); opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
.ps-opt[aria-pressed="true"] .ps-opt__tick { opacity: 1; }

.ps-note { padding: var(--s-3) var(--s-4); background: var(--sage); border-radius: var(--r-md); color: var(--forest); font: 400 var(--fs-small)/1.6 var(--font-sans); }
.ps-checkcard { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-4) var(--s-5); }
.ps-check__gtitle { margin-bottom: var(--s-1); font: 500 var(--fs-micro)/1.4 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
html:lang(zh) .ps-check__gtitle { font-size: var(--fs-small); letter-spacing: 0.04em; text-transform: none; }
.ps-check__list { display: flex; flex-direction: column; }
.ps-check__item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.ps-check__item:first-child { border-top: 0; }
.ps-check__mark { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--sage); color: var(--forest); }
.ps-check__title { font: 400 var(--fs-body)/1.5 var(--font-sans); overflow-wrap: break-word; }
.ps-check__title .ps-tag { margin-left: var(--s-2); vertical-align: 1px; }
.ps-check__reason { margin-top: 2px; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }
.ps-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

/* ---------- Demo: a lab report sheet, with Pear's reading beside it ----------
 * One DOM, three layouts:
 *   1440px and up  the sheet splits into two halves; the card floats in a right-hand rail, level with the row,
 *                  joined to it by a leader line (the demo steps a little outside the page column to fit)
 *   900-1439px     one column of rows; card in the rail, leader line
 *   under 900px    one condensed column; the card opens directly under the selected row
 * Test names never wrap, so the columns are sized from the widest name: "Aspartate transaminase" is 145px at 13px
 * in Inter, and the longest Chinese name (ten characters) is 130px. Two halves need about 1260px, hence 1440.
 * layout() in the script keeps the card region in the rail on wide screens and in the row's slot on narrow ones. */
.ps-magic {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start;
  --ps-cols: 25px 40px minmax(0, 1fr) 52px 45px 64px; /* # · code · test · result · units · reference range */
  --ps-pad: var(--s-5); /* the sheet's side padding */
  --ps-card-w: clamp(284px, 28vw, 332px);
  --ps-gap: clamp(28px, 3.4vw, 40px);
}

/* The sheet: paper, centred title, SAMPLE stamp, field grid, heavy rule, table, footer */
.ps-sheet {
  position: relative; min-width: 0; padding: var(--s-6) var(--ps-pad) var(--s-5);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-card);
}
.ps-sheet__head { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; }
.ps-sheet__title {
  font: 500 var(--fs-card-h2)/1.25 var(--font-sans); letter-spacing: -0.015em;
  color: var(--ink); text-wrap: balance;
}
html:lang(zh) .ps-sheet__title { line-height: 1.4; letter-spacing: 0.01em; }
.ps-stamp {
  display: inline-flex; align-items: baseline; gap: var(--s-2); padding: 3px var(--s-3);
  border: 1px solid var(--warm-ink); border-radius: var(--r-sm); outline: 1px solid var(--warm-ink); outline-offset: 2px;
  color: var(--warm-ink); font: 500 var(--fs-micro)/18px var(--font-sans);
  letter-spacing: 0.2em; text-transform: uppercase; transform: rotate(-1.5deg);
}

.ps-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-5); margin: var(--s-5) 0 0; }
.ps-field {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); min-width: 0;
  padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.45;
}
.ps-field dt { margin: 0; color: var(--ink-2); }
.ps-field dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Results: heavy rule above, hairlines between rows, a closing rule below. Small type, tight cells, like a print. */
.ps-tbl {
  display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--s-4);
  border-top: 3px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.ps-half { min-width: 0; }
.ps-half + .ps-half .ps-thead { display: none; } /* the second header only shows when the halves sit side by side */
.ps-thead {
  display: grid; grid-template-columns: var(--ps-cols); column-gap: 3px; align-items: end;
  padding: var(--s-2) var(--s-1) var(--s-2) var(--s-4); border-bottom: 1px solid var(--ink-2);
  font: 500 var(--fs-micro)/1.3 var(--font-sans); color: var(--ink-2);
}
.ps-thead .ps-c { white-space: normal; } /* a header may wrap ("Reference range"); the names below never do */
.ps-li { border-bottom: 1px solid var(--line); }
.ps-li:last-child { border-bottom: 0; }
.ps-half:first-child .ps-li:last-child { border-bottom: 1px solid var(--line); } /* one list continues into the next */

.ps-trow {
  position: relative; display: grid; grid-template-columns: var(--ps-cols); column-gap: 3px; align-items: center;
  width: 100%; min-height: 44px; padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4);
  font-size: 13px; line-height: 1.3; text-align: left;
  transition: background-color var(--dur-1) var(--ease-out);
}
.ps-trow[aria-pressed="true"] { background: var(--sage); }
.ps-trow.is-worth::before { /* the small warm marker: Pear points this one out */
  content: ""; position: absolute; left: 4px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--warm);
}
.ps-magic .ps-trow:focus-visible { outline-offset: -3px; }

.ps-c { min-width: 0; }
.ps-c--n, .ps-c--code, .ps-c--unit { color: var(--ink-2); font-size: var(--fs-micro); white-space: nowrap; }
.ps-c--code { font-family: var(--ps-mono); letter-spacing: -0.01em; }
.ps-c--name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* never wraps; the ellipsis is a last resort on tiny screens */
.ps-c--res { position: relative; padding-right: var(--s-4); text-align: right; white-space: nowrap; }
.ps-trow .ps-c--res { font-weight: 400; }
.ps-c--res .ps-u { display: none; } /* the unit after the value: phones only, where the unit column is dropped */
.ps-c--ref { white-space: nowrap; }
.ps-flag { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-weight: 500; color: var(--warm-ink); }

.ps-sheet__foot { display: grid; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--fs-small); line-height: 1.55; }
.ps-sheet__foot p { min-width: 0; }
.ps-lab { color: var(--ink-2); }
.ps-notes { color: var(--ink-2); }
.ps-notes .ps-lab { font-weight: 500; color: var(--ink); }
.ps-signs, .ps-times { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-6); }
.ps-page { margin-left: auto; color: var(--ink-2); }

/* Pear's reading: one card at a time inside a polite live region */
.ps-float { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
.ps-float > .ps-ex { grid-area: 1 / 1; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.ps-float > .ps-ex.is-enter { opacity: 0; transform: translateY(8px); }
.ps-float > .ps-ex.is-leaving { opacity: 0; pointer-events: none; }
.ps-probe { position: absolute; left: 0; top: 0; width: 100%; visibility: hidden; pointer-events: none; }
.ps-slot:empty { display: none; }
.ps-slot { padding: var(--s-2) 0 var(--s-4); }
.ps-rail, .ps-leader { display: none; }

.ps-ex { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.ps-ex__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.ps-ex__titles { flex: 1 1 auto; min-width: 0; }
.ps-ex__name { font: 500 var(--fs-card-h3)/1.3 var(--font-sans); letter-spacing: -0.005em; overflow-wrap: anywhere; }
.ps-ex__val { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); margin-top: 2px; }
.ps-ex__num { font-size: var(--fs-body); line-height: 1.5; }
.ps-ex__head .ps-tag { margin-top: 2px; }
.ps-ex__text { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.ps-ex__what, .ps-ex__read { font-size: var(--fs-small); line-height: 1.7; text-wrap: pretty; overflow-wrap: break-word; }
.ps-ex__what { color: var(--ink-2); }
html:lang(zh) .ps-ex__what, html:lang(zh) .ps-ex__read { line-height: 1.8; }
.ps-ex .ps-source { padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-micro); line-height: 1.6; }

/* Wide: the card floats in the rail beside the sheet, level with its row; a leader line joins them. */
@media (min-width: 900px) {
  .ps-magic { grid-template-columns: minmax(0, 1fr) var(--ps-card-w); column-gap: var(--ps-gap); row-gap: 0; }
  .ps-rail { display: block; position: relative; align-self: stretch; min-width: 0; }
  .ps-float {
    position: absolute; left: 0; top: 0; width: 100%; z-index: 3;
    transform: translateY(var(--ps-y, 0px)); transition: transform var(--dur-2) var(--ease-out);
  }
  .ps-leader { display: block; position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; }
  .ps-leader__line { /* 100px wide, scaled to length: only transform and opacity ever animate */
    position: absolute; left: 0; top: 0; width: 100px; height: 1px; background: var(--forest); opacity: 0.5;
    transform-origin: 0 0; transform: translate(var(--lx, 0px), var(--ly, 0px)) scaleX(var(--ls, 0));
    transition: transform var(--dur-2) var(--ease-out);
  }
  .ps-leader__dot {
    position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%;
    background: var(--forest); transform: translate(var(--dx, 0px), calc(var(--ly, 0px) + 0.5px));
    transition: transform var(--dur-2) var(--ease-out);
  }
  .ps-magic.is-still .ps-float, .ps-magic.is-still .ps-leader__line, .ps-magic.is-still .ps-leader__dot { transition: none; }
}
@media (min-width: 900px) and (max-width: 1099.98px) {
  .ps-magic { --ps-pad: var(--s-4); } /* just enough room for the longest name beside a 284px card */
}
@media (min-width: 1100px) and (max-width: 1439.98px) {
  .ps-magic { --ps-cols: 28px 52px minmax(0, 1fr) 58px 56px 90px; } /* one column, plenty of room: roomier cells */
}

/* Widest: two halves side by side, as on the printed original. */
@media (min-width: 1440px) {
  .ps-magic {
    /* Follow the shared desktop grid; the old 1280px cap left the report
     * noticeably narrower than the rest of the page on larger screens. */
    width: 100%; margin-inline: 0;
  }
  .ps-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ps-tbl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-half:first-child { padding-right: var(--s-2); }
  .ps-half + .ps-half { padding-left: var(--s-2); border-left: 1px solid var(--line); }
  .ps-half + .ps-half .ps-thead { display: grid; }
  .ps-li:last-child, .ps-half:first-child .ps-li:last-child { border-bottom: 0; }
}

/* Phones: one condensed column. The #, code and unit columns go (the unit follows the value in small type);
 * the sheet steps 12px into the page gutter so the longest name still fits on one line from 375px up. */
@media (max-width: 599.98px) {
  .ps-magic { --ps-cols: minmax(0, 1fr) 88px 62px; --ps-pad: var(--s-3); margin-inline: -12px; }
  .ps-c--n, .ps-c--code, .ps-c--unit { display: none; }
  .ps-c--res { padding-right: 0; text-align: left; }
  .ps-c--res .ps-u { display: inline; margin-left: 2px; color: var(--ink-2); font-size: 11px; font-weight: 400; }
  .ps-flag { position: static; display: inline; margin-left: 1px; transform: none; }
  .ps-c--ref { font-size: var(--fs-micro); }
  .ps-sheet { padding-top: var(--s-5); padding-bottom: var(--s-4); }
  .ps-fields { column-gap: var(--s-4); }
  .ps-trow, .ps-thead { padding-left: 14px; padding-right: 2px; }
  .ps-trow.is-worth::before { left: 3px; }
  .ps-signs, .ps-times { gap: var(--s-1) var(--s-5); }
  .ps-page { margin-left: 0; }
}
@media (max-width: 389.98px) {
  .ps-c--name { font-size: var(--fs-micro); } /* 375px: the longest English name is 134px at 12px, 145px at 13px */
}

/* ---------- Phones and narrow windows ---------- */
@media (max-width: 719.98px) {
  .ps-dialog[open] { place-items: stretch; }
  .ps-panel, .ps-panel--quiz { width: auto; height: auto; border-radius: 0; box-shadow: none; }
  .ps-head { align-items: flex-start; padding: max(var(--s-4), env(safe-area-inset-top)) var(--s-4) var(--s-2); }
  .ps-title__main { display: block; }
  .ps-title__meta { display: block; margin-top: 2px; }
  .ps-title__sep { display: none; }
  .ps-main { padding: var(--s-1) var(--s-4) var(--s-5); }
  .ps-foot { flex-direction: column; align-items: stretch; gap: var(--s-3); padding: var(--s-3) var(--s-4) max(var(--s-3), env(safe-area-inset-bottom)); }
  .ps-foot__note { flex: none; font-size: var(--fs-micro); line-height: 1.5; }
  .ps-foot__actions .ps-btn { flex: 1 1 auto; padding-left: var(--s-4); padding-right: var(--s-4); }
  .ps-card { padding: var(--s-4); }
  .ps-card.ps-list { padding: var(--s-4) var(--s-2) var(--s-3); }
  .ps-detail__card { gap: var(--s-4); }
  .ps-view { padding: var(--s-3); }
  .ps-qhead { padding: max(var(--s-4), env(safe-area-inset-top)) var(--s-4) var(--s-2); }
  .ps-qscroll { padding: var(--s-4) var(--s-4) max(var(--s-5), env(safe-area-inset-bottom)); }
  .ps-opt { padding: var(--s-4); }
  .ps-actions .ps-btn { flex: 1 1 100%; }
  .ps-actions .ps-linkbtn { margin: 0 auto; }
}
/* Short viewports (landscape phones): a centred panel would leave almost no room, so fill the screen. */
@media (max-height: 520px) {
  .ps-dialog[open] { place-items: stretch; }
  .ps-panel, .ps-panel--quiz { width: auto; height: auto; border-radius: 0; box-shadow: none; }
  .ps-head, .ps-qhead { padding-top: var(--s-3); padding-bottom: var(--s-1); }
  .ps-foot { padding-top: var(--s-2); padding-bottom: var(--s-2); }
}
@media (min-width: 560px) {
  .ps-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-options--stack { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599.98px) {
  .ps-view__num { font-size: 32px; }
}

/* ---------- Reduced motion: tokens already zero the durations; drop the fixed 200ms close ---------- */
@media (prefers-reduced-motion: reduce) {
  .ps-dialog.is-closing .ps-panel, .ps-dialog.is-closing::backdrop { animation: none; }
  .ps-btn:active, .ps-opt:active { transform: none; }
  .ps-cta:hover .ps-icon { transform: none; }
  .ps-float > .ps-ex.is-enter { transform: none; }
}