/* ═══════════════════════════════════════════════════════════════════════
   design-system.css — the visual layer.

   Loaded LAST on every page, so it governs the look without any of the
   pages having to be rebuilt. Structure, copy, navigation and learning
   logic are untouched; this file only decides how things appear.

   Principles, in order:

   1. Nothing shouts. No large blocks of colour, no dark panels. Weight
      comes from space and type, not from filling the screen.
   2. Nothing is too small to read. This course is used by people with
      brain fog. Hierarchy is made with spacing, weight and grouping,
      never by shrinking text or fading it out.
   3. One product, not twenty pages. One radius scale, one shadow scale,
      one set of buttons, one motion curve.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens ─────────────────────────────────────────────────────────
   The page stylesheets already use these variable names. Redefining them
   here re-skins the entire application in one place.                     */
:root{
  /* Surfaces. The canvas is a neutral grey, the cards are pure white, and
     the gap between them is what makes a card look like an object sitting
     on a page rather than a rectangle drawn on it. The old beige did the
     opposite: it dominated, and everything sank into it. */
  /* THE CANVAS.
     Previous attempts kept landing back on beige because the value was
     warm at the expense of being light: #F8F6F3 is 5 points of yellow
     below white, and at that strength the warmth reads as cream, not as
     light. The fix is to take almost all of it out. #FDFCFB is one point
     of warmth. It reads as white; you only notice the warmth if you put
     pure white next to it, which is exactly what the cards do. */
  --ds-bg:#FDFCFB;
  --ds-surface:#FFFFFF;    /* every card, panel and field.           */
  --ds-raised:#FFFFFF;

  /* Wells only: progress tracks, code, inset areas. NEVER a card. A card
     inside a card is white and floats; it does not become a grey box. */
  --ds-sunken:#F6F6F5;
  --ds-hover:#F4F4F2;

  /* Lines. Hairlines, never outlines. */
  --ds-line:#E9E6E1;
  --ds-line-strong:#D8D4CE;

  /* Ink. Every step passes AA on both the canvas and white. */
  --ds-ink:#14161B;        /* headings, primary text       15.9:1 */
  --ds-ink-2:#3B414E;      /* body, supporting text         9.4:1 */
  --ds-ink-3:#596072;      /* metadata, labels, captions    5.9:1 */

  /* Accent. Amber stays, deepened until it clears 4.5:1 as text on the
     background AND carries white text when used as a button fill. */
  --ds-accent:#8C5A10;
  --ds-accent-hover:#734A0B;
  --ds-accent-soft:#FCF4E7;
  --ds-accent-line:#EBD9BA;

  --ds-green:#1B6B4A;
  --ds-green-soft:#E9F4EF;
  --ds-green-line:#C9E4D7;
  --ds-red:#A63A22;
  --ds-red-soft:#FBEEEA;
  --ds-red-line:#F0D2C8;
  --ds-blue:#2A5FB8;
  --ds-blue-soft:#EEF3FC;

  /* One radius scale. */
  --ds-r-sm:8px;
  --ds-r:12px;
  --ds-r-lg:16px;
  --ds-r-xl:20px;

  /* One shadow scale, built in three layers: a hairline of contact, a
     close soft shadow, and a wide ambient one. That is what separates a
     card that floats from a rectangle with a drop shadow. */
  --ds-shadow-sm:
    0 0 0 1px rgba(28,24,18,0.03),
    0 1px 2px rgba(28,24,18,0.05),
    0 2px 6px -2px rgba(28,24,18,0.05);
  --ds-shadow:
    0 0 0 1px rgba(28,24,18,0.03),
    0 1px 2px rgba(28,24,18,0.05),
    0 6px 16px -6px rgba(28,24,18,0.09),
    0 16px 40px -24px rgba(28,24,18,0.12);
  --ds-shadow-lift:
    0 0 0 1px rgba(28,24,18,0.04),
    0 2px 4px rgba(28,24,18,0.05),
    0 12px 28px -10px rgba(28,24,18,0.12),
    0 28px 60px -32px rgba(28,24,18,0.16);
  --ds-shadow-lg:
    0 0 0 1px rgba(28,24,18,0.04),
    0 2px 4px rgba(28,24,18,0.05),
    0 20px 50px -18px rgba(28,24,18,0.16);

  /* One motion curve, one duration. Nothing jumps. */
  --ds-ease:cubic-bezier(0.32, 0.72, 0, 1);
  --ds-fast:160ms;
  --ds-slow:320ms;

  /* ── The page stylesheets' own names, re-pointed ──
     --off-white was the beige, used both for the page and for small fills
     like chips and list rows. It now points at white: those fills become
     cards that lift off the canvas instead of dissolving into it. The page
     background is set on <body> below, not through this name.            */
  --off-white:var(--ds-surface);
  --white:var(--ds-surface);
  --navy:var(--ds-ink);
  --navy-mid:var(--ds-ink-2);
  --text:var(--ds-ink);
  --text-mid:var(--ds-ink-2);
  --text-light:var(--ds-ink-3);
  --border:var(--ds-line);
  --accent:var(--ds-accent);
  --accent-light:var(--ds-accent-line);
  --blue:var(--ds-blue);

  --tf-navy:var(--ds-ink);
  --tf-navy-soft:var(--ds-ink-2);
  --tf-ink:var(--ds-ink);
  --tf-mid:var(--ds-ink-2);
  --tf-light:var(--ds-ink-3);
  --tf-border:var(--ds-line);
  --tf-surface:var(--ds-surface);
  --tf-wash:var(--ds-sunken);
  --tf-accent:var(--ds-accent);
  --tf-accent-soft:var(--ds-accent-soft);
  --tf-green:var(--ds-green);
  --tf-green-soft:var(--ds-green-soft);
  --tf-blue:var(--ds-blue);
  --tf-blue-soft:var(--ds-blue-soft);

  --as-forest:var(--ds-green);
  --as-forest-soft:var(--ds-green-soft);
  --as-coral:#B85A38;
  --as-coral-soft:#FAECE6;

  /* Inline SVG masks. Real icons, tinted by currentColor, no image files
     and no icon font. Same stroke weight as every other icon in the app. */
  --ds-icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ds-icon-check-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --ds-icon-x-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
}

/* ── 2 · Base ───────────────────────────────────────────────────────── */
html{ -webkit-text-size-adjust:100%; background:var(--ds-bg); }

/* Ambient light.
   The earlier version of this made the problem worse: the gradients were
   warm yellow at 55% opacity, so the "light" was really more cream poured
   over the top. Light is not colour. This version is almost entirely
   WHITE light lifting parts of an already near-white canvas, with a single
   very faint cool gradient at the far edge to keep it from going flat.

   Three layers: a broad lift from the top, a soft diagonal sweep, and one
   cool breath bottom-right. Nothing here is visible as a shape; you should
   only notice that the page is not one dead value. */
body{
  background-color:var(--ds-bg) !important;
  background-image:
    radial-gradient(1200px 700px at 22% -12%, rgba(255,255,255,0.95), transparent 58%),
    linear-gradient(118deg, transparent 26%, rgba(255,255,255,0.75) 44%, transparent 62%),
    radial-gradient(900px 620px at 100% 104%, rgba(243,245,250,0.60), transparent 60%) !important;
  background-attachment:fixed !important;
  background-repeat:no-repeat !important;
  color:var(--ds-ink-2);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-ligatures:common-ligatures;
}

::selection{ background:var(--ds-accent-soft); color:var(--ds-ink); }

/* A single, unmissable focus ring everywhere. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible{
  outline:2px solid var(--ds-accent);
  outline-offset:2px;
  border-radius:var(--ds-r-sm);
}

/* ── 3 · Typography ─────────────────────────────────────────────────────
   Bigger steps between levels, more air around them, and a floor under
   the smallest text.                                                     */
h1, h2, h3, .pg-title, .ob-title, .co-title, .as-res-title, .as-head h1{
  color:var(--ds-ink);
  letter-spacing:-0.015em;
}
h1, .pg-title, .ob-title, .co-title{ line-height:1.12; }
h2{ line-height:1.2; }

p, li{ color:var(--ds-ink-2); }

/* Eyebrows and section labels: small, but never faint. */
.pg-eyebrow, .ob-eyebrow, .co-eyebrow, .as-step, .as-panel-title,
.tf-intro-label, .tf-recap-label, .cd-final-kicker, .as-callout-kicker,
.pg-start-kicker, .tf-lesson-kicker, .tf-footer-legal{
  font-size:0.8125rem !important;
  font-weight:600;
  letter-spacing:0.1em;
  color:var(--ds-ink-3);
}
.pg-eyebrow, .ob-eyebrow, .co-eyebrow, .pg-start-kicker, .as-callout-kicker{
  color:var(--ds-accent);
}

/* Metadata that the learner navigates by. Secondary, never squinted at. */
.pg-when, .pg-what-desc, .cd-sec-meta, .as-fig-label, .as-fig-foot,
.as-cat-tag, .tf-lc-sub, .as-callout-sub, .tf-crumbs-inner{
  font-size:0.9rem !important;
  color:var(--ds-ink-3);
}

/* ── 4 · No dark blocks ─────────────────────────────────────────────────
   Every full-width navy panel becomes a light surface. Emphasis comes
   from a hairline, a little elevation and one accent detail.             */
.hero, .co-where, .ob-cta, .cd-final, .tf-lesson, .callout, .cta-card,
.commitment-card, .memory-panel, .plan-reminder, .results-panel, .hiw,
.complete-section, .emap-hdr, .sched-hdr, .sleep-header,
.activity-section-header, .tf-finalnext{
  background:var(--ds-surface) !important;
  border:1px solid var(--ds-line);
  box-shadow:var(--ds-shadow);
  color:var(--ds-ink-2);
}

/* The hero is a page header, not a banner. Its surface is defined in 15f,
   together with the rest of the module stack. */
.hero{ text-align:left !important; }

/* The reading indicator belongs at the top of the viewport, not adrift in
   the page. Thin, quiet, and it follows you down. */
.progress-bar-wrap{
  position:sticky !important;
  top:0; z-index:110;
  height:3px !important;
  background:var(--ds-line) !important;
  border:none !important;
}
.progress-bar{
  height:3px !important;
  background:var(--ds-accent) !important;
  border-radius:0 999px 999px 0;
  transition:width 120ms linear;
}
.hero h1, .hero .hero-title{ color:var(--ds-ink) !important; }
.hero p, .hero .hero-sub, .hero .hero-meta{ color:var(--ds-ink-2) !important; }
.hero .eyebrow, .hero .hero-eyebrow, .hero .module-label{ color:var(--ds-accent) !important; }

/* Anything that used to sit on navy was white text. Bring it back to ink. */
.co-where *, .ob-cta *, .cd-final *, .tf-lesson *, .callout *, .cta-card *,
.commitment-card *, .memory-panel *, .plan-reminder *, .results-panel *,
.hiw *, .complete-section *, .emap-hdr *, .sched-hdr *, .sleep-header *,
.activity-section-header *, .tf-finalnext *{
  color:inherit;
}
.co-where-name, .ob-cta-title, .cd-final-title, .tf-lesson-title,
.tf-finalnext-label, .as-callout-title{
  color:var(--ds-ink) !important;
}
.co-where-desc, .co-where-note, .ob-cta-sub, .cd-final-body,
.tf-lesson-sub, .tf-finalnext-body{
  color:var(--ds-ink-2) !important;
}

/* Rounded light panels, with real padding. */
.co-where, .ob-cta, .cd-final, .tf-lesson, .callout, .cta-card,
.commitment-card, .memory-panel, .plan-reminder, .results-panel, .hiw,
.tf-finalnext{
  border-radius:var(--ds-r-lg) !important;
  padding:1.9rem 1.8rem !important;
}

/* The completion panel keeps its significance through an accent rule. */
.cd-final{
  box-shadow:var(--ds-shadow-lift) !important;
  text-align:left !important;
}
.cd-final-figs{ margin-left:0 !important; }
.cd-final-fig{
  background:var(--ds-sunken) !important;
  border:1px solid var(--ds-line) !important;
}
.cd-final-fig-val{ color:var(--ds-ink) !important; }
.cd-final-fig-val.initial{ color:var(--as-coral) !important; }
.cd-final-fig-val.final{ color:var(--ds-green) !important; }
.cd-final-fig-label{ color:var(--ds-ink-3) !important; font-size:0.85rem !important; }
.cd-final-quote{
  background:var(--ds-sunken) !important;
  border:1px solid var(--ds-line) !important;
}
.cd-final-quote blockquote{
  color:var(--ds-ink-2) !important;
  border-left-color:var(--ds-green) !important;
}
.cd-final-quote-label{ color:var(--ds-ink-3) !important; }
.cd-final-actions{ justify-content:flex-start !important; }

/* Lesson completion block: light, with the accent carried by the icon. */
.tf-lesson{ text-align:left !important; }
.tf-lesson-kicker{ color:var(--ds-ink-3) !important; }
.tf-lesson-kicker svg{ color:var(--ds-accent) !important; }
.tf-lesson-kicker.done, .tf-lesson-kicker.done svg{ color:var(--ds-green) !important; }
.tf-lesson-sub{ margin-left:0 !important; }
.tf-lesson-choices{ margin-left:0 !important; }
.tf-lesson-choice.stay{
  background:var(--ds-surface) !important;
  border:1px solid var(--ds-line) !important;
  color:var(--ds-ink) !important;
}
.tf-lesson-choice.stay:hover{ background:var(--ds-hover) !important; }
.tf-lesson .tf-modbar-finish{ color:var(--ds-ink-3) !important; }
.tf-lesson .tf-modbar-finish:hover{ color:var(--ds-ink) !important; }

/* Table headers were navy bars. */
.refill-table th{
  background:var(--ds-sunken) !important;
  color:var(--ds-ink) !important;
  border-bottom:1px solid var(--ds-line-strong);
  font-weight:600;
}

/* The footer, on the site pages inside the app. */
.footer-bg{
  background:var(--ds-bg) !important;
  border-top:1px solid var(--ds-line);
}
.footer-bg *{ color:var(--ds-ink-2) !important; }
.footer-bg a:hover{ color:var(--ds-ink) !important; }
.footer-glow{ display:none !important; }
.footer-logo{ color:var(--ds-ink) !important; }

/* ── 5 · Buttons ────────────────────────────────────────────────────────
   Three levels: primary (accent), secondary (outline), quiet (text).     */
.as-btn, .tf-lesson-btn, .save-btn, .savebtn, .rc-btn, .btn-dl,
.btn-download, .save-btn-small, .cd-final-btn, .pg-start-btn,
.ob-cta-btn, .ob-cta-alt, .tf-reset-btn, .nav-link.next, .nl.nx{
  font-family:'Jost', sans-serif;
  border-radius:var(--ds-r) !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-weight:500;
  transition:background var(--ds-fast) var(--ds-ease),
             border-color var(--ds-fast) var(--ds-ease),
             color var(--ds-fast) var(--ds-ease),
             box-shadow var(--ds-fast) var(--ds-ease),
             transform var(--ds-fast) var(--ds-ease);
}

/* Primary */
.as-btn.primary, .tf-lesson-btn, .save-btn, .savebtn, .rc-btn, .btn-dl,
.btn-download, .save-btn-small, .cd-final-btn.primary, .pg-start-btn,
.ob-cta-btn, .nav-link.next, .nl.nx, .tf-lesson-choice.go{
  background:var(--ds-accent) !important;
  border:1px solid var(--ds-accent) !important;
  color:#fff !important;
  box-shadow:var(--ds-shadow-sm);
}
.as-btn.primary:hover, .tf-lesson-btn:hover, .save-btn:hover, .savebtn:hover,
.rc-btn:hover, .btn-dl:hover, .btn-download:hover, .save-btn-small:hover,
.cd-final-btn.primary:hover, .pg-start-btn:hover, .ob-cta-btn:hover,
.nav-link.next:hover, .nl.nx:hover, .tf-lesson-choice.go:hover{
  background:var(--ds-accent-hover) !important;
  border-color:var(--ds-accent-hover) !important;
  color:#fff !important;
  transform:translateY(-2px);
  box-shadow:var(--ds-shadow-lift);
}

/* Secondary */
.as-btn, .cd-final-btn.ghost, .ob-cta-alt, .tf-reset-btn{
  background:var(--ds-surface) !important;
  border:1px solid var(--ds-line-strong) !important;
  color:var(--ds-ink) !important;
}
.as-btn:hover, .cd-final-btn.ghost:hover, .ob-cta-alt:hover, .tf-reset-btn:hover{
  background:var(--ds-hover) !important;
  border-color:var(--ds-ink-3) !important;
  color:var(--ds-ink) !important;
  transform:translateY(-1px);
}
.as-btn.quiet{
  background:transparent !important;
  border-color:transparent !important;
  color:var(--ds-ink-3) !important;
}
.as-btn.quiet:hover{ background:var(--ds-hover) !important; color:var(--ds-ink) !important; }

/* Every button presses. */
.as-btn:active, .tf-lesson-btn:active, .save-btn:active, .savebtn:active,
.rc-btn:active, .cd-final-btn:active, .pg-start-btn:active,
.ob-cta-btn:active, .ob-cta-alt:active, .tf-reset-btn:active{
  transform:translateY(0) scale(0.985);
}

/* Comfortable targets. */
.as-btn, .tf-lesson-btn, .cd-final-btn, .pg-start-btn, .ob-cta-btn,
.ob-cta-alt, .tf-reset-btn, .rc-btn{
  min-height:46px;
  padding:0.8rem 1.4rem !important;
}

/* ── 6 · Surfaces and cards ────────────────────────────────────────────
   Cards only where they separate genuinely independent things. Where
   they remain, they are quiet: hairline, big radius, real padding.       */
.as-card, .as-panel, .as-fb-block, .tf-intro, .pg-what-item, .co-card,
.mod-card, .tf-recap, .as-callout, .cd-sec, .ob-item, .tf-reset,
.qr-card, .ci-item, .score-chip{
  background:var(--ds-surface) !important;
  border:1px solid var(--ds-line);
  border-radius:var(--ds-r-lg);
  box-shadow:var(--ds-shadow-sm);
  transition:border-color var(--ds-fast) var(--ds-ease),
             box-shadow var(--ds-slow) var(--ds-ease),
             transform var(--ds-slow) var(--ds-ease);
}
.as-card, .as-panel, .as-fb-block{ padding:2rem 1.9rem; }
.pg-what-item, .qr-card, .ci-item{ padding:1rem 1.15rem; border-radius:var(--ds-r) !important; }

/* Air between things, so the page breathes rather than stacks. */
.cd-acc{ display:flex; flex-direction:column; gap:0.85rem; }
.pg-what{ gap:0.85rem !important; }
.as-results{ gap:1.4rem !important; }
.as-fb{ gap:1.15rem !important; }

/* ── Micro-interactions ─────────────────────────────────────────────────
   Everything that responds does the same three things: lifts a little,
   deepens its shadow, and brightens its edge. Same curve, same duration,
   everywhere, so the whole interface feels like one material.            */
a.co-card, a.mod-card, a.pg-what-item, .as-callout, .qr-card, .ci-item,
.tf-card, .co-where-card, .ob-cta-btn, .tf-lesson-choice{
  transition:transform var(--ds-slow) var(--ds-ease),
             box-shadow var(--ds-slow) var(--ds-ease),
             border-color var(--ds-fast) var(--ds-ease),
             background var(--ds-fast) var(--ds-ease);
  will-change:transform;
}
/* How a surface lifts is defined once, in section 18. */

/* The dashboard entry point: one accent edge, nothing more. */
.pg-start{
  background:var(--ds-surface) !important;
  border:1px solid var(--ds-line) !important;
  border-radius:var(--ds-r-lg) !important;
  box-shadow:var(--ds-shadow-lift) !important;
  padding:2.2rem 2.3rem !important;
}
.pg-start-title{ font-size:1.6rem !important; }
.pg-start-blurb{ font-size:1rem !important; color:var(--ds-ink-2) !important; }

/* Assessment callouts. */
.as-callout{
  border-left:1px solid var(--ds-line) !important;
  box-shadow:var(--ds-shadow-sm);
  padding:1.5rem 1.7rem !important;
}
.as-callout.locked{ opacity:1 !important; background:var(--ds-sunken); }
.as-callout.locked .as-callout-title{ color:var(--ds-ink-3) !important; }

/* ── 7 · Navigation ────────────────────────────────────────────────────
   The bar and the breadcrumbs read clearly without drawing the eye.      */
.app-nav{
  background:rgba(255,255,255,0.82);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--ds-line);
}
.app-nav-inner{ height:64px; }
.app-brand-mark{
  background:var(--ds-ink) !important;
  border-radius:9px !important;
}
.app-nav-link{
  font-size:0.95rem !important;
  color:var(--ds-ink-3) !important;
  border-radius:var(--ds-r-sm) !important;
}
.app-nav-link:hover{ color:var(--ds-ink) !important; background:var(--ds-hover) !important; }
.app-nav-link.active{ color:var(--ds-ink) !important; font-weight:500; background:var(--ds-hover) !important; }
.app-nav-link.active::after{ background:var(--ds-accent) !important; }

.tf-crumbs{
  background:transparent;
  border-bottom:1px solid var(--ds-line);
}
.tf-crumbs-inner{ padding:0.85rem 2rem; font-size:0.9rem; }
.tf-crumb{ color:var(--ds-ink-3) !important; font-weight:400; }
.tf-crumb:hover{ color:var(--ds-ink) !important; }
.tf-crumb.current{ color:var(--ds-ink) !important; font-weight:600; }
/* The breadcrumb arrow was the same value as the hairlines, which made it
   invisible rather than quiet. Secondary is not the same as absent. */
.tf-crumb-sep, .tf-crumb-sep svg{ color:var(--ds-ink-3) !important; opacity:0.55; }
.tf-blank, .tf-blank svg{ color:var(--ds-ink-3) !important; opacity:0.7; }

/* ── 8 · Progress ──────────────────────────────────────────────────────
   One bar, everywhere, with a rounded track and an eased fill.           */
.pg-track, .pg-start-track, .as-bar, .mod-track, .tf-bar-track, progress{
  background:var(--ds-sunken) !important;
  border:1px solid var(--ds-line);
  border-radius:999px !important;
  overflow:hidden;
  height:9px;
}
.pg-fill, .pg-start-fill, .as-bar-fill, .mod-fill, .tf-bar-fill{
  border-radius:999px !important;
  transition:width 700ms var(--ds-ease);
}
.pg-fill, .pg-start-fill{ background:var(--ds-accent) !important; }
.as-bar.final .as-bar-fill{ background:var(--ds-green) !important; }
.as-bar.initial .as-bar-fill{ background:var(--as-coral) !important; }
.as-seg{ height:5px; border-radius:999px; background:var(--ds-line) !important; }
.as-seg.filled{ background:var(--ds-green) !important; }
.as-seg.at{ box-shadow:0 0 0 3px var(--ds-green-soft) !important; }
.pg-pct{ font-size:1.05rem !important; color:var(--ds-ink) !important; font-variant-numeric:tabular-nums; }

/* ── 9 · Status, badges, dots ──────────────────────────────────────── */
.pg-dot, .ci-tick{
  background:var(--ds-surface) !important;
  border:1px solid var(--ds-line) !important;
  color:var(--ds-ink-3) !important;
  width:1.55rem !important; height:1.55rem !important;
  transition:background var(--ds-fast) var(--ds-ease),
             border-color var(--ds-fast) var(--ds-ease),
             color var(--ds-fast) var(--ds-ease);
}
.pg-hist li.done .pg-dot, .ci-item.done .ci-tick{
  background:var(--ds-green-soft) !important;
  border-color:var(--ds-green-line) !important;
  color:var(--ds-green) !important;
}
.pg-hist li.current .pg-dot{
  background:var(--ds-accent-soft) !important;
  border-color:var(--ds-accent-line) !important;
  color:var(--ds-accent) !important;
}
.pg-hist li{ padding:0.75rem 0 !important; border-bottom:1px solid var(--ds-line) !important; }
.pg-hist li.locked{ opacity:0.62 !important; }
.pg-when.cur{ color:var(--ds-accent) !important; font-weight:600 !important; }

.qr-badge{
  border-radius:var(--ds-r-sm) !important;
  font-size:0.88rem !important;
  font-weight:600;
  transition:transform var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease);
}
.qr-badge:hover{ transform:translateY(-1px); box-shadow:var(--ds-shadow-sm); }

/* ── 10 · Accordions ─────────────────────────────────────────────────── */
.cd-sec, .ob-item{
  overflow:hidden;
  border-radius:var(--ds-r-lg) !important;
}
.cd-sec summary, .ob-item summary{
  padding:1.15rem 1.35rem !important;
  font-size:1.02rem !important;
  color:var(--ds-ink) !important;
  transition:background var(--ds-fast) var(--ds-ease);
}
.cd-sec summary:hover, .ob-item summary:hover{ background:var(--ds-hover) !important; }
.cd-sec[open], .ob-item[open]{
  border-color:var(--ds-line-strong) !important;
  box-shadow:var(--ds-shadow) !important;
}
.cd-chev, .ob-chev{ transition:transform var(--ds-slow) var(--ds-ease); color:var(--ds-ink-3); }
.cd-sec-icon{ color:var(--ds-accent) !important; }
.ob-item-num{
  background:var(--ds-accent-soft) !important;
  border-color:var(--ds-accent-line) !important;
  color:var(--ds-accent) !important;
  width:2rem !important; height:2rem !important;
  font-size:0.9rem !important;
}
.ob-item-body, .cd-sec-body{ font-size:1rem !important; color:var(--ds-ink-2) !important; }

/* ── 11 · Forms ──────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="number"],
input[type="time"], textarea, select, .as-field input, .as-fb-block textarea{
  background:var(--ds-surface);
  border:1px solid var(--ds-line-strong);
  border-radius:var(--ds-r) !important;
  color:var(--ds-ink);
  font-family:'Jost', sans-serif;
  font-size:1rem;
  line-height:1.7;
  padding:0.8rem 1rem;
  transition:border-color var(--ds-fast) var(--ds-ease),
             box-shadow var(--ds-fast) var(--ds-ease),
             background var(--ds-fast) var(--ds-ease);
}
input:hover, textarea:hover{ border-color:var(--ds-ink-3); }
input:focus, textarea:focus, select:focus{
  outline:none !important;
  border-color:var(--ds-accent) !important;
  box-shadow:0 0 0 3px var(--ds-accent-soft);
  background:var(--ds-surface) !important;
}
::placeholder{ color:var(--ds-ink-3); opacity:0.75; }

textarea{ min-height:130px; resize:vertical; }

input[type="checkbox"], input[type="radio"]{
  accent-color:var(--ds-accent);
  width:20px; height:20px;
  cursor:pointer;
}

input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px;
  background:var(--ds-sunken);
  border:1px solid var(--ds-line);
  cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:var(--ds-surface);
  border:2px solid var(--ds-accent);
  box-shadow:var(--ds-shadow-sm);
  transition:transform var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease);
}
input[type="range"]::-webkit-slider-thumb:hover{ transform:scale(1.12); box-shadow:var(--ds-shadow); }
input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:var(--ds-surface); border:2px solid var(--ds-accent);
  box-shadow:var(--ds-shadow-sm);
}

/* Reflection areas should feel like writing somewhere good. */
.reflection textarea, .reflection-box textarea{
  background:var(--ds-surface);
  min-height:150px;
  padding:1rem 1.15rem;
}
.reflection-label{
  background:transparent !important;
  color:var(--ds-accent) !important;
  padding:0 !important;
  font-size:0.8125rem !important;
  font-weight:600 !important;
  letter-spacing:0.1em !important;
  border-radius:0 !important;
}

/* ── 12 · Quiz ───────────────────────────────────────────────────────── */
.quiz, .quiz-box, .quiz-card{
  background:var(--ds-surface) !important;
  border:1px solid var(--ds-line) !important;
  border-radius:var(--ds-r-lg) !important;
  box-shadow:var(--ds-shadow-sm);
  padding:1.7rem 1.6rem !important;
}
.quiz-option, .option, .answer-option{
  border-radius:var(--ds-r) !important;
  border:1px solid var(--ds-line-strong) !important;
  background:var(--ds-surface) !important;
  min-height:48px;
  transition:border-color var(--ds-fast) var(--ds-ease),
             background var(--ds-fast) var(--ds-ease),
             transform var(--ds-fast) var(--ds-ease);
}
.quiz-option:hover, .option:hover, .answer-option:hover{
  border-color:var(--ds-ink-3) !important;
  background:var(--ds-hover) !important;
  transform:translateX(2px);
}
.quiz-option.correct, .option.correct, .answer-option.correct{
  border-color:var(--ds-green-line) !important;
  background:var(--ds-green-soft) !important;
  color:var(--ds-green) !important;
}
.quiz-option.incorrect, .option.incorrect, .option.wrong, .answer-option.incorrect{
  border-color:var(--ds-red-line) !important;
  background:var(--ds-red-soft) !important;
  color:var(--ds-red) !important;
}
.feedback, .quiz-feedback, .explanation{
  border-radius:var(--ds-r) !important;
  border:1px solid var(--ds-line) !important;
  background:var(--ds-sunken) !important;
  color:var(--ds-ink-2) !important;
  font-size:1rem !important;
  line-height:1.75;
  padding:1rem 1.2rem !important;
}

/* ── 13 · Footer ─────────────────────────────────────────────────────── */
.tf-footer{
  background:transparent !important;
  border-top:1px solid var(--ds-line) !important;
  margin-top:4rem;
}
.tf-footer *{ color:var(--ds-ink-3) !important; }
.tf-footer a{ color:var(--ds-ink-3) !important; text-decoration:none; }
.tf-footer a:hover{ color:var(--ds-ink) !important; text-decoration:underline; text-underline-offset:3px; }
.tf-footer-legal{ letter-spacing:0 !important; font-weight:400 !important; }

/* ── 14 · Reset card ─────────────────────────────────────────────────── */
.tf-reset{
  background:var(--ds-surface) !important;
  border:1px solid var(--ds-line) !important;
  border-radius:var(--ds-r-lg) !important;
  box-shadow:var(--ds-shadow-sm) !important;
  padding:1.4rem 1.6rem !important;
}
.tf-reset-title{ color:var(--ds-ink) !important; font-size:1rem !important; }
.tf-reset-body{ color:var(--ds-ink-2) !important; font-size:0.95rem !important; }
.tf-reset-btn{ color:var(--as-coral) !important; border-color:var(--ds-line-strong) !important; }
.tf-reset-btn:hover{ background:var(--as-coral-soft) !important; border-color:var(--as-coral) !important; color:var(--as-coral) !important; }

/* ── 15 · Lock screen ────────────────────────────────────────────────── */
.tf-locked-page{ background:var(--ds-bg) !important; }
.tf-lockcard{
  background:var(--ds-surface) !important;
  border:1px solid var(--ds-line) !important;
  border-radius:var(--ds-r-xl) !important;
  box-shadow:var(--ds-shadow-lg) !important;
  padding:2.6rem 2.4rem !important;
}
.tf-lock-icon{
  background:var(--ds-sunken) !important;
  color:var(--ds-ink-3) !important;
  border:1px solid var(--ds-line) !important;
}
.tf-lock-kicker{ color:var(--ds-accent) !important; font-size:0.8125rem !important; }
.tf-lock-title{ color:var(--ds-ink) !important; }
.tf-lock-body{ color:var(--ds-ink-2) !important; font-size:1rem !important; }

/* ── 15b · Things that DO still carry a solid fill ──────────────────────
   The de-navying sweep rewrote white text everywhere, which is right for
   the panels that became light. These few kept a solid fill, so their
   text has to go back to white.                                          */
.app-brand-mark, .tf-intro-num, .hiw-num.a, .step-circle.b, .hero-num,
.co-mod-list li::before, .effects-list li::before, .co-mod-pill.current,
.quiz-label, .section-label.solid, .rb2, .pr-label.p2,
.btn-complete, .btnc, .cta-btn, .commitment-label, .night-link,
.tf-lesson-choice.go, .tf-lesson-choice.go *{
  color:#fff !important;
}
.tf-intro-num, .hiw-num.a, .step-circle.b, .hero-num{
  background:var(--ds-ink) !important;
}
.co-mod-pill.current, .btn-complete, .btnc, .cta-btn, .night-link,
.commitment-label{
  background:var(--ds-accent) !important;
  border-color:var(--ds-accent) !important;
  border-radius:var(--ds-r) !important;
}
.night-link:hover, .btn-complete:hover, .btnc:hover, .cta-btn:hover{
  background:var(--ds-accent-hover) !important;
}

/* Fills on progress bars and connectors are decoration, not text. */
.dash-prog-fill, .op-bar-fill, .conn-line, .module-card.current .module-stripe{
  background:var(--ds-accent) !important;
}

/* ── 15c · The module header ────────────────────────────────────────────
   Was a full-bleed navy banner. Now it is simply the top of the page:
   a small accent label, a large title, a subtitle, and a rule.           */
.hero-module-number, .hero-module-tag{
  display:inline-block;
  background:transparent !important;
  color:var(--ds-accent) !important;
  padding:0 !important;
  border:none !important;
  border-radius:0 !important;
  font-size:0.8125rem !important;
  font-weight:600 !important;
  letter-spacing:0.1em !important;
  text-transform:uppercase;
}
.hero-module-number{ margin-right:0.6rem; }
.hero-module-tag{ color:var(--ds-ink-3) !important; }
.hero-title{
  color:var(--ds-ink) !important;
  margin:0.7rem 0 0.6rem !important;
  letter-spacing:-0.02em;
}
.hero-subtitle{
  color:var(--ds-ink-2) !important;
  font-size:1.1rem !important;
  line-height:1.6;
  max-width:56ch;
}
.hero-read-time{
  display:inline-flex; align-items:center; gap:0.4rem;
  margin-top:1.1rem;
  background:var(--ds-sunken) !important;
  border:1px solid var(--ds-line) !important;
  border-radius:999px !important;
  padding:0.35rem 0.9rem !important;
  color:var(--ds-ink-3) !important;
  font-size:0.875rem !important;
}

/* ── 15d · The last dark cards ──────────────────────────────────────────
   Two more panels were built on the navy and were missed by the sweep
   because they carry their own class names.                              */
.tf-card.tf-continue, .analogy-card, .tf-continue{
  background:var(--ds-surface) !important;
  border:1px solid var(--ds-line) !important;
  border-radius:var(--ds-r-lg) !important;
  box-shadow:var(--ds-shadow) !important;
}
.tf-continue-title, .analogy-card strong{ color:var(--ds-ink) !important; }
.tf-continue-sub, .analogy-card, .analogy-card p{ color:var(--ds-ink-2) !important; }
.tf-continue-kicker{ color:var(--ds-accent) !important; }

/* ── 15e · Nothing under 13px ───────────────────────────────────────────
   A last floor, for the few labels the scale pass could not reach because
   they are sized in ems relative to an already small parent.             */
.tf-endnav-next-label, .tf-endnav-prev-label, .tf-endnav-label,
.dash-meta, .tf-chip, .pg-what-desc, .cd-sec-meta, small{
  font-size:0.875rem !important;
  line-height:1.5;
}
.tf-footer, .tf-footer *{ font-size:0.9rem !important; }
.tf-footer-legal a{ font-size:0.9rem !important; }

/* ── 15f · A module is a stack of surfaces, not a page of text ──────────
   On a grey canvas, prose sitting directly on the background reads as an
   unstyled document. The header, the "how this works" panel and the
   lesson each become their own white card, all on one column, separated
   by space rather than by rules. That single change is what makes a
   module look like a screen in a product.                                */
.hero, .content, .tf-intro{
  background:var(--ds-surface) !important;
  max-width:820px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  border:1px solid var(--ds-line) !important;
  border-radius:var(--ds-r-xl) !important;
  box-shadow:var(--ds-shadow) !important;
}
.hero{
  margin-top:2.2rem !important;
  margin-bottom:1rem !important;
  padding:2.9rem 3rem 2.4rem !important;
}
.tf-intro{
  margin-top:0 !important;
  margin-bottom:1rem !important;
  padding:1.7rem 3rem !important;
}
.content{
  padding:2.6rem 3rem 3.2rem !important;
  margin-bottom:2.6rem !important;
}
@media(max-width:880px){
  .hero, .content, .tf-intro{
    max-width:100% !important;
    border-left:none !important; border-right:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    margin-top:0 !important; margin-bottom:0 !important;
  }
  .hero{ padding:2rem 1.3rem 1.6rem !important; }
  .tf-intro{ padding:1.4rem 1.3rem !important; }
  .content{ padding:1.8rem 1.3rem 2.6rem !important; }
}

/* ── 16 · Motion ─────────────────────────────────────────────────────── */
details[open] > *:not(summary){
  animation:ds-reveal var(--ds-slow) var(--ds-ease);
}
@keyframes ds-reveal{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   18 · MATERIALITY

   A card is not a rectangle with a border. It is a surface catching light.
   Four things happen on every one of them, and they only work together:

     1. The face is a vertical gradient, brightest at the top edge, so it
        reads as tilted very slightly towards the light rather than flat.
     2. A one-pixel white highlight sits on the top edge, the way light
        catches the lip of anything physical.
     3. The border is translucent ink, not a grey hex. It darkens against
        whatever is behind it instead of sitting on top as a drawn line.
     4. The shadow has a contact layer, a close layer and an ambient layer.

   Then they are NOT all the same. Three elevations, used deliberately, so
   the page has a foreground, a middle and a background instead of one
   uniform field of boxes.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* The face of every surface: brighter at the top, settling at the base. */
  --ds-face:linear-gradient(180deg, #FFFFFF 0%, #FDFDFC 46%, #FBFAF9 100%);
  --ds-face-hi:linear-gradient(180deg, #FFFFFF 0%, #FEFEFD 60%, #FCFCFB 100%);

  /* Borders that belong to the light, not drawn over it. */
  --ds-edge:rgba(28,24,18,0.085);
  --ds-edge-hover:rgba(28,24,18,0.16);

  /* The top-edge catch light. */
  --ds-lip:inset 0 1px 0 rgba(255,255,255,0.9);

  /* Three elevations. */
  --ds-e1:
    var(--ds-lip),
    0 1px 1px rgba(28,24,18,0.04),
    0 2px 4px -2px rgba(28,24,18,0.05);
  --ds-e2:
    var(--ds-lip),
    0 1px 2px rgba(28,24,18,0.05),
    0 5px 12px -4px rgba(28,24,18,0.07),
    0 14px 32px -20px rgba(28,24,18,0.10);
  --ds-e3:
    var(--ds-lip),
    0 1px 2px rgba(28,24,18,0.05),
    0 10px 22px -8px rgba(28,24,18,0.10),
    0 30px 60px -30px rgba(28,24,18,0.16);
  --ds-e-hover:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 4px rgba(28,24,18,0.05),
    0 16px 32px -12px rgba(28,24,18,0.13),
    0 40px 72px -36px rgba(28,24,18,0.18);

  --ds-r-lg:18px;
  --ds-r-xl:24px;
}

/* ── Every surface ─────────────────────────────────────────────────────── */
.as-card, .as-panel, .as-fb-block, .tf-intro, .pg-what-item, .co-card,
.mod-card, .tf-recap, .as-callout, .cd-sec, .ob-item, .tf-reset,
.qr-card, .ci-item, .score-chip, .hero, .content, .pg-start, .cd-final,
.tf-lesson, .co-where, .ob-cta, .callout, .cta-card, .commitment-card,
.memory-panel, .plan-reminder, .results-panel, .hiw, .tf-finalnext,
.tf-card, .tf-lockcard, .quiz, .quiz-box, .quiz-card{
  background:var(--ds-face) !important;
  border:1px solid var(--ds-edge) !important;
  transition:transform var(--ds-slow) var(--ds-ease),
             box-shadow var(--ds-slow) var(--ds-ease),
             border-color var(--ds-fast) var(--ds-ease) !important;
}

/* ── Elevation 1 · rows and chips. Barely off the page. ───────────────── */
.qr-card, .ci-item, .score-chip, .tf-recap, .pg-what-item{
  box-shadow:var(--ds-e1) !important;
  border-radius:var(--ds-r) !important;
}

/* ── Elevation 2 · the working surfaces. ──────────────────────────────── */
.as-card, .as-panel, .as-fb-block, .tf-intro, .co-card, .mod-card,
.as-callout, .cd-sec, .ob-item, .tf-reset, .content, .tf-lesson,
.co-where, .callout, .cta-card, .commitment-card, .memory-panel,
.plan-reminder, .results-panel, .hiw, .tf-finalnext, .tf-card,
.quiz, .quiz-box, .quiz-card{
  box-shadow:var(--ds-e2) !important;
  border-radius:var(--ds-r-lg) !important;
}

/* ── Elevation 3 · the one thing on the page that matters most. ───────── */
.pg-start, .cd-final, .hero, .ob-cta, .tf-lockcard{
  background:var(--ds-face-hi) !important;
  box-shadow:var(--ds-e3) !important;
  border-radius:var(--ds-r-xl) !important;
}

/* ── Lift ──────────────────────────────────────────────────────────────
   Anything you can act on rises towards you. Rows rise a little, cards
   rise properly. Nothing snaps: the curve decelerates the whole way.    */
a.co-card:hover, a.mod-card:hover, a.pg-what-item:hover, .as-callout:hover,
.tf-card:hover, .co-where-card:hover, .cd-sec:hover{
  transform:translateY(-5px) !important;
  box-shadow:var(--ds-e-hover) !important;
  border-color:var(--ds-edge-hover) !important;
}
.qr-card:hover, .ci-item:hover, .score-chip:hover{
  transform:translateY(-2px) !important;
  box-shadow:var(--ds-e2) !important;
  border-color:var(--ds-edge-hover) !important;
}
a.co-card:active, a.mod-card:active, a.pg-what-item:active, .tf-card:active{
  transform:translateY(-1px) !important;
  box-shadow:var(--ds-e2) !important;
  transition-duration:90ms !important;
}

/* An open accordion is a raised accordion. */
.cd-sec[open], .ob-item[open]{
  box-shadow:var(--ds-e3) !important;
  border-color:var(--ds-edge-hover) !important;
}
.cd-sec[open]:hover, .ob-item[open]:hover{ transform:none !important; }

/* ── Room to breathe ────────────────────────────────────────────────────
   The cards were 12px apart, which reads as a stack. At 22 to 28 they
   read as separate objects, which is the whole point of elevating them. */
.cd-acc{ gap:1.4rem !important; }
.pg-what{ gap:1.15rem !important; margin-top:2rem !important; }
.pg-wrap{ padding-top:2.4rem !important; }
.as-results{ gap:1.6rem !important; }
.as-fb{ gap:1.3rem !important; }
.ob-acc{ gap:1.1rem !important; }
.pg-start{ margin-bottom:2.4rem !important; }
.hero{ margin-bottom:1.4rem !important; }
.tf-intro{ margin-bottom:1.4rem !important; }
.ci-list{ gap:0.7rem !important; }
.qr-grid{ gap:0.8rem !important; }

/* ── Generous inside, too ─────────────────────────────────────────────── */
.as-card, .as-panel, .as-fb-block{ padding:2.1rem 2rem !important; }
.cd-sec-body{ padding:0.6rem 1.6rem 1.7rem !important; }
.ob-item-body{ padding-bottom:1.5rem !important; }

/* ═══════════════════════════════════════════════════════════════════════
   19 · WHITE ON WHITE

   This is the actual cause of the flatness, and no amount of hover motion
   was ever going to fix it.

   A card inside a card was being filled with the warm grey. So a panel
   held two beige rectangles, sitting on a beige panel, on a beige page:
   three surfaces at almost the same value, separated only by borders.
   That is a diagram, not a stack.

   The rule from here: EVERY card is white. Depth comes from shadow and
   from the gap between them, never from tinting the inner one darker.
   Grey is reserved for wells, which are things you look INTO (a progress
   track, an input, a quote) rather than things that sit on top.
   ═══════════════════════════════════════════════════════════════════════ */

.co-where-card, .co-where-grid > *, .tf-intro-step, .hiw-step,
.as-fig, .cd-final-fig, .pg-what-item, .qr-card, .ci-item, .score-chip,
.tf-recap, .mod-card, .co-card, .tf-lesson-choice.stay,
.as-callout, .step-card, .tank-card, .type-card{
  background:var(--ds-face) !important;
  border:1px solid var(--ds-edge) !important;
  border-radius:var(--ds-r) !important;
  box-shadow:var(--ds-e1) !important;
}

/* But two columns of one panel are not two objects. Steps, stat figures
   and the like stop being cards the moment they sit inside a card: they
   become plain columns, separated by space and a hairline where one is
   genuinely needed. Nesting a card in a card is the thing that made the
   whole interface read as boxes inside boxes. */
.tf-intro .tf-intro-step, .as-panel .as-fig, .cd-final .cd-final-fig,
.tf-recap li, .hiw .hiw-step{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
}
.as-panel .as-figures, .cd-final .cd-final-figs{
  gap:0 !important;
}
.as-panel .as-fig + .as-fig, .cd-final .cd-final-fig + .cd-final-fig{
  border-left:1px solid var(--ds-edge) !important;
  padding-left:1.4rem !important;
}
.as-panel .as-fig, .cd-final .cd-final-fig{ padding-right:1.4rem !important; }
.tf-intro-steps{ gap:2.4rem !important; }

/* Wells. These are the only things allowed to be darker than their
   parent, because they are holes rather than objects. */
.pg-track, .pg-start-track, .as-bar, .mod-track, .tf-bar-track,
.as-quote, .cd-final-quote, .feedback, .quiz-feedback, .explanation,
.hero-read-time{
  background:var(--ds-sunken) !important;
  box-shadow:inset 0 1px 2px rgba(28,24,18,0.05) !important;
  border:1px solid var(--ds-edge) !important;
}

/* ── Icon tiles ─────────────────────────────────────────────────────────
   The reference has small amber-tinted rounded tiles beside each heading.
   They do more than decorate: they give the eye an anchor to land on, so
   a section is found by shape rather than by reading. Warm colour lives
   here, in 34 square pixels, instead of across half the screen.          */
.cd-sec-icon, .tf-intro-label svg, .tf-recap-label svg, .as-head-icon,
.as-res-icon, .ob-item-num, .pg-what-num, .tf-lock-icon{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:2.15rem !important; height:2.15rem !important;
  border-radius:10px !important;
  background:var(--ds-accent-soft) !important;
  border:1px solid var(--ds-accent-line) !important;
  color:var(--ds-accent) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.8);
  flex-shrink:0;
}
.as-head-icon, .as-res-icon{
  width:3rem !important; height:3rem !important;
  border-radius:14px !important;
  background:var(--ds-green-soft) !important;
  border-color:var(--ds-green-line) !important;
  color:var(--ds-green) !important;
}
.tf-lock-icon{
  width:3rem !important; height:3rem !important;
  border-radius:14px !important;
}
.tf-intro-label, .tf-recap-label, .cd-sec summary{ gap:0.7rem !important; }

/* ═══════════════════════════════════════════════════════════════════════
   20 · UNWRAP

   Surface 1 in the brief: sections should rarely have a background. Most
   should exist because of whitespace, type and alignment, not because
   they are inside another rounded rectangle.

   This is where the design was still wrong, and in one place I had made
   it worse: I wrapped the whole lesson in a white panel, which turned
   every module into page > panel > card > content. Four rectangles deep.

   A section is now a heading and some space. Only things that are
   genuinely objects keep a surface: an individual card, an interactive
   accordion, a callout that interrupts the reading.
   ═══════════════════════════════════════════════════════════════════════ */

/* The lesson is prose on the canvas. It does not live in a box. */
.content{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  max-width:720px !important;
  padding:0 2rem 4rem !important;
}

/* The module header is type and space, with one hairline to close it. */
.hero{
  background:none !important;
  border:none !important;
  border-bottom:1px solid var(--ds-edge) !important;
  box-shadow:none !important;
  border-radius:0 !important;
  max-width:720px !important;
  padding:3.2rem 2rem 2rem !important;
  margin-bottom:2.2rem !important;
}

/* Panels that existed only to hold two cards are removed. The cards
   stand on the canvas, and the label above them does the grouping. */
.co-where, .pg-what, .cd-final-figs, .as-figures, .tf-intro-steps,
.co-where-grid{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}
.co-where{ margin-bottom:2.8rem !important; }
.co-where-label, .as-panel-title{
  display:block;
  margin-bottom:1.1rem !important;
}

/* ── Variation ──────────────────────────────────────────────────────────
   Not everything is a 18px radius with the same shadow. Weight follows
   role: rows are quiet and tight, cards are the objects, and the one
   thing that matters most on a page sits highest and widest.            */
.qr-card, .ci-item, .score-chip{
  border-radius:10px !important;
  box-shadow:var(--ds-e1) !important;
}
.co-where-card, .pg-what-item, .tf-intro-step, .as-fig, .cd-final-fig{
  border-radius:14px !important;
}
.as-card, .as-panel, .as-fb-block, .co-card, .mod-card, .as-callout,
.cd-sec, .ob-item, .tf-intro, .tf-recap{
  border-radius:18px !important;
}
.pg-start, .cd-final, .tf-lesson, .tf-lockcard{
  border-radius:24px !important;
}

/* A contact shadow: darker, tighter, sitting just under the bottom edge.
   This is what stops a card looking like a sticker. */
.as-card, .as-panel, .as-fb-block, .co-card, .mod-card, .as-callout,
.cd-sec, .ob-item, .tf-intro, .tf-recap, .co-where-card, .pg-what-item,
.tf-card, .quiz, .quiz-box, .quiz-card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 1px rgba(28,24,18,0.05),
    0 2px 3px -1px rgba(28,24,18,0.07),
    0 8px 20px -8px rgba(28,24,18,0.07),
    0 20px 44px -28px rgba(28,24,18,0.10) !important;
}
.pg-start, .cd-final, .tf-lesson{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 1px 1px rgba(28,24,18,0.05),
    0 3px 5px -2px rgba(28,24,18,0.08),
    0 14px 30px -12px rgba(28,24,18,0.10),
    0 34px 64px -34px rgba(28,24,18,0.14) !important;
}

/* ── Surface 3 · things that float above everything ────────────────── */
.app-nav{
  box-shadow:0 1px 0 var(--ds-edge), 0 8px 24px -20px rgba(28,24,18,0.35) !important;
  z-index:200 !important;
}
.tf-lockcard{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 4px 8px -2px rgba(28,24,18,0.08),
    0 24px 48px -16px rgba(28,24,18,0.16),
    0 60px 100px -50px rgba(28,24,18,0.22) !important;
}

/* ── Restraint in motion ────────────────────────────────────────────────
   The lift is small. What sells the depth is that the shadow, the border
   and the top highlight all change together, not the distance travelled. */
a.co-card:hover, a.mod-card:hover, a.pg-what-item:hover, .as-callout:hover,
.tf-card:hover, .co-where-card:hover, .cd-sec:hover{
  transform:translateY(-3px) !important;
  border-color:var(--ds-edge-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 2px rgba(28,24,18,0.05),
    0 4px 6px -2px rgba(28,24,18,0.08),
    0 16px 32px -10px rgba(28,24,18,0.10),
    0 36px 70px -34px rgba(28,24,18,0.14) !important;
}
.qr-card:hover, .ci-item:hover, .score-chip:hover{
  transform:translateY(-2px) !important;
  border-color:var(--ds-edge-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   21 · THE BUTTONS THE SWEEP BROKE

   These three were solid dark fills with white labels. The de-navying
   pass rewrote their white text to ink, and because their background is
   also ink they came out as black rectangles with invisible labels: the
   complete-an-answer button in every module, the button on every lock
   screen, and the continue button on the homework dashboard.

   My audit did not catch them because it skipped any element that had
   child elements, and each of these holds an icon next to its label. The
   check now reads an element's own text nodes, so a button with an icon
   is tested like anything else.
   ═══════════════════════════════════════════════════════════════════════ */

.tf-modbar-btn, .tf-lock-btn, .tf-continue-btn{
  display:inline-flex !important;
  align-items:center; justify-content:center; gap:0.55rem;
  background:var(--ds-accent) !important;
  border:1px solid var(--ds-accent) !important;
  color:#fff !important;
  min-height:46px;
  padding:0.8rem 1.4rem !important;
  border-radius:var(--ds-r) !important;
  font-family:'Jost', sans-serif;
  font-size:0.95rem !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  text-decoration:none;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 1px 2px rgba(28,24,18,0.10),
    0 4px 10px -3px rgba(140,90,16,0.28) !important;
  transition:background var(--ds-fast) var(--ds-ease),
             box-shadow var(--ds-slow) var(--ds-ease),
             transform var(--ds-slow) var(--ds-ease);
}
.tf-modbar-btn *, .tf-lock-btn *, .tf-continue-btn *{ color:#fff !important; }
.tf-modbar-btn svg, .tf-lock-btn svg, .tf-continue-btn svg{ stroke:#fff !important; }

.tf-modbar-btn:hover, .tf-lock-btn:hover, .tf-continue-btn:hover{
  background:var(--ds-accent-hover) !important;
  border-color:var(--ds-accent-hover) !important;
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 4px rgba(28,24,18,0.10),
    0 10px 22px -6px rgba(140,90,16,0.34) !important;
}
.tf-modbar-btn:active, .tf-lock-btn:active, .tf-continue-btn:active{
  transform:translateY(0) scale(0.985);
  transition-duration:90ms;
}

/* Completed state: the action is done, so it stops competing for attention. */
.tf-modbar-btn.done, .tf-modbar-btn[disabled]{
  background:var(--ds-green-soft) !important;
  border-color:var(--ds-green-line) !important;
  color:var(--ds-green) !important;
  box-shadow:var(--ds-e1) !important;
}
.tf-modbar-btn.done *, .tf-modbar-btn[disabled] *{ color:var(--ds-green) !important; }
.tf-modbar-btn.done svg, .tf-modbar-btn[disabled] svg{ stroke:var(--ds-green) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   22 · WRITING SURFACES

   A reflection was a white panel holding a prompt, a textarea and a
   completion strip. Three surfaces inside a fourth, which is the pattern
   we have been removing everywhere else, and it is worst here because
   this is where the learner actually works.

   A reflection is now: a prompt in type, a field to write in, and a quiet
   strip underneath. The field is the only object; everything else is
   space. Writing should feel like a page, not like filling in a form
   inside a box inside a card.
   ═══════════════════════════════════════════════════════════════════════ */

.reflection, .reflection-box, .reflection-group{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:2.6rem 0 !important;
}

/* The prompt is a heading, not a label stuck to a box. */
.reflection-q, .reflection-prompt, .reflection h3, .reflection-box h3{
  font-size:1.18rem !important;
  line-height:1.45;
  color:var(--ds-ink) !important;
  margin-bottom:1rem !important;
}

/* The field is the object. Deep enough to invite writing, quiet until
   it is focused, and then unmistakably live. */
.reflection textarea, .reflection-box textarea, .content textarea{
  background:var(--ds-surface) !important;
  border:1px solid var(--ds-edge) !important;
  border-radius:14px !important;
  box-shadow:
    inset 0 1px 2px rgba(28,24,18,0.04),
    0 1px 1px rgba(28,24,18,0.03) !important;
  min-height:150px;
  padding:1.15rem 1.25rem !important;
  font-size:1.02rem !important;
  line-height:1.75;
  transition:border-color var(--ds-fast) var(--ds-ease),
             box-shadow var(--ds-fast) var(--ds-ease);
}
.reflection textarea:hover, .content textarea:hover{
  border-color:var(--ds-line-strong) !important;
}
.reflection textarea:focus, .content textarea:focus{
  border-color:var(--ds-accent) !important;
  box-shadow:
    inset 0 1px 2px rgba(28,24,18,0.03),
    0 0 0 4px var(--ds-accent-soft) !important;
}

/* The completion strip: a rule and a button, not a card. The blue bar it
   used to carry belonged to no other part of the interface. */
.tf-modbar{
  background:none !important;
  border:none !important;
  border-top:1px solid var(--ds-edge) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:1rem 0 0 !important;
  margin-top:1rem !important;
  display:flex !important;
  align-items:center;
  gap:1.2rem;
  flex-wrap:wrap;
}
.tf-modbar-note, .tf-modbar-text{
  flex:1; min-width:15rem;
  font-size:0.95rem !important;
  color:var(--ds-ink-3) !important;
  line-height:1.6;
}
.tf-modbar-finish{
  background:none !important;
  border:none !important;
  color:var(--ds-ink-3) !important;
  font-size:0.9rem !important;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.tf-modbar-finish:hover{ color:var(--ds-ink) !important; }

/* Done: the strip turns green and settles. */
.tf-modbar.done{
  border-top-color:var(--ds-green-line) !important;
}
.tf-modbar.done .tf-modbar-note{ color:var(--ds-green) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   23 · THE QUIZ

   Seventeen of these across nine modules, and they are the most
   interactive thing in the course, so they carry more of the felt quality
   than any other screen.

   What was wrong: a solid amber badge with a 4px radius (an LMS sticker),
   options that were flat rectangles with a bare letter, an explanation in
   a grey box, and a retry button labelled with a text glyph.

   What it is now: a quiz is one raised surface, deliberately interrupting
   the lesson. The options are the objects on it. Answering is the moment
   that matters, so the correct answer gets a filled marker and the whole
   row settles into green; a wrong one goes red and the right answer is
   shown outlined rather than filled, because it was not your choice.
   ═══════════════════════════════════════════════════════════════════════ */

.quiz{
  padding:2.1rem 2rem !important;
  margin:3rem 0 !important;
  scroll-margin-top:96px;
}

/* The label: a quiet pill with an icon, like every other section label. */
.quiz-label{
  display:inline-flex !important;
  align-items:center; gap:0.5rem;
  background:var(--ds-accent-soft) !important;
  border:1px solid var(--ds-accent-line) !important;
  color:var(--ds-accent) !important;
  font-size:0.8125rem !important;
  font-weight:600 !important;
  letter-spacing:0.1em !important;
  padding:0.4rem 0.85rem !important;
  border-radius:999px !important;
  margin-bottom:1.3rem !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.8);
}
.quiz-label::before{
  content:'';
  width:15px; height:15px; flex-shrink:0;
  background:currentColor;
  -webkit-mask:var(--ds-icon-check) center/contain no-repeat;
  mask:var(--ds-icon-check) center/contain no-repeat;
}

.quiz-question{
  font-size:1.28rem !important;
  line-height:1.4 !important;
  color:var(--ds-ink) !important;
  margin-bottom:1.5rem !important;
  letter-spacing:-0.01em;
}

.quiz-options{ gap:0.7rem !important; margin-bottom:1.2rem !important; }

/* ── An option ─────────────────────────────────────────────────────────
   A real target: 56px tall, its own surface, a lettered marker that is a
   chip rather than a stray character.                                    */
.quiz-option{
  position:relative;
  display:flex !important;
  align-items:center; gap:0.95rem;
  width:100%;
  min-height:56px;
  padding:0.9rem 1.1rem !important;
  text-align:left;
  background:var(--ds-surface) !important;
  border:1px solid var(--ds-edge) !important;
  border-radius:14px !important;
  box-shadow:var(--ds-e1) !important;
  font-size:1.02rem !important;
  line-height:1.55;
  color:var(--ds-ink-2) !important;
  cursor:pointer;
  transition:border-color var(--ds-fast) var(--ds-ease),
             box-shadow var(--ds-fast) var(--ds-ease),
             background var(--ds-fast) var(--ds-ease),
             transform var(--ds-fast) var(--ds-ease);
}
.quiz-option .opt-letter{
  display:flex !important;
  align-items:center; justify-content:center;
  flex-shrink:0;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--ds-sunken) !important;
  border:1px solid var(--ds-edge) !important;
  color:var(--ds-ink-3) !important;
  font-size:0.9rem !important;
  font-weight:600 !important;
  font-family:'Jost', sans-serif;
  transition:background var(--ds-fast) var(--ds-ease),
             border-color var(--ds-fast) var(--ds-ease),
             color var(--ds-fast) var(--ds-ease);
}

.quiz-option:hover:not(.answered){
  border-color:var(--ds-accent) !important;
  background:var(--ds-surface) !important;
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 3px rgba(28,24,18,0.05),
    0 10px 20px -8px rgba(28,24,18,0.10) !important;
}
.quiz-option:hover:not(.answered) .opt-letter{
  background:var(--ds-accent-soft) !important;
  border-color:var(--ds-accent-line) !important;
  color:var(--ds-accent) !important;
}
.quiz-option:active:not(.answered){ transform:translateY(0) scale(0.995); }

/* ── Answered ──────────────────────────────────────────────────────── */
.quiz-option.answered{ cursor:default; transform:none !important; }
.quiz-option.answered:not(.correct):not(.wrong):not(.show-correct){
  opacity:0.5;
  box-shadow:none !important;
}

/* Right. Filled marker, because you chose it. */
.quiz-option.correct{
  border-color:var(--ds-green) !important;
  background:var(--ds-surface) !important;
  color:var(--ds-ink) !important;
  box-shadow:inset 3px 0 0 var(--ds-green), var(--ds-e1) !important;
}
.quiz-option.correct .opt-letter{
  background:var(--ds-green) !important;
  border-color:var(--ds-green) !important;
  color:#fff !important;
}

/* Wrong. Same treatment in red, so the two read as one system. */
.quiz-option.wrong{
  border-color:var(--ds-red-line) !important;
  background:var(--ds-surface) !important;
  color:var(--ds-ink) !important;
  box-shadow:inset 3px 0 0 var(--ds-red), var(--ds-e1) !important;
}
.quiz-option.wrong .opt-letter{
  background:var(--ds-red) !important;
  border-color:var(--ds-red) !important;
  color:#fff !important;
}

/* The answer you should have picked. Outlined, not filled: it is correct,
   but it was not your choice, and the difference should be visible. */
.quiz-option.show-correct{
  border-color:var(--ds-green) !important;
  background:var(--ds-surface) !important;
  color:var(--ds-green) !important;
  box-shadow:none !important;
}
.quiz-option.show-correct .opt-letter{
  background:var(--ds-surface) !important;
  border:2px solid var(--ds-green) !important;
  color:var(--ds-green) !important;
}

/* A mark at the end of the row, so the state is not carried by colour
   alone. This matters for anyone who does not see red and green apart. */
.quiz-option.correct::after,
.quiz-option.wrong::after,
.quiz-option.show-correct::after{
  content:'';
  margin-left:auto;
  width:20px; height:20px;
  flex-shrink:0;
  background:currentColor;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.quiz-option.correct::after{ color:var(--ds-green); }
.quiz-option.wrong::after{ color:var(--ds-red); }
.quiz-option.show-correct::after{ color:var(--ds-green); opacity:0.65; }
.quiz-option.correct::after, .quiz-option.show-correct::after{
  -webkit-mask-image:var(--ds-icon-check-circle);
  mask-image:var(--ds-icon-check-circle);
}
.quiz-option.wrong::after{
  -webkit-mask-image:var(--ds-icon-x-circle);
  mask-image:var(--ds-icon-x-circle);
}

/* ── The explanation ───────────────────────────────────────────────────
   A well, not another card, and it arrives rather than appearing.       */
/* The personalised feedback. Its content and its logic are untouched;
   only its presentation changes. It stops being a coloured alert box and
   becomes part of the card: a hairline, a little space, and the words. */
.quiz-explanation{
  margin-top:1.5rem !important;
  padding:1.4rem 0 0 !important;
  background:none !important;
  border:none !important;
  border-top:1px solid var(--ds-edge) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-size:1.02rem !important;
  line-height:1.8 !important;
  color:var(--ds-ink-2) !important;
}
.quiz-explanation.visible{ animation:ds-answer var(--ds-slow) var(--ds-ease); }
.quiz-explanation strong{ color:var(--ds-ink) !important; font-weight:600; }
@keyframes ds-answer{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}

/* ── Retry ─────────────────────────────────────────────────────────── */
.quiz-footer{ margin-top:1.3rem !important; }
.quiz-retry{
  align-items:center; gap:0.5rem;
  background:var(--ds-surface) !important;
  border:1px solid var(--ds-line-strong) !important;
  color:var(--ds-ink-3) !important;
  font-size:0.9rem !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  min-height:40px;
  padding:0.5rem 1rem !important;
  border-radius:10px !important;
  box-shadow:var(--ds-e1) !important;
  transition:border-color var(--ds-fast) var(--ds-ease),
             color var(--ds-fast) var(--ds-ease),
             background var(--ds-fast) var(--ds-ease);
}
.quiz-retry:hover{
  border-color:var(--ds-ink-3) !important;
  color:var(--ds-ink) !important;
  background:var(--ds-hover) !important;
}
.quiz-retry svg{ flex-shrink:0; transition:transform var(--ds-slow) var(--ds-ease); }
.quiz-retry:hover svg{ transform:rotate(-90deg); }

@media(max-width:640px){
  .quiz{ padding:1.4rem 1.2rem !important; margin:2rem 0 !important; }
  .quiz-question{ font-size:1.15rem !important; }
  .quiz-option{ padding:0.85rem 0.9rem !important; gap:0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   24 · WHAT SITS ON A COLOURED FILL

   Twenty-three elements across the app had near-black text on a solid
   coloured fill: numbered circles on deep amber, section labels on plum,
   red, teal and green, the next-lesson button on near-black. All of them
   technically passed a contrast check and all of them looked muddy,
   because dark-on-dark reads as a stain rather than as a label.

   The rule: anything sitting on a solid coloured fill gets a LIGHT
   foreground, and the light is warm rather than pure white. Stark white
   on deep amber looks like a warning sticker; a warm off-white lets the
   colour stay rich and the text stay crisp.

   Soft tinted fills (a 15% amber wash and the like) are deliberately NOT
   in this list. Light text on a pale tint would be illegible; those keep
   their dark foreground, which is correct on a light background.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --ds-on-accent:#FFF8EF;   /* warm off-white, for amber and red fills   */
  --ds-on-colour:#FCFCFB;   /* neutral off-white, for cool and dark fills */
}

/* Warm fills: amber, brown, gold, red, orange. */
.foundation-num, .step-circle.a, .savebtn-accent, .hero-tank-badge,
.tracker-label, .audit-label, .picker-label, .quiz-label.solid,
.commitment-label, .co-mod-pill.current, .night-link, .btn-complete,
.btnc, .cta-btn, .reflection-label.solid{
  color:var(--ds-on-accent) !important;
  text-shadow:0 1px 0 rgba(0,0,0,0.06);
}

/* Cool and neutral fills: plum, teal, blue, green, near-black. */
.tf-remind-copybtn, .tf-endnav-next, .assessment-label, .emoji-scale-label,
.tracker-tab.active, .inventory-label, .save-btn-inv, .breath-label,
.breath-tab.active, .breath-btn.breath-btn-start, .direction-label,
.practices-heading.over, .practices-heading.iso, .app-brand-mark,
.tf-intro-num, .hiw-num.a, .step-circle.b, .hero-num{
  color:var(--ds-on-colour) !important;
}

/* Their children and icons come with them. */
.foundation-num *, .step-circle.a *, .hero-tank-badge *, .tracker-label *,
.audit-label *, .picker-label *, .tf-remind-copybtn *, .tf-endnav-next *,
.assessment-label *, .emoji-scale-label *, .tracker-tab.active *,
.inventory-label *, .breath-label *, .breath-tab.active *,
.breath-btn.breath-btn-start *, .direction-label *,
.practices-heading.over *, .practices-heading.iso *{
  color:inherit !important;
}
.tf-endnav-next svg, .tf-remind-copybtn svg, .breath-btn-start svg{
  stroke:currentColor !important;
}

/* A numbered circle should read as a minted token, not a blob of colour:
   a warm inner highlight at the top, a soft shadow beneath, numerals with
   tabular spacing so a 1 and a 6 sit on the same axis. */
.foundation-num, .step-circle, .tf-intro-num, .hiw-num, .hero-num,
.ob-item-num, .pg-what-num{
  font-variant-numeric:tabular-nums;
  font-weight:600 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 1px 2px rgba(28,24,18,0.14) !important;
}
/* The two that sit on a pale tint keep a dark numeral and a light inner
   edge instead, because there is no dark fill to lift off. */
.ob-item-num, .pg-what-num{
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   25 · THE PANELS THE LOCK SCREENS HID

   Three more dark panels, in modules 6, 7 and 9. They survived every
   earlier sweep for one reason worth writing down: my audits were running
   with the modules LOCKED, so those pages rendered a lock screen and none
   of this content existed to be measured. An audit is only as good as the
   state you run it in.

   Also here: the completion panels in modules 10 and 11, which sat on
   near-black and on solid green with dark text on top.
   ═══════════════════════════════════════════════════════════════════════ */

.inventory, .breathing-exercise, .scale-legend, .complete-panel,
.complete-box, .adone-wrap{
  background:var(--ds-face) !important;
  border:1px solid var(--ds-edge) !important;
  border-radius:var(--ds-r-lg) !important;
  box-shadow:var(--ds-e2) !important;
  color:var(--ds-ink-2) !important;
}
.inventory *, .breathing-exercise *, .scale-legend *{
  color:inherit;
}
.inventory-intro, .inv-q-label, .breath-intro, .scale-item,
.inventory-privacy, .inventory-privacy-icon, .scale-legend-label,
.breath-tab, .complete-sub, .adone{
  color:var(--ds-ink-2) !important;
}
.inventory h3, .breathing-exercise h3, .scale-legend h3,
.inv-q-label, .complete-title{
  color:var(--ds-ink) !important;
}
.scale-num{ color:var(--ds-accent) !important; font-weight:600; }

/* The completion panels: light surface, colour in the mark not the field. */
.complete-title{ color:var(--ds-ink) !important; }
.complete-section, .complete{
  background:var(--ds-face) !important;
  border:1px solid var(--ds-edge) !important;
  color:var(--ds-ink-2) !important;
}
.complete-section .adone, .complete .adone,
.complete-section a, .complete a{ color:var(--ds-accent) !important; }

/* ── Small tinted pills ─────────────────────────────────────────────────
   These sit on a pale wash, so their text has to be the deep accent, not
   a mid tone. The wash is the decoration; the text still has to be read. */
.hiw-badge, .mp-back, .hml-pill, .sched-level, .step-badge, .rcc-when,
.co-mod-pill, .night-sub, .tf-recap-link, .rb-selected-label,
.technique-when, .sched-rest-insert, .result-heading, .practices-heading,
.tank-name, .tank-depleted, .hero-tank-badge, .audit-label, .picker-label,
.breath-label, .direction-label, .breath-tab.active{
  font-weight:600;
}
.hiw-badge, .mp-back, .hml-pill.m, .sched-level.lev-m, .step-badge,
.night-sub, .tf-recap-link, .rb-selected-label, .co-mod-pill.done{
  color:var(--ds-accent) !important;
}
.rcc-when{ color:var(--ds-green) !important; }

/* ── 26 · The last thirteen ─────────────────────────────────────────────
   All were sitting between 4.08 and 4.23, which is the worst place to be:
   close enough to look deliberate, far enough to be tiring.

   Two different fixes, because they are two different mistakes.

   Accent text on an amber wash needs the deeper accent: the wash and the
   text were drawn from the same hue, so they were always going to crowd
   each other.                                                            */
.tf-recap-link, .step-badge, .night-sub, .rb-selected-label,
.hml-pill, .sched-level, .co-mod-pill.done{
  color:var(--ds-accent-hover) !important;
}

/* A rest-type label on a wash of its own colour has the same problem, and
   deepening it further would start to flatten the six types into one
   brown. So the label becomes ink and the colour moves to the bar beside
   it, where it is doing the identifying anyway. Colour should carry
   meaning, not have to carry legibility as well. */
.tank-name, .tank-depleted, .result-bar-label, .result-bar-score{
  color:var(--ds-ink) !important;
}

/* An unfilled star still has to be visible, or the learner cannot see how
   many they have not chosen yet. */
.as-star{ color:var(--ds-line-strong) !important; }
.as-star:hover{ color:var(--ds-accent-line) !important; }
.as-star.on{ color:var(--ds-accent) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   27 · EVERY CARD, NOT JUST THE ONES I HAPPENED TO NAME

   Thirty-six more card types were still flat: a border, a radius, and no
   light on them at all. They were flat because my earlier rules listed
   surfaces by name, and these were never on the list. Naming surfaces one
   at a time does not scale and was always going to leave holes.

   So this is the catch-all. Everything below gets the same four things as
   every other surface in the app: a face that is brighter at the top, a
   translucent edge, a top-edge highlight, and a three-part shadow.
   ═══════════════════════════════════════════════════════════════════════ */

.foundation-item, .sleep-stage, .signal-card, .activity-item, .tracker-day,
.routine-card, .routine-builder, .not-this, .time-block, .warning-card,
.practices-list, .picker-card, .audit-day, .technique-card, .activation-row,
.direction-card, .rcc, .night, .planner-waiting, .sleep-section, .dl-section,
.download-section, .start-date-box, .cta-proverb, .refill-table,
.effects-list, .commitment, .tf-item, .tf-remind, .co-mod, .quiz-option,
.result-bar-row, .tank-card, .type-card, .step-card, .emap-row, .sched-row,
.hml-row, .inv-q, .breath-tab:not(.active), .tracker-tab:not(.active),
.scale-row, .plan-row{
  background:var(--ds-face) !important;
  border:1px solid var(--ds-edge) !important;
  border-radius:14px !important;
  box-shadow:var(--ds-e1) !important;
  transition:transform var(--ds-slow) var(--ds-ease),
             box-shadow var(--ds-slow) var(--ds-ease),
             border-color var(--ds-fast) var(--ds-ease) !important;
}

/* The bigger ones read as proper panels rather than rows. */
.routine-builder, .practices-list, .technique-card, .direction-card,
.night, .sleep-section, .dl-section, .download-section, .start-date-box,
.cta-proverb, .refill-table, .tf-remind, .planner-waiting{
  border-radius:18px !important;
  box-shadow:var(--ds-e2) !important;
}

/* Rows inside a panel are not cards. They are rows: no shadow, a hairline
   between them, and the panel underneath doing the lifting. */
.tf-remind .tf-remind-text, .practices-list li, .effects-list li,
.refill-table td, .refill-table th{
  background:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.tf-remind-text{ border:1px solid var(--ds-edge) !important; border-radius:10px !important; }

/* Anything clickable lifts, everything else just sits there. */
a.co-mod:hover, a.tf-item:hover, .picker-card:hover, .technique-card:hover,
.direction-card:hover, .signal-card:hover, .foundation-item:hover,
.sleep-stage:hover, .rcc:hover{
  transform:translateY(-3px) !important;
  box-shadow:var(--ds-e-hover) !important;
  border-color:var(--ds-edge-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   28 · TWO BUGS I CAUSED

   1 · THE INVISIBLE LOCKED CHIP.
   I added .tf-endnav-next to the list of things that sit on a dark fill
   and gave it off-white text. That is right when the next lesson is
   available, because the chip is then a solid dark button. When the next
   lesson is LOCKED the same element has a pale grey fill, so off-white
   text on it was invisible. Every audit passed it because I was testing
   with all the modules marked complete, and the locked state never
   rendered. A state I do not render is a state I have not checked.

   A locked chip should look deliberately disabled, and still be readable.
   ═══════════════════════════════════════════════════════════════════════ */

.tf-endnav-next.locked,
.tf-endnav-next.locked *,
.tf-endnav-next[aria-disabled="true"],
.tf-endnav-next[aria-disabled="true"] *{
  color:var(--ds-ink-3) !important;
  background:var(--ds-sunken) !important;
  border:1px dashed var(--ds-line-strong) !important;
  box-shadow:none !important;
  text-shadow:none !important;
  cursor:not-allowed;
}
.tf-endnav-next.locked *{ background:none !important; border:none !important; }
.tf-endnav-next.locked .tf-endnav-next-label{
  color:var(--ds-ink-3) !important;
  font-weight:650 !important;
  letter-spacing:.1em;
}
.tf-endnav-next.locked .tf-endnav-next-name{
  color:var(--ds-ink-2) !important;
  font-weight:600 !important;
}
.tf-endnav-next.locked svg{ stroke:var(--ds-ink-3) !important; opacity:.8; }
.tf-endnav-next.locked:hover{ transform:none !important; }

/* ── 2 · THE COPY BUTTON ────────────────────────────────────────────────
   It sat in a flex row beside a multi-line block of reminder text, so it
   stretched to the full height of that text: a black slab the size of a
   paragraph, for a button that copies one line. It stops stretching, it
   stops being a solid dark fill, and it becomes a normal secondary
   button that sits at the top of the row where the text begins.        */
.tf-remind-copy, .tf-remind-row{
  align-items:flex-start !important;
  gap:.7rem !important;
}
.tf-remind-copybtn{
  align-self:flex-start !important;
  flex:0 0 auto !important;
  width:auto !important;
  height:auto !important;
  min-height:42px !important;
  max-height:42px !important;
  padding:.55rem 1rem !important;
  background:var(--ds-face) !important;
  border:1px solid var(--ds-line-strong) !important;
  border-radius:10px !important;
  color:var(--ds-ink) !important;
  font-size:.9rem !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  box-shadow:var(--ds-e1) !important;
  white-space:nowrap;
  transition:background var(--ds-fast) var(--ds-ease),
             border-color var(--ds-fast) var(--ds-ease),
             transform var(--ds-fast) var(--ds-ease);
}
.tf-remind-copybtn *{ color:var(--ds-ink) !important; }
.tf-remind-copybtn svg{ stroke:var(--ds-ink) !important; }
.tf-remind-copybtn:hover{
  background:var(--ds-hover) !important;
  border-color:var(--ds-ink-3) !important;
  transform:translateY(-1px);
}
.tf-remind-copybtn.copied{
  background:var(--ds-green-soft) !important;
  border-color:var(--ds-green-line) !important;
  color:var(--ds-green) !important;
}
.tf-remind-copybtn.copied *, .tf-remind-copybtn.copied svg{
  color:var(--ds-green) !important; stroke:var(--ds-green) !important;
}

/* The reminder text beside it is a well, and it wraps rather than running
   to four lines of raw URL. */
.tf-remind-text{
  flex:1 1 auto; min-width:0;
  background:var(--ds-sunken) !important;
  font-size:.92rem !important;
  line-height:1.6;
  padding:.7rem .9rem !important;
  overflow-wrap:anywhere;
  color:var(--ds-ink-2) !important;
}

/* The calendar buttons are two equal secondary actions, not headline CTAs. */
.tf-remind-btns{ gap:.7rem !important; flex-wrap:wrap; }
.tf-remind-btn{
  min-height:42px !important;
  padding:.55rem 1rem !important;
  font-size:.92rem !important;
  border-radius:10px !important;
  background:var(--ds-face) !important;
  border:1px solid var(--ds-line-strong) !important;
  color:var(--ds-ink) !important;
  box-shadow:var(--ds-e1) !important;
}
.tf-remind-btn:hover{ background:var(--ds-hover) !important; border-color:var(--ds-ink-3) !important; }

/* The last two flat surfaces: the legal pages' product blocks, and the
   feedback textareas. */
.product-block{
  background:var(--ds-face) !important;
  border:1px solid var(--ds-edge) !important;
  border-radius:18px !important;
  box-shadow:var(--ds-e2) !important;
  padding:1.6rem 1.7rem !important;
}
.as-fb-block textarea, .as-field input{
  box-shadow:inset 0 1px 2px rgba(28,24,18,.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   29 · ICONS INSTEAD OF EMOJI

   162 colour emoji are now inline SVG on a 24 unit grid with a 1.75
   stroke, the same as every icon the engine already draws. They inherit
   currentColor, so a rest type's icon takes that type's colour without
   anything being hard-coded.

   The six rest types were the ones worth thinking hardest about:

     Physical    a bed          sleep, napping, movement
     Sensory     an eye, closed less input, not more
     Creative    sparkles       beauty and input
     Emotional   a heart        the speech bubble said "conversation",
                                which is not what emotional rest is
     Meditative  still water    settling the nervous system
     Social      two people     people, and boundaries with them
   ═══════════════════════════════════════════════════════════════════════ */

.ic{
  display:inline-block;
  vertical-align:-0.18em;
  flex-shrink:0;
  width:1.25em; height:1.25em;
  stroke-width:1.75;
}

/* Where an emoji used to be a large decorative mark, the icon takes the
   same room rather than shrinking to the size of a letter. */
.tank-icon .ic, .module-icon .ic, .tip-icon .ic, .type-icon .ic,
.score-chip-icon .ic, .hero-tank-badge .ic{
  width:1.5em; height:1.5em; vertical-align:-0.3em;
}
.tank-icon, .module-icon, .tip-icon, .type-icon{
  display:inline-flex; align-items:center; justify-content:center;
  color:inherit;
}

/* A rest type's icon sits in a tinted disc in its own colour, which is
   what makes the six readable at a glance on the profile page. */
.tank-card .tank-icon, .type-card .type-icon, .score-chip-icon{
  width:2.6rem; height:2.6rem; border-radius:12px;
  background:color-mix(in srgb, currentColor 10%, transparent);
  border:1px solid color-mix(in srgb, currentColor 22%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

/* Inside a solid coloured fill the icon follows the label, not the fill. */
.hero-tank-badge .ic, .breath-label .ic, .audit-label .ic,
.picker-label .ic, .direction-label .ic, .tracker-label .ic,
.assessment-label .ic, .inventory-label .ic{
  stroke:currentColor;
}

/* In a button, the icon and the words share a baseline and a gap. */
button .ic, a .ic{ vertical-align:-0.2em; }

/* ═══════════════════════════════════════════════════════════════════════
   30 · THE SIX TANKS: WHERE THE COLOUR LIVES

   Each tank keeps one colour everywhere. How that colour is APPLIED
   changes by context, because the same treatment repeated on every page
   turns into wallpaper.

   Module 2   the card carries it   first encounter, teaching the model
   Module 9   the icon carries it   a results page, already dense
   Dashboard  the icon carries it   small chips in a tight grid
   Sliders    neither               the score is already coloured
   Modules 3-8 the page carries it  one type per page, in the hero badge

   The card sets `color` once; everything below derives from currentColor,
   so a tank's colour is declared in exactly one place per component.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Module 2 · card-led ───────────────────────────────────────────────
   Six cards, one tank each, and the only place in the course where a
   whole card can carry a colour without the page turning into blocks:
   the cards ARE the six, so the colour is the information.

   The tint is deliberately faint. At 5% the card reads as tinted paper
   rather than a coloured panel, the white cards elsewhere still look
   white beside it, and ink on top keeps its full contrast. The border
   and the icon disc carry more saturation, so the identity is legible
   without the surface getting heavy. */
.tank-card{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, currentColor 6.5%, #FFFFFF) 0%,
      color-mix(in srgb, currentColor 4%, #FFFFFF) 100%) !important;
  border:1px solid color-mix(in srgb, currentColor 26%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 3px 0 0 currentColor,
    0 1px 2px rgba(28,24,18,.05),
    0 6px 16px -8px color-mix(in srgb, currentColor 30%, transparent),
    0 18px 40px -26px color-mix(in srgb, currentColor 45%, transparent) !important;
  padding-left:1.5rem !important;
  transition:transform var(--ds-slow) var(--ds-ease),
             box-shadow var(--ds-slow) var(--ds-ease) !important;
}
.tank-card:hover{
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 3px 0 0 currentColor,
    0 2px 4px rgba(28,24,18,.05),
    0 14px 30px -10px color-mix(in srgb, currentColor 34%, transparent),
    0 34px 64px -34px color-mix(in srgb, currentColor 50%, transparent) !important;
}
/* On tinted paper the disc needs a touch more presence to stay distinct. */
.tank-card .tank-emoji, .tank-card .tank-icon{
  background:color-mix(in srgb, currentColor 14%, #FFFFFF) !important;
  border-color:color-mix(in srgb, currentColor 32%, transparent) !important;
}
.tank-card .tank-emoji, .tank-card .tank-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; min-width:2.5rem;
  border-radius:12px;
  color:inherit;
  background:color-mix(in srgb, currentColor 11%, transparent);
  border:1px solid color-mix(in srgb, currentColor 24%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
.tank-card .tank-name{ color:var(--ds-ink) !important; }
.tank-card .tank-depleted{
  color:var(--ds-ink-3) !important;
  font-size:.86rem !important;
  letter-spacing:.04em;
  text-transform:none !important;
}
.tank-card .tank-desc, .tank-card .tank-refill{ color:var(--ds-ink-2) !important; }
.tank-card .tank-refill strong{ color:var(--ds-ink) !important; }

/* ── Module 9 and the dashboard chips · icon-led ───────────────────────
   Results pages are already busy with bars and numbers, so the colour
   sits in one small place: the icon, in a tinted disc. The card stays
   completely neutral. */
.tank-section .tank-icon, .score-chip-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; min-width:2.4rem;
  border-radius:11px;
  background:color-mix(in srgb, currentColor 11%, transparent);
  border:1px solid color-mix(in srgb, currentColor 24%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
.tank-section{ box-shadow:var(--ds-e2) !important; }

/* ── Module 2 sliders · icon-led ───────────────────────────────────────
   Six rows in one panel, so there is no card to colour. The icon carries
   it instead, in a small tinted disc, and the label stays ink. The score
   on the right already matches, which ties the two ends of the row
   together without anything in between needing colour. */
.slider-tank-name{
  display:inline-flex !important;
  align-items:center;
  gap:.65rem;
  color:var(--ds-ink) !important;
}
.slider-tank-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.1rem; height:2.1rem; flex-shrink:0;
  border-radius:10px;
  background:color-mix(in srgb, currentColor 12%, transparent);
  border:1px solid color-mix(in srgb, currentColor 26%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.slider-tank-icon .ic{ color:inherit; width:1.15em; height:1.15em; }
.slider-value{ font-variant-numeric:tabular-nums; font-weight:700; }

/* ── Modules 3 to 8 · the page carries it ──────────────────────────────
   A whole module is one rest type, so the badge at the top says which,
   and nothing else on the page needs to repeat it. The icon inside a
   solid badge stays white because it sits on the colour. */
.hero-tank-badge .ic{ color:inherit; }

/* ── Dense plan lists · a dot, not a disc ──────────────────────────────
   Module 10 and 11 list all six inside running text. A tinted disc per
   line would stripe the page, so colour is reduced to the icon alone at
   text size. */
.rcc .ic, .sched-row .ic, .plan-row .ic, .emap-row .ic{
  width:1.15em; height:1.15em;
}

/* ── 17 · Rhythm ─────────────────────────────────────────────────────── */
@media (min-width:900px){
  .pg-wrap, .ob-wrap, .co-wrap, .as-page{ padding-top:2.4rem; }
  .cd-acc{ gap:0.9rem; }
}
@media (max-width:640px){
  .hero{ padding:1.9rem 1.2rem 1.4rem !important; }
  .co-where, .ob-cta, .cd-final, .tf-lesson, .callout, .cta-card,
  .commitment-card, .memory-panel, .plan-reminder, .results-panel, .hiw,
  .tf-finalnext{ padding:1.4rem 1.2rem !important; }
  .pg-start{ padding:1.5rem 1.3rem !important; }
  .tf-crumbs-inner{ padding:0.75rem 1.2rem; }
}