/* SEND Life Update 20.7: accessibility, remembered text size and light/dark themes */

html[data-sl-text="standard"] { font-size: 100%; }
html[data-sl-text="large"] { font-size: 112.5%; --sl19j-bottom-height: 84px; }
html[data-sl-text="extra_large"] { font-size: 125%; --sl19j-bottom-height: 94px; }

.sl-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sl20-7-brand-row { display: contents; }
.sl20-7-control { display: none; }

/* Text resilience: controls grow instead of clipping or escaping their pills. */
.sl-ui-20-7 :where(
    .sl-nav-pill,
    .sl-section-pills a,
    .sl-dashboard-pills a,
    .sl-button,
    .sl-pill,
    .sl-badge,
    .sl-admin-tabs a,
    .sl-avatar-choose-button,
    .sl-fast-parent-action-grid a,
    .sl-quick-pill-row a,
    .sl-quick-pill-row button,
    .sl-log-pill,
    .sl-big-action-pill,
    .sl-action-card,
    .sl19j-more-grid a,
    .sl19j-more-list a,
    .sl19j-logout-form button,
    .sl-support-status,
    .sl-support-status-17o,
    .sl-pack-filter-chips button,
    .sl-template-builder-card summary em
) {
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 44px;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.22 !important;
    text-align: center;
    flex-wrap: wrap;
}

.sl-ui-20-7 :where(.sl-nav-pill, .sl-button, .sl-pill, .sl-badge, .sl-avatar-choose-button) > * {
    min-width: 0;
    max-width: 100%;
}

.sl-ui-20-7 :where(.sl-compact-action-grid strong, .sl-fast-parent-action-grid strong, .sl19j-bottom-link > strong, .sl-child-bottom-nav .sl-child-nav-label) {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
}

.sl-ui-20-7 :where(input, select, textarea, button) { font-size: 1rem; }
.sl-ui-20-7 :where(input, select, textarea) { min-height: 46px; }
.sl-ui-20-7 textarea { min-height: 7rem; }

html[data-sl-text="large"] .sl-ui-20-7 :where(.sl-grid-4, .sl-grid-5, .sl-action-card-grid, .sl-log-pill-grid, .sl-template-board-big, .sl19b-main-actions, .sl19c-category-grid, .sl19g1-action-grid, .sl19g2-summary-grid, .sl19i2-summary-grid, .sl19i3-summary-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important;
}

html[data-sl-text="extra_large"] .sl-ui-20-7 :where(.sl-grid-3, .sl-grid-4, .sl-grid-5, .sl-action-card-grid, .sl-log-pill-grid, .sl-template-board, .sl-template-board-big, .sl-apdr-stage-grid, .sl-apdr-mini-grid, .sl19b-main-actions, .sl19c-category-grid, .sl19g1-action-grid, .sl19g2-summary-grid, .sl19i2-summary-grid, .sl19i3-summary-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)) !important;
}

html[data-sl-text="extra_large"] .sl-ui-20-7 :where(.sl-progress-steps, .sl-progress-steps-compact, .sl-task-status-steps) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)) !important;
}

/* Mobile header controls: appearance on the left, logo centred, text size on the right. */
@media (max-width: 760px) {
    .sl-ui-20-7 .sl-nav.sl-mobile-pill-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 7px !important;
        padding: 8px 10px !important;
        overflow: visible;
    }

    .sl20-7-brand-row {
        position: relative;
        z-index: 85;
        display: grid;
        grid-template-columns: minmax(68px, 1fr) minmax(112px, 176px) minmax(68px, 1fr);
        align-items: center;
        gap: 7px;
        width: 100%;
        min-width: 0;
    }

    .sl20-7-brand-row .sl-brand {
        grid-column: 2;
        display: flex !important;
        width: auto !important;
        min-width: 0 !important;
        justify-content: center !important;
        padding: 2px !important;
        background: transparent !important;
    }

    .sl20-7-brand-row .sl-brand img {
        display: block !important;
        width: 100% !important;
        max-width: 172px !important;
        height: auto !important;
    }

    .sl20-7-control {
        position: relative;
        display: flex;
        min-width: 0;
    }

    .sl20-7-theme-control { grid-column: 1; grid-row: 1; justify-content: flex-start; }
    .sl20-7-text-control { grid-column: 3; grid-row: 1; justify-content: flex-end; }

    .sl-ui-20-7 .sl-nav .sl20-7-display-pill {
        display: inline-flex !important;
        width: auto;
        max-width: 100%;
        min-width: 52px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 7px 9px !important;
        border: 1px solid var(--line) !important;
        border-radius: 999px !important;
        background: var(--card) !important;
        color: var(--navy) !important;
        box-shadow: 0 7px 18px rgba(19, 36, 94, .10);
        font-weight: 950 !important;
        line-height: 1.05 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .sl20-7-display-pill:hover,
    .sl20-7-display-pill:focus-visible,
    .sl20-7-display-pill[aria-expanded="true"] {
        border-color: var(--brand) !important;
        background: var(--aqua) !important;
    }

    .sl20-7-pill-icon { flex: 0 0 auto; font-size: 1rem; line-height: 1; }
    .sl20-7-pill-label { min-width: 0; font-size: .72rem; line-height: 1.05; overflow-wrap: anywhere; }
    .sl20-7-text-mark { font-size: .92rem; font-weight: 1000; line-height: 1; }

    .sl20-7-display-panel {
        position: absolute;
        top: calc(100% + 9px);
        z-index: 1200;
        display: grid;
        gap: 7px;
        width: min(310px, calc(100vw - 22px));
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--card);
        color: var(--ink);
        box-shadow: 0 20px 55px rgba(7, 24, 45, .25);
    }

    .sl20-7-display-panel[hidden] { display: none !important; }
    .sl20-7-theme-control .sl20-7-display-panel { left: 0; }
    .sl20-7-text-control .sl20-7-display-panel { right: 0; }
    .sl20-7-display-panel > strong { padding: 2px 4px 4px; color: var(--navy); }

    .sl-ui-20-7 .sl-nav .sl20-7-display-panel button {
        display: grid !important;
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 52px;
        padding: 9px 10px !important;
        border: 1px solid var(--line) !important;
        border-radius: 14px !important;
        background: var(--card) !important;
        color: var(--ink) !important;
        text-align: left;
        white-space: normal !important;
    }

    .sl20-7-display-panel button > span:first-child { text-align: center; font-size: 1.1rem; }
    .sl20-7-display-panel button > span:last-child { display: grid; min-width: 0; gap: 1px; }
    .sl20-7-display-panel button b { color: var(--navy); }
    .sl20-7-display-panel button small { color: var(--muted); font-size: .74rem; line-height: 1.2; }
    .sl20-7-display-panel button.is-selected { border-color: var(--brand) !important; background: var(--aqua) !important; box-shadow: inset 0 0 0 1px var(--brand); }
    .sl20-7-choice-a { font-weight: 1000; }

    .sl-ui-20-7 .sl-mobile-simple-menu:not(.sl-parent-top-menu-19j) {
        width: 100%;
        justify-self: stretch;
    }

    .sl-ui-20-7 .sl-mobile-simple-menu:not(.sl-parent-top-menu-19j) > summary {
        width: 100%;
        justify-content: center;
        min-height: 42px;
    }

    .sl19j-bottom-link { min-height: calc(var(--sl19j-bottom-height) - 16px); height: auto; }
    .sl19j-bottom-link > strong { max-width: 100%; line-height: 1.05 !important; }
    .sl19j-bottom-log { min-height: calc(var(--sl19j-bottom-height) - 7px); }

    html[data-sl-text="large"] .sl19j-bottom-link > strong { font-size: .72rem; }
    html[data-sl-text="extra_large"] .sl19j-bottom-link > strong { font-size: .70rem; }

    .sl-child-bottom-nav { height: auto !important; min-height: var(--sl19j-bottom-height); }
    .sl-child-bottom-nav a { min-height: calc(var(--sl19j-bottom-height) - 10px) !important; height: auto !important; }
    html[data-sl-text="large"] .sl-child-calm-page,
    html[data-sl-text="extra_large"] .sl-child-calm-page { padding-bottom: calc(var(--sl19j-bottom-height) + 42px) !important; }

    html[data-sl-text="large"] .sl-ui-20-7 :where(.sl-grid-3, .sl-grid-4, .sl-grid-5, .sl-fast-parent-action-grid, .sl-check-grid, .sl19j-more-grid, .sl19j-more-list),
    html[data-sl-text="extra_large"] .sl-ui-20-7 :where(.sl-grid-2, .sl-grid-3, .sl-grid-4, .sl-grid-5, .sl-fast-parent-action-grid, .sl-check-grid, .sl19j-more-grid, .sl19j-more-list) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[data-sl-text="large"] .sl-avatar-option-grid,
    html[data-sl-text="extra_large"] .sl-avatar-option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html[data-sl-text="large"] .sl-avatar-option,
    html[data-sl-text="extra_large"] .sl-avatar-option {
        min-height: auto !important;
        padding-bottom: 10px !important;
    }

    html[data-sl-text="large"] .sl-avatar-option span,
    html[data-sl-text="extra_large"] .sl-avatar-option span {
        min-height: 2.3em;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

@media (max-width: 360px) {
    .sl20-7-brand-row { grid-template-columns: minmax(52px, 1fr) minmax(100px, 148px) minmax(52px, 1fr); gap: 4px; }
    .sl20-7-pill-label { display: none; }
    .sl-ui-20-7 .sl-nav .sl20-7-display-pill { min-width: 48px; padding-inline: 7px !important; }
}

/* Dark theme. Existing SEND Life variables are replaced first, then hard-coded light surfaces are normalised. */
html[data-sl-effective-theme="dark"] {
    color-scheme: dark;
    --ink: #e8f1fb;
    --navy: #f4f7ff;
    --muted: #afc0d3;
    --brand: #47d4d0;
    --brand-dark: #7de7e2;
    --purple: #ad93ff;
    --purple-soft: #2b2450;
    --aqua: #123c43;
    --bg: #07131f;
    --card: #102436;
    --line: #315068;
    --danger: #ffabab;
    --success: #75e0ad;
    --warning: #ffd17a;
    --shadow: 0 18px 55px rgba(0, 0, 0, .38);
}

html[data-sl-effective-theme="dark"] body {
    background: radial-gradient(circle at top left, rgba(21, 174, 174, .18), transparent 34%), linear-gradient(180deg, #07131f 0, #0a1825 50%, #10152a 100%) !important;
    color: var(--ink) !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 :where(.sl-nav, .sl-mobile-pill-nav) {
    background: rgba(7, 19, 31, .96) !important;
    border-color: var(--line) !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 :where(
    .sl-card,
    .sl-mini-row,
    .sl-mini-card,
    .sl-task-card,
    .sl-role-grid span,
    .sl19j-more-sheet,
    .sl19j-more-grid a,
    .sl19j-more-list a,
    .sl19j-logout-form button,
    .sl-avatar-dialog,
    .sl-avatar-option,
    .sl-avatar-dialog-footer,
    .sl-avatar-choose-button,
    .sl-sticky-save-bar,
    .sl-linked-evidence-box,
    .sl-apdr-record-row,
    .sl-form .sl-check,
    .sl-check-grid .sl-check,
    .sl-task-status-steps div,
    .sl-child-support-actions button,
    .sl-preview-help-row span,
    .sl-pack-count-list > div,
    .sl-table th,
    .sl-table td,
    .sl-auth-choice,
    .sl-login-choice,
    .sl-push-status-card
) {
    background: var(--card) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 :where(article, section, details, form)[class*="card"]:not(.sl-alert):not(.sl-warning) {
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 :where(.sl-dashboard-hero, .sl-child-hero, .sl-evidence-simple-hero, .sl-apdr-hero, .sl-ehcp-hero, .sl-review-pack-hero, .sl-notification-hero, .sl-child-today-hero, .sl-now-next-board, .sl-child-task-hero-v2, .sl-one-step-card, .sl-avatar-dialog-head) {
    background: linear-gradient(145deg, #102b38, #121e36, #282044) !important;
    border-color: var(--line) !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 :where(h1, h2, h3, h4, h5, h6, legend, .sl-field-title) { color: var(--navy) !important; }
html[data-sl-effective-theme="dark"] .sl-ui-20-7 :where(p, small, .sl-muted, .sl-note) { color: var(--muted); }

html[data-sl-effective-theme="dark"] .sl-ui-20-7 :where(input, select, textarea) {
    background: #0a1b29 !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}
html[data-sl-effective-theme="dark"] .sl-ui-20-7 :where(input, textarea)::placeholder { color: #8da1b6; opacity: 1; }
html[data-sl-effective-theme="dark"] .sl-ui-20-7 select { color-scheme: dark; }

html[data-sl-effective-theme="dark"] .sl-ui-20-7 :where(.sl-nav-pill, .sl-section-pills a, .sl-admin-tabs a, .sl-button-light, .sl20-7-display-pill) {
    background: var(--card) !important;
    color: var(--navy) !important;
    border-color: var(--line) !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 :where(.sl-button:not(.sl-button-light):not(.sl-button-danger), .sl-pill, .is-primary) {
    color: #fff !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl19j-bottom-nav,
html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-child-bottom-nav {
    background: rgba(8, 22, 34, .98) !important;
    border-color: var(--line) !important;
    box-shadow: 0 -12px 34px rgba(0, 0, 0, .35) !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl19j-bottom-link { color: #b8c7d5; }
html[data-sl-effective-theme="dark"] .sl-ui-20-7 :where(.sl19j-bottom-link.is-active, .sl19j-more-menu.is-active > summary, .sl19j-more-menu[open] > summary) { background: #123c43 !important; color: #9bf3ee !important; }
html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl19j-bottom-log { border-color: #102436; background: #087f83; color: #fff; }

html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-table tr:hover td { background: #122b3f !important; }
html[data-sl-effective-theme="dark"] .sl-ui-20-7 code { background: #091a28; border-color: var(--line); color: #dcecff; }
html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-footer { border-color: var(--line); color: var(--muted); }
html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-footer a { color: #8ce7e3; }
html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-avatar-dialog::backdrop { background: rgba(0, 5, 12, .78); }
html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-avatar-option.is-selected { background: #123c43 !important; }

html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-alert { background: #12372d; border-color: #2d765b; color: #c8f7df; }
html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-alert-error { background: #3c1b22; border-color: #8b4552; color: #ffd4d8; }
html[data-sl-effective-theme="dark"] .sl-ui-20-7 :where(.sl-badge-warn, .sl-warning) { background: #3c3015 !important; border-color: #816a2f !important; color: #ffe4a4 !important; }
html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-badge-danger { background: #3c1b22 !important; border-color: #8b4552 !important; color: #ffd4d8 !important; }

@media (prefers-reduced-motion: reduce) {
    .sl-ui-20-7 *, .sl-ui-20-7 *::before, .sl-ui-20-7 *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* SEND Life Update 20.7.2: dark-mode contrast for light dashboard cards and pills. */
html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-compact-action-grid a {
    background: #f8fbff !important;
    border-color: #294a62 !important;
    color: #102a4c !important;
    opacity: 1 !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-compact-action-grid a :where(strong, span) {
    color: #102a4c !important;
    opacity: 1 !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-compact-action-grid a:hover,
html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-compact-action-grid a:focus-visible {
    background: #e7f8fb !important;
    border-color: #087b83 !important;
    color: #08283f !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-parent-child-row-compact {
    background: #f8fbff !important;
    border-color: #294a62 !important;
    color: #102a4c !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-parent-child-row-compact > div:first-child > strong {
    color: #102a4c !important;
    opacity: 1 !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-parent-child-row-compact > div:first-child > small {
    color: #4a6072 !important;
    opacity: 1 !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-parent-child-row-compact a,
html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-parent-child-row-compact a:visited {
    background: #ffffff !important;
    border-color: #294a62 !important;
    color: #102a4c !important;
    opacity: 1 !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-parent-child-row-compact a:hover,
html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-parent-child-row-compact a:focus-visible {
    background: #e7f8fb !important;
    border-color: #087b83 !important;
    color: #08283f !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-card-more-tools {
    background: #cfd9e1 !important;
    border-color: #456277 !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-card-more-tools summary,
html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-parent-secondary-tools summary {
    background: #ffffff !important;
    border-color: #294a62 !important;
    color: #102a4c !important;
    opacity: 1 !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-card-more-tools summary:hover,
html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-card-more-tools summary:focus-visible {
    background: #e7f8fb !important;
    color: #08283f !important;
}

/* SEND Life Update 20.7.3: dark-mode task and reminder card contrast */
html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-timeline .sl-timeline-item,
html[data-sl-effective-theme="dark"] .sl-ui-20-7 a.sl-timeline-item.sl-click-row {
    background: #ffffff !important;
    color: #102f4f !important;
    border-color: #9ec4d4 !important;
    border-left-color: #19c5c5 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .20) !important;
    opacity: 1 !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-timeline .sl-timeline-item strong,
html[data-sl-effective-theme="dark"] .sl-ui-20-7 a.sl-timeline-item.sl-click-row strong {
    color: #102f4f !important;
    opacity: 1 !important;
    font-weight: 950 !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-timeline .sl-timeline-item span,
html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-timeline .sl-timeline-item small,
html[data-sl-effective-theme="dark"] .sl-ui-20-7 a.sl-timeline-item.sl-click-row span,
html[data-sl-effective-theme="dark"] .sl-ui-20-7 a.sl-timeline-item.sl-click-row small {
    color: #48647b !important;
    opacity: 1 !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-timeline .sl-timeline-item:hover,
html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-timeline .sl-timeline-item:focus-visible {
    background: #f2ffff !important;
    border-color: #32c8c9 !important;
    outline: 3px solid rgba(50, 200, 201, .36) !important;
    outline-offset: 2px !important;
}

html[data-sl-effective-theme="dark"] .sl-ui-20-7 .sl-timeline .sl-timeline-item.is-important {
    background: #fff8e7 !important;
    border-color: #e4bd59 !important;
    border-left-color: #d99b18 !important;
}