/* ==========================================================================
   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; flex: 0 1 auto; min-width: 0; }
/* The logo used to keep its full width (flex: none) while its link shrank around it, so on a narrow
   phone it ran under the search and bell buttons. It now shrinks with the link, keeping its shape. */
body.lms:is(.p-app, .a-app) .topbar .brand-logo { flex: 0 1 auto; min-width: 0; max-width: 100%; object-fit: contain; object-position: left center; }
body.lms:is(.p-app, .a-app) .topbar .top-actions { flex: none; }
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.a-app .topbar .top-pill > .ic:last-child { display: none; }   /* the "opens elsewhere" arrow; the pill keeps its name for screen readers */
  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 phone tab bar: every label whole on the narrowest phone ----
   "Programmes" and "Certificates" were cut to "Progr…" / "Certifi…" below about 330px. The type
   now steps down with the screen (12.5px from 368px wide, never under 10px) and the icon's pill
   narrows, so each word fits its quarter of the bar. */
body.lms.p-app .tabbar a { padding-left: 2px; padding-right: 2px; }
body.lms.p-app .tabbar a span { font-size: clamp(10px, 3.4vw, 12.5px); letter-spacing: -.1px; text-overflow: clip; }
body.lms.p-app .tabbar a .ic { padding-left: clamp(8px, 4.4vw, 20px); padding-right: clamp(8px, 4.4vw, 20px); }

/* ---- 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; }
/* a name or a figure in bold inside a grey line reads darker than the line, on every page */
.pp :is(.page-subtitle, .fine-print, .response-note, .section-caption) strong { color: var(--pp-ink-2); font-weight: 740; }
.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 1 100%; }   /* the reference's flex: 1 (a zero basis) overrode its own width: 100% and kept the buttons beside the title, squeezing it */
  .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 .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; }

/* ==========================================================================
   My certificates (certificate.php) and the details to print (cert_details.php), 21 Oct 2026. No
   reference file of their own: built from the parts above — the detail layout, section heading,
   panel, help card, response note, empty state, badge and cohort rows — plus a certificate card in
   the fee card's family (its soft blue head, the search card's seal rings).
   ========================================================================== */
.pp .cert-section + .cert-section { margin-top: 26px; }
.pp .cert-section .section-header { margin-bottom: 12px; }
.pp .cert-grid, .pp .cert-pending-list { display: grid; gap: 12px; }
.pp .cert-card { 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 .cert-face { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 14px; padding: 18px 19px 16px; border-bottom: 1px solid #edf0f5;
  background: linear-gradient(135deg, rgba(239, 247, 255, .9), rgba(255, 255, 255, .95) 70%); }
.pp .cert-face::after { content: ""; position: absolute; right: -70px; top: -110px; width: 220px; height: 220px; border: 1px solid rgba(75, 140, 204, .12); border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(98, 153, 216, .035), 0 0 0 48px rgba(98, 153, 216, .025); pointer-events: none; }
.pp .cert-face > * { position: relative; z-index: 1; }
.pp .cert-seal { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border: 1px solid #dceafa; border-radius: 12px; background: #fff; color: var(--pp-blue); box-shadow: var(--pp-shadow-sm); }
.pp .cert-seal .icon { width: 21px; height: 21px; }
.pp .cert-copy { flex: 1; min-width: 0; }
.pp .cert-kicker { color: #65768d; font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.pp .cert-title { margin-top: 4px; font-size: 15px; line-height: 1.35; letter-spacing: -.25px; overflow-wrap: anywhere; }
.pp .cert-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0 0; }
.pp .cert-meta dt { color: #77869b; font-size: 9px; font-weight: 820; letter-spacing: .75px; text-transform: uppercase; }
.pp .cert-meta dd { margin: 3px 0 0; color: #22344e; font-size: 11.5px; font-weight: 740; font-variant-numeric: tabular-nums; }
.pp .cert-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .3px; }
.pp .cert-face > .badge { flex: none; }
.pp .cert-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 12px 14px; }
.pp .cert-actions .pbtn { height: 32px; padding: 0 11px; font-size: 10.5px; }
.pp .cert-actions .cert-wrong { margin-left: auto; }
.pp .pbtn .ic { width: 14px; height: 14px; flex: none; }
.pp .pbtn-linkedin .ic { color: #0a66c2; }
.pp .cert-card.is-void { border-color: var(--pp-line); box-shadow: var(--pp-shadow-sm); }
.pp .cert-card.is-void .cert-face { background: #fafbfd; }
.pp .cert-card.is-void .cert-seal { color: #8a97a8; }
.pp .badge-valid { background: var(--pp-green-bg); color: var(--pp-green); }
.pp .badge-void { background: var(--pp-red-bg); color: var(--pp-red); }
/* what is still on the way */
.pp .cert-pending .panel-head { margin-bottom: 12px; }
.pp .cert-pending h3 { font-size: 13px; overflow-wrap: anywhere; }
.pp .print-preview { display: grid; gap: 2px; padding: 12px 14px; border: 1px dashed #d6e1ee; border-radius: 10px; background: #fafcff; color: #52647d; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.pp .print-preview strong { color: var(--pp-ink); font-size: 13px; font-weight: 780; letter-spacing: -.15px; }
.pp .print-label { margin-bottom: 4px; color: #77869b; font-size: 9px; font-weight: 820; letter-spacing: .75px; text-transform: uppercase; }
.pp .cert-pending-actions { margin-top: 12px; }
.pp .cert-locked { display: flex; align-items: flex-start; gap: 7px; }
.pp .cert-locked .icon { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.pp .icon-item.is-done > .icon { color: var(--pp-green); }
.pp .icon-item.is-todo > .icon { color: #8a97a8; }
.pp :is(.icon-item, .fine-print) a { color: #0871b8; font-weight: 700; }
.pp :is(.icon-item, .fine-print) a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp .cert-pending .schedule-alert { max-width: none; }
/* the milestones beside them */
.pp .cert-progress .side-overline { margin-bottom: 6px; }
.pp .cert-progress-title { font-size: 16px; }
.pp .cert-progress-sub { margin-top: 3px; color: #718097; font-size: 10.5px; }
.pp .milestones { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; padding: 0; list-style: none; }
.pp .milestones li { display: flex; }
.pp .milestones .ms-dot { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--pp-line-2); border-radius: 50%; background: #fff; color: #718097;
  font-size: 10.5px; font-weight: 760; font-variant-numeric: tabular-nums; }
.pp .milestones li.is-done .ms-dot { background: var(--pp-blue); border-color: var(--pp-blue); color: #fff; }
.pp .milestones li.is-next .ms-dot { border: 2px solid var(--pp-blue); background: #fff; color: var(--pp-blue); font-size: 10.5px; }
.pp .cert-progress-lh { display: flex; align-items: flex-start; gap: 7px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #edf0f5; color: #52647d; font-size: 10.5px; line-height: 1.55; }
.pp .cert-progress-lh .icon { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--pp-blue); }
.pp .cert-progress-lh a { color: #0871b8; font-weight: 740; }
/* the details to print (cert_details.php): the form in a panel, what will be printed beside it */
.pp .cert-form-panel .notice { margin-bottom: 14px; }
.pp .cert-form-panel .pbtn { margin-top: 4px; }
.pp .print-card .print-preview { margin-top: 2px; }
.pp .print-card .fine-print { margin-top: 12px; padding-top: 0; border-top: 0; }
@media (max-width: 820px) and (min-width: 701px) {
  .pp .detail-layout .side-stack.is-sticky { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .pp .detail-layout > .is-first-sm { grid-row: 1; }
}
@media (max-width: 600px) {
  .pp .cert-face { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 15px; }
  .pp .cert-face > .badge { justify-self: end; }
  .pp .cert-copy { grid-column: 1 / -1; grid-row: 2; }
  .pp .cert-seal { width: 40px; height: 40px; }
  .pp .cert-actions { padding: 11px 12px; }
  .pp .cert-actions .pbtn { flex: 1 1 auto; }
  .pp .cert-actions .cert-wrong { width: 100%; margin-left: 0; text-align: center; }
}
/* My certificates in the dark */
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .cert-card { background: var(--sw-surface); border-color: var(--sw-border); box-shadow: none; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .cert-face, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .cert-card.is-void .cert-face { background: var(--sw-surface-1); border-color: var(--sw-border); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .cert-face::after { border-color: var(--sw-border); box-shadow: none; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .cert-seal { background: var(--sw-surface); border-color: var(--sw-border); color: #8CC6F2; box-shadow: none; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.cert-kicker, .cert-meta dt, .print-label, .print-preview, .cert-progress-sub, .cert-progress-lh, .icon-item.is-todo > .icon) { color: var(--sw-text-muted); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.cert-title, .cert-meta dd, .print-preview strong) { color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .print-preview { background: var(--sw-surface-1); border-color: var(--sw-border-strong); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .badge-valid, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .icon-item.is-done > .icon { background: var(--sw-success-bg); color: var(--sw-success); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .icon-item.is-done > .icon { background: none; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .badge-void { background: var(--sw-danger-bg); color: var(--sw-danger); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .milestones .ms-dot { background: var(--sw-surface); border-color: var(--sw-border-strong); color: var(--sw-text-muted); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .milestones li.is-done .ms-dot { background: #6FB4EA; border-color: #6FB4EA; color: #08121C; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .milestones li.is-next .ms-dot { background: var(--sw-surface); border-color: #6FB4EA; color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.icon-item a, .fine-print a, .cert-progress-lh a) { color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .cert-progress-lh { border-color: var(--sw-border); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .pbtn-linkedin .ic { color: #70B5F9; }

/* ==========================================================================
   Refer a colleague (referrals.php), from the owner's scrollwell_refer_colleague_redesign.html,
   21 Oct 2026: its values as they are. Two departures, both from the design rules ("green only
   ever means done"): the "Referral rewards" tag and the empty state's corner dot are brand blue,
   not green. Earned keeps its green — an earned referral is done.
   ========================================================================== */
.pp .pbtn-lg { height: auto; min-height: 41px; padding: 0 14px; border-radius: 10px; font-size: 12px; font-weight: 700; gap: 8px; }
.pp .pbtn-lg .icon { width: 16px; height: 16px; flex: none; }
.pp.refer-page .panel { border: 1px solid #dfe7f1; border-radius: 18px; background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 8px rgba(29, 57, 91, .045), 0 12px 28px rgba(29, 57, 91, .035); }
.pp.refer-page h2 { font-size: 18px; letter-spacing: -.35px; font-weight: 760; margin: 0; }
.pp .ref-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(min(330px, 100%), 1fr); gap: 22px; align-items: stretch; }
/* your link */
.pp .ref-link-panel { position: relative; overflow: hidden; padding: 25px 26px 22px; }
.pp .ref-link-panel::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #0879c9, #6fc9ed 62%, #c0d6fb); }
.pp .ref-title-row { display: flex; align-items: center; gap: 13px; margin-bottom: 7px; }
.pp .ref-tile { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border-radius: 12px; background: #eaf5fd; color: var(--pp-blue); }
.pp .ref-tile .icon { width: 21px; height: 21px; }
.pp .ref-panel-sub { margin: 0 0 23px 55px; color: #7788a0; font-size: 12px; line-height: 1.5; }
.pp .ref-label { display: block; margin: 0 0 8px; color: #435772; font-size: 12px; font-weight: 720; }
.pp .ref-pick { margin: 0; }
.pp .ref-pick .select-wrap { margin-bottom: 20px; }
.pp .ref-pick .select-wrap select { height: 44px; padding: 0 42px 0 13px; border-color: #d4dfec; border-radius: 10px; background-color: #fbfcfe; color: #243a58; font-size: 13px; }
.pp .ref-pick.is-busy .select-wrap select { opacity: .6; cursor: progress; }
.pp .ref-pick-go { margin: -10px 0 18px; }
.pp .ref-link-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pp .ref-link-row .ref-label { margin: 0; }
.pp .ref-secure { display: flex; align-items: center; gap: 5px; color: #7890a7; font-size: 10px; }
.pp .ref-secure .icon { width: 12px; height: 12px; }
.pp .url-field { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 8px 7px 12px; border: 1px solid #d7e2ef; border-radius: 11px; background: #f5f8fc; }
.pp .url-text { flex: 1; min-width: 0; color: #526c8e; font: 500 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; background: none; padding: 0; }
.pp .url-copy { height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid #c9ddee; border-radius: 8px; background: #fff; color: #225985;
  font: inherit; font-size: 12px; font-weight: 750; white-space: nowrap; cursor: pointer; }
.pp .url-copy:hover { border-color: #9ac8ed; background: #eaf5fd; }
.pp .url-copy .icon { width: 15px; height: 15px; }
.pp .share-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 15px; }
.pp .share-row .pbtn-secondary { border-color: #d2deeb; color: #3c5270; box-shadow: none; }
.pp .share-row .pbtn-secondary:hover { border-color: #b4d2ea; background: #f4f9fe; }
.pp .ref-good { margin: 17px 0 0; padding: 0; border: 0; color: #7b8da5; font-size: 11px; line-height: 1.65; }
.pp .ref-good strong { color: #536982; }
/* your points */
.pp .ref-points-panel { display: flex; flex-direction: column; padding: 24px; }
.pp .points-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pp .points-sub { margin: 5px 0 0; color: #788ba4; font-size: 12px; }
.pp .reward-tag { padding: 5px 9px; border: 1px solid #d8eafb; border-radius: 999px; background: #eaf5fd; color: #126eae; font-size: 10px; font-weight: 750; white-space: nowrap; }
.pp .points-feature { margin-top: 19px; padding: 18px; border: 1px solid #d8e8f7; border-radius: 14px; background: linear-gradient(125deg, #eef8ff 0%, #f5f9ff 65%, #f1f1fd 100%); }
.pp .points-topline { display: flex; align-items: center; gap: 14px; }
.pp .points-symbol { width: 48px; height: 48px; display: grid; place-items: center; flex: none; border: 1px solid #e0eef9; border-radius: 13px; background: #fff; color: var(--pp-blue); }
.pp .points-symbol .icon { width: 24px; height: 24px; }
.pp .points-number { color: #18304d; font-size: 30px; line-height: 1.05; letter-spacing: -1px; font-weight: 820; font-variant-numeric: tabular-nums; }
.pp .points-number span { color: #647b98; font-size: 14px; letter-spacing: 0; font-weight: 700; }
.pp .points-caption { margin-top: 5px; color: #6f829d; font-size: 11px; font-weight: 650; }
.pp .points-explain { margin: 14px 0 0; color: #607b99; font-size: 12px; line-height: 1.55; }
.pp .points-explain strong { color: #35465f; }
.pp .reward-stats { display: grid; grid-template-columns: 1fr 1fr; margin: 14px 0 0; overflow: hidden; border: 1px solid #e0e8f2; border-radius: 12px; }
.pp .reward-stat { display: flex; flex-direction: column; min-width: 0; padding: 12px 13px; }
.pp .reward-stat + .reward-stat { border-left: 1px solid #e0e8f2; }
.pp .reward-stat dd { order: -1; margin: 0; color: var(--pp-ink); font-size: 19px; line-height: 1.2; font-weight: 780; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.pp .reward-stat dt { margin-top: 4px; color: #7286a1; font-size: 10px; line-height: 1.4; }
.pp .points-held { margin: 12px 0 0; color: #607b99; font-size: 11px; line-height: 1.55; }
.pp .spend-btn { width: 100%; min-height: 43px; margin-top: 17px; }
.pp .points-footnote { margin: 12px 0 0; color: #8191a7; font-size: 10px; line-height: 1.55; }
/* colleagues you referred */
.pp .ref-people { margin-top: 22px; padding: 23px 25px 24px; }
.pp .ref-people-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.pp .ref-people-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; }
.pp .count-pill { padding: 3px 8px; border: 1px solid #e0e8f2; border-radius: 7px; background: #f0f5fb; color: #607996; font-size: 11px; font-weight: 760; }
.pp .ref-tabs { display: flex; gap: 5px; padding: 4px; border: 1px solid #e3eaf2; border-radius: 10px; background: #f4f7fb; }
.pp .ref-tab { padding: 7px 11px; border: 0; border-radius: 7px; background: transparent; color: #72839a; font: inherit; font-size: 11px; font-weight: 720; cursor: pointer; }
.pp .ref-tab[aria-selected="true"] { background: #fff; color: #126eae; box-shadow: 0 1px 3px #1c3c600f; }
.pp .ref-tab:focus-visible, .pp .url-copy:focus-visible, .pp .url-text:focus-visible { outline: 3px solid rgba(8, 121, 201, .35); outline-offset: 2px; }
.pp .ref-empty { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 18px; text-align: center;
  border: 1px dashed #d3deeb; border-radius: 15px; background: linear-gradient(140deg, #fbfdff, #f7f9fd); }
.pp .ref-empty-art { position: relative; width: 60px; height: 60px; display: grid; place-items: center; margin-bottom: 14px; border: 1px solid #d7eaf8; border-radius: 18px; background: #ebf6ff; color: #1681c9; }
.pp .ref-empty-art .icon { width: 29px; height: 29px; }
.pp .ref-empty-art::after { content: ""; position: absolute; right: -4px; top: -4px; width: 17px; height: 17px; border: 3px solid #fbfdff; border-radius: 50%; background: #d8eafb; }
.pp .ref-empty h3 { margin: 0 0 6px; font-size: 16px; letter-spacing: -.2px; }
.pp .ref-empty p { max-width: 410px; margin: 0 0 15px; color: #71849d; font-size: 12px; line-height: 1.65; }
.pp .ref-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pp .ref-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px; border: 1px solid #e0e8f1; border-radius: 12px; background: #fff; }
.pp .person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pp .person-copy { min-width: 0; }
.pp .person-avatar { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border-radius: 12px; background: #edf5fc; color: #2077b4; font-size: 12px; font-weight: 800; }
.pp .person-name { font-size: 13px; font-weight: 740; overflow-wrap: anywhere; }
.pp .person-detail { margin-top: 3px; color: #7789a2; font-size: 11px; }
.pp .row-meta { text-align: right; }
.pp .row-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: #eff5fb; color: #66809d; font-size: 10px; font-weight: 750; }
.pp .row-status.is-earned { background: #e9f8f1; color: #18805b; }
.pp .row-status.is-void { background: #f4f6f9; color: #7d8898; text-decoration: line-through; text-decoration-color: rgba(125, 136, 152, .5); }
.pp .row-points { display: block; margin-top: 5px; color: #526a87; font-size: 11px; font-weight: 720; }
.pp .ref-row.is-void .person-avatar { background: #f2f4f7; color: #8a97a8; }
.pp .ref-note { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; padding: 0 2px; color: #8a9ab0; font-size: 10px; line-height: 1.55; scroll-margin-top: 90px; }
.pp .ref-note .icon { width: 14px; height: 14px; flex: none; color: #7e96ad; }
.ref-ledger { margin-top: 22px; }
@media (max-width: 1120px) {
  .pp .ref-top { grid-template-columns: minmax(0, 1.2fr) minmax(min(300px, 100%), .85fr); }
  .pp .ref-link-panel { padding: 22px; }
  .pp .ref-points-panel { padding: 21px; }
}
@media (max-width: 900px) {
  .pp .ref-top { grid-template-columns: minmax(0, 1fr) minmax(0, .86fr); gap: 15px; }
}
@media (max-width: 680px) {
  .pp .ref-top { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pp.refer-page .panel { border-radius: 16px; }
  .pp .ref-link-panel, .pp .ref-points-panel { padding: 20px 17px; }
  .pp .ref-panel-sub { margin-left: 0; margin-bottom: 20px; }
  .pp .ref-title-row { gap: 10px; }
  .pp.refer-page h2 { font-size: 17px; }
  .pp .ref-tile { width: 39px; height: 39px; }
  .pp .url-field { align-items: stretch; flex-wrap: wrap; }
  .pp .url-text { flex-basis: 100%; padding: 3px 0; }
  .pp .url-copy { width: 100%; justify-content: center; }
  .pp .share-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp .share-row .pbtn { width: 100%; padding: 0 9px; }
  .pp .share-row .pbtn-primary { grid-column: 1 / -1; grid-row: 1; }
  .pp .points-feature { padding: 16px; }
  .pp .points-number { font-size: 28px; }
  .pp .ref-people { margin-top: 14px; padding: 19px 16px; }
  .pp .ref-people-head { align-items: flex-start; gap: 12px; }
  .pp .ref-tabs { width: 100%; justify-content: space-between; }
  .pp .ref-tab { flex: 1; padding: 8px 5px; }
  .pp .ref-empty { padding: 24px 16px; }
  .pp .ref-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pp .row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-left: 52px; text-align: left; }
  .pp .row-points { margin: 0; }
  .pp .ref-note { align-items: flex-start; }
  .pp .ref-note .icon { margin-top: 2px; }
}
@media (max-width: 360px) {
  .pp .ref-help-link { width: 100%; }
  .pp .ref-link-panel, .pp .ref-points-panel { padding: 17px 13px; }
  .pp .share-row { grid-template-columns: minmax(0, 1fr); }
  .pp .share-row .pbtn-primary { grid-column: auto; }
  .pp .reward-stats { grid-template-columns: minmax(0, 1fr); }
  .pp .reward-stat + .reward-stat { border-left: 0; border-top: 1px solid #e0e8f2; }
  .pp .url-copy { font-size: 11px; }
  .pp .ref-people { padding: 16px 12px; }
  .pp .row-meta { padding-left: 0; }
}
/* Refer a colleague in the dark */
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp.refer-page .panel, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .ref-row { background: var(--sw-surface); border-color: var(--sw-border); box-shadow: none; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.ref-tile, .points-symbol, .ref-empty-art, .person-avatar) { background: var(--sw-brand-50); border-color: var(--sw-brand-100); color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.ref-panel-sub, .ref-secure, .ref-good, .points-sub, .points-caption, .points-explain, .reward-stat dt, .points-held, .points-footnote, .ref-empty p, .person-detail, .ref-note, .ref-note .icon) { color: var(--sw-text-muted); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.ref-label, .ref-good strong, .points-explain strong, .row-points, .points-number span) { color: var(--sw-text-2); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.points-number, .reward-stat dd, .person-name, .ref-empty h3) { color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .ref-pick .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 .url-field { background: var(--sw-surface-1); border-color: var(--sw-border-strong); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .url-text { color: #A9C9E6; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .url-copy, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .share-row .pbtn-secondary { background: var(--sw-surface); border-color: var(--sw-border-strong); color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .url-copy:hover, :root[data-theme="dark"] :is(.signed-in, .a-app) .pp .share-row .pbtn-secondary:hover { background: var(--sw-surface-2); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .reward-tag { background: var(--sw-brand-50); border-color: var(--sw-brand-100); color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .points-feature { background: var(--sw-surface-1); border-color: var(--sw-border); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.reward-stats, .reward-stat + .reward-stat) { border-color: var(--sw-border); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .count-pill { background: var(--sw-surface-2); border-color: var(--sw-border); color: var(--sw-text-2); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .ref-tabs { background: var(--sw-surface-1); border-color: var(--sw-border); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .ref-tab { color: var(--sw-text-muted); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .ref-tab[aria-selected="true"] { background: var(--sw-surface-3); color: #8CC6F2; box-shadow: none; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .ref-empty { background: var(--sw-surface-1); border-color: var(--sw-border-strong); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .ref-empty-art::after { border-color: var(--sw-surface-1); background: var(--sw-brand-100); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .row-status { background: var(--sw-surface-2); color: var(--sw-text-2); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .row-status.is-earned { background: var(--sw-success-bg); color: var(--sw-success); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .row-status.is-void { color: var(--sw-text-muted); }

/* ==========================================================================
   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; min-height: 36px; padding: 0 10px; }   /* min-height: an older rule held learner text boxes at 48px beside 36px dropdowns */
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); }
/* checkboxes, radios and file pickers: two older m3 rules (".p-app input", ".m3-admin .main input")
   size EVERY input as a 36px text box, which pushed a checkbox below its label and drew a border
   round the browser's own "Choose file" button. They keep their own size here; a file picker gets
   the field look with a real secondary button inside it. */
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(input[type=checkbox], input[type=radio]):not(.pp *) { min-height: 0; border-radius: 0; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main input[type=file]:not(.pp *) { display: block; width: 100%; height: auto; min-height: 0; padding: 5px; border: 1px dashed var(--pp-line-2); border-radius: 9px;
  background-color: #fafbfd; color: var(--pp-muted); font-family: inherit; font-size: 11.5px; line-height: 27px; cursor: pointer; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main input[type=file]:not(.pp *)::file-selector-button { height: 27px; margin: 0 10px 0 0; padding: 0 11px; border: 1px solid var(--pp-line-2); border-radius: 8px;
  background: #fff; color: var(--pp-ink); font: inherit; font-weight: 600; cursor: pointer; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main input[type=file]:not(.pp *):hover::file-selector-button { border-color: #b8c6d6; background: #f7f9fc; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main input[type=file]:not(.pp *):focus-visible { outline: none; border-color: #8fc5ec; box-shadow: 0 0 0 3px rgba(8, 121, 201, .14); }
/* ---- Text size (the learner's profile menu: A / A+ / A++) scales the content column; the top bar
   and menu keep their size, so nothing in them can overflow. Learner pages only — staff have no
   text size control. (The "Make Scrollwell comfortable for you" panel was taken away, 21 Oct 2026.) ---- */
html[data-text="lg"] body.lms.p-app .main, html[data-text="lg"] .m3-viewer-head { zoom: 1.125; }
html[data-text="xl"] body.lms.p-app .main, html[data-text="xl"] .m3-viewer-head { zoom: 1.25; }

/* ---- "page not found" (lms_missing_page: 404.php and non-programme addresses), from the owner's
   scrollwell_404_error.html, 21 Oct 2026: its values as they are, on the app's page ground. ---- */
body.lms.nf-page { min-height: 100vh; display: flex; flex-direction: column; }
body.lms.nf-page .nf-header { height: 76px; display: flex; align-items: center; padding: 0 24px; border-bottom: 1px solid #e1eaf3; background: rgba(255, 255, 255, .9); }
body.lms.nf-page :is(.nf-header, .nf-footer) .nf-inner { width: min(1080px, 100%); margin: 0 auto; }
body.lms.nf-page .nf-header .brand { display: inline-flex; align-items: center; }
body.lms.p-app.nf-page .main.nf-main { flex: 1; display: grid; place-items: center; width: 100%; max-width: none; margin: 0; padding: 64px 24px 72px; }
body.lms.nf-page .pp.nf-content { width: min(590px, 100%); text-align: center; }
body.lms.nf-page .nf-icon { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 24px; border: 1px solid #d2e9fb; border-radius: 22px; background: #e8f4ff; color: var(--pp-blue); }
body.lms.nf-page .nf-icon .icon { width: 34px; height: 34px; }
body.lms.nf-page .nf-code { margin: 0; color: var(--pp-blue); font-size: clamp(4.5rem, 14vw, 7rem); font-weight: 800; letter-spacing: -.075em; line-height: .95; }
body.lms.nf-page .pp.nf-content h1 { margin: 20px 0 10px; color: #19324f; font-size: clamp(1.55rem, 4vw, 2rem); letter-spacing: -.035em; line-height: 1.2; text-wrap: balance; }
body.lms.nf-page .nf-text { max-width: 440px; margin: 0 auto; color: #64758a; font-size: 1rem; line-height: 1.7; }
body.lms.nf-page .nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
body.lms.nf-page .pp .nf-btn { height: auto; min-height: 48px; padding: 0 19px; gap: 8px; border-radius: 12px; font-size: .95rem; font-weight: 700; }
body.lms.nf-page .pp .nf-btn .icon { width: 18px; height: 18px; }
body.lms.nf-page .pp .nf-btn.pbtn-primary { box-shadow: 0 5px 14px rgba(8, 121, 201, .16); }
body.lms.nf-page .pp .nf-btn.pbtn-secondary { border-color: #d8e5f1; color: #19324f; box-shadow: none; }
body.lms.nf-page .pp .nf-btn.pbtn-secondary:hover { border-color: #9ccbed; background: #fafdff; }
body.lms.nf-page .nf-support { margin-top: 28px; color: #64758a; font-size: .92rem; }
body.lms.nf-page .nf-support a { color: var(--pp-blue); font-weight: 650; }
body.lms.nf-page .nf-footer { border-top: 1px solid #e1eaf3; background: rgba(255, 255, 255, .72); }
body.lms.nf-page .nf-footer .nf-inner { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; color: #748399; font-size: .84rem; }
body.lms.nf-page .nf-links { display: flex; flex-wrap: wrap; gap: 18px; }
body.lms.nf-page .nf-links a { color: #5a6d83; }
body.lms.nf-page .nf-links a:hover, body.lms.nf-page .nf-support a:hover { color: var(--pp-blue); text-decoration: underline; }
body.lms.nf-page :is(.nf-content, .nf-footer, .nf-header) a:focus-visible { outline: 3px solid rgba(8, 121, 201, .35); outline-offset: 3px; }
@media (max-width: 520px) {
  body.lms.nf-page .nf-header { height: 68px; padding: 0 18px; }
  body.lms.p-app.nf-page .main.nf-main { padding: 46px 20px 50px; }
  body.lms.nf-page .nf-icon { width: 64px; height: 64px; margin-bottom: 22px; border-radius: 18px; }
  body.lms.nf-page .nf-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  body.lms.nf-page .pp .nf-btn { width: 100%; }
  body.lms.nf-page .nf-footer .nf-inner { flex-direction: column; align-items: flex-start; padding: 16px 20px; }
}

/* ---- Help & FAQ: each row's own link, and a guide row's way into the guide (21 Oct 2026) ---- */
.pp .faq-answer .faq-permalink { margin: 10px 0 0; font-size: 10.5px; }
.pp .faq-answer .faq-permalink a, .pp .faq-answer .faq-more { color: #0871b8; font-weight: 700; }
.pp .faq-answer .faq-permalink a:hover, .pp .faq-answer .faq-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp .faq-item:target { scroll-margin-top: 90px; }
.pp .faq-item { scroll-margin-top: 90px; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .faq-answer :is(.faq-permalink a, .faq-more) { color: #8CC6F2; }
.prose :is(h2, h3)[id] { scroll-margin-top: 90px; }

/* ---- reading pages (lms_doc_page): the user guide, Terms, Privacy, About (21 Oct 2026) ----
   One white reading column beside a quiet contents list: no cards around the parts, no hero. On a
   phone the contents fold into "On this page", which stays under the top bar while you read. */
.pp .page-header .doc-meta { margin: 6px 0 0; color: var(--pp-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pp.doc-page .doc-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 28px; align-items: start; }
.pp.doc-page .doc-side { position: sticky; top: calc(var(--top, 66px) + 18px); display: grid; gap: 14px; max-height: calc(100vh - var(--top, 66px) - 36px); overflow-y: auto; }
.pp.doc-page .doc-search { position: relative; }
.pp.doc-page .doc-search .icon { position: absolute; left: 11px; top: 11px; width: 14px; height: 14px; color: #8190a3; pointer-events: none; }
.pp.doc-page .doc-search input { width: 100%; height: 36px; margin: 0; padding: 0 10px 0 32px; border: 1px solid var(--pp-line-2); border-radius: 9px; background: #fff; color: var(--pp-ink); font: inherit; font-size: 12px; }
.pp.doc-page .doc-search input:focus-visible { outline: none; border-color: #8fc5ec; box-shadow: 0 0 0 3px rgba(8, 121, 201, .14); }
.pp.doc-page .doc-search-status { min-height: 0; margin: 6px 2px 0; color: var(--pp-muted); font-size: 10.5px; }
.pp.doc-page .doc-search-status:empty { display: none; }
.pp.doc-page .doc-toc > summary { display: none; }
.pp.doc-page .doc-toc nav::before { content: "On this page"; display: block; margin: 0 0 6px 12px; color: #77869b; font-size: 9px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; }
.pp.doc-page .doc-toc ol { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.pp.doc-page .doc-toc a { display: block; padding: 5px 10px; border-left: 2px solid var(--pp-line); color: #53627a; font-size: 11.5px; line-height: 1.4; text-decoration: none; }
.pp.doc-page .doc-toc a:hover { border-left-color: #b8cbe0; color: var(--pp-ink); }
.pp.doc-page .doc-toc a.is-active { border-left-color: var(--pp-blue); color: #0871b8; font-weight: 700; }
.pp.doc-page .doc-toc a:focus-visible { outline: 3px solid rgba(8, 121, 201, .3); outline-offset: 1px; border-radius: 4px; }
/* the document */
.pp.doc-page .doc-body { min-width: 0; padding: 28px 34px 32px; border: 1px solid var(--pp-line); border-radius: 12px; background: #fff; color: var(--pp-ink-2); font-size: 14px; line-height: 1.7; }
.pp.doc-page .doc-body > * { max-width: 72ch; }
.pp.doc-page .doc-body :is(h2, h3) { color: var(--pp-ink); scroll-margin-top: calc(var(--top, 66px) + 20px); text-wrap: balance; }
.pp.doc-page .doc-body h2 { margin: 30px 0 8px; font-size: 18px; line-height: 1.35; font-weight: 760; letter-spacing: -.2px; }
.pp.doc-page .doc-body h3 { margin: 22px 0 6px; font-size: 15px; line-height: 1.4; font-weight: 740; }
.pp.doc-page .doc-body > :is(h2, h3):first-child, .pp.doc-page .doc-body > .lead:first-child { margin-top: 0; }
.pp.doc-page .doc-body p { margin: 0 0 12px; }
.pp.doc-page .doc-body :is(ul, ol) { margin: 0 0 12px; padding-left: 22px; }
.pp.doc-page .doc-body li { margin-bottom: 5px; }
.pp.doc-page .doc-body a { color: #0871b8; text-decoration: underline; text-underline-offset: 2px; }
.pp.doc-page .doc-body strong { color: var(--pp-ink); }
.pp.doc-page .doc-body .lead { font-size: 15px; color: var(--pp-ink); }
.pp.doc-page .doc-body .small { font-size: 12px; color: var(--pp-muted); }
.pp.doc-page .doc-body .legal-summary { max-width: 72ch; margin: 16px 0 8px; padding: 2px 18px 10px; border-radius: 10px; background: #f5f8fc; }
.pp.doc-page .doc-body .legal-summary h2 { margin: 12px 0 6px; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--pp-muted); }
.pp.doc-page .doc-body .legal-toc { display: none; }        /* the same links are the page's own contents list */
.pp.doc-page .doc-body .legal-contact { list-style: none; padding-left: 0; }
.pp.doc-page .doc-body .legal-table { max-width: none; overflow-x: auto; margin: 8px 0 14px; }
.pp.doc-page .doc-body .legal-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 13px; }
.pp.doc-page .doc-body .legal-table :is(th, td) { padding: 9px 11px; border-bottom: 1px solid var(--pp-line); text-align: left; vertical-align: top; }
.pp.doc-page .doc-body .legal-table th { background: #f5f8fc; color: var(--pp-ink); font-weight: 700; }
.pp.doc-page .doc-body mark.doc-hit { padding: 0 1px; border-radius: 3px; background: #fff0b3; color: inherit; }
.pp.doc-page .doc-body mark.doc-hit.is-current { background: #ffd66b; box-shadow: 0 0 0 2px #e0a800; }
.pp.doc-page > .newsletter, .pp.doc-page > :not(.doc-layout) { margin-top: 22px; }
@media (max-width: 900px) {
  .pp.doc-page .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pp.doc-page .doc-side { display: contents; }
  .pp.doc-page .doc-toc { position: sticky; top: var(--top, 60px); z-index: 4; border: 1px solid var(--pp-line); border-radius: 10px; background: #fff; box-shadow: 0 4px 14px rgba(23, 44, 70, .06); }
  .pp.doc-page .doc-toc > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; cursor: pointer; list-style: none; }
  .pp.doc-page .doc-toc > summary::-webkit-details-marker { display: none; }
  .pp.doc-page .doc-toc > summary::after { content: none; display: none; }   /* the app's "+" for <details>: this one has its chevron */
  .pp.doc-page .doc-toc-label { flex: none; color: #77869b; font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
  .pp.doc-page .doc-toc-current { flex: 1; min-width: 0; overflow: hidden; color: var(--pp-ink); font-size: 12.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
  .pp.doc-page .doc-toc-chevron { flex: none; width: 16px; height: 16px; color: #8190a3; transition: transform .15s; }
  .pp.doc-page .doc-toc[open] .doc-toc-chevron { transform: rotate(180deg); }
  .pp.doc-page .doc-toc > summary:focus-visible { outline: 3px solid rgba(8, 121, 201, .3); outline-offset: -3px; border-radius: 10px; }
  .pp.doc-page .doc-toc nav { max-height: 55vh; overflow-y: auto; padding: 2px 6px 10px; border-top: 1px solid var(--pp-line); }
  .pp.doc-page .doc-toc nav::before { display: none; }
  .pp.doc-page .doc-toc a { min-height: 40px; display: flex; align-items: center; font-size: 13px; }
  .pp.doc-page .doc-search input { height: 44px; font-size: 14px; }
  .pp.doc-page .doc-search .icon { top: 15px; }
  .pp.doc-page .doc-body { padding: 20px 18px 24px; font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { .pp.doc-page .doc-toc-chevron { transition: none; } }
/* reading pages in the dark (signed in) */
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp.doc-page .doc-body { background: var(--sw-surface); border-color: var(--sw-border); color: var(--sw-text-2); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp.doc-page .doc-body :is(h2, h3, strong, .lead) { color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp.doc-page .doc-body :is(.small, .legal-summary h2) { color: var(--sw-text-muted); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp.doc-page .doc-body a { color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp.doc-page .doc-body :is(.legal-summary, .legal-table th) { background: var(--sw-surface-1); color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp.doc-page .doc-body .legal-table :is(th, td) { border-color: var(--sw-border); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp.doc-page .doc-body mark.doc-hit { background: #5a4a12; color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp.doc-page .doc-body mark.doc-hit.is-current { background: #8a6d10; box-shadow: 0 0 0 2px #f0cf8a; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp.doc-page .doc-search input { background: var(--sw-surface-2); border-color: var(--sw-border-strong); color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp.doc-page .doc-toc a { border-left-color: var(--sw-border); color: var(--sw-text-muted); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp.doc-page .doc-toc a:hover { color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp.doc-page .doc-toc a.is-active { border-left-color: #6FB4EA; color: #8CC6F2; }
@media (max-width: 900px) { :root[data-theme="dark"] :is(.signed-in, .a-app) .pp.doc-page .doc-toc { background: var(--sw-surface); border-color: var(--sw-border); box-shadow: none; } }
@media (min-width: 901px) { :root[data-theme="dark"] :is(.signed-in, .a-app) .pp.doc-page .doc-toc { padding: 0; border: 0; background: transparent; box-shadow: none; } }
@media (min-width: 901px) { .pp.doc-page .doc-toc { padding: 0; border: 0; background: transparent; box-shadow: none; } }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp.doc-page .doc-toc-current { color: var(--sw-text); }

/* ---- Learning Hours (learning_hours.php), from the owner's scrollwell_learning_hours.html, 21 Oct 2026 ---- */
.pp.lh-page { display: grid; gap: 20px; margin-bottom: 22px; }
.pp .lh-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(min(290px, 100%), .8fr); gap: 20px; align-items: stretch; }
.pp .lh-card { min-width: 0; padding: clamp(20px, 3vw, 30px); border: 1px solid #dfe7f1; border-radius: 20px; background: rgba(255, 255, 255, .96); box-shadow: 0 2px 8px rgba(29, 57, 91, .045), 0 12px 28px rgba(29, 57, 91, .035); }
.pp .lh-progress { position: relative; overflow: hidden; }
.pp .lh-progress::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #0879c9 0%, #64c2e8 58%, #b9c7fa 100%); }
.pp .lh-card-head, .pp .lh-comm-head { display: flex; align-items: flex-start; gap: 14px; }
.pp .lh-head-copy { flex: 1; min-width: 0; }
.pp .lh-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: none; border-radius: 14px; background: #eaf5fd; color: var(--pp-blue); }
.pp .lh-icon .icon { width: 22px; height: 22px; }
.pp .lh-card h2 { margin: 1px 0 5px; font-size: 17px; letter-spacing: -.3px; }
.pp .lh-card-head p, .pp .lh-comm-head p { margin: 0; color: #66788f; font-size: 12.5px; line-height: 1.6; }
.pp .lh-pill { padding: 6px 10px; border: 1px solid #f0dfb6; border-radius: 999px; background: #fff8e8; color: #8a5a00; font-size: 10.5px; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.pp .lh-pill.is-unlocked { border-color: #cfeede; background: #e9f8f1; color: #11835b; }
.pp .lh-meter { margin-top: 24px; }
.pp .lh-meter-label { display: flex; justify-content: space-between; gap: 12px; color: #405674; font-size: 12.5px; font-weight: 750; }
.pp .lh-meter-label strong { color: var(--pp-blue); }
.pp .lh-track { height: 9px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: #eaf0f7; }
.pp .lh-track > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0879c9, #42b3e5); }
.pp .lh-milestones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.pp .lh-milestone { padding: 13px; border: 1px solid #e0e8f2; border-radius: 14px; background: #fbfdff; }
.pp .lh-milestone.is-done { border-color: #cceadf; background: #f5fcf8; }
.pp .lh-mark { width: 28px; height: 28px; display: grid; place-items: center; margin-bottom: 9px; border-radius: 9px; background: #eaf5fd; color: var(--pp-blue); font-size: 12px; font-weight: 850; }
.pp .lh-milestone.is-done .lh-mark { background: #dff6eb; color: #11835b; }
.pp .lh-mark .icon { width: 15px; height: 15px; }
.pp .lh-milestone strong { display: block; color: #2d4260; font-size: 12.5px; }
.pp .lh-milestone > span:last-child { display: block; margin-top: 3px; color: #66788f; font-size: 11.5px; }
.pp .lh-note { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 0; padding: 14px 15px; border: 1px solid #dceafa; border-radius: 13px; background: linear-gradient(110deg, #f0f8ff, #f4f6ff); color: #4d6786; font-size: 12.5px; line-height: 1.6; }
.pp .lh-note .icon { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--pp-blue); }
.pp .lh-note strong { color: #234b70; }
.pp .lh-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pp .lh-benefit { display: flex; flex-direction: column; }
.pp .lh-benefit-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pp .lh-tag { padding: 5px 9px; border: 1px solid #d7eafa; border-radius: 999px; background: #eaf5fd; color: #1f6ea5; font-size: 10.5px; font-weight: 800; text-transform: uppercase; }
.pp .lh-visual { display: grid; place-items: center; min-height: 150px; margin: 18px 0 16px; border: 1px solid #d9e9f8; border-radius: 17px; background: linear-gradient(135deg, #eaf7ff 0%, #edf4ff 58%, #f5f1ff 100%); }
.pp .lh-hour { width: 88px; height: 88px; display: grid; place-items: center; border-radius: 26px; background: rgba(255, 255, 255, .8); color: var(--pp-blue); box-shadow: 0 8px 30px rgba(43, 103, 155, .1); }
.pp .lh-hour .icon { width: 46px; height: 46px; }
.pp .lh-benefit-title { margin: 0 0 6px; color: #193654; font-size: 21px; font-weight: 850; letter-spacing: -.6px; }
.pp .lh-benefit-copy, .pp .lh-foot { margin: 0; color: #66788f; font-size: 12.5px; line-height: 1.65; }
.pp .lh-benefit-list { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; color: #4c6180; font-size: 12.5px; }
.pp .lh-benefit-list li { display: flex; gap: 9px; align-items: flex-start; }
.pp .lh-benefit-list .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #11835b; }
.pp .lh-foot { margin-top: auto; padding-top: 16px; font-size: 11.5px; }
.pp .lh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; }
.pp .lh-stats > div { display: flex; flex-direction: column; padding: 14px; border: 1px solid #e2eaf3; border-radius: 13px; background: #fbfdff; }
.pp .lh-stats dd { order: -1; margin: 0; color: #173d61; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp .lh-stats dt { margin-top: 4px; color: #66788f; font-size: 11.5px; line-height: 1.45; }
.pp .lh-empty { margin: 14px 0 0; color: #66788f; font-size: 12.5px; }
.pp .lh-people-h { margin: 18px 0 8px; font-size: 13px; color: #304865; }
.pp .lh-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pp .lh-people li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid #e0e8f2; border-radius: 12px; background: #fff; color: #30445f; font-size: 12.5px; font-weight: 700; }
.pp .lh-person-ic { width: 32px; height: 32px; display: grid; place-items: center; flex: none; border-radius: 10px; background: #e3f3ff; color: #1d6eaa; font-weight: 850; }
.pp .lh-person-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: #11835b; font-size: 11px; font-weight: 800; }
.pp .lh-person-tag .icon { width: 13px; height: 13px; }
.pp .lh-consent { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e7edf4; }
.pp .lh-consent p { flex: 1 1 260px; margin: 0; color: #66788f; font-size: 12px; line-height: 1.55; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .lh-people li { background: var(--sw-surface-1); border-color: var(--sw-border); color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .lh-person-ic { background: var(--sw-brand-50); color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.lh-consent p, .lh-people-h) { color: var(--sw-text-muted); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .lh-consent { border-color: var(--sw-border); }
.pp .lh-how { padding: 16px 18px; border: 1px dashed #cbd8e6; border-radius: 12px; color: #4c6180; font-size: 12.5px; line-height: 1.65; }
.pp .lh-how h2 { margin: 0 0 6px; font-size: 14px; }
.pp .lh-how ol { margin: 0; padding-left: 20px; }
@media (max-width: 760px) {
  .pp .lh-grid { grid-template-columns: minmax(0, 1fr); }
  .pp .lh-card-head { flex-wrap: wrap; }
  .pp .lh-stats { grid-template-columns: minmax(0, 1fr); }
  .pp .lh-actions .pbtn { flex: 1 1 100%; min-height: 44px; }
}
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.lh-card, .lh-milestone, .lh-stats > div) { background: var(--sw-surface); border-color: var(--sw-border); box-shadow: none; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.lh-note, .lh-visual) { background: var(--sw-surface-1); border-color: var(--sw-border); color: var(--sw-text-2); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.lh-card h2, .lh-milestone strong, .lh-benefit-title, .lh-stats dd, .lh-note strong, .lh-meter-label) { color: var(--sw-text); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.lh-card-head p, .lh-comm-head p, .lh-benefit-copy, .lh-foot, .lh-stats dt, .lh-empty, .lh-how, .lh-milestone > span:last-child, .lh-benefit-list) { color: var(--sw-text-muted); }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.lh-icon, .lh-mark, .lh-hour, .lh-tag) { background: var(--sw-brand-50); border-color: var(--sw-brand-100); color: #8CC6F2; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp .lh-track { background: var(--sw-surface-3); }

/* ---- an "add something" panel (details.add-panel: Add material on every Classroom card) ----
   It had no padding of its own (the plus touched its border) and looked like any other box. Now it
   reads as a place to add: a dashed outline, the plus in a soft blue square, a line saying what it
   adds, a chevron that turns when it opens, and the form inside with room around it. */
body.lms:is(.p-app, .a-app):not(.auth-split) .main details.add-panel { margin: 14px 0 0; padding: 0; border: 1px dashed #c9d8e8; border-radius: 12px; background: rgba(250, 252, 255, .7); overflow: hidden; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main details.add-panel:hover { border-color: #9fc3e3; background: #f7fbff; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main details.add-panel[open] { border-style: solid; border-color: var(--pp-line); background: #fff; box-shadow: var(--pp-shadow-sm); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main details.add-panel > summary { display: flex; align-items: center; gap: 11px; min-height: 54px; margin: 0; padding: 10px 14px; border: 0; border-radius: 0;
  color: #0871b8; font-family: inherit; list-style: none; cursor: pointer; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main details.add-panel > summary::-webkit-details-marker { display: none; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main details.add-panel > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 3px auto; border-right: 1.75px solid #8090a4;
  border-bottom: 1.75px solid #8090a4; font-size: 0; transform: rotate(45deg); transition: transform .18s var(--pp-ease); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main details.add-panel[open] > summary::after { margin-bottom: -3px; transform: rotate(-135deg); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main details.add-panel[open] > summary { border-bottom: 1px solid var(--pp-line); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main details.add-panel > summary:focus-visible { outline: 3px solid rgba(8, 121, 201, .28); outline-offset: -3px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .add-panel-ic { width: 32px; height: 32px; display: grid; place-items: center; flex: none; border: 1px solid #dceafa; border-radius: 9px; background: var(--pp-blue-wash); color: var(--pp-blue); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .add-panel-ic .ic { width: 15px; height: 15px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .add-panel-txt { display: grid; gap: 1px; min-width: 0; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .add-panel-txt strong { color: #0871b8; font-size: 11.5px; font-weight: 760; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .add-panel-txt small { color: #5f6f86; font-size: 10px; font-weight: 500; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main details.add-panel > form { margin: 0; padding: 16px 16px 14px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main details.add-panel > form > .btn { margin-top: 4px; }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main details.add-panel { background: var(--sw-surface-1); border-color: var(--sw-border-strong); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main details.add-panel[open] { background: var(--sw-surface); border-color: var(--sw-border); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .add-panel-ic { background: var(--sw-brand-50); border-color: var(--sw-brand-100); color: #8CC6F2; }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .add-panel-txt strong { color: #8CC6F2; }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main .add-panel-txt small { color: var(--sw-text-muted); }

/* ---- narrow screens, every page (21 Oct 2026): nothing pushes a card or the page sideways ----
   A long link, file name or ID breaks onto the next line when it would otherwise overflow its box —
   ordinary words never split (break-word, not break-all, and it does not change how narrow a column
   may get). Pictures and frames stay inside their column. A button's label may take two lines on a
   phone rather than run past the edge of its card. */
/* A list grid with no column template sizes its one column to its widest unbreakable line (a date
   beside a "View cohort" button, a "Something wrong?" link). On a 320px phone with A++ text that
   was 31px wider than the screen. The column may shrink; the rows wrap instead. */
.pp :is(.cohorts, .cert-grid, .cert-pending-list) { grid-template-columns: minmax(0, 1fr); }
.pp .cohort-right { flex-wrap: wrap; }
.pp .cohort { flex-wrap: wrap; }                 /* no room for the text beside the date and button: they go under it */
.pp .cohort-left { flex: 1 1 16em; }
.pp .cert-actions .cert-wrong { white-space: normal; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main { overflow-wrap: break-word; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(img, video, iframe) { max-width: 100%; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.btn, .chip-btn), .pp .pbtn { max-width: 100%; }
@media (max-width: 480px) {
  body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.btn, .chip-btn):not(table .btn) { height: auto; padding-top: 7px; padding-bottom: 7px; line-height: 1.25; white-space: normal; text-align: center; }   /* their min-height keeps them full size */
}
/* the Classroom's materials: one column that may shrink (a grid with no column size grew to the full
   width of the longest title and pushed every row past its card), and a title that wraps instead of
   being cut off */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-mats { grid-template-columns: minmax(0, 1fr); }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-mats > li { min-width: 0; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-mat-name { overflow: visible; white-space: normal; text-overflow: clip; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .m3-mat-meta { overflow-wrap: anywhere; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main :is(.cw-count, .cw-when) { white-space: nowrap; }
/* a material row on the staff Classroom: type, then the title and file, then its buttons. The buttons
   could not wrap, so on a phone they squeezed the title to one letter a line; now they get their
   own column on a wide screen and their own line under the title on a narrow one */
body.lms:is(.p-app, .a-app):not(.auth-split) .main .res-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .res-item > .res-main { min-width: 0; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .res-item > .row { flex-wrap: wrap; justify-content: flex-end; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .res-main strong { overflow-wrap: break-word; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main .res-main .small { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  body.lms:is(.p-app, .a-app):not(.auth-split) .main .res-item { grid-template-columns: auto minmax(0, 1fr); }
  body.lms:is(.p-app, .a-app):not(.auth-split) .main .res-item > .row { grid-column: 2; justify-content: flex-start; }
}

/* 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; }
/* On a phone a wide table scrolls sideways inside its frame, and the browser shares out the width by
   squeezing the shortest columns: a name went down to one word a line, "Any time" to 21px. A name keeps
   a readable width (it still wraps after that), and an ID or a short note stays on one line. */
body.lms:is(.p-app, .a-app):not(.auth-split) .main table.data td:not(.num, .money) > :is(strong, b) { display: inline-block; min-width: 8em; }
/* A column of running text (a note, a reason: td.col-text) keeps a readable width the same way. */
body.lms:is(.p-app, .a-app):not(.auth-split) .main table.data td.col-text { min-width: 12em; }
body.lms:is(.p-app, .a-app):not(.auth-split) .main table.data :is(.mono, td > span.muted, .tnum) { white-space: nowrap; }
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 input[type=file]:not(.pp *) { background-color: var(--sw-surface-2); border-color: var(--sw-border-strong); color: var(--sw-text-muted); }
:root[data-theme="dark"] body.lms:is(.p-app.signed-in, .a-app) .main input[type=file]:not(.pp *)::file-selector-button { 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(.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; }
:root[data-theme="dark"] :is(.signed-in, .a-app) .pp :is(.page-subtitle, .fine-print, .response-note, .section-caption) strong { color: var(--sw-text); }

/* ==========================================================================
   Sign-in pages (lms_auth_open/close: admin/login.php and its code steps, admin/set_password.php,
   otp.php), ported as they are from scrollwell_admin_login.html and scrollwell_admin_otp.html
   (21 Oct 2026): their header, layout, type, card, fields, code boxes, buttons, links and footer.
   The real logo stands in for the files' drawn one; their pop-up notices became the pages' own
   messages. Scoped to body.auth-page.
   ========================================================================== */
/* the header */
body.lms.auth-page .topbar.auth-bar { height: 76px; padding: 0 clamp(18px, 4vw, 54px); gap: 18px; background: rgba(255, 255, 255, .93) !important;
  border-bottom: 1px solid rgba(216, 225, 236, .92); }
body.lms.auth-page .topbar.auth-bar .brand { gap: 15px; }
body.lms.auth-page .topbar.auth-bar .brand-logo { height: 42px; }
body.lms.auth-page .topbar.auth-bar .brand-sub { display: inline-flex; gap: 15px; color: #53647a; font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
body.lms.auth-page .topbar.auth-bar .brand-sub::before { height: 25px; background: #d4deea; }
body.lms.auth-page .participant-link { display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 9px; color: #465870; font-size: 12px; font-weight: 650;
  white-space: nowrap; text-decoration: none; transition: background .16s, color .16s; }
body.lms.auth-page .participant-link:hover { background: #f1f8fd; color: #075f9e; text-decoration: none; }
body.lms.auth-page :is(.participant-link, .secure-label) .icon { width: 17px; height: 17px; }
body.lms.auth-page .secure-label { display: inline-flex; align-items: center; gap: 8px; color: #52637a; font-size: 12px; font-weight: 600; white-space: nowrap; }
body.lms.auth-page .secure-label .icon { color: var(--pp-blue); }
/* the page */
body.lms:is(.p-app, .a-app).auth-page .main { display: grid; place-items: center; max-width: none; min-height: calc(100vh - 76px - 52px); padding: 54px 24px 42px; }
.pp.auth-layout { width: min(100%, 1040px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: clamp(36px, 7vw, 94px); align-items: center; color: var(--pp-ink); font-size: 14px; }
.pp .auth-intro { max-width: 460px; padding: 18px 0 28px; }
.pp .auth-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 19px; color: #075f9e; font-size: 11px; font-weight: 750; letter-spacing: .85px; text-transform: uppercase; }
.pp .auth-eyebrow-mark { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-blue); box-shadow: 0 0 0 4px rgba(8, 121, 201, .09); }
.pp .auth-intro h1 { max-width: 460px; margin: 0 0 18px; font-size: clamp(33px, 4vw, 48px); line-height: 1.11; letter-spacing: -1.8px; font-weight: 780; }
.pp .auth-intro h1 .accent { color: var(--pp-blue); }
.pp .auth-intro-copy { max-width: 420px; margin: 0; color: var(--pp-muted); font-size: 15px; line-height: 1.85; }
.pp .trust-list { display: grid; gap: 15px; margin: 31px 0 0; padding: 0; list-style: none; }
.pp .trust-list li { display: flex; align-items: center; gap: 12px; color: #52637a; font-size: 12.5px; font-weight: 550; }
.pp .trust-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border: 1px solid #dcecf8; border-radius: 11px; background: rgba(255, 255, 255, .85); color: var(--pp-blue); }
.pp .trust-icon .icon { width: 17px; height: 17px; }
/* the card */
.pp .form-card { width: 100%; min-width: 0; padding: clamp(25px, 3vw, 35px); border: 1px solid #dfe6ef; border-radius: 20px; background: rgba(255, 255, 255, .97);
  box-shadow: 0 18px 48px rgba(34, 61, 95, .08), 0 2px 8px rgba(34, 61, 95, .035); }
.pp .form-card .card-top { display: flex; align-items: center; gap: 13px; margin-bottom: 23px; padding: 0; }
.pp .card-icon { width: 45px; height: 45px; display: grid; place-items: center; flex: none; border: 1px solid #e0f0fb; border-radius: 13px; background: #eaf5fd; color: #075f9e; }
.pp .card-icon .icon { width: 22px; height: 22px; }
.pp .card-heading { min-width: 0; }
.pp .card-heading h2 { margin: 0 0 4px; font-size: 22px; line-height: 1.25; letter-spacing: -.55px; font-weight: 760; }
.pp .card-heading p { margin: 0; color: var(--pp-muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.pp .card-heading p strong { color: var(--pp-ink-2); }
.pp .form-notice { margin: 0 0 17px; padding: 11px 12px; border: 1px solid; border-radius: 10px; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.pp .form-notice.info { background: #eef7fd; border-color: #d6ebfa; color: #185c8a; }
.pp .form-notice.error { background: #fff1f1; border-color: #f4d5d6; color: #9b3037; }
.pp .form-notice.success { background: #effaf3; border-color: #d1efd9; color: #17653b; }
.pp .form-notice.warn { background: #fffaf0; border-color: #f0dfb4; color: #7d570c; }
.pp .form-notice strong { color: inherit; }
body.lms:is(.p-app, .a-app).auth-page .main .pp .form-card .field { margin: 0 0 17px; }
.pp .form-card .field-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
body.lms:is(.p-app, .a-app).auth-page .main .pp .form-card label { display: block; margin: 0; color: #293b54; font-size: 12px; font-weight: 720; }
.pp .form-card .required { margin-left: 2px; color: #ce4149; }
.pp .input-wrap { position: relative; }
.pp .input-wrap .input-icon { position: absolute; top: 50%; left: 14px; width: 17px; height: 17px; color: #8a9bb0; transform: translateY(-50%); pointer-events: none; }
body.lms:is(.p-app, .a-app).auth-page .main .pp .form-card .text-input { display: block; width: 100%; height: 49px; min-height: 49px; margin: 0; padding: 0 45px 0 42px; border: 1px solid #d3ddea; border-radius: 10px; background: #fff;
  color: var(--pp-ink); font: inherit; font-size: 13px; box-shadow: 0 1px 2px rgba(31, 48, 72, .025); transition: border-color .15s, box-shadow .15s, background .15s; }
.pp .form-card .text-input::placeholder { color: #9ba7b7; }
.pp .form-card .text-input:hover { border-color: #bdcddd; }
.pp .form-card .text-input:focus { outline: none; border-color: #7bb9e3; box-shadow: 0 0 0 3px rgba(8, 121, 201, .095); }
.pp .password-toggle { position: absolute; top: 50%; right: 7px; width: 35px; height: 35px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: #71839a; transform: translateY(-50%); }
.pp .password-toggle:hover { background: #f0f7fc; color: #075f9e; }
.pp .password-toggle .icon { width: 18px; height: 18px; }
.pp .password-toggle .pw-hide, .pp .password-toggle[aria-pressed="true"] .pw-show { display: none; }
.pp .password-toggle[aria-pressed="true"] .pw-hide { display: block; }
.pp .section-label { display: block; margin-bottom: 10px; color: #293b54; font-size: 12px; font-weight: 720; }
/* the code: six boxes (lms.js builds them; without it, the one field below them in their look) */
.pp .otp-group { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
body.lms.auth-page .pp :is(.otp-digit, .otp-input) { width: 100%; min-width: 0; min-height: 0; height: 54px; padding: 0; border: 1px solid #d3ddea; border-radius: 11px; background: #fff; color: var(--pp-ink);
  font: inherit; font-size: 22px; font-weight: 750; text-align: center; caret-color: var(--pp-blue); box-shadow: 0 1px 2px rgba(31, 48, 72, .025);
  transition: border-color .15s, box-shadow .15s, background .15s; }
.pp .otp-input { margin-bottom: 12px; letter-spacing: .4em; }
body.lms.auth-page .pp :is(.otp-digit, .otp-input):hover { border-color: #bdcddd; }
body.lms.auth-page .pp :is(.otp-digit, .otp-input):focus { outline: none; border-color: #7bb9e3; box-shadow: 0 0 0 3px rgba(8, 121, 201, .095); }
body.lms.auth-page .pp .otp-digit[aria-invalid="true"] { border-color: #d96c73; background: #fffafa; }
.pp .helper { margin: 0 0 20px; color: var(--pp-muted); font-size: 11px; line-height: 1.65; }
/* buttons and links */
.pp .primary-btn { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 4px; border: 1px solid var(--pp-blue);
  border-radius: 10px; background: var(--pp-blue); color: #fff; font: inherit; font-size: 13px; font-weight: 750; text-decoration: none; box-shadow: 0 4px 10px rgba(8, 121, 201, .12);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s; }
.pp .primary-btn:hover { background: var(--pp-blue-hover); border-color: var(--pp-blue-hover); color: #fff; box-shadow: 0 6px 14px rgba(8, 121, 201, .18); text-decoration: none; }
.pp .primary-btn:active { transform: translateY(1px); }
.pp .primary-btn .icon { width: 17px; height: 17px; }
.pp .primary-btn:disabled { opacity: 1; cursor: progress; }
.pp .primary-btn.is-loading { position: relative; color: transparent; }
.pp .primary-btn.is-loading > * { visibility: hidden; }
.pp .primary-btn.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255, 255, 255, .5);
  border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.pp .secondary-btn { display: inline-flex; align-items: center; height: 37px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #075f9e;
  font: inherit; font-size: 12px; font-weight: 700; text-decoration: none; }
.pp .secondary-btn:hover:not(:disabled) { background: #f0f7fc; color: #075f9e; text-decoration: underline; text-underline-offset: 3px; }
.pp .secondary-btn:disabled { color: #8c9bad; cursor: not-allowed; }
.pp .resend-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 13px 0 0; }
.pp .resend-row form { margin: 0; }
.pp .resend-caption { color: var(--pp-muted); font-size: 11px; }
.pp .card-links { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #edf1f5; }
.pp .text-link { color: #075f9e; font-size: 12px; font-weight: 650; }
.pp .text-link:hover { color: #075f9e; text-decoration: underline; text-underline-offset: 3px; }
.pp .card-links-note { color: #8190a3; font-size: 11px; }
.pp .card-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 19px; color: #8190a3; font-size: 10.5px; line-height: 1.6; }
.pp .card-note .icon { width: 15px; height: 15px; flex: none; margin-top: 1px; color: #6b8fab; }
/* the sign-in card (scrollwell_admin_login.html) draws its rule above the note, not above the links */
.pp .form-card.is-login .card-links { padding-top: 0; border-top: 0; }
.pp .form-card.is-login .card-note { margin-top: 21px; padding-top: 17px; border-top: 1px solid #edf1f5; }
body.lms.auth-page .auth-footer { position: relative; padding: 0 18px 24px; color: #8a97a9; font-size: 10.5px; text-align: center; }
@media (max-width: 800px) {
  body.lms.auth-page .topbar.auth-bar { height: 66px; padding: 0 20px; }
  body.lms.auth-page .topbar.auth-bar .brand-logo { height: 36px; }
  body.lms.auth-page .topbar.auth-bar .brand-sub { display: inline-flex; font-size: 9px; }
  body.lms.auth-page .topbar.auth-bar .brand-sub::before { height: 21px; }
  body.lms:is(.p-app, .a-app).auth-page .main { min-height: calc(100vh - 66px - 52px); padding: 36px 20px 28px; }
  .pp.auth-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; width: min(100%, 470px); }
  .pp .auth-intro { max-width: none; padding: 2px 0 0; text-align: center; }
  .pp .auth-eyebrow { margin-bottom: 12px; }
  .pp .auth-intro h1 { max-width: 100%; margin-bottom: 10px; font-size: clamp(29px, 5.7vw, 38px); letter-spacing: -1.2px; }
  .pp .auth-intro-copy { max-width: 430px; margin: 0 auto; font-size: 13px; line-height: 1.7; }
  .pp .trust-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
  .pp .trust-list li { gap: 6px; padding: 6px 9px; border: 1px solid rgba(220, 230, 240, .8); border-radius: 999px; background: rgba(255, 255, 255, .62); font-size: 10px; }
  .pp .trust-icon { width: 19px; height: 19px; border: 0; background: transparent; }
  .pp .trust-icon .icon { width: 15px; height: 15px; }
  .pp .form-card { padding: 26px; border-radius: 17px; }
}
@media (max-width: 430px) {
  body.lms.auth-page .topbar.auth-bar { height: 60px; padding: 0 14px; gap: 8px; }
  body.lms.auth-page .topbar.auth-bar .brand { gap: 10px; }
  body.lms.auth-page .topbar.auth-bar .brand-logo { height: 31px; }
  body.lms.auth-page .topbar.auth-bar .brand-sub { gap: 10px; font-size: 8px; letter-spacing: .8px; }
  body.lms.auth-page .topbar.auth-bar .brand-sub::before { height: 19px; }
  body.lms.auth-page .participant-link { gap: 0; padding: 8px; font-size: 0; }
  body.lms.auth-page .participant-link .icon { width: 18px; height: 18px; }
  body.lms.auth-page .secure-label { gap: 0; font-size: 0; }
  body.lms.auth-page .secure-label .icon { width: 18px; height: 18px; }
  body.lms:is(.p-app, .a-app).auth-page .main { min-height: calc(100vh - 60px - 52px); padding: 24px 14px; place-items: start center; }
  .pp.auth-layout { gap: 21px; }
  .pp .auth-intro { padding-top: 3px; }
  .pp .auth-eyebrow { margin-bottom: 10px; font-size: 9.5px; }
  .pp .auth-intro h1 { font-size: 30px; line-height: 1.13; }
  .pp .intro-copy { font-size: 12px; }
  .pp .trust-list { display: none; }
  .pp .form-card { padding: 22px 19px; border-radius: 15px; }
  .pp .form-card .card-top { gap: 10px; margin-bottom: 20px; }
  .pp .card-icon { width: 39px; height: 39px; border-radius: 11px; }
  .pp .card-heading h2 { font-size: 20px; }
  .pp .card-heading p { font-size: 11px; }
  body.lms:is(.p-app, .a-app).auth-page .main .pp .form-card .text-input { height: 47px; min-height: 47px; }
  .pp .primary-btn { height: 47px; }
  .pp .otp-group { gap: 6px; }
  body.lms.auth-page .pp :is(.otp-digit, .otp-input) { height: 49px; border-radius: 9px; font-size: 20px; }
  .pp .card-links { margin-top: 17px; }
  .pp .card-note { margin-top: 16px; font-size: 10px; }
  .pp .resend-row { align-items: flex-start; }
}
@media (max-width: 350px) {
  .pp .otp-group { gap: 4px; }
  body.lms.auth-page .pp :is(.otp-digit, .otp-input) { height: 45px; font-size: 18px; }
  .pp .form-card { padding: 19px 15px; }
  .pp .card-heading h2 { font-size: 18px; }
}
/* staff may have chosen the dark theme in the console; the sign-in pages follow it (a learner's are always light) */
:root[data-theme="dark"] body.lms.a-app.auth-page { background: var(--sw-page); }
:root[data-theme="dark"] body.lms.a-app.auth-page .topbar.auth-bar { background: rgba(21, 23, 28, .88) !important; border-color: var(--sw-border); }
:root[data-theme="dark"] .a-app.auth-page :is(.participant-link, .secure-label, .auth-footer) { color: var(--sw-text-muted); }
:root[data-theme="dark"] .a-app .pp :is(.form-card) { background: var(--sw-surface); border-color: var(--sw-border); box-shadow: none; }
:root[data-theme="dark"] .a-app .pp :is(.auth-intro-copy, .trust-list li, .card-heading p, .helper, .resend-caption, .card-links-note, .card-note) { color: var(--sw-text-muted); }
:root[data-theme="dark"] .a-app .pp :is(.auth-intro h1, .card-heading h2, .form-card label, .section-label, .card-heading p strong) { color: var(--sw-text); }
:root[data-theme="dark"] .a-app .pp :is(.auth-eyebrow, .text-link, .secondary-btn) { color: #8CC6F2; }
:root[data-theme="dark"] .a-app .pp .auth-intro h1 .accent { color: #6FB4EA; }
:root[data-theme="dark"] .a-app .pp :is(.card-icon, .trust-icon) { background: var(--sw-surface-1); border-color: var(--sw-border); color: #8CC6F2; }
:root[data-theme="dark"] .a-app .pp :is(.text-input, .otp-digit, .otp-input) { background: var(--sw-surface-2); border-color: var(--sw-border-strong); color: var(--sw-text); }
:root[data-theme="dark"] .a-app .pp .card-links { border-color: var(--sw-border); }
:root[data-theme="dark"] .a-app .pp .primary-btn { background: #6FB4EA; border-color: #6FB4EA; color: #08121C; box-shadow: none; }
:root[data-theme="dark"] .a-app .pp .form-notice.info { background: var(--sw-info-bg); border-color: #2A4560; color: var(--sw-info); }
:root[data-theme="dark"] .a-app .pp .form-notice.error { background: var(--sw-danger-bg); border-color: #5E2E2B; color: var(--sw-danger); }
:root[data-theme="dark"] .a-app .pp .form-notice.success { background: var(--sw-success-bg); border-color: transparent; color: var(--sw-success); }
:root[data-theme="dark"] .a-app .pp .form-notice.warn { background: var(--sw-warning-bg); border-color: #5A4718; color: var(--sw-warning); }
:root[data-theme="dark"] .a-app .pp .password-toggle:hover { background: var(--sw-surface-1); color: var(--sw-text); }