/* ── TODAY'S STUDY ─────────────────────────────────────────────────────
   Home's Today card and the session behind it (assets/js/herb-study.js,
   home-hub.js). Built on the hub tokens (home-hub.css) and Herb Recognition's
   components (herb-recognition.css): the same image pools, options and
   correction marks, so studying feels like one place. Lime starts and moves
   on; violet marks progress and levels. Loaded after herb-mastery.css. */

/* -- Home: Today leads, the two paths follow, smaller -- */
.hub-hero .hub-continue{margin-top:16px;color:var(--hub-ink);text-align:left;box-shadow:0 14px 34px rgba(0,0,0,.28)}
.hub-hero .hub-continue>.hub-card-title{margin-bottom:10px;font-size:13px;letter-spacing:.02em;text-transform:none;color:var(--hub-muted)}
.hub-today{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 14px}
.hub-today.is-holding{grid-template-columns:minmax(0,1fr)}
.hub-today-art{display:flex;align-items:center}
.hub-today-herb{display:flex;margin-left:-14px}
.hub-today-herb:first-child{margin-left:0}
.hub-today-herb .hm{filter:drop-shadow(0 3px 6px rgba(32,62,52,.18))}
.hub-today-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.hub-today-headline{font:700 18px/1.25 'Inter',sans-serif;color:var(--hub-ink)}
.hub-today-names{color:var(--hub-ink);font-weight:550}
.hub-today-go{grid-column:1/-1;width:100%;min-height:52px;font-size:16px}
.hub-today-alt{margin-top:8px;white-space:normal;text-align:left;line-height:1.35}
.hub-today-case{margin-top:12px;padding-top:12px;border-top:1px solid var(--hub-line)}
.hub-today-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.hub-today-chip{appearance:none;min-height:44px;padding:9px 14px;border:1.5px solid #c9d5cc;border-radius:999px;background:#fff;color:var(--hub-forest);font:650 14px/1.2 'Inter',sans-serif;cursor:pointer}
.hub-today-chip:hover{border-color:var(--hub-forest-2);background:var(--hub-sage)}
.hub-today-chip:focus-visible{outline:3px solid var(--focus-ring,#0b6fc2);outline-offset:2px}
.hub-paths .hub-path{min-height:120px;aspect-ratio:1.45}
.hub-paths .hub-path-title{font-size:clamp(20px,5.6vw,26px)}
@media(max-width:380px){.hub-paths .hub-path{min-height:112px;aspect-ratio:1.3}}
@media(min-width:600px) and (max-width:900px){.hub-paths .hub-path{aspect-ratio:2}}
@media(min-width:901px){
  .hub-hero .hub-continue{margin-top:26px;padding:20px 22px}
  .hub-today{grid-template-columns:auto minmax(0,1fr) auto;gap:18px}
  .hub-today.is-holding{grid-template-columns:minmax(0,1fr) auto}
  .hub-today-go{grid-column:auto;width:auto;min-width:200px}
  .hub-today-headline{font-size:20px}
  .hub-paths{margin-top:22px}
  .hub-paths .hub-path{min-height:150px;aspect-ratio:2.6;padding:20px 24px}
  .hub-paths .hub-path-title{font-size:30px}
}

/* -- The session -- */
#s-today{padding-top:0}
.ht-view{width:100%;max-width:880px;margin:0 auto;color:var(--hub-ink);font-family:'Inter',sans-serif}
.ht-shell{display:flex;flex-direction:column;gap:14px;padding:12px 0 calc(28px + env(safe-area-inset-bottom))}
.ht-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ht-title{display:none;font:700 11px/1.4 'DM Mono',monospace;letter-spacing:.075em;text-transform:uppercase;color:var(--hub-muted)}
.ht-tools{display:inline-flex;align-items:center;gap:6px}
.ht-count{min-width:54px;padding:6px 12px;border-radius:999px;background:var(--hub-sage);color:var(--hub-forest);font:700 14px/1.2 'Inter',sans-serif;text-align:center;font-variant-numeric:tabular-nums}
.ht-count:empty{display:none}
.ht-question{display:flex;flex-direction:column;gap:12px}
.ht-kicker{margin:0;text-align:center}
.ht-prompt{margin:0;text-align:center;outline:none}
.ht-prop-prompt{display:flex;align-items:center;justify-content:center;gap:12px;font:600 19px/1.45 'Inter',sans-serif;text-align:left}
.ht-prop-herb{flex:none;display:flex;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle,#fff 40%,#f2ebdf 100%)}
.ht-prop-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(36,49,44,.16))}
.ht-options{grid-template-columns:minmax(0,1fr)}
.ht-options.is-tf{grid-template-columns:repeat(2,minmax(0,1fr))}
.ht-option .hr-option-name{white-space:normal;text-align:left;line-height:1.4}
.ht-option[aria-pressed="true"]:not(.correct):not(.wrong){border-color:var(--hub-forest-2);box-shadow:inset 0 0 0 1px var(--hub-forest-2);background:var(--hub-sage)}
.ht-option.missed{border-style:dashed;border-color:var(--state-success,#167a4d)}
.ht-check{align-self:stretch}
.ht-check[hidden]{display:none}
.ht-check:disabled{opacity:.45;cursor:default}
.ht-stage{cursor:default}
/* Feedback: the verdict, the right answer beside the choice, then Next. */
.ht-feedback:empty{display:none}
.ht-verdict{padding:12px 14px;border-radius:16px;font-size:14.5px;line-height:1.5}
.ht-verdict p{margin:0}
.ht-verdict.is-right{background:#e6f5eb;color:#1d4d33}
.ht-verdict.is-wrong{background:#fff0ec;color:#6f342d}
.ht-reinforce{margin-top:6px!important;color:var(--hub-ink)}
.ht-cue{margin-top:8px!important;padding-top:8px;border-top:1px solid rgba(111,52,45,.15);color:var(--hub-ink)}
.ht-correction-name{margin-top:6px!important;font-size:17px}
.ht-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 2px}
.ht-compare-item{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;padding:10px 8px;border:2px solid transparent;border-radius:14px;background:#fffcf5;text-align:center}
.ht-compare-item.is-answer{border-color:var(--state-success,#167a4d)}
.ht-compare-item.is-chosen{border-color:#e2b7ae}
.ht-compare-img{width:100%;max-width:150px;height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(36,49,44,.16))}
.ht-compare-item figcaption{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--hub-ink)}
.ht-compare-item figcaption span{font:700 11px/1.3 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--hub-muted)}
.ht-actions{display:flex;justify-content:flex-end}
.ht-actions[hidden]{display:none}
.ht-actions .hr-next{min-width:200px}
/* A new herb, met before it is asked. */
.ht-meet-stage .hr-stage-img{max-height:min(26vh,260px)}
.ht-meet{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid var(--hub-line);border-radius:18px;background:var(--hub-card)}
.ht-meet-names{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;font-size:14px;color:var(--hub-muted)}
.ht-meet-cat{flex-basis:100%;font:600 12.5px/1.3 'Inter',sans-serif;color:var(--hub-forest-2)}
.ht-meet-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.ht-meet-facts div{min-width:0}
.ht-meet-facts dt{font:700 11px/1.3 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--hub-muted)}
.ht-meet-facts dd{margin:2px 0 0;font:600 15px/1.35 'Inter',sans-serif;color:var(--hub-ink)}
.ht-meet-label{margin:0;font:700 11px/1.3 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--hub-muted)}
.ht-meet-actions{margin:0;padding-left:18px;font-size:15px;line-height:1.5}
.ht-meet-go{display:flex;justify-content:flex-end}
.ht-meet-go .hr-next{min-width:200px}
/* -- The summary -- */
.ht-summary{text-align:center}
.ht-summary-title{margin:2px 0 0;font:400 clamp(28px,7vw,38px)/1.12 var(--hub-serif);color:var(--hub-forest);outline:none}
.ht-summary-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.ht-summary-stats li{display:flex;flex-direction:column;gap:2px;padding:12px 6px;border:1px solid var(--hub-line);border-radius:16px;background:var(--hub-card)}
.ht-summary-stats strong{font:400 28px/1 var(--hub-serif);color:var(--hub-violet);font-variant-numeric:tabular-nums}
.ht-summary-stats span{font:600 12px/1.3 'Inter',sans-serif;color:var(--hub-muted)}
.ht-summary-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;text-align:left}
.ht-summary-row{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--hub-line);border-radius:16px;background:var(--hub-card)}
.ht-summary-row.is-up{border-color:rgba(99,50,196,.35);background:linear-gradient(120deg,var(--hub-card) 55%,#f1ecfb)}
.ht-summary-art{display:flex;justify-content:center}
.ht-summary-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.ht-summary-copy strong{font:650 16px/1.3 'Inter',sans-serif}
.ht-summary-copy span{font-size:14px;line-height:1.4;color:var(--hub-muted)}
.ht-summary-row.is-up .ht-summary-copy span{color:var(--hub-violet);font-weight:600}
.ht-summary-next{margin:0;font:600 15px/1.45 'Inter',sans-serif;color:var(--hub-forest)}
.ht-summary-note{margin:0;font-size:13.5px;line-height:1.45;color:var(--hub-muted)}
.ht-reminder-offer{padding:14px 16px;border:1px solid var(--hub-line);border-radius:14px;background:var(--hub-card)}
.ht-reminder-offer[hidden]{display:none}
.ht-reminder-copy{margin:0;font-size:14px;line-height:1.5;color:var(--hub-ink)}
.ht-reminder-copy strong{display:block;margin-bottom:2px}
.ht-reminder-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.ht-reminder-actions .hr-secondary{min-height:44px}
.ht-reminder-later{min-height:44px;padding:0 12px;border:0;background:none;color:var(--hub-muted);font:600 14px 'Inter',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ht-summary-actions{display:flex;flex-direction:column;gap:10px}
.ht-summary-actions>*{flex:none;min-height:52px}
@media(min-width:601px){
  .ht-title{display:block}
  .ht-summary-actions{flex-direction:row;justify-content:center}
  .ht-summary-actions button{min-width:200px}
}
@media(min-width:901px){
  .ht-shell{padding-top:28px}
  .ht-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ht-compare-img{max-width:190px}
}
@media(prefers-reduced-motion:reduce){.hub-today-herb .hm *{animation:none!important}}

/* -- Phase C: questions answered with a herb, and by ear -- */
.ht-rev-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 14px;margin:0;padding:12px 14px;border:1px solid var(--hub-line);border-radius:16px;background:var(--hub-card)}
.ht-rev-facts div{min-width:0}
.ht-rev-facts dt{font:700 11px/1.3 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--hub-muted)}
.ht-rev-facts dd{margin:2px 0 0;font:600 16px/1.4 'Inter',sans-serif;color:var(--hub-ink)}
.ht-rev-options{grid-template-columns:minmax(0,1fr)}
.ht-rev-compare{display:flex;flex-direction:column;gap:8px;margin:10px 0 0}
.ht-rev-row{padding:10px 12px;border:2px solid transparent;border-radius:14px;background:#fffcf5}
.ht-rev-row.is-answer{border-color:var(--state-success,#167a4d)}
.ht-rev-row.is-chosen{border-color:#e2b7ae}
.ht-rev-row dt{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:15px;color:var(--hub-ink)}
.ht-rev-row dt>span{flex-basis:100%;font:700 11px/1.3 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--hub-muted)}
.ht-rev-row dd{margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--hub-ink)}
.ht-listen{display:flex;justify-content:center}
.ht-listen-btn{appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 22px;border:1px solid var(--hub-forest-2);border-radius:999px;background:var(--hub-sage);color:var(--hub-forest);font:700 15px/1.2 'Inter',sans-serif;cursor:pointer}
.ht-listen-btn .hv-speaker{width:22px;height:22px}
.ht-listen-btn:focus-visible{outline:3px solid var(--focus-ring,#0b6fc2);outline-offset:3px}
@media(min-width:901px){.ht-rev-options{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* A miss on a herb, then its correction (htMarkMiss, htShowCorrection): the
   Recognition styles do the work (.hr-quiz.is-missed / .is-corrected); a
   question answered with a herb keeps its question and facts in view. */
.ht-shell.is-corrected .hr-type-rev .hr-prompt{display:block}
.ht-correction{padding:4px 0 0}
.ht-rev-answer-facts{margin:4px 0 0!important;font-size:14.5px;line-height:1.45;color:var(--hub-ink)}
.ht-rev-correction .hr-correction-chose{max-width:520px}
/* The summary's buttons stack on a phone; the Recognition results rule
   (flex-basis 250px) would otherwise make the first one 250px tall. */
.ht-summary .ht-summary-actions>.hr-next,.ht-summary .ht-summary-actions>.hr-secondary{flex:0 0 auto;min-height:50px}
@media(min-width:601px){.ht-summary .ht-summary-actions>.hr-next,.ht-summary .ht-summary-actions>.hr-secondary{flex:0 1 auto;min-width:200px}}

/* -- Recall first (from Sapphire): bring the actions to mind, show them,
   then say how much was remembered. -- */
.ht-recall{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%;max-width:680px;margin:0 auto}
.ht-recall-hint{margin:0;font-size:14px;line-height:1.5;color:var(--hub-muted);text-align:center}
.ht-recall-show{align-self:center;min-width:220px;min-height:50px}
.ht-recall-list{margin:0;padding:12px 14px 12px 32px;border:1px solid var(--hub-line);border-radius:16px;background:var(--hub-card);font-size:15px;line-height:1.5;color:var(--hub-ink)}
.ht-recall-list li+li{margin-top:4px}
.ht-recall-ask{margin:0;font:700 11px/1.3 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--hub-muted)}
.ht-recall-grades{grid-template-columns:repeat(3,minmax(0,1fr))}
.ht-recall-grades .hr-option{min-height:54px}
.ht-grade.is-chosen.grade-good{border-color:var(--state-success,#167a4d);background:var(--state-success-soft,#e0f3e9);color:var(--brand-forest-deep,#123d2a)}
.ht-grade.is-chosen.grade-hard{border-color:#c9a24a;background:#fbf1d9;color:#6b4e12}
.ht-grade.is-chosen.grade-again{border-color:var(--state-error,#a93434);background:var(--state-error-soft,#fce4e2);color:#783a32}
@media(max-width:420px){.ht-recall-grades{grid-template-columns:minmax(0,1fr)}}

/* -- Recall before recognition (owner request, 2026-10-18) -- */
/* Every flavour or channel as a compact chip without number keys. */
.ht-options.is-set{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ht-options.is-set .hr-option{min-height:44px;padding:6px;align-items:center}
.ht-options.is-set .hr-option-name{font-size:14px;line-height:1.2;text-align:center}
/* Nature: one scale, hot to cold. */
.ht-options.is-scale{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.ht-options.is-scale .hr-option{min-height:56px;padding:8px 2px;align-items:center;border-top-width:4px}
.ht-options.is-scale .hr-key{display:none}
.ht-options.is-scale .hr-option-name{font-size:14px;text-align:center}
.ht-options.is-scale .hr-option:nth-child(1){border-top-color:#c0460a}
.ht-options.is-scale .hr-option:nth-child(2){border-top-color:#b8700a}
.ht-options.is-scale .hr-option:nth-child(3){border-top-color:#5f5e5a}
.ht-options.is-scale .hr-option:nth-child(4){border-top-color:#1a6b9a}
.ht-options.is-scale .hr-option:nth-child(5){border-top-color:#1b5e20}
.hr-options .ht-option.optional,.hr-options .ht-option.optional:disabled:not(.correct):not(.wrong){border-color:#c9a24a;background:#fbf1d9;color:#6b4e12;opacity:1}
/* Why: the reason under an answer (hqWhy). */
.ht-why{margin-top:8px!important;padding-top:8px;border-top:1px solid rgba(29,77,51,.15);font-size:13.5px;color:var(--hub-ink)}
.ht-verdict.is-wrong .ht-why{border-top-color:rgba(111,52,45,.15)}
@media(min-width:901px){.ht-options.is-set{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Meet card: each property read against the category. Quiet when it fits
   the group or shows in the herb's actions; highlighted when it is its own. */
.ht-meet-pattern{margin:0;font-size:13.5px;line-height:1.45;color:var(--hub-muted)}
.ht-meet-facts dd{display:flex;flex-wrap:wrap;gap:4px 6px}
.ht-fact{display:inline-block;padding:1px 7px;border-radius:7px;font:500 14px/1.4 'Inter',sans-serif}
.ht-fact.is-fit{color:var(--hub-muted);box-shadow:inset 0 0 0 1px var(--hub-line)}
.ht-fact.is-own{background:#fbf1d9;color:#6b4e12;font-weight:650;box-shadow:inset 0 0 0 1px #e3c77f}
.ht-meet-legend{margin:0;font-size:12.5px;line-height:1.5;color:var(--hub-muted)}
.ht-meet-legend strong{color:#6b4e12;font-weight:650}
/* A new group: the category's pattern before its first herb. */
.ht-group-pattern{margin:0;font:400 19px/1.45 var(--hub-serif);color:var(--hub-forest)}
.ht-group-table{width:100%;border-collapse:collapse;font-size:15px}
.ht-group-table th{width:6.5em;padding:5px 10px 5px 0;font:700 11px/1.3 'DM Mono',monospace;letter-spacing:.06em;text-align:left;text-transform:uppercase;color:var(--hub-muted);vertical-align:baseline}
.ht-group-table td{padding:5px 0;font-weight:600;color:var(--hub-ink)}
.ht-group-table td.ht-group-share{padding-left:10px;text-align:right;font-size:13px;font-weight:400;color:var(--hub-muted)}
.ht-group-tip{margin:0;font-size:13.5px;line-height:1.45;color:var(--hub-muted)}