/* GDP's Ripple brand over stock LearnHouse. nginx.conf links this file at the end of every LearnHouse page's <head>.

   Values mirror the gdp-ui kit (kit/styles/tokens.css, DESIGN.md): change the kit first, then this file. LearnHouse's
   learner pages have no dark mode, so only the light values are here.

   How it wins: LearnHouse is Tailwind 4, whose utilities live in cascade layers. Rules here are unlayered, so they
   beat any utility whatever its specificity; only inline styles and !important need !important back. Selectors name
   LearnHouse's own markup, so re-check this file with deploy/learnhouse/local/run.sh after every LearnHouse upgrade. */

:root {
  --gdp-ground: #F4F7FA;
  --gdp-surface: #FFFFFF;
  --gdp-sunken: #EBF1F6;
  --gdp-wash: #E3EFF8;
  --gdp-rule: #E1E9EF;
  --gdp-edge: #7A8B9A;
  --gdp-ink: #0B1E2E;
  --gdp-text: #1D3142;
  --gdp-muted: #4A5D6E;
  --gdp-action: #0273B1;
  --gdp-action-hover: #015F93;
  --gdp-action-ink: #0269A3;
  --gdp-focus: #0269A3;
  --gdp-danger: #B42318;
  --gdp-danger-wash: #FCEDEA;
  --gdp-ok: #0F6E5C;
  --gdp-ok-wash: #E4F4EF;
  --gdp-navy: #03182B;
  --gdp-iris: linear-gradient(90deg, #2A8FE6, #62D0F5 35%, #9C8CFF 70%, #F49BD6);
  --gdp-iris-short: linear-gradient(135deg, #2A8FE6, #9C8CFF);
  --gdp-shadow-card: 0 1px 2px rgb(11 30 46 / 0.05), 0 18px 44px -30px rgb(11 30 46 / 0.32);
  --gdp-shadow-lift: 0 2px 4px rgb(11 30 46 / 0.06), 0 24px 48px -28px rgb(11 30 46 / 0.4);
  --gdp-shadow-pop: inset 0 0 0 1px rgb(11 30 46 / 0.06), 0 20px 50px -20px rgb(11 30 46 / 0.38);
  --gdp-shadow-glow: 0 10px 28px -12px rgb(2 115 177 / 0.75);
  --gdp-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* LearnHouse's shadcn variables (HSL triplets), so its ui/ components take Ripple colours. */
  --background: 210 37% 97%;
  --foreground: 207 61% 11%;
  --card: 0 0% 100%;
  --card-foreground: 207 61% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 207 61% 11%;
  --primary: 201 98% 35%;
  --primary-foreground: 0 0% 100%;
  --secondary: 207 38% 94%;
  --secondary-foreground: 207 61% 11%;
  --muted: 207 38% 94%;
  --muted-foreground: 208 20% 36%;
  --accent: 206 60% 93%;
  --accent-foreground: 207 61% 11%;
  --destructive: 4 76% 40%;
  --destructive-foreground: 0 0% 100%;
  --border: 206 30% 91%;
  --input: 208 14% 54%;
  --ring: 202 98% 32%;
  --radius: 0.75rem;
  color-scheme: light;
  accent-color: var(--gdp-action);
  scrollbar-color: var(--gdp-edge) transparent;
}

/* Geologica from the shop's own assets (all weights in one variable file), so light display weights render as drawn. */
@font-face { font-family: "GDP Geologica"; src: url(https://globaldiversitypractice.com/shop/assets/fonts/geologica-latin-wght.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "GDP Geologica"; src: url(https://globaldiversitypractice.com/shop/assets/fonts/geologica-latin-ext-wght.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Tailwind's palette, re-pointed at Ripple. LearnHouse's utilities read these variables, so its greys become Ripple's
   blue-greys (gray-400 and darker pass AA as text on white and on the ground), black becomes ink, red the danger
   tone, teal (progress) and the gold of certificates the logo blue (Ripple has no gold), green the ok tone. Weights above medium come down to medium: Ripple's big
   type is light and its small type regular. */
:root {
  --gdp-font: "GDP Geologica", Geologica, "Segoe UI", system-ui, sans-serif;
  --color-gray-50: #F4F7FA; --color-gray-100: #EBF1F6; --color-gray-200: #E1E9EF; --color-gray-300: #A9B6C2;
  --color-gray-400: #5A6D7F; --color-gray-500: #4A5D6E; --color-gray-600: #3A4D5E; --color-gray-700: #1D3142;
  --color-gray-800: #14283A; --color-gray-900: #0B1E2E; --color-gray-950: #03182B;
  --color-neutral-50: #F4F7FA; --color-neutral-100: #EBF1F6; --color-neutral-200: #E1E9EF; --color-neutral-300: #A9B6C2;
  --color-neutral-400: #5A6D7F; --color-neutral-500: #4A5D6E; --color-neutral-600: #3A4D5E; --color-neutral-700: #1D3142;
  --color-neutral-800: #14283A; --color-neutral-900: #0B1E2E; --color-neutral-950: #03182B;
  --color-slate-50: #F4F7FA; --color-slate-100: #EBF1F6; --color-slate-200: #E1E9EF; --color-slate-300: #A9B6C2;
  --color-slate-400: #5A6D7F; --color-slate-500: #4A5D6E; --color-slate-600: #3A4D5E; --color-slate-700: #1D3142;
  --color-slate-800: #14283A; --color-slate-900: #0B1E2E; --color-slate-950: #03182B;
  --color-zinc-100: #EBF1F6; --color-zinc-200: #E1E9EF; --color-zinc-300: #CBD6DF;
  --color-zinc-400: #5A6D7F; --color-zinc-500: #4A5D6E; --color-zinc-600: #3A4D5E; --color-zinc-700: #1D3142; --color-zinc-900: #0B1E2E;
  --color-black: #0B1E2E;
  --color-red-50: #FCEDEA; --color-red-100: #F8DAD4; --color-red-400: #C9473B; --color-red-500: #B42318; --color-red-600: #9A1D14; --color-red-700: #7F1810;
  --color-rose-500: #B42318; --color-rose-600: #9A1D14;
  --color-teal-50: #E3EFF8; --color-teal-100: #D2E6F5; --color-teal-400: #2A8FE6; --color-teal-500: #0273B1; --color-teal-600: #015F93; --color-teal-700: #0269A3;
  --color-cyan-500: #0273B1; --color-cyan-600: #015F93;
  --color-green-50: #E4F4EF; --color-green-100: #CDEBE2; --color-green-500: #0F6E5C; --color-green-600: #0D5F4F; --color-green-700: #0B5144;
  --color-emerald-50: #E4F4EF; --color-emerald-100: #CDEBE2; --color-emerald-500: #0F6E5C; --color-emerald-600: #0D5F4F; --color-emerald-700: #0B5144;
  --color-amber-50: #E3EFF8; --color-amber-100: #D2E6F5; --color-amber-400: #0273B1; --color-amber-500: #0273B1; --color-amber-600: #015F93; --color-amber-700: #0269A3; --color-amber-800: #0269A3; --color-amber-900: #0B1E2E;
  --color-orange-50: #E3EFF8; --color-orange-100: #D2E6F5; --color-orange-500: #0273B1; --color-orange-600: #015F93; --color-orange-700: #0269A3; --color-orange-800: #0269A3; --color-orange-900: #0B1E2E;
  --color-yellow-50: #E3EFF8; --color-yellow-100: #D2E6F5; --color-yellow-400: #0273B1; --color-yellow-500: #0273B1; --color-yellow-600: #015F93; --color-yellow-700: #0269A3; --color-yellow-800: #0269A3; --color-yellow-900: #0B1E2E;
  --color-blue-50: #E3EFF8; --color-blue-100: #D2E6F5; --color-blue-200: #B9D7EC; --color-blue-300: #8DBEE0; --color-blue-400: #2A8FE6;
  --color-blue-500: #0273B1; --color-blue-600: #015F93; --color-blue-700: #0269A3; --color-blue-800: #0269A3; --color-blue-900: #0B1E2E; --color-sky-500: #0273B1;
  --font-weight-semibold: 500; --font-weight-bold: 500; --font-weight-extrabold: 500; --font-weight-black: 500;
  --radius-xl: 16px; --radius-2xl: 16px; --radius-3xl: 20px;
}

/* The page */
html, body { background: var(--gdp-ground); color: var(--gdp-text); }
body { letter-spacing: 0; font-variant-numeric: tabular-nums; }
html .lh-org-font-root { background-color: var(--gdp-ground) !important; font-family: var(--gdp-font) !important; }
::selection { background: #CFE6F8; color: var(--gdp-ink); }
input, textarea { caret-color: var(--gdp-focus); }
:focus-visible { outline: 2px solid var(--gdp-focus) !important; outline-offset: 2px; }

/* Type: light, tight display; no shouting labels. LearnHouse's 9-11px text comes up to 12px here, enough for badges
   (number dots, answer letters, count chips); running text is lifted to the 13px floor by the rules further down. */
html h1 { font-weight: 300; letter-spacing: -0.03em; line-height: 1.12; }
html h2 { font-weight: 400; letter-spacing: -0.02em; }
html h3 { font-weight: 500; letter-spacing: -0.01em; }
.uppercase { text-transform: none; letter-spacing: 0; }
.text-\[9px\], .text-\[10px\], .text-\[11px\] { font-size: 0.75rem; line-height: 1.1rem; }
html .ProseMirror, html .ProseMirror * { font-family: var(--gdp-font); }
html .ProseMirror { color: var(--gdp-text); font-size: 1.0625rem; line-height: 1.7; }
/* The reading size is for prose; the quiz block keeps LearnHouse's own size, or its 14px answers get 29px lines. */
html .ProseMirror .react-renderer.node-blockQuiz { font-size: 1rem; line-height: 1.5; }
html .ProseMirror.ProseMirror :is(h1, h2) { font-weight: 400; letter-spacing: -0.02em; line-height: 1.25; color: var(--gdp-ink); }
html .ProseMirror.ProseMirror :is(h3, h4) { font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; color: var(--gdp-ink); }
/* The lesson's contents list (left column) used LearnHouse's fixed near-black; it takes the body text colour. */
a.toc-link { color: var(--gdp-text); }
html .ProseMirror.ProseMirror a, html .ProseMirror.ProseMirror a:hover { color: var(--gdp-action-ink); text-underline-offset: 0.2em; }

/* Depth: LearnHouse's outline-plus-shadow becomes Ripple's soft card shadow; cards get the card corner. */
.nice-shadow, .light-shadow { outline: 0; box-shadow: var(--gdp-shadow-card); }

/* Top bar: the main site's light, blurred header with the GDP logo, so shop, main site and Learning Hub read as one. */
nav[aria-label="Top navigation"] { background-color: rgb(244 247 250 / 0.88) !important; backdrop-filter: blur(12px); box-shadow: inset 0 -1px 0 var(--gdp-rule); }
/* A text menu, as on the main site: no icons beside Courses and Library; the progress page gets its name. */
nav[aria-label="Top navigation"] a:not([aria-label]) svg { display: none; }
nav[aria-label="Top navigation"] a[aria-label="Progress"] { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.75rem; border-radius: 999px; color: var(--gdp-text); font-weight: 500; font-size: 0.9375rem; }
nav[aria-label="Top navigation"] a[aria-label="Progress"] svg { display: none; }
nav[aria-label="Top navigation"] a[aria-label="Progress"]::after { content: "Progress"; }
/* LearnHouse hides Progress below tablet width and its phone menu has none, so phone learners had no way to their
   progress and certificates: it stays in the bar beside the menu button. */
nav[aria-label="Top navigation"] div.hidden:has(> a[aria-label="Progress"]) { display: flex; }
@media (width < 48rem) { nav[aria-label="Top navigation"] .logo { justify-content: flex-start; } }
@media (width < 48rem) { nav[aria-label="Top navigation"] button.md\:hidden { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; border-radius: 999px; } }
nav[aria-label="Top navigation"] button svg, nav[aria-label="Top navigation"] button svg.text-white\/70 { color: var(--gdp-muted); }
nav[aria-label="Top navigation"] button > svg[fill="currentColor"]:last-child { width: 12px; height: 12px; }
nav[aria-label="Top navigation"] .logo img { content: url(https://globaldiversitypractice.com/shop/assets/brand/gdp-logo.svg); height: 52px !important; width: auto !important; border-radius: 0; }
nav[aria-label="Top navigation"] .logo > a > div { height: auto; padding: 0; }
nav[aria-label="Top navigation"] :is(.text-white, .text-white\/70, .text-white\/80, .text-white\/60) { color: var(--gdp-text); }
nav[aria-label="Top navigation"] :is(a, button):hover { background-color: var(--gdp-wash); }
nav[aria-label="Top navigation"] input { background: var(--gdp-sunken); color: var(--gdp-ink); border: 0; box-shadow: inset 0 0 0 1px var(--gdp-rule); border-radius: 999px; }
nav[aria-label="Top navigation"] input:focus { background: var(--gdp-surface); box-shadow: inset 0 0 0 2px var(--gdp-focus); outline: none !important; }
nav[aria-label="Top navigation"] input::placeholder { color: var(--gdp-muted); }
/* The phone menu drops below the bar: solid ground (no page showing through), the same search field, no icons. */
div.fixed.inset-x-0.backdrop-blur-lg.md\:hidden { background: var(--gdp-ground); backdrop-filter: none; box-shadow: inset 0 -1px 0 var(--gdp-rule), 0 16px 32px -10px rgb(3 24 43 / 0.24); }
div.fixed.inset-x-0.backdrop-blur-lg.md\:hidden > div > div.border-t { align-self: stretch; margin-inline: 0.5rem; display: flex; justify-content: center; }
div.fixed.inset-x-0.backdrop-blur-lg.md\:hidden input { background: var(--gdp-sunken); color: var(--gdp-ink); box-shadow: inset 0 0 0 1px var(--gdp-rule); border-radius: 999px; }
div.fixed.inset-x-0.backdrop-blur-lg.md\:hidden a:not([aria-label]) svg { display: none; }
/* Boards and the AI copilot are switched off for GDP's learners. */
nav[aria-label="Top navigation"] :is(a[href$="/boards"], button[class*="violet"]) { display: none; }
/* Search: GDP has only courses, so the filters for folders (its label untranslated), communities, discussions,
   playgrounds, podcasts and members always read 0; the result cards drop the empty author avatar. */
div.mt-4.flex.overflow-x-auto > button:not(:has(svg.lucide-search, svg.lucide-book-copy)) { display: none; }
div.grid div.flex.items-center.gap-2.pt-2:has(> img[alt="User Avatar"]) { display: none; }
/* GDP sells through its own shop, not LearnHouse's payments, so Purchases only ever says "Could not load purchases":
   it leaves the account menu and the settings tabs (order emails are the record). Unhide if LearnHouse payments start. */
a[href$="/account/purchases"] { display: none; }
/* The Profile tab is LearnHouse's beta public-profile builder: GDP learners have no public profile, and on phones the
   builder's side column crushes its own buttons. Unhide if GDP starts using profiles. */
a[href$="/account/profile"] { display: none; }
/* Empty states ("No courses in progress"): LearnHouse's dashed outline is one shade off the page and all but vanishes;
   a sunken panel reads as an empty slot. */
div.border-2.border-dashed.border-gray-100.rounded-2xl { border: 0; border-radius: 16px; background: var(--gdp-sunken); }
/* Security: the password form lines up with its heading instead of floating in the middle of the card. */
form.max-w-2xl.mx-auto.space-y-6:has(input[type="password"]) { margin-inline: 0; max-width: 32rem; }
form.max-w-2xl.mx-auto.space-y-6:has(input[type="password"]) .justify-end { justify-content: flex-start; }
/* Security rows draw their icons bare (the two-factor icon sat in a grey tile; the session icon did not), and their
   small print meets the brand's 13px floor. Search's result count and type chips too. */
div.flex.items-center.gap-3.min-w-0 > div.w-9.h-9.rounded-lg.bg-gray-100 { background: transparent; width: auto; }
div.rounded-xl.nice-shadow:has(input[type="password"]) p.text-xs.text-gray-500,
div.container.max-w-5xl > p.text-xs.mb-5, div.container.max-w-5xl button.rounded-full.text-xs,
div.container.max-w-5xl section > h2.text-\[11px\], :is(button, a).ring-offset-background.text-xs,
div.flex.flex-col.items-center.space-y-6 > div.flex.items-center.text-xs.text-gray-500,
div.rounded-md.flex.flex-col > span.text-\[10px\].mb-1, span.text-xs.font-bold.min-w-\[90px\],
button.bg-white.rounded-full.nice-shadow > span.text-xs.font-bold, div.rounded-md.flex.flex-col.nice-shadow span.text-xs.font-bold,
.node-blockQuiz :is(span.text-\[11px\], div.text-\[10px\]).tracking-widest,
button.cursor-pointer.flex.items-center.space-x-3.rounded-lg p.text-xs,
div.flex.items-center.space-x-1\.5.mt-0\.5.text-neutral-400 > span.text-xs,
div.p-3.flex.flex-col.space-y-1\.5 :is(span.text-gray-400.text-xs, span.text-\[10px\].tracking-wider, div.text-xs.text-gray-500),
div.relative.z-10.mt-auto.p-6.pt-8 :is(span, div).text-xs, form.relative.group > button.absolute.inset-y-2,
div.flex.items-center.justify-between.text-\[10px\].text-gray-500, button.text-\[10px\].text-gray-500, a.flex.flex-col.items-center.gap-1.px-3 > span.text-\[10px\] { font-size: 0.8125rem; }
/* Numbered chapter dots, answer letters and count chips stay small: they are badges, not running text. */
a.flex.flex-col.items-center.gap-1.px-3 > span.text-\[10px\].max-w-\[60px\] { max-width: 4.5rem; }
/* On phones the two-factor row wraps its Enable button under the text; without the icon, both start on one edge. */
@media (width < 48rem) { div.flex.items-center.gap-3.min-w-0 > div.w-9.h-9.rounded-lg.bg-gray-100 { display: none; } }
/* LearnHouse sets much secondary text text-xs on phones and sm:text-sm above; on phones it meets the 13px floor. */
@media (width < 40rem) { .text-xs[class*="sm:text-sm"] { font-size: 0.8125rem; } }
/* GDP keeps nothing in the Library, so for learners it is a dead end ("This folder is empty"); unhide if that changes. */
:is(nav[aria-label="Top navigation"], div.fixed.inset-x-0.md\:hidden) a[href$="/library"] { display: none; }

/* Buttons: things you press are pills; the primary is logo blue with its glow. */
:is(button, a).bg-black, button.bg-gray-900, button.bg-neutral-900 {
  background-color: var(--gdp-action); color: #fff; border-radius: 999px; box-shadow: var(--gdp-shadow-glow);
}
:is(button, a).bg-black:hover, button.bg-gray-900:hover, button.bg-neutral-900:hover { background-color: var(--gdp-action-hover); }
/* The same primary drawn as a dark link (certificate page "Go Home") or a dark box (an activity's "Mark as complete"). */
a.bg-gray-800, div.bg-gray-800.nice-shadow { background-color: var(--gdp-action); color: #fff; box-shadow: var(--gdp-shadow-glow); }
a.bg-gray-800 { border-radius: 999px; }
div.bg-gray-800.nice-shadow { border-radius: 12px; }
:is(a.bg-gray-800, div.bg-gray-800.nice-shadow):hover { background-color: var(--gdp-action-hover); }
button.nice-shadow, a.nice-shadow.rounded-lg { border-radius: 999px; }
/* Leaving a course is possible, never the loudest thing on the page. */
button.bg-red-500, button.bg-red-50.text-red-700 { background: transparent; color: var(--gdp-muted); box-shadow: inset 0 0 0 1px var(--gdp-rule); border-radius: 999px; font-weight: 500; }
button.bg-red-600.rounded-lg { border-radius: 999px; background-color: var(--gdp-danger); }
button.bg-red-600.rounded-lg:hover { background-color: #8F1C13; }
button.bg-red-500:hover, button.bg-red-50.text-red-700:hover { background: var(--gdp-danger-wash); color: var(--gdp-danger); }

/* Noise a learner does not need: the author card with its empty "Course Updates", the editor's created/updated line
   on each lesson, and Ask AI (AI is off on this instance). */
.course_metadata_right > div:has(div.mt-2.pt-2) { display: none; }
h1 + div.flex.flex-wrap.items-center.gap-3.mt-2 { display: none; }
div.rounded-full.drop-shadow-md.text-white:has(> i) { display: none; }

/* The selected place in a menu (account settings, its phone tab bar) is a pale pill, not a filled button. */
a.bg-gray-900 { background-color: var(--gdp-wash); color: var(--gdp-ink); box-shadow: none; font-weight: 500; }
a.bg-gray-900:hover { background-color: var(--gdp-wash); }
a.bg-gray-900 svg { color: var(--gdp-action-ink); }

/* Account menu: the email is not a name, so it keeps its own case; the open menu shows focus on its items, not a frame. */
[role="menu"] p.capitalize.text-xs { text-transform: none; }
[role="menu"]:focus-visible { outline: none !important; }
/* LearnHouse's search popover stays open after focus leaves the box, covering the page for a keyboard user; it
   shows only while the search has focus or the pointer. */
div.relative.w-full:has(input):not(:focus-within):not(:hover) > div.absolute.z-dropdown { display: none; }
/* The lesson body is a Tab stop; LearnHouse's own rule strips its focus ring, which keyboard users need (WCAG 2.4.7). */
html .canva-content-wrapper .ProseMirror.ProseMirror:focus-visible { outline: 2px solid var(--gdp-focus) !important; outline-offset: 6px; border-radius: 4px; }

/* Fields: surface with the control edge, the inset focus ring, 16px typed text so phones never zoom. */
input.bg-neutral-50, textarea.bg-neutral-50 { background: var(--gdp-surface); border-color: var(--gdp-edge); color: var(--gdp-ink); font-size: max(16px, 1rem); }
input.bg-neutral-50:focus, textarea.bg-neutral-50:focus { border-color: transparent; box-shadow: inset 0 0 0 2px var(--gdp-focus), 0 0 0 4px rgb(42 143 230 / 0.14); outline: none !important; }
input::placeholder, textarea::placeholder { color: var(--gdp-muted); opacity: 1; }

/* Sign-up and password sign-in: the panel becomes a Ripple stage (navy, pools of light, the rings from a corner)
   in place of LearnHouse's black grid; the page's own grid lines and LearnHouse's mark go. */
div[style*="41.61deg"] {
  background: url(/_gdp/rings.svg) no-repeat 100% 100% / min(80%, 34rem),
    radial-gradient(40% 55% at 100% 0%, rgb(244 155 214 / 0.10), transparent 70%), radial-gradient(55% 75% at 86% 8%, rgb(156 140 255 / 0.24), transparent 70%),
    radial-gradient(65% 85% at 8% 100%, rgb(42 143 230 / 0.22), transparent 70%), radial-gradient(120% 100% at 80% 20%, #062B4A 0%, #03182B 60%, #020F1C 100%) !important;
}
div[style*="41.61deg"] ~ div.absolute.inset-0, div.absolute.inset-0.pointer-events-none.z-0 { display: none; }
img[alt="LearnHouse"].invert { display: none; }
/* On a phone the panel is a short strip under the language picker: no rings behind the picker's words, the name
   stops short of the picker, and the picker's chevron is as white as its label. */
@media (width < 64rem) {
  div[style*="41.61deg"] { background-image: radial-gradient(55% 75% at 86% 8%, rgb(156 140 255 / 0.24), transparent 70%),
    radial-gradient(65% 85% at 8% 100%, rgb(42 143 230 / 0.22), transparent 70%), radial-gradient(120% 100% at 80% 20%, #062B4A 0%, #03182B 60%, #020F1C 100%) !important; padding-inline-end: 5.5rem; }
  div[style*="41.61deg"] > .text-lg { font-size: 1rem; }
  main div.absolute.top-4.end-4 > button svg.opacity-50 { opacity: 1; }
}
/* With LearnHouse's badge off, the sign-in pages keep its empty link in the top bar: invisible, yet a Tab stop. */
.login-topbar a[href="https://learnhouse.app"] { display: none; }
/* Sign-up and password sign-in end with "you agree to LearnHouse's Terms": the software maker's terms, not GDP's. */
div:has(> p > a[href="https://www.learnhouse.io/terms"]) { display: none; }

/* Course cards: the picture, the title, a readable summary and one "Start learning" link. The creator's avatar and
   creation date say nothing to a learner. */
div.group.rounded-xl.nice-shadow > div.p-3 { padding: 1rem 1.1rem 0.9rem; gap: 0.4rem; }
div.group.rounded-xl.nice-shadow p.text-\[11px\] { font-size: 0.8125rem; line-height: 1.2rem; color: var(--gdp-muted); }
div.group.rounded-xl.nice-shadow div.border-t > div.flex.items-center.gap-2 { display: none; }
div.group.rounded-xl.nice-shadow div.border-t:has(> div.flex.items-center.gap-2) { justify-content: flex-end; }
div.group.rounded-xl.nice-shadow div.border-t { gap: 1rem; border-color: var(--gdp-rule); padding-top: 0.6rem; }
div.group.rounded-xl.nice-shadow div.border-t > a { font-size: 0.8125rem; font-weight: 500; color: var(--gdp-action-ink); }

/* Reduced motion: nothing moves or scales; colour and opacity changes stay, so state still shows. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-property: color, background-color, border-color, opacity, box-shadow !important; scroll-behavior: auto !important; }
  [class*="hover:scale"]:hover, .group:hover img { scale: none !important; transform: none !important; }
}

/* Progress ring: logo blue on the sunken track (LearnHouse draws it with fixed SVG colours). */
circle[stroke="#10b981"] { stroke: var(--gdp-action); }
circle[stroke="#e5e7eb"] { stroke: var(--gdp-sunken); }

/* "What you will learn": a drawn tick on a pale disc instead of the ✅ emoji the course data carries. */
.space-y-2 > div.flex.space-x-2.items-center { color: var(--gdp-text); font-weight: 400; }
.space-y-2 > div.flex.space-x-2.items-center > div.px-2.py-2.rounded-full:has(> span) { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; background: var(--gdp-wash); }
.space-y-2 > div.flex.space-x-2.items-center > div.px-2.py-2.rounded-full > span { display: none; }
.space-y-2 > div.flex.space-x-2.items-center > div.px-2.py-2.rounded-full:has(> span)::before {
  content: ""; width: 1rem; height: 1rem; background: var(--gdp-action-ink);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Secondary text LearnHouse writes as translucent black takes Ripple's muted tone (AA on white and the ground). */
:is(.text-black\/20, .text-black\/25, .text-black\/30, .text-black\/35, .text-black\/40, .text-black\/45, .text-black\/50, .text-black\/60) { color: var(--gdp-muted); }
:is(.text-black\/70, .text-black\/80, .text-black\/90) { color: var(--gdp-text); }
/* The language picker sits on the sign-up page's navy strip on phones and tablets. */
@media (width < 64rem) { main div.absolute.top-4.end-4 > button { color: rgb(255 255 255 / 0.9); } }

/* Course card titles wrap to two lines, so every course name can be read. */
div.group.rounded-xl.nice-shadow .line-clamp-1 { -webkit-line-clamp: 2; line-clamp: 2; }

/* Lesson header: the lesson is the page title; the course is a small line above it, and the "Course" and
   "Chapter 1 :" labels go (the chapter progress control already says where you are). */
div.flex.flex-col.-space-y-1 > p.text-xs:first-child { display: none; }
div.flex.flex-col.-space-y-1:not(.min-w-0) > h1 { font-size: 1rem; line-height: 1.4; font-weight: 400; letter-spacing: 0; color: var(--gdp-muted); }
div.flex.flex-col.-space-y-1.min-w-0 > h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.15; font-weight: 300; letter-spacing: -0.03em; color: var(--gdp-ink); }

/* Reading measure: lesson text and a course's about text stop at about 70 characters. */
html .ProseMirror.ProseMirror > :is(p, ul, ol, h1, h2, h3, h4, blockquote) { max-width: 70ch; }
.course_metadata_left p.whitespace-pre-line, .course_metadata_left .whitespace-pre-wrap { max-width: 70ch; }

/* Account settings: one card, not cards inside it; no AI avatar (AI is off). */
div.flex.flex-col.-space-y-1.rounded-md:is(.bg-gray-50, .bg-red-50\/60) { background: transparent; padding-inline: 0.5rem; }
div.flex.flex-col.bg-gray-50.-space-y-1.rounded-md > h1 { font-size: 1.5rem; line-height: 1.25; color: var(--gdp-ink); }
div.flex.flex-col.bg-gray-50.-space-y-1.rounded-md > :not(h1) { font-size: 0.875rem; color: var(--gdp-muted); margin-top: 0.35rem; }
/* Every section heading starts on one left edge: the shield and warning icons and the indent that cleared them go.
   Delete account is titled like the others; the danger red warning line and button mark it. */
div.flex.flex-col.-space-y-1.rounded-md:is(.bg-gray-50, .bg-red-50\/60) > h1 > svg { display: none; }
div.flex.flex-col.-space-y-1.rounded-md:is(.bg-gray-50, .bg-red-50\/60) > h2.ps-7 { padding-inline-start: 0; }
div.flex.flex-col.bg-red-50\/60.-space-y-1.rounded-md > h1 { font-size: 1.5rem; line-height: 1.25; color: var(--gdp-ink); }
div.flex.flex-col.bg-red-50\/60.-space-y-1.rounded-md > h2 { font-size: 0.875rem; color: var(--gdp-danger); margin-top: 0.35rem; }
div.p-6.rounded-lg.nice-shadow.h-full { background: transparent; box-shadow: inset 1px 0 0 var(--gdp-rule); border-radius: 0; }
@media (width < 64rem) { div.p-6.rounded-lg.nice-shadow.h-full { box-shadow: none; } }
div.flex.flex-col.items-center.space-y-6 > button.border-gray-200.bg-white { display: none; }

/* LearnHouse also writes its card shadow out longhand; it gets the same Ripple card shadow. */
[class*="outline-neutral-200/40"] { outline: 0; box-shadow: var(--gdp-shadow-card); }
/* No card inside a card: an inner panel keeps a hairline instead of a second shadow (the course sidebar's progress
   box loses both); the dot texture goes. */
.nice-shadow .nice-shadow { box-shadow: inset 0 0 0 1px var(--gdp-rule); }
.course_metadata_right div.relative.nice-shadow { box-shadow: none; }
.course_metadata_right div.relative.nice-shadow > .relative.p-4 { padding: 0.25rem 0; }
.nice-shadow > div.absolute.inset-0[class*="opacity-"] { display: none; }

/* Cards in a row line up: the body fills the card and the "Start learning" footer sits at its foot. */
div.group.rounded-xl.nice-shadow { height: 100%; }
div.group.rounded-xl.nice-shadow > div.p-3 { flex: 1; display: flex; flex-direction: column; }
div.group.rounded-xl.nice-shadow > div.p-3 > div.border-t { margin-top: auto; }

/* Certificate check on a phone: the "Certificate Verified" pill drops under the title instead of pushing the page
   sideways, and the certificate's instructor / logo / date row and the course row keep a gap between their texts. */
div.relative.z-10.mt-auto > div.flex.items-end.justify-between.w-full { gap: 0.75rem; }
@media (width < 40rem) {
  div.rounded-2xl.p-6.mb-8 > div.flex.items-center.justify-between { flex-wrap: wrap; gap: 1rem; }
  div.relative.z-10.mt-auto > div.flex.items-end.justify-between.w-full { flex-direction: column; align-items: center; text-align: center; }
  div.relative.z-10.mt-auto > div.flex.items-end.justify-between.w-full > div { align-items: center; }
  div.flex.items-start.space-x-4:has(> div.flex-1.min-w-0) { flex-wrap: wrap; row-gap: 0.75rem; }
  div.flex.items-start.space-x-4 > div.flex-1.min-w-0 + div.flex-shrink-0 { flex-basis: 100%; margin-inline-start: 0; }
  div.absolute.top-4.left-4.z-20 { max-width: calc(100% - 6.5rem); }
  div.absolute.top-4.left-4.z-20 span { overflow-wrap: anywhere; }
}

/* An activity's chapter strip: finished chapters are logo blue, the current one a lighter blue, so "done" outranks
   "you are here". */
div.h-\[7px\].bg-gray-500 { background-color: rgb(2 115 177 / 0.4); }
div.h-\[7px\].bg-gray-500:hover { background-color: rgb(2 115 177 / 0.55); }
/* The "Click the checkbox to mark this activity as complete" hint only repeats the button under it ("Mark as
   complete", with its checkbox), and covered the Previous link on a phone and lesson text on a desktop. */
div.absolute.-top-20.left-1\/2.w-64 { display: none; }

/* Progress page cards: the empty part of the progress bar at the foot of each picture is solid, not tinted by it. */
div.absolute.bottom-0.h-1\.5.bg-gray-200\/80 { background-color: var(--gdp-sunken); }

/* Account menu: its icons are muted so the words lead; Sign Out keeps its red. */
[role="menu"] [role="menuitem"]:not(.text-red-600) > svg:first-child { color: var(--gdp-muted); }

/* Search results: every picture is the same 16:9 box, so the titles line up. */
div.relative.aspect-video.bg-black\/5 > img { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; }

/* Phone breadcrumb: the course and page names shrink with an ellipsis instead of the row being cut mid-word. */
@media (width < 40rem) {
  ol.overflow-hidden.nice-shadow { max-width: 100%; }
  ol.overflow-hidden.nice-shadow > li:not(:first-child):has(> :is(a, span) > span.truncate) { min-width: 0; flex-shrink: 1; }
  ol.overflow-hidden.nice-shadow > li > :is(a, span) { min-width: 0; }
  ol.overflow-hidden.nice-shadow span.truncate { max-width: none; }
}

/* Under a lesson: Next is a white card like Previous (LearnHouse's pressed grey read as disabled), the two sit at
   one height, and a finished activity's Status turns Ripple's "done" green. */
div.bg-gray-200[class*="shadow-[inset"] { background-color: var(--gdp-surface); box-shadow: var(--gdp-shadow-card); color: var(--gdp-text); }
div.flex.items-center.justify-between.order-2 { align-items: stretch; }
div.bg-teal-600.rounded-md.nice-shadow { background-color: var(--gdp-ok); box-shadow: none; }

/* Account menu: the Language icon is drawn at 14px against 16px for the rest, which set its row 2px off. */
[role="menu"] [aria-haspopup="menu"] > svg:first-child { width: 16px; height: 16px; color: var(--gdp-muted); }

/* A signed-out visitor's "Start Course" button carried an empty avatar picture before its label. */
button[aria-label="Start Course"] img[alt="User Avatar"] { display: none; }

/* Course page: on a phone LearnHouse repeats the author card ("@admin") with Leave Course or Get Started under the
   lessons; the card above already has that button. No avatar inside the sidebar's Start or Leave button. */
div.bg-white\/90.backdrop-blur-sm.my-6.mx-2 { display: none; }
.course_metadata_right button img[alt="User Avatar"] { display: none; }

/* The lessons card: chapter rows were the page's own ground, so the card lost its top edge. */
div.flex.items-start.py-4.px-4.bg-neutral-50.cursor-pointer { background-color: var(--gdp-sunken); box-shadow: inset 0 -1px 0 var(--gdp-rule); outline: 0; }
div.flex.items-start.py-4.px-4.bg-neutral-50.cursor-pointer:hover { background-color: var(--gdp-wash); }

/* Things you press are pills: LearnHouse's shared button (Change Avatar, Clear All, Add Detail, Add General…). */
:is(button, a).ring-offset-background { border-radius: 999px; }

/* Quiz: Submit is the blue primary once there are answers (a quiet pill until then); reset is a muted 32px target. */
.node-blockQuiz button.text-xs.px-2\.5 { border-radius: 999px; min-height: 2rem; padding-inline: 1rem; font-size: 0.875rem; }
.node-blockQuiz button.text-xs.px-2\.5.bg-neutral-700 { background-color: var(--gdp-action); box-shadow: var(--gdp-shadow-glow); }
.node-blockQuiz button.text-xs.px-2\.5.bg-neutral-700:hover { background-color: var(--gdp-action-hover); }
.node-blockQuiz button[title="Reset answers"] { display: inline-grid; place-items: center; min-width: 2rem; min-height: 2rem; border-radius: 999px; color: var(--gdp-muted); }

/* Progress page: "My Certificates" matches "Progress": the same light heading on the same white tile. */
div.flex.items-center.gap-3.mb-2 > h2.text-lg { font-size: 1.25rem; font-weight: 300; color: var(--gdp-ink); }
div.flex.items-center.gap-3.mb-2 > div.p-2.bg-yellow-50 { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; background: var(--gdp-surface); box-shadow: var(--gdp-shadow-card); }

/* Phone, under a lesson: Next takes the room beside Status, and both Previous and Next titles use the card's width
   instead of stopping at 120px. */
@media (width < 40rem) {
  div.flex.items-center.justify-between.order-2 { gap: 0.5rem; }
  div.flex.items-center.justify-between.order-2 > :last-child { flex: 1; min-width: 0; margin: 0; }
  :is(div.order-1, div.order-2) span.truncate.max-w-\[120px\] { max-width: none; }
  :is(div.order-1, div.order-2) :has(> span.truncate) { min-width: 0; }
}
/* Password sign-in: "Email me a login link" is a quiet pill beside the blue Login pill. */
button.w-full.bg-white.rounded-lg.border.border-neutral-200 { border-radius: 999px; border-color: var(--gdp-edge); color: var(--gdp-ink); }

/* LearnHouse's own not-found page carries the LearnHouse wordmark; it shows GDP's logo instead. */
img[alt="logo"][src*="black_logo"] { content: url(https://globaldiversitypractice.com/shop/assets/brand/gdp-logo.svg); width: auto !important; height: 72px !important; }

/* Phone lessons card: a long chapter title wraps beside its number instead of running off the card. */
div.flex.items-start.py-4.px-4.bg-neutral-50.cursor-pointer > div.w-full { min-width: 0; }
div.flex.items-start.py-4.px-4.bg-neutral-50.cursor-pointer div.flex-wrap { flex-wrap: nowrap; align-items: flex-start; }
div.flex.items-start.py-4.px-4.bg-neutral-50.cursor-pointer h3.truncate { white-space: normal; overflow: visible; text-overflow: clip; }

/* The trophy at the end of the chapter strip: LearnHouse fades it to 40%, which left it at about 1.2:1. */
a.opacity-40:has(svg.lucide-trophy) { opacity: 1; }
a:has(> div > svg.lucide-trophy) svg.lucide-trophy { color: var(--gdp-muted); }

/* Quiz: a chosen answer carries a blue ring as well as the pale wash. */
.node-blockQuiz div.group.bg-blue-50 { box-shadow: inset 0 0 0 2px var(--gdp-action); }

/* Certificate check: the certificate is one sheet with a hairline, not a card in a framed card; the security notes
   read as text, not as four links. */
div.bg-gradient-to-br.from-blue-50.to-indigo-50.border-blue-200 { background: none; border: 0; padding: 0; }
div.bg-gradient-to-br.from-blue-50.to-indigo-50.border-blue-200 > div.bg-white { box-shadow: inset 0 0 0 1px var(--gdp-rule); }
div.bg-blue-50.border-blue-200.rounded-2xl :is(ul, li) { color: var(--gdp-text); }

/* LearnHouse's not-found page: its message keeps side margins and wraps evenly (the second half was a block span). */
body:has(img[alt="logo"][src*="black_logo"]) p span.block { display: inline; }
body:has(img[alt="logo"][src*="black_logo"]) p span.block::before { content: " "; }
body:has(img[alt="logo"][src*="black_logo"]) p { max-width: 36rem; margin-inline: auto; padding-inline: 1.5rem; text-wrap: balance; }

/* Quiz block: one grouped area, not a card inside the lesson card; on a phone the answers get the lesson's width. */
.node-blockQuiz > div > div.bg-neutral-50.rounded-xl.nice-shadow { box-shadow: none; }
@media (width < 40rem) { .node-blockQuiz > div > div.bg-neutral-50.rounded-xl.nice-shadow { background: none; padding-inline: 0; } }

/* Certificate check: the security notes hang their typed bullets; the short rule under the instructor's name goes. */
div.bg-blue-50.border-blue-200.rounded-2xl li { padding-inline-start: 0.8em; text-indent: -0.8em; }
div.h-px.w-10.bg-gray-600.opacity-50 { display: none; }

/* The chapter strip's numbered dots are 22px; their hit area reaches the 24px minimum (WCAG 2.2, 2.5.8). */
a.relative.z-10.shrink-0.flex.items-center.cursor-pointer { min-width: 24px; min-height: 24px; justify-content: center; }

/* Search results: each course card matches the course grid's card (16px title, 13px summary, the card shadow, padding)
   instead of being a third, smaller style. */
a.bg-white.rounded-lg.border.border-black\/5.group { border: 0; border-radius: 16px; box-shadow: var(--gdp-shadow-card); letter-spacing: -0.4px; }
a.bg-white.rounded-lg.border.border-black\/5.group h3 { letter-spacing: -0.4px; }
a.bg-white.rounded-lg.border.border-black\/5.group h3.text-sm { font-size: 1rem; color: var(--gdp-ink); }
a.bg-white.rounded-lg.border.border-black\/5.group p.text-xs { font-size: 0.8125rem; line-height: 1.2rem; margin-top: 0.6rem; color: var(--gdp-muted); }
a.bg-white.rounded-lg.border.border-black\/5.group > div:last-child { padding: 1rem 1.1rem 0.9rem; }