/* ============================================================================
   v1-refined — "The Shelf, Refined": a calmer, lower-load layer over the shared
   FE system. Loaded AFTER figma.css on every v1-refined page. It does four jobs,
   each tied to an audit finding:

   (1) CALM THE CATALOG CARD  (Nielsen #8 aesthetic-minimalist; recognition-not-recall)
       The shared .fe-ccard renders a full-bleed saturated gradient thumb with a giant
       monogram, so at Library scale ~5 shelves read as a "wall of color" where every
       tile is equal weight and color carries no meaning. Refined card = a white,
       content-forward card: a quiet category-TINTED panel with a small accent monogram,
       and the course title / scholar / length as the primary dark content. Saturated
       gradient is reserved for ONE job: the Home resume hero + one featured lead per
       shelf (.th.featured) — so color becomes a signal again, not noise.

   (2) ONE RESTRAINED HOVER  (Walter: Pleasurable tier — "still" -> "considered")
       A single consistent ~1px lift + soft shadow across every interactive card,
       gated behind reduce-motion (OS pref OR the in-app Settings toggle).

   (3) THE RESUME HERO + GLOBAL CONTINUE PILL  (squint test; resume-from-anywhere)
       Chrome for Home's single above-the-fold anchor and the topbar Continue pill
       that refined.js injects on secondary pages.

   (4) THE PEAK MOMENT  (Peak-End Rule — finishing a lesson)
       The .lesson-done acknowledgement: a calm checkmark draw + a brief category-hue
       warm on the completion card. Copy-only when reduce-motion is set.

   Accent stays v1 blue (--fe-info). Nothing here touches shared/*.
   ========================================================================== */

:root{
  /* Soft category tints (calm card surface) + saturated accents (the one color cue).
     Derived from the --grad-* stops in tokens.css; keys match seed.js category.grad. */
  --tint-fiqh:#f1ecfe;         --acc-fiqh:#7c3aed;
  --tint-spiritual:#e3f5f3;    --acc-spiritual:#0d9488;
  --tint-belief:#e8f0fd;       --acc-belief:#2563eb;
  --tint-contemporary:#fbf0dd; --acc-contemporary:#b45309;
  --tint-historical:#fce8ed;   --acc-historical:#be123c;
  --tint-worship:#eee8fd;      --acc-worship:#6d28d9;
  --tint-sciences:#eaeef3;     --acc-sciences:#475569;

  --fe-hover-lift:-2px;
}

/* ----------------------------------------------------------------------------
   (1) CALM CATALOG CARD
   Works with the refined card markup the page JS emits:
     <a class="fe-ccard"><div class="th cat-<grad>"><span class="mono">AE</span></div>
        <div class="ttl">Title</div><div class="meta">…</div><span class="fe-cta">…</span></a>
   The .th is now a quiet tinted panel (no inline gradient, no dark scrim, no white
   uppercase title); the monogram is small and in the category accent.
   -------------------------------------------------------------------------- */
.fe-ccard{ background:var(--fe-white); border:1px solid var(--fe-border); }
.fe-ccard .th{
  height:60px; border-radius:12px; padding:0 14px;
  display:flex; align-items:center; gap:11px;
  color:var(--fe-text-primary); overflow:hidden;
  background:var(--fe-bg);                 /* default tint; cat-* overrides below */
}
.fe-ccard .th::after{ content:none !important; }   /* remove the dark legibility scrim */
.fe-ccard .th h3{ display:none; }                  /* title now lives only in .ttl (no dup) */
.fe-ccard .th .mono{
  flex:none; width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; letter-spacing:.01em;
  color:var(--fe-white); background:var(--acc-fiqh);
}
.fe-ccard .th .cat-label{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--fe-text-tertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fe-ccard .ttl{ margin-top:11px; }

/* per-category tint (panel) + accent (monogram) */
.fe-ccard .th.cat-fiqh{ background:var(--tint-fiqh) }              .th.cat-fiqh .mono{ background:var(--acc-fiqh) }
.fe-ccard .th.cat-spiritual{ background:var(--tint-spiritual) }    .th.cat-spiritual .mono{ background:var(--acc-spiritual) }
.fe-ccard .th.cat-belief{ background:var(--tint-belief) }          .th.cat-belief .mono{ background:var(--acc-belief) }
.fe-ccard .th.cat-contemporary{ background:var(--tint-contemporary) } .th.cat-contemporary .mono{ background:var(--acc-contemporary) }
.fe-ccard .th.cat-historical{ background:var(--tint-historical) }  .th.cat-historical .mono{ background:var(--acc-historical) }
.fe-ccard .th.cat-worship{ background:var(--tint-worship) }        .th.cat-worship .mono{ background:var(--acc-worship) }
.fe-ccard .th.cat-sciences{ background:var(--tint-sciences) }      .th.cat-sciences .mono{ background:var(--acc-sciences) }

/* The ONE exception: a featured lead card per shelf keeps the full saturated gradient
   (set inline by JS) with a centered white title — the single warm focal point a shelf
   is allowed. JS adds .featured and keeps the inline `background:var(--grad-*)`. */
.fe-ccard .th.featured{ height:104px; padding:14px; align-items:flex-end; }
.fe-ccard .th.featured .mono{ display:none; }
.fe-ccard .th.featured h3{
  display:block; color:var(--fe-white); font-size:15px; font-weight:800;
  letter-spacing:-.01em; text-transform:none; text-shadow:0 1px 10px rgba(0,0,0,.4);
}
.fe-ccard .th.featured::after{
  content:"" !important; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.5) 100%);
}
.fe-ccard .th.featured{ position:relative; }

/* ----------------------------------------------------------------------------
   (2) ONE RESTRAINED, CONSISTENT HOVER across interactive cards.
   -------------------------------------------------------------------------- */
.fe-ccard, .resume-hero, .scholar-row, .start-step, .pathcard, .subj-row{
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.fe-ccard:hover, .resume-hero:hover{ transform:translateY(var(--fe-hover-lift)); box-shadow:var(--fe-shadow-pop); }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
  .fe-ccard:hover, .resume-hero:hover{ transform:none; }
}
/* in-app Settings "Reduce motion" toggle sets this class on <body> */
body.fe-reduce-motion *{ transition:none !important; animation:none !important; }
body.fe-reduce-motion .fe-ccard:hover, body.fe-reduce-motion .resume-hero:hover{ transform:none; }

/* ----------------------------------------------------------------------------
   (3a) THE RESUME HERO — Home's single above-the-fold anchor.
   A wide card: a saturated category panel on the left (the one place a gradient earns
   its keep on Home), the exact place + a thin progress bar + remaining-time, one loud
   Resume primary. Built by index.html.
   -------------------------------------------------------------------------- */
.resume-hero{
  display:flex; align-items:stretch; gap:0; text-decoration:none;
  background:var(--fe-white); border:1px solid var(--fe-border);
  border-radius:20px; box-shadow:var(--fe-shadow-card); overflow:hidden;
}
.resume-hero .rh-art{
  flex:none; width:168px; position:relative; display:flex; align-items:flex-end; padding:14px;
  color:var(--fe-white);
}
.resume-hero .rh-art::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 100%); }
.resume-hero .rh-art .rh-mono{ position:relative; z-index:1; font-size:30px; font-weight:800; opacity:.92; }
.resume-hero .rh-body{ flex:1; min-width:0; padding:18px 20px; display:flex; flex-direction:column; gap:7px; }
.resume-hero .rh-kicker{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--fe-info); }
.resume-hero .rh-title{ font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--fe-text-primary); line-height:1.15; }
.resume-hero .rh-where{ font-size:13px; color:var(--fe-text-secondary); font-weight:600; }
.resume-hero .rh-bar{ height:6px; border-radius:999px; background:var(--fe-bg); overflow:hidden; max-width:340px; }
.resume-hero .rh-bar i{ display:block; height:100%; border-radius:999px; background:var(--fe-info); }
.resume-hero .rh-foot{ display:flex; align-items:center; gap:14px; margin-top:3px; }
.resume-hero .rh-btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:999px;
  background:var(--fe-info); color:var(--fe-white); font-weight:800; font-size:14px; letter-spacing:-.01em;
}
.resume-hero:hover .rh-btn{ background:var(--fe-brand-700); }
.resume-hero .rh-time{ font-size:12px; color:var(--fe-text-tertiary); font-weight:700; }
@media (max-width:720px){ .resume-hero{ flex-direction:column; } .resume-hero .rh-art{ width:auto; height:96px; } }

/* (3b) GLOBAL "Continue" PILL — refined.js injects this into .fe-topbar on secondary
   pages so resume-in-one-move works from anywhere (not just Home + Library). */
.fe-topbar .tb-resume{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px; text-decoration:none;
  background:var(--fe-info-tint); color:var(--fe-info);
  border:1px solid var(--fe-info-tint-subtle); font-weight:700; font-size:13px;
  max-width:340px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fe-topbar .tb-resume:hover{ background:var(--fe-info); color:var(--fe-white); border-color:var(--fe-info); }
.fe-topbar .tb-resume svg{ flex:none; }

/* ----------------------------------------------------------------------------
   (4) THE PEAK — lesson-complete acknowledgement. lesson.html toggles .is-celebrating
   on the completion card; here we draw the check on and warm the border briefly.
   -------------------------------------------------------------------------- */
@keyframes fe-check-draw{ to{ stroke-dashoffset:0; } }
@keyframes fe-warm-settle{
  0%{ border-color:var(--acc-spiritual); box-shadow:0 0 0 3px var(--tint-spiritual); }
  100%{ border-color:var(--fe-border); box-shadow:var(--fe-shadow-card); }
}
.lesson-done.is-celebrating{ animation:fe-warm-settle 1100ms ease forwards; }
.lesson-done .done-check{ width:30px; height:30px; flex:none; }
.lesson-done .done-check path{ stroke-dasharray:32; stroke-dashoffset:32; }
.lesson-done.is-celebrating .done-check path{ animation:fe-check-draw 420ms ease forwards; }
@media (prefers-reduced-motion: reduce){
  .lesson-done.is-celebrating{ animation:none; }
  .lesson-done .done-check path{ stroke-dashoffset:0; }
}
body.fe-reduce-motion .lesson-done.is-celebrating{ animation:none; }
body.fe-reduce-motion .lesson-done .done-check path{ stroke-dashoffset:0; }

/* ----------------------------------------------------------------------------
   (5) RESPONSIVE conventions shared across v1-refined pages.
   The shell handles its own mobile drawer (shared/shell.js). These rules keep the
   CONTENT fluid: the catalog grid reflows (3+ -> 2 -> 1 up), the resume hero foot
   wraps, the topbar wraps so the Continue pill never overflows, and fixed-px panels
   relax. Page-local layouts already collapse their multi-column grids ~1040px; this
   layer takes it the rest of the way down to phones.
   -------------------------------------------------------------------------- */
.fe-topbar{ flex-wrap:wrap; }
.fe-topbar .tb-resume{ max-width:min(340px, 64vw); }
.resume-hero .rh-foot{ flex-wrap:wrap; }

@media (max-width:680px){
  .fe-grid{ gap:10px; }
  .fe-grid .fe-ccard{ flex:1 1 calc(50% - 5px); min-width:0; max-width:none; }  /* 2-up */
  .resume-hero .rh-body{ padding:15px 16px; }
  .resume-hero .rh-title{ font-size:18px; }
  .cont-shelf .fe-ccard{ flex-basis:75vw; min-width:0; max-width:300px; }       /* peek the next card */
}
@media (max-width:440px){
  .fe-grid .fe-ccard{ flex-basis:100%; }                                        /* 1-up on small phones */
  .resume-hero .rh-art{ width:auto; height:84px; }
  .resume-hero .rh-foot{ gap:10px; }
}

/* ----------------------------------------------------------------------------
   (6) UNIFIED "FOLLOWING" BADGE  (F4)
   ONE mint pill treatment shared by every "you're following this" affordance so
   the same state reads identically across Paths (saved-row tag), the path detail
   (curated status), and the curated card's Follow toggle. Loaded on every
   v4 page and referenced by no other variation, so it is safe to define
   the shared class here. The card-header .hd-following stays a SOLID green pill
   (it sits on a photo/gradient and needs the contrast) but is aligned to the same
   font-size / weight / radius token below.
   -------------------------------------------------------------------------- */
.track-row .tr-active-tag,
.ph-following,
.fe-pcard .pc-follow.is-following{
  background:#e6f6f5; color:var(--fe-success);
  font-size:11px; font-weight:800; padding:4px 9px; border-radius:999px;
  display:inline-flex; align-items:center;
}
/* the card-header badge keeps its solid fill for on-photo contrast, but matches
   the shared badge's font-size / weight / radius */
.fe-pcard .hd .hd-following{
  font-size:11px; font-weight:800; border-radius:999px;
}

/* ----------------------------------------------------------------------------
   (7) PLATFORM BALANCE — the Reset as a doorway, never a loop.
   Web-side chrome for the 40 Day Reset offer (research/platform-balance/):
   a quiet Home rail card, a flagship card leading the Paths shelf, the
   reset.html offer page, and the Settings "On your phone" section. One shared
   accent: a deep ink→cyan typographic gradient (no imagery, no faces).
   Custom-path UI is gated by window.FE_FLAGS.customPaths in the page scripts;
   nothing here touches shared/*.
   -------------------------------------------------------------------------- */
:root{
  --fe-reset-grad: linear-gradient(135deg,#0c1f2c 0%,#12455a 52%,#0e7490 100%);
  --fe-reset-ink:#0c1f2c;
  --fe-reset-cyan:#0e7490;
  --fe-reset-tint:#e7f4f7;
}

/* --- Home rail: the Reset offer card. Quieter than the resume hero — white card,
       typographic ink→cyan title, a text link (no button, no imagery, no motion). */
.reset-offer{
  background:var(--fe-white); border:1px solid var(--fe-border);
  border-radius:var(--fe-radius); box-shadow:var(--fe-shadow-card);
  padding:15px 16px 14px;
}
.reset-offer .ro-eyebrow{
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--fe-reset-cyan);
}
.reset-offer .ro-title{
  font-size:19px; font-weight:800; letter-spacing:-.02em; line-height:1.15; margin-top:4px;
  background:var(--fe-reset-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.reset-offer .ro-promise{ font-size:13px; color:var(--fe-text-secondary); line-height:1.5; margin-top:6px; }
.reset-offer .ro-meta{ font-size:12px; color:var(--fe-text-tertiary); font-weight:600; margin-top:7px; }
.reset-offer .ro-link{
  display:inline-block; margin-top:10px; text-decoration:none;
  font-size:13px; font-weight:700; color:var(--fe-reset-cyan);
}
.reset-offer .ro-link:hover{ text-decoration:underline; }

/* --- Paths shelf: the flagship card. Rides the .fe-pcard anatomy but is an OFFER
       card — ink→cyan typographic header, a "Flagship" tag, no Follow / no progress. */
.pl-shelf .fe-pcard.pl-flagship .hd{ background:var(--fe-reset-grad); }
.pl-shelf .fe-pcard.pl-flagship .hd::before{ content:none; } /* gradient is already deep; skip the scrim */
.fe-pcard.pl-flagship .hd .hd-flag{
  background:rgba(255,255,255,.96); color:var(--fe-reset-ink);
  font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px;
  letter-spacing:.03em; text-transform:uppercase;
  box-shadow:0 1px 4px rgba(12,31,44,.25);
}
.fe-pcard.pl-flagship .bd .pl-meta .lbl{ color:var(--fe-text-tertiary); }
.fe-pcard.pl-flagship .fe-cta{ color:var(--fe-reset-cyan); }

/* --- reset.html — the flagship offer page (single calm column, new-muslim tone). */
.rst-wrap{ max-width:760px; width:100%; }
.rst-crumb{ font-size:12px; font-weight:600; color:var(--fe-text-tertiary); margin-bottom:10px;
  display:flex; flex-wrap:wrap; align-items:center; }
.rst-crumb a{ color:var(--fe-text-secondary); text-decoration:none; }
.rst-crumb a:hover{ color:var(--fe-info); }
.rst-crumb .sep{ margin:0 7px; color:var(--fe-border); }
.rst-crumb .here{ color:var(--fe-text-secondary); }

.rst-hero{ padding:4px 2px 18px; }
.rst-hero .eyebrow{ font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--fe-reset-cyan); }
.rst-hero h1{
  font-size:34px; font-weight:800; letter-spacing:-.02em; line-height:1.1; margin:8px 0 10px;
  background:var(--fe-reset-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.rst-hero .promise{ font-size:16px; color:var(--fe-text-secondary); line-height:1.55; max-width:52ch; }
.rst-hero .meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.rst-hero .meta .m{ font-size:12px; font-weight:700; color:var(--fe-text-secondary);
  background:var(--fe-white); border:1px solid var(--fe-border); border-radius:999px; padding:5px 12px; }

/* four quiet day-shape steps */
.rst-day{ display:flex; flex-direction:column; }
.rst-day .step{ display:grid; grid-template-columns:30px 1fr; gap:14px; align-items:baseline; padding:12px 4px; }
.rst-day .step + .step{ border-top:1px solid var(--fe-border); }
.rst-day .step .n{
  width:30px; height:30px; border-radius:999px; display:grid; place-items:center;
  font-size:13px; font-weight:700; color:var(--fe-reset-cyan); background:var(--fe-reset-tint);
  align-self:start;
}
.rst-day .step .t{ font-size:15px; font-weight:700; color:var(--fe-text-primary); }
.rst-day .step .d{ font-size:13.5px; color:var(--fe-text-secondary); line-height:1.55; margin-top:3px; max-width:58ch; }

/* taught-by roster — monogram avatars only (same language as Home's scholar rail) */
.rst-scholars{ display:grid; grid-template-columns:1fr 1fr; gap:2px 18px; }
.rst-scholar{ display:flex; align-items:center; gap:12px; padding:10px 4px; text-decoration:none; }
.rst-scholar:hover .nm{ color:var(--fe-info); }
.rst-scholar .avatar{ flex:none; width:42px; height:42px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px; }
.rst-scholar .who{ min-width:0; }
.rst-scholar .nm{ display:block; font-size:14px; font-weight:700; color:var(--fe-text-primary); line-height:1.25; }
.rst-scholar .sp{ display:block; font-size:12px; color:var(--fe-text-tertiary); margin-top:1px; }
@media (max-width:560px){ .rst-scholars{ grid-template-columns:1fr; } }

/* why-the-phone rows + store badges */
.rst-phone-lede{ font-size:14px; color:var(--fe-text-secondary); line-height:1.6; max-width:58ch; }
.rst-phone-lede b{ color:var(--fe-text-primary); font-weight:700; }
.rst-phone-rows{ display:flex; flex-direction:column; margin-top:6px; }
.rst-phone-rows .row{ display:flex; align-items:baseline; gap:10px; padding:10px 2px; }
.rst-phone-rows .row + .row{ border-top:1px solid var(--fe-border); }
.rst-phone-rows .row .t{ flex:none; font-size:13.5px; font-weight:700; color:var(--fe-text-primary); }
.rst-phone-rows .row .d{ font-size:13px; color:var(--fe-text-secondary); line-height:1.5; }
.rst-badges{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; }
.rst-badges a{ display:inline-flex; }
.rst-badges img{ height:40px; width:auto; display:block; }

/* enrollment block — honest prototype copy, no dates, no scarcity */
.rst-enroll{ text-align:center; padding:6px 12px 4px; }
.rst-enroll .inc{ font-size:14px; font-weight:700; color:var(--fe-text-primary); }
.rst-enroll .cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px; border:0; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:14px; padding:12px 26px; border-radius:999px;
  background:var(--fe-reset-grad); color:#fff;
}
.rst-enroll .cta:hover{ filter:brightness(1.08); }
.rst-enroll .fine{ font-size:12px; color:var(--fe-text-tertiary); line-height:1.55; max-width:46ch; margin:12px auto 0; }

.rst-foot{ margin-top:22px; font-size:12px; color:var(--fe-text-tertiary); }
.rst-foot a{ font-weight:700; }

/* --- Settings: "On your phone" rows — same .set-row rhythm, an "In the app" tag
       where a toggle would sit (these are app capabilities by design, not web ones). */
.set-app-tag{
  flex:none; font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:var(--fe-reset-cyan); background:var(--fe-reset-tint); border:1px solid #d3e9ee;
  border-radius:999px; padding:4px 10px; white-space:nowrap;
}
.set-phone-badges{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 0 2px; }
.set-phone-badges a{ display:inline-flex; }
.set-phone-badges img{ height:36px; width:auto; display:block; }