/* ── HERB RECOGNITION ──────────────────────────────────────────────────
   The image quiz, the Recognition option of the Herbs tab
   (assets/js/herb-recognition.js): its landing in #hr-home inside the Herbs
   page, then quiz and results in #hr-view in the page's place.
   Image first: illustrations sit on a soft parchment pool with a neutral
   shadow, never cropped, stretched or colour-filtered. Lime starts and
   advances; forest marks choices made. Built on the hub tokens
   (home-hub.css) and mobile first, widening at 600px and 901px. */

.hr-start .ui-icon,.hr-next .ui-icon{width:17px;height:17px;stroke-width:2.2;vertical-align:0}

/* -- Landing: progress, then the settings with Start in reach -- */
.hr-home{display:flex;flex-direction:column;gap:14px;width:100%;max-width:1120px;margin:0 auto;color:var(--hub-ink);font-family:'Inter',sans-serif}
.hr-home[hidden]{display:none}
.hr-overview{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--hub-line);border-radius:20px;background:linear-gradient(120deg,var(--hub-card) 52%,#eef3e4);box-shadow:var(--hub-shadow)}
.hr-overview-art{display:flex;align-items:center;justify-content:center;height:72px}
.hr-overview-img{flex:0 0 auto;width:42%;height:auto;margin-left:-11%;filter:drop-shadow(0 5px 7px rgba(36,49,44,.2));-webkit-user-drag:none;user-select:none}
.hr-overview-img:first-child{margin-left:0;transform:rotate(-8deg)}
.hr-overview-img:nth-child(2){position:relative;z-index:1;transform:translateY(-7px)}
.hr-overview-img:nth-child(3){transform:rotate(8deg)}
.hr-overview-copy{min-width:0}
.hr-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.hr-stats li{display:flex;flex-direction:column;min-width:0}
.hr-stats strong{font:400 27px/1.05 var(--hub-serif);color:var(--hub-forest-2);font-variant-numeric:tabular-nums}
.hr-stats span{font:600 12px/1.3 'Inter',sans-serif;color:var(--hub-muted)}
.hr-overview-note{margin:8px 0 0;font-size:13px;line-height:1.4;color:var(--hub-muted)}
.hr-setup-title{grid-column:1/-1;margin:0;font:700 17px/1.3 'Inter',sans-serif;letter-spacing:-.01em;color:var(--hub-ink)}
/* Question type and choices, which the levels already set, fold away. */
.hr-more{border-top:1px solid var(--hub-line)}
.hr-more summary{display:flex;align-items:center;gap:12px;min-height:52px;padding:4px 0;cursor:pointer;list-style:none}
.hr-more summary::-webkit-details-marker{display:none}
.hr-more summary::after{content:'';flex:0 0 auto;width:8px;height:8px;margin:0 6px 4px auto;border-right:2px solid var(--hub-forest-2);border-bottom:2px solid var(--hub-forest-2);transform:rotate(45deg);transition:transform .2s}
.hr-more[open] summary::after{margin-bottom:-4px;transform:rotate(-135deg)}
.hr-more summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:8px}
.hr-more-text{display:flex;flex-wrap:wrap;gap:2px 10px;min-width:0}
.hr-more-title{font:700 13px/1.3 'Inter',sans-serif;color:var(--hub-ink)}
.hr-more-value{font:500 13px/1.3 'Inter',sans-serif;color:var(--hub-muted)}
.hr-more-body{display:flex;flex-direction:column;gap:20px;padding:6px 0 4px}
/* Start keeps to the foot of the screen, clear of the phone tab bar, until
   the form's own end scrolls into view: on phones the button alone, on a
   band of the card's colour, after the summary; on desktop the summary and
   button as one row (below). Screens hide sideways overflow (base.css),
   which makes each a scroll box that would hold Start in place; clipping
   instead keeps the Herbs screen from being one. */
#s-herbs{overflow-x:hidden;overflow-x:clip}
.hr-launch{display:contents}
.hr-launch .hr-start{position:sticky;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:2;box-shadow:0 0 0 8px var(--hub-card)}

/* -- Quiz and results -- */
.hr-view{width:100%;max-width:1120px;margin:0 auto;padding:8px 0 110px;color:var(--hub-ink);font-family:'Inter',sans-serif}
.hr-view[hidden]{display:none}
.hr-shell{display:flex;flex-direction:column;gap:18px}
.hr-head{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.hr-quit{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px 8px 10px;border:1px solid var(--hub-line);border-radius:999px;background:var(--hub-card);color:var(--hub-forest-2);font:600 13px/1.2 'Inter',sans-serif;cursor:pointer}
.hr-eyebrow{margin:0;font:700 11px/1.4 'DM Mono',monospace;letter-spacing:.075em;text-transform:uppercase;color:var(--action-primary,#1f7a52)}
.hr-head h1{margin:0;font:400 34px/1.08 var(--hub-serif);letter-spacing:-.01em;color:var(--hub-ink);outline:none}

/* Setup */
.hr-setup{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:18px;border:1px solid var(--hub-line);border-radius:20px;background:var(--hub-card);box-shadow:var(--hub-shadow)}
.hr-setup-options{display:flex;flex-direction:column;gap:20px;min-width:0}
.hr-field{min-width:0;margin:0;padding:0;border:0}
.hr-field[disabled] .hr-chips{opacity:.55}
.hr-field legend,.hr-legend{margin:0 0 9px;padding:0;font:700 13px/1.3 'Inter',sans-serif;color:var(--hub-ink)}
.hr-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hr-preset{appearance:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;padding:9px 12px;border:1px solid var(--border-default,#d8d2c7);border-radius:14px;background:var(--surface-raised,#fff);color:var(--hub-ink);text-align:left;cursor:pointer}
.hr-preset strong{font:700 14px/1.25 'Inter',sans-serif}
.hr-preset span{font:500 12px/1.3 'Inter',sans-serif;color:var(--hub-muted)}
.hr-preset[aria-pressed="true"]{border-color:var(--hub-forest-2);box-shadow:inset 0 0 0 1px var(--hub-forest-2);background:#eef6ea}
.hr-chips{display:flex;flex-wrap:wrap;gap:8px}
.hr-chip{position:relative;display:inline-flex}
.hr-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.hr-chip span{display:inline-flex;align-items:center;gap:5px;min-height:42px;padding:8px 14px;border:1px solid var(--border-default,#d8d2c7);border-radius:999px;background:var(--surface-raised,#fff);font:600 13px/1.2 'Inter',sans-serif;color:var(--hub-ink);pointer-events:none}
.hr-chip small{font-weight:500;color:var(--hub-muted)}
.hr-chip input:checked+span{border-color:var(--hub-forest-2);background:var(--hub-forest-2);color:#fff}
.hr-chip input:checked+span small{color:#d9e5dd}
.hr-chip input:focus-visible+span{outline:2px solid var(--focus-ring);outline-offset:2px}
.hr-chip.is-disabled{opacity:.45}
.hr-chip.is-disabled input{cursor:not-allowed}
.hr-hint,.hr-panel-note{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--hub-muted)}
.hr-panel{margin-top:12px}
.hr-panel-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:10px}
.hr-search{flex:1 1 180px;min-width:0;min-height:44px;padding:9px 12px;border:1px solid var(--border-default,#d8d2c7);border-radius:12px;background:var(--surface-raised,#fff);font:16px/1.3 'Inter',sans-serif;color:var(--hub-ink)}
.hr-text-btn{appearance:none;min-height:44px;padding:8px 4px;border:0;background:transparent;color:var(--hub-forest-2);font:600 13px/1.2 'Inter',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hr-text-btn:disabled{opacity:.45;cursor:default}
.hr-checks{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.hr-check{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 12px;border:1px solid var(--hub-line);border-left:4px solid var(--cat,var(--hub-forest-2));border-radius:12px;background:var(--surface-raised,#fff);font:600 14px/1.3 'Inter',sans-serif;cursor:pointer}
.hr-check input,.hr-herb-row input{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:var(--hub-forest-2)}
.hr-check small{margin-left:4px;font-weight:500;color:var(--hub-muted)}
.hr-herb-list{max-height:380px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--hub-line);border-radius:14px;background:var(--surface-raised,#fff)}
.hr-herb-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 12px;border-bottom:1px solid var(--hub-line);cursor:pointer}
.hr-herb-row:last-child{border-bottom:0}
.hr-herb-thumb{flex:0 0 auto;width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(36,49,44,.18))}
.hr-herb-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;min-width:0;font-size:14px}
.hr-herb-name small{flex-basis:100%;font-size:12px;color:var(--hub-muted)}
.hr-summary{display:flex;flex-direction:column;gap:2px;padding-top:14px;border-top:1px solid var(--hub-line)}
.hr-summary p{margin:0}
.hr-summary-count{font-size:16px}
.hr-summary-count strong{font:400 26px/1 var(--hub-serif);color:var(--hub-forest-2)}
.hr-summary-cats{font-size:13px;color:var(--hub-muted)}
.hr-summary-note{font-size:13px;color:var(--accent-warm,#9a5b0a)}
.hr-start,.hr-next{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 22px;border:0;border-bottom:3px solid var(--hub-lime-edge);border-radius:14px;background:var(--hub-lime);color:var(--hub-lime-ink);font:700 15px/1.2 'Inter',sans-serif;cursor:pointer;transition:background .16s}
.hr-start:hover,.hr-next:hover{background:var(--hub-lime-hover)}
.hr-start:disabled{opacity:.45;cursor:not-allowed}
.hr-secondary{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 18px;border:1px solid var(--border-default,#d8d2c7);border-radius:14px;background:var(--surface-raised,#fff);color:var(--hub-forest-2);font:700 14px/1.2 'Inter',sans-serif;cursor:pointer}
.hr-secondary:hover{border-color:var(--hub-forest-2)}

/* Quiz */
.hr-quiz{gap:12px}
.hr-quiz-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hr-quit{padding-left:14px}
.hr-quiz-name{display:none;font:700 11px/1.4 'DM Mono',monospace;letter-spacing:.075em;text-transform:uppercase;color:var(--hub-muted)}
.hr-count{min-width:62px;padding:6px 12px;border-radius:999px;background:var(--hub-sage);color:var(--hub-forest);font:700 13px/1.3 'Inter',sans-serif;font-variant-numeric:tabular-nums;text-align:center}
.hr-track{height:4px;border-radius:999px;background:var(--progress-purple-track,#eee7f8);overflow:hidden}
.hr-track span{display:block;height:100%;border-radius:inherit;background:var(--progress-gradient);transition:width .3s ease}
.hr-question{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:6px}
.hr-kicker{margin:0;font:700 11px/1.4 'DM Mono',monospace;letter-spacing:.075em;text-transform:uppercase;color:var(--hub-muted);text-align:center}
.hr-prompt{margin:0 0 8px;font:400 26px/1.2 var(--hub-serif);color:var(--hub-ink);text-align:center;outline:none}
/* Pinyin is set in Inter: the display serif has no third-tone vowels (ǎ ǐ ǒ ǔ). */
.hr-prompt strong{font:700 .84em/1.2 'Inter',sans-serif;letter-spacing:-.01em;color:var(--hub-forest-2)}
.hr-prompt span[lang="zh"]{margin-left:4px;font-family:'Noto Serif SC','Songti SC',serif;color:var(--hub-forest-2)}
.hr-key{position:absolute;top:8px;left:8px;display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--hub-line);border-radius:50%;background:rgba(255,255,255,.92);font:700 11px/1 'Inter',sans-serif;color:var(--hub-muted)}

/* Name -> Image: a grid of specimens, square boxes so 1:1 and 3:2 sit alike. */
.hr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:1040px;margin:0 auto}
.hr-cell{position:relative;min-width:0}
.hr-pick{appearance:none;position:relative;display:block;width:100%;padding:8px;border:2px solid var(--hub-line);border-radius:18px;background:radial-gradient(closest-side,rgba(201,180,143,.24),rgba(201,180,143,.08) 70%,transparent),var(--hub-card);box-shadow:var(--hub-shadow);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.hr-pick:hover:not(:disabled){border-color:var(--border-strong,#9eaaa2)}
.hr-pick:disabled{cursor:default}
.hr-img-box{display:block;aspect-ratio:1/1}
.hr-img,.hr-stage-img{-webkit-touch-callout:none;user-select:none;-webkit-user-drag:none}
.hr-img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(36,49,44,.16))}
.hr-zoom-btn{appearance:none;position:absolute;top:8px;right:8px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--hub-line);border-radius:50%;background:rgba(255,255,255,.94);color:var(--hub-forest-2);cursor:zoom-in}
.hr-zoom-btn .ui-icon,.hr-stage-zoom .ui-icon{width:17px;height:17px}
.hr-cell-name{margin:6px 0 0;font-size:14px;line-height:1.3;text-align:center;overflow-wrap:anywhere}
.hr-cell-name[hidden]{display:none}
.hr-cell.is-answer .hr-pick{border-color:var(--state-success,#167a4d);box-shadow:0 0 0 3px rgba(22,122,77,.16);background:radial-gradient(closest-side,rgba(22,122,77,.1),transparent),var(--state-success-soft,#e0f3e9)}
.hr-cell.is-wrong .hr-pick{border-color:var(--state-error,#a93434);background:radial-gradient(closest-side,rgba(169,52,52,.08),transparent),var(--state-error-soft,#fce4e2)}
.hr-cell.is-other .hr-pick{opacity:.72}
.hr-cell.is-answer .hr-cell-name{color:var(--state-success,#167a4d)}
.hr-cell.is-wrong .hr-cell-name{color:var(--state-error,#a93434)}

/* Image -> Choice and typed recall: one large specimen. */
.hr-stage{display:flex;justify-content:center;margin:2px 0 10px}
.hr-stage-btn{appearance:none;position:relative;display:block;width:min(100%,460px);padding:6px;border:0;border-radius:22px;background:radial-gradient(closest-side,rgba(201,180,143,.3),rgba(201,180,143,.1) 66%,transparent);cursor:zoom-in}
.hr-stage-img{display:block;width:100%;height:auto;max-height:40vh;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(36,49,44,.18))}
.hr-stage-zoom{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--hub-line);border-radius:50%;background:rgba(255,255,255,.94);color:var(--hub-forest-2)}
.hr-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:680px;margin:0 auto}
.hr-option{appearance:none;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:62px;padding:10px 12px 10px 42px;border:1px solid var(--border-default,#d8d2c7);border-radius:14px;background:var(--surface-raised,#fff);color:var(--hub-ink);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.hr-option .hr-key{top:50%;left:10px;margin-top:-12px}
.hr-option:hover:not(:disabled){border-color:var(--hub-forest-2)}
.hr-option:disabled{cursor:default}
.hr-option-name{font:700 15px/1.25 'Inter',sans-serif;overflow-wrap:anywhere}
.hr-option-zh{font-size:13px;color:var(--hub-muted)}
.hr-option.correct{border-color:var(--state-success,#167a4d);background:var(--state-success-soft,#e0f3e9);color:var(--brand-forest-deep,#123d2a);animation:hrAnswerIn .2s ease-out}
.hr-option.wrong{border-color:var(--state-error,#a93434);background:var(--state-error-soft,#fce4e2);color:#783a32;box-shadow:0 0 0 3px rgba(169,52,52,.16)}
.hr-options .hr-option:disabled:not(.correct):not(.wrong){opacity:.6}
.hr-typed{display:flex;flex-direction:column;gap:8px;width:100%;max-width:540px;margin:0 auto}
.hr-typed-label{font:700 13px/1.3 'Inter',sans-serif}
.hr-typed-row{display:flex;gap:8px}
.hr-input{flex:1 1 auto;min-width:0;min-height:52px;padding:10px 14px;border:1px solid var(--border-strong,#9eaaa2);border-radius:14px;background:var(--surface-raised,#fff);font:500 18px/1.3 'Inter',sans-serif;color:var(--hub-ink)}
.hr-input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.hr-input.is-right{border-color:var(--state-success,#167a4d);background:var(--state-success-soft,#e0f3e9)}
.hr-input.is-wrong{border-color:var(--state-error,#a93434);background:var(--state-error-soft,#fce4e2)}
.hr-check-btn{appearance:none;min-height:52px;padding:10px 20px;border:0;border-radius:14px;background:var(--hub-forest-2);color:#fff;font:700 15px/1.2 'Inter',sans-serif;cursor:pointer}
.hr-check-btn:disabled{opacity:.45;cursor:default}
.hr-typed-help{margin:0;font-size:13px;color:var(--hub-muted)}
.hr-reveal{align-self:flex-start}

/* A miss, before its correction: the choice turns red where it stands, with
   a cross on its corner and a short shake, and the rest dims. Nothing turns
   green until the correction replaces it (is-corrected, below). */
.hr-miss-mark{position:absolute;z-index:1;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--state-error,#a93434);color:#fff;box-shadow:0 0 0 3px var(--hub-card,#fff)}
.hr-miss-mark .ui-icon{width:14px;height:14px;stroke-width:3}
.hr-option .hr-miss-mark{top:-9px;right:-9px}
.hr-pick .hr-miss-mark{top:10px;left:10px}
.hr-cell.is-wrong .hr-pick{box-shadow:0 0 0 3px rgba(169,52,52,.16)}
.hr-cell.is-wrong .hr-key{visibility:hidden}
.hr-quiz.is-missed .hr-cell:not(.is-wrong) .hr-pick{opacity:.6}
.hr-quiz.is-missed :is(.hr-option.wrong,.hr-cell.is-wrong .hr-pick,.hr-input.is-wrong){animation:hrMiss .38s ease-in-out}
@keyframes hrMiss{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* Feedback and next step */
.hr-feedback{width:100%;max-width:720px;margin:0 auto}
.hr-feedback:empty{display:none}
.hr-verdict{display:flex;gap:12px;padding:14px 16px;border:1px solid;border-radius:16px}
.hr-verdict p{margin:0}
.hr-verdict-body{flex:1 1 auto;min-width:0}
.hr-verdict.is-right{border-color:rgba(22,122,77,.35);background:var(--state-success-soft,#e0f3e9)}
.hr-verdict-mark{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--state-success,#167a4d);color:#fff}
.hr-verdict-mark .ui-icon{width:17px;height:17px;stroke-width:2.6}
.hr-verdict-title{font:700 11px/1.4 'DM Mono',monospace;letter-spacing:.075em;text-transform:uppercase;color:var(--hub-muted)}
.hr-verdict-herb{margin-top:2px!important;font:700 21px/1.25 'Inter',sans-serif;letter-spacing:-.01em;color:var(--hub-ink)}
/* The speaker beside a revealed name: inside the line's height, so the
   correction still fits one screen; marked while the name plays. */
.hr-say{appearance:none;display:inline-grid;place-items:center;width:30px;height:30px;margin:-4px 0 -4px 6px;padding:0;border:1px solid var(--hub-line);border-radius:50%;background:var(--surface-raised,#fff);color:var(--hub-forest-2);vertical-align:middle;cursor:pointer}
.hr-say .hv-speaker{width:16px;height:16px}
.hr-say:hover{border-color:var(--hub-forest-2)}
.hr-say:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.hr-verdict-herb span[lang="zh"]{margin-left:4px;font-weight:500;font-size:19px;color:var(--hub-forest-2)}
.hr-verdict-meta{margin-top:2px!important;font-size:13px;color:var(--hub-muted)}
.hr-verdict-note{margin-top:8px!important;font-size:14px;line-height:1.45}
/* A right answer unfolds to the herb's nature and a few key actions. */
.hr-facts-toggle{appearance:none;display:inline-flex;align-items:center;gap:9px;min-height:44px;margin:2px 0 -8px;padding:6px 0;border:0;background:transparent;color:var(--hub-forest-2);font:700 13px/1.2 'Inter',sans-serif;cursor:pointer}
.hr-facts-toggle::after{content:'';width:7px;height:7px;margin-bottom:3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.hr-facts-toggle[aria-expanded="true"]::after{margin-bottom:-3px;transform:rotate(-135deg)}
.hr-facts-toggle:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:6px}
.hr-facts{margin-top:10px;padding-top:10px;border-top:1px solid rgba(22,122,77,.22)}
.hr-facts[hidden]{display:none}
.hr-facts-label{font:700 11px/1.4 'DM Mono',monospace;letter-spacing:.075em;text-transform:uppercase;color:var(--hub-muted)}
.hr-facts-row{font-size:14px;line-height:1.45;color:var(--hub-ink)}
.hr-facts-row .hr-facts-label{margin-right:6px}
.hr-facts-row+.hr-facts-label{margin-top:8px!important}
.hr-facts-actions{margin:3px 0 0;padding-left:18px;font-size:14px;line-height:1.45;color:var(--hub-ink)}
.hr-facts-actions li+li{margin-top:3px}
.hr-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;max-width:720px;margin:0 auto;scroll-margin-bottom:96px}
.hr-actions[hidden]{display:none}
.hr-actions .hr-next{flex:1 1 200px}
.hr-actions .hr-secondary{flex:0 1 auto}

/* A wrong answer, corrected once: only the correct herb's picture stays,
   ringed in green and as large as one screen allows, under a small
   Correct answer label; the wrong choice is a quiet line of text. Question,
   options and typing field step aside, so question, answer, correction and
   Next fit a phone screen without scrolling. --hr-correct-size reserves
   room for the app bars, this label, the text below and Next. */
.hr-quiz{--hr-correct-size:min(100%,420px,calc(100vh - 400px))}
@supports(height:100dvh){.hr-quiz{--hr-correct-size:min(100%,420px,calc(100dvh - 400px))}}
/* A name that wraps beside its speaker (hrRenderFeedback) takes a line more. */
.hr-quiz.hr-name-wraps{--hr-correct-size:min(100%,420px,calc(100vh - 436px))}
@supports(height:100dvh){.hr-quiz.hr-name-wraps{--hr-correct-size:min(100%,420px,calc(100dvh - 436px))}}
.hr-correct-label{display:none;align-self:center;align-items:center;gap:6px;margin:0;font:700 11px/1.4 'DM Mono',monospace;letter-spacing:.075em;text-transform:uppercase;color:var(--state-success,#167a4d)}
.hr-correct-label .ui-icon{width:15px;height:15px;stroke-width:2.6}
.hr-quiz.is-corrected{gap:8px}
.hr-quiz.is-corrected .hr-correct-label{display:inline-flex}
.hr-quiz.is-corrected :is(.hr-kicker,.hr-prompt,.hr-options,.hr-typed,.hr-cell-name,.hr-cell:not(.is-answer)){display:none}
.hr-quiz.is-corrected .hr-question{gap:8px}
.hr-quiz.is-corrected .hr-grid{grid-template-columns:minmax(0,1fr);width:max(160px,var(--hr-correct-size))}
.hr-quiz.is-corrected .hr-stage{margin:0}
.hr-quiz.is-corrected .hr-stage-btn{width:max(160px,var(--hr-correct-size));padding:8px;border:2px solid var(--state-success,#167a4d);border-radius:18px;background:radial-gradient(closest-side,rgba(22,122,77,.1),transparent),var(--state-success-soft,#e0f3e9);box-shadow:0 0 0 3px rgba(22,122,77,.16)}
.hr-quiz.is-corrected .hr-stage-img{max-height:none}
.hr-correction{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center}
.hr-correction p{margin:0;overflow-wrap:anywhere}
.hr-correction-name{font:700 21px/1.25 'Inter',sans-serif;letter-spacing:-.01em;color:var(--hub-ink)}
.hr-correction-name strong{font-weight:700}
.hr-correction-name span[lang="zh"]{margin-left:6px;font-weight:500;color:var(--hub-forest-2)}
.hr-correction-latin{font:italic 14px/1.35 'Inter',sans-serif;color:var(--hub-muted)}
.hr-correction-cat{font:600 12px/1.35 'Inter',sans-serif;color:var(--hub-forest-2)}
.hr-correction-chose{margin-top:6px!important;font-size:13px;line-height:1.35;color:var(--hub-muted)}

/* Results */
.hr-results-head{align-items:center;text-align:center}
.hr-score{margin:4px 0 0!important;font:400 64px/1 var(--hub-serif)!important;color:var(--hub-ink)}
.hr-score-total{font-size:34px;color:var(--hub-muted)}
.hr-percent{margin:4px 0 0;font:700 20px/1.2 'Inter',sans-serif;color:var(--hub-forest-2)}
.hr-results-copy{max-width:520px;margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--hub-muted)}
.hr-review{width:100%;max-width:720px;margin:0 auto}
.hr-review h2{margin:0 0 10px;font:700 17px/1.3 'Inter',sans-serif}
.hr-review-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.hr-review-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--hub-line);border-radius:16px;background:var(--hub-card);box-shadow:var(--hub-shadow)}
.hr-review-thumb{flex:0 0 auto;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(36,49,44,.18))}
.hr-review-copy{flex:1 1 auto;min-width:0}
.hr-review-copy p{margin:0;font-size:16px}
.hr-review-copy small{font-size:12px;color:var(--hub-muted)}
.hr-review-item .hr-text-btn{flex:0 0 auto;white-space:nowrap}
.hr-results-actions{display:flex;flex-wrap:wrap;gap:10px;width:100%;max-width:720px;margin:0 auto}
.hr-results-actions>*{flex:1 1 140px}
.hr-results-actions>.hr-next{flex:1 1 250px}

/* Herb monograph: one line once a herb has been quizzed. */
.hr-herb-stats{margin:4px 0 12px;font-size:13px;color:var(--text-secondary)}
.hr-herb-stats strong{font-size:15px;color:var(--hub-forest-2)}
.hr-herb-stats-label{font-weight:600;color:var(--text-primary)}

/* Opened from the quiz (View herb), the monograph is a window over it
   (mmShowDetail adds is-over-quiz). On desktop that is the usual drawer
   beside the dimmed quiz; on phones and tablets, where the drawer would
   fill the screen like a page, it becomes a sheet with the quiz showing
   above it, so it reads as a window and not the library. */
.mm-detail-backdrop.is-over-quiz .mm-detail-back{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.mm-detail-backdrop.is-over-quiz .mm-detail-back::before{content:'';width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
@media(max-width:900px){
  .mm-detail-backdrop.is-over-quiz{align-items:flex-end}
  .mm-detail-backdrop.is-over-quiz .mm-detail{height:calc(100% - 28px);border-left:0;border-radius:18px 18px 0 0;box-shadow:0 -14px 40px rgba(20,28,22,.22)}
}

/* Headings take focus only so screen readers start there; no ring is drawn. */
.hr-view :is(h1,h2)[tabindex="-1"]:focus{outline:none}

/* Hover-less screens get no keyboard number hints. */
@media(hover:none){.hr-key{display:none}.hr-option{padding-left:14px}}
@keyframes hrAnswerIn{from{transform:scale(.98)}to{transform:scale(1)}}

/* The narrowest phones give the three figures the card's full width. */
@media(max-width:359px){
  .hr-overview{grid-template-columns:minmax(0,1fr)}
  .hr-overview-art{display:none}
}
@media(min-width:600px){
  .hr-overview{grid-template-columns:112px minmax(0,1fr);padding:16px 22px}
  .hr-overview-art{height:84px}
  .hr-stats{max-width:420px}
  .hr-presets{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hr-checks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hr-grid{gap:14px}
}
@media(min-width:901px){
  .hr-view{padding:4px 0 56px}
  .hr-head h1{font-size:42px}
  .hr-setup{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px 32px;padding:24px 28px}
  .hr-setup>.hr-herbs{grid-column:2;grid-row:2}
  .hr-setup>.hr-launch{grid-column:1/-1;position:sticky;bottom:0;z-index:2;display:flex;align-items:center;gap:24px;margin:0 -28px -24px;padding:16px 28px 24px;border-top:1px solid var(--hub-line);border-radius:0 0 20px 20px;background:var(--hub-card)}
  .hr-launch .hr-summary{flex:1 1 auto;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:0;border:0}
  .hr-launch .hr-start{position:static;flex:0 0 auto;min-width:260px;box-shadow:none}
  .hr-quiz-name{display:block}
  .hr-prompt{font-size:32px}
  .hr-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hr-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hr-grid-2{max-width:780px}
  .hr-stage-img{max-height:min(46vh,460px)}
  .hr-quiz{--hr-correct-size:min(100%,460px,calc(100vh - 380px))}
  .hr-quiz.hr-name-wraps{--hr-correct-size:min(100%,460px,calc(100vh - 416px))}
}
@media(prefers-reduced-motion:reduce){
  .hr-track span,.hr-pick,.hr-option,.hr-start,.hr-next,.hr-more summary::after,.hr-facts-toggle::after{transition:none}
  .hr-option.correct,.hr-quiz.is-missed :is(.hr-option.wrong,.hr-cell.is-wrong .hr-pick,.hr-input.is-wrong){animation:none}
}

/* Unified learning loop, phase A: a focused quiz. The bottom navigation
   steps aside while a Recognition quiz or its results are open, which also
   keeps it clear of the keyboard when typing a name. */
body.study-focus .mob-nav{display:none}
body.study-focus .hr-view{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.hr-quiz-tools{display:inline-flex;align-items:center;gap:6px}
.hr-quiz-tools .quiz-sound-toggle{margin-left:0}
/* An owner-reviewed look-alike cue after a mix-up (HR_CONFUSION_GROUPS). */
.hr-correction-cue{margin-top:8px!important;padding-top:8px;border-top:1px solid var(--hub-line);font-size:13.5px;line-height:1.45;color:var(--hub-ink)}

/* Phase D: on a large desktop screen the specimens use the room they have;
   a correction still shrinks the picture to fit (--hr-correct-size). */
@media(min-width:1200px) and (min-height:760px){
  .hr-grid{max-width:1120px;gap:16px}
  .hr-grid-2{max-width:860px}
  .hr-grid-3{max-width:1000px}
  .hr-stage-img{max-height:min(54vh,540px)}
  .hr-options{max-width:760px}
  .hr-option-name{font-size:16px}
  .hr-prompt{font-size:34px}
}

/* Typing a name on a phone (hrKeyboardSync): room below the quiz for the
   keyboard, so the name field can be scrolled above it, and a smaller
   picture so the picture and the field fit together. */
.hr-quiz.is-typing{padding-bottom:var(--hr-keyboard,0px)}
.hr-quiz.is-typing .hr-stage{margin:0}
.hr-quiz.is-typing .hr-stage-img{max-height:min(30vh,220px)}