/*
 * SafeHub v3.0 look (26 Oct 2026, from the mock-ups at https://claude.ai/artifact/MFag9U2DHSMtZyWSe6fxUq).
 * Hand-written so it doesn't depend on the purged Tailwind build; loaded after app.css. Classes are "sh-" prefixed.
 * Colours: slate #14211F (menu, text), teal #0F766E (actions, links; passes contrast on white), logo teal #2BA89A,
 * ground #F4F7F6. Status: Cleared teal, Waiting amber, Not cleared burnt orange, Not joined / Not set up grey.
 */
:root {
    --sh-ink: #14211F;
    --sh-ink-2: #33413D;
    --sh-muted: #55635F;
    --sh-line: #E1E8E6;
    --sh-line-2: #EDF1F0;
    --sh-ground: #F4F7F6;
    --sh-teal: #0F766E;
    --sh-teal-dark: #0B5A54;
    --sh-teal-logo: #2BA89A;
    --sh-menu: #14211F;
    --sh-menu-2: #1F302D;
    --sh-menu-text: #DCE7E4;
    --sh-menu-muted: #A9BDB8;
    --sh-cleared: #0F766E;   --sh-cleared-bg: #E8F4F1;   --sh-cleared-text: #0F5F58;
    --sh-waiting: #F59E0B;   --sh-waiting-bg: #FEF3DC;   --sh-waiting-text: #8A4B06;
    --sh-risk: #C2410C;      --sh-risk-bg: #FDECE4;      --sh-risk-text: #9A3412;
    --sh-quiet: #98A6A2;     --sh-quiet-bg: #EEF2F1;     --sh-quiet-text: #45524E;
}

body { font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--sh-ink); }
.sh-app-bg { background: var(--sh-ground); }
.sh-display { font-family: 'Space Grotesk', 'Source Sans 3', system-ui, sans-serif; letter-spacing: -0.01em; }

/* ---- Side menu --------------------------------------------------------------------------------------------- */
.sh-sidebar { background: var(--sh-menu); color: var(--sh-menu-text); }
.sh-brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 8px; }
.sh-brand .sh-logo { height: 30px; width: auto; display: block; }
.sh-orgcard { margin: 12px 12px 0; padding: 12px; border-radius: 10px; background: var(--sh-menu-2); display: flex; align-items: center; gap: 10px; }
.sh-orgcard-logo { width: 40px; height: 40px; border-radius: 8px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.sh-orgcard-logo img { max-width: 36px; max-height: 36px; }
.sh-orgcard-label { font-size: 11px; letter-spacing: 0.06em; color: var(--sh-menu-muted); text-transform: uppercase; }
.sh-orgcard-name { font-weight: 600; color: #FFFFFF; line-height: 1.25; }
.sh-nav { list-style: none; margin: 0; padding: 16px 12px 0; }
.sh-nav-link { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--sh-menu-text); text-decoration: none; font-size: 15px; margin-bottom: 2px; }
.sh-nav-link:hover { background: var(--sh-menu-2); color: #FFFFFF; }
.sh-nav-link.is-active { background: var(--sh-teal-logo); color: #FFFFFF; font-weight: 600; }
.sh-nav-link svg { width: 18px; height: 18px; flex: none; }
.sh-nav-link .sh-nav-label { flex: 1; min-width: 0; }
.sh-nav-heading { padding: 14px 12px 4px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sh-menu-muted); }
.sh-nav-sep { height: 1px; background: #2C403C; margin: 10px 12px; }
.sh-count { background: var(--sh-waiting); color: var(--sh-ink); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.sh-account { border-top: 1px solid #2C403C; padding: 12px; color: #FFFFFF; }
.sh-account button { color: #FFFFFF; }
.sh-sidebar .sh-mobile-toggle { color: var(--sh-menu-text); }

/* ---- Page header (the x-slot "header" strip) --------------------------------------------------------------- */
.sh-page-header { background: #FFFFFF; border-bottom: 1px solid var(--sh-line); }
.sh-page-header h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; color: var(--sh-ink); }

/* ---- Page body ----------------------------------------------------------------------------------------------- */
.sh-page { max-width: 1120px; padding: 28px 32px 48px; box-sizing: border-box; display: flex; flex-direction: column; gap: 22px; text-align: left; }
@media (max-width: 640px) { .sh-page { padding: 20px 16px 40px; gap: 16px; } }
.sh-h1 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; color: var(--sh-ink); }
.sh-h2 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 700; color: var(--sh-ink); }
.sh-kicker { color: var(--sh-muted); font-size: 15px; }
.sh-muted { color: var(--sh-muted); }
.sh-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sh-between { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sh-card { background: #FFFFFF; border: 1px solid var(--sh-line); border-radius: 14px; padding: 22px 24px; }
@media (max-width: 640px) { .sh-card { padding: 18px; } }
.sh-cols { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.sh-col-wide { flex: 3 1 380px; min-width: 0; }
.sh-col-narrow { flex: 2 1 300px; min-width: 0; }

/* Buttons */
.sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.sh-btn-primary { background: var(--sh-teal); color: #FFFFFF; }
.sh-btn-primary:hover { background: var(--sh-teal-dark); color: #FFFFFF; }
.sh-btn-secondary { background: #FFFFFF; color: var(--sh-ink); border-color: #C9D6D2; }
.sh-btn-secondary:hover { border-color: var(--sh-teal); color: var(--sh-teal); }
.sh-btn-block { display: flex; width: 100%; padding: 14px; font-size: 17px; border-radius: 10px; }

/* Status summary */
.sh-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: #E6ECEA; }
.sh-bar > span { display: block; }
.sh-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .sh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sh-tile { display: block; text-decoration: none; color: var(--sh-ink); border-radius: 10px; padding: 14px 16px; }
.sh-tile:hover { outline: 2px solid currentColor; outline-offset: -2px; }
.sh-tile-num { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 700; color: var(--sh-ink); }
.sh-tile-label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.sh-dot { width: 10px; height: 10px; border-radius: 999px; flex: none; display: inline-block; }
.is-cleared { background: var(--sh-cleared-bg); color: var(--sh-cleared-text); }
.is-waiting { background: var(--sh-waiting-bg); color: var(--sh-waiting-text); }
.is-risk { background: var(--sh-risk-bg); color: var(--sh-risk-text); }
.is-quiet { background: var(--sh-quiet-bg); color: var(--sh-quiet-text); }
.dot-cleared { background: var(--sh-cleared); }
.dot-waiting { background: var(--sh-waiting); }
.dot-risk { background: var(--sh-risk); }
.dot-quiet { background: var(--sh-quiet); }

/* "Needs you" list */
.sh-list { display: flex; flex-direction: column; }
.sh-list-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--sh-line-2); }
.sh-list-row:first-child { border-top: 0; }
.sh-list-main { flex: 1 1 220px; min-width: 0; }
.sh-list-title { font-weight: 600; }
.sh-chip { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
.sh-chip svg { width: 18px; height: 18px; }
.sh-empty { color: var(--sh-muted); padding: 8px 0; }

/* Tables and pills */
.sh-table-wrap { overflow-x: auto; }
.sh-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sh-table th { text-align: left; font-weight: 600; color: var(--sh-muted); padding: 8px 0; border-bottom: 1px solid var(--sh-line); }
.sh-table td { padding: 11px 0; border-bottom: 1px solid var(--sh-line-2); }
.sh-table tr:last-child td { border-bottom: 0; }
.sh-table .num { text-align: right; }
.sh-pill { display: inline-block; font-weight: 600; font-size: 14px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }

/* Small stats strip */
.sh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .sh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sh-stat-num { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; }

/* Set-up checklist (kept from v2.9.0, restyled) */
.sh-steps { list-style: none; margin: 0; padding: 0; }
.sh-steps li { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--sh-line-2); }
.sh-steps li:first-child { border-top: 0; }
.sh-step-mark { width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none; }

/* The account panel at the foot of the menu (Profile, Log out, Switch organisation), on the dark menu. */
.sh-account #acc, .sh-account .bg-gray-50, .sh-account .bg-white { background: transparent !important; }
.sh-account a, .sh-account button { color: var(--sh-menu-text) !important; }
.sh-account a:hover { background: var(--sh-menu-2) !important; color: #FFFFFF !important; }
.sh-account .text-gray-400, .sh-account .text-xs { color: var(--sh-menu-muted) !important; }
.sh-account .border-gray-100, .sh-account .border-gray-200 { border-color: #2C403C !important; }
.sh-account img.rounded-full { border: 2px solid var(--sh-teal-logo); }

/* The menu scrolls on its own above the account panel, so a long menu is never covered by it. */
@media (min-width: 1024px) {
    .sh-sidebar { display: flex; flex-direction: column; height: 100vh; }
    .sh-sidebar > .overflow-auto { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    .sh-sidebar > .overflow-auto::-webkit-scrollbar { width: 6px; }
    .sh-sidebar > .overflow-auto::-webkit-scrollbar-thumb { background: #2C403C; border-radius: 3px; }
    .sh-account { flex: none; max-height: 45vh; overflow-y: auto; }
}
.sh-account #acc { margin-top: 0 !important; margin-bottom: 0 !important; }
.sh-orgcard-logo.is-dark { background: #1F2937; }

/* ---- Member "what I need to do" page ------------------------------------------------------------------------ */
.sh-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.sh-hero-main { flex: 1 1 340px; min-width: 0; }
.sh-hero-lead { margin: 6px 0 0; font-size: 18px; color: var(--sh-ink-2); }
.sh-ring { width: 116px; height: 116px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex: none; }
.sh-ring-inner { width: 90px; height: 90px; border-radius: 999px; background: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sh-ring-num { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; }
@media (max-width: 640px) { .sh-ring { display: none; } }
.sh-progress { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: #E6ECEA; margin-top: 14px; }
.sh-progress > span { background: var(--sh-teal); }
@media (min-width: 641px) { .sh-progress { display: none; } }
.sh-tasks { display: flex; flex-direction: column; gap: 12px; }
.sh-task { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; background: #FFFFFF; border: 1px solid var(--sh-line); border-radius: 14px; padding: 18px 22px; }
.sh-task-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.sh-task-icon svg { width: 22px; height: 22px; }
.sh-task-main { flex: 1 1 280px; min-width: 0; }
.sh-task-title { font-weight: 700; font-size: 17px; }
.sh-task-detail { color: var(--sh-muted); }
.sh-task-detail.is-urgent { color: var(--sh-risk-text); }
@media (max-width: 640px) {
    .sh-task { padding: 16px; }
    .sh-task-icon { display: none; }
    .sh-task .sh-btn { width: 100%; padding: 13px; font-size: 17px; }
}
.sh-done-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--sh-line-2); }
.sh-done-row:first-child { border-top: 0; }
.sh-done-row svg { width: 22px; height: 22px; flex: none; }
.sh-done-title { flex: 1 1 200px; font-weight: 600; }

/* Phones: the page already sits in a padded frame, so no second margin; a slightly smaller headline. */
@media (max-width: 640px) {
    .sh-page { padding-left: 0; padding-right: 0; }
    .sh-h1 { font-size: 25px; }
    .sh-banner-wrap { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ---- Shared components (step 4): tables, pills, buttons, page headers ------------------------------------- */
.sh-table-card { background: #FFFFFF; border: 1px solid var(--sh-line); border-radius: 14px; padding: 4px 16px; }
.sh-dtable { border-collapse: collapse !important; border-spacing: 0 !important; }
.sh-dthead th { color: var(--sh-muted); font-weight: 600; font-size: 14px; text-transform: none; letter-spacing: 0; padding: 12px; border-bottom: 1px solid var(--sh-line); background: transparent; white-space: nowrap; }
.sh-dthead th a { color: var(--sh-muted); }
.sh-dcell { padding: 10px 12px; border-bottom: 1px solid var(--sh-line-2); vertical-align: middle; }
.sh-dtable tbody tr:last-child .sh-dcell { border-bottom: 0; }
.sh-dtable tbody tr:hover .sh-dcell { background: #FAFCFB; }
.sh-pill-icon { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.sh-pill-svg { width: 16px; height: 16px; display: inline-flex; }
.sh-pill-svg svg { width: 16px; height: 16px; }
.sh-btn:disabled, .sh-btn[disabled] { opacity: 0.55; cursor: default; }
a.sh-btn-primary, a.sh-btn-primary:hover { color: #FFFFFF; }
a.sh-btn-secondary { color: var(--sh-ink); }
.sh-page-header > div:first-child { flex-wrap: wrap; align-items: center; }
.sh-page-header .lg\:flex-1 { flex-wrap: wrap; gap: 8px; padding: 8px 16px; }
@media (min-width: 1024px) { .sh-page-header .lg\:flex-1 { padding: 8px 32px 8px 0; } }
/* Filter tabs under a page header (People: All, Cleared, ...) */
.sh-page-header nav a, .sh-page-header .border-b-2 { font-weight: 600; }

/* ======================================================================================================= */
/* Every page like the dashboard (26 Oct, product owner: "each page to look and feel like the new dashboard")  */
/* ======================================================================================================= */
body { font-size: 16px; }
/* Page heading: big and clear on the page background, no white bar, same width as the dashboard. */
.sh-page-header { background: transparent; border-bottom: 0; }
.sh-page-header > div { max-width: 1120px; }
.sh-page-header > div:first-child > div:first-child { padding: 28px 32px 6px !important; }
.sh-page-header h2 { font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; }
@media (max-width: 640px) { .sh-page-header > div:first-child > div:first-child { padding: 20px 16px 4px !important; } .sh-page-header h2 { font-size: 25px; } }
.sh-page-header input[type="search"] { border: 1px solid #C9D6D2 !important; border-radius: 10px; height: 44px; font-size: 15px; background: #FFFFFF; }
.sh-container { max-width: 1120px; padding: 12px 32px 48px; box-sizing: border-box; }
@media (max-width: 640px) { .sh-container { padding: 12px 0 40px; } }
.sh-container > * + * { margin-top: 0; }

/* Tabs: soft pills that wrap, instead of an underlined strip running off the page. */
nav[aria-label="Tabs"], .sh-tabs { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 0 0 18px !important; }
nav[aria-label="Tabs"] > * + * { margin-left: 0 !important; }
nav[aria-label="Tabs"] a, .sh-tabs a { border: 1px solid transparent !important; border-radius: 999px; padding: 8px 14px !important; font-size: 15px !important; color: var(--sh-muted) !important; font-weight: 600; text-decoration: none; background: transparent; }
nav[aria-label="Tabs"] a:hover, .sh-tabs a:hover { background: #FFFFFF; color: var(--sh-ink) !important; }
nav[aria-label="Tabs"] a.text-green, nav[aria-label="Tabs"] a.border-green, .sh-tabs a.is-active { background: var(--sh-cleared-bg); color: var(--sh-cleared-text) !important; border-color: #CFE7E1 !important; }
div:has(> nav[aria-label="Tabs"]) { border-bottom: 0 !important; margin-top: 0 !important; }

/* Notices: clean white cards with dark, readable text (were yellow boxes with brown text). */
.bg-yellow-50, .bg-amber-50, .bg-blue-50, .bg-orange-50 { background: #FFFFFF !important; border: 1px solid var(--sh-line) !important; border-radius: 14px !important; }
.text-yellow-900, .text-yellow-800, .text-amber-900, .text-amber-800, .text-blue-800, .text-blue-900, .text-orange-800 { color: var(--sh-ink) !important; }
.text-yellow-700, .text-amber-700 { color: var(--sh-waiting-text) !important; }
.bg-green-50 { background: var(--sh-cleared-bg) !important; border-color: #CFE7E1 !important; border-radius: 12px; }
.text-green-800, .text-green-700 { color: var(--sh-cleared-text) !important; }
.text-red-700, .text-red-600 { color: var(--sh-risk-text) !important; }

/* Text: darker greys and a touch larger, so it's easy to read. */
.text-gray-400 { color: #6E7C78 !important; }
.text-gray-500 { color: var(--sh-muted) !important; }
.text-gray-600, .text-gray-700 { color: var(--sh-ink-2) !important; }
.text-gray-800, .text-gray-900 { color: var(--sh-ink) !important; }
.text-sm { font-size: 15px !important; line-height: 1.5 !important; }
.text-xs { font-size: 13px !important; line-height: 1.45 !important; }
:is(main, .sh-guest) h3.text-lg, :is(main, .sh-guest) h2.text-lg, :is(main, .sh-guest) .text-lg.font-medium { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--sh-ink); }

/* Forms (Settings, profile, slide-in panels): white cards, rounded inputs, teal focus. */
:is(main, .sh-guest) .shadow.sm\:rounded-md, :is(main, .sh-guest) .shadow.sm\:rounded-lg, :is(main, .sh-guest) .bg-white.shadow { background: #FFFFFF; border: 1px solid var(--sh-line); border-radius: 14px !important; box-shadow: none !important; }
:is(main, .sh-guest) input[type="text"], :is(main, .sh-guest) input[type="email"], :is(main, .sh-guest) input[type="date"], :is(main, .sh-guest) input[type="number"], :is(main, .sh-guest) input[type="password"], :is(main, .sh-guest) input[type="tel"], :is(main, .sh-guest) input[type="url"], :is(main, .sh-guest) select, :is(main, .sh-guest) textarea { border-color: #C9D6D2 !important; border-radius: 10px !important; font-size: 16px; }
:is(main, .sh-guest) input:focus, :is(main, .sh-guest) select:focus, :is(main, .sh-guest) textarea:focus { border-color: var(--sh-teal) !important; box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15) !important; outline: none; }
:is(main, .sh-guest) label { color: var(--sh-ink-2); font-weight: 600; }
.sh-btn-danger { background: #B42318; color: #FFFFFF; }
.sh-btn-danger:hover { background: #912018; }

/* Page header: the title on its own line when space is short, then the search and buttons, wrapping. */
.sh-page-header > div:first-child { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.sh-page-header .lg\:flex-1 { flex: 1 1 520px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.sh-page-header .lg\:flex-1 > span, .sh-page-header .lg\:flex-1 > div > span { flex-wrap: wrap; gap: 10px; }
.sh-page-header .lg\:w-1\/3 { flex: 1 1 260px; max-width: 380px; margin: 0 !important; }
/* Tables fit the page width (they were wider than the page and ran off the edge). */
.sh-dtable { min-width: 0 !important; }
.sh-dcell { overflow-wrap: anywhere; }

/* Form and action sections (Settings, Profile, ...): one white card each. */
.sh-form-section { margin-bottom: 22px; }
.sh-form-card { padding: 0 !important; }
.sh-form-head { padding: 22px 24px 4px; }
.sh-form-head p { margin: 4px 0 0; }
.sh-form-body { padding: 18px 24px 24px; }
.sh-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--sh-line-2); background: #FAFCFB; border-radius: 0 0 14px 14px; }
@media (max-width: 640px) { .sh-form-head { padding: 18px 18px 4px; } .sh-form-body { padding: 14px 18px 18px; } .sh-form-actions { padding: 12px 18px; } }
/* Tick boxes and radio buttons in teal (were purple). */
:is(main, .sh-guest) input[type="checkbox"], :is(main, .sh-guest) input[type="radio"] { accent-color: var(--sh-teal); color: var(--sh-teal) !important; }
.text-indigo-600 { color: var(--sh-teal) !important; }

/* Check uploads (Review mode): the list and the open upload side by side as cards. */
.sh-review { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; max-width: 1120px; padding: 12px 32px 48px; box-sizing: border-box; }
.sh-review-list { flex: 3 1 520px; min-width: 0; }
.sh-review-panel { flex: 2 1 320px; min-width: 0; background: #FFFFFF; border: 1px solid var(--sh-line); border-radius: 14px; padding-bottom: 20px; position: sticky; top: 16px; }
.sh-review-panel .mx-10 { margin-left: 22px !important; margin-right: 22px !important; }
.sh-review-panel .mt-28 { margin-top: 24px !important; }
@media (max-width: 640px) { .sh-review { padding: 12px 0 40px; } }
/* Role names keep their room; labels sit beside them on wide screens and wrap below on narrow ones. */
.sh-dcell a + .sh-pill { white-space: nowrap; }
.sh-dcell > div { flex-wrap: wrap; row-gap: 4px; }

/* v3.0 step 5: card lists (notices, events) - smaller buttons along the bottom, and the line shown when a list is empty. */
.sh-btn-sm { padding: 7px 14px; font-size: 14px; }
.sh-tile { display: flex; flex-direction: column; }
.sh-tile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }
.sh-empty-card { color: var(--sh-muted); text-align: center; padding: 36px 24px; }
.sh-dbs-key { font-size: 14px; color: var(--sh-ink); }
.sh-dbs-key ol { border-color: var(--sh-line); color: #3B4B47; }
/* The page column never grows wider than the screen: a wide table (fixtures) scrolls inside its own card. */
.sh-content { min-width: 0; }
@media (min-width: 1024px) { .sh-content { width: calc(100% - 20rem); } }
/* Older buttons still written with Tailwind classes (bg-green, white text, the hover that turned them white):
   the same look as .sh-btn-primary, so every page's buttons match without touching each template. */
:is(main, .sh-guest) .bg-green.text-white.rounded-lg, :is(main, .sh-guest) .bg-green.text-white.rounded-md,
.sh-content .bg-green.text-white.rounded-lg {
    background: var(--sh-teal); border-color: var(--sh-teal); color: #FFFFFF; border-radius: 8px; font-weight: 600;
}
:is(main, .sh-guest) .bg-green.text-white.rounded-lg:hover, :is(main, .sh-guest) .bg-green.text-white.rounded-md:hover,
.sh-content .bg-green.text-white.rounded-lg:hover {
    background: var(--sh-teal-dark); border-color: var(--sh-teal-dark); color: #FFFFFF;
}
.sh-empty-card { grid-column: 1 / -1; }

/* v3.0 step 6 (product owner, 26 Oct): status tabs in their status colour - green Cleared/Checked, amber Waiting,
   red Not cleared; filled when selected. */
nav[aria-label="Tabs"] a[data-tone="cleared"] { background: var(--sh-cleared-bg); color: var(--sh-cleared-text) !important; border-color: #CFE7E1 !important; }
nav[aria-label="Tabs"] a[data-tone="waiting"] { background: var(--sh-waiting-bg); color: var(--sh-waiting-text) !important; border-color: #F6DDA8 !important; }
nav[aria-label="Tabs"] a[data-tone="risk"] { background: var(--sh-risk-bg); color: var(--sh-risk-text) !important; border-color: #F6CDBB !important; }
nav[aria-label="Tabs"] a[data-tone="cleared"].text-green { background: var(--sh-cleared); color: #FFFFFF !important; border-color: var(--sh-cleared) !important; }
nav[aria-label="Tabs"] a[data-tone="waiting"].text-green { background: var(--sh-waiting); color: var(--sh-ink) !important; border-color: var(--sh-waiting) !important; }
nav[aria-label="Tabs"] a[data-tone="risk"].text-green { background: var(--sh-risk); color: #FFFFFF !important; border-color: var(--sh-risk) !important; }

/* Every heading bold and dark. */
:is(main, .sh-guest) h1, :is(main, .sh-guest) h2, :is(main, .sh-guest) h3, :is(main, .sh-guest) h4, .sh-content h1, .sh-content h2, .sh-content h3, .sh-content h4 { font-weight: 700 !important; color: var(--sh-ink); }
.sh-dthead th, .sh-dthead th a, .sh-table th { color: var(--sh-ink); font-weight: 700; }

/* The name in each row (person, document, policy, role, team...) bold and black; still underlines on hover when
   it's a link. */
.sh-dtable tbody td.sh-dcell:first-child, .sh-dtable tbody td.sh-dcell:first-child > div > a, .sh-dcell.sh-name-cell,
.sh-name-link { color: var(--sh-ink) !important; font-weight: 700; }
.sh-name-link:hover, .sh-dtable tbody td.sh-dcell:first-child > div > a:hover { text-decoration: underline; }
.sh-dtable tbody td.sh-dcell:first-child .sh-pill { font-weight: 600; }
.sh-dtable tbody td.sh-dcell.sh-empty { font-weight: 400; color: var(--sh-muted) !important; }

/* v3.0 step 7 (product owner, 26 Oct): a brighter green for "cleared / checked" statuses; red statuses with no
   background - bold red text instead; every table heading bold. Buttons and the selected menu item keep the teal. */
:root {
    --sh-cleared: #16A34A;   --sh-cleared-bg: #DCFCE7;   --sh-cleared-text: #15803D;
    --sh-risk: #DC2626;      --sh-risk-text: #B91C1C;
}
/* tabs that aren't a status (All, Admins...) stay teal when selected */
nav[aria-label="Tabs"] a.text-green:not([data-tone]), nav[aria-label="Tabs"] a.border-green:not([data-tone]), .sh-tabs a.is-active { background: #E8F4F1; color: #0F5F58 !important; border-color: #CFE7E1 !important; }
.bg-green-50 { background: #E8F4F1 !important; }

.is-risk { background: transparent !important; color: var(--sh-risk-text) !important; font-weight: 700 !important; }
.sh-pill.is-risk { padding-left: 0; padding-right: 0; }
.sh-tile.is-risk { background: #FFFFFF !important; box-shadow: inset 0 0 0 1px var(--sh-line); }
.sh-tile.is-risk .sh-tile-num { color: var(--sh-risk-text); }
nav[aria-label="Tabs"] a[data-tone="risk"] { background: transparent !important; color: var(--sh-risk-text) !important; border-color: transparent !important; font-weight: 700; }
nav[aria-label="Tabs"] a[data-tone="risk"].text-green { background: #FFFFFF !important; color: var(--sh-risk-text) !important; border-color: var(--sh-risk) !important; }
:is(main, .sh-guest) .bg-red-50, :is(main, .sh-guest) .bg-red-100, .sh-content .bg-red-50, .sh-content .bg-red-100 { background: transparent !important; }
:is(main, .sh-guest) .text-red-500, :is(main, .sh-guest) .text-red-600, :is(main, .sh-guest) .text-red-700, :is(main, .sh-guest) .text-red-800 { color: var(--sh-risk-text) !important; font-weight: 700; }

:is(main, .sh-guest) thead th, :is(main, .sh-guest) thead th a { color: var(--sh-ink) !important; font-weight: 700 !important; }

/* v3.0 step 7 (product owner, 26 Oct): "make all text bold - some of it is very small and hard to read, even on an
   iMac". Every word at least semi-bold (600); headings, names and numbers stay bold (700) so they still stand out.
   Small text is bigger: text-xs 14 px, text-sm 16 px, body 17 px. */
body, body * { font-weight: 600; }
.font-light, .font-normal, .font-medium, .font-thin { font-weight: 600 !important; }
input, select, textarea, button { font-weight: 600 !important; }
input::placeholder, textarea::placeholder { font-weight: 400; }
body { font-size: 17px; }
.text-xs { font-size: 14px !important; line-height: 1.45 !important; }
.text-sm { font-size: 16px !important; line-height: 1.5 !important; }
.sh-dthead th { font-size: 15px; }
.sh-pill { font-size: 15px; }
.sh-dtable tbody td.sh-dcell.sh-empty { font-weight: 600; }
.sh-muted, .text-gray-400, .text-gray-500 { color: #4A5A56 !important; }
/* ...and whatever sits inside something bold stays bold (the rule above would otherwise lower it to 600). */
strong, b, strong *, b *, h1 *, h2 *, h3 *, h4 *, th *, .font-bold *, .sh-name-link *,
.sh-dtable tbody td.sh-dcell:first-child *, .sh-dcell.sh-name-cell * { font-weight: 700; }
.sh-dtable tbody td.sh-dcell:first-child .sh-pill, .sh-dtable tbody td.sh-dcell:first-child .sh-pill * { font-weight: 600; }
.sh-dtable tbody td.sh-dcell:first-child input { font-weight: 600 !important; }
.sh-dbs-key, .sh-dbs-key ol { font-size: 16px !important; }

/* v3.0: sign-in, sign-up, password and applicant pages - the same look as inside the app. */
.sh-auth-brand { display: inline-flex; align-items: center; text-decoration: none; }
.sh-auth-brand .sh-logo { height: 44px; width: auto; display: block; }
.sh-auth-card { padding: 28px 28px 24px; }
@media (max-width: 640px) { .sh-auth-card { border-radius: 0; border-left: 0; border-right: 0; } }
.sh-guest a.underline { color: var(--sh-ink); }

/* v3.0 step 9: the platform admin dashboard - number tiles like the admin dashboard (label above, big number). */
.sh-platform dl { margin-top: 16px !important; }
.sh-platform dl > div, .sh-platform .bg-white.shadow { background: #FFFFFF; border: 1px solid var(--sh-line); border-radius: 14px !important; box-shadow: none !important; }
.sh-platform dt { color: var(--sh-ink) !important; font-size: 16px !important; font-weight: 700 !important; }
.sh-platform dd { font-family: 'Space Grotesk', sans-serif; font-size: 30px !important; font-weight: 700 !important; color: var(--sh-ink); }
.sh-platform .text-green-400 { color: var(--sh-ink) !important; }
/* the platform's Delete buttons: red text, no red fill */
.sh-btn-delete { color: var(--sh-risk-text) !important; font-weight: 700; }
.sh-btn-delete:hover { border-color: var(--sh-risk) !important; }
/* a person's picture and name stay on one line in narrow columns */
.sh-dcell > div:has(> div > img.rounded-full) { flex-wrap: nowrap; }

/* v3.0.1: people who haven't joined - readable (were faded to 20%), muted rather than ink; buttons in the "..." menu. */
.sh-not-joined, .sh-not-joined * { color: var(--sh-muted) !important; }
.sh-not-joined img { opacity: 0.6; }
.sh-menu-button { display: flex; width: 100%; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--sh-line-2); text-align: left; background: #FFFFFF; color: var(--sh-ink); font-weight: 600; cursor: pointer; }
.sh-menu-button:hover { background: #F4F7F6; }
.sh-menu-danger { color: var(--sh-risk-text); font-weight: 700; }

/* v3.0.2 (product owner on an iPhone, 26 Oct): phone layouts.
   - Tables: on a phone they were squeezed to the screen width, breaking words one letter per line. Now each table
     keeps readable columns (text wraps at word ends, up to about 15em per column) and the card scrolls sideways.
   - Page headings: the title on its own line, then the search and buttons underneath, left-aligned and wrapping
     (they sat beside the title, pushed up against the top bar or off the right-hand edge).
   - Platform dashboard charts: each chart its own full-height card (two stacked charts were sharing one fixed
     height, so both were cut off). */
@media (max-width: 767px) {
    .sh-table-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .sh-dtable { min-width: max-content !important; width: max-content; }
    .sh-table-card > .sh-dtable { min-width: 100% !important; }
    .sh-dcell, .sh-dthead th { overflow-wrap: normal !important; word-break: normal !important; }
    .sh-dcell > div { max-width: 15em; }
    .sh-dcell > div:has(> div > img.rounded-full) { max-width: none; white-space: nowrap; }

    .sh-page-header > div:first-child { flex-direction: column; align-items: stretch !important; }
    .sh-page-header > div:first-child > * { flex: 0 0 auto !important; }   /* the desktop 520px width became a 520px height */
    .sh-page-header > div:first-child > *:not(:first-child) { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start !important;
        gap: 8px; width: 100%; padding: 4px 16px 10px !important; margin: 0 !important; box-sizing: border-box; }
    .sh-page-header > div:first-child > *:not(:first-child) * { margin-left: 0 !important; margin-right: 0 !important; }
    .sh-page-header .lg\:flex-1 > span, .sh-page-header .lg\:flex-1 > div { margin: 0 !important; }
    .sh-page-header .lg\:w-1\/3, .sh-page-header input[type="search"], .sh-page-header div:has(> input[type="search"]) { width: 100% !important; max-width: none !important; flex: 1 1 100% !important; }

    .sh-platform dl.h-96 { height: auto !important; }
    .sh-platform dl.h-96 > * { height: 26rem; }
}
@media (max-width: 767px) {
    /* empty spacers some headings use to push their buttons right (Plans, a role, an incident...) */
    .sh-page-header div:empty, .sh-page-header .w-1\/3:not(:has(*)) { display: none !important; }
}

/* v3.0.3 (product owner, 26 Oct: "Devonne's name not aligned"): a long name dropped the picture and name onto a
   second line under the tick box. The tick box, picture and name stay on one line; a long name wraps beside the
   picture instead. */
.sh-dcell > div:has(img.rounded-full) { flex-wrap: nowrap !important; }
.sh-dcell > div:has(img.rounded-full) > div { flex-wrap: nowrap; min-width: 0; }
.sh-dcell > div:has(img.rounded-full) input[type="checkbox"] { flex: none; }
.sh-dcell div:has(> img.rounded-full) { flex: none; }