/* ==========================================================================
   reference.css — THE Scrollwell design system. One source for every page of the platform: the
   learner app signed in (body.p-app.signed-in), its public pages signed out (body.p-app.signed-out)
   and the staff console (body.a-app). Loaded by lms_head() after lms.css and m3.css. It is the
   owner's reference designs ported as they are (scrollwell_apple_detail_redesign.html,
   …_more_page_…, …_ai_tools_…, …_open_programmes_…, …_help_faq_draft, …_partner_programme_…,
   20 Oct 2026) — colours, type, sizes, radii, shadows, icons, breakpoints.

   Scopes (write new rules with these, so one change reaches every page that shows the part):
     body.lms:is(.p-app, .a-app)              every page: tokens, type, top bar
     body.lms:is(.p-app, .a-app):not(.auth-split) .main
                                              the content of every page: the app's components
                                              (the sign-in page keeps its own brand layout)
     body.lms:is(.p-app.signed-in, .a-app)    the two signed-in shells: side menu, account menu
     :root[data-theme="dark"] … signed-in     dark theme (signed-out pages are always light)

   What is here, top to bottom:
     1. tokens (--pp-*), the page font, the shared top bar and side menu
     2. .pp — the reference's own components, for pages written in its markup (Home, Programmes,
        More, AI tools, Programmes open for registration, Help, a programme's page, page headers)
     3. the app's own components in the reference's look (.btn, .card, .chip, .notice, .tabs,
        fields, tables, metrics, pagination, dialogs, states), for every page written in the
        app's markup — learner and staff alike
     4. dark theme
   The page ground (gradient + grain) is in m3.css ("the page ground"); the icon sprite is
   lms_ref_sprite() in includes/ui.php. Three reference class names already meant something else
   in the app and are renamed here: .btn -> .pbtn, .eyebrow -> .p-eyebrow, .meta -> .p-meta.
   On phones the app's own drawer and bottom bar stay (the reference's phone strip is not used).
   ========================================================================== */

/* ---- tokens, for every page ---- */
body.lms:is(.p-app, .a-app) {
  --pp-blue: #0879c9; --pp-blue-hover: #0667ad; --pp-blue-wash: #edf6fd;
  --pp-ink: #17253d; --pp-ink-2: #35465f; --pp-muted: #66758c; --pp-subtle: #8a97a8;
  --pp-line: #e4e9f0; --pp-line-2: #d6dee9; --pp-canvas: #f6f8fb; --pp-white: #fff;
  --pp-green: #177b56; --pp-green-bg: #e9f7ef; --pp-violet: #6248ca; --pp-violet-bg: #f0edfc;
  --pp-amber: #8a5d07; --pp-amber-bg: #fff5df; --pp-red: #b33d3d; --pp-red-bg: #fff0ef;
  --pp-shadow-sm: 0 1px 2px rgba(24, 39, 63, .035);
  --pp-shadow-card: 0 2px 10px rgba(25, 42, 68, .035), 0 1px 2px rgba(25, 42, 68, .025);
  --pp-shadow-pop: 0 20px 70px rgba(10, 28, 50, .2);
  --pp-ease: cubic-bezier(.2, .7, .25, 1);
  --pp-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Arial, sans-serif;
}
/* ---- the page: one font, one frame ---- */
body.lms:is(.p-app, .a-app) {
  --top: 66px;
  font-family: var(--pp-font);
  font-size: 13px; line-height: 1.5; color: var(--pp-ink);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.pp { font-family: var(--pp-font); }
html:has(> body.lms:is(.p-app, .a-app)) { scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html:has(> body.lms:is(.p-app, .a-app)) { scroll-behavior: smooth; } }

/* ---- top bar ---- */
body.lms:is(.p-app, .a-app) .topbar { height: 66px; padding: 0 28px; gap: 24px; background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--pp-line); box-shadow: none; backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); }
body.lms:is(.p-app, .a-app) .topbar .brand { gap: 17px; }
body.lms:is(.p-app, .a-app) .topbar .brand-sub { display: inline-flex; align-items: center; gap: 17px; margin: 0; padding: 0; border: 0; color: var(--pp-muted);
  font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
body.lms:is(.p-app, .a-app) .brand-sub::before { content: ""; width: 1px; height: 23px; background: var(--pp-line-2); }
body.lms:is(.p-app, .a-app) .top-actions { gap: 10px; }
body.lms:is(.p-app, .a-app) .search-btn { height: 36px; width: min(300px, 31vw); display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border: 1px solid var(--pp-line-2); border-radius: 9px; background: #fafbfd; color: #7c899b; font: inherit; font-size: 11px;
  transition: border .16s, background .16s, box-shadow .16s; }
body.lms:is(.p-app, .a-app) .search-btn:hover { border-color: #8fc5ec; background: #fff; box-shadow: 0 0 0 3px rgba(8, 121, 201, .08); color: #7c899b; }
body.lms:is(.p-app, .a-app) .search-btn .ic { width: 17px; height: 17px; color: #7c899b; }
body.lms:is(.p-app, .a-app) .search-btn span { flex: 1; min-width: 0; text-align: left; color: #8995a6; font-size: 11px; }
body.lms:is(.p-app, .a-app) .search-btn kbd { font: inherit; font-size: 10px; line-height: 18px; min-width: 27px; padding: 0 4px; text-align: center; white-space: nowrap;
  border: 1px solid #e2e7ee; border-radius: 5px; color: #7f8a9b; background: #fff; box-shadow: none; }
/* the learner's icons (bell, help): the reference's 35px icon buttons */
body.lms.p-app.signed-in .topbar .top-link { position: relative; display: grid; place-items: center; width: 35px; height: 35px; min-width: 35px; min-height: 35px; padding: 0;
  border: 1px solid transparent; border-radius: 9px; background: transparent; color: #64748b; transition: background .16s, border-color .16s; }
body.lms.p-app.signed-in .topbar .top-link:hover { background: #f4f7fa; border-color: var(--pp-line); color: #64748b; text-decoration: none; }
body.lms.p-app.signed-in .topbar .top-link .ic { width: 17px; height: 17px; color: currentColor; }
/* Help is an icon here, as in the reference; its word stays for screen readers. */
body.lms.p-app.signed-in .topbar .top-link > span:not(.bell-dot) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The bell's count becomes the reference's dot; the number is still in the link's name. */
body.lms.p-app.signed-in .topbar .bell-dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; min-width: 0; padding: 0; border: 0;
  border-radius: 50%; background: #dc5f56; box-shadow: 0 0 0 2px #fff; font-size: 0; line-height: 0; color: transparent; }
/* worded links in the bar (visitors: Programmes, Help, the website; staff: Certificate portal, Participant site) */
body.lms:is(.p-app.signed-out, .a-app) .topbar :is(.top-link, .top-pill), body.lms.p-app .site-nav a { display: inline-flex; align-items: center; gap: 7px; height: 35px;
  min-height: 35px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #53627a; font-family: inherit; font-size: 11.5px;
  font-weight: 620; white-space: nowrap; text-decoration: none; box-shadow: none; transition: background .16s, border-color .16s, color .16s; }
body.lms:is(.p-app.signed-out, .a-app) .topbar :is(.top-link, .top-pill):hover, body.lms.p-app .site-nav a:hover { background: #f4f7fa; border-color: var(--pp-line); color: #293b54; text-decoration: none; }
body.lms:is(.p-app.signed-out, .a-app) .topbar .top-pill { border-color: var(--pp-line); background: #fff; }
body.lms:is(.p-app.signed-out, .a-app) .topbar :is(.top-link, .top-pill) .ic { width: 16px; height: 16px; color: currentColor; }
body.lms:is(.p-app, .a-app) .topbar .btn { height: 35px; min-height: 35px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; background: var(--pp-blue); color: #fff;
  box-shadow: 0 1px 1px rgba(0, 68, 116, .10); font-family: inherit; font-size: 11px; font-weight: 730; }
body.lms:is(.p-app, .a-app) .topbar .btn:hover { background: var(--pp-blue-hover); color: #fff; }
body.lms:is(.p-app, .a-app) .topbar :is(.btn-light, .btn-ghost) { background: #fff; border-color: var(--pp-line-2); color: #35465e; box-shadow: var(--pp-shadow-sm); }
body.lms:is(.p-app, .a-app) .topbar :is(.btn-light, .btn-ghost):hover { background: #f9fbfd; border-color: #bdcbdc; color: #35465e; }
body.lms:is(.p-app, .a-app) .topbar .icon-btn { width: 35px; height: 35px; min-width: 35px; min-height: 35px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #64748b; }
body.lms:is(.p-app, .a-app) .topbar .icon-btn:hover { background: #f4f7fa; border-color: var(--pp-line); }
body.lms:is(.p-app.signed-in, .a-app) .user-menu > summary { height: 39px; gap: 9px; padding: 4px 10px 4px 5px; background: #fff; border: 1px solid var(--pp-line); border-radius: 11px;
  color: var(--pp-ink-2); font-size: 11px; font-weight: 700; transition: border-color .16s; }
body.lms:is(.p-app.signed-in, .a-app) .user-menu > summary:hover { background: #fff; border-color: #c7d4e3; }
body.lms:is(.p-app.signed-in, .a-app) .user-menu .avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: #eaf4fc; color: #086cb1;
  font-size: 10px; font-weight: 800; letter-spacing: .2px; }
body.lms:is(.p-app.signed-in, .a-app) .user-menu .user-name { font-size: 11px; font-weight: 700; color: var(--pp-ink-2); }
/* the account menu that opens from it, and the visitor's website menu */
body.lms:is(.p-app, .a-app) :is(.user-menu, .site-menu) .menu { padding: 6px; border: 1px solid #dce4ee; border-radius: 12px; background: #fff; box-shadow: 0 12px 36px rgba(17, 33, 55, .14); font-size: 11.5px; }
body.lms:is(.p-app, .a-app) :is(.user-menu, .site-menu) .menu :is(a, button) { min-height: 34px; padding: 0 10px; border-radius: 8px; color: #35465e; font-family: inherit; font-size: 11.5px; font-weight: 620; }
body.lms:is(.p-app, .a-app) :is(.user-menu, .site-menu) .menu :is(a, button):hover { background: #f4f7fa; color: var(--pp-ink); }
body.lms:is(.p-app, .a-app) .user-menu .menu-head strong { font-size: 12px; color: var(--pp-ink); }
body.lms:is(.p-app, .a-app) .user-menu .menu-head small { font-size: 10.5px; color: var(--pp-muted); }

/* ---- side menu (821px and up; phones keep the app's drawer and bottom bar) ---- */
@media (min-width: 821px) {
  body.lms:is(.p-app.signed-in, .a-app) .shell:not(.no-side) { grid-template-columns: 218px minmax(0, 1fr); }
  body.lms:is(.p-app.signed-in, .a-app) .side { display: flex; flex-direction: column; align-items: stretch; gap: 26px; padding: 24px 12px 15px;
    background: #fff; border-right: 1px solid var(--pp-line); min-width: 0; }
  body.lms:is(.p-app.signed-in, .a-app) .side-groups { display: flex; flex-direction: column; gap: 26px; }
  body.lms:is(.p-app.signed-in, .a-app) .side nav { display: grid; align-items: stretch; gap: 3px; }
  body.lms:is(.p-app.signed-in, .a-app) .nav-label { margin: 0; padding: 0 11px 8px; color: #929eae; font-size: 9px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; }
  body.lms:is(.p-app.signed-in, .a-app) .nav-item { position: static; height: 39px; min-height: 39px; width: 100%; display: flex; flex-direction: row; align-items: center;
    justify-content: flex-start; gap: 11px; padding: 0 11px; text-align: left; border: 1px solid transparent; border-radius: 9px;
    background: transparent; color: #53627a; font-size: 11.5px; font-weight: 620; line-height: 1.2;
    transition: background .16s, color .16s, border-color .16s; }
  body.lms:is(.p-app.signed-in, .a-app) .nav-item .ic { width: 16px; height: 16px; padding: 0; color: currentColor; }
  body.lms:is(.p-app.signed-in, .a-app) .nav-item:hover { background: #f7f9fc; color: #293b54; text-decoration: none; }
  body.lms:is(.p-app.signed-in, .a-app) .nav-item.active { background: #eaf5fd; color: #075f9f; border-color: #e3f1fc; font-weight: 740; }
  body.lms:is(.p-app.signed-in, .a-app) .nav-item.active .ic { color: var(--pp-blue); }
  body.lms:is(.p-app.signed-in, .a-app) .nav-item .count { position: static; margin: 0 0 0 auto; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
    background: var(--pp-blue); color: #fff; border-radius: 20px; font-size: 9px; font-weight: 800; line-height: 1; }
  body.lms:is(.p-app.signed-in, .a-app) .side-pin { margin-top: auto; }
  body.lms:is(.p-app.signed-in, .a-app) .side-card { padding: 13px; border: 1px solid var(--pp-line); border-radius: 11px; background: #fbfcfe; box-shadow: none; }
  body.lms:is(.p-app.signed-in, .a-app) .side-card .sc-title { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 11px; font-weight: 760; color: var(--pp-ink); }
  body.lms:is(.p-app.signed-in, .a-app) .side-card .sc-note { margin: 0 0 11px; font-size: 10.5px; line-height: 1.55; color: var(--pp-muted); }
  body.lms:is(.p-app.signed-in, .a-app) .side-card .btn { width: 100%; height: 32px; min-height: 32px; padding: 0 12px; border: 1px solid var(--pp-line-2); border-radius: 8px;
    background: #fff; color: #35465e; box-shadow: var(--pp-shadow-sm); font: inherit; font-size: 11px; font-weight: 730; }
  body.lms:is(.p-app.signed-in, .a-app) .side-card .btn:hover { background: #f9fbfd; border-color: #bdcbdc; color: #35465e; }
  body.lms:is(.p-app.signed-in, .a-app) .side-foot { display: block; margin: 12px 3px 0; padding: 0; font-size: 9.5px; line-height: 1.5; color: #8c98a8; }
  body.lms:is(.p-app.signed-in, .a-app) .side-foot strong { color: inherit; font-weight: 700; }
}
/* the staff menu's groups open and close; the open one is the group of the page you are on */
body.lms.a-app .side nav { gap: 3px; }
body.lms.a-app .side .nav-group { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
body.lms.a-app .side .nav-group + .nav-group { margin-top: 14px; }
body.lms.a-app .side .nav-group > summary.nav-label { display: flex; align-items: center; justify-content: space-between; min-height: 0; height: auto; padding: 0 11px 8px;
  color: #929eae; font-size: 9px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; cursor: pointer; }
body.lms.a-app .side .nav-group > summary.nav-label::after { color: #a3adbb; font-size: 13px; font-weight: 500; }
body.lms.a-app .side .nav-group > .nav-item + .nav-item { margin-top: 3px; }
body.lms.a-app .side-foot { margin-top: auto; }
/* the content column, for every page */
body.lms:is(.p-app, .a-app):not(.auth-split) .main { position: relative; width: 100%; min-width: 0; max-width: 1510px; margin: 0 auto; padding: 31px clamp(22px, 3.1vw, 46px) 45px; }
@media (min-width: 821px) and (max-width: 1160px) {
  body.lms:is(.p-app.signed-in, .a-app) .shell:not(.no-side) { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 820px) {
  body.lms:is(.p-app, .a-app) .topbar { padding: 0 16px; gap: 12px; }
  body.lms:is(.p-app, .a-app) .topbar .brand-sub { display: none; }
  body.lms:is(.p-app, .a-app):not(.auth-split) .main { padding: 25px 18px 48px; }
  body.lms.p-app.signed-in .main { padding-bottom: 104px; }
  body.lms:is(.p-app.signed-in, .a-app) .side { background: #fff; padding: 18px 12px; }
  body.lms:is(.p-app.signed-in, .a-app) .nav-item { min-height: 44px; border-radius: 9px; font-size: 13px; }
}
@media (max-width: 560px) {
  body.lms:is(.p-app, .a-app) .topbar { height: 60px; padding: 0 12px; }
  body.lms:is(.p-app, .a-app) { --top: 60px; }
  body.lms:is(.p-app, .a-app) .top-actions { gap: 2px; }
  body.lms:is(.p-app, .a-app) .search-btn { width: 35px; justify-content: center; padding: 0; border-color: transparent; background: transparent; }
  body.lms:is(.p-app, .a-app) .search-btn span, body.lms:is(.p-app, .a-app) .search-btn kbd { display: none; }
  body.lms:is(.p-app.signed-in, .a-app) .user-menu > summary { padding: 4px; }
  body.lms:is(.p-app.signed-in, .a-app) .user-menu .user-name { display: none; }
  body.lms.p-app.signed-in .topbar .top-link { width: 31px; height: 33px; min-width: 31px; min-height: 33px; }
  body.lms:is(.p-app.signed-out, .a-app) .topbar :is(.top-link, .top-pill) { padding: 0 8px; }
  body.lms:is(.p-app, .a-app):not(.auth-split) .main { padding: 22px 13px 40px; }
  body.lms.p-app.signed-in .main { padding-bottom: 104px; }
}

/* ---- the content: the reference's own rules, scoped to .pp ---- */
.pp { color: var(--pp-ink); font-size: 13px; line-height: 1.5; }
.pp button, .pp input { font: inherit; }
.pp button { cursor: pointer; }
.pp button:focus-visible, .pp a:focus-visible, .pp input:focus-visible { outline: 3px solid rgba(8, 121, 201, .28); outline-offset: 2px; border-radius: 8px; }
.pp button:disabled { cursor: not-allowed; opacity: .45; }
.pp svg { display: block; }
.pp a, .pp a:hover { text-decoration: none; }
svg.icon { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.icon.sm { width: 14px; height: 14px; } svg.icon.xs { width: 12px; height: 12px; }
.pp h1, .pp h2, .pp h3, .pp p { margin: 0; font-family: inherit; color: inherit; text-wrap: wrap; }
.pp h1, body.lms:is(.p-app, .a-app):not(.auth-split) .main .page-head h1 { margin: 0; font-family: inherit; font-size: 29px; line-height: 1.18; letter-spacing: -1.05px; font-weight: 780; color: var(--pp-ink); }
.pp h2 { font-size: 16px; line-height: 1.35; letter-spacing: -.34px; font-weight: 760; color: var(--pp-ink); }
.pp h3 { font-size: 13px; line-height: 1.42; letter-spacing: -.15px; font-weight: 740; color: var(--pp-ink); }
.pp h2 a, .pp h3 a, .pp .cohort-title a { color: inherit; }
.pp h2 a:hover, .pp h3 a:hover, .pp .cohort-title a:hover { color: var(--pp-blue); }
.pp strong { color: inherit; }

/* THE page header and breadcrumb. lms_page_header() writes .pp .page-header / .breadcrumb; staff pages
   and a few older ones write .page-head / .crumbs (with lms_crumb_sep()). Both are drawn by these
   same rules, so changing the header here changes it on every page. */
.pp .page-header, body.lms:is(.p-app, .a-app):not(.auth-split) .main .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 0 0 26px; padding: 0; border: 0; }
.pp .breadcrumb, body.lms:is(.p-app, .a-app):not(.auth-split) .main .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 7px; color: #8995a5; font-size: 10px; }
.pp .breadcrumb a, body.lms:is(.p-app, .a-app):not(.auth-split) .main .crumbs a { color: #0871b8; text-decoration: none; }
.pp .breadcrumb a:hover, body.lms:is(.p-app, .a-app):not(.auth-split) .main .crumbs a:hover { color: #0871b8; text-decoration: underline; text-underline-offset: 3px; }
.pp .breadcrumb .icon, body.lms:is(.p-app, .a-app):not(.auth-split) .main .crumbs .icon { color: #9aa6b6; }
.pp .breadcrumb .current { color: #58677d; font-weight: 620; }
.pp .page-subtitle, body.lms:is(.p-app, .a-app):not(.auth-split) .main .page-head p { max-width: 650px; margin: 7px 0 0; color: var(--pp-muted); font-size: 12px; line-height: 1.5; }
.pp .page-actions { display: flex; gap: 8px; }

.pp .pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; border: 1px solid transparent; border-radius: 8px;
  padding: 0 12px; font-size: 11px; font-weight: 730; white-space: nowrap;
  transition: background .16s, border-color .16s, box-shadow .16s, transform .16s var(--pp-ease); }
.pp .pbtn:active { transform: scale(.985); }
.pp .pbtn-primary { background: var(--pp-blue); color: #fff; box-shadow: 0 1px 1px rgba(0, 68, 116, .10); }
.pp .pbtn-primary:hover { background: var(--pp-blue-hover); color: #fff; box-shadow: 0 2px 5px rgba(0, 77, 128, .13); }
.pp .pbtn-secondary { background: #fff; border-color: var(--pp-line-2); color: #35465e; box-shadow: var(--pp-shadow-sm); }
.pp .pbtn-secondary:hover { background: #f9fbfd; border-color: #bdcbdc; color: #35465e; }
.pp .pbtn .icon { width: 14px; height: 14px; }

.pp .section { margin-top: 29px; }
.pp .section-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; }
.pp .section-heading-copy { min-width: 0; }
.pp .section-note { color: var(--pp-muted); font-size: 10.5px; margin-top: 3px; }
.pp .link-button { border: 0; background: transparent; color: #0871b8; font-size: 10.5px; font-weight: 740; padding: 5px 0; white-space: nowrap; }
.pp .link-button:hover { color: #0871b8; text-decoration: underline; text-underline-offset: 3px; }
.pp .link-button[hidden] { display: none; }

.pp .focus-card { background: rgba(255, 255, 255, .94); border: 1px solid rgba(220, 228, 238, .94); border-radius: 15px; box-shadow: var(--pp-shadow-card);
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .84fr); overflow: hidden; }
.pp .focus-main { padding: 21px 23px 19px; min-width: 0; }
.pp .p-eyebrow { display: flex; align-items: center; gap: 7px; text-transform: uppercase; letter-spacing: .85px; font-size: 9px; font-weight: 820; color: #8491a3; }
.pp .eyebrow-mark { width: 6px; height: 6px; border-radius: 50%; background: #7f70df; box-shadow: 0 0 0 3px #f0edff; }
.pp .focus-title-line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 10px 0 6px; }
.pp .focus-title-line h2 { font-size: 18px; letter-spacing: -.55px; line-height: 1.28; }
.pp .badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 6px; padding: 4px 7px; font-size: 9px; font-weight: 790; white-space: nowrap; }
.pp .badge-progress { background: var(--pp-violet-bg); color: var(--pp-violet); }
.pp .badge-upcoming { background: var(--pp-green-bg); color: var(--pp-green); }
.pp .badge-attention { background: var(--pp-amber-bg); color: var(--pp-amber); }
.pp .badge-live { background: var(--pp-red-bg); color: var(--pp-red); }
.pp .badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pp .p-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #718096; font-size: 10px; }
.pp .meta-divider { height: 3px; width: 3px; border-radius: 50%; background: #bdc6d2; }
.pp .focus-description { max-width: 610px; margin-top: 13px; color: #66758a; font-size: 11.5px; line-height: 1.7; }
.pp .schedule-alert { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border: 1px solid #f0dfb4; background: #fffaf0; border-radius: 9px; margin-top: 14px; max-width: 630px; }
.pp .schedule-alert .alert-icon { width: 17px; height: 17px; color: #93620b; flex: none; margin-top: 1px; }
.pp .schedule-alert strong { display: block; font-size: 10.5px; font-weight: 780; color: #7d570c; margin-bottom: 2px; }
.pp .schedule-alert p { font-size: 10px; color: #866b32; line-height: 1.55; }
.pp .schedule-alert a { color: #0871b8; font-weight: 740; white-space: nowrap; }
.pp .schedule-alert a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp .progress-box { margin-top: 17px; max-width: 560px; }
.pp .progress-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #758298; font-size: 10px; margin-bottom: 7px; }
.pp .progress-top strong { color: #394a62; font-weight: 750; }
.pp .track { height: 5px; background: #edf1f6; overflow: hidden; border-radius: 20px; }
.pp .fill { height: 100%; background: linear-gradient(90deg, #0879c9, #4a9fe0); border-radius: 20px; }
.pp .focus-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.pp .focus-side { border-left: 1px solid var(--pp-line); background: #fafbfd; padding: 19px 20px; display: flex; flex-direction: column; justify-content: center; gap: 13px; }
.pp .side-overline { font-size: 9px; font-weight: 820; text-transform: uppercase; letter-spacing: .85px; color: #8a97a8; margin-bottom: 1px; }
.pp .step { display: flex; align-items: flex-start; gap: 10px; color: var(--pp-ink); }
.pp a.step:hover strong { color: var(--pp-blue); text-decoration: underline; text-underline-offset: 3px; }
.pp .step-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; color: #60748d; background: #fff; border: 1px solid #e4eaf1; border-radius: 9px; }
.pp .step-icon .icon { width: 15px; height: 15px; }
.pp .step-copy { padding-top: 1px; min-width: 0; }
.pp .step-copy strong { font-size: 10.5px; font-weight: 760; display: block; margin-bottom: 2px; }
.pp .step-copy p { font-size: 10px; line-height: 1.5; color: #758297; }
.pp .side-rule { height: 1px; background: #e9edf3; }
.pp .focus-side .pbtn { width: 100%; margin-top: 1px; }

.pp .programme-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pp .programme-toolbar[hidden] { display: none; }
.pp .filter-set { display: flex; align-items: center; gap: 3px; padding: 3px; background: #edf1f6; border-radius: 8px; }
.pp .filter-button { height: 27px; display: flex; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid transparent; background: transparent; border-radius: 6px;
  color: #68768a; font-size: 10px; font-weight: 710; transition: background .15s, color .15s, box-shadow .15s; }
.pp .filter-button:hover { color: #35465d; }
.pp .filter-button.active { background: #fff; color: #263750; border-color: #e9edf3; box-shadow: 0 1px 2px rgba(26, 42, 64, .055); }
.pp .filter-count { color: #8e9aab; font-size: 9px; font-weight: 650; }
.pp .clear-button { display: flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #7a8799; font-size: 10px; padding: 5px; }
.pp .clear-button:hover:not(:disabled) { color: var(--pp-blue); }
.pp .programmes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.pp .programme-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: rgba(255, 255, 255, .96); border: 1px solid var(--pp-line);
  border-radius: 12px; box-shadow: var(--pp-shadow-sm); transition: border-color .17s, box-shadow .17s, transform .17s var(--pp-ease); }
.pp .programme-card:hover { border-color: #c6d5e5; box-shadow: 0 6px 18px rgba(26, 44, 68, .055); transform: translateY(-2px); }
.pp .programme-card[hidden], .pp .cohort[hidden] { display: none !important; }
.pp .card-main { padding: 15px 15px 14px; border-bottom: 1px solid var(--pp-line); min-height: 126px; }
.pp .card-kicker-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pp .card-kicker { font-size: 8.5px; font-weight: 820; letter-spacing: .75px; text-transform: uppercase; color: #8996a7; }
.pp .subject-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: #efecff; color: #6950d4; }
.pp .subject-icon.green { background: #e7f7ee; color: #197951; }
.pp .subject-icon.blue { background: #e9f3ff; color: #156bb1; }
.pp .subject-icon.amber { background: var(--pp-amber-bg); color: var(--pp-amber); }
.pp .subject-icon.red { background: var(--pp-red-bg); color: var(--pp-red); }
.pp .subject-icon .icon { width: 15px; height: 15px; }
.pp .card-main h3 { margin-top: 10px; max-width: 270px; overflow-wrap: anywhere; }
.pp .card-date { font-size: 10px; color: #738197; margin-top: 4px; }
.pp .card-info { flex: 1; padding: 13px 15px 12px; }
.pp .card-status { display: flex; align-items: flex-start; gap: 8px; min-height: 38px; font-size: 10px; line-height: 1.55; color: #6b7a8f; }
.pp .card-status .icon { width: 14px; height: 14px; color: #7b8ba0; margin-top: 1px; }
.pp .card-status strong { font-size: 10px; color: #34465f; font-weight: 760; }
.pp .card-progress { margin-top: 9px; }
.pp .card-progress .track { height: 4px; }
.pp .card-progress .progress-top { margin-top: 6px; margin-bottom: 0; font-size: 9px; }
.pp .card-progress .progress-top strong { font-size: 9px; }
.pp .card-footer { display: flex; align-items: center; gap: 6px; padding: 10px 11px; border-top: 1px solid var(--pp-line); }
.pp .card-footer .pbtn { height: 31px; padding: 0 9px; font-size: 10px; }
.pp .card-footer .pbtn-primary { min-width: 54px; }
.pp .card-footer .pbtn-secondary { flex: 1; }
.pp .icon-link { height: 28px; width: 28px; display: grid; place-items: center; flex: none; background: transparent; color: #8390a1; border: 1px solid transparent; border-radius: 7px; }
.pp .icon-link:hover { background: #f5f8fb; border-color: var(--pp-line); color: var(--pp-blue); }
.pp .grid-empty { display: block; padding: 34px 20px; border: 1px dashed var(--pp-line-2); border-radius: 12px; background: #fff; text-align: center; }
.pp .grid-empty[hidden] { display: none; }
.pp .grid-empty h3 { font-size: 12px; margin-bottom: 5px; }
.pp .grid-empty p { color: var(--pp-muted); font-size: 10.5px; }
.pp .grid-empty .pbtn { margin-top: 12px; }

.pp .cohorts { display: grid; gap: 9px; }
.pp .cohort { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 16px; background: #fff; border: 1px solid var(--pp-line);
  border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.pp .cohort:hover { border-color: #c8d6e5; box-shadow: var(--pp-shadow-sm); }
.pp .cohort-left { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.pp .cohort-art { display: grid; place-items: center; flex: none; width: 37px; height: 37px; background: #eff6fe; border: 1px solid #e3edf9; color: #2c6eae; border-radius: 10px; }
.pp .cohort-art .icon { width: 17px; height: 17px; }
.pp .cohort-copy { min-width: 0; }
.pp .cohort-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0; font-size: 11.5px; font-weight: 770; letter-spacing: -.08px; line-height: 1.42; }
.pp .cohort-tag { display: inline-flex; align-items: center; padding: 2px 5px; border: 1px solid #e5eaf0; border-radius: 5px; color: #758398; font-size: 8px; letter-spacing: .45px; font-weight: 800; }
.pp .cohort-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 5px; color: #718096; font-size: 9.5px; }
.pp .cohort-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.pp .cohort-meta-item .icon { width: 12px; height: 12px; }
.pp .cohort-price { font-weight: 780; color: #3a4c65; }
.pp .cohort-description { margin-top: 5px; color: #8894a5; font-size: 9.5px; }
.pp .cohort-right { display: flex; align-items: center; gap: 12px; flex: none; }
.pp .cohort-right .pbtn { min-width: 103px; }
.pp .registration-state { display: inline-flex; align-items: center; gap: 5px; color: var(--pp-green); font-size: 9px; font-weight: 740; white-space: nowrap; }
.pp .registration-state .icon { width: 12px; height: 12px; }
.pp .footnote { display: flex; align-items: flex-start; gap: 7px; margin-top: 19px; color: #8995a5; font-size: 9.5px; line-height: 1.55; }
.pp .footnote .icon { width: 13px; height: 13px; flex: none; margin-top: 1px; }

/* ---- Home: the same parts, plus a few the reference did not need (same values, same family) ---- */
.pp .pbtn-plain { background: transparent; border-color: transparent; color: #53647b; }
.pp .pbtn-plain:hover { background: #f0f4f8; color: #53647b; }
.pp form.inline { display: inline-flex; margin: 0; }
.pp .step.is-warn .step-icon { background: var(--pp-amber-bg); border-color: #f0dfb4; color: var(--pp-amber); }
.pp .step.is-info .step-icon, .pp .step.is-brand .step-icon { background: var(--pp-blue-wash); border-color: #d6e9f8; color: #2c6eae; }
.pp .step.is-done .step-icon { background: var(--pp-green-bg); border-color: #cfeadb; color: var(--pp-green); }
.pp .sub-overline { margin: 18px 0 9px; font-size: 9px; font-weight: 820; text-transform: uppercase; letter-spacing: .85px; color: #8a97a8; }
.pp .cohort-art.green { background: #e7f7ee; border-color: #d3eedf; color: #197951; }
.pp .cohort-art.amber { background: var(--pp-amber-bg); border-color: #f0dfb4; color: var(--pp-amber); }
.pp .cohort-art.red { background: var(--pp-red-bg); border-color: #f5d6d3; color: var(--pp-red); }
.pp .cohort-art.tone-4 { background: #efecff; border-color: #e2dcfb; color: #6950d4; }
.pp .session-when { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; color: #718096; font-size: 9.5px; white-space: nowrap; text-align: right; }
.pp .session-when strong { color: #34465f; font-size: 10.5px; font-weight: 760; }
.pp .registration-state.is-live { color: var(--pp-red); }
.pp .info-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px; border: 1px solid #d6e9f8; border-radius: 12px; background: #f4f9fe; }
.pp .info-note .note-icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #2c6eae; }
.pp .info-note strong { display: block; font-size: 11px; font-weight: 780; color: var(--pp-ink); margin-bottom: 2px; }
.pp .info-note p, .pp .info-note li { font-size: 10.5px; line-height: 1.6; color: var(--pp-muted); }
.pp .info-note b { font-weight: 740; color: var(--pp-ink-2); }
.pp .info-note ul { margin: 6px 0 0; padding-left: 16px; }
.pp .note-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pp .note-actions .pbtn { height: 31px; padding: 0 10px; font-size: 10px; }
.pp .stat-card, .pp .proof-card { padding: 15px 16px; background: #fff; border: 1px solid var(--pp-line); border-radius: 12px; box-shadow: var(--pp-shadow-sm); }
.pp .stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.pp .stat { padding: 10px 11px; border: 1px solid var(--pp-line); border-radius: 9px; background: #fcfdff; }
.pp .stat span { display: block; color: #8190a3; font-size: 9px; margin-bottom: 2px; }
.pp .stat strong { display: block; color: var(--pp-ink); font-size: 18px; font-weight: 780; letter-spacing: -.4px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.pp .stat-card .progress-box { max-width: none; margin-top: 14px; }
.pp .proof-card .side-overline { margin-bottom: 10px; }
.pp .proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pp .proof-grid strong { display: block; font-size: 20px; font-weight: 780; letter-spacing: -.5px; color: var(--pp-ink); font-variant-numeric: tabular-nums; }
.pp .proof-grid strong.alt { color: var(--pp-blue); }
.pp .proof-grid span { display: block; margin-top: 2px; font-size: 10px; color: var(--pp-muted); }
@media (max-width: 790px) {
  .pp .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pp .stat-grid { grid-template-columns: 1fr; }
  .pp .session-when { align-items: flex-start; text-align: left; }
}

@media (max-width: 1160px) {
  .pp .focus-card { grid-template-columns: 1fr; }
  .pp .focus-side { border-left: 0; border-top: 1px solid var(--pp-line); display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .pp .side-overline, .pp .side-rule { display: none; }
  .pp .focus-side .pbtn { grid-column: 1 / -1; }
  .pp .programmes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 790px) {
  .pp .page-header, body.lms:is(.p-app, .a-app):not(.auth-split) .main .page-head { align-items: flex-start; flex-direction: column; }
  .pp .page-actions { width: 100%; } .pp .page-actions .pbtn { flex: 1; }
  .pp .section-header .section-note { display: none; }
}
@media (max-width: 560px) {
  .pp h1, body.lms:is(.p-app, .a-app):not(.auth-split) .main .page-head h1 { font-size: 26px; }
  .pp .page-subtitle { max-width: 310px; }
  .pp .page-actions .pbtn { font-size: 10px; padding: 0 8px; }
  .pp .section { margin-top: 25px; }
  .pp .focus-main { padding: 18px 16px; }
  .pp .focus-title-line h2 { font-size: 16px; }
  .pp .p-meta { gap: 6px; }
  .pp .focus-side { padding: 15px 16px; grid-template-columns: 1fr; }
  .pp .focus-side .pbtn { grid-column: auto; }
  .pp .focus-buttons .pbtn { flex: 1; }
  .pp .programme-toolbar { align-items: flex-start; flex-direction: column; gap: 8px; }
  .pp .programmes-grid { grid-template-columns: 1fr; }
  .pp .card-main { min-height: 0; }
  .pp .card-main h3 { max-width: none; }
  .pp .cohort { align-items: flex-start; flex-direction: column; padding: 13px; gap: 13px; }
  .pp .cohort-right { width: 100%; justify-content: space-between; }
  .pp .cohort-right .pbtn { flex: 1; }
  .pp .registration-state { font-size: 8.5px; }
  .pp .cohort-title { font-size: 11px; }
  .pp .section-header h2 { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(> body.lms:is(.p-app, .a-app)) { scroll-behavior: auto; }
  body.lms:is(.p-app, .a-app) *, body.lms:is(.p-app, .a-app) *::before, body.lms:is(.p-app, .a-app) *::after { animation: none !important; transition: none !important; }
}

/* ---- dark theme: the reference is light only; this keeps the app's Dark setting working ---- */
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) { --pp-ink: var(--sw-text); --pp-ink-2: var(--sw-text-2); --pp-muted: var(--sw-text-muted); --pp-line: var(--sw-border);
  --pp-line-2: var(--sw-border-strong); --pp-blue: #6FB4EA; --pp-blue-hover: #8CC6F2;
  --pp-green: var(--sw-success); --pp-green-bg: var(--sw-success-bg); --pp-violet: #B9AEF5; --pp-violet-bg: #272240;
  --pp-amber: var(--sw-warning); --pp-amber-bg: var(--sw-warning-bg); --pp-red: var(--sw-danger); --pp-red-bg: var(--sw-danger-bg);
  --pp-shadow-sm: none; --pp-shadow-card: none; color: var(--sw-text); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .topbar { background: rgba(21, 23, 28, .88); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .search-btn, :root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .search-btn:hover { background: var(--sw-surface-2); color: var(--sw-text-muted); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .search-btn span, :root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .search-btn .ic { color: var(--sw-text-muted); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .search-btn kbd { background: var(--sw-surface); border-color: var(--sw-border); color: var(--sw-text-muted); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .topbar .top-link { color: var(--sw-text-muted); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .topbar .top-link:hover { background: var(--sw-surface-2); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .topbar .bell-dot { box-shadow: 0 0 0 2px var(--sw-surface); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .user-menu > summary, :root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .user-menu > summary:hover { background: var(--sw-surface); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .user-menu .avatar { background: var(--sw-brand-50); color: var(--sw-brand-800); }
@media (min-width: 821px) {
  :root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .side { background: var(--sw-surface); }
  :root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .nav-label, :root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .side-foot { color: var(--sw-text-muted); }
  :root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .nav-item { color: var(--sw-text-2); }
  :root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .nav-item:hover { background: var(--sw-surface-2); color: var(--sw-text); }
  :root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .nav-item.active { background: var(--sw-brand-50); color: var(--sw-brand-800); border-color: transparent; }
  :root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .side-card { background: var(--sw-surface-1); }
  :root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .side-card .btn { background: var(--sw-surface); color: var(--sw-text); }
}
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .pbtn-primary, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .pbtn-primary:hover { color: #08121C; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .pbtn-secondary, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp a.pbtn-secondary,
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .pbtn-secondary:hover, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp a.pbtn-secondary:hover { background: var(--sw-surface); color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp h2 a, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp h3 a, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .cohort-title a,
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp a.step { color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .breadcrumb { color: var(--sw-text-muted); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .breadcrumb a, :root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .crumbs a { color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .breadcrumb .current { color: var(--sw-text-2); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp a.link-button, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .link-button, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .schedule-alert a { color: var(--sw-brand-700); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .focus-card, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .programme-card, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .cohort,
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .grid-empty { background: var(--sw-surface); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .focus-side { background: var(--sw-surface-1); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .step-icon, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .filter-button.active { background: var(--sw-surface); border-color: var(--sw-border); color: var(--sw-text-2); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .side-rule { background: var(--sw-border); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .p-eyebrow, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .side-overline, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .card-kicker,
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .p-meta, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .focus-description, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .progress-top,
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .step-copy p, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .card-date, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .card-status,
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .card-status .icon, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .filter-button, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .filter-count,
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .clear-button, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .icon-link, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .cohort-tag,
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .cohort-meta, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .cohort-description, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .footnote { color: var(--sw-text-muted); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .progress-top strong, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .card-status strong, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .cohort-price,
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .filter-button.active { color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .eyebrow-mark { box-shadow: 0 0 0 3px #272240; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .meta-divider { background: var(--sw-border-strong); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .track, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .filter-set { background: var(--sw-surface-3); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .fill { background: linear-gradient(90deg, #6FB4EA, #8CC6F2); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .schedule-alert { background: var(--sw-warning-bg); border-color: #5A4718; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .schedule-alert strong, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .schedule-alert p,
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .schedule-alert .alert-icon { color: var(--sw-warning); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .subject-icon { background: #272240; color: #B9AEF5; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .subject-icon.green { background: var(--sw-success-bg); color: var(--sw-success); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .subject-icon.blue, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .cohort-art { background: var(--sw-brand-50); color: #8CC6F2; border-color: var(--sw-brand-100); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .icon-link:hover { background: var(--sw-surface-2); }

/* Home's extra parts in the dark */
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .pbtn-plain { color: var(--sw-text-2); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .pbtn-plain:hover { background: var(--sw-surface-2); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .info-note { background: var(--sw-info-bg); border-color: #2A4560; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .info-note .note-icon { color: var(--sw-info); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .info-note b { color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .stat-card, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .proof-card { background: var(--sw-surface); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .stat { background: var(--sw-surface-1); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .stat span, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .sub-overline, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .session-when { color: var(--sw-text-muted); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .session-when strong { color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .step.is-info .step-icon, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .step.is-brand .step-icon { background: var(--sw-brand-50); border-color: var(--sw-brand-100); color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .step.is-warn .step-icon { background: var(--sw-warning-bg); border-color: #5A4718; color: var(--sw-warning); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .step.is-done .step-icon { background: var(--sw-success-bg); border-color: transparent; color: var(--sw-success); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .cohort-art.green { background: var(--sw-success-bg); color: var(--sw-success); border-color: transparent; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .cohort-art.amber { background: var(--sw-warning-bg); color: var(--sw-warning); border-color: transparent; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .cohort-art.red { background: var(--sw-danger-bg); color: var(--sw-danger); border-color: transparent; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .cohort-art.tone-4 { background: #272240; color: #B9AEF5; border-color: transparent; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .proof-grid strong.alt { color: #8CC6F2; }

/* ==========================================================================
   More (scrollwell_more_page_redesign.html) and AI tools (scrollwell_ai_tools_redesign.html),
   ported as they are. Their own values; the page frame, buttons and header are the parts above.
   ========================================================================== */
.pp .page-subtitle.is-wide { margin-top: 8px; max-width: 620px; font-size: 12.5px; line-height: 1.65; }
/* More */
.pp .hero-strip { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; padding: 14px 17px; border: 1px solid rgba(210, 227, 244, .96); border-radius: 13px;
  background: linear-gradient(110deg, rgba(239, 247, 255, .92), rgba(255, 255, 255, .92) 56%, rgba(246, 244, 255, .84)); box-shadow: 0 1px 2px rgba(22, 48, 78, .025); }
.pp .hero-icon { width: 39px; height: 39px; display: grid; place-items: center; flex: none; border: 1px solid #dbeafa; border-radius: 11px; background: rgba(255, 255, 255, .75); color: var(--pp-blue); }
.pp .hero-copy { flex: 1; min-width: 0; }
.pp .hero-copy strong { display: block; font-size: 12px; font-weight: 780; letter-spacing: -.1px; color: var(--pp-ink); }
.pp .hero-copy p { margin-top: 3px; color: #64758c; font-size: 10.5px; line-height: 1.5; }
.pp .hero-status { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #d7eadf; border-radius: 7px; background: #f5fcf7; color: #237653;
  font-size: 9.5px; font-weight: 760; white-space: nowrap; }
.pp .hero-status .icon { width: 13px; height: 13px; }
.pp .content-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 17px; align-items: start; }
.pp .group-section { min-width: 0; }
.pp .section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pp .section-title-wrap { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pp .section-icon { width: 27px; height: 27px; display: grid; place-items: center; flex: none; border: 1px solid #e1eafa; border-radius: 8px; background: #eef6ff; color: #176fac; }
.pp .section-icon.purple { background: #f1efff; border-color: #e7e2fc; color: #6a54c8; }
.pp .section-icon .icon { width: 14px; height: 14px; }
.pp .section-head h2 { font-size: 14px; }
.pp .section-caption { color: #8a97a8; font-size: 9.5px; margin-top: 2px; }
.pp .resource-panel, .pp .side-panel { overflow: hidden; border: 1px solid rgba(218, 227, 238, .98); border-radius: 13px; background: rgba(255, 255, 255, .94); box-shadow: var(--pp-shadow-card); }
.pp .resource-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 13px 15px; border: 0; border-bottom: 1px solid var(--pp-line);
  background: transparent; text-align: left; color: inherit; text-decoration: none; transition: background .16s; }
.pp .resource-row:last-child { border-bottom: 0; }
.pp .resource-row:hover { background: #f8fbfe; text-decoration: none; }
.pp .resource-row:focus-visible { z-index: 1; }
.pp .row-icon { width: 37px; height: 37px; display: grid; place-items: center; flex: none; border: 1px solid #e0ecf8; border-radius: 10px; background: #eef6ff; color: #176fac; transition: transform .18s, background .18s; }
.pp .resource-row:hover .row-icon { background: #e5f2fe; transform: translateY(-1px); }
.pp .row-icon.violet { background: #f1efff; border-color: #e7e2fc; color: #6954c9; }
.pp .row-icon.green { background: #edf8f1; border-color: #e0f0e5; color: #217b56; }
.pp .row-icon.amber { background: #fff6e5; border-color: #f4e8c9; color: #956309; }
.pp .row-icon .icon { width: 17px; height: 17px; }
.pp .row-copy { min-width: 0; flex: 1; }
.pp .row-title-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pp .row-title { font-size: 11.5px; font-weight: 760; letter-spacing: -.1px; color: #24364f; }
.pp .row-description { display: block; margin-top: 3px; color: #6e7e94; font-size: 10.5px; line-height: 1.45; }
.pp .row-end { display: flex; align-items: center; gap: 9px; flex: none; margin-left: 5px; }
.pp .row-badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 7px; border-radius: 6px; background: #e9f3ff; color: #1269ad; font-size: 9px; font-weight: 790; white-space: nowrap; }
.pp .row-badge.green { background: #e9f7ef; color: #187750; }
.pp .row-arrow { width: 16px; height: 16px; color: #7e8da2; transition: transform .16s, color .16s; }
.pp .resource-row:hover .row-arrow { transform: translateX(2px); color: var(--pp-blue); }
.pp .row-tag { padding: 3px 6px; border: 1px solid #e4eaf1; border-radius: 5px; color: #8390a1; font-size: 8px; font-weight: 750; letter-spacing: .2px; white-space: nowrap; }
.pp .side-stack { display: grid; gap: 19px; }
.pp .side-panel .resource-row { min-height: 72px; padding: 12px 14px; }
.pp .side-panel .row-icon { width: 34px; height: 34px; }
.pp .side-panel .row-description { font-size: 10px; }
.pp .group-footer { display: flex; align-items: flex-start; gap: 8px; padding: 11px 13px; color: #8895a6; font-size: 9.5px; line-height: 1.5; }
.pp .group-footer .icon { width: 13px; height: 13px; flex: none; margin-top: 1px; color: #7e94ad; }
.pp .bottom-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 24px; color: #8c98a8; font-size: 9px; line-height: 1.55; }
.pp .bottom-note .icon { width: 13px; height: 13px; flex: none; margin-top: 1px; }
/* AI tools */
.pp .ai-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; padding: 4px 8px; border: 1px solid #dcecf9; border-radius: 6px; background: rgba(239, 248, 255, .8);
  color: #0871b8; font-size: 9px; font-weight: 820; letter-spacing: .7px; text-transform: uppercase; }
.pp .ai-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #4da2d7; box-shadow: 0 0 0 3px #dceffd; }
.pp .intro-callout { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; padding: 13px 15px; border: 1px solid rgba(211, 229, 246, .95); border-radius: 12px;
  background: linear-gradient(110deg, rgba(238, 247, 255, .94), rgba(255, 255, 255, .93) 55%, rgba(246, 244, 255, .86)); }
.pp .intro-symbol { display: grid; place-items: center; width: 37px; height: 37px; flex: none; border: 1px solid #dbeafa; border-radius: 10px; background: rgba(255, 255, 255, .8); color: var(--pp-blue); }
.pp .intro-symbol .icon { width: 18px; height: 18px; }
.pp .intro-copy { min-width: 0; flex: 1; }
.pp .intro-copy strong { display: block; font-size: 11.5px; font-weight: 780; color: var(--pp-ink); }
.pp .intro-copy p { font-size: 10px; color: #6c7c92; margin-top: 3px; }
.pp .tip-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid #e0e8f1; border-radius: 7px; background: rgba(255, 255, 255, .75); color: #5f7189;
  font-size: 9px; font-weight: 740; white-space: nowrap; }
.pp .tip-pill .icon { width: 12px; height: 12px; color: #16805b; }
.pp .discovery { margin-bottom: 18px; padding: 16px; background: rgba(255, 255, 255, .82); border: 1px solid rgba(220, 228, 238, .96); border-radius: 13px; box-shadow: var(--pp-shadow-card); }
.pp .search-row { display: flex; align-items: center; gap: 9px; margin: 0; }
.pp .tool-search { height: 42px; display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; margin: 0; padding: 0 12px; border: 1px solid #cbd7e5; border-radius: 9px;
  background: #fff; color: #74839a; transition: border .16s, box-shadow .16s; }
.pp .tool-search:focus-within { border-color: #80bce6; box-shadow: 0 0 0 3px rgba(8, 121, 201, .08); }
.pp .tool-search input { width: 100%; min-width: 0; height: auto; padding: 0; border: 0; outline: 0 !important; box-shadow: none !important; background: transparent; color: var(--pp-ink); font: inherit; font-size: 11.5px; }
.pp .tool-search input::placeholder { color: #8592a5; }
.pp .search-submit { height: 42px; min-width: 94px; }
.pp .filters-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.pp .filters { display: flex; gap: 5px; flex-wrap: wrap; }
.pp .filter { height: 30px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--pp-line-2); border-radius: 8px; background: #fff; color: #52637b;
  font-size: 10px; font-weight: 700; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.pp .filter:hover { border-color: #b5c9de; background: #f9fcff; color: #52637b; text-decoration: none; }
.pp .filter.active, .pp .filter.active:hover { background: var(--pp-blue); border-color: var(--pp-blue); color: #fff; box-shadow: 0 1px 2px rgba(0, 80, 138, .1); }
.pp .filter .filter-count { color: inherit; font-size: 9px; font-weight: 650; opacity: .72; }
.pp .results-text { font-size: 10px; color: #8794a6; white-space: nowrap; }
.pp .tools-section { margin-top: 22px; }
.pp .tools-section .section-head { align-items: flex-end; margin-bottom: 12px; }
.pp .tools-section .section-head h2 { font-size: 15px; }
.pp .tools-section .section-note { margin-top: 3px; font-size: 10px; }
.pp .tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pp .tool-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--pp-line); border-radius: 13px; background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 2px rgba(25, 42, 68, .025); transition: border-color .17s, box-shadow .17s, transform .17s; }
.pp .tool-card:hover { border-color: #c5d6e6; box-shadow: 0 8px 24px rgba(24, 44, 70, .06); transform: translateY(-2px); }
.pp .card-top { display: flex; align-items: flex-start; gap: 12px; padding: 17px 17px 0; }
.pp .tool-logo { width: 43px; height: 43px; display: grid; place-items: center; flex: none; overflow: hidden; border: 1px solid #dfebf7; border-radius: 12px; background: #eef6ff;
  color: #135989; font-size: 21px; font-weight: 850; }
.pp .tool-logo img { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; }
.pp .tool-logo .ai-letter { width: auto; height: auto; background: none; border: 0; color: inherit; font-size: inherit; font-weight: inherit; }
.pp .tool-title-wrap { min-width: 0; flex: 1; padding-top: 1px; }
.pp .tool-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.pp .tool-title { font-size: 12px; letter-spacing: -.12px; font-weight: 790; }
.pp .tool-title a { color: inherit; }
.pp .tool-title a:hover { color: var(--pp-blue); }
.pp .category-label { display: block; margin-top: 3px; color: #7b899e; font-size: 10px; }
.pp .pricing { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid #e7ebf0; border-radius: 5px; background: #f5f7fa; color: #53647b; font-size: 9px; font-weight: 760; white-space: nowrap; }
.pp .pricing.free { background: #ecf8f1; border-color: #dff0e5; color: #217951; }
.pp .tool-description { padding: 14px 17px 0; color: #5d6f87; font-size: 11px; line-height: 1.65; min-height: 58px; }
.pp .tool-bottom { margin-top: auto; padding: 16px 17px 17px; }
.pp .tool-features { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.pp .feature { display: inline-flex; align-items: center; gap: 5px; color: #7b899c; font-size: 9px; }
.pp .feature .icon { width: 12px; height: 12px; color: #8aa0b8; }
.pp .card-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pp .card-actions .pbtn-primary { min-width: 96px; }
.pp .card-actions .pbtn-secondary { flex: 1; }
.pp .external-note { display: flex; align-items: center; gap: 5px; margin-top: 10px; color: #929eac; font-size: 9px; }
.pp .external-note .icon { width: 11px; height: 11px; }
.pp .empty-state { padding: 34px 20px; border: 1px dashed var(--pp-line-2); border-radius: 12px; background: rgba(255, 255, 255, .8); text-align: center; }
.pp .empty-state h3 { font-size: 12px; margin-bottom: 5px; }
.pp .empty-state p { font-size: 10.5px; color: var(--pp-muted); }
.pp .empty-state .pbtn { margin-top: 12px; }
@media (max-width: 1050px) {
  .pp .content-grid { grid-template-columns: 1fr; }
  .pp .side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 790px) {
  .pp .intro-callout { align-items: flex-start; }
}
@media (max-width: 600px) {
  .pp .hero-strip { align-items: flex-start; padding: 12px; gap: 10px; }
  .pp .hero-icon { width: 34px; height: 34px; }
  .pp .hero-status { font-size: 8px; padding: 5px 6px; }
  .pp .content-grid { gap: 22px; }
  .pp .side-stack { grid-template-columns: 1fr; gap: 22px; }
  .pp .section-head { align-items: flex-start; }
  .pp .resource-row { min-height: 74px; padding: 12px; }
  .pp .row-icon { width: 34px; height: 34px; }
  .pp .row-description { font-size: 10px; }
  .pp .row-end { gap: 4px; }
  .pp .row-arrow { width: 14px; height: 14px; }
  .pp .page-subtitle.is-wide { font-size: 11.5px; }
  .pp .intro-callout { padding: 11px; gap: 9px; }
  .pp .intro-symbol { width: 33px; height: 33px; }
  .pp .tip-pill { font-size: 8px; padding: 4px 6px; }
  .pp .search-row { gap: 6px; }
  .pp .tool-search { height: 40px; padding: 0 9px; }
  .pp .tool-search input { font-size: 10.5px; }
  .pp .search-submit { height: 40px; min-width: 40px; padding: 0 10px; font-size: 0; }
  .pp .search-submit .icon { width: 17px; height: 17px; }
  .pp .discovery { padding: 11px; }
  .pp .filters-row { align-items: flex-start; flex-direction: column; gap: 9px; }
  .pp .tool-grid { grid-template-columns: 1fr; }
  .pp .tool-card { border-radius: 12px; }
  .pp .card-top { padding: 15px 14px 0; }
  .pp .tool-description { padding: 12px 14px 0; min-height: 0; }
  .pp .tool-bottom { padding: 14px; }
}
@media (max-width: 390px) {
  .pp .row-tag { display: none; }
  .pp .row-badge { font-size: 8px; padding: 3px 5px; }
  .pp .resource-row { gap: 9px; }
  .pp .row-end { margin-left: 0; }
  .pp .hero-status { max-width: 95px; white-space: normal; text-align: center; }
}
/* More and AI tools in the dark */
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.hero-strip, .intro-callout) { background: var(--sw-surface); border-color: var(--sw-border); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.hero-icon, .intro-symbol) { background: var(--sw-surface-2); border-color: var(--sw-border); color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.hero-copy p, .intro-copy p, .section-caption, .row-description, .group-footer, .bottom-note, .category-label, .tool-description,
  .feature, .external-note, .results-text, .empty-state p) { color: var(--sw-text-muted); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.hero-copy strong, .intro-copy strong, .row-title, .tool-title, .tool-title a) { color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .hero-status { background: var(--sw-success-bg); border-color: transparent; color: var(--sw-success); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.resource-panel, .side-panel, .discovery, .tool-card, .empty-state) { background: var(--sw-surface); border-color: var(--sw-border); box-shadow: none; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .resource-row { color: var(--sw-text); border-color: var(--sw-border); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .resource-row:hover { background: var(--sw-surface-2); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.row-icon, .section-icon, .tool-logo) { background: var(--sw-brand-50); border-color: var(--sw-brand-100); color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.row-icon.violet, .section-icon.purple) { background: #272240; border-color: transparent; color: #B9AEF5; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .row-icon.green { background: var(--sw-success-bg); border-color: transparent; color: var(--sw-success); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .row-icon.amber { background: var(--sw-warning-bg); border-color: transparent; color: var(--sw-warning); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .row-badge { background: var(--sw-brand-50); color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.row-tag, .pricing, .tip-pill) { background: var(--sw-surface-2); border-color: var(--sw-border); color: var(--sw-text-muted); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .pricing.free { background: var(--sw-success-bg); color: var(--sw-success); border-color: transparent; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .ai-eyebrow { background: var(--sw-brand-50); border-color: var(--sw-brand-100); color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .tool-search { background: var(--sw-surface-2); border-color: var(--sw-border-strong); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .tool-search input { color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .filter { background: var(--sw-surface); border-color: var(--sw-border-strong); color: var(--sw-text-2); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .filter.active, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .filter.active:hover { background: #6FB4EA; border-color: #6FB4EA; color: #08121C; }

/* ==========================================================================
   Programmes open for registration (scrollwell_open_programmes_redesign.html), ported as it is.
   Its cards are prefixed rc- here: "programme-card", "card-main" and "badge-upcoming" already
   mean the Programmes page's cards above.
   ========================================================================== */
.pp .breadcrumb .crumb-root { color: #8995a5; }
.pp .open-head { margin-bottom: 22px; gap: 22px; }
.pp .open-head .ai-eyebrow { margin-bottom: 9px; background: rgba(239, 248, 255, .85); }
.pp .open-head .page-subtitle { margin-top: 8px; max-width: 640px; font-size: 12.5px; line-height: 1.65; }
.pp .page-head-note { display: flex; align-items: center; gap: 7px; flex: none; padding: 8px 10px; border: 1px solid #dce9f6; border-radius: 9px; background: rgba(255, 255, 255, .76); color: #60758e; font-size: 10px; }
.pp .page-head-note .icon { width: 14px; height: 14px; color: var(--pp-blue); }
.pp .page-head-note strong { color: #60758e; font-weight: 740; }
.pp .filter-panel { margin-bottom: 20px; padding: 13px 14px 11px; border: 1px solid rgba(217, 227, 239, .98); border-radius: 12px; background: rgba(255, 255, 255, .87); box-shadow: var(--pp-shadow-card); }
.pp .filter-controls { display: grid; grid-template-columns: minmax(200px, 1fr) 164px auto auto; align-items: center; gap: 9px; margin: 0; }
.pp .programme-search { height: 40px; min-width: 0; display: flex; align-items: center; gap: 9px; margin: 0; padding: 0 11px; border: 1px solid #ccd8e6; border-radius: 9px; background: #fff; color: #718198; transition: border .16s, box-shadow .16s; }
.pp .programme-search:focus-within { border-color: #87bfe7; box-shadow: 0 0 0 3px rgba(8, 121, 201, .08); }
.pp .programme-search input { width: 100%; min-width: 0; height: auto; padding: 0; border: 0; outline: 0 !important; box-shadow: none !important; background: transparent; color: var(--pp-ink); font: inherit; font-size: 11.5px; }
.pp .programme-search input::placeholder { color: #8491a4; }
.pp .select-wrap { position: relative; min-width: 0; }
.pp .select-wrap select { width: 100%; height: 40px; margin: 0; padding: 0 31px 0 11px; border: 1px solid var(--pp-line-2); border-radius: 9px; background-color: #fff; color: #44566f; font: inherit; font-size: 10.5px; cursor: pointer; box-shadow: none; }
.pp .check-filter { height: 40px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 7px; color: #455770; font-size: 10.5px; font-weight: 400; white-space: nowrap; cursor: pointer; }
.pp .check-filter input { width: 15px; height: 15px; accent-color: var(--pp-blue); margin: 0; }
.pp .filter-actions { display: flex; gap: 7px; }
.pp .filter-actions .pbtn { height: 40px; }
.pp .filter-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #eef1f5; }
.pp .filter-summary { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: #8491a3; font-size: 9.5px; }
.pp .active-filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; border: 1px solid #dceaf8; border-radius: 5px; background: #f1f8ff; color: #296c9e; font-size: 9px; font-weight: 700; }
.pp .clear-filters { padding: 3px; color: #6d7d93; font-size: 10px; font-weight: 700; }
.pp .clear-filters:hover { color: var(--pp-blue); }
.pp .results-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 23px 0 11px; }
.pp .results-heading h2 { font-size: 15px; }
.pp .results-subtitle { margin-top: 3px; color: var(--pp-muted); font-size: 10px; }
.pp .result-count { font-size: 10px; color: #7d8ba0; white-space: nowrap; }
.pp .rc-list { display: grid; gap: 11px; }
.pp .rc-card { overflow: hidden; border: 1px solid var(--pp-line); border-radius: 13px; background: rgba(255, 255, 255, .97); box-shadow: 0 1px 2px rgba(25, 42, 68, .025); transition: border-color .16s, box-shadow .16s, transform .16s; }
.pp .rc-card:hover { border-color: #c4d5e6; box-shadow: 0 6px 20px rgba(24, 44, 70, .055); transform: translateY(-1px); }
.pp .rc-main { display: flex; align-items: center; gap: 14px; padding: 15px 17px; min-height: 80px; }
.pp .rc-date { width: 43px; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; border: 1px solid #deebf8; border-radius: 10px;
  background: linear-gradient(180deg, #f4faff, #eaf5ff); color: #126bad; line-height: 1; }
.pp .rc-date .month { font-size: 8px; font-weight: 850; letter-spacing: .8px; text-transform: uppercase; }
.pp .rc-date .day { margin-top: 4px; font-size: 18px; font-weight: 790; letter-spacing: -.6px; }
.pp .rc-copy { min-width: 0; flex: 1; }
.pp .rc-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp .rc-title { margin: 0; font-size: 13px; font-weight: 780; letter-spacing: -.2px; }
.pp .rc-title a { color: #0866aa; }
.pp .rc-title a:hover { color: var(--pp-blue-hover); text-decoration: underline; text-underline-offset: 3px; }
.pp .rc-title .rc-aside { font-weight: 550; color: #728198; }
.pp .rc-date-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 5px; color: #697990; font-size: 10.5px; }
.pp .rc-date-line .icon { width: 12px; height: 12px; color: #8998ab; }
.pp .separator-dot { width: 3px; height: 3px; border-radius: 50%; background: #b6c1ce; }
.pp .rc-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 6px; font-size: 9px; font-weight: 780; white-space: nowrap; }
.pp .rc-badge .icon { width: 11px; height: 11px; }
.pp .rc-badge.is-open { background: #edf5ff; color: #236da8; }
.pp .rc-badge.is-limited { background: #fff4db; color: #8c5d07; }
.pp .rc-badge.is-soon { background: #edf5ff; color: #236da8; }
.pp .rc-badge.is-full { background: var(--pp-red-bg); color: var(--pp-red); }
.pp .rc-actions { display: flex; align-items: center; gap: 5px; flex: none; margin-left: 8px; }
.pp .rc-details { display: inline-flex; align-items: center; height: 35px; padding: 0 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #0871b8; font-size: 10.5px; font-weight: 750; }
.pp .rc-details:hover { background: #f0f7fd; border-color: #e0edf8; color: #0871b8; }
.pp .rc-register { height: 38px; min-width: 102px; padding: 0 12px; }
.pp .rc-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 37px; padding: 8px 17px 8px 74px; border-top: 1px solid #e6edf5;
  background: linear-gradient(90deg, rgba(243, 247, 252, .96), rgba(249, 251, 254, .96)); }
.pp .rc-meta-left, .pp .rc-meta-right { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: #63738a; font-size: 10px; }
.pp .rc-meta-left strong { color: #2c3f59; font-weight: 790; font-variant-numeric: tabular-nums; }
.pp .rc-divider { height: 12px; width: 1px; margin: 0 3px; background: #d8e0e9; }
.pp .rc-meta .icon { width: 13px; height: 13px; color: #7b8da5; }
.pp .rc-limit { display: inline-flex; align-items: center; gap: 5px; color: #976708; font-weight: 740; }
.pp .rc-limit .icon { width: 12px; height: 12px; color: currentColor; }
.pp .trust-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 20px; padding: 12px 13px; border: 1px solid rgba(220, 229, 239, .93); border-radius: 10px; background: rgba(255, 255, 255, .67); color: #7d8ba0; font-size: 9.5px; line-height: 1.6; }
.pp .trust-note .icon { width: 14px; height: 14px; flex: none; margin-top: 1px; color: #7691ae; }
.pp .trust-note strong { color: #52657d; }
.pp .trust-note a { color: #0871b8; font-weight: 700; }
@media (max-width: 1120px) {
  .pp .filter-controls { grid-template-columns: minmax(180px, 1fr) 145px auto; }
  .pp .check-filter { grid-column: 1 / 3; grid-row: 2; height: 27px; }
  .pp .filter-actions { grid-column: 3; grid-row: 2; }
  .pp .rc-main { gap: 11px; }
  .pp .rc-actions { gap: 2px; margin-left: 3px; }
  .pp .rc-register { min-width: 92px; }
}
@media (max-width: 820px) {
  .pp .open-head { align-items: flex-start; flex-direction: column; }
  .pp .page-head-note { align-self: flex-start; }
  .pp .filter-controls { grid-template-columns: minmax(0, 1fr) 150px; }
  .pp .check-filter { grid-column: 1; grid-row: 2; }
  .pp .filter-actions { grid-column: 2; grid-row: 2; }
  .pp .rc-main { flex-wrap: wrap; }
  .pp .rc-actions { margin-left: auto; }
  .pp .rc-meta { padding-left: 17px; }
}
@media (max-width: 600px) {
  .pp .open-head { margin-bottom: 19px; }
  .pp .open-head .page-subtitle { font-size: 11.5px; }
  .pp .page-head-note { font-size: 9px; }
  .pp .filter-panel { padding: 10px; }
  .pp .filter-controls { grid-template-columns: 1fr 40px; gap: 7px; }
  .pp .select-wrap { grid-column: 1 / -1; grid-row: 2; }
  .pp .select-wrap select { height: 38px; }
  .pp .check-filter { grid-column: 1; grid-row: 3; height: 34px; padding-left: 2px; }
  .pp .filter-actions { grid-column: 2; grid-row: 3; }
  .pp .filter-actions .pbtn { height: 34px; width: 40px; padding: 0; font-size: 0; }
  .pp .filter-actions .pbtn .icon { width: 16px; height: 16px; }
  .pp .filter-bottom { margin-top: 8px; }
  .pp .filter-summary { font-size: 9px; }
  .pp .results-heading { margin-top: 20px; }
  .pp .rc-card { border-radius: 12px; }
  .pp .rc-main { align-items: flex-start; padding: 13px; gap: 10px; }
  .pp .rc-date { width: 39px; height: 42px; border-radius: 9px; }
  .pp .rc-date .day { font-size: 16px; }
  .pp .rc-copy { width: calc(100% - 50px); flex: 1; }
  .pp .rc-title { font-size: 12px; }
  .pp .rc-date-line { font-size: 9.5px; gap: 5px; }
  .pp .rc-actions { width: 100%; margin: 2px 0 0 49px; flex: 1; }
  .pp .rc-register { flex: 1; min-width: 0; }
  .pp .rc-meta { align-items: flex-start; flex-direction: column; gap: 5px; padding: 9px 13px; }
  .pp .rc-meta-left, .pp .rc-meta-right { font-size: 9.5px; }
  .pp .trust-note { font-size: 9px; }
}
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.filter-panel, .rc-card, .page-head-note, .trust-note) { background: var(--sw-surface); border-color: var(--sw-border); box-shadow: none; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .rc-meta { background: var(--sw-surface-1); border-color: var(--sw-border); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.programme-search, .select-wrap select) { background-color: var(--sw-surface-2); border-color: var(--sw-border-strong); color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .programme-search input { color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.check-filter, .filter-summary, .results-subtitle, .result-count, .rc-date-line, .rc-meta-left, .rc-meta-right, .trust-note, .page-head-note, .page-head-note strong, .rc-title .rc-aside) { color: var(--sw-text-muted); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.rc-meta-left strong, .trust-note strong) { color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .rc-title a { color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .rc-date { background: var(--sw-brand-50); border-color: var(--sw-brand-100); color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.rc-badge.is-open, .rc-badge.is-soon, .active-filter-chip) { background: var(--sw-brand-50); color: #8CC6F2; border-color: var(--sw-brand-100); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .rc-badge.is-limited { background: var(--sw-warning-bg); color: var(--sw-warning); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .rc-limit { color: var(--sw-warning); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.rc-details, .clear-filters, .trust-note a) { color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .filter-bottom { border-color: var(--sw-border); }

/* ==========================================================================
   Help & FAQ (scrollwell_help_faq_draft.html) and a programme's public page
   (scrollwell_partner_programme_redesign.html), ported as they are (20 Oct 2026). Where the two
   files repeat a part that already exists above — the pill eyebrow (.ai-eyebrow), the section
   heading with its icon (.section-title-wrap, .section-icon, .section-caption), the topic chips
   (.filter), the search field (.tool-search), the empty state and the bottom note — that one is
   used, so changing it changes every page. The question rows are shared by Help and the
   programme page's Questions; the panel, summary strip and fee card by any detail page.
   ========================================================================== */
/* the search card at the top of Help */
.pp .search-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr); gap: 20px; align-items: center;
  padding: 22px 23px; margin-bottom: 22px; border: 1px solid #d9e8f7; border-radius: 16px;
  background: linear-gradient(115deg, rgba(235, 246, 255, .95), rgba(255, 255, 255, .94) 58%, rgba(244, 242, 255, .92)); box-shadow: var(--pp-shadow-card); }
.pp .search-hero::after { content: ""; position: absolute; right: -75px; top: -125px; width: 260px; height: 260px; border: 1px solid rgba(75, 140, 204, .12); border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(98, 153, 216, .035), 0 0 0 56px rgba(98, 153, 216, .025); pointer-events: none; }
.pp .search-hero-copy { position: relative; z-index: 1; min-width: 0; }
.pp .search-hero-copy h2 { font-size: 18px; font-weight: 790; letter-spacing: -.45px; }
.pp .search-hero-copy p { margin-top: 6px; max-width: 520px; color: #65758b; font-size: 11px; line-height: 1.65; }
.pp .search-hero .tool-search { position: relative; z-index: 1; height: 43px; border-color: #c8d9eb; background: rgba(255, 255, 255, .93); box-shadow: 0 1px 2px rgba(30, 55, 84, .025); }
.pp .search-hero .tool-search:focus-within { border-color: #8fc4e9; box-shadow: 0 0 0 3px rgba(8, 121, 201, .08); }
.pp .search-hero .tool-search input { font-size: 11px; }
.pp .search-hero .tool-search input::-webkit-search-cancel-button { cursor: pointer; }

/* a content column with a narrow support column (Help) */
.pp .content-grid.has-aside { grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; }
.pp .faq-main { min-width: 0; }
.pp .faq-topics { margin-bottom: 16px; gap: 6px; }
.pp .faq-topics .filter { height: 31px; background: rgba(255, 255, 255, .82); color: #5c6c83; font-weight: 720; }
.pp .faq-topics .filter.active { background: var(--pp-blue); color: #fff; }
.pp .filter .icon { width: 13px; height: 13px; }
.pp .side-stack.is-sticky { grid-template-columns: minmax(0, 1fr); gap: 13px; position: sticky; top: 84px; }

/* the question rows (Help, and Questions on a programme page) */
.pp .faq-section { margin-top: 21px; }
.pp .faq-section:first-of-type { margin-top: 0; }
.pp .faq-section[hidden] { display: none; }
.pp .faq-section .section-header { margin-bottom: 10px; }
.pp .faq-section .section-header h2 { font-size: 13px; }
.pp .faq-section .section-icon { width: 29px; height: 29px; border-color: #dfeafa; }
.pp .faq-section .section-icon .icon { width: 15px; height: 15px; }
.pp .section-icon.green { background: #edf8f1; border-color: #e0f0e5; color: #217b56; }
.pp .faq-list { overflow: hidden; border: 1px solid rgba(218, 227, 238, .98); border-radius: 12px; background: rgba(255, 255, 255, .95); box-shadow: var(--pp-shadow-card); }
.pp .panel .faq-list { box-shadow: none; }
.pp .faq-item { margin: 0; border: 0; border-bottom: 1px solid #eaf0f5; border-radius: 0; background: transparent; }
.pp .faq-item:last-child { border-bottom: 0; }
.pp .faq-item[hidden] { display: none; }
.pp .faq-question { width: 100%; min-height: 0; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 14px 15px; border: 0;
  background: transparent; text-align: left; color: var(--pp-ink); font-weight: inherit; list-style: none; cursor: pointer; transition: background .15s; }
.pp .faq-question::-webkit-details-marker { display: none; }
.pp .faq-question::after { content: none; display: none; }
.pp .faq-question:hover { background: #f9fbfd; }
.pp .faq-question:focus-visible { outline: 3px solid rgba(8, 121, 201, .28); outline-offset: -3px; border-radius: 0; }
.pp .question-mark { width: 26px; height: 26px; display: grid; place-items: center; flex: none; border-radius: 8px; background: #eff6fd; color: #3576ad;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp .question-text { flex: 1; min-width: 0; font-size: 11px; font-weight: 740; line-height: 1.5; }
.pp .faq-chevron { width: 16px; height: 16px; color: #8090a4; transition: transform .18s; }
.pp .faq-item[open] .faq-chevron { transform: rotate(180deg); color: var(--pp-blue); }
.pp .faq-answer { margin: 0; padding: 0 52px 15px 53px; color: #63738a; font-size: 10.5px; line-height: 1.75; }
.pp .faq-prose .faq-answer { padding: 14px 15px; }
.pp .faq-answer :is(p, li) { font-size: inherit; line-height: inherit; color: inherit; }
.pp .faq-answer p + p { margin-top: 8px; }
.pp .faq-answer :is(ul, ol) { margin: 7px 0; padding-left: 17px; }
.pp .faq-answer li { margin: 3px 0; }
.pp .faq-answer :is(strong, b) { color: var(--pp-ink-2); font-weight: 740; }
.pp .faq-answer a { color: #0871b8; font-weight: 700; }
.pp .faq-answer a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Help's support column */
.pp .help-card { padding: 16px; border: 1px solid #dbe6f2; border-radius: 13px; background: linear-gradient(145deg, rgba(240, 248, 255, .94), rgba(255, 255, 255, .96)); box-shadow: var(--pp-shadow-card); }
.pp .help-card-top { display: flex; align-items: center; gap: 9px; }
.pp .help-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border: 1px solid #dceafa; border-radius: 10px; background: #fff; color: var(--pp-blue); }
.pp .help-card h3 { font-size: 12px; }
.pp .help-card p { margin-top: 7px; color: #6d7d93; font-size: 10px; line-height: 1.65; }
.pp .help-card .help-card-top p { margin-top: 2px; }
.pp .help-card .pbtn { width: 100%; margin-top: 13px; }
.pp .quick-card { padding: 15px; border: 1px solid var(--pp-line); border-radius: 12px; background: rgba(255, 255, 255, .93); box-shadow: var(--pp-shadow-card); }
.pp .quick-card h3 { font-size: 11px; margin-bottom: 10px; }
.pp .quick-link { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 0; border-bottom: 1px solid #edf1f5; color: #4e6078; font-size: 10px; }
.pp .quick-link:last-child { border-bottom: 0; padding-bottom: 0; }
.pp .quick-link .icon { width: 14px; height: 14px; color: #6f8ba7; }
.pp .quick-link:hover { color: var(--pp-blue); }
.pp .response-note { padding: 12px 13px; border: 1px solid var(--pp-line); border-radius: 10px; background: rgba(255, 255, 255, .72); color: #7f8da0; font-size: 9.5px; line-height: 1.6; }
.pp .response-note strong { color: #4e627d; }
.pp .response-note a { color: #0871b8; }
.pp .section-header + .info-note { margin: 0 0 12px; }

/* a form inside the design system (Help's support form): the app's own fields, in a panel */
.pp .form-panel { display: grid; gap: 2px; }
.pp .form-panel > .pbtn { justify-self: start; margin-top: 6px; }

/* a detail page: the facts in one strip, panels on the left, a sticky card on the right */
.pp .summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; margin-bottom: 18px; border: 1px solid rgba(215, 226, 239, .98);
  border-radius: 12px; background: rgba(255, 255, 255, .95); box-shadow: var(--pp-shadow-card); }
.pp .summary-item { min-width: 0; padding: 14px 17px; border-right: 1px solid var(--pp-line); }
.pp .summary-item:last-child { border-right: 0; }
.pp .summary-label { display: flex; align-items: center; gap: 6px; color: #77869b; font-size: 9px; font-weight: 820; letter-spacing: .75px; text-transform: uppercase; }
.pp .summary-label .icon { width: 13px; height: 13px; color: #7a94ae; }
.pp .summary-value { margin-top: 5px; color: #22344e; font-size: 12px; font-weight: 790; letter-spacing: -.1px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pp .summary-value small { color: #718097; font-size: 10px; font-weight: 600; letter-spacing: 0; }
.pp .detail-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .92fr); align-items: start; gap: 17px; }
.pp .detail-main { display: grid; gap: 14px; min-width: 0; }
.pp .detail-main .banner { margin: 0; border-radius: 13px; border-color: rgba(216, 226, 238, .98); }
.pp .panel { min-width: 0; padding: 19px 20px; border: 1px solid rgba(216, 226, 238, .98); border-radius: 13px; background: rgba(255, 255, 255, .96); box-shadow: var(--pp-shadow-card); }
.pp .panel h2 { font-size: 15px; letter-spacing: -.25px; }
.pp .panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.pp .panel-head > .icon { color: var(--pp-blue); }
.pp .panel-head.is-split { justify-content: space-between; flex-wrap: wrap; }
.pp .panel-title { margin-bottom: 12px; }
.pp .panel-sub { margin-top: 16px; }
.pp .panel-prose { margin-top: 8px; color: #52647d; font-size: 11px; line-height: 1.7; }
.pp .section-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 7px; border-radius: 6px; background: #edf6ff; color: #0b70b6;
  font-size: 9px; font-weight: 820; letter-spacing: .6px; text-transform: uppercase; }
.pp .section-chip .icon { width: 12px; height: 12px; }
.pp .icon-list { display: grid; gap: 12px; }
.pp .icon-item { display: flex; align-items: flex-start; gap: 11px; color: #52647d; font-size: 10.5px; line-height: 1.65; }
.pp .icon-item > .icon { width: 17px; height: 17px; color: #0879c9; margin-top: 1px; }
.pp .icon-item strong { color: #30425b; font-weight: 760; }
.pp .fine-print { margin-top: 13px; padding-top: 12px; border-top: 1px solid #edf0f5; color: #7c899d; font-size: 9.5px; line-height: 1.6; }
.pp .agenda-placeholder { display: flex; gap: 10px; align-items: flex-start; margin-top: 13px; padding: 11px 12px; background: #f8fafc; border: 1px dashed #dce5ef; border-radius: 9px; }
.pp .agenda-placeholder .icon { width: 16px; height: 16px; color: #8295aa; margin-top: 1px; }
.pp .agenda-placeholder strong { display: block; color: #53667f; font-size: 10.5px; }
.pp .agenda-placeholder p { margin-top: 3px; color: #8693a5; font-size: 9.5px; line-height: 1.55; }
/* the day-by-day agenda (the reference had none yet; its type and lines) */
.pp .day-list { display: grid; margin: 10px 0 0; padding: 0; list-style: none; }
.pp .day-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid #edf0f5; }
.pp .day-row:first-child { border-top: 0; }
.pp .day-when { color: #718097; font-size: 10px; line-height: 1.55; font-variant-numeric: tabular-nums; }
.pp .day-when strong { display: block; color: #30425b; font-size: 10.5px; font-weight: 790; }
.pp .day-when span { display: block; }
.pp .day-topic { color: var(--pp-ink); font-size: 11.5px; font-weight: 760; line-height: 1.45; }
.pp .day-tba { color: var(--pp-muted); font-weight: 600; }
.pp .day-person { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: #6e7e94; font-size: 10px; line-height: 1.45; }
.pp .day-person img { width: 28px; height: 28px; flex: none; border-radius: 8px; object-fit: cover; }
.pp .day-person strong { display: block; color: #34465e; font-weight: 740; }
.pp .day-person small { display: block; font-size: 9.5px; color: #718097; }
/* what teachers said */
.pp .rating-line { color: #6e7e94; font-size: 10px; }
.pp .rating-line strong { color: var(--pp-ink); }
.pp .stars { color: #c98a0b; }
.pp .review-quote { margin: 10px 0 0; padding: 12px 13px; border: 1px solid var(--pp-line); border-radius: 10px; background: #fcfdff; }
.pp .review-quote p { color: #52647d; font-size: 11px; line-height: 1.65; }
.pp .review-quote footer { margin-top: 6px; color: #7c899d; font-size: 9.5px; font-weight: 700; }
/* the fee card */
.pp .fee-card { position: sticky; top: 84px; overflow: hidden; border: 1px solid #d6e1ee; border-radius: 14px; background: rgba(255, 255, 255, .98); box-shadow: 0 5px 22px rgba(23, 44, 70, .06); }
.pp .fee-head { padding: 18px 19px 15px; border-bottom: 1px solid #edf0f5; background: linear-gradient(135deg, rgba(239, 247, 255, .9), rgba(255, 255, 255, .95) 70%); }
.pp .fee-overline { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #65768d; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; }
.pp .seat-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid #f0e1b9; border-radius: 6px; background: #fff8e8; color: #8a620e;
  font-size: 9px; font-weight: 760; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.pp .seat-status .icon { width: 12px; height: 12px; }
.pp .seat-status.is-full { border-color: #f5d6d3; background: var(--pp-red-bg); color: var(--pp-red); }
.pp .seat-status.is-done { border-color: #cfeadb; background: var(--pp-green-bg); color: var(--pp-green); }
.pp .price-total { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.pp .price-total strong { font-size: 29px; line-height: 1.1; letter-spacing: -1px; font-weight: 820; color: #1b2d46; font-variant-numeric: tabular-nums; }
.pp .price-total span { font-size: 10px; color: #6c7b90; }
.pp .fee-title { margin-top: 10px; font-size: 18px; letter-spacing: -.45px; }
.pp .fee-subtitle { margin-top: 5px; color: #718097; font-size: 10px; }
.pp .fee-body { padding: 15px 19px 18px; }
.pp .price-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 5px 0; color: #66768d; font-size: 10.5px; }
.pp .price-line strong { color: #34465e; font-size: 10.5px; font-weight: 720; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp .price-line.total { padding-top: 10px; margin-top: 5px; border-top: 1px solid #edf0f5; color: #34465e; font-size: 11px; font-weight: 780; }
.pp .price-line.total strong { font-size: 12px; font-weight: 820; color: #1d2e47; }
.pp .seats-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; color: #6e7e94; font-size: 10px; }
.pp .seats-line strong { color: #34465e; font-size: 10px; text-align: right; }
.pp .register-main { width: 100%; height: 43px; margin-top: 15px; border-radius: 9px; font-size: 12px; }
.pp .fee-state { margin-top: 12px; color: #52647d; font-size: 10.5px; line-height: 1.6; }
.pp .fee-state:first-child { margin-top: 0; }
.pp .fee-state strong { color: var(--pp-ink); }
.pp .fee-state a, .pp .signin a { color: #0871b8; font-weight: 750; }
.pp .fee-state a:hover, .pp .signin a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp .payment-copy { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: #7c899d; font-size: 9.5px; line-height: 1.65; }
.pp .payment-copy .icon { width: 14px; height: 14px; flex: none; color: #7890a8; margin-top: 1px; }
.pp .fee-divider { height: 1px; background: #e9eef4; margin: 14px 0 12px; }
.pp .trust-row { display: flex; align-items: flex-start; gap: 7px; color: #75849a; font-size: 9.5px; line-height: 1.55; }
.pp .trust-row + .trust-row, .pp .fee-state + .trust-row, .pp .register-main + .trust-row { margin-top: 10px; }
.pp .trust-row .icon { width: 14px; height: 14px; flex: none; color: #18845b; margin-top: 1px; }
.pp .trust-row strong { color: #40536d; }
.pp .signin { margin-top: 12px; color: #728198; font-size: 10px; }
.pp .prog-page .bottom-note { margin-top: 17px; }

@media (max-width: 1100px) {
  .pp .detail-layout { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .9fr); }
  .pp .panel { padding: 17px; }
  .pp :is(.fee-head, .fee-body) { padding-left: 16px; padding-right: 16px; }
  .pp .summary-item { padding: 12px; }
  .pp .summary-value { font-size: 11px; }
}
@media (max-width: 1050px) {
  .pp .content-grid.has-aside { grid-template-columns: minmax(0, 1fr) 235px; gap: 14px; }
  .pp .search-hero { grid-template-columns: 1fr; }
  .pp .search-hero .tool-search { max-width: 480px; }
}
@media (max-width: 850px) {
  .pp .detail-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .pp .fee-card { top: 76px; }
}
@media (max-width: 820px) {
  .pp .content-grid.has-aside { grid-template-columns: 1fr; }
  .pp .side-stack.is-sticky { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pp .side-stack.is-sticky .response-note { grid-column: 1 / -1; }
  .pp .search-hero { padding: 19px; }
}
@media (max-width: 700px) {
  .pp .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
  .pp .summary-item { padding: 12px 13px; }
  .pp .summary-item:nth-child(2) { border-right: 0; }
  .pp .summary-item:nth-child(-n+2) { border-bottom: 1px solid var(--pp-line); }
  .pp .summary-value { font-size: 12px; }
  .pp .detail-layout { grid-template-columns: 1fr; gap: 14px; }
  .pp .fee-card { position: static; grid-row: 1; }
  .pp .detail-main { grid-row: 2; }
  .pp .fee-head { padding: 16px; }
  .pp .fee-body { padding: 13px 16px 16px; }
  .pp .price-total strong { font-size: 27px; }
  .pp .register-main { margin-top: 12px; }
  .pp .panel { padding: 16px; }
  .pp .prog-page .bottom-note { margin-top: 14px; }
}
@media (max-width: 600px) {
  .pp .search-hero { padding: 15px; gap: 13px; }
  .pp .search-hero-copy h2 { font-size: 16px; }
  .pp .search-hero .tool-search { height: 40px; }
  .pp .content-grid.has-aside { gap: 20px; }
  .pp .side-stack.is-sticky { grid-template-columns: 1fr; }
  .pp .side-stack.is-sticky .response-note { grid-column: auto; }
  .pp .faq-topics { gap: 5px; }
  .pp .faq-topics .filter { height: 30px; padding: 0 8px; font-size: 9.5px; }
  .pp .faq-question { padding: 12px 11px; gap: 9px; }
  .pp .question-mark { width: 24px; height: 24px; }
  .pp .question-text { font-size: 10.5px; }
  .pp .faq-answer { padding: 0 14px 14px 44px; font-size: 10px; }
  .pp .faq-section .section-header { align-items: flex-start; }
  .pp .day-row { grid-template-columns: 1fr; gap: 6px; }
  .pp .day-when span { display: inline; }
  .pp .day-when span + span::before { content: " · "; }
}
/* Help and the programme page in the dark */
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.search-hero, .help-card) { background: var(--sw-surface); border-color: var(--sw-border); box-shadow: none; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .search-hero::after { border-color: var(--sw-border); box-shadow: none; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .search-hero .tool-search { background: var(--sw-surface-2); border-color: var(--sw-border-strong); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.faq-list, .quick-card, .panel, .summary-strip, .fee-card, .review-quote) { background: var(--sw-surface); border-color: var(--sw-border); box-shadow: none; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.faq-item, .quick-link, .summary-item, .day-row, .fee-head, .price-line.total, .fine-print) { border-color: var(--sw-border); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .faq-question { color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .faq-question:hover { background: var(--sw-surface-2); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .question-mark { background: var(--sw-brand-50); color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.search-hero-copy p, .faq-answer, .help-card p, .quick-link, .response-note, .summary-label, .summary-value small, .icon-item, .panel-prose,
  .fine-print, .agenda-placeholder p, .day-when, .day-person, .day-person small, .rating-line, .review-quote p, .review-quote footer, .fee-overline, .price-total span, .fee-subtitle,
  .price-line, .seats-line, .fee-state, .payment-copy, .trust-row, .signin, .faq-chevron, .quick-link .icon, .summary-label .icon) { color: var(--sw-text-muted); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.search-hero-copy h2, .question-text, .faq-answer :is(strong, b), .help-card h3, .quick-card h3, .response-note strong, .summary-value,
  .icon-item strong, .agenda-placeholder strong, .day-when strong, .day-topic, .day-person strong, .rating-line strong, .price-total strong, .price-line strong, .seats-line strong,
  .fee-state strong, .trust-row strong) { color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.faq-answer a, .response-note a, .fee-state a, .signin a, .quick-link:hover) { color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.help-icon, .section-chip) { background: var(--sw-brand-50); border-color: var(--sw-brand-100); color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .section-icon.green { background: var(--sw-success-bg); border-color: transparent; color: var(--sw-success); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.response-note, .agenda-placeholder, .fee-head) { background: var(--sw-surface-1); border-color: var(--sw-border); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.fee-divider) { background: var(--sw-border); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .seat-status { background: var(--sw-warning-bg); border-color: transparent; color: var(--sw-warning); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .seat-status.is-full { background: var(--sw-danger-bg); color: var(--sw-danger); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .seat-status.is-done, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .trust-row .icon { background: var(--sw-success-bg); color: var(--sw-success); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .trust-row .icon { background: none; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.faq-topics .filter) { background: var(--sw-surface); border-color: var(--sw-border-strong); color: var(--sw-text-2); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .faq-topics .filter.active { background: #6FB4EA; border-color: #6FB4EA; color: #08121C; }

/* ==========================================================================
   The reference design on the app's own parts (body.p-app.signed-in): the programme pages (Schedule,
   Classroom, Quiz, Activities, Feedback, Contacts, certificate details), My certificates and
   Learning Hours. Their markup and behaviour are the app's; only the look is the reference's:
   the same type, colours, borders, radii, buttons, badges, tabs and fields as Home and Programmes.
   ========================================================================== */
.pp .page-header .p-eyebrow { margin: 0 0 8px; }
.pp .prog-header .progress-box { margin-top: 12px; max-width: 420px; }
.pp .prog-header h1.is-long { font-size: 24px; }
.pp .pbtn-whatsapp { background: #fff; border-color: var(--pp-line-2); color: #35465e; box-shadow: var(--pp-shadow-sm); }
.pp .pbtn-whatsapp:hover { background: #f9fbfd; border-color: #bdcbdc; color: #35465e; }
.pp .pbtn-whatsapp .ic { width: 15px; height: 15px; color: #128c7e; }
.pp .breadcrumb .crumb-prog { display: inline-block; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* type */
body.lms:is(.p-app, .a-app):not(.auth-split) .main { color: var(--pp-ink); font-size: 12px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(h2, h3, h4):not(.pp *) { font-family: inherit; color: var(--pp-ink); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main h2:not(.pp *) { font-size: 16px; line-height: 1.35; letter-spacing: -.34px; font-weight: 760; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main h3:not(.pp *) { font-size: 13px; line-height: 1.42; letter-spacing: -.15px; font-weight: 740; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main p:not(.pp *), body.lms:is(.p-app, .a-app):not(.auth-split) .main li:not(.pp *), body.lms:is(.p-app, .a-app):not(.auth-split) .main dd:not(.pp *), body.lms:is(.p-app, .a-app):not(.auth-split) .main td:not(.pp *) { font-size: 11.5px; line-height: 1.6; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .small:not(.pp *), body.lms:is(.p-app, .a-app):not(.auth-split) .main small:not(.pp *) { font-size: 10.5px; line-height: 1.55; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .muted:not(.pp *), body.lms:is(.p-app, .a-app):not(.auth-split) .main .small.muted:not(.pp *) { color: var(--pp-muted); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main strong:not(.pp *), body.lms:is(.p-app, .a-app):not(.auth-split) .main b:not(.pp *) { color: var(--pp-ink); font-weight: 740; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main a:not([class]):not(.pp *) { color: #0871b8; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .tnum { font-variant-numeric: tabular-nums; }

/* the older page heading (pages inside a programme that are not a tab) */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .page-head h2 { margin: 6px 0 0; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .page-head h1::after { content: none; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 8px; padding: 0; border: 0; border-radius: 0; background: none;
  font-size: 9px; font-weight: 820; letter-spacing: .85px; text-transform: uppercase; color: #8491a3; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7f70df; box-shadow: 0 0 0 3px #f0edff; opacity: 1; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .eyebrow .ic { display: none; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .section-title { margin: 29px 0 12px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.section-title, .sec-head h2, .m3-sec-head h2, .card-head h2) { font-size: 16px; line-height: 1.35; letter-spacing: -.34px; font-weight: 760; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.sec-head, .m3-sec-head) { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 29px 0 12px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.m3-hint, .hint) { font-size: 10.5px; color: var(--pp-muted); }

/* tabs: the reference's filter set */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .tabs { display: flex; width: max-content; max-width: 100%; gap: 3px; margin: 0 0 18px; padding: 3px; overflow-x: auto;
  border: 0; border-radius: 8px; background: #edf1f6; box-shadow: none; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .tabs a { position: relative; display: flex; align-items: center; gap: 5px; height: 27px; min-height: 27px; padding: 0 10px; flex: none;
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: #68768a; font-size: 10px; font-weight: 710; text-decoration: none;
  transition: background .15s, color .15s, box-shadow .15s; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .tabs a::after { content: none; display: none; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .tabs a:hover { color: #35465d; background: transparent; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .tabs a[aria-current="page"] { background: #fff; color: #263750; border-color: #e9edf3; box-shadow: 0 1px 2px rgba(26, 42, 64, .055); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .tabs a .ic { width: 13px; height: 13px; color: currentColor; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .tabs .count { min-width: 0; height: auto; padding: 0; background: none; color: #8e9aab; font-size: 9px; font-weight: 650; }

/* buttons: primary, secondary, plain, small */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; min-height: 36px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 8px; background: var(--pp-blue); color: #fff; box-shadow: 0 1px 1px rgba(0, 68, 116, .10);
  font-family: inherit; font-size: 11px; font-weight: 730; line-height: 1; white-space: nowrap; text-decoration: none;
  transition: background .16s, border-color .16s, box-shadow .16s, transform .16s var(--pp-ease); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .btn:hover { background: var(--pp-blue-hover); border-color: transparent; color: #fff; box-shadow: 0 2px 5px rgba(0, 77, 128, .13); text-decoration: none; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .btn:active { transform: scale(.985); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .btn .ic { width: 14px; height: 14px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .btn-sm { height: 31px; min-height: 31px; padding: 0 9px; font-size: 10px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .btn-lg { height: 40px; min-height: 40px; padding: 0 16px; font-size: 12px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.btn-ghost, .btn-light, .btn-whatsapp) { background: #fff; border-color: var(--pp-line-2); color: #35465e; box-shadow: var(--pp-shadow-sm); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.btn-ghost, .btn-light, .btn-whatsapp):hover { background: #f9fbfd; border-color: #bdcbdc; color: #35465e; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .btn-ghost .ic { color: currentColor; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .btn-whatsapp .ic { color: #128c7e; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.btn-text, .btn-link) { height: auto; min-height: 0; padding: 5px 0; border-color: transparent; background: transparent; box-shadow: none;
  color: #0871b8; font-size: 10.5px; font-weight: 740; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.btn-text, .btn-link):hover { background: transparent; color: #0871b8; text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .btn-tonal { background: var(--pp-blue-wash); border-color: transparent; color: #0667ad; box-shadow: none; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .btn-tonal:hover { background: #dcedfb; color: #0667ad; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .btn-ok { background: var(--pp-green); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .btn-ok:hover { background: #126446; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .btn-danger { background: var(--pp-red); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.btn:disabled, .btn.disabled, .btn[aria-disabled="true"]) { opacity: .45; cursor: not-allowed; background: var(--pp-blue); color: #fff; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .icon-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0;
  border: 1px solid transparent; border-radius: 7px; background: transparent; color: #8390a1; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .icon-btn:hover { background: #f5f8fb; border-color: var(--pp-line); color: var(--pp-blue); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .icon-btn .ic { width: 14px; height: 14px; }

/* surfaces */
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.card, .m3-card, .list-card, .lh-card, .rec-card, .m3-day, .cw-topic) {
  background: #fff; border: 1px solid var(--pp-line); border-radius: 12px; box-shadow: var(--pp-shadow-sm); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.card, .m3-card) { padding: 18px 20px; }
/* An older rule sizes card titles with !important; the reference's overline has to say so too. */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-card-title { margin: 0 0 12px; font-size: 9px !important; font-weight: 820; letter-spacing: .85px !important; text-transform: uppercase; color: #8a97a8; line-height: 1.4 !important; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-side-col .m3-card { background: #fafbfd; }

/* status words: the reference's badges */
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.chip, .m3-status) { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 0; border-radius: 6px;
  background: #eef2f6; color: #4d5d73; font-family: inherit; font-size: 9px; font-weight: 790; line-height: 1.2; letter-spacing: 0; text-transform: none; white-space: nowrap; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .chip:not(.chip-live)::before { content: none; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.chip-live, .chip-cancelled, .chip-rejected, .chip-failed, .chip-revoked, .chip-not_eligible, .m3-status.is-error) { background: var(--pp-red-bg); color: var(--pp-red); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.chip-running, .chip-in_progress, .chip-submitted, .chip-sending) { background: var(--pp-violet-bg); color: var(--pp-violet); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.chip-upcoming, .chip-open, .chip-enrolled, .chip-queued) { background: var(--pp-green-bg); color: var(--pp-green); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.chip-issued, .chip-valid, .chip-verified, .chip-present, .chip-approved, .chip-eligible, .chip-passed, .chip-active, .m3-status.is-ok) { background: var(--pp-green-bg); color: var(--pp-green); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.chip-pending, .chip-on_hold, .chip-rescheduled, .chip-draft, .chip-expired, .chip-recommended, .chip-superseded, .m3-status.is-warning) { background: var(--pp-amber-bg); color: var(--pp-amber); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.chip-completed, .chip-closed, .chip-archived, .chip-skipped, .chip-dropped, .m3-status.is-neutral) { background: #eef2f6; color: #4d5d73; }

/* notices: the reference's schedule alert, in its four tones */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .notice { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border: 1px solid var(--pp-line); border-radius: 9px;
  background: #fff; color: var(--pp-ink-2); font-size: 10.5px; line-height: 1.55; box-shadow: none; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .notice > .ic { width: 17px; height: 17px; flex: none; margin-top: 1px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .notice strong { font-size: 10.5px; font-weight: 780; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .notice :is(p, li) { font-size: 10px; line-height: 1.55; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .notice.warn { background: #fffaf0; border-color: #f0dfb4; color: #866b32; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .notice.warn strong { color: #7d570c; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .notice.warn > .ic { color: #93620b; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.notice.info, .notice.ok) { background: #f4f9fe; border-color: #d6e9f8; color: #4f6b86; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.notice.info, .notice.ok) > .ic { color: #2c6eae; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .notice.error { background: var(--pp-red-bg); border-color: #f5d6d3; color: var(--pp-red); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .notice.error > .ic { color: var(--pp-red); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .notice-x { width: 28px; height: 28px; min-width: 28px; min-height: 28px; border-radius: 7px; color: #8390a1; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .notice-x:hover { background: rgba(255, 255, 255, .7); color: var(--pp-ink); }

/* progress */
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.m3-linear, .progress .bar) { display: block; height: 5px; overflow: hidden; border-radius: 20px; background: #edf1f6; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.m3-linear, .progress .bar) > span { display: block; height: 100%; border-radius: 20px; background: linear-gradient(90deg, #0879c9, #4a9fe0); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.m3-progress-line, .progress) { display: flex; align-items: center; gap: 10px; font-size: 10px; color: #758298; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.m3-progress-line, .progress) > :first-child { flex: 1; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .ring .ring-fg { stroke: var(--pp-blue); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .ring .ring-bg { stroke: #edf1f6; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .ring b { font-size: 10px; color: var(--pp-ink); }

/* fields */
body.lms:is(.p-app, .a-app):not(.auth-split) .main :where(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=hidden], [type=submit], [type=button]), select):not(.pp *),
body.lms:is(.p-app, .a-app):not(.auth-split) .main .pp .field :where(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=hidden], [type=submit], [type=button]), select) {
  height: 36px; padding: 0 10px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :where(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=hidden], [type=submit], [type=button]), select, textarea):not(.pp *),
body.lms:is(.p-app, .a-app):not(.auth-split) .main .pp .field :where(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=hidden], [type=submit], [type=button]), select, textarea) {
  border: 1px solid var(--pp-line-2); border-radius: 9px; background-color: #fafbfd; color: var(--pp-ink); font-family: inherit; font-size: 12px; box-shadow: none; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :where(textarea):not(.pp *), body.lms:is(.p-app, .a-app):not(.auth-split) .main .pp .field textarea { padding: 8px 10px; line-height: 1.55; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :where(input, select, textarea):focus:not(.pp *), body.lms:is(.p-app, .a-app):not(.auth-split) .main .pp .field :where(input, select, textarea):focus { outline: none; border-color: #8fc5ec; background-color: #fff; box-shadow: 0 0 0 3px rgba(8, 121, 201, .08); }
/* dropdowns: ONE look on every page, learner, visitor and staff — the reference's select (its
   open-programmes filter): no browser arrow, the design system's chevron 12px in from the right with
   room beside it, a long choice cut off with "…" instead of running under the chevron, a pointer, a
   darker edge on hover. A list box (multiple or size) keeps the browser's own. */
body.lms:is(.p-app, .a-app):not(.auth-split) .main select:not([multiple], [size]), body.lms:is(.p-app, .a-app):not(.auth-split) .main .pp .field select:not([multiple], [size]) {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23718198' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main select:not([multiple], [size]):hover:not(:disabled):not(:focus) { border-color: #b5c9de; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main select:not([multiple], [size]):disabled { cursor: not-allowed; }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main select:not([multiple], [size]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3B0C2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.field label, label.lbl) { font-size: 10.5px; font-weight: 760; color: #35465f; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .field .hint { font-size: 10px; color: var(--pp-muted); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main label.check:not(.pp *) { font-size: 11.5px; color: var(--pp-ink-2); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-search { height: 36px; padding: 0 10px; gap: 8px; border: 1px solid var(--pp-line-2); border-radius: 9px; background: #fafbfd; color: #7c899b; box-shadow: none; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-search:focus-within { border-color: #8fc5ec; background: #fff; box-shadow: 0 0 0 3px rgba(8, 121, 201, .08); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-search input[type=search] { height: auto; border: 0; background: transparent; font-size: 11px; box-shadow: none; }

/* feedback ratings: the reference's button shape and blue */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .rating span { min-width: 36px; height: 36px; border: 1px solid var(--pp-line-2); border-radius: 8px; background: #fff; color: #35465e;
  font-size: 11px; font-weight: 730; box-shadow: var(--pp-shadow-sm); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .rating label:hover span { border-color: #bdcbdc; background: #f9fbfd; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .rating input:checked + span { background: var(--pp-blue); border-color: var(--pp-blue); color: #fff; }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .rating span { background: var(--sw-surface); border-color: var(--sw-border-strong); color: var(--sw-text); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .rating input:checked + span { background: #6FB4EA; border-color: #6FB4EA; color: #08121C; }

/* lists inside the cards: next steps, materials, people */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-todo { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-todo-row { display: flex; align-items: flex-start; gap: 10px; padding: 0; border: 0; background: none; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-todo-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1px solid #e4eaf1; border-radius: 9px; background: #fff; color: #60748d; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-todo-ic .ic { width: 15px; height: 15px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-todo-txt { flex: 1; min-width: 0; padding-top: 1px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-todo-t { display: block; font-size: 10.5px; font-weight: 760; color: var(--pp-ink); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-todo-s { display: block; font-size: 10px; line-height: 1.5; color: #758297; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-todo-row.is-done .m3-todo-ic { background: var(--pp-green-bg); border-color: #cfeadb; color: var(--pp-green); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-todo-row :is(a, .btn-text) { font-size: 10.5px; font-weight: 740; color: #0871b8; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-mat { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--pp-line); border-radius: 9px; background: #fcfdff; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-mat:hover { border-color: #c8d6e5; background: #fff; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-mats { display: grid; gap: 6px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-mat-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--pp-blue-wash); color: #2c6eae; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-mat-name { font-size: 11px; font-weight: 740; color: var(--pp-ink); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-mat-meta { font-size: 9.5px; color: #718096; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-person-name { font-size: 11px; font-weight: 740; color: var(--pp-ink); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-person-role { font-size: 10px; color: var(--pp-muted); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .avatar { border-radius: 8px; background: #eaf4fc; color: #086cb1; font-weight: 800; }

/* the programme page: the next event and the days */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-upnext { padding: 21px 23px 19px; background: rgba(255, 255, 255, .94); border: 1px solid rgba(220, 228, 238, .94); border-radius: 15px; box-shadow: var(--pp-shadow-card); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.m3-upnext.is-live, .m3-upnext.is-soon) { border-color: #8fc5ec; box-shadow: var(--pp-shadow-card), inset 0 0 0 1px #8fc5ec; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-upnext-label { display: inline-flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 820; letter-spacing: .85px; text-transform: uppercase; color: #8491a3; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-countdown { padding: 4px 7px; border-radius: 6px; background: var(--pp-violet-bg); color: var(--pp-violet); font-size: 9px; font-weight: 790; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-upnext-title { margin: 10px 0 6px; font: 760 18px/1.28 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Arial, sans-serif !important; letter-spacing: -.55px; color: var(--pp-ink); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-upnext-meta { font-size: 10px; color: #718096; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.m3-upnext .m3-creds, .m3-upnext .m3-today-mat, .m3-upnext .attend-box) { padding: 10px 11px; border: 1px solid var(--pp-line); border-radius: 9px; background: #fafbfd; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.m3-subhead, .m3-cred dt) { font-size: 9px; font-weight: 820; letter-spacing: .85px; text-transform: uppercase; color: #8a97a8; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-cred dd { font-size: 11px; color: var(--pp-ink); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .done-box { font-size: 11px; font-weight: 740; color: var(--pp-green); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-days { display: grid; gap: 9px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-day { overflow: hidden; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-day-head { padding: 12px 15px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-day-label { font-size: 12px; font-weight: 760; color: var(--pp-ink); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-day-count { font-size: 10px; color: #718096; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-ev { border-top: 1px solid var(--pp-line); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-ev-time { font-size: 10px; color: #718096; font-variant-numeric: tabular-nums; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-ev-title { font-size: 11.5px; font-weight: 740; color: var(--pp-ink); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.m3-ev-sub, .m3-ev-note, .m3-reason) { font-size: 10px; color: #718096; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-type { font-size: 9px; font-weight: 790; color: #758398; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-change-list { margin: 4px 0 0; padding-left: 16px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.m3-empty-line, .m3-quiet-line) { font-size: 11px; color: var(--pp-muted); }

/* Classroom */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .cw-topic { overflow: hidden; margin-bottom: 9px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .cw-head { padding: 12px 15px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .cw-name { font-size: 12px; font-weight: 760; color: var(--pp-ink); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.cw-count, .cw-when) { font-size: 10px; color: #718096; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .cw-now { padding: 3px 6px; border-radius: 6px; background: var(--pp-violet-bg); color: var(--pp-violet); font-size: 9px; font-weight: 790; letter-spacing: .3px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .cw-body { padding: 0 15px 13px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .cw-empty-day { font-size: 10.5px; color: var(--pp-muted); }

/* lists of things (activities, certificates, learning hours) */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .list-card + .list-card { margin-top: 9px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .lc-main { padding: 15px 16px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .lc-title { font-family: inherit; font-size: 13px; font-weight: 740; letter-spacing: -.15px; color: var(--pp-ink); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .lc-sub { margin-top: 3px; font-size: 10px; color: #718096; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .lc-icon { width: 37px; height: 37px; border-radius: 10px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .lc-foot { padding: 10px 16px; border-top: 1px solid var(--pp-line); background: #fafbfd; font-size: 10.5px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.rec-title, .rec-title a) { font-size: 11.5px; font-weight: 770; color: var(--pp-ink); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.m3-pay-sub, .rec-why) { font-size: 9.5px; color: #718096; }
/* ---- the rest of the app's parts, learner and staff alike (UNIFY, 20 Oct 2026) ----
   The reference files have no tables, charts or dialogs of their own; these are drawn from the
   parts they do have, so they sit in the same family: the summary strip's labels and values for
   metrics, the panel's border and shadow for tables and charts, the progress bar's blue for
   bars, the empty state's dashed box, the partner file's dialog and toast. */
/* page greeting (staff Home) and section heads */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .greet { margin: 0 0 20px; padding: 0; border: 0; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .greet h1 { margin: 0; font-family: inherit; font-size: 29px; line-height: 1.18; letter-spacing: -1.05px; font-weight: 780; color: var(--pp-ink); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .greet p { margin: 7px 0 0; font-size: 12px; color: var(--pp-muted); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.grid-2, .grid-4, .two-col) { gap: 14px; }

/* metrics: a strip of figures (the reference's summary strip) and figure cards (its stat) */
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.stat-strip, .facts) { overflow: hidden; border: 1px solid rgba(215, 226, 239, .98); border-radius: 12px;
  background: rgba(255, 255, 255, .95); box-shadow: var(--pp-shadow-card); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.stat-strip, .facts) > div { padding: 14px 17px; border-color: var(--pp-line); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.stat-strip, .stat) .n { font-family: inherit; font-size: 20px; line-height: 1.25; font-weight: 780; letter-spacing: -.4px; color: var(--pp-ink);
  font-variant-numeric: tabular-nums; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.stat-strip, .stat) .l { margin-top: 3px; font-size: 10px; line-height: 1.45; color: #5f6f86; letter-spacing: 0; text-transform: none; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .kpis a:hover .l { color: var(--pp-blue); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .facts dt { color: #77869b; font-size: 9px; font-weight: 820; letter-spacing: .75px; text-transform: uppercase; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .facts dd { margin: 5px 0 0; color: #22344e; font-size: 12px; font-weight: 790; letter-spacing: -.1px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .stat { padding: 15px 16px; border: 1px solid var(--pp-line); border-radius: 12px; background: #fff; box-shadow: var(--pp-shadow-sm); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .stat.warn .n { color: var(--pp-amber); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .stat.bad .n { color: var(--pp-red); }
/* charts: the 14-day bars and the report's bars, in the progress bar's blue */
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.spark-card, .hero-card, .cta-band) { padding: 16px 18px; border: 1px solid rgba(216, 226, 238, .98); border-radius: 13px;
  background: rgba(255, 255, 255, .96); box-shadow: var(--pp-shadow-card); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .spark { gap: 4px; height: 54px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .spark i { border-radius: 3px 3px 0 0; background: #dceafa; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .spark span:last-child i { background: linear-gradient(180deg, #4a9fe0, #0879c9); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .rpt-bar { height: 5px; border-radius: 20px; background: #edf1f6; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .rpt-bar > span { border-radius: 20px; background: linear-gradient(90deg, #0879c9, #4a9fe0); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .rpt-label { font-size: 11px; font-weight: 740; color: var(--pp-ink); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .rpt-num { font-size: 10px; color: #5f6f86; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .rpt-num strong { color: var(--pp-ink); }
/* quick actions (staff Home): the reference's secondary button */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .chips { gap: 8px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .chip-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; min-height: 36px; padding: 0 12px; border: 1px solid var(--pp-line-2);
  border-radius: 8px; background: #fff; color: #35465e; box-shadow: var(--pp-shadow-sm); font-family: inherit; font-size: 11px; font-weight: 730; text-decoration: none;
  transition: background .16s, border-color .16s, transform .16s var(--pp-ease); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .chip-btn:hover { background: #f9fbfd; border-color: #bdcbdc; color: #35465e; transform: none; text-decoration: none; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .chip-btn .ic { width: 14px; height: 14px; color: var(--pp-blue); }
/* key and value lists */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .kv { gap: 7px 14px; font-size: 11.5px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .kv dt { color: #5f6f86; font-size: 10.5px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .kv dd { color: var(--pp-ink); font-size: 11.5px; }

/* tables: the panel's frame, the summary strip's labels as the header (in a darker grey than the
   strip's own #77869b, so a column name reads at 4.9:1 on the header tint) */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .table-wrap { overflow-x: auto; border: 1px solid rgba(216, 226, 238, .98); border-radius: 12px; background: rgba(255, 255, 255, .96); box-shadow: var(--pp-shadow-card); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .card .table-wrap { box-shadow: none; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main table:is(.data, .grid, .legal-table table) { width: 100%; border-collapse: collapse; font-size: 11px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main table.data thead th { padding: 10px 12px; border: 0; border-bottom: 1px solid #e9eef4; background: #f8fafc; color: #5f6f86; font-family: inherit;
  font-size: 9px; font-weight: 820; letter-spacing: .75px; line-height: 1.4; text-transform: uppercase; text-align: left; white-space: nowrap; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main table.data :is(td, tbody th) { padding: 11px 12px; border: 0; border-bottom: 1px solid #edf0f5; color: #34465e; font-size: 11px; line-height: 1.5; vertical-align: middle; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main table.data tbody tr:last-child :is(td, th) { border-bottom: 0; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main table.data tbody tr:hover :is(td, th) { background: #f9fbfd; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main table.data :is(td, th):is(.num, .money) { text-align: right; font-variant-numeric: tabular-nums; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main table.data :is(strong, b) { color: var(--pp-ink); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main table.data .mono { font-size: 10px; color: #5f6f86; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main table.data .btn { height: 28px; min-height: 28px; padding: 0 9px; font-size: 10px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main table.data .btn .ic { width: 13px; height: 13px; }
:root[data-density="compact"] body.lms:is(.p-app, .a-app):not(.auth-split) .main table.data :is(td, tbody th) { padding: 6px 10px; }
:root[data-density="compact"] body.lms:is(.p-app, .a-app):not(.auth-split) .main table.data thead th { padding: 7px 10px; }

/* forms: rows, checkboxes, the required mark, and the field states */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .field { margin-bottom: 14px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .form-row { gap: 0 14px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .req { color: var(--pp-red); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(input[type=checkbox], input[type=radio]) { accent-color: var(--pp-blue); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(input, select, textarea):is(:disabled, [readonly]):not(.pp :is(.tool-search, .programme-search, .select-wrap) *) { background-color: #f3f5f8; color: #7c899d; cursor: not-allowed; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(input, select, textarea)[aria-invalid="true"] { border-color: #e0a6a1; box-shadow: 0 0 0 3px rgba(179, 61, 61, .08); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .field .err, body.lms:is(.p-app, .a-app):not(.auth-split) .main .field-error { margin-top: 5px; color: var(--pp-red); font-size: 10.5px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .toolbar { gap: 10px; margin-bottom: 14px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .toolbar .field { margin: 0; }
/* a one-line form (a field and its button side by side): the field's own bottom margin lifted its box
   above the button, and centring put the button against the label — they line up on the bottom */
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(form.row, .toolbar, .money-bar, .money-filters) > .field { margin-bottom: 0; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main form.row:not(:has(.hint)) { align-items: flex-end; }

/* pagination */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .pager { gap: 10px; margin-top: 14px; font-size: 10.5px; color: #5f6f86; }

/* empty states: the reference's dashed box when it stands alone, plain inside a card */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .empty { padding: 30px 16px; color: var(--pp-muted); text-align: center; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .empty:not(:is(.card, .m3-card, .table-wrap, .list-card, .panel) *) { border: 1px dashed var(--pp-line-2); border-radius: 12px; background: rgba(255, 255, 255, .8); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .empty .ic { width: 24px; height: 24px; margin: 0 auto 8px; padding: 0; background: none; color: #66aad7; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .empty :is(h3, .empty-title) { margin: 0 0 5px; font-family: inherit; font-size: 12px; font-weight: 760; color: var(--pp-ink); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .empty p { font-size: 10.5px; color: var(--pp-muted); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .empty .btn { margin-top: 12px; }

/* busy and disabled */
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.btn:disabled, .btn.disabled, .btn[aria-disabled="true"]):not(.is-loading) { opacity: .45; cursor: not-allowed; box-shadow: none; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .btn.is-loading:disabled { opacity: 1; background: var(--pp-blue-hover); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.btn-ghost, .btn-light).is-loading:disabled { background: #fff; border-color: var(--pp-line-2); }

/* dialogs (search, file viewer, shortcuts) and the success toast: the partner file's dialog and toast */
body.lms:is(.p-app, .a-app) dialog:is(.cmdk, .m3-viewer, .m3-keys) { border: 1px solid #dce4ee; border-radius: 16px; background: #fff; color: var(--pp-ink); box-shadow: var(--pp-shadow-pop); font-family: var(--pp-font); }
body.lms:is(.p-app, .a-app) dialog:is(.cmdk, .m3-viewer, .m3-keys)::backdrop { background: rgba(18, 32, 52, .34); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
body.lms:is(.p-app, .a-app) .cmdk-in input[type=text] { font-family: inherit; font-size: 13px; color: var(--pp-ink); }
body.lms:is(.p-app, .a-app) .cmdk-in > .ic { color: var(--pp-blue); }
body.lms:is(.p-app, .a-app) .cmdk-sec { color: #929eae; font-size: 9px; font-weight: 800; letter-spacing: 1.1px; }
body.lms:is(.p-app, .a-app) .cmdk-item a { border-radius: 9px; color: #35465e; font-size: 11.5px; font-weight: 620; }
body.lms:is(.p-app, .a-app) .cmdk-item[aria-selected="true"] a { background: #eaf5fd; color: #075f9f; }
body.lms:is(.p-app, .a-app) .cmdk-item[aria-selected="true"] .ic { color: var(--pp-blue); }
body.lms:is(.p-app, .a-app) :is(.cmdk-item .go, .cmdk-empty, .cmdk-foot) { color: #8a97a8; font-size: 10px; }
body.lms:is(.p-app, .a-app) .cmdk-foot { background: #fafbfd; border-color: var(--pp-line); }
body.lms:is(.p-app, .a-app) .m3-viewer-head h2, body.lms:is(.p-app, .a-app) .m3-keys-head h2 { font-family: inherit; font-size: 15px !important; letter-spacing: -.25px; font-weight: 760; color: var(--pp-ink); }
body.lms:is(.p-app, .a-app) .toast-region .notice { align-items: flex-start; gap: 9px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 11px;
  background: #17253d; color: #fff; box-shadow: 0 12px 36px rgba(17, 33, 55, .2); font-family: var(--pp-font); font-size: 11px; line-height: 1.5; }
body.lms:is(.p-app, .a-app) .toast-region .notice > .ic { width: 15px; height: 15px; color: #90d4ff; }
body.lms:is(.p-app, .a-app) .toast-region .notice :is(strong, a) { color: #fff; }
body.lms:is(.p-app, .a-app) .toast-region .notice-x { color: rgba(255, 255, 255, .7); }
body.lms:is(.p-app, .a-app) .toast-region .notice-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }

@media (max-width: 560px) {
}

/* ---- the same, in the dark ---- */
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main { color: var(--sw-text); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(h1, h2, h3, h4, strong, b, .lc-title, .rec-title, .rec-title a, .m3-todo-t, .m3-mat-name, .m3-person-name,
  .m3-day-label, .m3-ev-title, .cw-name, .m3-upnext-title, .m3-cred dd, .ring b):not(.pp *) { color: var(--sw-text); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.muted, .page-head p, .crumbs, .eyebrow, .m3-card-title, .m3-todo-s, .m3-mat-meta, .m3-person-role,
  .m3-day-count, .m3-ev-time, .m3-ev-sub, .m3-ev-note, .m3-reason, .m3-type, .cw-count, .cw-when, .cw-empty-day, .lc-sub, .m3-pay-sub, .rec-why,
  .m3-upnext-meta, .m3-upnext-label, .m3-subhead, .m3-cred dt, .m3-hint, .hint, .m3-empty-line, .m3-quiet-line, .tabs a, .tabs .count, .field .hint):not(.pp *) { color: var(--sw-text-muted); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.card, .m3-card, .list-card, .lh-card, .rec-card, .m3-day, .cw-topic, .m3-upnext) { background: var(--sw-surface); border-color: var(--sw-border); box-shadow: none; }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.m3-side-col .m3-card, .lc-foot, .m3-upnext .m3-creds, .m3-upnext .m3-today-mat, .m3-upnext .attend-box, .m3-mat) { background: var(--sw-surface-1); border-color: var(--sw-border); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.m3-ev, .lc-foot) { border-color: var(--sw-border); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .tabs { background: var(--sw-surface-3); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .tabs a[aria-current="page"] { background: var(--sw-surface); border-color: var(--sw-border); color: var(--sw-text); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .btn, :root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .btn:hover { background: #6FB4EA; color: #08121C; }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.btn-ghost, .btn-light, .btn-whatsapp), :root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.btn-ghost, .btn-light, .btn-whatsapp):hover {
  background: var(--sw-surface); border-color: var(--sw-border-strong); color: var(--sw-text); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.btn-text, .btn-link), :root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.btn-text, .btn-link):hover,
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main a:not([class]):not(.pp *), :root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .m3-todo-row :is(a, .btn-text) { background: transparent; color: var(--sw-brand-700); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .btn-tonal { background: var(--sw-brand-50); color: var(--sw-brand-800); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.chip, .m3-status) { background: var(--sw-surface-2); color: var(--sw-text-2); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.chip-live, .chip-cancelled, .chip-rejected, .chip-failed, .chip-revoked, .chip-not_eligible, .m3-status.is-error) { background: var(--sw-danger-bg); color: var(--sw-danger); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.chip-running, .chip-in_progress, .chip-submitted, .chip-sending, .m3-countdown, .cw-now) { background: #272240; color: #B9AEF5; }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.chip-upcoming, .chip-open, .chip-enrolled, .chip-queued, .chip-issued, .chip-valid, .chip-verified, .chip-present, .chip-approved, .chip-eligible, .chip-passed, .chip-active, .m3-status.is-ok) { background: var(--sw-success-bg); color: var(--sw-success); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.chip-pending, .chip-on_hold, .chip-rescheduled, .chip-draft, .chip-expired, .chip-recommended, .chip-superseded, .m3-status.is-warning) { background: var(--sw-warning-bg); color: var(--sw-warning); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .notice { background: var(--sw-surface); border-color: var(--sw-border); color: var(--sw-text-2); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .notice.warn { background: var(--sw-warning-bg); border-color: #5A4718; color: var(--sw-warning); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .notice.warn strong, :root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .notice.warn > .ic { color: var(--sw-warning); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.notice.info, .notice.ok) { background: var(--sw-info-bg); border-color: #2A4560; color: var(--sw-info); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .notice.error { background: var(--sw-danger-bg); border-color: #5E2E2B; color: var(--sw-danger); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.m3-linear, .progress .bar) { background: var(--sw-surface-3); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.m3-linear, .progress .bar) > span { background: linear-gradient(90deg, #6FB4EA, #8CC6F2); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :where(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=hidden], [type=submit], [type=button]), select, textarea):not(.pp *),
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .m3-search { background-color: var(--sw-surface-2); border-color: var(--sw-border-strong); color: var(--sw-text); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.m3-todo-ic, .icon-btn) { background: var(--sw-surface); border-color: var(--sw-border); color: var(--sw-text-muted); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.m3-mat-ic, .avatar) { background: var(--sw-brand-50); color: #8CC6F2; }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .eyebrow::before { box-shadow: 0 0 0 3px #272240; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .pbtn-whatsapp, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .pbtn-whatsapp:hover { background: var(--sw-surface); color: var(--sw-text); }
/* the shared parts above (metrics, charts, tables, forms, dialogs, states) in the dark */
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.stat-strip, .facts, .stat, .spark-card, .hero-card, .cta-band, .table-wrap, .chip-btn) { background: var(--sw-surface); border-color: var(--sw-border); box-shadow: none; }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.stat-strip, .facts) > div { border-color: var(--sw-border); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.stat-strip .n, .stat .n, .facts dd, .greet h1, .rpt-label, .rpt-num strong, .kv dd, table.data :is(strong, b), .empty :is(h3, .empty-title)) { color: var(--sw-text); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.stat-strip .l, .stat .l, .facts dt, .greet p, .rpt-num, .kv dt, .pager, .empty, .empty p, table.data .mono) { color: var(--sw-text-muted); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .stat.warn .n { color: var(--sw-warning); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .stat.bad .n { color: var(--sw-danger); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.spark i, .rpt-bar) { background: var(--sw-surface-3); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.spark span:last-child i, .rpt-bar > span) { background: linear-gradient(90deg, #6FB4EA, #8CC6F2); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .chip-btn { color: var(--sw-text); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .chip-btn .ic { color: #8CC6F2; }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main table.data thead th { background: var(--sw-surface-1); border-color: var(--sw-border); color: var(--sw-text-muted); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main table.data :is(td, tbody th) { border-color: var(--sw-border); color: var(--sw-text-2); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main table.data tbody tr:hover :is(td, th) { background: var(--sw-surface-2); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(input, select, textarea):is(:disabled, [readonly]) { background-color: var(--sw-surface-3); color: var(--sw-text-muted); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .empty:not(:is(.card, .m3-card, .table-wrap, .list-card, .panel) *) { background: var(--sw-surface); border-color: var(--sw-border-strong); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) dialog:is(.cmdk, .m3-viewer, .m3-keys) { background: var(--sw-surface); border-color: var(--sw-border); color: var(--sw-text); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .cmdk-item a { color: var(--sw-text-2); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .cmdk-item[aria-selected="true"] a { background: var(--sw-brand-50); color: var(--sw-brand-800); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .cmdk-foot { background: var(--sw-surface-1); border-color: var(--sw-border); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .cmdk-in input[type=text], :root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) :is(.m3-viewer-head h2, .m3-keys-head h2) { color: var(--sw-text); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .toast-region .notice { background: var(--sw-surface-3); border-color: var(--sw-border); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .topbar :is(.top-pill, .btn-light, .btn-ghost), :root[data-theme="dark"] body.lms.a-app .topbar .top-link { background: transparent; border-color: var(--sw-border); color: var(--sw-text-2); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) :is(.user-menu, .site-menu) .menu { background: var(--sw-surface); border-color: var(--sw-border); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) :is(.user-menu, .site-menu) .menu :is(a, button) { color: var(--sw-text-2); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) :is(.user-menu, .site-menu) .menu :is(a, button):hover { background: var(--sw-surface-2); color: var(--sw-text); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .user-menu .menu-head strong { color: var(--sw-text); }
:root[data-theme="dark"] body.lms.a-app .side .nav-group > summary.nav-label { color: var(--sw-text-muted); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main :is(.field label, label.lbl, label.check) { color: var(--sw-text-2); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.filter.active, .filter-button.active) .filter-count { color: inherit; }