/* Dedicated How To styles: no course styles or course selectors. */
@font-face { font-family: 'How To Sans'; src: url('/fonts/dm-sans/dm-sans-latin-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root{ --ht-sidebar-width: clamp(250px, 20vw, 360px); --ht-bg: #f5f7fb; --ht-surface: #fff; --ht-text: #19283f; --ht-muted: #58677e; --ht-border: #dce3ed; --ht-accent: #2357cf; --ht-soft: #eaf0ff; }
:root[data-theme='dark']{ --ht-bg: #101722; --ht-surface: #182333; --ht-text: #edf3ff; --ht-muted: #adbed4; --ht-border: #334259; --ht-accent: #9bbaff; --ht-soft: #223656; }
.how-to{ margin: 0; color: var(--ht-text); background: var(--ht-bg); font-family: 'How To Sans', system-ui, sans-serif; line-height: 1.65; }
.how-to *, .how-to *::before, .how-to *::after{ box-sizing: border-box; }
.how-to [hidden]{ display: none !important; }
.how-to a{ color: var(--ht-accent); text-decoration: none; }
.how-to a:hover{ text-decoration: underline; }
.how-to a:focus-visible, .how-to button:focus-visible, .how-to input:focus-visible, .how-to summary:focus-visible{ outline: 3px solid var(--ht-accent); outline-offset: 4px; }
.how-to h1, .how-to h2, .how-to h3{ line-height: 1.2; letter-spacing: -.025em; }
.how-to h1{ font-size: clamp(2rem, 4vw, 3.4rem); margin: .65rem 0 1rem; }
.how-to h2{ font-size: 1.5rem; }
.how-to p{ margin: .6rem 0 1rem; }
.how-to button{ cursor: pointer; font: inherit; padding: .6rem 1rem; border: 1px solid var(--ht-border); border-radius: .65rem; background: var(--ht-surface); color: var(--ht-text); }
.how-to button:disabled{ opacity: .45; cursor: default; }
.how-to-skip{ position: absolute; left: 1rem; top: -100px; z-index: 20; background: var(--ht-surface); padding: 1rem; }
.how-to-skip:focus{ top: 1rem; }
.how-to-container{ max-width: 1160px; margin: auto; padding: 2.5rem 2rem 5rem; }
.how-to-hero{ padding: 2rem 0; max-width: 850px; }
.how-to-eyebrow{ color: var(--ht-accent); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.how-to-lead{ font-size: 1.1rem; color: var(--ht-muted); max-width: 760px; }

.how-to-cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.2rem; }
.how-to-card{ display: block; border: 1px solid var(--ht-border); border-radius: 1rem; padding: 1.6rem; background: var(--ht-surface); }
.how-to-card:hover{ border-color: var(--ht-accent); text-decoration: none !important; }
.how-to-card h2, .how-to-card h3{ color: var(--ht-text); margin: 1rem 0 .7rem; font-size: 1.45rem; }
.how-to-card p{ color: var(--ht-muted); }
.how-to-card-footer{ font-size: .9rem; font-weight: 700; }
.how-to-badge{ display: inline-block; font-size: .78rem; font-weight: 700; background: var(--ht-soft); color: var(--ht-accent); padding: .25rem .65rem; border-radius: .5rem; }
.how-to-muted{ color: var(--ht-muted); font-size: .9rem; }
.how-to-group{ margin-top: 2.3rem; }
.how-to-search-label{ display: block; font-weight: 700; margin-bottom: .5rem; }
.how-to-search{ width: 100%; max-width: 560px; padding: .85rem 1rem; font: inherit; color: var(--ht-text); background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: .65rem; }
.how-to-shell{ display: grid; grid-template-columns: var(--ht-sidebar-width) minmax(0, 1fr); width: 100%; max-width: none; margin: 0; }
.how-to-sidebar{ padding: 2rem 1.2rem; border-right: 1px solid var(--ht-border); }
.how-to-sidebar h2{ font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin: 1.5rem 0 .7rem; color: var(--ht-muted); }
.how-to-section-menu{ margin-top: 1.5rem; }
.how-to-guide-menu summary, .how-to-section-menu summary{ font-weight: 800; cursor: pointer; }
.how-to-collection-link{ display: block; font-size: .85rem; margin-top: 1rem; }
.how-to-guide-link, .how-to-section-menu a{ display: flex; align-items: center; gap: .6rem; padding: .65rem .7rem; border-radius: .55rem; color: var(--ht-muted) !important; font-size: .9rem; }
.how-to-sidebar a[aria-current]{ color: var(--ht-accent) !important; background: var(--ht-soft); font-weight: 700; }
.how-to-step-number{ font-size: .75rem; border: 1px solid var(--ht-border); border-radius: 50%; min-width: 25px; text-align: center; }
.how-to-guide-main{ --ad-placeholder-bg: var(--ht-surface); min-width: 0; background: var(--ht-surface); padding: 2rem clamp(1rem, 3vw, 3rem) 4rem; }
.how-to-guide-heading{ margin: 1.5rem 0; }
.how-to-guide-heading h1{ font-size: clamp(1.9rem, 3vw, 2.75rem); }
html:has(.how-to-controls-panel){ scroll-padding-bottom: calc(var(--ht-controls-height, 0px) + 1rem); }
.how-to-shell .how-to-guide-main{ padding-bottom: calc(var(--ht-controls-height, 0px) + 2rem); }
.how-to-controls-panel{ position: fixed; bottom: 0; left: var(--ht-sidebar-width); right: 0; z-index: 9; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem clamp(1rem, 3vw, 3rem) calc(1rem + env(safe-area-inset-bottom, 0px)); background: var(--ht-surface); border-top: 1px solid var(--ht-border); box-shadow: 0 -8px 24px #00000008; }
.how-to-step-controls{ display: flex; align-items: center; gap: .6rem; }
.how-to-controls-panel .how-to-progress{ text-align: center; }
.how-to-view-switch{ display: flex; gap: .3rem; padding: .3rem; background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: .75rem; }
.how-to-view-switch button{ border: 0; font-size: .85rem; }
.how-to-view-switch button[aria-pressed='true']{ background: var(--ht-soft); color: var(--ht-accent); font-weight: 800; }
.how-to-progress{ color: var(--ht-muted); font-size: .85rem; margin: 0 !important; }
.how-to-step{ padding: 0; margin-bottom: 1.5rem; background: transparent; border: 0; border-radius: 0; scroll-margin-top: 1rem; }
.how-to-step-heading h2{ margin: .8rem 0 1.3rem; }
.how-to-step-body{ display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); align-items: start; gap: 1.7rem; }
.how-to-step-body:not(:has(.how-to-images)){ display: block; }
.how-to-images figure{ margin: 0 0 1rem; }
.how-to-images img{ display: block; width: 100%; height: auto; border-radius: .8rem; }
.how-to-images figcaption{ color: var(--ht-muted); font-size: .72rem; margin-top: .6rem; }
.how-to-prose{ overflow-wrap: anywhere; }
.how-to-prose > p:first-child{ margin-top: 0; }
.how-to-note, .how-to-warning{ padding: 1rem; border-left: 3px solid var(--ht-accent); background: var(--ht-soft); border-radius: .4rem; margin: 1.3rem 0; font-size: .9rem; }
.how-to-warning{ border-color: #ce8b19; }
.how-to-note p:last-child, .how-to-warning p:last-child{ margin-bottom: 0; }
.how-to-guide-end{ margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--ht-border); font-size: .85rem; }
.how-to-related{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.how-to .site-footer{ border-top: 1px solid var(--ht-border); padding: 2rem; background: var(--ht-surface); font-size: .85rem; }
.how-to .footer-main{ max-width: 1200px; margin: auto; }
.how-to .footer-links{ display: flex; flex-wrap: wrap; gap: 2rem; }
.how-to .footer-column{ display: flex; flex-direction: column; }
.how-to .footer-column h2{ font-size: 1rem; }
.how-to .footer-bottom{ margin-top: 2rem; }
.how-to .footer-legal{ display: flex; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 800px) {
.how-to-shell{ display: block; }
.how-to-sidebar{ border-right: 0; border-bottom: 1px solid var(--ht-border); padding: 1rem; }
.how-to-section-menu{ margin-top: .8rem; }
.how-to-guide-main, .how-to-container{ padding: 1.5rem 1rem 3rem; }
.how-to-step-body{ grid-template-columns: 1fr; gap: 1rem; }
.how-to-images{ max-width: 420px; margin: auto; }
.how-to-controls-panel{ left: 0; right: 0; grid-template-columns: minmax(0, 1fr) auto; gap: .7rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px)); }
.how-to-controls-panel .how-to-view-switch{ width: fit-content; }
.how-to-controls-panel .how-to-view-switch button{ font-size: .78rem; padding: .5rem .65rem; }
.how-to-controls-panel .how-to-progress{ font-size: .78rem; }
.how-to-step-controls{ grid-column: 1 / -1; justify-content: space-between; }
.how-to-step-controls button{ min-height: 44px; }
}

/* Desktop guide framing stays fixed while the guide content scrolls. */
@media (min-width: 801px) {
html:has(.how-to-guide-page){ scroll-padding-top: calc(var(--ht-header-height, 77px) + 1rem); }

.how-to-guide-page .how-to-shell{ min-height: calc(100dvh - var(--ht-header-height, 77px)); }
.how-to-guide-page .how-to-sidebar{ position: fixed; top: calc(var(--ht-header-height, 72px) + var(--site-panel-height, 0px)); bottom: 0; left: 0; width: var(--ht-sidebar-width); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; background: var(--ht-bg); z-index: 5; }
.how-to-guide-page .how-to-guide-main{ grid-column: 2; }
.how-to-guide-page .how-to-skip{ position: fixed; z-index: 30; }
}

/* Guide thumbnails reuse section assets without overlays or cropping. */
.how-to-card-thumbnail { display: flex; align-items: center; justify-content: center; height: 200px; padding: .7rem; margin-bottom: 1rem; border-radius: .75rem; background: var(--ht-bg); overflow: hidden; }
.how-to-card-thumbnail img { display: block; width: auto; max-width: 100%; height: 100%; object-fit: contain; border-radius: .4rem; }
/* Like course ads, request the fixed horizontal slot only when it fits. */
.how-to-guide-main { container-type: inline-size; }
.how-to-top-ad { width: 728px; height: 90px; margin: 0 auto 1.5rem; text-align: center; line-height: 0; }
@container (max-width: 727px) { .how-to-top-ad { display: none; } }
@media (min-width: 801px) {
  .how-to-guide-page .how-to-sidebar { display: flex; flex-direction: column; overflow: hidden; padding: 0; --ht-section-menu-height: min(280px, 48%); }
  .how-to-sidebar .how-to-guide-menu { flex: 1 1 0; min-height: 0; padding: 1.2rem; overflow: hidden; }
  .how-to-sidebar .how-to-section-menu { flex: 0 0 var(--ht-section-menu-height); min-height: var(--ht-section-menu-height); margin-top: 0; padding: 1rem 1.2rem; border-top: 1px solid var(--ht-border); background: var(--ht-surface); overflow: hidden; }
  .how-to-sidebar > details { display: flex; flex-direction: column; }
  .how-to-sidebar > details::details-content { display: contents; }
  .how-to-sidebar > details:not([open]) > nav { display: none; }
  .how-to-sidebar > details > summary { height: 32px; flex-shrink: 0; }
  .how-to-sidebar > details > nav { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 .25rem .5rem 0; }
}

/* Mobile guides read as a complete page, with topic browsing at the end. */
.how-to-mobile-browse { display: none; }
@media (max-width: 800px) {
  .how-to-sidebar .how-to-guide-menu, .how-to-controls-panel { display: none; }
  .how-to-sidebar .how-to-section-menu { margin-top: 0; }
  .how-to-step { scroll-margin-top: calc(var(--ht-header-height, 77px) + 1rem); }
  .how-to-mobile-browse { display: block; margin-top: 2rem; padding: 1.2rem; border: 1px solid var(--ht-border); border-radius: 1rem; background: var(--ht-surface); }
  .how-to-mobile-browse h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin: 1.5rem 0 .7rem; color: var(--ht-muted); }
  .how-to-mobile-browse a[aria-current] { color: var(--ht-accent); background: var(--ht-soft); font-weight: 700; }
}

/* Topic groups start collapsed and retain native keyboard/no-JS controls. */
.how-to-topic-group { margin-top: .65rem; }
.how-to-topic-group > summary { padding: .65rem .35rem; color: var(--ht-text); font-size: .85rem; font-weight: 700; cursor: pointer; }
.how-to-topic-group > summary:hover { background: var(--ht-soft); border-radius: .55rem; }
@media (min-width: 801px) and (max-width: 1000px) {
  :root { --ht-sidebar-width: 250px; }
}