/* =====================================================================
   warm-lessons-2026-10.css  -  the approved "warm bands" design
   (site-contrast/v2-warm.css, live on the public pages since
   2026-10-10) carried into the GATED course pages:
     /learn-anbs8hhbwd/   course home, lesson-01..26, questions hub
     /course/login/       student login (+ the adhdtestingmadesimple.com copy)
   Served as /css/warm-lessons-2026-10.css and linked AFTER
   /css/warm-2026-10.css, both as the last two lines of <head>
   (adhd-course-lesson-area/build.py, course-gate/build_login.py).

   The public sheet keys on the site's inline styles, which these pages
   do not use (their look comes from learn.css / the login page's own
   <style>), so this sheet applies the same palette to the gated pages'
   own class names. Every selector is scoped to that markup -
     main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub])
       (the lesson-area page wrapper; written main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) in the source)
     main>.lg  (the login page)
   - so the sheet is inert anywhere else. Same tokens as v2-warm.css
   (redeclared here so the sheet also works on its own).

   Kept exactly as today, like the public pages: the site header and
   announcement strip, the breadcrumb / previous-next row, the lesson
   and hub title block (.lhead), the course-home opening block
   (.hhero), the login page's eyebrow / title / lead. The footer gets
   its fixes from the public sheet (same footer markup).

   Below the title, as on the public pages:
     - small grey / gold text darkened to AA (#625B48 muted, #7A5B0B
       gold), through the three custom properties learn.css paints
       its small text with
     - white cards: gold top edge + soft shadow (lesson sidebar cards,
       quiz, case, module cards, next/previous, Q&A cards, login card)
     - the ink "Key points" card: gold edge, like the ink cards on the
       public pages
     - sand surfaces a step deeper (#EEE3C7): "In practice", the
       additional-information panel, icon tiles, the Q&A board
     - gold-tint panels (#F7EBC5): the knowledge check, the Q&A
       compose box, Dr. W's replies, the course-materials band on the
       course home; alternating sand bands behind the course-home
       arcs, edge to edge
     - a short gold rule under section headings
   Nothing changes size or position: panels are pseudo-elements behind
   the section and border-image fills (ink overflow only), edges are
   box-shadows. One exception: the previous/next cards under a lesson's
   Q&A board move down 20px to clear the board's panel.

   Contrast (WCAG 2.x) of every colour this sheet puts text on:
     #625B48 muted   white 6.8  cream 6.4  sand 5.3  tint 5.7
     #7A5B0B gold    white 6.3  cream 5.9  sand 4.9  tint 5.3
     #3E3A2F body    sand 9.5   tint 10.2   #5C574B sub  sand 5.6  tint 6.0
     #14120D ink     sand 14.7  tint 15.7
   (checked by contrast_check.py next to the source, 2026-10-10)
   Source: generated from warm-lessons.tpl.css by build_lessons.py
   (scratchpad, 2026-10-10); the only macro is the main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) prefix, so this
   file can also be edited directly.
   ===================================================================== */

:root{
  --w-ink:#14120D;
  --w-cream:#FAF8F2;
  --w-sand:#EEE3C7;
  --w-sand-line:#DCCCA4;
  --w-tint:#F7EBC5;
  --w-tint-line:#E6D49B;
  --w-gold:#C9A227;
  --w-gold-hi:#D9B54A;
  --w-gold-text:#7A5B0B;
  --w-muted:#625B48;
  --w-on-ink:#F5F1E6;
  --w-on-ink-2:#D9D3C2;
  --w-on-ink-3:#B9B29F;
  --w-cap:0 -3px 0 0 var(--w-gold);
  --w-shadow:0 1px 2px rgba(20,18,13,.06),0 10px 28px rgba(20,18,13,.09);
}

/* ---------------------------------------------------------------------
   1. Text below the title. learn.css paints its small gold text with
      --gold-d, its small grey text with --mute and its sand surfaces
      with --soft, so the AA values go in through those. The title
      block, the breadcrumb row and the course-home opening block get
      today's values back, so they do not change (the public sheet's
      "body a" rule reaches the breadcrumb link: reset too).
   --------------------------------------------------------------------- */
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]){--gold-d:var(--w-gold-text);--mute:var(--w-muted);--soft:var(--w-sand)}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) :is(.lhead,.crumbs,.hhero){--gold-d:#A8871F;--mute:#8A8371;--soft:#F2EEE2}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .crumbs a:not(.pill){color:#A8871F}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .crumbs a:not(.pill):hover{color:#14120D}

/* ---------------------------------------------------------------------
   2. Section headings: a short gold rule underneath (takes no space)
   --------------------------------------------------------------------- */
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) :is(.content>section:not(.qa)>h2,.content>.practice>h2,.arc>h2){position:relative}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) :is(.content>section:not(.qa)>h2,.content>.practice>h2,.arc>h2)::after{
  content:"";position:absolute;left:0;bottom:-8px;width:40px;height:2px;background:var(--w-gold);pointer-events:none}

/* ---------------------------------------------------------------------
   3. Cards: white, with a gold top edge and a soft shadow
   --------------------------------------------------------------------- */
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) :is(.side>.card,.qq,.case,.mod,.nextprev a,.callout:not(.warning,.note),dl.terms,
        .qa-th,.qa-askrow,.qa-sum,.qa-empty,.qa-duo>.card,.card#live-qa,.res>.card,.arc>.card){
  box-shadow:var(--w-cap),var(--w-shadow)}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .qa-dlg{box-shadow:var(--w-cap),0 24px 60px rgba(20,18,13,.25)}
/* the learning objectives and the quoted scripts already carry a gold left edge: shadow only */
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) :is(.obj,.script){box-shadow:var(--w-shadow)}
/* card hover: gold edge (as the public link cards) */
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) :is(.nextprev a,.qa-sum):hover{border-color:var(--w-gold)}
/* the ink "Key points" card */
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .keypts{box-shadow:var(--w-cap),0 12px 30px rgba(20,18,13,.16)}
/* tables: gold edge above the ink header row, soft shadow, sand zebra rows */
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .content table{box-shadow:var(--w-cap),var(--w-shadow)}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .content tbody tr:nth-child(even) td{background:#FBF8EF}

/* ---------------------------------------------------------------------
   4. Sand surfaces a step deeper, with their hairlines to match
   --------------------------------------------------------------------- */
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) :is(.practice,.addl,.callout.note,.qa-msg:not(.ok,.err)){border-color:var(--w-sand-line)}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .practice{background:var(--w-sand)}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .qa-staff{background:var(--w-sand)}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .les:not(.done) .dot{background:var(--w-sand)}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .qa-replies{border-left-color:var(--w-sand-line)}
/* white cards sitting on sand: sand hairline, gold edge */
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .practice :is(.script,.case,.pit div){border-color:var(--w-sand-line)}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .practice .pit div{box-shadow:var(--w-cap),var(--w-shadow)}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .practice .script{border-left-color:var(--w-gold)}

/* ---------------------------------------------------------------------
   5. Gold-tint panels
   --------------------------------------------------------------------- */
/* lesson: the knowledge check. The panel is a pseudo-element behind the
   section's own content (isolation keeps z-index:-1 inside the section),
   so it can start below the key-terms card above and nothing moves. */
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .content>section#knowledge-check{position:relative;isolation:isolate}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .content>section#knowledge-check::before{
  content:"";position:absolute;z-index:-1;inset:30px -20px -20px -20px;background:var(--w-tint);border-radius:6px;pointer-events:none}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .content>section#knowledge-check .qq{border-color:var(--w-tint-line)}
/* Q&A: the compose box, the report box, Dr. W's replies */
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .qa-compose{background:var(--w-tint);border-color:var(--w-tint-line)}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .qa-th .qa-compose{background:#FBF7EA}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .qa-compose :is(.qa-rules,.qa-chk.req){border-color:var(--w-tint-line)}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .qa-report{background:var(--w-tint);border-color:var(--w-tint-line)}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .qa-rp.staff{background:var(--w-tint)}

/* ---------------------------------------------------------------------
   6. The Q&A board on a sand panel (lesson pages and the hub's General
      board): its white cards get sand hairlines; the compose box (tint
      on sand) a slightly deeper one. Buttons with a state colour of
      their own (.go, .danger, pressed) keep it.
   --------------------------------------------------------------------- */
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .content>section.qa{position:relative;isolation:isolate;border-top-color:transparent}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .content>section.qa::before{
  content:"";position:absolute;z-index:-1;inset:-8px -20px -20px -20px;background:var(--w-sand);border-radius:6px;pointer-events:none}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .content>section.qa :is(.qa-th,.qa-askrow,.qa-empty,.qa-wait,.qa-msg:not(.ok,.err)){border-color:var(--w-sand-line)}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .content>section.qa .qa-th.pinned{border-left-color:var(--w-gold)}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .content>section.qa :is(.qa-sbtn,.qa-btn2,.qa-chip):not(.go,.danger,[aria-pressed=true]){border-color:#CDBD95}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .content>section.qa :is(.qa-sbtn,.qa-btn2,.qa-chip):not(.go,.danger,[aria-pressed=true]):hover{border-color:var(--w-gold)}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .content>section.qa .qa-compose{border-color:#D9C48A}
/* the next/previous cards sit 26px under the board: room for the panel's 20px edge */
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .content>section.qa+.nextprev{margin-top:46px}

/* phones: the page gutter is 18px, so the panels reach 12px out, not 20 */
@media (max-width:700px){
  main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .content>section#knowledge-check::before,main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub]) .content>section.qa::before{left:-12px;right:-12px}
}

/* ---------------------------------------------------------------------
   7. Course home: bands edge to edge (border-image paints outside the
      box and takes no space): arcs 2, 4 and 6 on sand, the course
      materials on gold tint
   --------------------------------------------------------------------- */
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub])[data-home]>.arc:nth-of-type(odd):not(#materials){
  border-image:linear-gradient(var(--w-sand),var(--w-sand)) fill 0 / 0 / 22px 100vw 22px}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub])[data-home]>.arc:nth-of-type(odd):not(#materials) .mod{border-color:var(--w-sand-line)}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub])[data-home]>.arc#materials{
  border-image:linear-gradient(var(--w-tint),var(--w-tint)) fill 0 / 0 / 14px 100vw 30px}
main>.wrap:is([data-lesson-page],[data-home],[data-qa-hub])[data-home]>.arc#materials .card{border-color:var(--w-tint-line)}

/* ---------------------------------------------------------------------
   8. Login page (/course/login/ and the course-domain copy): the form
      card gets the gold edge, the "link sent" notice goes sand; the
      title block stays as it is
   --------------------------------------------------------------------- */
main>.lg .card{box-shadow:var(--w-cap),var(--w-shadow)}
main>.lg .msg.ok{background:var(--w-sand);border-color:var(--w-sand-line)}