/* ============================================================
   GoPokerPro — CURRICULUM PAGE (Phase-1 scaffold)
   ------------------------------------------------------------
   Enqueueable stylesheet for the custom LifterLMS Curriculum
   catalog. Loads AFTER gpp-brand-tokens.css (declared as the
   `gpp-tokens` dependency in the enqueue), so every var(--gpp-*)
   below resolves. NEVER paste this into the Divi Custom CSS box
   (D-05) — it is a real file, enqueued conditionally on the
   catalog body.

   Phase-1 scope (load-bearing primitives ONLY):
     1. Square-corner brand rule (BRAND-04)
     2. 1020px centered container (frozen 30px 24px 90px padding)
     3. Divi-4 catalog-body chrome neutralization
     4. .art seat-state recolor layer (the Plan-02 ring SVG
        emits these classes; this CSS colors them) — BRAND-02

   NOT in scope (Phase 2-3): the card/section/lesson rhythm
   classes (spot card, section head, lesson-pad row, etc.). Do
   not add any of those rules in this file.
   ============================================================ */

/* ------------------------------------------------------------
   1. Square corners (BRAND-04)
   ------------------------------------------------------------
   GoPokerPro never uses rounded corners. The ONLY exemptions are
   drawn SVG shapes — <circle>/<ellipse> seat chips, the dealer
   button, and the felt — which are illustration geometry, not
   CSS border-radius.
   ------------------------------------------------------------ */
*{box-sizing:border-box}
*{border-radius:0 !important}  /* BRAND-04 — SVG <circle>/<ellipse>/dealer/felt are drawn-art exceptions */

/* ------------------------------------------------------------
   2. Container (1020px, centered) — spacing FROZEN
   ------------------------------------------------------------
   30 and 90 are intentional design values (UI-SPEC §Spacing) —
   do NOT round to the 4px scale.
   ------------------------------------------------------------ */
.gpp-curric-wrap{max-width:1020px;margin:0 auto;padding:30px 24px 90px}

/* ------------------------------------------------------------
   3. Divi-4 catalog-body chrome neutralization
   ------------------------------------------------------------
   Mirrors the gopokerpro-lms.css single-lesson recipe, retargeted
   to the LifterLMS catalog body and using tokens + the 1020px
   container width (not 1300, not a bare hex). The exact live
   catalog body-class string is confirmed at the Phase-1 smoke
   test (RESEARCH A3); post-type-archive-course + lifterlms are
   the safe Divi-4/LLMS body classes to target now.
   ------------------------------------------------------------ */
body.post-type-archive-course, body.post-type-archive-course #page-container, body.post-type-archive-course #main-content,
body.lifterlms #page-container, body.lifterlms #main-content { background-color: var(--gpp-bg) !important; }
body.post-type-archive-course #main-content .container { max-width:1020px !important; width:92% !important; padding-top:24px !important; }
body.post-type-archive-course #main-content .container:before { display:none !important; content:none !important; }
body.post-type-archive-course #left-area { width:100% !important; max-width:100% !important; float:none !important; margin:0 auto !important; padding:0 !important; border:none !important; }
body.post-type-archive-course #sidebar { display:none !important; }

/* Divi Theme Builder archive structure — REQUIRED when /courses renders through a
   Divi Theme Builder body template (body.et-tb-has-template), which wraps content as
   #page-container > #et-boc > #et-main-area > #container > #content — there is NO
   #main-content, no .container class, and no #left-area, so the classic constraint
   above matches nothing and the column goes full-width. Constrain the actual TB content
   wrapper (#content) to the same 1020px centered column. curriculum.css only loads on the
   catalog (is_courses), so this #content rule cannot affect any other page. Verified live
   on gopokerpro.com/courses 2026-06-08. */
body.post-type-archive-course #content {
    max-width: 1020px !important;
    margin: 0 auto !important;
    padding: 30px 24px 90px !important;
    box-sizing: border-box;
}

/* Divi Theme Builder header — visitor (logged-out) menu legibility on /courses.
   Our navy #page-container background (line ~52) shows through the transparent TB
   header; the logged-out visitor header uses dark menu text built for light page
   backgrounds, so on this dark page it goes unreadable. curriculum.css loads ONLY on
   the catalog, so this recolor is scoped to /courses and never affects the visitor
   header elsewhere. Top-level links only (child combinator skips dropdown panels);
   the orange CTA (.menu-cta) is left as designed. Verified live logged-out on
   gopokerpro.com/courses 2026-06-08. */
body.post-type-archive-course .et_pb_menu__menu > nav > ul > li:not(.menu-cta) > a {
    color: var(--gpp-white) !important;
}

/* ------------------------------------------------------------
   4. .art seat-state recolor layer (LOAD-BEARING — BRAND-02)
   ------------------------------------------------------------
   The Plan-02 PHP renderer emits the SVG with class="felt"/
   "s-hero"/"s-sel"/"s-dim"/"t-hero"/"t-sel"/"t-dim"/"dealer".
   These rules color them. Ported from the design HTML seat-state
   block with every brand hex TOKENIZED per the hex→token table.
   The only sanctioned inline rgba is the dim-seat stroke .25 (no
   .25 token exists) and the felt's .04/.16 alphas (UI-SPEC maps
   felt fill→--gpp-soft / stroke→--gpp-line family and explicitly
   permits the token substitution; if a harness visual diff shows
   the felt too strong, the exact rgba(255,255,255,.04)/.16 may be
   inlined instead — also permitted).
   ------------------------------------------------------------ */
.art{font-family:var(--gpp-font-display)}   /* seat labels inherit the display token (Lexend since Oswald retired 2026-06-10) */
.art .felt{fill:var(--gpp-soft);stroke:var(--gpp-line);stroke-width:2.5}
.art .s-hero{fill:var(--gpp-orange)}
.art .s-sel{fill:var(--gpp-card);stroke:var(--gpp-orange);stroke-width:2.5}
.art .s-dim{fill:var(--gpp-card);stroke:rgba(255,255,255,.25);stroke-width:2.5}
.art .t-hero{fill:var(--gpp-bg)}
.art .t-sel{fill:var(--gpp-orange)}
.art .t-dim{fill:var(--gpp-seat-dim)}

/* ------------------------------------------------------------
   5. Card / section / lesson (Phase 2, D-16)
   ------------------------------------------------------------
   Verbatim port of curriculum.html lines 43-91 with the four
   mandatory transforms:
     (a) every dynamic class is gpp-curric-* prefixed (D-13,
         greppable for the Phase-4 RUCSS exclusion); the .art
         ring classes stay UN-prefixed (emitted by gpp_ring(),
         already styled by §4 above).
     (b) every design hex maps to a var(--gpp-*) token (NO bare
         hex anywhere in this block): --card→--gpp-card,
         --orange→--gpp-orange, --orange-d→--gpp-orange-dk,
         --green→--gpp-green, --line→--gpp-line, --soft→--gpp-soft,
         --dim→--gpp-dim, --ink→--gpp-ink; the white title color →
         --gpp-white; the dark CTA-text color (design line 66, the
         literal value of --gpp-card) → --gpp-card; the lock left-
         border (design line 46) → --gpp-lock-border; the green-
         gradient end (design line 55) → --gpp-green-dk; the
         resting caret/scaret color (design lines 70/79) → --gpp-dim
         (UI-SPEC §6 — the dim token, not the failing literal;
         AA fix is Phase 4).
     (c) every corner-radius declaration is STRIPPED — the §1
         *{border-radius:0 !important} rule already squares every
         corner (the lesson play glyph becomes a square chip —
         accept it, UI-SPEC §Spacing). Flat brand: no drop/box
         shadows anywhere.
     (d) the sanctioned inline rgba alphas are kept as-is (same
         exception §4 uses): rgba(255,255,255,.09)/.05 bar tracks
         + sec hairline; rgba(246,166,100,.4)/.06/.12 pill + num
         chip; rgba(34,197,94,.45) done CTA (done-play box is now
         flat var(--gpp-green) border+✓ — no rgba fill).

   DROPPED, not ported (per the divergences): the red leak left-
   border + its red token (D-06), the red leak tag (D-06/D-09),
   the flat Foundations card/row/open-pill trio (D-04 — Foundations
   use the spot card instead), and the density-variant blocks (out
   of scope). There is NO theory-tag class (D-09); the design's
   pill visual is reused ONLY as the START HERE pill
   (.gpp-curric-starthere, D-01).

   The static reveal is height:0 <-> height:auto on the open
   classes (D-14) — no keyframes, no height tween (the expand
   reveal animation is Phase 3). The only kept transitions are
   border-color .15s (card hover) and transform .2s (carets); the
   pbar>i width .6s is the bar-fill tween, not an expand reveal.

   Load-bearing px kept VERBATIM (do NOT round): 122px CTA, 47px
   lesson indent, 14px/16px 18px spothead, 24px num chip,
   62px/66px ppct, 34px lnum, 360px pwrap, 5px bar, 12px card gap,
   6px 18px 12px sec-wrap, 11px 2px sechead.
   ------------------------------------------------------------ */

/* Card container + 3-state left-border (green/orange/navy only) */
.gpp-curric-spot{background:var(--gpp-card);border:1px solid var(--gpp-line);margin-bottom:12px;overflow:hidden;transition:border-color .15s}
.gpp-curric-spot:hover{border-color:var(--gpp-orange)}
.gpp-curric-spot.gpp-curric-done{border-left:3px solid var(--gpp-green)}
.gpp-curric-spot.gpp-curric-active{border-left:3px solid var(--gpp-orange)}
.gpp-curric-spot.gpp-curric-lock{border-left:3px solid var(--gpp-lock-border)}

/* Card head + body + title + meta */
.gpp-curric-spothead{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer}
.gpp-curric-spothead .art{flex:0 0 auto}
.gpp-curric-spothead .gpp-curric-body{flex:1 1 auto;min-width:0}
.gpp-curric-spothead .gpp-curric-t{color:var(--gpp-white);font-weight:700;font-size:16px}
/* Title row holds the title + START HERE pill + per-facet pills — flex+gap so multiple pills
   space + wrap cleanly (mirrors the .gpp-curric-meta pattern above). */
.gpp-curric-title-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gpp-curric-spothead .gpp-curric-meta{color:var(--gpp-dim);font-size:12.5px;margin-top:3px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Per-course progress bar — 3 branches (in-progress / done / locked) */
.gpp-curric-body .gpp-curric-pwrap{display:flex;align-items:center;gap:10px;margin-top:10px;max-width:360px}
.gpp-curric-body .gpp-curric-pbar{flex:1 1 auto;height:5px;background:rgba(255,255,255,.09);overflow:hidden}
.gpp-curric-body .gpp-curric-pbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--gpp-orange),var(--gpp-orange-dk));transition:width .6s cubic-bezier(.4,0,.2,1)}
.gpp-curric-body .gpp-curric-pbar.gpp-curric-pdone>i{background:linear-gradient(90deg,var(--gpp-green),var(--gpp-green-dk))}
.gpp-curric-body .gpp-curric-ppct{font-size:11px;color:var(--gpp-dim);font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:62px;font-weight:600;letter-spacing:.3px}
.gpp-curric-body .gpp-curric-ppct.gpp-curric-pdone-t{color:var(--gpp-green)}
.gpp-curric-body .gpp-curric-pbar.gpp-curric-plocked{background:rgba(255,255,255,.05)}
.gpp-curric-body .gpp-curric-ppct.gpp-curric-plocked-t{color:var(--gpp-dim);display:inline-flex;align-items:center;gap:5px;min-width:66px;line-height:1}
.gpp-curric-body .gpp-curric-ppct.gpp-curric-plocked-t svg{display:block;flex:0 0 auto}
.gpp-curric-body .gpp-curric-ppct.gpp-curric-plocked-t .gpp-curric-lktxt{line-height:1;display:block}

/* START HERE pill (D-01 — the ONLY reuse of the design's .inc pill visual; display token = Lexend since 2026-06-10) */
.gpp-curric-starthere{font-family:var(--gpp-font-display);font-size:10.5px;font-weight:600;color:var(--gpp-orange);border:1px solid rgba(246,166,100,.4);padding:2px 8px;background:rgba(246,166,100,.06)}

/* Per-facet pill (FACET-PILL-01 / founder D-A/B/C) — one pill per facet (pot/side/mod),
   each carrying a data-gpp-facet="KEY" hook. "Outlined gold" treatment (founder UAT 2026-06-09):
   orange text + faint orange border, NO fill (founder UAT 2026-06-09 round 2 removed the
   rgba(246,166,100,.08) wash — outline-only badge). The orange-alpha border literal mirrors the
   sibling .gpp-curric-starthere pill (no orange-at-alpha token exists). Square corners, no underline. */
.gpp-curric-facet{font-family:var(--gpp-font-display);font-size:10.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--gpp-orange);border:1px solid rgba(246,166,100,.45);background:transparent;padding:2px 8px;border-radius:0}

/* CTA — fixed-width (122px), right-aligned column; 5 states (4 style rules) */
.gpp-curric-cta{flex:0 0 auto;margin-left:auto;width:122px;text-align:center;font:inherit;font-size:12.5px;font-weight:700;padding:8px 0;border:1px solid var(--gpp-line);white-space:nowrap;cursor:pointer;background:transparent;text-decoration:none}
/* The active CTAs (Review/Continue/Start) are <a> course links — kill the
   underline in BOTH states. The :hover rule (specificity 0,2,0) also beats a
   parent-theme `a:hover{text-decoration:underline}` so the card stays self-contained. */
.gpp-curric-cta:hover{text-decoration:none}
.gpp-curric-cta-cont{color:var(--gpp-card);background:var(--gpp-orange);border-color:var(--gpp-orange)}
.gpp-curric-cta-start{color:var(--gpp-card);background:var(--gpp-orange);border-color:var(--gpp-orange)}
.gpp-curric-cta-done{color:var(--gpp-green);border-color:rgba(34,197,94,.45)}
.gpp-curric-cta-lock{color:var(--gpp-card);background:var(--gpp-orange);border-color:var(--gpp-orange)}
/* CTA hover feedback (Phase-4 UAT) — the active buttons (Continue / Start / Review) AND the
   State-B SPOT Unlock LINK light up to WHITE fill + dark-navy text on hover (~150ms fade), matching
   the lesson-row white hover and the founder's main-site button affordance. D-07 REVISED: the spot
   Unlock is now an <a> (a.gpp-curric-cta-lock), so it is INCLUDED; the free/theory dormant lock
   stays a disabled <button> and never matches the a.-qualified selector (so it is still EXCLUDED,
   non-interactive). Tokens only (--gpp-white fill/border, --gpp-card text); no bare hex, square,
   flat, no underline (the existing .gpp-curric-cta:hover keeps text-decoration:none). */
.gpp-curric-cta{transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.gpp-curric-cta-cont:hover,
.gpp-curric-cta-start:hover,
.gpp-curric-cta-done:hover,
a.gpp-curric-cta-lock:hover{background:var(--gpp-white);color:var(--gpp-card);border-color:var(--gpp-white)}

/* Card caret (card -> sections toggle) — resting dim, orange + rotated when open.
   Reset native <button> chrome (it's a real button for A11Y-01, but must look
   like the design's transparent div — no grey bg / border / system font). */
.gpp-curric-caret{color:var(--gpp-dim);font-size:20px;transition:transform .2s;flex:0 0 auto;width:16px;text-align:center;background:transparent;border:0;padding:0;font-family:inherit;line-height:1;cursor:pointer;-webkit-appearance:none;appearance:none}
.gpp-curric-spot.gpp-curric-open .gpp-curric-spothead .gpp-curric-caret{transform:rotate(90deg);color:var(--gpp-orange)}

/* Next-Up card overrides (non-expandable, D-17) — Phase-4 UAT.
   The Next-Up resume card (<li class="gpp-curric-spot gpp-curric-active|gpp-curric-done"
   ...gpp-curric-nextup> inside <ul ...gpp-curric-nextup-list>) is NOT expandable — only its
   CTA <a> is interactive. But it inherits §5's whole-card affordances: the spothead
   cursor:pointer and the .gpp-curric-spot:hover{border-color:--gpp-orange} highlight — both
   make it LOOK clickable. These additive, .gpp-curric-nextup-list-scoped overrides neutralize
   that: the head reverts to the default cursor, and each variant's :hover RE-ASSERTS its
   RESTING border (active = orange left border, done = green left border) so hovering the card
   produces NO visual change. The CTA <a> keeps its own pointer cursor (untouched). Tokens only,
   no bare hex; additive (alters no §5 desktop rule). */
.gpp-curric-nextup-list .gpp-curric-spothead{cursor:default}
.gpp-curric-nextup-list .gpp-curric-active:hover{border-color:var(--gpp-line);border-left-color:var(--gpp-orange)}
.gpp-curric-nextup-list .gpp-curric-done:hover{border-color:var(--gpp-line);border-left-color:var(--gpp-green)}
/* CTA alignment: regular cards reserve caret(16px)+gap(14px)=30px on the right for the expand
   caret; the Next-Up card has NO caret, so shift its CTA left by 30px to align its right edge
   with the regular-card CTAs. Applies to BOTH Next-Up variants (Continue and Review). */
.gpp-curric-nextup-list .gpp-curric-cta{margin-right:30px}

/* Two-level expand tree — sections panel (static reveal, no animation).
   DESCENDANT combinator (not `>`): loop/content.php wraps the card body in a
   `.llms-loop-item-content` div BETWEEN the `.gpp-curric-spot` <li> and these panels,
   so a direct-child `>` never matches — the open card would never reveal its sections
   and the caret would never rotate. (Section→lessons below stays `>`: .gpp-curric-lessons
   IS a direct child of .gpp-curric-sec.) */
.gpp-curric-sections{height:0;overflow:hidden}
.gpp-curric-spot.gpp-curric-open .gpp-curric-sections{height:auto}
.gpp-curric-sections>.gpp-curric-sec-wrap{padding:6px 18px 12px;border-top:1px solid var(--gpp-soft)}
.gpp-curric-sec{border-bottom:1px solid rgba(255,255,255,.05)}
.gpp-curric-sec:last-child{border-bottom:none}

/* Section head + caret + number chip + name + lesson-count.
   Reset native <button> chrome + force full-width (a native button shrinks to
   content, which kills the .gpp-curric-sl margin-left:auto right-alignment and
   leaves an ugly grey box — it must fill the row like the design's div). */
.gpp-curric-sechead{display:flex;align-items:center;gap:11px;padding:11px 2px;cursor:pointer;font-size:13.5px;width:100%;text-align:left;background:transparent;border:0;color:inherit;font-family:inherit;-webkit-appearance:none;appearance:none;transition:background .2s cubic-bezier(.4,0,.2,1)}
.gpp-curric-sechead .gpp-curric-scaret{color:var(--gpp-dim);font-size:15px;transition:transform .2s,color .2s;width:12px}
.gpp-curric-sec.gpp-curric-secopen .gpp-curric-scaret{transform:rotate(90deg);color:var(--gpp-orange)}
.gpp-curric-sechead .gpp-curric-num{width:24px;height:24px;background:rgba(246,166,100,.12);color:var(--gpp-orange);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.gpp-curric-sechead .gpp-curric-sn{color:var(--gpp-white);font-weight:600}
.gpp-curric-sechead .gpp-curric-sl{margin-left:auto;color:var(--gpp-dim);font-size:12px}
/* HOVER: same gold-wash affordance the lesson rows (.gpp-curric-lrow) already have — a faint
   orange wash across the full section-head row + the resting caret brightens to orange as the
   "responds" cue (the section's parallel to the lesson row's orange ▸ go-arrow; lands on the
   left caret so it never collides with the right-aligned lesson count .gpp-curric-sl). Section
   name is already white and the count stays dim, matching the lesson row's title-only brighten.
   Background/colour transition only — reduced-motion-safe, no layout shift. Keyboard :focus-visible
   already gets the §9 gold outline, so the affordance is covered for keyboard users too. */
.gpp-curric-sechead:hover{background:rgba(246,166,100,.08)}
.gpp-curric-sechead:hover .gpp-curric-scaret{color:var(--gpp-orange)}

/* Two-level expand tree — lessons panel (static reveal) + per-lesson row */
.gpp-curric-lessons{height:0;overflow:hidden}
.gpp-curric-sec.gpp-curric-secopen>.gpp-curric-lessons{height:auto}
.gpp-curric-les-pad{padding:2px 0 10px 47px}
.gpp-curric-lrow{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px;color:var(--gpp-ink);cursor:pointer;text-decoration:none;transition:background .2s cubic-bezier(.4,0,.2,1)}
/* HOVER: faint gold wash + title brightens to white (color-only affordance, never an underline)
   + a small orange "go" triangle fades in at the right edge (keyboard :focus-visible gets it too). */
.gpp-curric-lrow:hover{background:rgba(246,166,100,.08);color:var(--gpp-white)}
.gpp-curric-lrow::after{content:"\25B8";margin-left:auto;color:var(--gpp-orange);font-size:10px;line-height:1;opacity:0;transition:opacity .2s cubic-bezier(.4,0,.2,1)}
.gpp-curric-lrow:hover::after,.gpp-curric-lrow:focus-visible::after{opacity:1}
/* BRAND RULE — NO underlined text anywhere: the lesson-row link affordance is the color
   shift above (var(--gpp-ink) -> --gpp-white on hover), never an underline. (Lesson rows are
   real <a> links to the lesson permalink in production, so this also kills the native <a> underline.) */
.gpp-curric-lrow .gpp-curric-play{width:20px;height:20px;border:1px solid var(--gpp-line);color:var(--gpp-orange);font-size:9px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
/* DONE: swap the orange play glyph for a green ✓ in a green-bordered box (flat — no fill, border-radius:0) */
.gpp-curric-lrow.gpp-curric-done .gpp-curric-play{border-color:var(--gpp-green);color:var(--gpp-green);font-size:12px;line-height:1}
.gpp-curric-lrow.gpp-curric-done .gpp-curric-play svg{display:none}
.gpp-curric-lrow.gpp-curric-done .gpp-curric-play::after{content:"✓"}
.gpp-curric-lrow .gpp-curric-lnum{color:var(--gpp-dim);font-size:11.5px;font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:34px}
.gpp-curric-lrow .gpp-curric-ltitle{color:inherit}

/* ------------------------------------------------------------
   6. Accessibility — visually-hidden label utility
   ------------------------------------------------------------
   The §5 disclosure buttons (.gpp-curric-caret / .gpp-curric-sechead)
   carry a <span class="screen-reader-text"> label ("Show sections
   for …") for the accessible accordion (A11Y-01). `.screen-reader-text`
   is the WordPress/Divi convention class; we define it HERE so the
   card is SELF-CONTAINED and update-safe (D-13) — it must NOT depend
   on the Divi parent theme providing the hiding rule (which also left
   the zero-WordPress static harness rendering the label as a visible
   vertical text sliver that inflated every card). Intentionally
   UN-prefixed: a shared a11y utility, like the .art ring classes in §4
   — NOT a gpp-curric-* card class. Standard WP visually-hidden recipe
   (off-screen + clipped; still announced by assistive tech).
   ------------------------------------------------------------ */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}

/* ------------------------------------------------------------
   7. Page chrome (Phase 3) — header band, overall progress bar,
      group labels, dashed theory note
   ------------------------------------------------------------
   Verbatim port of curriculum.html lines 24-41 (.top/.kicker/h1/
   .sub/.prog/.grouplabel/.theorynote) with the four mandatory
   transforms (same discipline as §5):
     (a) every dynamic class is gpp-curric-* prefixed (greppable
         for the Phase-4 RUCSS exclusion list).
     (b) every design hex maps to a var(--gpp-*) token — NO bare
         hex anywhere in this block: --orange→--gpp-orange,
         --orange-d→--gpp-orange-dk, the design white→--gpp-white,
         --dim→--gpp-dim, --soft→--gpp-soft, --ink→--gpp-ink.
     (c) every corner-radius declaration is STRIPPED — the §1
         *{border-radius:0 !important} rule already squares every
         corner. The design's .prog .bar 5px and .theorynote 8px
         radii are NOT ported (BRAND-04). Flat brand: no shadows.
     (d) the sanctioned inline rgba alphas are kept as-is (same
         exception §4/§5 use): the OVERALL bar track
         rgba(255,255,255,.10) (note .10 — distinct from the
         card's .09) and the theory-note bg rgba(255,255,255,.03).

   Scoping: the H1 is bound to .gpp-curric-top h1 (with a
   .gpp-curric-h1 alias) and the group H2 to
   .gpp-curric-grouplabel h2 (with a .gpp-curric-glh alias) so
   they never leak onto other Divi headings (UI-SPEC class-naming).

   The fill width is set inline server-side (per-user, Plan 04);
   the design's literal width:62% on .prog .bar>i is DROPPED — the
   CSS only provides the gradient + display:block;height:100%.

   Load-bearing px kept VERBATIM (do NOT round — pixels-win):
   .top 2px/20px/8px; kicker 12px/letter-spacing 3px; H1 33px/
   letter-spacing .3px; sub 14.5px; prog gap 14px/margin-top 18px,
   bar height 8px/max-width 320px; grouplabel gap 12px/margin
   34px 0 14px, H2 14px/letter-spacing 1.8px, .ln height 1px;
   theorynote margin now 12px 0 (Phase-4 UAT symmetric-spacing
   adjustment — no longer a verbatim design port; matches the
   12px inter-card gap)/12.5px/padding 11px 14px.
   ------------------------------------------------------------ */

/* Header band — orange 2px bottom rule (PAGE-02 / D-10) */
.gpp-curric-top{border-bottom:2px solid var(--gpp-orange);padding-bottom:20px;margin-bottom:8px}
.gpp-curric-kicker{font-family:var(--gpp-font-display);font-size:12px;text-transform:uppercase;letter-spacing:3px;color:var(--gpp-orange);font-weight:600}
/* Scope the H1 so it never leaks onto other Divi headings (UI-SPEC class-naming note) */
.gpp-curric-top h1,.gpp-curric-h1{font-family:var(--gpp-font-display);font-size:33px;font-weight:600;letter-spacing:.3px;color:var(--gpp-white);margin:6px 0 6px}
.gpp-curric-sub{color:var(--gpp-dim);font-size:14.5px;max-width:none;margin:0}

/* Overall progress block (PAGE-03 / D-11/D-12) — restyled to match the Single Course page
   (claude.design handoff): a meta row ("X of Y lessons complete" / orange %) stacked ABOVE a
   full-width flat 6px track (was a 320px gradient strip beside the text). Column layout. */
.gpp-curric-prog{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:18px}
/* Meta row — label left, percentage right, baseline-aligned */
.gpp-curric-progmeta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;color:var(--gpp-dim)}
.gpp-curric-progmeta .gpp-curric-pm-num{color:var(--gpp-white);font-weight:600}
.gpp-curric-pct{font-size:15px;font-weight:600;letter-spacing:.04em;color:var(--gpp-orange)}
.gpp-curric-pct.gpp-curric-prog-complete{color:var(--gpp-green)}
/* Track — full-width, 6px, flat, raised-navy (var(--gpp-card-2) ≈ handoff #152a44; no new hex) */
.gpp-curric-prog .gpp-curric-bar{height:6px;width:100%;background:var(--gpp-card-2);overflow:hidden}
/* Fill — solid orange (was the orange→orange-dk gradient); width set inline server-side. Reveal from
   empty on load via a CSS scaleX keyframe (a server-rendered inline width can't transition on first
   paint without JS); transform-origin:left so it grows left→right to the inline width. */
.gpp-curric-prog .gpp-curric-bar>i{display:block;height:100%;background:var(--gpp-orange);transform-origin:left;animation:gpp-curric-fillin .6s cubic-bezier(.4,0,.2,1)}
.gpp-curric-prog .gpp-curric-bar>i.gpp-curric-prog-complete{background:var(--gpp-green)}
@keyframes gpp-curric-fillin{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.gpp-curric-prog .gpp-curric-bar>i{animation:none}}
/* Logged-out scope readout reuses .gpp-curric-progtxt (the enrolled branch now uses the meta row above) */
.gpp-curric-progtxt{font-size:12.5px;color:var(--gpp-dim)}
.gpp-curric-progtxt b{color:var(--gpp-white)}
/* Logged-out scope readout ("N spots · M lessons") — WHITE + BOLD (Phase-4 UAT): the curriculum
   size is a prospect-facing marketing signal, so it reads emphasized, not dim. Reuses --gpp-white
   (no new token, no bare hex); square/flat/no-underline by the global brand rules. */
.gpp-curric-prog .gpp-curric-prog-scope{color:var(--gpp-white);font-weight:700}

/* Group label — 14px uppercase heading (Lexend since Oswald retired 2026-06-10) + 1px soft horizontal rule (GROUP band headers) */
.gpp-curric-grouplabel{display:flex;align-items:center;gap:12px;margin:34px 0 14px}
/* Scope the H2 so it never leaks onto other Divi headings (mirror the H1 scoping above) */
.gpp-curric-grouplabel h2,.gpp-curric-grouplabel .gpp-curric-glh{font-family:var(--gpp-font-display);font-size:14px;text-transform:uppercase;letter-spacing:1.8px;color:var(--gpp-white);margin:0;white-space:nowrap;font-weight:600}
.gpp-curric-grouplabel .gpp-curric-ln{flex:1 1 auto;height:1px;background:var(--gpp-soft)}
.gpp-curric-grouplabel .gpp-curric-meta{font-size:12px;color:var(--gpp-dim)}

/* Dashed theory note (GROUP-03 / D-09) — 1px dashed soft border, .03 white-alpha bg, square corners */
.gpp-curric-theorynote{margin:12px 0;font-size:12.5px;color:var(--gpp-dim);background:rgba(255,255,255,.03);border:1px dashed var(--gpp-soft);padding:11px 14px}
.gpp-curric-theorynote b{color:var(--gpp-ink)}

/* ------------------------------------------------------------
   8. Mobile reflow (Phase 4, RESP-01..04 / D-01..D-06)
   ------------------------------------------------------------
   designed-to-brand — NO pixel source (the design HTML is
   desktop-only, zero @media; these are net-new brand-consistent
   mobile values, D-01). The desktop cascade above 480px stays
   byte-identical (D-04) — every value below lives ONLY inside
   the single phone breakpoint (480px) block; nothing above the
   breakpoint is touched.

   The card reflows from the desktop single-flex-row into the
   founder's 4-row vertical stack (D-02):
     Row 1  ring (left) + caret (top-right)
     Row 2  title / meta / START HERE pill   (.gpp-curric-body)
     Row 3  full-width progress bar + %       (nested pwrap)
     Row 4  full-width CTA
   The mechanism is CSS grid on the head (recommended, UI-SPEC) —
   the DOM order is UNCHANGED (loop/content.php is frozen, no
   markup edit); the CTA is DOM-after the body, so grid-row:3
   places it visually below the body block. .gpp-curric-pwrap is
   a CHILD of .gpp-curric-body, so it stays nested (rows 2+3 are
   one stacked column) — both are part of the single tap-target,
   the visual result is the contract (UI-SPEC).

   44px touch targets (CTA / caret / section-head / lesson row)
   are the WCAG 2.5.5 floor — an INTENTIONAL exception to the 4px
   scale (44 ∉ {4,8,12,16,...}), exactly like the kept-verbatim
   desktop exceptions (the 122px CTA, the 47px lesson indent).

   Brand laws hold: NO border-radius (the global
   *{border-radius:0 !important} keeps everything square), NO
   box-shadow, NO bare hex (inherited tokens / layout props only),
   NO text-decoration:underline, NO new token.

   The lesson-indent 47px -> 24px is the ONE inherited desktop
   value this phase overrides — mobile-only (D-06).
   ------------------------------------------------------------ */
@media (max-width:480px){
  /* Container + card-head 4-row stack (D-02) */
  .gpp-curric-wrap{padding:24px 12px 64px}
  /* LIVE catalog mobile gutter (founder 2026-06-11) — `.gpp-curric-wrap` is HARNESS-ONLY (the live
     /courses page has no .gpp-curric-wrap; its 1020px container + gutter come from #content). Without
     this, the live catalog NEVER narrowed on phones (stayed at the 24px desktop gutter — the @480 above
     only reached the harness wrapper). Mirror the 12px onto the live #content so /courses and the
     single-course page narrow IDENTICALLY on mobile (both 12px) — matching single-course.css. */
  body.post-type-archive-course #content{padding-left:12px !important;padding-right:12px !important}
  .gpp-curric-spothead{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:8px;align-items:start;padding:16px 12px}
  .gpp-curric-spothead .art{grid-column:1;grid-row:1}
  .gpp-curric-spothead .gpp-curric-caret{grid-column:2;grid-row:1;justify-self:end}
  .gpp-curric-body{grid-column:1 / -1;grid-row:2}
  .gpp-curric-spothead .gpp-curric-cta{grid-column:1 / -1;grid-row:3}

  /* Ring scale-down with legibility floor (RESP-02 / D-03 — 108px, NEVER below) */
  .gpp-curric-spothead .art svg{width:108px;height:auto}

  /* Progress bar full-width Row 3 (D-02) */
  .gpp-curric-body .gpp-curric-pwrap{max-width:none;width:100%}

  /* Full-width CTA + 44px touch floor (RESP-03 / D-05) */
  .gpp-curric-cta{width:100%;margin-left:0;min-height:44px;display:flex;align-items:center;justify-content:center}

  /* Caret / section-head / lesson-row tap areas >=44px (RESP-03 / D-05 — glyphs unchanged, padded via min-height/min-width) */
  .gpp-curric-caret{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .gpp-curric-sechead{min-height:44px}
  /* IN-03 polish (Phase-4 UAT): single-line lesson rows vertically centered in the 44px tap
     target (was flex-start, which top-aligned the play chip in the taller mobile row). */
  .gpp-curric-lrow{min-height:44px;align-items:center}
  .gpp-curric-les-pad{padding:2px 0 10px 24px}

  /* Section-panel alignment (Phase-4 UAT): the mobile card head is padding:16px 12px (12px
     sides), but the desktop §5 sec-wrap keeps 18px sides — so the section disclosure sat 6px
     indented past the mobile card head. Align the panel's left/right edge to the mobile head.
     Mobile-ONLY: the desktop §5 sec-wrap (18px sides, already aligned to the 18px desktop head)
     stays frozen. */
  .gpp-curric-sec-wrap{padding-left:12px;padding-right:12px}

  /* H1 no-overflow hard gate (RESP-01 / D-06 — 33px -> 24px, letter-spacing .3px -> .2px) */
  .gpp-curric-top h1,.gpp-curric-h1{font-size:24px;letter-spacing:.2px;line-height:1.2}

  /* Mobile type scale-downs (D-06 — only these four roles) */
  .gpp-curric-t{font-size:15px;line-height:1.35}
  .gpp-curric-kicker{font-size:11px;letter-spacing:2px}
  .gpp-curric-progtxt{font-size:12px}

  /* Overall progress label-over-bar, full-width (RESP-04 / D-06) */
  .gpp-curric-prog{flex-direction:column;align-items:stretch;gap:8px}
  .gpp-curric-prog .gpp-curric-bar{max-width:none}
}

/* ------------------------------------------------------------
   9. Focus indicator (Phase 4, A11Y-02 / D-07 — REVERSED by Phase-4 UAT)
   ------------------------------------------------------------
   :focus-visible (keyboard-only) — the gold outline shows ONLY on
   keyboard focus (Tab), never lingering after a mouse click. This
   REVERSES the earlier D-07 founder override (which used plain
   :focus ALWAYS — outline even after a mouse click). The Phase-4
   UAT founder decision is now :focus-visible (keyboard-only); do
   NOT "correct" it back to plain :focus. A11Y-02 still holds —
   keyboard focus is indicated (WCAG 2.4.7). 2px gold, square
   (follows the box; the global *{border-radius:0} keeps it
   square), flat (no glow ring), no underline.

   ONE global grouped rule across all five interactive controls
   the card emits: the caret <button>, the section-head <button>,
   the active CTAs (.gpp-curric-cta-done/-cont/-start <a>), the
   lesson rows (.gpp-curric-lrow <a>), and the dormant Unlock
   (.gpp-curric-cta-lock <button disabled aria-disabled>). The
   base class .gpp-curric-cta is used so the rule catches all
   five CTA states including the lock (it gets the outline IF it
   can take focus; it stays non-actionable).

   This rule is ADDITIVE (it adds an outline on focus and alters
   NO layout), so it is desktop-safe and mobile-safe alike — it
   lives OUTSIDE the breakpoint block, applying at every viewport.
   No new token (the focus color reuses var(--gpp-orange), not
   the bare hex). The default outline is never stripped without
   the gold replacement; no glow shadow; no underline.
   ------------------------------------------------------------ */
.gpp-curric-caret:focus-visible,
.gpp-curric-sechead:focus-visible,
.gpp-curric-cta:focus-visible,
.gpp-curric-lrow:focus-visible,
.gpp-curric-filter-btn:focus-visible{outline:2px solid var(--gpp-orange);outline-offset:2px}

/* ============================================================
   10. LifterLMS loop-list reset (Phase 4 UAT — full-width single column)
   ------------------------------------------------------------
   ADDITIVE — the frozen §1-§9 rules above are NOT touched. This
   block fixes the founder's main UAT complaint: the [lifterlms_courses]
   shortcode wraps every card in <ul class="llms-loop-list llms-cols-N">
   / <li class="llms-loop-item gpp-curric-spot">. Nothing above reset
   the browser-default <ul> indent (~40px padding-inline-start) or
   LifterLMS's multi-column .llms-cols-N grid, so on the live site the
   cards were inset ~40px from the left (mis-aligned with the full-width
   .gpp-curric-grouplabel / .gpp-curric-theorynote, which are plain divs)
   AND would tile into columns instead of one full-width card per row.

   We target `.llms-loop-list` — the class present on BOTH the live
   shortcode <ul> AND the harness <ul>. We do NOT target .gpp-curric-band
   (that class is HARNESS-ONLY, added by test-harness/stubs.php's
   do_shortcode shim; it does NOT exist on the live <ul>).

   SCOPE SAFETY: curriculum.css is conditionally enqueued ONLY on the
   catalog page (is_courses()), so this bare `.llms-loop-list` selector
   cannot bleed site-wide. NOTE: the harness is a zero-WordPress static
   proof and CANNOT load LifterLMS's .llms-cols-N grid CSS, so the
   multi-column override is fully verifiable only on the live site; the
   harness proves the bare-<ul> indent/bullet reset (the founder's
   visible left-alignment fix). The Next-Up <ul class="llms-loop-list
   gpp-curric-nextup-list"> (a single card) is correctly full-width too.

   The !important on width/max-width/float is REQUIRED to defeat
   LifterLMS's higher-specificity `.llms-loop-list.llms-cols-N
   .llms-loop-item` grid rules on the live site.

   GAP PRESERVED: the §5 .gpp-curric-spot sets margin-bottom:12px, but the
   reset selector `.llms-loop-list>.llms-loop-item` (specificity 0,2,0)
   outranks `.gpp-curric-spot` (0,1,0), so the gap MUST be carried in the
   reset itself — margin:0 0 12px (NOT margin:0, which would zero it).

   Brand laws hold: no border-radius, no box-shadow, no bare hex, no
   underline, no new token (layout props only).
   ============================================================ */
.llms-loop-list{list-style:none;margin:0;padding:0;display:block}
.llms-loop-list>.llms-loop-item{width:100% !important;max-width:none !important;float:none !important;list-style:none;margin:0 0 12px;padding:0}

/* ============================================================
   11. Per-section "Only unlocked" filter (logged-in)
   ------------------------------------------------------------
   A segmented All / Unlocked control on the right of each
   .gpp-curric-grouplabel header (the .gpp-curric-ln flex:1 spacer
   pushes it to the right edge). PHP (gpp_curriculum_group_toggle)
   emits it logged-in-ONLY and HIDDEN; curriculum.js un-hides it
   ONLY on a section with BOTH locked and unlocked courses (a real
   mix worth filtering), wires it, and persists the choice per
   section. Activating "Unlocked" adds .gpp-curric-unlocked-only to
   the band <ul.llms-loop-list> (the class present LIVE and in the
   harness — NOT .gpp-curric-band, which is harness-only, §10),
   hiding that band's locked cards.

   ADDITIVE + inert without JS (the control ships hidden, un-hidden
   only by curriculum.js). Brand laws hold: square (the §1
   *{border-radius:0} reset), flat, no underline, tokens only, no
   new token. Buttons are real <button>s, so they carry their own
   native-chrome reset here (do not rely on Divi).
   ------------------------------------------------------------ */
.gpp-curric-filter{display:inline-flex;flex:0 0 auto;border:1px solid var(--gpp-line)}
.gpp-curric-filter[hidden]{display:none}            /* keep hidden visible-state off (overrides inline-flex via higher specificity) */
.gpp-curric-filter-btn{appearance:none;-webkit-appearance:none;margin:0;background:transparent;border:0;cursor:pointer;font-family:var(--gpp-font);font-size:11.5px;font-weight:600;letter-spacing:.04em;line-height:1;color:var(--gpp-dim);padding:6px 13px;transition:background-color .15s ease,color .15s ease}
.gpp-curric-filter-btn+.gpp-curric-filter-btn{border-left:1px solid var(--gpp-line)}
.gpp-curric-filter-btn:not(.is-on):hover{color:var(--gpp-ink)}
.gpp-curric-filter-btn.is-on{background:var(--gpp-orange);color:var(--gpp-card)}     /* gold fill, navy text — matches the CTA family */
.gpp-curric-unlocked-only .gpp-curric-spot.gpp-curric-lock{display:none}            /* the filter: hide locked cards in a filtered band */

@media (max-width:480px){
  /* Keep the control on the header row; the .gpp-curric-ln spacer absorbs the slack. */
  .gpp-curric-filter-btn{padding:6px 11px}
}