/* --- site.css --- */

:root {
  --sm-brand-deep: #0f3d2e;
  --sm-brand-mid: #1b6048;
  --sm-brand-accent: #2b7b5d;
  --sm-brand-teal: #03ccbd;
  --sm-brand-cyan: #22d3ee;
  --sm-brand-deep-rgb: 15 61 46;
  --sm-brand-mid-rgb: 27 96 72;
  --sm-brand-accent-rgb: 43 123 93;
  --sm-brand-teal-rgb: 3 204 189;
  --sm-brand-cyan-rgb: 34 211 238;
  --sm-page: #f7f3eb;
  --sm-surface: #fffcf6;
  --sm-section: #efe8da;
  --sm-page-rgb: 247 243 235;
  --sm-surface-rgb: 255 252 246;
  --sm-section-rgb: 239 232 218;
  --sm-safe-area-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sm-safe-area-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --sm-safe-area-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --sm-safe-area-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
}

.bg-white {
  background-color: rgb(var(--sm-surface-rgb) / var(--tw-bg-opacity, 1));
}

.bg-slate-50 {
background-color:rgb(var(--sm-surface-rgb) / var(--tw-bg-opacity, 1));
}

.bg-white\/80 {
background-color:rgb(var(--sm-surface-rgb) / 0.8);
}

.bg-white\/90 {
background-color:rgb(var(--sm-surface-rgb) / 0.9);
}

.bg-white\/95 {
background-color:rgb(var(--sm-surface-rgb) / 0.95);
}

.hover\:bg-white:hover {
background-color:rgb(var(--sm-surface-rgb) / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-white {
background-color:rgb(var(--sm-surface-rgb) / var(--tw-bg-opacity, 1));
}

/* 16.5px base (owner 2026-10-04): all rem sizes scale */
html { font-size: 103.125%; }

html,
body {
min-height:100%;
}

body {
min-height:100dvh;
background:var(--sm-page);
}

html[data-app-standalone] body {
padding-top:var(--sm-safe-area-top);
padding-right:var(--sm-safe-area-right);
padding-bottom:var(--sm-safe-area-bottom);
padding-left:var(--sm-safe-area-left);
background:var(--sm-page);
}

.sm-safe-area-pad-top {
padding-top:var(--sm-safe-area-top);
}

.sm-safe-area-pad-bottom {
padding-bottom:var(--sm-safe-area-bottom);
}

.sm-safe-area-pad-x {
padding-left:var(--sm-safe-area-left);
padding-right:var(--sm-safe-area-right);
}

.smp-layout-content > :first-child {
  padding-top: 0;
}

/* 1) Base card on all viewports */
.page-content {
margin:2rem auto;
padding:2rem;
max-width:900px;
background:var(--sm-surface);
border:1px solid #e0e0e0;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.sm-surface-top-accent {
  position: relative;
  /* Clip the 3px accent to the card's rounded corners (do not bleed past the box). */
  overflow: hidden;
  border-radius: inherit;
}

/* Marked answer rows also carry cohort share; compact to protect global CSS budget. */
.sm-answer-result{position:relative;overflow:hidden;isolation:isolate;border:1px solid #e5e7eb;border-left-width:3px;border-radius:.5rem;background:#fff}
.sm-answer-result--correct{border-color:#86efac;border-left-color:#16a34a}
.sm-answer-result--incorrect{border-color:#fecaca;border-left-color:#dc2626}
.sm-answer-result__fill{position:absolute;z-index:-1;inset:0 auto 0 0;width:var(--answer-share,0%);background:#dbe4ee;transform-origin:left;animation:sm-answer-share-reveal 420ms cubic-bezier(.22,1,.36,1) both}
.sm-answer-fill-correct{background:#bbf7d0}.sm-answer-fill-incorrect{background:#fecaca}
.sm-answer-result__content{display:grid;align-items:center;min-height:3rem;grid-template-columns:1.5rem minmax(0,1fr) auto 1.125rem;gap:.65rem;padding:.55rem .75rem}
.sm-answer-result__letter{display:inline-flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;border-radius:9999px;background:#e5e7eb;color:#374151;font-size:.75rem;font-weight:700}
.sm-answer-letter-correct{background:#15803d;color:#fff}.sm-answer-letter-incorrect{background:#dc2626;color:#fff}.sm-answer-result__copy{min-width:0}
.sm-answer-result__text{display:block;color:#111827;font-size:.9375rem;line-height:1.4}.sm-answer-result--correct .sm-answer-result__text{color:#166534;font-weight:600}.sm-answer-result--incorrect .sm-answer-result__text{color:#991b1b}
.sm-answer-result__picked{display:block;margin-top:.125rem;color:#6b7280;font-size:.6875rem;font-weight:600;letter-spacing:.01em}
.sm-answer-result__percentage{min-width:2.75rem;color:#111827;font-size:.9375rem;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;animation:sm-answer-percent-reveal 260ms ease-out 140ms both}
.sm-answer-result__mark{font-size:1rem;font-weight:800;text-align:center}.sm-answer-result__mark--correct{color:#15803d}.sm-answer-result__mark--incorrect{color:#b91c1c}
@keyframes sm-answer-share-reveal{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes sm-answer-percent-reveal{from{opacity:0;transform:translateX(-.2rem)}to{opacity:1;transform:translateX(0)}}
@media(max-width:639px){.sm-answer-result__content{grid-template-columns:1.5rem minmax(0,1fr) auto 1rem;gap:.5rem;padding:.55rem .625rem}.sm-answer-result__percentage{min-width:2.5rem;font-size:.875rem}}
@media(prefers-reduced-motion:reduce){.sm-answer-result__fill,.sm-answer-result__percentage{animation:none}}
.sm-status-topic{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}@media(max-width:767px){.sm-status-topic-wrap:not([hidden]){display:block}.sm-status-topic-wrap>[aria-hidden]{display:none}}
.sm-status-center{max-width:calc(100% - 15rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sm-status-center .sm-status-topic{display:inline}
.sm-answer-result--plain .sm-answer-result__content{grid-template-columns:1.5rem minmax(0,1fr) 1.125rem}[data-pick][hidden]{display:none}
.sm-verdict{margin-top:1rem;padding:.75rem 1rem;border:1px solid #e5e7eb;border-left:4px solid #9ca3af;border-radius:.75rem;background:#f9fafb;color:#1f2937;font-size:.9375rem;line-height:1.5}.sm-verdict:focus{outline:0}.sm-verdict--kbd:focus{outline:2px solid #b91c1c;outline-offset:2px}.sm-verdict--correct:focus{outline-color:#15803d}
.sm-verdict--correct{border-color:#bbf7d0;border-left-color:#16a34a;background:#f0fdf4}.sm-verdict--incorrect{border-color:#fecaca;border-left-color:#dc2626;background:#fef2f2}
.sm-verdict__title{margin:0;font-size:1.125rem;font-weight:700;color:#374151}.sm-verdict--correct .sm-verdict__title{color:#166534}.sm-verdict--incorrect .sm-verdict__title{color:#b91c1c}.sm-verdict__answer{margin:.125rem 0 0}
.sm-fb-card{margin-top:1rem;padding:1rem 1.25rem;border:1px solid #e5e7eb;border-radius:.75rem;background:#fff}.sm-fb-card .prose-sm{font-size:.9375rem;line-height:1.6}
.sm-fb-card__title{margin:0 0 .5rem;font-size:1.0625rem;font-weight:700;color:#111827}.sm-fb-card__sub{margin:2.25rem 0 .375rem;font-size:.9375rem;font-weight:700;color:rgb(var(--sm-brand-deep-rgb))}.sm-fb-card__title+.sm-fb-card__sub{margin-top:0}
.sm-fb-whynots{margin:0;padding:0;list-style:none}.sm-fb-whynots li{padding:.5rem 0;border-top:1px solid #f3f4f6;color:#374151;font-size:.9375rem;line-height:1.55}.sm-fb-whynots li:first-child{padding-top:0;border-top:0}.sm-fb-whynots strong{color:#111827;font-weight:600}
.sm-fb-badge{display:inline-block;margin-left:.25rem;padding:0 .45rem;border-radius:9999px;background:#fee2e2;color:#991b1b;font-size:.6875rem;font-weight:700;line-height:1.25rem;white-space:nowrap}
.sm-fb-key{margin-top:1rem;padding:.875rem 1.25rem;border:1px solid #fde68a;border-left:4px solid #f59e0b;border-radius:.75rem;background:#fffbeb;color:#451a03;font-size:.9375rem;line-height:1.55}.sm-fb-key__title{margin:0 0 .25rem;font-size:.9375rem;font-weight:700;color:#92400e}.sm-fb-key p{margin:0}

.page-content.sm-surface-top-accent {
  border-radius: 8px;
}

.sm-surface-top-accent::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  /* Brand green strip - match site green, not cyan/teal marketing gradient. */
  background: linear-gradient(90deg, var(--sm-brand-deep) 0%, var(--sm-brand-mid) 55%, var(--sm-brand-accent) 100%);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  pointer-events: none;
}

html[data-app-standalone] .page-content {
margin-top:1.25rem;
margin-bottom:calc(2rem + var(--sm-safe-area-bottom));
}

.sm-install-banner {
position:relative;
z-index:50;
background:linear-gradient(135deg, rgb(var(--sm-brand-accent-rgb) / 0.14), rgb(var(--sm-brand-mid-rgb) / 0.1));
border-bottom:1px solid rgb(var(--sm-brand-mid-rgb) / 0.14);
}

.sm-install-banner__inner {
max-width:72rem;
margin:0 auto;
padding:0.9rem 1rem;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:0.75rem 1rem;
}

.sm-install-banner__copy {
display:grid;
gap:0.15rem;
}

.sm-install-banner__eyebrow {
margin:0;
font-size:0.72rem;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--sm-brand-deep);
}

.sm-install-banner__title {
margin:0;
font-size:0.96rem;
line-height:1.4;
color:var(--sm-brand-deep);
font-weight:600;
}

.sm-install-banner__actions {
display:inline-flex;
flex-wrap:wrap;
align-items:center;
gap:0.55rem;
}

.sm-install-banner__btn {
appearance:none;
border-radius:9999px;
border:1px solid transparent;
padding:0.6rem 0.95rem;
font-size:0.9rem;
font-weight:700;
line-height:1;
transition:transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.sm-install-banner__btn:focus-visible {
outline:3px solid rgb(var(--sm-brand-accent-rgb) / 0.35);
outline-offset:2px;
}

.sm-install-banner__btn--primary {
background:var(--sm-brand-deep);
border-color:rgb(var(--sm-brand-mid-rgb) / 0.85);
color:#ffffff;
}

.sm-install-banner__btn--primary:hover {
background:var(--sm-brand-mid);
border-color:rgb(var(--sm-brand-mid-rgb) / 0.9);
transform:translateY(-1px);
}

.sm-install-banner__btn--secondary {
background:rgb(var(--sm-surface-rgb) / 0.72);
border-color:rgb(var(--sm-brand-mid-rgb) / 0.16);
color:var(--sm-brand-mid);
}

.sm-install-banner__btn--secondary:hover {
background:rgb(var(--sm-surface-rgb) / 0.92);
border-color:rgb(var(--sm-brand-mid-rgb) / 0.28);
}

.sm-dashboard-quick-actions-block {
/* Always visible (web + installed app); previously gated to standalone only. */
display:block;
}

.sm-dashboard-quick-actions {
margin-top:1rem;
display:grid;
gap:0.75rem;
grid-template-columns:repeat(2, minmax(0, 1fr));
}

/* On xl the quick actions live in the narrow right-hand column: stack to one column. */
@media (min-width: 1280px) {
.sm-dashboard-quick-actions {
grid-template-columns:minmax(0, 1fr);
}
}

.sm-dashboard-quick-actions__link {
display:flex;
align-items:center;
gap:0.75rem;
min-height:56px;
padding:0.55rem 0.85rem;
border-radius:0.85rem;
border:1px solid rgba(203, 213, 225, 0.95);
background:linear-gradient(180deg, rgb(var(--sm-page-rgb) / 0.92), var(--sm-surface));
color:#0f172a;
text-decoration:none;
transition:transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}

.sm-dashboard-quick-actions__link:hover,
.sm-dashboard-quick-actions__link:focus-visible {
border-color:rgb(var(--sm-brand-accent-rgb) / 0.45);
box-shadow:0 10px 24px rgba(15, 23, 42, 0.08);
transform:translateY(-1px);
}

.sm-dashboard-quick-actions__link:focus-visible {
outline:3px solid rgb(var(--sm-brand-accent-rgb) / 0.25);
outline-offset:2px;
}

.sm-dashboard-quick-actions__link--primary {
border-color:rgb(var(--sm-brand-accent-rgb) / 0.3);
background:linear-gradient(135deg, rgb(var(--sm-brand-accent-rgb) / 0.16), rgb(var(--sm-surface-rgb) / 0.98));
}

.sm-dashboard-quick-actions__icon {
display:inline-flex;
width:36px;
height:36px;
align-items:center;
justify-content:center;
flex-shrink:0;
border-radius:0.7rem;
background:rgb(var(--sm-brand-accent-rgb) / 0.12);
}

.sm-dashboard-quick-actions__icon img {
width:20px;
height:20px;
object-fit:contain;
}

.sm-dashboard-quick-actions__content {
min-width:0;
display:grid;
gap:0.15rem;
}

.sm-dashboard-quick-actions__title {
font-size:0.85rem;
font-weight:700;
color:#0f172a;
}

.sm-dashboard-quick-actions__meta {
font-size:0.72rem;
line-height:1.3;
color:#475569;
}

.sm-learner-page-actions {
display:flex;
flex-wrap:nowrap;
align-items:center;
gap:0.5rem;
}

@media (max-width: 639.98px) {
.sm-learner-page-actions {
flex-wrap:wrap;
}
}

.sm-learner-page-action {
appearance:none;
display:inline-flex;
align-items:center;
justify-content:center;
flex:1 1 auto;
min-width:0;
min-height:44px;
border-radius:9999px;
border:1px solid rgba(148, 163, 184, 0.4);
background:var(--sm-surface);
color:var(--sm-brand-mid);
padding:0.7rem 1rem;
font-size:0.92rem;
font-weight:700;
line-height:1;
text-align:center;
text-decoration:none;
white-space:nowrap;
cursor:pointer;
transition:transform 0.12s ease, border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.sm-learner-page-action:hover,
.sm-learner-page-action:focus-visible {
border-color:rgb(var(--sm-brand-mid-rgb) / 0.35);
box-shadow:0 8px 20px rgba(15, 23, 42, 0.06);
transform:translateY(-1px);
}

.sm-learner-page-action:focus-visible {
outline:3px solid rgb(var(--sm-brand-accent-rgb) / 0.25);
outline-offset:2px;
}

.sm-learner-page-action--primary {
background:var(--sm-brand-deep);
border-color:rgb(var(--sm-brand-mid-rgb) / 0.9);
color:#ffffff;
}

.sm-learner-page-action--primary:hover,
.sm-learner-page-action--primary:focus-visible {
background:var(--sm-brand-mid);
border-color:rgb(var(--sm-brand-mid-rgb) / 0.95);
color:#ffffff;
}

/* Compact help chip - sits on the same row as primary learner CTAs */
.sm-learner-help-chip {
appearance:none;
display:inline-flex;
align-items:center;
justify-content:center;
align-self:center;
width:44px;
height:44px;
flex:0 0 44px;
margin:0;
padding:0;
border-radius:9999px;
border:1.5px solid rgb(var(--sm-brand-mid-rgb) / 0.35);
background:var(--sm-surface);
color:var(--sm-brand-deep);
font-size:1.15rem;
font-weight:800;
line-height:1;
cursor:pointer;
box-shadow:0 1px 0 rgba(15, 61, 46, 0.04);
transition:transform 0.12s ease, border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.sm-learner-help-chip:hover,
.sm-learner-help-chip:focus-visible {
border-color:var(--sm-brand-mid);
background:rgb(var(--sm-brand-accent-rgb) / 0.12);
color:var(--sm-brand-deep);
transform:translateY(-1px);
box-shadow:0 8px 18px rgba(15, 61, 46, 0.1);
}

.sm-learner-help-chip:focus-visible {
outline:3px solid rgb(var(--sm-brand-accent-rgb) / 0.28);
outline-offset:2px;
}

.sm-quiz-card {
min-height:100%;
text-decoration:none;
}

.sm-quiz-card__body {
display:flex;
align-items:flex-start;
gap:1rem;
}

.sm-quiz-card__meta {
min-width:0;
flex:1;
}

.sm-quiz-card__footer {
margin-top:auto;
padding-top:0.85rem;
display:flex;
align-items:center;
justify-content:space-between;
gap:0.75rem;
font-size:0.85rem;
font-weight:700;
color:var(--sm-brand-deep);
}

.sm-quiz-card__arrow {
font-size:1rem;
transition:transform 0.12s ease;
}

.sm-quiz-card:hover .sm-quiz-card__arrow,
.sm-quiz-card:focus-visible .sm-quiz-card__arrow {
transform:translateX(2px);
}

.sm-mobile-action-bar {
display:none;
}

.sm-review-rating-grid {
display:grid;
width:100%;
gap:0.75rem;
grid-template-columns:repeat(4, minmax(0, 1fr));
}

.sm-review-rating-button {
appearance:none;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
border-radius:0.95rem;
border:1px solid rgba(148, 163, 184, 0.3);
padding:0.85rem 1rem;
font-size:0.95rem;
font-weight:800;
line-height:1;
text-align:center;
transition:transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.sm-review-rating-button:hover,
.sm-review-rating-button:focus-visible {
transform:translateY(-1px);
box-shadow:0 10px 24px rgba(15, 23, 42, 0.08);
}

.sm-review-rating-button:focus-visible {
outline:3px solid rgb(var(--sm-brand-accent-rgb) / 0.22);
outline-offset:2px;
}

.sm-review-rating-button--again {
border-color:rgba(248, 113, 113, 0.36);
background:#fef2f2;
color:#b91c1c;
}

.sm-review-rating-button--hard {
border-color:rgba(251, 191, 36, 0.36);
background:#fefce8;
color:#a16207;
}

.sm-review-rating-button--good {
border-color:rgba(96, 165, 250, 0.36);
background:#eff6ff;
color:#1d4ed8;
}

.sm-review-rating-button--easy {
border-color:rgba(52, 211, 153, 0.36);
background:#ecfdf5;
color:#047857;
}

/* Hide x-cloak elements until Alpine initializes */
[x-cloak] { display: none !important; }

/* Details: hide default disclosure marker when desired */
.details-no-marker > summary {
list-style:none;
}

.details-no-marker > summary::-webkit-details-marker {
display:none;
}

.details-no-marker > summary::marker {
content:"";
}

/* 2) Tablet tweak */
@media (max-width: 992px) {
.page-content {
margin:1.5rem auto;
padding:1.5rem;
}
}

/* 3) Mobile tweak */
@media (max-width: 576px) {
.page-content {
width:auto;
margin:1rem;
padding:1rem;
max-width:100%;
border-radius:4px;
box-shadow:0 1px 4px rgba(0,0,0,0.1);
}

html[data-page-kind="question"] .page-content {
margin:0.75rem;
padding:0.75rem;
}

.sm-dashboard-quick-actions-block {
display:block;
}

.sm-dashboard-quick-actions {
grid-template-columns:1fr;
}

.sm-learner-page-actions .sm-learner-page-action {
flex:1 1 auto;
width:auto;
}

.sm-dashboard-summary-card--collapsed {
min-height:0;
padding:0.85rem 2.9rem 0.85rem 0.9rem !important;
}

.sm-dashboard-summary-card--collapsed [data-dashboard-panel-body] {
display:none !important;
}

.sm-dashboard-summary-card--collapsed [data-dashboard-panel-overlay] {
position:static;
inset:auto;
display:flex !important;
align-items:center;
justify-content:flex-start;
min-height:0;
padding:0;
background:transparent;
color:#64748b;
font-size:0.78rem;
line-height:1.35;
text-align:left;
}

.sm-dashboard-summary-card--collapsed [data-dashboard-panel-toggle] {
top:50%;
transform:translateY(-50%);
}

.sm-review-rating-grid {
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}

/* Compact dashboard metrics without changing their desktop spacing. */
@media (max-width: 639px) {
.sm-dashboard-summary-grid > div, .sm-dashboard-coach > .grid > div { padding: .75rem; }
}
@media(max-width:479px){.sm-dashboard-summary-grid .flex-shrink-0{display:none}}

[data-dashboard-panel-toggle]+* p:first-child:before{content:"";float:right;width:24px;height:20px}

@media (min-width: 577px) and (max-width: 1023px) {
.sm-dashboard-quick-actions-block {
display:block;
}
}

/* Help panel */
.help-panel-backdrop {
position:fixed;
inset:0;
background:rgba(15, 23, 42, 0.45);
opacity:0;
pointer-events:none;
transition:opacity 0.25s ease;
z-index:70;
}

.help-panel-backdrop.help-panel-backdrop--visible {
opacity:1;
pointer-events:auto;
}

.help-panel-backdrop.hidden {
display:none !important;
}

.help-panel {
position:fixed;
top:0;
right:0;
bottom:0;
width:min(420px, 100%);
background:var(--sm-surface);
box-shadow:-6px 0 18px rgba(15, 23, 42, 0.15);
display:flex;
flex-direction:column;
transform:translateX(100%);
transition:transform 0.25s ease;
z-index:80;
}

.help-panel.hidden {
display:none !important;
}

.help-panel.help-panel--open {
transform:translateX(0);
}

.help-panel__header {
display:flex;
justify-content:space-between;
align-items:flex-start;
padding:1.25rem 1.5rem 1rem;
border-bottom:1px solid #e5e7eb;
}

.help-panel__title {
font-size:1.125rem;
font-weight:600;
color:#111827;
}

.help-panel__subtitle {
margin-top:0.25rem;
font-size:0.875rem;
color:#4b5563;
max-width:20rem;
}

.help-panel__close {
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:9999px;
border:none;
background:transparent;
color:#6b7280;
padding:0.25rem;
}

.help-panel__close:hover,
.help-panel__close:focus {
background:rgba(59, 130, 246, 0.1);
color:#2563eb;
outline:none;
}

.help-panel__body {
padding:1.25rem 1.5rem;
overflow-y:auto;
flex:1;
}

.help-panel__quickstart {
margin-bottom:1.25rem;
}

.help-panel__quickstart a {
display:inline-flex;
align-items:center;
gap:0.35rem;
padding:0.3rem 0.75rem;
font-size:0.8rem;
font-weight:600;
color:var(--sm-brand-deep);
background:rgb(var(--sm-brand-accent-rgb) / 0.12);
border:1px solid rgb(var(--sm-brand-accent-rgb) / 0.4);
border-radius:9999px;
text-decoration:none;
transition:background-color 0.12s ease, border-color 0.12s ease;
}

.help-panel__quickstart a:hover {
background:rgb(var(--sm-brand-accent-rgb) / 0.2);
border-color:rgb(var(--sm-brand-accent-rgb) / 0.65);
}

.help-panel__quickstart a::before {
content:'\2139';
font-size:0.95rem;
}

.help-panel__loading,
.help-panel__empty {
font-size:0.9rem;
color:#4b5563;
}

.help-panel__article-title {
font-size:1.05rem;
font-weight:600;
color:#111827;
margin-bottom:0.75rem;
}

.help-panel__article-content {
font-size:0.95rem;
line-height:1.5;
color:#1f2937;
}

/* Help body (drawer + Help Centre): section headings keep their margin; only the first element is flush. */
:is(.help-panel__article-content,.help-article-body) :is(h1,h2,h3) { font-weight: 600; margin: 1.5rem 0 0.5rem; color: #0f172a; line-height: 1.3; }
.help-panel__article-content h2 { font-size: 1.05rem; }
.help-panel__article-content h3 { font-size: 0.98rem; }
:is(.help-panel__article-content,.help-article-body) :is(p,ul,ol) { margin: 0 0 0.75rem; }
:is(.help-panel__article-content,.help-article-body) li + li { margin-top: 0.35rem; }
:is(.help-panel__article-content,.help-article-body) > :first-child,
:is(.help-panel__article-content,.help-article-body) > article:first-child > :first-child,
:is(.help-panel__article-content,.help-article-body) > article:first-child > header:first-child > :first-child { margin-top: 0; }
.help-panel__article-content :is(ul,ol) { margin-left: 1.25rem; }

.help-panel__article-content ul li {
list-style:disc;
}

.help-panel__article-content ol li {
list-style:decimal;
}

.help-panel__article-content a {
color:var(--sm-brand-deep);
font-weight:700;
text-decoration:underline;
}

.help-article-body a {
color:var(--sm-brand-deep);
font-weight:700;
text-decoration:underline;
}

/* iOS Safari: prevent text auto-enlargement in the SimpleMed landing-page card */
@supports (-webkit-touch-callout: none) {
@media (hover: none) and (pointer: coarse) {
.simplemed-link-card,
.simplemed-link-card * {
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}

.simplemed-link-card > a,
.simplemed-link-card > p {
min-width:0;
}

.simplemed-link-card > a > div {
min-width:0;
}
}
}

.help-article-body a:hover,
.help-article-body a:focus {
color:var(--sm-brand-mid);
}

.help-panel__meta {
display:flex;
gap:0.75rem;
font-size:0.75rem;
color:#6b7280;
margin-bottom:0.5rem;
}

.help-panel__actions {
margin-top:1rem;
}

.help-panel__page-link {
margin-top:0.75rem;
}

.help-panel__page-link a {
display:inline-flex;
align-items:center;
gap:0.3rem;
padding:0.25rem 0.7rem;
font-size:0.78rem;
font-weight:600;
color:#374151;
background:#f3f4f6;
border:1px solid #d1d5db;
border-radius:9999px;
text-decoration:none;
transition:background-color 0.12s ease, border-color 0.12s ease;
}

.help-panel__page-link a:hover {
background:#e5e7eb;
border-color:#9ca3af;
}

/* Cross-site switch button (SimpleMed ↔ SimpleMed+) */
.sm-side-switch {
--sm-side-switch-offset:104px;
position:fixed;
left:calc(var(--sm-side-switch-offset) * -1);
top:50%;
transform:translateY(-50%);
width:140px;
height:56px;
border-radius:0 999px 999px 0;
background:var(--sm-brand-deep);
color:#ffffff;
display:inline-flex;
align-items:center;
justify-content:flex-start;
padding:0 14px 0 12px;
font-weight:800;
font-size:14px;
letter-spacing:0.3px;
text-decoration:none;
box-shadow:0 10px 22px rgba(15, 23, 42, 0.18);
text-shadow:0 0 8px rgba(255, 255, 255, 0.25);
z-index:60;
transition:transform 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.sm-side-switch__inner {
display:inline-flex;
align-items:center;
gap:10px;
}

.sm-side-switch__badge {
width:28px;
height:28px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(255, 255, 255, 0.92);
border:1px solid rgba(255, 255, 255, 0.98);
}

.sm-side-switch__badge-icon {
width:18px;
height:18px;
object-fit:contain;
}

.sm-side-switch__label {
white-space:nowrap;
}

.sm-side-switch:hover,
.sm-side-switch:focus-visible {
background:var(--sm-brand-mid);
transform:translateY(-50%) translateX(var(--sm-side-switch-offset));
box-shadow:0 12px 26px rgba(15, 23, 42, 0.22);
}

.sm-side-switch:focus-visible {
outline:3px solid rgb(var(--sm-brand-accent-rgb) / 0.55);
outline-offset:3px;
}

html[data-page-kind="question"] .sm-side-switch {
--sm-side-switch-offset:104px;
}

html[data-app-standalone] .sm-dashboard-quick-actions-block {
display:block;
}

html[data-app-standalone] .sm-install-banner,
html[data-pwa-installed] .sm-install-banner,
html[data-page-kind="question"] .sm-install-banner {
display:none !important;
}

@media (max-width: 576px) {
.sm-install-banner__inner {
padding:0.85rem 0.9rem;
}

.sm-install-banner__title {
font-size:0.9rem;
}

.sm-side-switch {
display:none;
}
}

.help-panel__primary-link {
display:inline-flex;
align-items:center;
gap:0.25rem;
color:var(--sm-brand-deep);
font-weight:700;
}

.help-panel__primary-link:hover,
.help-panel__secondary-link:hover {
text-decoration:underline;
}

.help-panel__related {
margin-top:2rem;
}

.help-panel__related-heading {
font-size:0.85rem;
font-weight:600;
color:#4b5563;
text-transform:uppercase;
letter-spacing:0.05em;
margin-bottom:0.5rem;
}

.help-panel__related-list {
display:grid;
gap:0.5rem;
}

.help-panel__related-list button {
width:100%;
text-align:left;
background:#f3f4f6;
border:1px solid transparent;
border-radius:0.5rem;
padding:0.6rem 0.75rem;
font-size:0.9rem;
color:#1f2937;
}

.help-panel__related-list button:hover,
.help-panel__related-list button:focus {
border-color:#93c5fd;
outline:none;
}

.help-panel__footer {
padding:1rem 1.5rem;
border-top:1px solid #e5e7eb;
background:#f9fafb;
}

.help-panel__footer-links {
display:flex;
align-items:center;
justify-content:space-between;
gap:0.75rem;
}

.help-panel__secondary-link {
font-size:0.9rem;
color:var(--sm-brand-deep);
font-weight:700;
}

/* Footer: SimpleMed-style social links */
.sm-footer-social .social-media-text-wrap {
display:flex;
flex-wrap:wrap;
gap:0.65rem;
align-items:center;
}

.sm-footer-social .sm-social-link {
width:38px;
height:38px;
border-radius:9999px;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(255, 255, 255, 0.08);
border:1px solid rgba(255, 255, 255, 0.14);
color:rgba(229, 231, 235, 0.95);
text-decoration:none;
transition:transform 0.12s ease, background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.sm-footer-social .sm-social-link svg {
width:18px;
height:18px;
display:block;
}

.sm-footer-social .sm-social-link:hover,
.sm-footer-social .sm-social-link:focus-visible {
transform:translateY(-1px);
background:rgba(255, 255, 255, 0.14);
border-color:rgba(255, 255, 255, 0.22);
color:#ffffff;
outline:none;
}

.sm-footer-social .sm-social-link--instagram {
background:var(--sm-brand-deep);
border-color:rgb(var(--sm-brand-mid-rgb) / 0.85);
color:#ffffff;
}

.sm-footer-social .sm-social-link--instagram:hover,
.sm-footer-social .sm-social-link--instagram:focus-visible {
background:var(--sm-brand-mid);
border-color:rgb(var(--sm-brand-accent-rgb) / 0.85);
}

/* Inline tip bubbles */
.help-tip-container {
position:relative;
display:inline-block;
}

.help-tip-trigger {
position:absolute;
top:-0.4rem;
right:-0.4rem;
width:1.4rem;
height:1.4rem;
border-radius:9999px;
border:1px solid rgba(59, 130, 246, 0.35);
background:rgba(59, 130, 246, 0.12);
color:#1d4ed8;
font-size:0.8rem;
font-weight:600;
display:inline-flex;
align-items:center;
justify-content:center;
z-index:10;
transition:transform 0.15s ease, background 0.15s ease;
}

.help-tip-trigger:hover,
.help-tip-trigger:focus {
background:rgba(59, 130, 246, 0.2);
border-color:rgba(37, 99, 235, 0.6);
transform:scale(1.05);
outline:none;
}

.help-tip-popover {
position:absolute;
max-width:min(20rem, calc(100vw - 2rem));
background:#111827;
color:#f9fafb;
padding:0.75rem 0.9rem;
border-radius:0.5rem;
box-shadow:0 12px 32px rgba(15, 23, 42, 0.25);
z-index:90;
}

.help-tip-popover h5 {
font-size:0.95rem;
font-weight:600;
margin-bottom:0.35rem;
}

.help-tip-popover p {
font-size:0.85rem;
line-height:1.45;
}

.help-tip-popover a {
display:inline-flex;
margin-top:0.5rem;
font-size:0.8rem;
font-weight:700;
color:#5eead4;
}

.help-tip-popover a:hover {
color:#99f6e4;
text-decoration:underline;
}

/* Learner explanation rich text */
.explanation-rich-text {
width:100%;
max-width:none;
}

/* Article links are the product's USP: always read as links (green, underlined), never as bold key terms. */
.explanation-rich-text a,.sm-refs a {
color:var(--sm-brand-mid);
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:2px;
font-weight:600;
}

.explanation-rich-text a:hover,
.explanation-rich-text a:focus,.sm-refs a:hover,.sm-refs a:focus {
color:var(--sm-brand-deep);
text-decoration-thickness:2px;
}

/* Cookie consent banner (analytics opt-in) */
.sm-cookie-banner {
position:fixed;
left:0;
right:0;
bottom:0;
z-index:90;
padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
background:rgba(15, 23, 42, 0.96);
color:#f8fafc;
box-shadow:0 -12px 28px rgba(15, 23, 42, 0.35);
backdrop-filter:blur(10px);
}

.sm-cookie-banner__inner {
max-width:64rem;
margin:0 auto;
display:flex;
flex-wrap:wrap;
gap:0.85rem 1.25rem;
align-items:center;
justify-content:space-between;
}

.sm-cookie-banner__text {
margin:0;
font-size:0.92rem;
line-height:1.45;
max-width:48rem;
}

.sm-cookie-banner__text a {
color:#5eead4;
font-weight:700;
text-decoration:underline;
}

.sm-cookie-banner__text a:hover,
.sm-cookie-banner__text a:focus {
color:#99f6e4;
}

.sm-cookie-banner__actions {
display:inline-flex;
flex-wrap:wrap;
gap:0.55rem;
align-items:center;
justify-content:flex-end;
}

.sm-cookie-banner__btn {
appearance:none;
border-radius:9999px;
border:1px solid transparent;
padding:0.55rem 0.9rem;
font-size:0.9rem;
font-weight:700;
cursor:pointer;
transition:transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.sm-cookie-banner__btn:focus-visible {
outline:3px solid rgb(var(--sm-brand-accent-rgb) / 0.5);
outline-offset:2px;
}

.sm-cookie-banner__btn--accept {
background:var(--sm-brand-deep);
border-color:rgb(var(--sm-brand-mid-rgb) / 0.85);
color:#ffffff;
}

.sm-cookie-banner__btn--accept:hover {
background:var(--sm-brand-mid);
border-color:rgb(var(--sm-brand-accent-rgb) / 0.85);
color:#ffffff;
transform:translateY(-1px);
}

.sm-cookie-banner__btn--reject {
background:rgba(148, 163, 184, 0.12);
border-color:rgba(148, 163, 184, 0.35);
color:rgba(226, 232, 240, 0.95);
}

.sm-cookie-banner__btn--reject:hover {
background:rgba(148, 163, 184, 0.18);
border-color:rgba(148, 163, 184, 0.55);
transform:translateY(-1px);
}

.sm-footer-cookie-link {
background:transparent;
border:none;
padding:0;
font:inherit;
color:inherit;
cursor:pointer;
text-align:left;
}

@media (max-width: 640px) {
.sm-cookie-banner {
padding:0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
}

.sm-cookie-banner__inner {
display:grid;
grid-template-columns:minmax(0, 1fr);
gap:0.45rem;
}

.sm-cookie-banner__text {
font-size:0.75rem;
line-height:1.25;
}

.sm-cookie-banner__actions {
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
width:100%;
gap:0.5rem;
}

.sm-cookie-banner__btn {
min-height:2.75rem;
padding:0.35rem 0.75rem;
font-size:0.8rem;
}
}

.explanation-rich-text p + p {
margin-top:0.85rem;
}

.explanation-rich-text strong {
  font-weight: 700;
  color: #111827; /* key terms read as key terms (Radwise-style feedback) */
}

/* Global page-transition spinner (Founder feedback ID 21) */
.page-transition-overlay {
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding-top:var(--sm-safe-area-top);
padding-right:var(--sm-safe-area-right);
padding-bottom:var(--sm-safe-area-bottom);
padding-left:var(--sm-safe-area-left);
background:rgb(var(--sm-surface-rgb) / 0.55);
backdrop-filter:blur(2px);
z-index:120;
}

.page-transition-overlay.hidden,
#dashboard-loading-overlay.hidden,
#preferences-loading-overlay.hidden {
display:none !important;
}

.page-transition-spinner {
width:44px;
height:44px;
border-radius:9999px;
border:4px solid rgba(15, 23, 42, 0.14);
border-top-color:rgb(var(--sm-brand-mid-rgb) / 0.9);
animation:smplus-spin 0.85s linear infinite;
box-shadow:0 10px 28px rgba(15, 23, 42, 0.12);
background:rgb(var(--sm-surface-rgb) / 0.75);
}

@keyframes smplus-spin {
to {
transform:rotate(360deg);
}
}

.sm-question-toolbar {
top:var(--sm-safe-area-top);
}

.sm-question-toolbar--offset {
top:calc(4rem + var(--sm-safe-area-top));
}

html[data-app-standalone] .sm-question-toolbar {
padding-top:calc(0.5rem + var(--sm-safe-area-top));
}

html[data-page-kind="question"] .page-content {
padding-bottom:calc(1rem + var(--sm-safe-area-bottom));
}

@media (max-width: 576px) {
html[data-app-standalone] .page-content {
margin-top:0.75rem;
margin-bottom:calc(1rem + var(--sm-safe-area-bottom));
}

html[data-app-standalone][data-page-kind="question"] .page-content {
margin-top:0.5rem;
padding-bottom:calc(0.85rem + var(--sm-safe-area-bottom));
}
}

@media (max-width: 639px) {
.sm-page-content--mobile-bar {
padding-bottom:calc(8rem + var(--sm-safe-area-bottom));
}

.sm-mobile-action-bar {
position:fixed;
left:0;
right:0;
bottom:0;
z-index:65;
display:block;
padding:0 0 calc(0.75rem + var(--sm-safe-area-bottom));
pointer-events:none;
}

.sm-mobile-action-bar[hidden] {
display:none !important;
}

.sm-mobile-action-bar__inner {
pointer-events:auto;
margin:0 0.75rem;
padding:0.8rem 0.85rem;
border:1px solid rgba(203, 213, 225, 0.98);
border-radius:1rem;
background:rgb(var(--sm-surface-rgb) / 0.97);
box-shadow:0 -12px 30px rgba(15, 23, 42, 0.12);
backdrop-filter:blur(12px);
}

.sm-mobile-action-bar__copy {
display:flex;
align-items:baseline;
justify-content:space-between;
gap:0.75rem;
margin-bottom:0.7rem;
}

.sm-mobile-action-bar__eyebrow {
margin:0;
font-size:0.76rem;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--sm-brand-deep);
}

.sm-mobile-action-bar__status {
margin:0;
font-size:0.84rem;
font-weight:600;
color:#334155;
text-align:right;
}

.sm-mobile-action-bar__actions {
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:0.6rem;
}

.sm-mobile-action-bar__actions--single {
grid-template-columns:1fr;
}

.sm-mobile-action-bar__link,
.sm-mobile-action-bar__button {
appearance:none;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
border-radius:0.9rem;
border:1px solid rgba(148, 163, 184, 0.36);
background:var(--sm-surface);
color:var(--sm-brand-mid);
padding:0.7rem 0.9rem;
font-size:0.9rem;
font-weight:700;
text-align:center;
text-decoration:none;
}

.sm-mobile-action-bar__button {
border-color:rgb(var(--sm-brand-accent-rgb) / 0.9);
background:var(--sm-brand-deep);
color:#ffffff;
}

.sm-mobile-action-bar__button:disabled {
opacity:0.5;
cursor:not-allowed;
box-shadow:none;
}

.sm-mobile-action-bar .sm-review-rating-grid {
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:0.6rem;
}
}

/* Native app shell: the native bottom tab bar + Articles tab replace the floating
cross-site side switch and the PWA install banner, so hide that web-only chrome in
app mode. Scoped to html[data-native-app] (set by native-shell.js) so web is untouched. */
html[data-native-app] .sm-side-switch,
html[data-native-app] .sm-install-banner,
html[data-native-app] .smg-footer,
body[data-native-app] .smg-footer {
display:none !important;
}

/* Legacy app promo styles. */
.sm-play-badge{display:inline-flex;align-items:center;gap:.75rem;padding:.75rem 1.4rem;border-radius:.6rem;background:#111827;color:#ffffff;text-decoration:none;box-shadow:0 8px 20px rgba(17,24,39,.25);transition:background-color .18s ease,transform .12s ease}
.sm-play-badge:hover,.sm-play-badge:focus-visible{background:#1f2937;transform:translateY(-1px);color:#ffffff}
.sm-play-badge-icon{width:2rem;height:2rem;display:block}
.sm-play-badge-copy{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.sm-play-badge-kicker{font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;color:#d1d5db}
.sm-play-badge-title{font-size:1.125rem;font-weight:700}
.sm-ios-soon{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem;border:1px solid #cbd5e1;border-radius:.6rem;background:var(--sm-surface);font-size:.875rem;color:#6b7280}
.sm-ios-soon-icon{width:1.25rem;height:1.25rem;fill:currentColor}

/* SimpleMed+ public top bar: shorter bar, slightly smaller logo, real buttons.
Defined here (plain CSS) so they ship without a Tailwind rebuild (no node toolchain). */
.smp-topbar{padding-top:.5rem;padding-bottom:.5rem}
.smp-topbar-logo{height:3rem;width:auto}
.smp-nav-btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1.1rem;border-radius:.6rem;font-weight:600;line-height:1.1;text-align:center;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
.smp-nav-btn-primary{background:var(--sm-brand-deep);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.10)}
.smp-nav-btn-primary:hover{background:var(--sm-brand-mid);color:#fff}
.smp-nav-btn-outline{border:1px solid var(--sm-brand-deep);color:var(--sm-brand-deep);background:transparent}
.smp-nav-btn-outline:hover{background:var(--sm-brand-deep);color:#fff}
.smp-nav-btn-block{display:flex;width:100%;padding-top:.65rem;padding-bottom:.65rem}
@media (min-width:640px){.smp-topbar-logo{height:3.25rem}}
@media (min-width:768px){.smp-topbar{padding-top:.75rem;padding-bottom:.75rem}.smp-topbar-logo{height:4rem}}

/* Keep the selected Help Centre article near the filters on narrow screens.
The full list remains available in a bounded, touch-scrollable region. */
@media (max-width:767px){
.help-center__article-list{
max-height:min(28rem,55vh);
overflow-y:auto;
overscroll-behavior:contain;
scrollbar-gutter:stable;
}
}

/* WCAG: visible keyboard focus, 44px pointer targets, and pricing note contrast. */
.sm-footer-social .sm-social-link,
.smp-gate-login,
.smp-login-forgot {
position:relative;
}

.sm-footer-social .sm-social-link {
width:44px;
height:44px;
margin:-3px;
border-color:transparent;
background:transparent;
}

.sm-footer-social .sm-social-link::before {
content:"";
position:absolute;
inset:3px;
border:1px solid rgba(255, 255, 255, 0.14);
border-radius:inherit;
background:rgba(255, 255, 255, 0.08);
}

.sm-footer-social .sm-social-link svg {
position:relative;
}

.sm-footer-social .sm-social-link:hover,
.sm-footer-social .sm-social-link:focus-visible {
border-color:transparent;
background:transparent;
}

.sm-footer-social .sm-social-link:hover::before,
.sm-footer-social .sm-social-link:focus-visible::before {
border-color:rgba(255, 255, 255, 0.22);
background:rgba(255, 255, 255, 0.14);
}

.sm-footer-social .sm-social-link--instagram::before {
border-color:rgb(var(--sm-brand-mid-rgb) / 0.85);
background:var(--sm-brand-deep);
}

.sm-footer-social .sm-social-link--instagram:hover::before,
.sm-footer-social .sm-social-link--instagram:focus-visible::before {
border-color:rgb(var(--sm-brand-accent-rgb) / 0.85);
background:var(--sm-brand-mid);
}

.smp-gate-login {
min-height:44px;
}

.smp-login-forgot {
display:inline-flex;
min-height:44px;
margin-block:-12px;
align-items:center;
}

.sm-footer-social .sm-social-link:focus-visible {
outline:3px solid #f4d58d;
outline-offset:2px;
}

.smp-pricing-footnote {
color:#526072;
}

.difficulty-pill{display:flex;width:fit-content;align-items:center;margin:.75rem 0;padding:.125rem .5rem;border:1px solid #e7e5e4;border-radius:.375rem;font-size:.75rem;line-height:1rem;font-weight:500}
.difficulty-pill:last-child{margin-bottom:0}
.difficulty-pill--easy{color:#047857;background:#f5f5f4}
.difficulty-pill--medium{color:#92400e;background:#f5f5f4}
.difficulty-pill--hard{color:#be123c;background:#f5f5f4}
/* Phone leading on public pages (owner 2026-10-04): 1.6 -> 1.5; body beats brand.css. */
@media (max-width:767px){body .smp-public{line-height:1.5}}