/* Portal styles, handover pack v2 (2026-10-07). The shared component system
   (buttons, badges, cards, tables, alerts, fields, tabs, empty states, page
   header, stat tiles, bars, menus) lives in EASAL.Theme/components.css and is
   not repeated here. This file holds the portal shell and the portal-only
   screen layouts. Raw values never appear here: tokens.css only. */

html { min-height: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }

/* ----------------------------------------------------------------- Shell */

.e-header { background: var(--e-surface); border-bottom: 1px solid var(--e-line); height: 64px; display: flex; align-items: center; padding: 0 var(--e-gutter); flex-shrink: 0; }
.e-header-inner { width: 100%; max-width: var(--e-content-max); margin: 0 auto; display: flex; align-items: center; gap: 24px; }
.e-header-spacer { flex: 1; }
.e-brand { flex-shrink: 0; display: block; }
.e-brand img { height: var(--e-logo-main-h); width: auto; display: block; }
.e-nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.e-nav-link { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--e-radius-sm); color: var(--e-ink-muted); font-size: var(--e-font-size-sm); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--e-motion), color var(--e-motion); }
.e-nav-link:hover { background: var(--e-bg); color: var(--e-ink); }
.e-nav-link.active { background: var(--e-primary-soft); color: var(--e-primary); font-weight: 700; }
@media (max-width: 991.98px) {
    .e-nav-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .e-nav-link { width: 40px; padding: 0; justify-content: center; }
}
.e-user { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px 0 6px; border: 1px solid transparent; border-radius: var(--e-radius-sm); background: transparent; color: var(--e-ink); font-family: inherit; cursor: pointer; transition: border-color var(--e-motion); }
.e-user:hover, .e-user[aria-expanded="true"] { border-color: var(--e-line); }
.e-user .e-icon { color: var(--e-ink-muted); }
.e-user-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.e-user-name { display: block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--e-font-size-sm); font-weight: 700; color: var(--e-ink); }
.e-user-role { font-size: var(--e-font-size-xs); color: var(--e-ink-muted); }
@media (max-width: 767.98px) { .e-user-text { display: none; } }
.e-header-inner > .dropdown { flex-shrink: 0; margin-left: auto; }
.e-menu .e-menu-item .e-icon { color: var(--e-ink-muted); }
.e-menu form { margin: 0; }

.e-main { width: 100%; max-width: var(--e-content-max); margin: 0 auto; padding: 32px var(--e-gutter) 48px; display: flex; flex-direction: column; gap: var(--e-space-4); flex: 1 0 auto; }
/* Wide pages (the template builder): up to 1600px of content instead of 72rem. */
.e-main-wide { max-width: calc(1600px + 2 * var(--e-gutter)); }
.e-footer { padding: var(--e-space-3) var(--e-gutter); text-align: center; font-size: var(--e-font-size-xs); color: var(--e-ink-muted); }

/* Width steps for CSS bars: the portal CSP (style-src 'self') blocks inline style attributes. */
.e-w-0 { width: 0; } .e-w-5 { width: 5%; } .e-w-10 { width: 10%; } .e-w-15 { width: 15%; } .e-w-20 { width: 20%; }
.e-w-25 { width: 25%; } .e-w-30 { width: 30%; } .e-w-35 { width: 35%; } .e-w-40 { width: 40%; } .e-w-45 { width: 45%; }
.e-w-50 { width: 50%; } .e-w-55 { width: 55%; } .e-w-60 { width: 60%; } .e-w-65 { width: 65%; } .e-w-70 { width: 70%; }
.e-w-75 { width: 75%; } .e-w-80 { width: 80%; } .e-w-85 { width: 85%; } .e-w-90 { width: 90%; } .e-w-95 { width: 95%; } .e-w-100 { width: 100%; }

/* ------------------------------------------------------- Forms and helpers */

/* Form controls written without .e-input (inside .e-field they are covered by
   components.css; these catch the rest, such as a date in a table cell). Wrapped in
   :where() so they carry no specificity and never override a component's own rules. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    font-family: inherit; font-size: var(--e-font-size); line-height: 1.4; color: var(--e-ink); background: var(--e-surface);
    border: 1.5px solid var(--e-line); border-radius: var(--e-radius-sm); padding: 8px 12px; min-height: var(--e-control-h);
    transition: border-color var(--e-motion), box-shadow var(--e-motion);
}
:where(textarea) { min-height: 88px; resize: vertical; }
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover { border-color: var(--e-ink-faint); }
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { outline: none; border-color: var(--e-primary); box-shadow: 0 0 0 3px var(--e-primary-soft); }
:where(input:disabled, select:disabled, textarea:disabled, input[readonly]) { background: var(--e-surface-sunken); border-color: var(--e-line); color: var(--e-ink-faint); }
:where(input[type="checkbox"], input[type="radio"]) { width: 22px; height: 22px; margin: 0; accent-color: var(--e-primary); flex-shrink: 0; }
/* Read-only and disabled fields look it, inside .e-field too (that rule's white background would win). */
.e-field input[readonly], .e-field input:disabled, .e-input[readonly] { background: var(--e-surface-sunken); color: var(--e-ink-muted); }

/* A control and its button side by side (profile: copy the connector link). */
.e-inline-form { display: flex; flex-wrap: wrap; gap: var(--e-space-2); align-items: center; }
.e-inline-form > input { flex: 1 1 16rem; min-width: 0; }
.e-inline-form form { display: inline-flex; gap: var(--e-space-2); align-items: center; margin: 0; }
/* A form's own row of buttons and a status line (email editor). */
.e-form-actions { display: flex; align-items: center; gap: var(--e-space-2); flex-wrap: wrap; }
/* Compact controls inside table cells (licences: renew date, auto-renew). */
.e-table .e-cell-form { display: inline-flex; align-items: center; gap: var(--e-space-2); margin: 0; }
.e-table .e-cell-form input { min-height: 36px; padding: 4px 10px; font-size: var(--e-font-size-sm); }

/* Modal pieces: a section under a rule, a note beside the buttons. */
.e-modal-section { margin: 0; padding-top: 12px; border-top: 1px solid var(--e-line-soft); display: flex; flex-direction: column; gap: 12px; }
.e-modal-stack { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.e-modal-note { flex: 1; align-self: center; text-align: left; }
.e-sub-inline { font-size: var(--e-font-size-xs); color: var(--e-ink-muted); }
.e-type { display: inline-flex; align-items: center; gap: 6px; }

/* A line under a cell's main text, outside tables too. */
.e-progress-row .e-sub, .e-detail-strong + .e-sub { display: block; font-size: var(--e-font-size-xs); color: var(--e-ink-muted); margin-top: 2px; }
.e-detail-strong { font-weight: 700; font-size: var(--e-font-size-sm); }

/* --------------------------------------------------------- Misc pages */

/* Sign in and code (2a, 2b): brand panel beside the form at 992px and up; a compact
   brand strip above the form below that. */
.e-signin { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; flex: 1; }
.e-signin-panel { background: var(--e-brand-teal-tint); border-radius: 16px; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 34rem; }
.e-signin-mark { width: 72px; height: 72px; display: block; }
.e-signin-art { width: 320px; max-width: 100%; height: auto; display: block; margin: 0 auto; }
.e-signin-title { font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.e-signin-panel p { margin: 8px 0 0; font-size: 15px; color: var(--e-ink); max-width: 42ch; }
.e-signin-strip { display: none; width: 100%; max-width: 480px; background: var(--e-brand-teal-tint); border-radius: 16px; padding: 20px 24px; align-items: center; gap: 16px; font-size: var(--e-font-size); font-weight: 700; line-height: 1.3; }
.e-signin-strip img { width: 48px; height: 48px; flex-shrink: 0; }
.e-signin-strip span { display: block; font-size: var(--e-font-size-xs); font-weight: 400; color: var(--e-ink); }
.e-signin-side { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--e-space-4); }
.e-signin-card { width: 100%; max-width: 420px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.e-signin-card form { display: flex; flex-direction: column; gap: 20px; }
.e-signin-card .e-field { margin-bottom: 0; }
.e-signin-card .e-btn { width: 100%; }
.e-signin-head { display: flex; flex-direction: column; gap: 6px; }
.e-signin-head p { margin: 0; color: var(--e-ink-muted); font-size: 15px; }
.e-signin-head strong { color: var(--e-ink); }
.e-signin-note { margin: 0; font-size: var(--e-font-size-xs); color: var(--e-ink-muted); }
.e-signin-card .e-alert ul { margin: 0; padding-left: 18px; }
/* The code form's submit looks disabled until the field holds 8 digits (pattern + required),
   with no script: the browser's own validation still blocks an early submit. */
.e-code-form:invalid .e-btn[type="submit"] { background: var(--e-surface-sunken); border-color: var(--e-surface-sunken); color: var(--e-ink-faint); }
@media (max-width: 991.98px) {
    .e-signin { grid-template-columns: 1fr; }
    .e-signin-panel { display: none; }
    .e-signin-strip { display: flex; }
    .e-signin-card { max-width: 480px; }
    .e-signin-side { justify-content: flex-start; }
}

/* Shared page pieces (v2). */
.e-block { display: flex; flex-direction: column; gap: 12px; }
.e-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-space-3); flex-wrap: wrap; }
.e-block-head > span { font-size: var(--e-font-size-sm); color: var(--e-ink-muted); }
.e-card-head .e-section-title, .e-block-head .e-section-title { margin: 0; }
.e-alert-action.e-btn-sm { min-height: 36px; padding: 0 14px; font-size: var(--e-font-size-sm); }
.e-stat-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .e-stat-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.e-stat { padding: 20px; }
.e-stat-value small { font-size: 20px; font-weight: 700; color: var(--e-ink-muted); letter-spacing: 0; }
/* Tables inside a flush card line up with the card head's 24px inset. */
.e-card-flush .e-table th:first-child, .e-card-flush .e-table td:first-child { padding-left: var(--e-space-4); }
.e-card-flush .e-table th:last-child, .e-card-flush .e-table td:last-child { padding-right: var(--e-space-4); }

/* Site dashboard (2c, 2d) */
.e-room-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-space-3); }
@media (max-width: 1199.98px) { .e-room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .e-room-grid { grid-template-columns: 1fr; } }
.e-room-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.e-room-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.e-room-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.e-room-name { font-size: 17px; font-weight: 700; }
.e-room-meta { display: flex; align-items: center; gap: 6px; font-size: var(--e-font-size-xs); color: var(--e-ink-muted); }
.e-room-bars { display: flex; flex-direction: column; gap: 6px; }
.e-room-unscored { font-size: var(--e-font-size-sm); color: var(--e-ink-muted); padding: 6px 0; }
.e-room-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--e-line-soft); margin-top: auto; }
.e-room-actions { display: flex; gap: 2px; }
.e-room-card-pending { border-style: dashed; box-shadow: none; flex-direction: row; align-items: center; gap: 16px; }
.e-room-card-pending img { width: 96px; height: auto; flex-shrink: 0; }
.e-room-card-pending .e-room-meta { font-size: var(--e-font-size-sm); }

/* Group and local authority dashboards (2g, 2h): distribution bars and the nursery table. */
.e-fill-outstanding { background: var(--e-grade-outstanding); }
.e-fill-good { background: var(--e-grade-good); }
.e-fill-improve { background: var(--e-grade-improve); }
.e-fill-inadequate { background: var(--e-grade-inadequate); }
.e-fill-na, .e-fill-none { background: var(--e-unanswered); }
.e-dist-legend i { display: inline-block; flex-shrink: 0; }
.e-card-title-row { margin-bottom: var(--e-space-3); }
.e-dist-rows { display: flex; flex-direction: column; gap: 10px; }
.e-dist-row { display: grid; grid-template-columns: 12rem minmax(0, 1fr) 6rem; gap: var(--e-space-3); align-items: center; }
.e-dist-row .e-dist { height: 8px; }
.e-dist-row-all .e-dist { height: 16px; }
.e-dist-row-label { font-size: var(--e-font-size-sm); font-weight: 600; }
.e-dist-row-all .e-dist-row-label { font-weight: 700; }
.e-dist-row-count { font-size: var(--e-font-size-xs); color: var(--e-ink-muted); text-align: right; }
@media (max-width: 767.98px) { .e-dist-row { grid-template-columns: 1fr auto; } .e-dist-row .e-dist { grid-column: 1 / -1; grid-row: 2; } }
.e-toolbar-select { width: auto; min-width: 11rem; }
.e-toolbar-date { width: auto; }
.e-table th.e-sortable a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.e-table th.e-sortable a:hover { color: var(--e-ink); }
.e-table th[aria-sort] { color: var(--e-ink); }
.e-inline-bar { display: grid; grid-template-columns: minmax(4rem, 8rem) max-content; justify-content: start; gap: 10px; align-items: center; }
.e-table-empty { padding: var(--e-space-4); text-align: center; color: var(--e-ink-muted); }
.e-table-empty p { margin: 0; }
.e-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--e-space-3); padding: 12px var(--e-space-4); border-top: 1px solid var(--e-line-soft); font-size: var(--e-font-size-sm); color: var(--e-ink-muted); }
.e-pager > div { display: flex; gap: 8px; }

/* Admin dashboard (2i): two compact lists side by side, 56px rows. */
.e-two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-space-3); align-items: start; }
@media (max-width: 991.98px) { .e-two-up { grid-template-columns: 1fr; } }
.e-list-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px var(--e-space-4); border-bottom: 1px solid var(--e-line-soft); font-size: var(--e-font-size-sm); color: var(--e-ink); }
.e-list-row:last-child { border-bottom: 0; }
.e-list-row > span:first-child, .e-list-row > .e-icon + span { flex: 1; min-width: 0; }
.e-list-row .e-sub { display: block; font-size: var(--e-font-size-xs); color: var(--e-ink-muted); margin-top: 2px; }
.e-list-row > strong { font-size: var(--e-font-size); font-weight: 800; }
.e-list-row > .e-icon:first-child { color: var(--e-ink-muted); }
.e-list-link { text-decoration: none; transition: background var(--e-motion); }
.e-list-link:hover { background: var(--e-bg); color: var(--e-ink); }
a.e-stat { color: inherit; text-decoration: none; }

/* Nurseries (2j): filter chips in the toolbar, the add form in a modal. */
.e-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.e-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1.5px solid var(--e-line); border-radius: var(--e-radius-pill); background: var(--e-surface); color: var(--e-ink-muted); font-size: var(--e-font-size-sm); font-weight: 600; text-decoration: none; transition: background var(--e-motion), border-color var(--e-motion), color var(--e-motion); }
.e-chip:hover { border-color: var(--e-ink-faint); color: var(--e-ink); }
.e-chip.is-active { background: var(--e-primary-soft); border-color: var(--e-primary); color: var(--e-primary); }
.e-chip .e-num { font-weight: 800; }
.e-table-toolbar > form.e-search { flex: 1 1 240px; margin: 0; }
.e-modal-form { max-width: none; border: 0; }
.e-modal-form p { margin: 0; }
.e-modal .e-field { margin-bottom: 0; }
.e-modal-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }



@media (max-width: 40rem) {
    :root { --e-gutter: 16px; }
}

/* ------------------------------------------------------ Template builder (2k) */

/* Three panes: sections 280, elements 340, editor the rest. Stacks below 1200px. */
.e-builder { display: grid; grid-template-columns: 260px 320px minmax(0, 1fr); gap: var(--e-space-3); align-items: start; }
/* 992 to 1199px: sections and elements share a 300px left column, the editor beside them.
   Below 992px everything stacks. */
@media (max-width: 1199.98px) { .e-builder { grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto 1fr; } .e-builder > .e-editor { grid-column: 2; grid-row: 1 / span 2; } }
@media (max-width: 991.98px) { .e-builder { grid-template-columns: 1fr; grid-template-rows: none; } .e-builder > .e-editor { grid-column: auto; grid-row: auto; } }
.e-rail { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.e-rail-caption { padding: 4px 6px 8px; }
.e-rail-list { display: flex; flex-direction: column; gap: inherit; }
.e-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 8px 6px; }
.e-rail-head-actions { display: flex; gap: 2px; flex-shrink: 0; }
.e-rail-row { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 6px 10px 6px 4px; border-radius: var(--e-radius-sm); border: 1.5px solid transparent; transition: background var(--e-motion), border-color var(--e-motion); }
.e-rail-row:hover { background: var(--e-bg); }
.e-rail-row.active { background: var(--e-primary-soft); border-color: var(--e-primary); }
.e-rail-row > a { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--e-ink); text-decoration: none; }
.e-rail-title { font-size: var(--e-font-size-sm); font-weight: 700; }
.e-rail-meta { font-size: var(--e-font-size-xs); color: var(--e-ink-muted); }
.e-rail-row--element { min-height: 44px; }
.e-rail-element-link { flex-direction: row !important; align-items: center; gap: 8px; font-size: var(--e-font-size-sm); }
.e-rail-row.active .e-rail-element-link { font-weight: 700; }
.e-rail-num { min-width: 1.75rem; color: var(--e-ink-muted); font-weight: 700; font-size: var(--e-font-size-xs); }
.e-rail-row.e-dragging { opacity: 0.4; }
.e-drag-handle { width: 28px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--e-ink-faint); cursor: grab; flex-shrink: 0; }
.e-rail-add-link { justify-content: flex-start; margin-top: 4px; }
.e-rail-add { display: flex; flex-direction: column; gap: 8px; padding: 8px 4px 4px; }
.e-rail-add .e-input { width: 100%; }
.e-rail-add-actions { display: flex; gap: 8px; }
.e-rail-empty { padding: var(--e-space-4) var(--e-space-3); text-align: center; color: var(--e-ink-muted); font-size: var(--e-font-size-sm); }
.e-rail-empty p { margin: 0; }
.e-menu-item-danger { color: var(--e-danger); }
.e-menu-item:disabled { color: var(--e-ink-faint); background: transparent; cursor: default; }
.e-menu-note { display: block; padding: 4px 10px 6px; font-size: var(--e-font-size-xs); color: var(--e-ink-muted); max-width: 220px; }

.e-editor { padding: 20px 24px; display: flex; flex-direction: column; gap: var(--e-space-3); }
.e-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.e-editor-kind { font-weight: 400; color: var(--e-ink-muted); font-size: var(--e-font-size-sm); }
.e-editor-form { display: flex; flex-direction: column; gap: var(--e-space-3); }
.e-editor-form .e-field { margin-bottom: 0; }
.e-editor-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: var(--e-space-3); border-top: 1px solid var(--e-line-soft); }
.e-editor-footer form { margin: 0; }
.e-editor-spacer { flex: 1; }
.e-editor-empty { padding: var(--e-space-5) var(--e-space-3); }
.e-btn-danger-text { color: var(--e-danger); }
.e-btn-danger-text:hover { color: var(--e-danger); background: var(--e-danger-soft); }

/* Statements: grade badge and value on one line, the text full width beneath and as tall
   as its content (field-sizing), so long statements read as they will on the tablet. */
.e-statements-edit-head { padding-bottom: 8px; }
.e-statement-edit { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--e-line-soft); }
.e-statement-edit-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.e-statement-value-field { display: inline-flex; align-items: center; gap: 8px; font-size: var(--e-font-size-xs); font-weight: 600; color: var(--e-ink-muted); }
.e-statement-value { width: 80px; text-align: right; }
.e-statement-text { width: 100%; min-height: 0; font-size: var(--e-font-size); line-height: 1.5; resize: vertical; field-sizing: content; }
.e-statements-note { margin: 8px 0 0; }

.e-card-foot-note { margin: 0; padding: 12px var(--e-space-4); border-top: 1px solid var(--e-line-soft); font-size: var(--e-font-size-xs); color: var(--e-ink-muted); }
.e-stack { display: flex; flex-direction: column; gap: var(--e-space-3); margin-top: var(--e-space-3); }
.e-stack .e-field { margin-bottom: 0; }
.e-settings-clone { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: var(--e-space-4); padding-top: var(--e-space-3); border-top: 1px solid var(--e-line-soft); }

/* --------------------------------------------------------- Audit detail and action plan */


/* Audit detail (2e): grade hero, section bars, every element grouped by section. */
.e-grade-hero { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: var(--e-space-3); }
@media (max-width: 991.98px) { .e-grade-hero { grid-template-columns: 1fr; } }
.e-grade-hero > .e-card { display: flex; flex-direction: column; gap: 12px; }
.e-grade-hero-head { display: flex; align-items: center; gap: 12px; }
.e-grade-hero-word { font-size: var(--e-font-size-display); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.e-grade-hero-icon { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.e-bar-lg { height: 10px; }
.e-element-group { display: flex; align-items: center; gap: 10px; padding: 12px 24px 8px; background: var(--e-bg); }
.e-element-group hr { flex: 1; margin: 0; border: 0; border-top: 1px solid var(--e-line); opacity: 1; }
.e-element-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 200px; align-items: center; gap: 16px; min-height: 56px; padding: 10px 24px; border-bottom: 1px solid var(--e-line-soft); }
.e-element-row .e-grade-badge, .e-element-none { justify-self: end; }
.e-element-code { font-size: var(--e-font-size-sm); font-weight: 700; color: var(--e-ink-muted); }
.e-element-title { font-size: var(--e-font-size-sm); font-weight: 700; }
.e-element-statement { font-size: var(--e-font-size-sm); color: var(--e-ink-muted); margin-top: 2px; }
@media (max-width: 767.98px) { .e-element-row { grid-template-columns: 40px minmax(0, 1fr); } .e-element-row > :last-child { grid-column: 2; justify-self: start; } }
.e-elements-toggle { display: flex; justify-content: center; padding: 8px; }
.e-elements.is-collapsible:not(:target) .is-extra { display: none; }
.e-elements .e-elements-less, .e-elements:target .e-elements-more { display: none; }
.e-elements.is-collapsible:target .e-elements-less { display: inline-flex; }

/* Action plan (2f): item cards, review row, editor. */
.e-stat-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .e-stat-grid-3 { grid-template-columns: 1fr; } }
.e-plan-item { display: flex; flex-direction: column; gap: 16px; }
.e-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.e-plan-badges { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 767.98px) { .e-plan-head { flex-direction: column; } .e-plan-badges { justify-content: flex-start; } }
.e-plan-title { display: flex; align-items: baseline; gap: 12px; font-size: 17px; font-weight: 700; flex: 1; min-width: 0; }
.e-plan-code { font-size: var(--e-font-size-sm); color: var(--e-ink-muted); }
.e-plan-action { margin: 0; font-size: var(--e-font-size); line-height: 1.5; }
.e-plan-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
.e-plan-meta-single { grid-template-columns: 1fr; }
.e-plan-meta dt { font-size: var(--e-font-size-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--e-ink-muted); }
.e-plan-meta dd { margin: 2px 0 0; font-size: var(--e-font-size-sm); }
@media (max-width: 767.98px) { .e-plan-meta { grid-template-columns: 1fr; } }
.e-plan-review { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: end; padding-top: 16px; border-top: 1px solid var(--e-line-soft); }
.e-plan-review .e-field { margin-bottom: 0; }
.e-plan-review .e-check { min-height: var(--e-control-h); }
@media (max-width: 767.98px) { .e-plan-review { grid-template-columns: 1fr auto; } .e-plan-review .e-field { grid-column: 1 / -1; } }
.e-plan-reopen > summary { cursor: pointer; color: var(--e-primary); font-size: var(--e-font-size-sm); font-weight: 600; }
.e-plan-reopen[open] > summary { margin-bottom: 12px; }
.e-plan-intro { margin: 0; color: var(--e-ink-muted); max-width: 70ch; }
.e-plan-form { display: flex; flex-direction: column; gap: var(--e-space-3); }
.e-plan-pick { cursor: pointer; }
.e-plan-pick input { width: 24px; height: 24px; }
.e-plan-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.e-plan-fields .e-field { margin-bottom: 0; }
.e-plan-field-wide { grid-column: 1 / -1; }
@media (max-width: 767.98px) { .e-plan-fields { grid-template-columns: 1fr; } }
.e-plan-edit:has(.e-plan-pick input:checked) { border-color: var(--e-primary); box-shadow: 0 0 0 1px var(--e-primary); }
/* A form's own action bar that stays in view at the bottom of the window. */
.e-sticky-actions { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 8px; padding: 12px var(--e-space-4); margin: 0 calc(-1 * var(--e-gutter)); background: var(--e-surface); border-top: 1px solid var(--e-line); }

/* --------------------------------------------------------- Progress over time */

.e-progress-rows { padding: 8px var(--e-space-4) 16px; }
/* A fixed value column, so every bar has the same track and rows compare at a glance. */
.e-progress-row { min-height: 52px; border-top: 1px solid var(--e-line-soft); grid-template-columns: 9rem minmax(0, 1fr) 15rem; }
.e-progress-row .e-bar-row-value { justify-content: flex-end; }
.e-progress-row:first-child { border-top: 0; }
.e-progress-row .e-bar-row-label a { font-weight: 700; }
.e-change { font-variant-numeric: var(--e-numeric); font-weight: 700; white-space: nowrap; font-size: var(--e-font-size-xs); }
.e-change-up { color: var(--e-success); }
.e-change-down { color: var(--e-danger); }
.e-change-same { color: var(--e-ink-muted); }
@media (max-width: 767.98px) {
    .e-progress-row { grid-template-columns: 1fr auto; }
    .e-progress-row > .e-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------------------------------------------------------- Email templates */

/* Editor and merge fields side by side, the preview full width beneath. */
.e-email-editor { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--e-space-3); align-items: start; }
.e-email-editor-form { display: flex; flex-direction: column; gap: var(--e-space-3); }
.e-email-editor-form .e-field textarea { min-height: 22rem; }
.e-email-editor-side { display: flex; flex-direction: column; gap: var(--e-space-3); }
.e-email-editor-side .e-card, .e-email-preview { display: flex; flex-direction: column; gap: 12px; }
.e-email-editor-side p, .e-email-preview p { margin: 0; }
.e-email-preview { grid-column: 1 / -1; }
.e-email-preview-frame { display: block; width: 100%; height: 640px; border: 1px solid var(--e-line); border-radius: var(--e-radius-sm); background: var(--e-surface); }
.e-email-code { font-family: Consolas, "Courier New", monospace; font-size: var(--e-font-size-xs); line-height: 1.5; white-space: pre; overflow: auto; }
.e-email-fields { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.e-email-fields li { display: flex; flex-direction: column; gap: 2px; }
.e-email-field { align-self: flex-start; padding: 2px 8px; border: 1px solid var(--e-line); border-radius: var(--e-radius-sm); background: var(--e-bg); color: var(--e-primary); font-family: Consolas, "Courier New", monospace; font-size: var(--e-font-size-xs); cursor: pointer; }
.e-email-field:hover { border-color: var(--e-primary); background: var(--e-primary-soft); }
/* Summernote inside a field: its own line colour swapped for ours. */
.e-email-editor .note-editor.note-frame { border-color: var(--e-line); }
@media (max-width: 75rem) { .e-email-editor { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- Help and guidance */

.e-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 767.98px) { .e-help-grid { grid-template-columns: 1fr; } }
.e-help-card { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.e-help-card .e-stat-icon { flex-shrink: 0; }
.e-help-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.e-help-card-title { font-weight: 700; color: var(--e-ink); }
.e-help-card-summary { font-size: var(--e-font-size-sm); color: var(--e-ink-muted); }
.e-help-card-go { color: var(--e-ink-faint); }
.e-help { display: grid; grid-template-columns: minmax(0, 52rem) 18rem; gap: var(--e-space-3); align-items: start; }
@media (max-width: 75rem) { .e-help { grid-template-columns: 1fr; } }
.e-help-body { display: flex; flex-direction: column; gap: var(--e-space-3); }
.e-help-more .e-list-row { min-height: 48px; }
/* Readable prose cards (help topics, privacy notice). */
.e-guide { max-width: 52rem; line-height: 1.6; }
.e-guide > h3 { font-size: var(--e-font-size-lg); font-weight: 700; margin: 0 0 12px; }
.e-guide h3:not(:first-child) { margin-top: var(--e-space-4); }
.e-guide p { margin: 0 0 12px; }
.e-guide ol, .e-guide ul { margin: 0 0 12px; padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; }
.e-guide p:last-child, .e-guide ol:last-child, .e-guide ul:last-child { margin-bottom: 0; }
.e-guide table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.e-guide td, .e-guide th { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--e-line-soft); text-align: left; vertical-align: top; }
.e-privacy { max-width: 46rem; }

/* ---------------------------------------------------------- Smaller pages */

/* Full-page empty states (error, unavailable). */
.e-page-empty { margin-top: var(--e-space-4); }
/* Data sharing: three tick cards and one Save. */
.e-consent { display: flex; flex-direction: column; gap: 12px; max-width: 52rem; }
.e-consent-choice { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px; cursor: pointer; transition: border-color var(--e-motion), box-shadow var(--e-motion); }
.e-consent-choice:has(input:checked) { border-color: var(--e-primary); box-shadow: 0 0 0 1px var(--e-primary); }
.e-consent-choice input { width: 28px; height: 28px; margin-top: 2px; }
.e-consent-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.e-consent-title { font-size: 17px; font-weight: 700; }
.e-consent-desc { color: var(--e-ink-muted); }
.e-consent-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.e-consent-note { margin: 4px 0 0; }
.e-consent-actions { display: flex; justify-content: flex-start; }
/* Template preview: each element in a 600px tablet frame. */
.e-preview { display: flex; flex-direction: column; gap: var(--e-space-3); }
.e-preview-frame { width: 100%; max-width: 600px; padding: 20px 24px; border: 1px solid var(--e-line); border-radius: 16px; background: var(--e-bg); box-shadow: var(--e-shadow); display: flex; flex-direction: column; gap: 12px; }
.e-preview-eyebrow { font-size: var(--e-font-size-xs); font-weight: 600; color: var(--e-ink-muted); }
.e-preview-position { color: var(--e-accent); }
.e-preview-title { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.25; }
.e-preview .e-statement { cursor: default; }
/* Profile, standalone element editor, OAuth consent. */
.e-profile-card, .e-stack-card { max-width: 52rem; display: flex; flex-direction: column; gap: 12px; }
.e-stack-card p, .e-stack-card ul { margin: 0; }
.e-stack-card ul { padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; }
.e-editor-page { max-width: 60rem; }
.e-oauth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }