/* =====================================================================
   HARD TRUTHS PORTAL — PORTAL COMPONENTS
   Loads ONLY on the six portal pages, always AFTER hms-global.css.

   hms-global.css is the master style guide — it owns the fonts, the tokens
   (--carbon, --paper, --volt, --signal, --sans …) and the shared components
   (.btn, .chip, .minichip, .dot, .eyebrow, .reveal). This file adds only what
   the portal needs on top. Do not redeclare a global token here.

   HOW IT'S ORGANIZED
     1. Tokens        — colors, fonts. TUNE THESE FIRST.
     2. Theme resets  — hides The7's header + kills page padding on portal pages.
     3. Shared        — wrappers, buttons, form fields (used across pages).
     4. Auth          — register / login / set-password cards.
     5. Dashboard     — the member home.
     6. Module        — curriculum lesson pages.
     7. Downloads     — the resource library.

   All rules are scoped under .htt-auth / .htt-dash / .htt-module / .htt-dl
   so nothing here can leak into the theme header, footer, or admin.
   ===================================================================== */
/* Fonts + tokens come from hms-global.css — do not re-import or redeclare here. */

/* ---------------------------------------------------------------------
   1. TOKENS
   The site's global palette (Appearance > Customize > Additional CSS)
   already defines the shared tokens at :root — --carbon, --paper, --volt
   (lime), --volt-deep, --signal (red/error), --graphite, --faint, --sans.
   We DO NOT redeclare those here, so this file always follows the global
   language. The portal only ADDS a few tokens the global set lacks
   (light body text on carbon, a lime hover, a visible field border on
   dark). Those are defined on the wrappers in section 3.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   2. THEME RESETS  ·  applied on portal pages via the wrappers below
   --------------------------------------------------------------------- */
body.htt-portal-page .masthead .header-bar,
body.htt-portal-page .dt-mobile-header{ display:none !important; }

/* FULL BLEED, THE HONEST WAY.
   The wrappers below used to force this with  width:100vw; margin-left:calc(50% - 50vw)
   — which measures against whatever container The7 drops the block into. The
   moment that container's width or offset changed, the page slid sideways and
   clipped its own left edge. Zero the theme's containers instead; the wrappers
   are then plain width:100% and can't drift. */
body.htt-portal-page #main{ padding:0 !important; }
body.htt-portal-page .wf-wrap{
  max-width:100% !important; width:100% !important;
  padding:0 !important; margin:0 !important;
}
body.htt-portal-page .wf-container-main,
body.htt-portal-page #content,
body.htt-portal-page .content{
  width:100% !important; max-width:100% !important;
  margin:0 !important; padding:0 !important; float:none !important;
}
/* The7's page-title bar renders a dark h1 on our carbon ground. */
body.htt-portal-page .page-title{ display:none !important; }
/* If a portal page ever gets built with WPBakery, don't let its gutters in. */
body.htt-portal-page .vc_row{ margin-left:0 !important; margin-right:0 !important; }
body.htt-portal-page .vc_column_container > .vc_column-inner{
  padding-left:0 !important; padding-right:0 !important;
}

/* ---------------------------------------------------------------------
   3. SHARED  ·  wrappers, buttons, form fields
   --------------------------------------------------------------------- */
.htt-auth, .htt-dash, .htt-module, .htt-dl{
  /* Portal-only additions — these names do NOT exist in the global palette,
     so nothing global is overwritten. Everything else (--carbon, --paper,
     --volt, --volt-deep, --signal, --graphite, --faint, --sans) comes from
     the global :root. */
  --volt-hi:#B4E024;      /* lime hover (matches global .btn--volt:hover) */
  --read:#CBCAC3;         /* light body text on carbon (global has no bright grey) */
  --field-line:#3B3B42;   /* visible input border on dark (global --line is for paper) */
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  background:var(--carbon);
  /* FULL BLEED — no 100vw hack.
     This used to be  width:100vw; margin-left:calc(50% - 50vw)  which measures
     against whatever container The7 drops the block into. The moment that
     container's width or offset changed, the whole page slid sideways and
     clipped. The theme's containers are zeroed for .htt-portal-page in
     section 2 of this file instead, so plain width:100% is correct and stable. */
  width:100%;
}
.htt-auth *, .htt-dash *, .htt-module *, .htt-dl *{ box-sizing:border-box; }
.htt-auth a, .htt-dash a, .htt-module a, .htt-dl a{ color:inherit; text-decoration:none; }
.htt-auth :focus-visible, .htt-dash :focus-visible,
.htt-module :focus-visible, .htt-dl :focus-visible{
  outline:3px solid var(--volt); outline-offset:2px; border-radius:4px;
}

/* Buttons: the theme colors links/buttons light. Our lime buttons need dark text,
   stated explicitly (and on :link/:visited/:hover so the theme can't win). */
.htt-dash .btn--signal, .htt-dash .btn--signal:link, .htt-dash .btn--signal:visited,
.htt-dash .btn--signal:hover, .htt-dash .btn--signal:active,
.htt-auth .btn, .htt-auth .btn:link, .htt-auth .btn:visited, .htt-auth .btn:hover,
.htt-module .btn, .htt-module .btn:link, .htt-module .btn:visited, .htt-module .btn:hover{
  color:var(--carbon) !important;
}
.htt-dash .btn--ghost, .htt-dash .btn--ghost:link, .htt-dash .btn--ghost:visited,
.htt-dash .btn--ghost:hover{ color:var(--paper) !important; }

/* Headings: the theme styles h1-h6 directly with dark colors, and a direct rule
   beats inheritance — so portal headings must state their color explicitly. */
.htt-dash h1, .htt-dash h2, .htt-dash h3, .htt-dash h4,
.htt-module h1, .htt-module h2, .htt-module h4,
.htt-dl h1, .htt-dl h2, .htt-dl h3, .htt-dl h4{ color:var(--paper); }
/* On the light cards, headings stay carbon. */
.htt-auth .card h1, .htt-auth .card h2, .htt-auth .card h3,
.htt-auth .card__title, .htt-auth .qsec__title{ color:var(--carbon); }

/* Hardened against theme overrides: The7 sets a global link color that can bleed
   into our pages. These raise specificity so portal links inherit correctly. */
.htt-auth a:link, .htt-auth a:visited, .htt-auth a:hover, .htt-auth a:active,
.htt-dash a:link, .htt-dash a:visited, .htt-dash a:hover, .htt-dash a:active,
.htt-module a:link, .htt-module a:visited, .htt-module a:hover, .htt-module a:active,
.htt-dl a:link, .htt-dl a:visited, .htt-dl a:hover, .htt-dl a:active{
  color:inherit; text-decoration:none;
}
.htt-auth, .htt-dash, .htt-module, .htt-dl{ color:var(--paper); }
.htt-auth .card, .htt-auth .card *{ color:inherit; }
.htt-auth .card__title{ color:var(--carbon); }
.htt-auth .card__sub{ color:var(--graphite); }
.htt-auth .card__eyebrow{ color:var(--volt-deep); }

.htt-auth{ color:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:70vh; padding:48px 20px; gap:22px; }
.htt-dash{ color:var(--paper); padding:56px 20px 72px; }
.htt-module{ color:var(--paper); padding:48px 20px 72px; }
.htt-dl{ color:var(--paper); padding:52px 20px 72px; }

/* brand lockup (shared) */
.htt-auth .brand, .htt-dash .brand{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:14px; color:var(--paper); }
.htt-auth .brand__x, .htt-dash .brand__x{ color:var(--volt); font-weight:700; font-size:16px; }

/* buttons (shared) */
.htt-auth .btn, .htt-dash .btn, .htt-module .btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:inherit; font-weight:500; font-size:14px; gap:8px;
  padding:13px 28px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  background:var(--volt); color:var(--carbon);
  transition:background .14s ease, border-color .14s ease, transform .14s ease;
}
.htt-auth .btn:hover, .htt-dash .btn:hover, .htt-module .btn:hover{ background:var(--volt-hi); }
.htt-auth .btn:active, .htt-dash .btn:active, .htt-module .btn:active{ transform:scale(.98); }
.htt-dash .btn, .htt-module .btn{ font-size:14px; padding:13px 28px; }
.htt-dash .btn--signal{ background:var(--volt); color:var(--carbon); }
.htt-dash .btn--ghost{ background:transparent; border-color:var(--field-line); color:var(--paper); }
.htt-dash .btn--ghost:hover{ border-color:var(--faint); background:rgba(255,255,255,.03); }

/* FORM FIELDS — stronger presence + clear focus (the "forms don't stand out" fix) */
.htt-auth .field{ display:flex; flex-direction:column; }
.htt-auth .field label{ font-weight:700; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--graphite); margin-bottom:8px; }
.htt-auth .field input, .htt-auth .field textarea{
  width:100%; font-family:inherit; font-size:16px; font-weight:500; color:var(--carbon);
  background:var(--white); border:2px solid var(--carbon); border-radius:12px;
  padding:15px 16px; resize:vertical; box-shadow:var(--input-shadow);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.htt-auth .field input::placeholder, .htt-auth .field textarea::placeholder{ color:#B4B2AB; }
.htt-auth .field input:focus, .htt-auth .field textarea:focus{
  outline:none; border-color:var(--volt-deep);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--volt) 45%,transparent);
}
/* Money input — $ sits inside the field, number formats with commas as you type */
.htt-auth .money{ position:relative; display:flex; align-items:center; }
.htt-auth .money__sym{
  position:absolute; left:16px; font-weight:700; font-size:16px;
  color:var(--graphite); pointer-events:none;
}
.htt-auth .money input{ padding-left:30px; }

.htt-auth .field .hint{ font-size:12px; font-weight:500; color:var(--faint); margin-top:7px; text-transform:none; letter-spacing:0; }

/* ---------------------------------------------------------------------
   4. AUTH  ·  register / login / set-password
   --------------------------------------------------------------------- */
.htt-auth .steps{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--faint); }
.htt-auth .steps b{ color:var(--volt); font-weight:700; }
.htt-auth .steps .sep{ width:22px; height:1.5px; background:var(--field-line); }

.htt-auth .card{ width:100%; max-width:440px; background:var(--paper); border-radius:20px; padding:clamp(28px,6vw,38px); box-shadow:var(--card-shadow); }
.htt-auth .card--wide{ max-width:560px; }

/* ---------------------------------------------------------------------
   REGISTER CARD — wide on desktop, ~90/10 on mobile.
   Scoped to .card--reg so login / set-password stay narrow (a 1000px card
   holding one password field would look absurd).
   --------------------------------------------------------------------- */
.htt-auth .card--reg{
  max-width:1000px;
  padding:clamp(28px,4vw,52px);
}
/* Step 1's four short fields would look lost stretched across 1000px —
   two columns keeps them intentional. */
@media (min-width:760px){
  .htt-auth .card--reg .form{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; align-items:start; }
  .htt-auth .card--reg .row2{ grid-column:1 / -1; }
  .htt-auth .card--reg .deposit,
  .htt-auth .card--reg .btn,
  .htt-auth .card--reg .fine{ grid-column:1 / -1; }
  .htt-auth .card--reg .btn{ justify-self:center; max-width:420px; }

  /* Step 2 is long-form — keep it single column, just roomier. */
  .htt-auth .card--reg-2 .form{ display:flex; flex-direction:column; }
  .htt-auth .card--reg-2 .qsec .row2{ display:grid; grid-template-columns:1fr 1fr; }
  /* goal checkboxes go 2-up on desktop instead of one long stack */
  .htt-auth .card--reg-2 .opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .htt-auth .card--reg-2 .btn{ align-self:center; max-width:420px; }

  .htt-auth .card--reg-done{ max-width:640px; }
}
/* Mobile: ~90/10 — card fills 90% of the viewport, 5% margin each side. */
@media (max-width:759px){
  .htt-auth .card--reg{ width:90%; max-width:90%; margin-inline:auto; }
}
.htt-auth .card__eyebrow{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--volt-deep); }
.htt-auth .card__eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.htt-auth .card__title{ font-weight:700; font-size:clamp(30px,7vw,40px); letter-spacing:-.03em; line-height:.98; margin:14px 0 0; color:var(--carbon); }
.htt-auth .card__sub{ font-size:14.5px; font-weight:500; color:var(--graphite); line-height:1.55; margin-top:14px; }
.htt-auth .card__sub a{ color:var(--volt-deep); font-weight:700; }

.htt-auth .form{ margin-top:26px; display:flex; flex-direction:column; gap:16px; }
.htt-auth .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.htt-auth .remember{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:500; color:var(--graphite); cursor:pointer; }
.htt-auth .remember input{ width:16px; height:16px; accent-color:var(--volt-deep); }

.htt-auth .links{ display:flex; justify-content:space-between; gap:12px; margin-top:18px; font-size:13px; font-weight:600; }
.htt-auth .links a{ color:var(--volt-deep); }
.htt-auth .links a:hover{ text-decoration:underline; }

.htt-auth .deposit{ display:flex; gap:10px; align-items:flex-start; border:2px solid var(--carbon); border-radius:12px; padding:12px 14px; font-size:12.5px; font-weight:500; color:var(--graphite); line-height:1.5; }
.htt-auth .deposit b{ color:var(--carbon); font-weight:700; }
.htt-auth .deposit__dot{ width:8px; height:8px; border-radius:50%; background:var(--volt-deep); flex:none; margin-top:5px; }

/* Questionnaire sections — each is a clearly separated block with a big header */
.htt-auth .qsec{ margin-top:14px; padding-top:26px; border-top:2px solid #E4E2DB; }
.htt-auth .qsec:first-of-type{ margin-top:4px; padding-top:0; border-top:0; }
.htt-auth .qsec__title{
  font-weight:700; font-size:clamp(21px,3.4vw,26px); letter-spacing:-.02em;
  line-height:1.15; color:var(--carbon); margin:0 0 6px;
}
.htt-auth .qsec__sub{ font-size:13px; font-weight:500; color:var(--graphite); line-height:1.5; margin:0 0 16px; }
.htt-auth .qsec .field + .field{ margin-top:14px; }

.htt-auth .qblock{ margin-top:8px; }
.htt-auth .qlabel{ font-weight:600; font-size:15.5px; letter-spacing:-.2px; color:var(--carbon); line-height:1.3; margin-bottom:4px; }
.htt-auth .qhint{ font-size:12.5px; color:var(--graphite); margin-bottom:12px; line-height:1.5; }
.htt-auth .opts{ display:flex; flex-direction:column; gap:8px; }
.htt-auth .opt{ display:flex; align-items:center; gap:11px; background:var(--white); border:2px solid var(--carbon); border-radius:12px; padding:13px 15px; font-size:14.5px; font-weight:500; color:var(--carbon); cursor:pointer; transition:background .12s ease; }
.htt-auth .opt:hover{ background:#EFEEE9; }
.htt-auth .opt input{ width:18px; height:18px; flex:none; accent-color:var(--volt-deep); }
/* Event picker — one row per stop, plus the free-tier option. */
.htt-auth .opts--events{ gap:9px; }
.htt-auth .evopt{
  display:flex; align-items:center; gap:13px; cursor:pointer;
  background:var(--white); border:2px solid #DEDCD5; border-radius:12px;
  padding:13px 15px; transition:border-color .12s ease, background .12s ease;
}
.htt-auth .evopt:hover{ border-color:var(--carbon); }
.htt-auth .evopt.is-picked{ border-color:var(--carbon); background:#FBFAF7; }
.htt-auth .evopt input{ width:18px; height:18px; flex:none; accent-color:var(--volt-deep); }
.htt-auth .evopt__body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.htt-auth .evopt__body b{ font-weight:700; font-size:14.5px; color:var(--carbon); letter-spacing:-.2px; }
.htt-auth .evopt__body > span{ font-size:12.5px; color:var(--graphite); margin-top:2px; line-height:1.4; }
.htt-auth .evopt__left{
  align-self:flex-start; margin-top:6px;
  font-weight:700; font-size:9.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--signal); background:var(--signal-tint); border-radius:999px; padding:3px 8px;
}
.htt-auth .evopt__price{
  flex:none; font-weight:700; font-size:14px; color:var(--carbon); letter-spacing:-.2px;
}
.htt-auth .evopt--free{ border-style:dashed; }
.htt-auth .evopt--free .evopt__price{ color:var(--volt-deep); }

.htt-auth .divider{ height:1px; background:#DEDCD5; margin:6px 0 2px; }

.htt-auth .fine{ font-size:12px; color:var(--graphite); text-align:center; line-height:1.5; margin-top:14px; }
.htt-auth .form-err{ background:color-mix(in srgb,var(--signal) 12%,transparent); border:1.5px solid var(--signal); color:var(--signal); font-weight:600; font-size:13px; padding:12px 14px; border-radius:12px; margin-bottom:4px; line-height:1.5; }
.htt-auth .form-err a{ color:var(--volt-deep); font-weight:700; text-decoration:underline; }
.htt-auth .form-ok{ background:color-mix(in srgb,var(--volt) 16%,transparent); border:1.5px solid var(--volt-deep); color:var(--volt-deep); font-weight:600; font-size:13px; padding:12px 14px; border-radius:12px; margin-bottom:4px; }
.htt-auth .bigtick{ width:60px; height:60px; border-radius:50%; background:var(--volt); color:var(--carbon); display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; margin-bottom:20px; }
.htt-auth .testlink{ margin-top:22px; padding:14px; border:1.5px dashed var(--carbon); border-radius:12px; font-size:12px; line-height:1.6; color:var(--graphite); word-break:break-all; }
.htt-auth .testlink a{ color:var(--volt-deep); font-weight:700; text-decoration:underline; }
.htt-auth .legal{ font-size:11.5px; color:var(--faint); text-align:center; max-width:440px; line-height:1.6; }
@media(max-width:400px){ .htt-auth .row2{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------
   5. DASHBOARD
   --------------------------------------------------------------------- */
.htt-dash .wrap{ max-width:820px; margin:0 auto; }
.htt-dash .top{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:34px; }
.htt-dash .logout{ font-size:13px; font-weight:600; color:var(--read); }
.htt-dash .logout:hover{ color:var(--paper); }
.htt-dash .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--volt); }
.htt-dash .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.htt-dash h1{ color:var(--paper); font-weight:700; font-size:clamp(30px,6vw,48px); letter-spacing:-.035em; line-height:1; margin:14px 0 0; }
.htt-dash .lead{ font-size:15px; font-weight:500; color:var(--read); margin-top:14px; }
.htt-dash .notice{ display:flex; gap:10px; align-items:flex-start; background:color-mix(in srgb,var(--volt) 14%,transparent); border:1.5px solid var(--volt-deep); color:var(--paper); border-radius:14px; padding:14px 16px; font-size:13.5px; line-height:1.5; margin:26px 0 0; }
.htt-dash .notice b{ color:var(--volt); }
/* Upcoming event — the headline callout on the dashboard */
.htt-dash .upnext{
  margin-top:30px; border-radius:20px; padding:22px 24px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--volt) 10%,var(--carbon-2)) 0%, var(--carbon-2) 100%);
  border:1px solid var(--volt-deep);
}
.htt-dash .upnext--none{ background:var(--carbon-2); border-color:var(--carbon-3); }
.htt-dash .upnext__label{ font-weight:700; font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--volt); margin-bottom:14px; }
.htt-dash .upnext__row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.htt-dash .upnext__date{
  flex:none; width:62px; height:62px; border-radius:14px; background:var(--volt);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.htt-dash .upnext__mon{ font-size:10px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--carbon); }
.htt-dash .upnext__day{ font-size:23px; font-weight:700; line-height:1; color:var(--carbon); letter-spacing:-.6px; }
.htt-dash .upnext__body{ flex:1; min-width:0; }
.htt-dash .upnext__title{ font-weight:700; font-size:17px; letter-spacing:-.3px; color:var(--paper); line-height:1.25; }
.htt-dash .upnext__where{ font-size:14px; font-weight:600; color:var(--paper); margin-top:4px; }
.htt-dash .upnext__when{ font-size:13px; color:var(--read); margin-top:3px; }
.htt-dash .upnext__pill{ flex:none; font-weight:700; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; padding:6px 12px; border-radius:999px; border:1px solid var(--volt-deep); color:var(--volt); }
.htt-dash .upnext__empty{ color:var(--faint); font-size:14px; margin:0; }

/* "Another stop" — a member booking a second event from the dashboard. */
.htt-dash .upnext--more{ background:var(--carbon-2); border-color:var(--carbon-3); margin-top:16px; }
.htt-dash .morestop{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.htt-dash .morestop__sel{
  flex:1; min-width:220px; font-family:inherit; font-size:14px; font-weight:500;
  color:var(--paper); background:var(--carbon); border:1.5px solid var(--carbon-3);
  border-radius:10px; padding:11px 13px; cursor:pointer;
}
.htt-dash .morestop__sel:focus{ outline:none; border-color:var(--volt); }
.htt-dash .morestop__btn{ flex:none; }
@media(max-width:560px){
  .htt-dash .morestop{ flex-direction:column; align-items:stretch; }
  .htt-dash .morestop__btn{ width:100%; }
}

/* Disabled action (curriculum not live yet) */
.htt-dash .btn--disabled{
  background:var(--carbon-2); border:2px solid var(--carbon-3); color:var(--faint) !important;
  cursor:not-allowed; pointer-events:none;
}
.htt-dash .actions__note{ font-size:12.5px; color:var(--faint); margin-top:12px; }

.htt-dash .notice--gate{ background:rgba(224,73,43,.10); border-color:var(--signal); }
.htt-dash .notice--gate b{ color:var(--signal); }

.htt-dash .grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:34px; }
@media(max-width:720px){ .htt-dash .grid{ grid-template-columns:1fr; } }
.htt-dash .card{ background:var(--carbon-2); border:1px solid var(--carbon-3); border-radius:20px; padding:26px; }
.htt-dash .card__label{ font-weight:600; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--volt); margin-bottom:16px; }
.htt-dash .pct{ font-weight:700; font-size:40px; letter-spacing:-1.5px; line-height:1; }
.htt-dash .pct span{ font-size:15px; font-weight:600; color:var(--faint); }
.htt-dash .bar{ height:8px; border-radius:999px; background:var(--carbon-3); margin:16px 0 22px; overflow:hidden; }
.htt-dash .bar>span{ display:block; height:100%; background:var(--volt); border-radius:999px; }
/* Per-course progress block inside the progress card */
.htt-dash .cblock{ margin-bottom:22px; }
.htt-dash .cblock:last-of-type{ margin-bottom:0; }
.htt-dash .cblock__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:9px; }
.htt-dash .cblock__name{ font-weight:700; font-size:14px; color:var(--paper) !important; letter-spacing:-.2px; }
.htt-dash .cblock__name:hover{ color:var(--volt) !important; }
.htt-dash .cblock__pct{ font-weight:700; font-size:13px; color:var(--volt); flex:none; }
.htt-dash .cblock .bar{ margin:0 0 12px; }
.htt-dash .milestones--sys{ margin-top:18px; padding-top:16px; border-top:1px solid var(--carbon-3); }
.htt-dash .ms__label a{ color:inherit !important; }
.htt-dash .ms__label a:hover{ color:var(--volt) !important; }

.htt-dash .milestones{ display:flex; flex-direction:column; gap:2px; }
.htt-dash .ms{ display:flex; align-items:center; gap:11px; padding:7px 0; font-size:13.5px; }
.htt-dash .ms .tick{ width:18px; height:18px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; }
.htt-dash .ms__label{ flex:1; min-width:0; }

/* done — earned */
.htt-dash .ms--done .tick{ background:var(--volt); color:var(--carbon); }
.htt-dash .ms--done{ color:var(--paper); }

/* todo — available, not yet done */
.htt-dash .ms--todo .tick{ background:var(--carbon-3); color:var(--carbon-3); }
.htt-dash .ms--todo{ color:var(--faint); }

/* coming soon — "worn": dimmed and desaturated, visibly different from a
   to-do. The lesson exists in the plan but isn't published yet. */
.htt-dash .ms--soon{ color:#6E6C64; }
.htt-dash .ms--soon .tick{
  background:transparent; border:1px dashed #4A4A50; color:transparent;
}
.htt-dash .ms--soon .ms__label{ opacity:.75; }
.htt-dash .ms__soon{
  flex:none; font-weight:600; font-size:9px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--volt-deep); background:rgba(198,241,53,.10);
  border:1px solid rgba(198,241,53,.22); border-radius:999px; padding:3px 8px;
}
.htt-dash .goal{ padding:14px 0; border-bottom:1px solid var(--carbon-3); }
.htt-dash .goal:last-child{ border-bottom:0; padding-bottom:0; }
.htt-dash .goal__q{ font-weight:700; font-size:12px; color:var(--read); margin-bottom:5px; }
.htt-dash .goal__a{ font-size:14px; font-weight:500; color:var(--paper); line-height:1.5; }
.htt-dash .goal__a.empty{ color:var(--faint); font-style:italic; }
.htt-dash .card__foot{ margin-top:18px; font-size:12.5px; color:var(--faint); }
.htt-dash .card__foot a{ color:var(--volt-deep); font-weight:700; }
.htt-dash .actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }

/* ---------------------------------------------------------------------
   6. MODULE
   --------------------------------------------------------------------- */
.htt-module .wrap{ max-width:840px; margin:0 auto; }
.htt-module .back{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--read); margin-bottom:26px; }
.htt-module .back:hover{ color:var(--paper); }
.htt-module .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--volt); }
.htt-module .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.htt-module h1{ color:var(--paper); font-weight:700; font-size:clamp(30px,5.5vw,48px); letter-spacing:-.035em; line-height:1; margin:16px 0 0; }
.htt-module .player{ position:relative; margin-top:30px; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:radial-gradient(120% 120% at 30% 20%,#1f1f24 0%,#121214 55%,#0c0c0d 100%); border:1px solid var(--carbon-3); display:flex; align-items:center; justify-content:center; }
.htt-module .player__play{ width:74px; height:74px; border-radius:50%; background:var(--volt); color:var(--carbon); display:flex; align-items:center; justify-content:center; font-size:26px; padding-left:5px; }
.htt-module .video-note{ font-size:12px; color:var(--faint); margin-top:10px; text-align:center; }
.htt-module .body{ margin-top:40px; }
.htt-module .body h2{ font-weight:700; font-size:clamp(22px,3.2vw,30px); letter-spacing:-.02em; line-height:1.15; margin:38px 0 14px; }
.htt-module .body h3{ font-weight:700; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--volt); margin:30px 0 12px; }
.htt-module .body p{ font-size:16px; color:var(--read); line-height:1.7; margin:0 0 16px; }
.htt-module .body strong{ color:var(--paper); font-weight:700; }
.htt-module .body ul, .htt-module .body ol{ color:var(--read); font-size:15px; line-height:1.7; margin:0 0 16px 20px; }
.htt-module .body img{ max-width:100%; border-radius:14px; }
/* Empty module — content not written yet */
.htt-module .mod-empty{ margin-top:34px; background:var(--carbon-2); border:1px dashed var(--carbon-3); border-radius:18px; padding:34px; text-align:center; }
.htt-module .mod-empty__label{ font-weight:700; font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--volt); margin-bottom:10px; }
.htt-module .mod-empty p{ color:var(--read); font-size:14.5px; margin:0; }

.htt-module .complete{ margin-top:44px; padding-top:30px; border-top:1px solid var(--carbon-3); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.htt-module form{ margin:0; }
.htt-module .done-badge{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:14px; color:var(--volt); }
.htt-module .done-badge .tick{ width:22px; height:22px; border-radius:50%; background:var(--volt); color:var(--carbon); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }

/* ---------------------------------------------------------------------
   7. DOWNLOADS  ·  resource library
   --------------------------------------------------------------------- */
.htt-dl .wrap{ max-width:820px; margin:0 auto; }
.htt-dl .back{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--read); margin-bottom:26px; }
.htt-dl .back:hover{ color:var(--paper); }
.htt-dl .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--volt); }
.htt-dl .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.htt-dl h1{ color:var(--paper); font-weight:700; font-size:clamp(30px,6vw,48px); letter-spacing:-.035em; line-height:1; margin:14px 0 0; }
.htt-dl .lead{ font-size:15.5px; font-weight:500; color:var(--read); line-height:1.6; margin-top:14px; max-width:620px; }

/* search — brighter border + signal focus (forms-stand-out fix) */
.htt-dl .searchbar{ margin-top:30px; position:relative; }
.htt-dl .searchbar input{ width:100%; font-family:inherit; font-size:15px; font-weight:500; color:var(--paper); background:var(--carbon-2); border:2px solid var(--field-line); border-radius:14px; padding:15px 16px 15px 44px; transition:border-color .12s ease, box-shadow .12s ease; }
.htt-dl .searchbar input::placeholder{ color:var(--faint); }
.htt-dl .searchbar input:focus{ outline:none; border-color:var(--volt); box-shadow:0 0 0 4px color-mix(in srgb,var(--volt) 25%,transparent); }
.htt-dl .searchbar .ic{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:15px; }
.htt-dl .noresults{ display:none; color:var(--faint); font-size:14px; padding:30px 0; }

.htt-dl .seclabel{ font-weight:600; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--volt); margin:38px 0 16px; }
.htt-dl .files{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:640px){ .htt-dl .files{ grid-template-columns:1fr; } }
.htt-dl .file{ display:flex; align-items:center; gap:16px; background:var(--carbon-2); border:1px solid var(--carbon-3); border-radius:16px; padding:18px; transition:border-color .15s ease, transform .15s ease; }
.htt-dl .file:hover{ border-color:var(--faint); transform:translateY(-2px); }
.htt-dl .file__ic{ width:48px; height:48px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:11px; background:color-mix(in srgb,var(--volt) 15%,transparent); color:var(--volt); }
.htt-dl .file__ic--xlsx{ background:color-mix(in srgb,#3fae6b 22%,transparent); color:#8fe3ad; }
.htt-dl .file__ic--zip{ background:color-mix(in srgb,#8a7bd8 22%,transparent); color:#c3b8f0; }
.htt-dl .file__body{ flex:1; min-width:0; }
.htt-dl .file__t{ font-weight:700; font-size:14.5px; line-height:1.25; }
.htt-dl .file__s{ font-size:12.5px; color:var(--read); margin-top:4px; line-height:1.4; }
.htt-dl .file__meta{ font-size:11px; color:var(--faint); margin-top:6px; }
.htt-dl .file__dl{ flex:none; width:38px; height:38px; border-radius:50%; background:var(--carbon-3); color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:16px; transition:background .15s ease, color .15s ease; }
.htt-dl .file:hover .file__dl{ background:var(--volt); color:var(--carbon); }
.htt-dl .vid{ display:flex; flex-direction:column; background:var(--carbon-2); border:1px solid var(--carbon-3); border-radius:16px; overflow:hidden; transition:border-color .15s ease, transform .15s ease; }
.htt-dl .vid:hover{ border-color:var(--faint); transform:translateY(-2px); }
.htt-dl .vid__thumb{ aspect-ratio:16/9; background:radial-gradient(120% 120% at 30% 20%,#1f1f24 0%,#121214 55%,#0c0c0d 100%); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--carbon-3); }
.htt-dl .vid__play{ width:52px; height:52px; border-radius:50%; background:var(--volt); color:var(--carbon); display:flex; align-items:center; justify-content:center; font-size:18px; padding-left:3px; }
.htt-dl .vid__body{ padding:16px 18px 18px; }
.htt-dl .vid__t{ font-weight:700; font-size:14.5px; line-height:1.25; }
.htt-dl .vid__s{ font-size:12.5px; color:var(--read); margin-top:4px; line-height:1.4; }
.htt-dl .vid__meta{ font-size:11px; color:var(--faint); margin-top:6px; }
.htt-dl .tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.htt-dl .tag{ font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--faint); border:1px solid var(--carbon-3); border-radius:999px; padding:3px 8px; }
.htt-dl .foot-note{ font-size:12.5px; color:var(--faint); margin-top:34px; line-height:1.6; }
.htt-dl .empty{ color:var(--faint); font-size:14px; margin-top:30px; }

/* =====================================================================
   8. MOBILE  ·  small-screen tuning for every portal page
   ===================================================================== */

/* --- Phones (≤560px) --- */
@media (max-width:560px){

  /* tighter page padding — reclaim horizontal space */
  .htt-auth{ padding:32px 16px; gap:18px; }
  .htt-dash{ padding:36px 16px 56px; }
  .htt-module{ padding:32px 16px 56px; }
  .htt-dl{ padding:36px 16px 56px; }

  /* headlines shouldn't dominate a small screen */
  .htt-dash h1, .htt-dl h1{ font-size:30px; }
  .htt-module h1{ font-size:28px; }

  /* cards: less inset so content isn't squeezed */
  .htt-auth .card{ padding:24px 20px; border-radius:16px; }
  .htt-dash .card, .htt-dash .upnext{ padding:20px; border-radius:16px; }

  /* upcoming event: stack, and let the pill sit under the details */
  .htt-dash .upnext__row{ gap:14px; }
  .htt-dash .upnext__date{ width:54px; height:54px; border-radius:12px; }
  .htt-dash .upnext__day{ font-size:20px; }
  .htt-dash .upnext__title{ font-size:16px; }
  .htt-dash .upnext__where{ font-size:13.5px; }
  .htt-dash .upnext__pill{ order:3; margin-left:72px; }

  /* buttons go full-width and stack — easier thumb targets */
  .htt-dash .actions{ flex-direction:column; gap:10px; }
  .htt-dash .actions .btn, .htt-dash .actions .btn--disabled{ width:100%; }
  .htt-module .complete{ flex-direction:column; align-items:stretch; gap:14px; }
  .htt-module .complete .btn{ width:100%; }

  /* questionnaire sections */
  .htt-auth .qsec__title{ font-size:20px; }
  .htt-auth .qsec{ padding-top:22px; }

  /* downloads: single column already, but tighten the cards */
  .htt-dl .file{ padding:14px; gap:12px; }
  .htt-dl .file__ic{ width:42px; height:42px; }
  .htt-dl .searchbar input{ font-size:16px; }  /* ≥16px stops iOS zoom-on-focus */

  /* dashboard header row */
  .htt-dash .top{ margin-bottom:24px; }
}

/* --- Small phones (≤380px) --- */
@media (max-width:380px){
  .htt-dash h1, .htt-dl h1{ font-size:26px; }
  .htt-auth .card__title{ font-size:26px; }
  .htt-dash .upnext__pill{ margin-left:0; }
  .htt-dl .file__meta, .htt-dl .file__s{ font-size:12px; }
}

/* iOS zooms the page when a focused input is under 16px — keep all inputs at 16 */
@media (max-width:768px){
  .htt-auth .field input, .htt-auth .field textarea, .htt-dl .searchbar input{ font-size:16px; }
}

/* =====================================================================
   9. BRAND COMPONENT ALIASES
   The landing page / global CSS defines .chip, .minichip, .btn--volt,
   .btn--primary, .btn--outline, .btn--ghost, .dot and .eyebrow. Those are
   the brand's names — the portal should speak the same vocabulary rather
   than invent parallel ones. These aliases map the portal's buttons onto
   the brand's modifiers so either name works inside a portal wrapper.
   ===================================================================== */

/* Button modifiers, matching the global system */
.htt-auth .btn--volt, .htt-dash .btn--volt, .htt-module .btn--volt{
  background:var(--volt); color:var(--carbon) !important;
}
.htt-auth .btn--volt:hover, .htt-dash .btn--volt:hover, .htt-module .btn--volt:hover{ background:#B4E024; }
.htt-auth .btn--primary, .htt-dash .btn--primary, .htt-module .btn--primary{
  background:var(--carbon); color:var(--paper) !important; border-color:transparent;
}
.htt-auth .btn--primary:hover, .htt-dash .btn--primary:hover{ background:#222226; }
.htt-auth .btn--outline, .htt-dash .btn--outline{
  background:var(--white); border-color:var(--line); color:var(--carbon) !important;
}
.htt-auth .btn--outline:hover, .htt-dash .btn--outline:hover{ border-color:var(--graphite); }

/* .btn--signal in the portal means "the lime CTA" — the global system calls
   that .btn--volt. Keep both working so nothing breaks. */
.htt-dash .btn--signal{ background:var(--volt); color:var(--carbon) !important; }
.htt-dash .btn--signal:hover{ background:#B4E024; }

/* Chips — brand spec */
.htt-auth .chip, .htt-dash .chip, .htt-module .chip, .htt-dl .chip{
  display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:11px;
  letter-spacing:1.5px; padding:7px 15px; border-radius:999px; white-space:nowrap;
}
.htt-dash .chip--volt, .htt-auth .chip--volt{ background:var(--volt); color:var(--carbon); }
.htt-dash .chip--ghost, .htt-auth .chip--ghost{ background:rgba(247,246,243,.1); color:var(--paper); }
.htt-auth .chip--outline{ background:var(--white); border:1px solid var(--line); color:var(--graphite); }

/* Mini-chips — the data variant used on ledger cards */
.htt-dash .minichip, .htt-dl .minichip, .htt-auth .minichip{
  font-weight:600; font-size:10px; letter-spacing:.8px; padding:5px 10px;
  border-radius:999px; background:#EFEEEA; color:var(--graphite);
}
.htt-dl .minichip--win, .htt-dash .minichip--win{ background:var(--volt-tint); color:var(--volt-deep); }
.htt-dl .minichip--walk, .htt-dash .minichip--walk{ background:var(--signal-tint); color:var(--signal); }

/* The brand's dot */
.htt-auth .dot, .htt-dash .dot, .htt-module .dot, .htt-dl .dot{
  width:6px; height:6px; border-radius:50%; background:currentColor; flex:none;
}

/* Scroll reveal — matches the landing page's .reveal → .in */
.htt-dash .reveal, .htt-dl .reveal, .htt-module .reveal{
  opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;
}
.htt-dash .reveal.in, .htt-dl .reveal.in, .htt-module .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .htt-dash .reveal, .htt-dl .reveal, .htt-module .reveal{ opacity:1; transform:none; }
}

/* =====================================================================
   10. EMBEDDED AUTH
   The Academy page embeds the REAL forms — same markup, handler and nonce as
   /register/ and /login/. These modifiers strip the portal's full-bleed carbon
   ground so the card sits inside a marketing layout, and compress it enough to
   clear the fold without scrolling.
   ===================================================================== */
.htt-auth--embed{
  width:auto; margin-left:0; margin-right:0;
  min-height:0; padding:0; gap:0; background:transparent;
  display:block;
}
.htt-auth--embed .card{
  max-width:100%; padding:24px;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.55);
}
.htt-auth--embed .legal{ display:none; }

/* ---- TABS ---- */
.htt-auth .authtabs{
  display:flex; background:#EDECE7; border:1px solid #DEDCD5;
  border-radius:999px; padding:4px; margin-bottom:18px;
}
.htt-auth .authtab{
  flex:1; text-align:center; font-family:inherit; font-weight:600; font-size:13px;
  padding:9px; border-radius:999px; border:none; background:transparent;
  color:var(--graphite); cursor:pointer; transition:background .14s ease, color .14s ease;
}
.htt-auth .authtab:hover{ color:var(--carbon); }
.htt-auth .authtab.is-active{ background:var(--carbon); color:var(--paper); }

/* ---- PANES ---- */
.htt-auth .authpane{ display:none; }
.htt-auth .authpane.is-active{ display:block; }

/* ---- COMPACT: fit the fold ----
   Smaller heading, tighter gaps, two-up on name AND email/phone, and the
   deposit note trimmed to one line. Inputs stay 16px so iOS doesn't zoom. */
.htt-auth .card__title--sm{ font-size:23px; letter-spacing:-.5px; line-height:1.1; margin:0; }
.htt-auth .card__sub--sm{ font-size:13px; margin-top:7px; }
.htt-auth .form--tight{ margin-top:16px; gap:11px; }
.htt-auth .form--tight .field label{ font-size:9.5px; letter-spacing:1px; margin-bottom:5px; }
.htt-auth .form--tight .field input{ padding:11px 13px; font-size:16px; border-width:1.5px; border-radius:10px; }
.htt-auth .form--tight .row2{ gap:11px; }
.htt-auth .form--tight .btn{ margin-top:2px; padding:13px 24px; }
.htt-auth .form--tight .fine{ margin-top:8px; font-size:11.5px; }
.htt-auth .form--tight .fine a{ color:var(--volt-deep); font-weight:600; text-decoration:underline; }
.htt-auth .form--tight .remember{ font-size:12.5px; }
/* Select — matched to the text inputs. */
.htt-auth .htt-select{
  width:100%; font-family:inherit; font-size:16px; font-weight:500;
  color:var(--carbon); background:var(--white);
  border:1.5px solid var(--carbon); border-radius:10px;
  padding:11px 13px; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%230C0C0D' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
  padding-right:34px;
}
.htt-auth .htt-select:focus{
  outline:none; border-color:var(--volt-deep);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--volt) 40%,transparent);
}
.htt-auth .hint--inline{ display:inline; margin:0; text-transform:none; letter-spacing:0; }
.htt-auth .deposit--tight{ padding:10px 12px; font-size:11.5px; line-height:1.45; border-width:1.5px; }

/* The embedded card must never inherit the register page's desktop 2-col grid. */
@media (min-width:760px){
  .htt-auth--embed .card--auth .form{ display:flex; flex-direction:column; }
  .htt-auth--embed .card--auth .btn{ max-width:100%; justify-self:auto; }
}
/* On short screens, shave further so it still clears the fold. */
@media (max-height:820px) and (min-width:880px){
  .htt-auth--embed .card{ padding:20px; }
  .htt-auth .card__title--sm{ font-size:21px; }
  .htt-auth .form--tight{ gap:9px; }
  .htt-auth .form--tight .field input{ padding:10px 12px; }
}

/* =====================================================================
   11. ACADEMY — module + course pages
   The7 renders a .page-title bar with a dark h1; on our carbon ground that
   reads as black-on-black. Hidden here, same as on the portal pages.
   ===================================================================== */
body.single-htt_module .page-title,
body.tax-htt_course .page-title{ display:none !important; }

/* live Vimeo player (replaces the old placeholder tile) */
.htt-module .player--live{ background:#000; border:1px solid var(--carbon-3); }
.htt-module .player--live iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.htt-module .meta-pill--done{ border-color:var(--volt-deep); color:var(--volt); }

/* ---- LOCKED STATE ----
   Locked lessons show what they are rather than 404ing — people should be able
   to see what they're missing. Nothing gated is rendered: no video, no body. */
.htt-module .lockbox{
  margin-top:32px; text-align:center; padding:44px 32px; border-radius:20px;
  background:var(--carbon-2); border:1px solid var(--carbon-3);
}
.htt-module .lockbox__ic{ font-size:26px; margin-bottom:14px; opacity:.85; }
.htt-module .lockbox h2{ font-weight:700; font-size:clamp(20px,2.6vw,26px); letter-spacing:-.02em; color:var(--paper); margin:0; }
.htt-module .lockbox p{ font-size:14.5px; color:var(--read); margin:12px auto 0; max-width:460px; line-height:1.6; }
.htt-module .lockbox__ctas{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px; }

/* ---- ATTACHED RESOURCES ---- */
.htt-module .reslist{ display:flex; flex-direction:column; gap:10px; }
.htt-module .res{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:var(--carbon-2); border:1px solid var(--carbon-3); border-radius:14px;
  transition:border-color .15s ease, transform .15s ease;
}
.htt-module .res:hover{ border-color:var(--faint); transform:translateY(-2px); }
.htt-module .res[aria-disabled="true"]{ opacity:.55; pointer-events:none; }
.htt-module .res__ic{
  width:44px; height:44px; flex:none; border-radius:11px; display:flex;
  align-items:center; justify-content:center; font-weight:700; font-size:10.5px;
  background:color-mix(in srgb,var(--volt) 15%,transparent); color:var(--volt);
}
.htt-module .res__body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.htt-module .res__body b{ font-weight:700; font-size:14.5px; color:var(--paper); }
.htt-module .res__body span{ font-size:11.5px; color:var(--faint); margin-top:3px; }
.htt-module .res__go{
  flex:none; width:36px; height:36px; border-radius:50%; background:var(--carbon-3);
  color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:15px;
  transition:background .15s ease, color .15s ease;
}
.htt-module .res:hover .res__go{ background:var(--volt); color:var(--carbon); }

/* ---- PREV / NEXT ---- */
.htt-module .modnav{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; }

/* ---- COURSE PAGE ---- */
.htt-module .cprog{ margin-top:26px; }
.htt-module .cprog__bar{ height:8px; border-radius:999px; background:var(--carbon-3); overflow:hidden; }
.htt-module .cprog__bar > span{ display:block; height:100%; background:var(--volt); border-radius:999px; }
.htt-module .cprog__txt{ font-size:12.5px; color:var(--faint); margin-top:9px; }

.htt-module .mlist{ display:flex; flex-direction:column; gap:10px; }
.htt-module .mrow{
  display:flex; align-items:center; gap:16px; padding:16px 18px;
  background:var(--carbon-2); border:1px solid var(--carbon-3); border-radius:14px;
  transition:border-color .15s ease, transform .15s ease;
}
.htt-module .mrow:hover{ border-color:var(--faint); transform:translateY(-2px); }
.htt-module .mrow--locked{ opacity:.6; pointer-events:none; }
.htt-module .mrow__n{
  width:34px; height:34px; flex:none; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px; background:var(--carbon-3); color:var(--faint);
}
.htt-module .mrow__body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.htt-module .mrow__body b{ font-weight:700; font-size:15px; color:var(--paper); letter-spacing:-.2px; }
.htt-module .mrow__body span{ font-size:12.5px; color:var(--read); margin-top:3px; line-height:1.5; }
.htt-module .mrow__tag{ flex:none; font-size:12px; font-weight:600; color:var(--faint); }