/**
 * sc-member — the member portal pages.
 *
 * Every screen renders INSIDE the site's own page template from a
 * shortcode, so the theme's header, navigation and footer surround it.
 * Nothing here may assume standalone chrome.
 *
 * ONE DASHBOARD LOOK (D125, 17 Sep 2026) — the member portal is a
 * dashboard in the DATS sense and looks like the provider and
 * practitioner dashboards: the navy page-title band, the underlined
 * tab strip (hamburger below 768px), white cards on the theme ground,
 * navy primary buttons at 38px, 12px uppercase table headers, DM Sans.
 * Member pages carry the `dats-frontend-dashboard` body class, so
 * dats-public.css already styles the tab shell and headings; every
 * value below repeats the DATS token so the page looks the same even
 * where that sheet is not loaded, and adds only what is member-specific.
 *
 * TOKENS — the DATS front-end tokens with the brand values as fallback:
 * navy #0B1F3A, teal #2CA6A4, teal-dark #1F7B79, body #4A5A67, muted
 * #5E6B78, subtle #F7F9FB, hairline #E2E6EB, strong border #818D9A.
 *
 * HEADINGS — the dashboard scale, fixed (CLAUDE.md): page title
 * 20/700 (.dats-section-title), section 16/700 (.dats-subsection-title),
 * group label 14/700 uppercase (.dats-group-label). The scmem-* heading
 * classes are aliases of those three, nothing else.
 *
 * Everything works at 375px — a company admin will open this on a phone.
 */

.scmem-page, .scmem-hero {
    --scmem-navy:        var(--dats-primary, #0B1F3A);
    --scmem-teal:        var(--dats-secondary, #2CA6A4);
    --scmem-teal-dark:   var(--dats-focus-ring, #1F7B79);
    --scmem-teal-tint:   #E6F5F4;
    --scmem-text:        var(--dats-text, #4A5A67);
    --scmem-text-strong: var(--dats-text-strong, #0B1F3A);
    --scmem-muted:       var(--dats-text-muted, #5E6B78);
    --scmem-border:      var(--dats-border, #E2E6EB);
    --scmem-border-strong: var(--dats-border-strong, #818D9A);
    --scmem-bg:          var(--dats-bg, #fff);
    --scmem-bg-subtle:   var(--dats-bg-subtle, #F7F9FB);
    --scmem-ok:          #1B7F4B;
    --scmem-ok-bg:       #E6F4EC;
    --scmem-warn:        #C77700;
    --scmem-warn-bg:     #FFF6E6;
    --scmem-warn-line:   #F5D87A;
    --scmem-danger:      #B42318;
    --scmem-danger-bg:   #FDECEA;
    --scmem-info:        #1F5DB1;
    --scmem-info-bg:     #E8F0FA;
    --scmem-radius:      var(--dats-radius-lg, 8px);
    --scmem-radius-sm:   var(--dats-radius-md, 6px);
    --scmem-shadow:      var(--dats-shadow-xs, 0 1px 2px rgba(11, 31, 58, .04));
    --scmem-shadow-hover: 0 6px 18px rgba(11, 31, 58, .10);
    --scmem-focus:       0 0 0 3px rgba(31, 123, 121, .20);
    --scmem-s1: 8px;
    --scmem-s2: 16px;
    --scmem-s3: 24px;
    --scmem-s4: 40px;
    --scmem-font: "DM Sans", var(--font, -apple-system), BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.scmem-page {
    box-sizing: border-box; max-width: 900px; margin: 0 auto; padding: var(--scmem-s4) 16px var(--scmem-s4);
    font-size: 14px; line-height: 1.6; color: var(--scmem-text);
    font-family: var(--scmem-font);
}
/* Explicit, not inherit: Chrome's <details> content slot breaks the inheritance chain,
   and a content-box button with min-height 38px renders 60px tall (seen on Documents). */
.scmem-page *, .scmem-page *::before, .scmem-page *::after { box-sizing: border-box; }
.scmem-page--narrow { max-width: 640px; }
/* One type inside the portal. The theme sizes bare p/li/td at its own
   16px body scale; every run of text here is the dashboards' 14px DM
   Sans with the same leading, so a paragraph, a list item, a table cell
   and a definition read as one voice. Classed lists keep their own rules. */
.scmem-page p, .scmem-page div p, .scmem-page li, .scmem-page dt, .scmem-page dd, .scmem-page th, .scmem-page td, .scmem-page label, .scmem-page summary, .scmem-page small, .scmem-page span { font-family: var(--scmem-font); }
.scmem-page p, .scmem-page div p, .scmem-page li, .scmem-page dt, .scmem-page dd, .scmem-page label, .scmem-page summary { font-size: 14px; line-height: 1.6; }
.scmem-page p, .scmem-page div p { margin: 0 0 var(--scmem-s2); color: var(--scmem-text); }
.scmem-page p:last-child { margin-bottom: 0; }
.scmem-page ul:not([class]), .scmem-page ol:not([class]) { margin: 0 0 var(--scmem-s2); padding: 0 0 0 20px; }
.scmem-page ul:not([class]) li, .scmem-page ol:not([class]) li { margin: 0 0 6px; }
.scmem-page strong, .scmem-page b { font-weight: 700; color: var(--scmem-text-strong); }
/* Rhythm: a paragraph before a form field, a section title after a card,
   a card after a notice — every gap is one of s2/s3, nothing tighter. */
.scmem-page .scmem-card > p + .scmem-form, .scmem-page .scmem-card > p + form, .scmem-page .scmem-card > p + .scmem-field, .scmem-page .scmem-card > p + .scmem-row { margin-top: var(--scmem-s2); }
.scmem-page .scmem-card + .scmem-card, .scmem-page .scmem-table-wrap + .scmem-card, .scmem-page .scmem-card + .scmem-table-wrap { margin-top: var(--scmem-s3); }
.scmem-page .scmem-grid > .scmem-card { margin: 0; } /* the grid's gap is the spacing there */
.scmem-page > p:first-of-type, .scmem-page .scmem-header + p { margin-bottom: var(--scmem-s2); }
@media (max-width: 768px) { .scmem-page { padding-top: var(--scmem-s3); } }

/* ── The navy page-title band (the site's page header, drawn by the
      portal because member pages are plain shortcode pages) ────── */
/* Full-bleed inside the theme's content column. The band is the first
   child of .scmem-page, so it pulls itself up over the page's top padding
   and sits flush under the site header; 100vw counts the scrollbar, so
   the body clips sideways overflow (clip, not hidden: sticky keeps working). */
body.scmem-portal { overflow-x: hidden; overflow-x: clip; }
.scmem-hero { width: 100vw; margin-left: calc(50% - 50vw); margin-top: calc(-1 * var(--scmem-s4)); margin-bottom: var(--scmem-s3); background: var(--scmem-navy) linear-gradient(135deg, #0B1F3A 0%, #12305A 100%); color: #fff; }
@media (max-width: 768px) { .scmem-hero { margin-top: calc(-1 * var(--scmem-s3)); } }
.scmem-hero__inner { max-width: 1140px; margin: 0 auto; padding: 52px 16px; text-align: center; }
.scmem-hero .scmem-hero__title { margin: 0; color: #fff; font-family: var(--scmem-font); font-size: 48px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.scmem-hero .scmem-hero__sub { margin: 10px 0 0; color: rgba(255, 255, 255, .78); font-family: var(--scmem-font); font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.scmem-hero .scmem-hero__sub b { color: #fff; font-weight: 700; }
@media (max-width: 768px) { .scmem-hero__inner { padding: 28px 16px; } .scmem-hero .scmem-hero__title { font-size: 28px; } .scmem-hero .scmem-hero__sub { font-size: 14px; margin-top: 6px; } }

/* ── Tab strip — the DATS tab shell; dats-public.css styles the shell
      and the hamburger, these are the same values for pages without it */
.scmem-page .scmem-tabs { margin: 0 0 var(--scmem-s3); }
/* Every tab the same width (they share the strip equally, text centred)
   and the same type: family, size and weight pinned so no theme link
   rule can make one tab differ from the next. */
.scmem-page .scmem-tabs .dats-tab-nav { display: flex; flex-wrap: nowrap; gap: 0; border-bottom: 1px solid var(--scmem-border); margin: 0 0 var(--scmem-s3); padding: 0; background: transparent; }
.scmem-page .scmem-tabs .dats-tab-link, .scmem-page .scmem-tabs .dats-tab-link:visited { flex: 1 1 0; min-width: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px 8px; margin: 0 0 -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; font-family: var(--scmem-font); font-size: 14px; font-weight: 600; font-style: normal; letter-spacing: 0; text-transform: none; line-height: 1.2; color: var(--scmem-muted); text-decoration: none; white-space: nowrap; transition: color 120ms ease, border-color 120ms ease; }
.scmem-page .scmem-tabs .dats-tab-link:hover { color: var(--scmem-navy); text-decoration: none; }
.scmem-page .scmem-tabs .dats-tab-link:focus-visible { outline: none; box-shadow: var(--scmem-focus); border-radius: 4px; }
.scmem-page .scmem-tabs .dats-tab-link.dats-tab-active { color: var(--scmem-navy); border-bottom-color: var(--scmem-navy); }
.scmem-page .scmem-tabs .dats-tab-trigger { display: none; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: var(--scmem-bg); border: 1px solid var(--scmem-border); border-radius: 6px; color: var(--scmem-navy); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; text-align: left; margin-bottom: 16px; min-height: 48px; }
/* More than nine tabs (a Phase 2 admin has thirteen): rows of seven,
   every tab still the same width, nothing squeezed. */
.scmem-page .scmem-tabs--many .dats-tab-nav { flex-wrap: wrap; }
.scmem-page .scmem-tabs--many .dats-tab-link { flex: 1 1 calc(100% / 7); font-size: 13px; padding: 12px 6px; }
/* 0.9.20: the second row stretches to the same edges as the first (13 tabs = 7 + 6) — a ragged right end read as a hole in the navigation. */
/* Nine equal tabs need ~820px; on a tablet they tighten and the strip
   may scroll sideways rather than wrap into a ragged second row. */
@media (max-width: 960px) and (min-width: 769px) {
    .scmem-page .scmem-tabs .dats-tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .scmem-page .scmem-tabs .dats-tab-link { font-size: 13px; padding: 12px 6px; }
}
@media (max-width: 768px) {
    .scmem-page .scmem-tabs .dats-tab-trigger { display: inline-flex; }
    .scmem-page .scmem-tabs .dats-tab-nav { display: none; flex-direction: column; background: var(--scmem-bg); border: 1px solid var(--scmem-border); border-radius: 6px; margin: -8px 0 16px; padding: 4px 0; box-shadow: 0 4px 16px rgba(11, 31, 58, .08); }
    .scmem-page .scmem-tabs.is-open .dats-tab-nav { display: flex; }
    .scmem-page .scmem-tabs .dats-tab-link { flex: 0 0 auto; justify-content: flex-start; text-align: left; padding: 14px 18px; border-bottom: 0; margin-bottom: 0; min-height: 48px; display: flex; align-items: center; white-space: normal; }
    .scmem-page .scmem-tabs .dats-tab-link.dats-tab-active { background: var(--scmem-bg-subtle); border-left: 3px solid var(--scmem-navy); padding-left: 15px; }
}

/* ── Section title row (screen title + EN | FR + an action) ──── */
.scmem-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
.scmem-header__titles { flex: 1 1 320px; min-width: 0; }
.scmem-header__tools { display: flex; align-items: center; gap: var(--scmem-s2); margin-left: auto; flex: 0 0 auto; }
.scmem-page .scmem-header__subtitle { margin: 4px 0 0; color: var(--scmem-muted); font-size: 14px; }
.scmem-page .scmem-header .scmem-link { font-size: 14px; }

/* The heading scale — aliases of the DATS classes, same values. */
.scmem-page .scmem-title, .scmem-page .dats-section-title { font-size: 20px; font-weight: 700; color: var(--scmem-text-strong); margin: 0; line-height: 1.3; font-family: var(--scmem-font); }
.scmem-page .scmem-subtitle, .scmem-page .dats-subsection-title { font-size: 16px; font-weight: 700; color: var(--scmem-text-strong); margin: var(--scmem-s3) 0 20px; line-height: 1.3; font-family: var(--scmem-font); }
.scmem-page .scmem-subtitle:first-child { margin-top: 0; }
.scmem-page .scmem-label, .scmem-page .dats-group-label { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--scmem-text); margin: 0 0 var(--scmem-s1); line-height: 1.3; font-family: var(--scmem-font); }
@media (max-width: 480px) { .scmem-page .scmem-title, .scmem-page .dats-section-title { font-size: 18px; } }

/* The shared EN | FR toggle (mu-plugins/sc-lang.php renders it; each plugin styles it). */
.scmem-page .sc-lang-toggle { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--scmem-border); border-radius: 999px; background: var(--scmem-bg); }
.scmem-page .sc-lang-toggle__opt { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--scmem-muted); text-decoration: none; line-height: 1.4; }
.scmem-page .sc-lang-toggle__opt.is-active { background: var(--scmem-navy); color: #fff; }
.scmem-page .sc-lang-toggle__opt:hover { color: var(--scmem-navy); background: var(--scmem-bg-subtle); text-decoration: none; }
.scmem-page .sc-lang-toggle__opt.is-active:hover { color: #fff; background: var(--scmem-navy); }
.scmem-page .sc-lang-toggle__opt:focus-visible { outline: none; box-shadow: var(--scmem-focus); }

/* ── Cards and grid ─────────────────────────────────────────── */
.scmem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--scmem-s2); margin: 0 0 var(--scmem-s3); }
.scmem-page .scmem-card { background: var(--scmem-bg); border: 1px solid var(--scmem-border); border-radius: var(--scmem-radius); padding: 20px; margin: 0 0 20px; box-shadow: var(--scmem-shadow); }
.scmem-grid > .scmem-card { margin: 0; }
/* 0.9.20: an odd last card takes the whole row instead of leaving a hole beside it. */
.scmem-page .scmem-grid > .scmem-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.scmem-page .scmem-card__title { font-size: 16px; font-weight: 700; color: var(--scmem-text-strong); margin: 0 0 var(--scmem-s2); line-height: 1.3; }
.scmem-card p { margin: 0 0 var(--scmem-s2); }
.scmem-card p:last-child { margin-bottom: 0; }
.scmem-page .scmem-card.scmem-card--danger { border-color: #F3B8B2; border-left: 4px solid var(--scmem-danger); } /* 0.9.19: was (0,1,0) and lost to the base card border on the host */
@media (max-width: 480px) { .scmem-page .scmem-card { padding: var(--scmem-s2); } }

.scmem-dl { margin: 0; display: grid; gap: 0; }
.scmem-dl > div { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: var(--scmem-s1); padding: 8px 0; border-top: 1px solid var(--scmem-bg-subtle); }
.scmem-dl > div:first-child { border-top: 0; padding-top: 0; }
.scmem-dl > div:last-child { padding-bottom: 0; }
.scmem-dl dt { font-weight: 600; color: var(--scmem-text-strong); font-size: 14px; }
.scmem-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .scmem-dl > div { grid-template-columns: 1fr; gap: 2px; } }

.scmem-muted { color: var(--scmem-muted); }
.scmem-empty { color: var(--scmem-muted); background: var(--scmem-bg-subtle); border: 1px dashed var(--scmem-border); border-radius: var(--scmem-radius); padding: var(--scmem-s3) var(--scmem-s2); margin: 0 0 var(--scmem-s2); text-align: center; font-style: italic; }

/* ── Pills (the DATS status pill shape) ─────────────────────── */
.scmem-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.7; letter-spacing: .01em; white-space: nowrap; }
.scmem-pill--ok     { background: var(--scmem-ok-bg);     color: var(--scmem-ok); }
.scmem-pill--warn   { background: var(--scmem-warn-bg);   color: var(--scmem-warn); }
.scmem-pill--danger { background: var(--scmem-danger-bg); color: var(--scmem-danger); }
.scmem-pill--muted  { background: var(--scmem-bg-subtle); color: var(--scmem-muted); border: 1px solid var(--scmem-border); }

/* ── Notices (the DATS notice shape) ────────────────────────── */
.scmem-notice { border-radius: var(--scmem-radius-sm); padding: 12px 16px 12px 20px; margin: 0 0 var(--scmem-s3); border: 1px solid; border-left-width: 4px; font-size: 14px; line-height: 1.55; }
.scmem-notice a { color: inherit; font-weight: 700; }
.scmem-notice p { margin: 0 0 6px; } .scmem-notice p:last-child { margin: 0; }
.scmem-notice--success{ background: var(--scmem-ok-bg);     border-color: #B7E1C7; color: var(--scmem-ok); }
.scmem-notice--warn   { background: var(--scmem-warn-bg);   border-color: var(--scmem-warn-line); color: #78350F; }
.scmem-notice--danger { background: var(--scmem-danger-bg); border-color: #F3B8B2; color: var(--scmem-danger); }
.scmem-notice--info   { background: var(--scmem-info-bg);   border-color: #BBD0EE; color: var(--scmem-info); }
.scmem-notice--muted  { background: var(--scmem-bg-subtle); border-color: var(--scmem-border); color: var(--scmem-muted); }

/* ── Buttons — the DATS dashboard button: 38px, 14/600, radius 6,
      navy primary, white secondary. Anchors and <button>s alike. ── */
.scmem-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: var(--scmem-s2) 0 0; }
/* Inside a card the generic p rule would win on specificity and take the gap away. */
.scmem-page .scmem-card p.scmem-actions, .scmem-page .scmem-card .scmem-actions { margin: var(--scmem-s2) 0 0; }
.scmem-page .scmem-card .scmem-actions:first-child { margin-top: 0; }
.scmem-page .scmem-btn, .scmem-page .scmem-btn:hover, .scmem-page .scmem-btn:focus, .scmem-page .scmem-btn:visited { text-decoration: none; }
.scmem-page .scmem-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 10px 18px; border-radius: var(--scmem-radius-sm); font-family: var(--scmem-font); font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; border: 1px solid transparent; cursor: pointer; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; }
.scmem-page .scmem-btn:active { transform: translateY(1px); }
.scmem-page .scmem-btn--primary { background: var(--scmem-navy); border-color: var(--scmem-navy); color: #fff; }
.scmem-page .scmem-btn--primary:hover { background: var(--dats-primary-hover, #142D52); border-color: var(--dats-primary-hover, #142D52); color: #fff; }
.scmem-page .scmem-btn--secondary { background: var(--scmem-bg); color: var(--scmem-navy); border-color: var(--scmem-border-strong); }
.scmem-page .scmem-btn--secondary:hover { background: var(--scmem-bg-subtle); border-color: var(--scmem-navy); color: var(--scmem-navy); }
.scmem-page .scmem-btn--danger { background: var(--scmem-bg); color: var(--scmem-danger); border-color: var(--scmem-danger); }
.scmem-page .scmem-btn--danger:hover { background: var(--scmem-danger); color: #fff; }
.scmem-page .scmem-btn--small { min-height: 32px; padding: 6px 12px; font-size: 13px; }
.scmem-page .scmem-btn:focus-visible { outline: none; box-shadow: var(--scmem-focus); }
.scmem-page .scmem-btn[disabled], .scmem-page .scmem-btn.is-busy { opacity: .6; cursor: progress; }
.scmem-page .scmem-btn.is-busy::after { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: scmem-spin .8s linear infinite; }
@keyframes scmem-spin { to { transform: rotate(360deg); } }
.scmem-page .scmem-link { color: var(--scmem-teal-dark); text-decoration: underline; text-underline-offset: 2px; }
.scmem-page .scmem-link:hover { color: var(--scmem-navy); }
@media (max-width: 480px) { .scmem-page .scmem-btn { width: 100%; } .scmem-page .scmem-btn--small { width: auto; } }

/* Link-styled buttons (Resend, Deactivate, Cancel invite…) — a real
   <button> or <summary> that reads as a link, wherever it sits. */
.scmem-inline { display: inline; }
.scmem-inline form, form.scmem-inline { display: inline; margin: 0; }
.scmem-page .scmem-btn--link, .scmem-page button.scmem-btn--link, .scmem-page summary.scmem-btn--link { display: inline; background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--scmem-teal-dark); text-decoration: underline; text-underline-offset: 2px; padding: 0; margin: 0; min-height: 0; height: auto; line-height: inherit; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.scmem-page .scmem-btn--link:hover { color: var(--scmem-navy); background: none; }
.scmem-page .scmem-btn--link:focus-visible { outline: none; box-shadow: var(--scmem-focus); border-radius: 3px; }
.scmem-page .scmem-btn--link.is-danger { color: var(--scmem-danger); }
.scmem-page .scmem-btn--link.is-secondary { color: var(--scmem-muted); }
.scmem-page .scmem-btn--link.is-secondary:hover { color: var(--scmem-navy); }

/* ── Navigation tiles on the overview ───────────────────────── */
.scmem-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--scmem-s2); margin: 0 0 var(--scmem-s3); }
.scmem-nav__item { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 88px; padding: var(--scmem-s2) 40px var(--scmem-s2) var(--scmem-s2); background: var(--scmem-bg); border: 1px solid var(--scmem-border); border-radius: var(--scmem-radius); color: var(--scmem-text-strong); text-decoration: none; font-weight: 700; box-shadow: var(--scmem-shadow); transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; }
.scmem-nav__label { font-size: 15px; line-height: 1.3; }
.scmem-nav__hint { font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--scmem-muted); }
a.scmem-nav__item::after { content: '\2192'; position: absolute; right: 16px; top: 14px; color: var(--scmem-teal); font-weight: 700; font-size: 16px; opacity: .6; transition: transform 120ms ease, opacity 120ms ease; }
a.scmem-nav__item:hover { border-color: var(--scmem-teal); box-shadow: var(--scmem-shadow-hover); transform: translateY(-1px); color: var(--scmem-text-strong); text-decoration: none; }
a.scmem-nav__item:hover::after { opacity: 1; transform: translateX(3px); }
a.scmem-nav__item:focus-visible { outline: none; box-shadow: var(--scmem-focus); }
.scmem-nav__item--soon { color: var(--scmem-muted); background: var(--scmem-bg-subtle); border-style: dashed; cursor: default; }
.scmem-nav__soon { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }

/* ── Timeline ───────────────────────────────────────────────── */
.scmem-timeline { list-style: none; margin: 0 0 var(--scmem-s3); padding: 0; border: 1px solid var(--scmem-border); border-radius: var(--scmem-radius); background: var(--scmem-bg); box-shadow: var(--scmem-shadow); font-size: 14px; }
.scmem-timeline__item { display: grid; grid-template-columns: 180px 1fr; gap: var(--scmem-s2); padding: 12px var(--scmem-s2); border-top: 1px solid var(--scmem-border); margin: 0; }
.scmem-timeline__item:first-child { border-top: 0; }
.scmem-timeline__when { color: var(--scmem-muted); font-size: 13px; }
@media (max-width: 600px) { .scmem-timeline__item { grid-template-columns: 1fr; gap: 2px; } }

/* ── Forms — the DATS dashboard field: 40px, 14px, strong border ── */
.scmem-form { margin: 0; }
.scmem-field { margin: 0 0 var(--scmem-s2); }
.scmem-field label { display: block; font-weight: 600; color: var(--scmem-text-strong); font-size: 14px; line-height: 1.3; margin: 0 0 6px; }
.scmem-field--check label { font-weight: 400; color: var(--scmem-text); display: flex; gap: 10px; align-items: flex-start; }
.scmem-field--check input { margin: 4px 0 0; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--scmem-navy); }
/* Every control is border-box at a fixed height so the theme's own
   input padding cannot make one field taller than its neighbour or
   spill it over the column gap (the Ion theme sizes inputs content-box). */
.scmem-page .scmem-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.scmem-page .scmem-field select,
.scmem-page .scmem-field textarea { display: block; box-sizing: border-box; width: 100%; max-width: 100%; height: 40px; min-height: 40px; margin: 0; padding: 9px 12px; border: 1px solid var(--scmem-border-strong); border-radius: var(--scmem-radius-sm); background: var(--scmem-bg); color: var(--scmem-text-strong); font-family: var(--scmem-font); font-size: 14px; line-height: 1.4; }
.scmem-page .scmem-field select { padding-right: 32px; -webkit-appearance: none; appearance: none; background: var(--scmem-bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234A5A67' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; }
.scmem-page .scmem-field textarea { height: auto; min-height: 96px; resize: vertical; }
.scmem-page .scmem-field input::placeholder, .scmem-page .scmem-field textarea::placeholder { color: #8A96A3; }
.scmem-page .scmem-field input:focus, .scmem-page .scmem-field select:focus, .scmem-page .scmem-field textarea:focus { outline: none; border-color: var(--scmem-teal-dark); box-shadow: var(--scmem-focus); }
/* File pickers: the native control, dressed — a dashed drop-zone with a
   proper button (::file-selector-button is supported in every current
   browser; the -webkit- form covers older Safari). */
.scmem-page .scmem-field input[type="file"] { display: block; box-sizing: border-box; width: 100%; max-width: 100%; margin: 0; padding: 10px 12px; border: 1px dashed var(--scmem-border-strong); border-radius: var(--scmem-radius-sm); background: var(--scmem-bg-subtle); color: var(--scmem-muted); font-family: var(--scmem-font); font-size: 14px; line-height: 1.4; cursor: pointer; }
.scmem-page .scmem-field input[type="file"]::file-selector-button { font-family: var(--scmem-font); font-size: 13px; font-weight: 600; color: var(--scmem-navy); background: var(--scmem-bg); border: 1px solid var(--scmem-border-strong); border-radius: var(--scmem-radius-sm); padding: 6px 12px; margin: 0 12px 0 0; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; }
.scmem-page .scmem-field input[type="file"]::-webkit-file-upload-button { font-family: var(--scmem-font); font-size: 13px; font-weight: 600; color: var(--scmem-navy); background: var(--scmem-bg); border: 1px solid var(--scmem-border-strong); border-radius: var(--scmem-radius-sm); padding: 6px 12px; margin: 0 12px 0 0; cursor: pointer; }
.scmem-page .scmem-field input[type="file"]:hover { border-color: var(--scmem-navy); }
.scmem-page .scmem-field input[type="file"]:hover::file-selector-button { background: var(--scmem-bg-subtle); border-color: var(--scmem-navy); }
.scmem-page .scmem-field input[type="file"]:focus { outline: none; border-color: var(--scmem-teal-dark); box-shadow: var(--scmem-focus); }
.scmem-field--error input, .scmem-field--error select, .scmem-field--error textarea { border-color: var(--scmem-danger) !important; }
.scmem-field__error { display: block; color: var(--scmem-danger); font-size: 13px; margin-top: 4px; }
.scmem-field__help { display: block; color: var(--scmem-muted); font-size: 13px; margin-top: 4px; }
.scmem-page .scmem-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); column-gap: var(--scmem-s2); row-gap: 0; }
.scmem-page .scmem-row > .scmem-field { min-width: 0; }

/* ── Tables — the DATS dashboard table rhythm ───────────────── */
.scmem-table-wrap { overflow-x: auto; border: 1px solid var(--scmem-border); border-radius: var(--scmem-radius); background: var(--scmem-bg); box-shadow: var(--scmem-shadow); margin: 0 0 var(--scmem-s3); -webkit-overflow-scrolling: touch; }
.scmem-page .scmem-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; }
.scmem-page .scmem-table th, .scmem-page .scmem-table td { padding: 10px 14px; text-align: left; border: 0; border-bottom: 1px solid var(--scmem-border); vertical-align: top; line-height: 1.45; color: var(--scmem-text); }
.scmem-page .scmem-table thead th { background: var(--scmem-bg-subtle); color: var(--scmem-text-strong); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.scmem-page .scmem-table tbody tr:last-child td { border-bottom: 0; }
.scmem-page .scmem-table tbody tr:hover > td { background: #FBFCFD; }
.scmem-table td.scmem-table__actions { white-space: nowrap; width: 1%; }
.scmem-page .scmem-table td.scmem-nowrap { white-space: nowrap; }
/* A status pill inside a table may wrap rather than widen its column; a row of six columns in a 900px page must not scroll sideways on desktop (17 Sep 2026). */
.scmem-page .scmem-table .scmem-pill { white-space: normal; line-height: 1.5; padding-top: 3px; padding-bottom: 3px; }
/* The first column is the name/title; give it room before the rest share what is left. */
.scmem-page .scmem-table th:first-child, .scmem-page .scmem-table td:first-child { min-width: 180px; }
.scmem-page .scmem-table td .scmem-muted { font-size: 13px; }
/* Controls inside a table row (the per-contact role select) stay compact. */
.scmem-page .scmem-table select { box-sizing: border-box; max-width: 100%; height: 34px; margin: 0; padding: 4px 28px 4px 10px; border: 1px solid var(--scmem-border-strong); border-radius: var(--scmem-radius-sm); background: var(--scmem-bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234A5A67' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; -webkit-appearance: none; appearance: none; color: var(--scmem-text-strong); font-family: var(--scmem-font); font-size: 13px; }
.scmem-page .scmem-table select:focus { outline: none; border-color: var(--scmem-teal-dark); box-shadow: var(--scmem-focus); }
.scmem-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0 0 var(--scmem-s2); }
.scmem-toolbar .scmem-field { margin: 0; flex: 1 1 200px; }
.scmem-toolbar .scmem-btn { flex: 0 0 auto; }
@media (max-width: 480px) { .scmem-toolbar .scmem-field { flex-basis: 100%; } }
/* Lists that grow (0.9.30, T175): the search bar above and the pager below.
   The bar is a toolbar row — the box takes the room, filter selects and the
   button keep their width; Clear is a quiet link. The pager keeps the count
   on the left and Previous · numbers · Next on the right; on a phone the
   numbers centre on their own row and Previous / Next become two thumb-
   sized buttons under them. */
.scmem-page .scmem-list-tools { align-items: center; gap: 8px 12px; margin: 0 0 var(--scmem-s2); }
.scmem-page .scmem-list-tools .scmem-field { margin: 0; }
.scmem-page .scmem-list-tools__search { flex: 1 1 260px; max-width: 480px; }
.scmem-page .scmem-list-tools__filter { flex: 0 1 200px; }
.scmem-page .scmem-list-tools__go { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.scmem-page .scmem-list-tools__go .scmem-btn { width: auto; }
.scmem-page .scmem-list-tools__clear { font-size: 14px; font-weight: 600; color: var(--scmem-muted); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.scmem-page .scmem-list-tools__clear:hover, .scmem-page .scmem-list-tools__clear:focus-visible { color: var(--scmem-navy); }
.scmem-page .scmem-list-tools + .scmem-empty { margin-top: 0; }
.scmem-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: calc(-1 * var(--scmem-s2)) 0 var(--scmem-s3); }
.scmem-page .scmem-pager__count { margin: 0; font-size: 13px; }
.scmem-pager__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.scmem-pager__pages { display: inline-flex; align-items: center; gap: 4px; }
.scmem-page .scmem-pager__link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0 10px; border: 1px solid var(--scmem-border); border-radius: var(--scmem-radius-sm); background: var(--scmem-bg); color: var(--scmem-navy); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; transition: background-color 120ms ease, border-color 120ms ease; }
.scmem-page a.scmem-pager__link:hover { background: var(--scmem-bg-subtle); border-color: var(--scmem-border-strong); text-decoration: none; }
.scmem-page a.scmem-pager__link:focus-visible { outline: none; box-shadow: var(--scmem-focus); }
.scmem-page .scmem-pager__link.is-current { background: var(--scmem-navy); border-color: var(--scmem-navy); color: #fff; }
.scmem-page .scmem-pager__link.is-disabled { color: var(--scmem-muted); background: var(--scmem-bg-subtle); cursor: default; }
.scmem-pager__gap { padding: 0 2px; color: var(--scmem-muted); }
@media (max-width: 600px) {
    .scmem-page .scmem-list-tools__search { flex-basis: 100%; max-width: none; }
    .scmem-page .scmem-list-tools__filter { flex: 1 1 140px; }
    .scmem-pager { flex-direction: column; align-items: stretch; }
    .scmem-page .scmem-pager__count { text-align: center; }
    .scmem-pager__nav { gap: 8px; }
    .scmem-pager__pages { order: 1; flex: 1 1 100%; justify-content: center; }
    .scmem-page .scmem-pager__link--step { order: 2; flex: 1 1 0; min-height: 44px; }
}
details.scmem-details { margin: var(--scmem-s2) 0; }
details.scmem-details summary { cursor: pointer; font-weight: 600; color: var(--scmem-navy); padding: 6px 0; }
details.scmem-details summary:hover { color: var(--scmem-teal-dark); }
details.scmem-details summary:focus-visible { outline: none; box-shadow: var(--scmem-focus); border-radius: 4px; }

/* ── Inline confirmations in tables ─────────────────────────── */
.scmem-inline-details { display: inline-block; vertical-align: top; }
/* Open, it takes its own line so the neighbouring inline links stay put. */
.scmem-inline-details[open] { display: block; }
.scmem-inline-details summary { list-style: none; cursor: pointer; display: inline; }
.scmem-inline-details summary::-webkit-details-marker { display: none; }
.scmem-inline-details[open] .scmem-confirm { display: flex; flex-direction: column; gap: var(--scmem-s1); margin-top: var(--scmem-s1); padding: var(--scmem-s2); background: var(--scmem-danger-bg); border: 1px solid #F3B8B2; border-radius: var(--scmem-radius-sm); width: 260px; max-width: 100%; box-sizing: border-box; white-space: normal; text-align: left; }
.scmem-confirm label { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.scmem-confirm p { margin: 0; font-size: 14px; }
.scmem-confirm label:has(input[type="text"]), .scmem-confirm label:has(select), .scmem-confirm label:has(textarea) { flex-direction: column; gap: 6px; font-weight: 600; }
.scmem-page .scmem-confirm input[type="text"], .scmem-page .scmem-confirm select, .scmem-page .scmem-confirm textarea { display: block; box-sizing: border-box; width: 100%; max-width: 100%; height: 36px; margin: 0; padding: 7px 10px; border: 1px solid var(--scmem-border-strong); border-radius: var(--scmem-radius-sm); font: inherit; font-weight: 400; background: var(--scmem-bg); }
.scmem-page .scmem-confirm textarea { height: auto; min-height: 72px; }
/* A form that follows a definition list inside a card. */
.scmem-card__form { margin-top: var(--scmem-s2); padding-top: var(--scmem-s2); border-top: 1px solid var(--scmem-border); }
/* A small form disclosed inside a table cell (the draw's "Request a test"):
   a fixed-width neutral panel with the standard field blocks, so it
   never stretches the column. */
.scmem-inline-details[open] .scmem-inline-panel { display: block; width: 260px; max-width: 100%; margin-top: var(--scmem-s1); padding: var(--scmem-s2); background: var(--scmem-bg-subtle); border: 1px solid var(--scmem-border); border-radius: var(--scmem-radius-sm); white-space: normal; text-align: left; }
.scmem-inline-details[open] .scmem-inline-panel .scmem-field { margin: 0 0 var(--scmem-s1); }
.scmem-inline-details[open] .scmem-inline-panel .scmem-actions { margin: 0; }

/* ── Simple lists in cards ──────────────────────────────────── */
.scmem-list { margin: 0; padding: 0 0 0 18px; }
.scmem-list li { margin: 0 0 6px; }

/* ── Referral wizard ────────────────────────────────────────── */
.scmem-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--scmem-s2); }
.scmem-page .scmem-choice__btn { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: var(--scmem-s2); background: var(--scmem-bg); border: 2px solid var(--scmem-border); border-radius: var(--scmem-radius); color: var(--scmem-text-strong); font: inherit; font-weight: 700; cursor: pointer; min-height: 88px; box-shadow: var(--scmem-shadow); transition: border-color 120ms ease, box-shadow 120ms ease; }
.scmem-page .scmem-choice__btn:hover { border-color: var(--scmem-navy); box-shadow: var(--scmem-shadow-hover); }
.scmem-page .scmem-choice__btn:focus-visible { outline: none; box-shadow: var(--scmem-focus); }
.scmem-choice__btn span { color: var(--scmem-muted); font-size: 14px; font-weight: 400; }
.scmem-code__value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 20px; letter-spacing: .08em; background: var(--scmem-bg-subtle); border: 1px solid var(--scmem-border); padding: 6px 10px; border-radius: var(--scmem-radius-sm); display: inline-block; color: var(--scmem-text-strong); }
.scmem-page ol.scmem-steps { display: flex; align-items: center; gap: var(--scmem-s2); list-style: none; margin: 0 0 var(--scmem-s3); padding: 0; flex-wrap: wrap; }
.scmem-page .scmem-steps__item { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; line-height: 1.3; color: var(--scmem-muted); font-weight: 600; font-size: 14px; }
.scmem-page .scmem-steps__item::before, .scmem-page .scmem-steps__item::after { content: none; }
.scmem-steps__n { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--scmem-border); font-size: 13px; }
.scmem-steps__item.is-current { color: var(--scmem-navy); }
.scmem-steps__item.is-current .scmem-steps__n { border-color: var(--scmem-navy); background: var(--scmem-navy); color: #fff; }
.scmem-steps__item.is-done .scmem-steps__n { border-color: var(--scmem-ok); background: var(--scmem-ok-bg); color: var(--scmem-ok); }
.scmem-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 16px; margin: 0 0 var(--scmem-s2); }
.scmem-page .scmem-check, .scmem-page .scmem-field label.scmem-check { display: flex; color: var(--scmem-text); gap: 10px; align-items: flex-start; font-weight: 400; margin: 4px 0; }
.scmem-check input { margin: 4px 0 0; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--scmem-navy); }
.scmem-edit { font-size: 14px; font-weight: 400; margin-left: 8px; }

/* ── Phase 2: quiz fieldsets, option rows, course lists ─────── */
.scmem-page fieldset.scmem-card { min-width: 0; border: 1px solid var(--scmem-border); padding: 20px; margin: 0 0 20px; }
/* The legend sits INSIDE the card like any section title (floated full-width, the
   browser's own "legend on the border" rendering is what made the question sit on
   the border line with a hole under it and no gap above the card). */
.scmem-page fieldset.scmem-card > legend { float: left; width: 100%; box-sizing: border-box; padding: 0; margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--scmem-text-strong); line-height: 1.3; }
.scmem-page fieldset.scmem-card > legend + * { clear: both; }
.scmem-page fieldset.scmem-card::after { content: ''; display: block; clear: both; }
.scmem-page .scmem-quiz__q .scmem-check { margin: 0 0 8px; }
.scmem-page .scmem-quiz__q .scmem-check:last-child { margin-bottom: 0; }
.scmem-page form > fieldset.scmem-card:first-of-type { margin-top: var(--scmem-s2); }
.scmem-page .scmem-check input[type="radio"] { width: 16px; height: 16px; margin: 4px 0 0; accent-color: var(--scmem-navy); }
.scmem-page ol.scmem-list { padding-left: 20px; }
.scmem-page .scmem-list--plain { list-style: none; padding-left: 0; }
.scmem-page .scmem-list li + li { margin-top: 6px; }
.scmem-page code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: var(--scmem-bg-subtle); padding: 1px 4px; border-radius: 3px; }
.scmem-pill--info { background: var(--scmem-info-bg); color: var(--scmem-info); }
/* A quiz review: the label's pill sits beside it; the explanation stands off the options. */
.scmem-page .scmem-label .scmem-pill { margin-left: 6px; vertical-align: middle; text-transform: none; letter-spacing: .01em; }
.scmem-page .scmem-card p.scmem-explanation { margin-top: var(--scmem-s2); padding-top: 10px; border-top: 1px solid var(--scmem-border); }

/* ── Documents: stacked row actions (0.9.16) ─────────────────── */
/* Download + Edit on one line, the Archive disclosure beneath, so a row
   with three controls never forces the table sideways at desktop width. */
.scmem-page .scmem-table td.scmem-table__actions .scmem-actions-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* 0.9.25: a stacked link may wrap inside its cell — the cell is nowrap for the one-line row actions, and a long link
   ("Change or cancel") in the last column was the 14px that made the whole table scroll sideways. */
.scmem-page .scmem-table td.scmem-table__actions .scmem-actions-stack > * { white-space: normal; }
/* The buttons may wrap onto their own lines (each filling the row) rather than widen the column — a 900px page with six columns must never scroll sideways on desktop (Bibek, 17 Sep 2026). */
.scmem-page .scmem-actions-stack__row { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; } /* 0.9.20: Download + Edit on one line — the Employee column folded into the title cell made the room */
.scmem-page .scmem-actions-stack__row .scmem-btn { flex: 0 0 auto; justify-content: center; }
/* 0.9.19: the Archive confirmation moved out of the row into a card at the top — an in-cell box widened the column and pushed the table sideways (host walk). */
/* 0.9.19: the post-incident request form on Bookings sits in a card, not a table
   cell — it takes the card's width instead of the 260px cell panel. */
.scmem-page .scmem-inline-details[open] .scmem-inline-panel--full { width: 100%; margin-top: var(--scmem-s2); }

/* ── 0.9.20 design pass — buttons, spacing, navigation (Bibek, 17 Sep) ──
   One rule for actions in a table row: the thing you open is a small
   secondary button (Edit, Download, Open); what changes state is a
   link — red when it removes access or ends something. The screen's
   one "add" action lives in the title row beside EN | FR, so a list is
   the first thing on the screen and the form appears only when asked. */
.scmem-page .scmem-row-actions { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 12px; white-space: nowrap; }
.scmem-page .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.scmem-page .scmem-row-actions .scmem-inline, .scmem-page .scmem-row-actions form.scmem-inline { display: inline-flex; }
.scmem-page .scmem-table td.scmem-table__actions { vertical-align: middle; }
/* The title-row action: never wider than its label, never full width on a phone. */
.scmem-page .scmem-header__tools .scmem-btn { width: auto; flex: 0 0 auto; }
@media (max-width: 480px) { .scmem-page .scmem-header__tools { width: 100%; justify-content: space-between; } }
/* EN | FR is the last thing in the title row, at the right edge — also on a phone when it is the only thing there (0.9.30). */
.scmem-page .scmem-header__tools .sc-lang-toggle { margin-left: auto; }
/* A disclosure that opens a form (Import from CSV) reads as a secondary button, not a bare caret. */
.scmem-page details.scmem-details > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 9px 16px; border: 1px solid var(--scmem-border-strong); border-radius: var(--scmem-radius-sm); background: var(--scmem-bg); color: var(--scmem-navy); font-size: 14px; font-weight: 600; list-style: none; }
.scmem-page details.scmem-details > summary::-webkit-details-marker { display: none; }
.scmem-page details.scmem-details > summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 120ms ease; }
.scmem-page details.scmem-details[open] > summary::before { transform: rotate(45deg); }
.scmem-page details.scmem-details > summary:hover { background: var(--scmem-bg-subtle); border-color: var(--scmem-navy); color: var(--scmem-navy); }
.scmem-page details.scmem-details > .scmem-card { margin-top: 12px; }
/* Intro copy under a title: one measure, muted, never a wall. */
.scmem-page .scmem-header + p, .scmem-page .scmem-header + .scmem-notice + p, .scmem-page .scmem-intro { max-width: 68ch; color: var(--scmem-muted); }
/* A card that is a form: its title, then a short line, then the fields — the fields start on one rhythm. */
.scmem-page .scmem-card > .scmem-card__title + p { margin-bottom: var(--scmem-s2); }
/* Buttons in a row at the foot of a card sit 24px under the last field, not 16. */
.scmem-page .scmem-card .scmem-field + .scmem-actions, .scmem-page .scmem-card .scmem-row + .scmem-actions, .scmem-page .scmem-card .scmem-field + p.scmem-actions, .scmem-page .scmem-card .scmem-row + p.scmem-actions { margin-top: var(--scmem-s3); }
/* Section headings above a table or list: 32px above, 12px below, so a heading belongs to what follows it, not to what precedes it. */
.scmem-page .scmem-card + .scmem-subtitle, .scmem-page .scmem-table-wrap + .scmem-subtitle, .scmem-page .scmem-grid + .scmem-subtitle, .scmem-page .scmem-notice + .scmem-subtitle, .scmem-page p + .scmem-subtitle { margin-top: 32px; }
.scmem-page .scmem-subtitle + .scmem-table-wrap, .scmem-page .scmem-subtitle + .scmem-empty, .scmem-page .scmem-subtitle + .scmem-timeline, .scmem-page .scmem-subtitle + .scmem-nav { margin-top: 0; }
.scmem-page .scmem-subtitle { margin-bottom: 12px; }
/* A count line above a table ("5 employees") is a caption, not a paragraph. */
.scmem-page .scmem-toolbar + p.scmem-muted { margin: 0 0 8px; font-size: 13px; }
/* Empty states: a quiet box with an upright sentence and room for its one action. */
.scmem-page .scmem-empty { font-style: normal; padding: 28px 16px; }
.scmem-page .scmem-empty .scmem-link { font-weight: 600; }
/* Cells that hold several inline actions (Approve · Decline, Run · Cancel, Mark notified · Book): one 12px gap between neighbours, whatever mix of forms, links and disclosures they are. */
.scmem-page .scmem-table td.scmem-table__actions > * + * { margin-left: 12px; }
.scmem-page .scmem-table td.scmem-table__actions > .scmem-inline-details[open] { margin-left: 0; }
.scmem-page .scmem-table td.scmem-table__actions > .scmem-inline-details[open] + * { margin-left: 0; margin-top: 8px; display: inline-block; }
.scmem-page .scmem-table td.scmem-table__actions > .scmem-row-actions, .scmem-page .scmem-table td.scmem-table__actions > .scmem-actions-stack { margin-left: 0; }
/* Small buttons inside table rows share one height and never stretch to the phone's full width. */
.scmem-page .scmem-table .scmem-btn--small { width: auto; min-height: 32px; }
/* A disclosure that follows a card's button row (the post-incident request) sits on its own line, 12px under the button. */
.scmem-page .scmem-card .scmem-actions + .scmem-inline-details { display: block; margin-top: 12px; }
.scmem-page .scmem-card .scmem-actions + .scmem-inline-details[open] { margin-top: 16px; }

/* ── D146: the controlled output of a compliance template revision ──
   Ben's print page: a bordered article, a status banner, labelled
   sections, two boxed blocks (review acknowledgment, authorization
   evidence). @media print keeps the article alone on the page. */
.scmem-page .scmem-output { background: #fff; border: 1px solid var(--scmem-border); border-radius: var(--scmem-radius); padding: 28px 32px; margin: 0 0 var(--scmem-s3); color: #2E4751; max-width: 860px; }
.scmem-page .scmem-output__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 2px solid #0F3E52; padding-bottom: 16px; margin-bottom: 20px; }
.scmem-page .scmem-output__kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #237F7D; font-weight: 700; margin: 0 0 6px; }
.scmem-page .scmem-output__title { font-size: 22px; font-weight: 700; color: #0B1F3A; margin: 0 0 6px; line-height: 1.25; }
.scmem-page .scmem-output__meta { margin: 0; color: var(--scmem-muted); font-size: 14px; }
.scmem-page .scmem-output__status { flex: 0 0 auto; border-radius: 10px; padding: 8px 12px; text-align: right; font-size: 12px; color: #D3EEEB; background: #5A4A27; border: 1px solid #BE9A46; display: flex; flex-direction: column; gap: 2px; }
.scmem-page .scmem-output__status strong, .scmem-page .scmem-output__status span { color: #FFFFFF; }
.scmem-page .scmem-output__status strong { font-size: 13px; }
.scmem-page .scmem-output--active .scmem-output__status  { background: #0F3E52; border-color: #6CBEB5; }
.scmem-page .scmem-output--revoked .scmem-output__status { background: #512E31; border-color: #B86A62; }
.scmem-page .scmem-output__section { margin: 0 0 18px; }
.scmem-page .scmem-output__section p, .scmem-page .scmem-output__box p { margin: 0 0 8px; line-height: 1.7; font-size: 14px; }
.scmem-page .scmem-output__label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #237F7D; margin: 0 0 6px; }
.scmem-page .scmem-output__steps { margin: 0; padding: 0 0 0 28px; }
.scmem-page .scmem-output__steps li { margin: 0 0 8px; line-height: 1.6; font-size: 14px; }
.scmem-page .scmem-output__steps li::marker { color: #237F7D; font-weight: 700; }
.scmem-page .scmem-output__pre { white-space: pre-wrap; }
.scmem-page .scmem-output__box { border: 1px solid #DDE9E6; background: #FBFDFC; border-radius: 12px; padding: 16px 18px; margin: 0 0 16px; }
.scmem-page .scmem-output__box--active  { border-color: #B9DDD7; background: #EFF9F7; }
.scmem-page .scmem-output__box--revoked { border-color: #E9C7C3; background: #FFF5F3; }
.scmem-page .scmem-output__box--pending { border-color: #E8D39D; background: #FFF8E8; }
.scmem-page .scmem-output__small { font-size: 12px !important; color: var(--scmem-muted); }
.scmem-page .scmem-output__small code { font-size: 11px; word-break: break-all; }
.scmem-page .scmem-output__revoked { color: #A83A2E; }
.scmem-page .scmem-output__foot { border-top: 1px solid var(--scmem-border); padding-top: 12px; margin-top: 8px; font-size: 12px; color: var(--scmem-muted); }
@media (max-width: 600px) {
    .scmem-page .scmem-output { padding: 18px 16px; }
    .scmem-page .scmem-output__head { flex-direction: column; }
    .scmem-page .scmem-output__status { text-align: left; }
}
@media print {
    body * { visibility: hidden !important; }
    #scmem-output, #scmem-output * { visibility: visible !important; }
    #scmem-output { position: absolute !important; left: 0; top: 0; width: 100% !important; max-width: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
    .scmem-no-print { display: none !important; }
    .scmem-page .scmem-output__status { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .scmem-page .scmem-output__box { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.scmem-page .scmem-output-links { list-style: none; margin: 0 0 var(--scmem-s3); padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.scmem-page .scmem-output-links li { border: 1px solid var(--scmem-border); border-radius: var(--scmem-radius-sm); padding: 10px 14px; background: #FBFDFC; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.scmem-page .scmem-output-links li:hover { border-color: #80BEB5; background: #F4FBFA; }

/* Quiz attempts (17 Sep 2026): one table row per attempt — date, score, result pill, Review — the same scmem-table every other record list uses, instead of a bulleted run-on line. The label sits a full step below the Take-the-quiz button; the table is the card's last child so it carries no bottom margin. */
.scmem-page .scmem-card .scmem-attempts__label { margin-top: var(--scmem-s3); }
.scmem-page .scmem-card .scmem-attempts { margin-bottom: 0; box-shadow: none; }
.scmem-page .scmem-attempts .scmem-table td .scmem-pill { vertical-align: middle; }
/* On a phone the four columns will not fit a 326px card and a sideways scroll would hide the result and the Review link, so each attempt stacks: date on top, then score · result · Review on one line. */
@media (max-width: 600px) {
    .scmem-page .scmem-attempts .scmem-table thead { display: none; }
    .scmem-page .scmem-attempts .scmem-table, .scmem-page .scmem-attempts .scmem-table tbody, .scmem-page .scmem-attempts .scmem-table tr { display: block; }
    .scmem-page .scmem-attempts .scmem-table tr { padding: 10px 14px; border-bottom: 1px solid var(--scmem-border); }
    .scmem-page .scmem-attempts .scmem-table tr:last-child { border-bottom: 0; }
    .scmem-page .scmem-attempts .scmem-table td { display: inline-block; padding: 0; border: 0; min-width: 0; width: auto; vertical-align: middle; }
    .scmem-page .scmem-attempts .scmem-table td:first-child { display: block; font-weight: 600; margin: 0 0 4px; }
    .scmem-page .scmem-attempts .scmem-table td + td + td { margin-left: 12px; }
    .scmem-page .scmem-attempts .scmem-table tbody tr:hover > td { background: transparent; }
}

/* ── The referral wizard (D150, 0.9.32) ──────────────────────────── */
.scmem-referral .scmem-referral__step-title { margin: 0 0 4px; }
.scmem-referral .scmem-referral__intro { margin: 0 0 var(--scmem-s3); }
.scmem-req { color: var(--scmem-danger, #B42318); font-weight: 700; }
.scmem-req-note { font-size: 13px; }
.scmem-page .scmem-card--warn { border-color: var(--scmem-warn-line); }
.scmem-notice--error { background: var(--scmem-danger-bg, #FEF3F2); border-color: var(--scmem-danger-line, #FDA29B); color: #912018; }
/* Eight steps have to fit a phone: the numbers always show, the words only from 640px up, except the current one. */
.scmem-page ol.scmem-steps--many { gap: 6px 10px; }
.scmem-page .scmem-steps--many .scmem-steps__item a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.scmem-page .scmem-steps--many .scmem-steps__item a:hover .scmem-steps__n, .scmem-page .scmem-steps--many .scmem-steps__item a:focus-visible .scmem-steps__n { border-color: var(--scmem-navy); }
@media (max-width: 639px) {
    /* Numbers only, in order — the step heading right below carries the current step's name. */
    .scmem-page .scmem-steps--many .scmem-steps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .scmem-page .scmem-steps--many .scmem-steps__item { gap: 0; }
    .scmem-page ol.scmem-steps--many { gap: 6px; margin-bottom: var(--scmem-s2); }
}
/* The case number under the title never breaks in the middle. */
.scmem-referral .scmem-header__subtitle { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* A step card's fields: two columns, a field spans both unless it is a short one (a phone, an ID, a date). */
.scmem-page .scmem-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--scmem-s2); row-gap: 0; }
.scmem-page .scmem-fields > * { grid-column: 1 / -1; min-width: 0; }
.scmem-page .scmem-fields > .scmem-field--half { grid-column: auto; }
@media (max-width: 480px) { .scmem-page .scmem-fields > .scmem-field--half { grid-column: 1 / -1; } }
/* The hint under a field stays small and muted whatever the theme does to a paragraph. */
.scmem-page .scmem-field p.scmem-field__help { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--scmem-muted); max-width: none; }
.scmem-page .scmem-referral__intro .scmem-req-note { white-space: nowrap; }
.scmem-page .scmem-wizard-exit { margin-top: var(--scmem-s2); }
/* Observations: each ticked indicator opens its factual note. */
.scmem-page fieldset.scmem-obs { border: 0; padding: 0; margin: 0 0 var(--scmem-s3); min-width: 0; }
.scmem-page .scmem-obs legend { padding: 0; margin: 0 0 8px; }
.scmem-checks--notes { display: block; }
.scmem-obs__item { border-left: 3px solid transparent; padding-left: 8px; margin: 0 0 4px; }
.scmem-obs__item.is-on { border-left-color: var(--scmem-teal, #2CA6A4); background: var(--scmem-bg-subtle); border-radius: 0 var(--scmem-radius-sm) var(--scmem-radius-sm) 0; padding-bottom: 8px; }
.scmem-obs__note { margin: 4px 0 0 26px; }
.scmem-obs__note-label { font-size: 13px; font-weight: 600; color: var(--scmem-muted); }
.scmem-page .scmem-obs__note textarea { min-height: 56px; }
/* The site picker: a filter box over the grouped list. */
.scmem-site__filter { margin-bottom: 6px; }
.scmem-page .scmem-site select[size] { height: auto; }
.scmem-page input.is-locked { background: var(--scmem-bg-subtle); color: var(--scmem-muted); }
/* Copy rows on the code page and the confirmation. */
.scmem-copy { display: grid; grid-template-columns: minmax(110px, 34%) 1fr auto; gap: var(--scmem-s1); align-items: center; padding: 8px 0; border-top: 1px solid var(--scmem-bg-subtle); }
.scmem-copy:first-child { border-top: 0; padding-top: 0; }
.scmem-copy__label { font-weight: 600; color: var(--scmem-text-strong); font-size: 14px; }
.scmem-copy .scmem-code__value { user-select: all; -webkit-user-select: all; font-size: 18px; justify-self: start; }
.scmem-page .scmem-copy__btn { width: auto; min-width: 84px; }
.scmem-page .scmem-copy__btn.is-copied { background: var(--scmem-ok-bg); border-color: var(--scmem-ok); color: var(--scmem-ok); }
.scmem-actions--wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.scmem-actions--wrap .scmem-inline, .scmem-actions--wrap form.scmem-form.scmem-inline { display: inline-flex; margin: 0; }
.scmem-page .scmem-actions--wrap .scmem-btn { width: auto; }
@media (max-width: 480px) {
    .scmem-copy { grid-template-columns: 1fr auto; }
    .scmem-copy__label { grid-column: 1 / -1; }
    .scmem-copy .scmem-code__value { font-size: 15px; letter-spacing: .04em; }
}
@media print {
    .scmem-referral, .scmem-referral * { visibility: visible !important; }
    .scmem-referral { position: absolute !important; left: 0; top: 0; width: 100% !important; max-width: none !important; }
    .scmem-referral .scmem-btn, .scmem-referral .scmem-inline, .scmem-referral .scmem-steps, .scmem-referral form { display: none !important; }
    .scmem-referral .scmem-code__value { border: 1px solid #000; }
}
/* D150: the French half of a template, folded under the English fields */
.scmem-page details.scmem-details--lang { border: 1px solid var(--scmem-border); border-radius: var(--scmem-radius); padding: 12px 16px; background: var(--scmem-bg-subtle); margin: var(--scmem-s2) 0 var(--scmem-s3); }
.scmem-page details.scmem-details--lang > summary { font-weight: 700; color: var(--scmem-text-strong); cursor: pointer; }
.scmem-page details.scmem-details--lang[open] > summary { margin-bottom: 8px; }

/* D151: the member-exclusive Express offer — Ben's gold member-value card. A pick (a label round a
   checkbox) on the Bookings form; a card with its own button on Self-service. Gold is reserved for
   the member-exclusive price (Ben's palette note), so nothing else in the portal uses it. */
.scmem-page .scmem-offer { display: flex; gap: 14px; align-items: flex-start; background: #FFF4D7; border: 1px solid #E5CC7E; border-radius: var(--scmem-radius); padding: 14px 16px; margin: 0 0 var(--scmem-s2); color: var(--scmem-text); font-weight: 400; }
.scmem-page .scmem-offer--pick { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.scmem-page .scmem-offer--pick:hover, .scmem-page .scmem-offer--pick:focus-within { border-color: #C9A54A; box-shadow: 0 0 0 3px rgba(201, 165, 74, .22); }
.scmem-page .scmem-offer--pick:has(input:checked) { border-color: #9B6A10; box-shadow: inset 0 0 0 1px #9B6A10; }
.scmem-page .scmem-offer > input[type="checkbox"] { margin: 3px 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: #9B6A10; }
.scmem-page .scmem-offer__body { flex: 1 1 auto; min-width: 0; }
.scmem-page .scmem-offer__kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8A651D; margin: 0 0 3px; }
.scmem-page .scmem-offer__title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; font-weight: 700; color: var(--scmem-text-strong); font-size: 15px; line-height: 1.35; }
.scmem-page .scmem-offer__price { color: #9B6A10; font-weight: 700; white-space: nowrap; }
.scmem-page .scmem-offer__price .woocommerce-Price-amount, .scmem-page .scmem-offer__price .amount { color: inherit; font-weight: inherit; }
.scmem-page .scmem-offer__text { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--scmem-text); }
.scmem-page .scmem-offer .scmem-actions { margin: 12px 0 0; }
@media (max-width: 480px) { .scmem-page .scmem-offer { padding: 12px; gap: 10px; } }

/* ── Certificate co-branding on the company profile (0.9.40, D160) ── */
.scmem-page .scmem-cobrand__preview { margin: 0 0 8px; }
.scmem-page .scmem-cobrand__preview img { max-height: 72px; width: auto; max-width: 100%; background: #fff; border: 1px solid var(--scmem-border); border-radius: 6px; padding: 8px; }
.scmem-page .scmem-cobrand__preview--sig img { max-height: 90px; }
.scmem-page .scmem-sigpad__modes { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 10px; }
.scmem-page .scmem-sigpad__modes label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }
.scmem-page .scmem-sigpad__wrap { position: relative; }
.scmem-page .scmem-sigpad__canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; background: #fff; border: 1px dashed var(--scmem-navy); border-radius: 8px; cursor: crosshair; touch-action: none; }
.scmem-page .scmem-sigpad__canvas:focus-visible { outline: 2px solid var(--scmem-teal, #40B4B4); outline-offset: 2px; }
.scmem-page .scmem-sigpad__hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); color: #A0AEC0; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
.scmem-page .scmem-sigpad__hint[hidden] { display: none; }
.scmem-page .scmem-sigpad__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 0; }
.scmem-page .scmem-sigpad__status:empty { display: none; }

/* ── Service agreement (0.9.40, D162) ─────────────────────────────── */
.scmem-page .scmem-terms { max-height: 320px; overflow-y: auto; padding: 14px 16px; background: var(--scmem-bg-subtle); border: 1px solid var(--scmem-border); border-radius: var(--scmem-radius-sm); font-size: 14px; line-height: 1.6; white-space: normal; margin: 0 0 var(--scmem-s3); }
.scmem-page .scmem-terms--full { max-height: none; }
.scmem-page .scmem-terms:focus-visible { outline: 2px solid var(--scmem-teal); outline-offset: 2px; }
.scmem-page .scmem-agreement__types { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scmem-page .scmem-agreement__types .scmem-btn[aria-current="true"] { pointer-events: none; }