/* Project shell theme: shared components and page styles, loaded after the older sheets so it wins. Tokens live in tokens.css. */
body, #evApp {font-family: var(--font);}
#evApp {grid-template-columns: 222px minmax(0, 1fr); background: var(--panel);}
#evApp.ev-nav-collapsed {grid-template-columns: 92px minmax(0, 1fr);}
#evApp.ev-is-home {grid-template-columns: minmax(0, 1fr);}
.ev-sidebar {padding: 24px 14px 16px; gap: 18px; background: var(--ev-navy); overflow-x: hidden;}
.ev-brand {gap: 10px; padding: 0 6px 21px; font-size: var(--text-base); line-height: 1.1; white-space: nowrap;}
.ev-brand img {width: 35px; height: 35px;}
.ev-brand small {font-size: 9.5px; letter-spacing: .7px; margin-top: 6px; color: #a2b5c3;}
.ev-nav-group, .ev-sidebar nav {display: grid; gap: 5px;}
.ev-sidebar button, .ev-sidebar a.ev-nav {font-size: var(--text-sm); min-height: 43px; padding: 10px 13px; color: #c1ced8; font-weight: 500; border-radius: 8px; gap: 12px; white-space: nowrap; position: relative;}
.ev-sidebar button[aria-current=page] {background: #284459; color: #fff; font-weight: 650;}
.ev-sidebar button[aria-current=page]::before {content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--ev-sky); border-radius: 0 3px 3px 0;}
.ev-nav-caption {font-size: var(--text-2xs); letter-spacing: 1.1px; color: #91a8ba; padding-left: 13px; margin-bottom: 7px;}
.ev-nav-icon {width: 18px; height: 18px;}
.ev-sidebar .ev-sidebar-bottom {gap: 3px;}
.ev-sidebar-bottom .ev-side-divider {margin: 12px 0 9px;}
.ev-sidebar-bottom [data-ev-route=profile] {margin: 0;}
.ev-build {font-size: 9px; letter-spacing: 1.2px; color: #9bb1c1; padding-top: 12px;}
.ev-nav-collapsed .ev-sidebar {padding-left: 8px; padding-right: 8px; gap: 12px;}
.ev-nav-collapsed .ev-brand {padding: 0 6px 21px;}
.ev-nav-collapsed .ev-brand>span, .ev-nav-collapsed .ev-nav-caption, .ev-nav-collapsed .ev-build {display: none;}
.ev-nav-collapsed .ev-brand {justify-content: center; padding-left: 0; padding-right: 0;}
/* Collapsed rail (tablet and Markup): a short label under each icon, so no two places look the same on touch. */
.ev-nav-collapsed .ev-sidebar button, .ev-nav-collapsed .ev-sidebar a.ev-nav {flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 8px 2px 7px; min-width: 0; min-height: 52px; white-space: normal; text-align: center;}
.ev-nav-collapsed .ev-nav-label {display: block; font-size: 10.5px; line-height: 1.15; font-weight: 600; letter-spacing: 0; max-width: 100%; overflow-wrap: anywhere;}
.ev-nav-collapsed .ev-sidebar button[aria-current=page]::before {top: 10px; bottom: 10px;}
.ev-sidebar .ev-nav-out-icon {width: 13px; height: 13px; margin-left: auto; opacity: .75; flex: none;}
.ev-nav-collapsed .ev-sidebar .ev-nav-out-icon {position: absolute; top: 6px; right: 10px; margin: 0; width: 11px; height: 11px;}
.ev-nav-collapsed .ev-brand img {width: 34px; height: 34px;}
#evNavBackdrop {position: fixed; inset: 0; background: #10263866; z-index: 144; border: 0;}
.ev-top {height: 72px; gap: 14px; padding: 0 28px;}
.ev-top-title small {font-size: var(--text-2xs); letter-spacing: 1.1px; color: var(--faint); margin-bottom: 4px;}
.ev-top-title b {font-size: 15px; font-weight: 650; letter-spacing: -.2px;}
.ev-top .ev-save {font-size: var(--text-xs); color: var(--dim);}
.ev-top .ev-save[data-state=error] {color: var(--ev-bad);}
.ev-top .ev-save[data-state=pending] {color: #8e732e;}
.ev-icon-btn {width: 36px; height: 36px; flex: none; border: 1px solid var(--line); background: #fff;}
.ev-icon-btn:hover {background: #f0f5fa;}
.ev-btn {min-height: var(--btn-h); font-size: var(--btn-fs); font-weight: 650; border-color: #cfdbe5; border-radius: var(--btn-r); padding: 9px 14px; gap: 8px;}
.ev-btn.primary {background: var(--accent); border-color: var(--accent); box-shadow: 0 2px 3px #1643a412;}
.ev-btn.quiet {font-size: var(--text-xs); padding: 5px 0;}
.ev-btn svg {width: 16px; height: 16px;}
.ev-pill {font-size: var(--text-2xs); padding: 5px 9px; border-radius: 5px; color: #456174; background: #edf2f6; font-weight: 600;}
#evScreen {padding: 32px 34px 40px;}
.ev-page {max-width: 1420px;}
.ev-heading h1, .ev-overview-heading h1 {font-size: 32px; font-weight: 700; letter-spacing: -.9px; line-height: 1.15; margin: 0 0 10px;}
.ev-heading p, .ev-overview-heading p {font-size: var(--text-sm); line-height: 1.55; color: var(--dim); margin: 0;}
.ev-eyebrow {font-size: 10px; color: #5d788c; letter-spacing: 1.25px; font-weight: 650; margin-bottom: 12px;}
.ev-card {border-radius: var(--ev-radius); border-color: var(--line); margin-bottom: 0; box-shadow: 0 1px 2px #17304403;}
.ev-card-head {padding: 18px 21px; min-height: 61px; border-bottom-color: #eaf0f4;}
.ev-card h2 {font-size: 15px; font-weight: 650;}
.ev-card-body {padding: 22px;}
.ev-input, .ev-select, .ev-field input, .ev-field textarea, .ev-field select {font-size: var(--text-sm); min-height: 42px; border-radius: 7px;}
.ev-field {font-size: var(--text-ui); line-height: 1.5;}
.ev-kv {font-size: var(--text-ui); grid-template-columns: 90px minmax(0,1fr); gap: 16px 14px;}
/* Page content: brand colours, project library, project home, stat tiles, issue and design lab tabs.
   Navy and sky blue are the brand colours; sky blue marks completed and current items, blue stays the action colour. */
#evScreen {background: var(--page);}
#evScreen h1:focus {outline: none;}
#evScreen .ev-card, #evScreen .ev-out, #evScreen .ev-stat {border-color: #dfe7ee; box-shadow: var(--ev-shadow);}
#evScreen .ev-heading h1, #evScreen .ev-overview-heading h1 {font-size: var(--text-4xl); font-weight: 750; letter-spacing: -1.2px;}
#evScreen .ev-card h2 {font-size: var(--text-base); font-weight: 700;}
.ev-pill.quiet {background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: #5a7183;}
.ev-pill.lime {background: var(--ev-sky); color: var(--ev-sky-ink);}
.ev-facts {list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; font-size: var(--text-ui); color: var(--dim);}
.ev-facts b {color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums;}
.ev-meter {display: block; flex: 1; min-width: 60px; height: 6px; border-radius: 6px; background: #e6edf2; overflow: hidden;}
.ev-meter i {display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #6aa6ff);}
.ev-task-count {font-size: var(--text-xs); font-weight: 600; background: #edf2f6; color: #516c80; border-radius: 6px; min-width: 26px; height: 24px; padding: 0 7px; display: grid; place-items: center;}
.ev-heading>.ev-actions {flex: none; justify-content: flex-end;}
.ev-card-head>.ev-btn.quiet {margin: -10px 0;}

/* Your projects */
.ev-resume {display: grid; grid-template-columns: 240px minmax(0,1fr) auto; align-items: center; gap: 26px; padding: 16px 24px 16px 16px; margin: 0 0 34px; color: #fff; background: var(--ev-navy) var(--ev-navy-glow); border-radius: var(--ev-radius); box-shadow: 0 12px 32px #10283c33;}
.ev-resume-preview {height: 140px; border-radius: 10px; display: grid; place-items: center; background: #ffffff10; border: 1px solid #ffffff22; color: var(--ev-on-navy); overflow: hidden;}
.ev-resume-preview img {width: 100%; height: 100%; object-fit: cover;}
.ev-resume-preview svg {width: 30px; height: 30px;}
.ev-resume-copy {min-width: 0;}
.ev-resume-label {display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-xs); font-weight: 650; color: var(--ev-sky);}
.ev-resume-label::before {content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor;}
.ev-resume h2 {font-size: 22px; font-weight: 700; letter-spacing: -.5px; line-height: 1.25; margin: 6px 0 4px; overflow-wrap: anywhere;}
.ev-resume p {font-size: var(--text-ui); color: var(--ev-on-navy); margin: 0 0 14px; overflow-wrap: anywhere;}
.ev-resume .ev-facts {color: var(--ev-on-navy);}
.ev-resume .ev-facts b {color: #fff;}
.ev-resume-actions {display: grid; gap: 8px; min-width: 170px;}
.ev-resume .ev-btn:not(.primary) {background: transparent; border-color: #ffffff40; color: #fff;}
.ev-resume .ev-btn:not(.primary):hover {background: #ffffff14; border-color: #ffffff66;}
.ev-filter {display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px;}
.ev-section-title {font-size: 17px; font-weight: 700; letter-spacing: -.3px;}
.ev-section-title>span {font-size: var(--text-xs); font-weight: 600; margin-left: 8px; background: #e7eef5; border-radius: 6px; padding: 3px 8px; vertical-align: 2px;}
.ev-project-search {display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end;}
.ev-search {position: relative; display: flex; flex: 1; max-width: 320px;}
.ev-search svg {position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: #7d92a3; pointer-events: none;}
.ev-search input {width: 100%; padding-left: 36px;}
.ev-project-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px;}
.ev-project-row {position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid #dfe7ee; border-radius: var(--ev-radius); overflow: hidden; box-shadow: var(--ev-shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s;}
.ev-project-row:hover {transform: translateY(-3px); border-color: #c4d3e0; box-shadow: var(--ev-shadow-hover);}
.ev-project-row.current {border-color: var(--ev-sky); box-shadow: 0 0 0 2px var(--ev-sky), var(--ev-shadow);}
.ev-project-row .ev-project-preview {width: auto; height: 184px; padding: 0; border: 0; border-bottom: 1px solid #e6edf3; border-radius: 0; display: grid; place-items: center; background: #f7f9fb radial-gradient(#cfdae3 1px, transparent 1px); background-size: 14px 14px; color: #8aa0b2;}
.ev-project-row .ev-project-preview img {width: 100%; height: 100%; object-fit: cover;}
.ev-project-body {flex: 1; min-width: 0; padding: 16px 18px;}
.ev-project-tags {display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;}
.ev-project-body h2 {font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -.2px; margin: 0 0 4px; overflow-wrap: anywhere;}
.ev-project-body>p {font-size: var(--text-ui); color: var(--dim); margin: 0 0 12px; overflow-wrap: anywhere;}
.ev-project-checks {display: flex; align-items: center; gap: 10px; margin-top: 14px;}
.ev-project-checks small {font-size: var(--text-xs); color: var(--dim); white-space: nowrap;}
.ev-project-foot {display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 10px 18px; border-top: 1px solid #edf1f5;}
.ev-project-foot small {font-size: var(--text-xs); color: var(--dim);}
.ev-project-foot .ev-btn {position: static; min-height: 36px; padding: 7px 12px;}
.ev-project-acts {display: flex; gap: 8px; flex: none;}
.ev-project-foot .ev-btn {font-size: var(--text-ui); color: var(--accent);}
.ev-project-foot .ev-btn::after {content: ''; position: absolute; inset: 0;}
.ev-project-row:hover .ev-project-foot .ev-btn {border-color: var(--accent); background: #f2f6ff;}
/* Delete sits above the Open button's whole-card overlay, so a tap on it never opens the project */
.ev-project-foot .ev-project-delete {position: relative; z-index: 1;}
.ev-project-foot .ev-project-delete::after {content: none;}
.ev-project-row:hover .ev-project-foot .ev-project-delete {background: transparent;}
.ev-empty-projects {background: #fff; border: 1px solid var(--line); border-radius: var(--ev-radius); padding: 36px 20px 40px; font-size: var(--text-ui);}
.ev-empty-projects .ev-hero-art {display: block; width: 190px; height: auto; max-height: none; margin: 0 auto 20px;}
.ev-storage-note {display: flex; align-items: center; gap: 14px; margin-top: 28px; padding: 16px 18px; border: 1px dashed #c9d6e2; border-radius: var(--ev-radius); background: #f9fbfc;}
.ev-storage-note>svg {width: 20px; height: 20px; color: #5f7d93; flex: none;}
.ev-storage-note>div {flex: 1; min-width: 0;}
.ev-storage-note b {font-size: var(--text-ui); font-weight: 650;}
.ev-storage-note p {font-size: var(--text-xs); color: var(--dim); line-height: 1.6; margin: 2px 0 0;}
.ev-storage-note>.ev-btn {flex: none;}

/* Project home */
.ev-overview-heading {display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 30px 32px 26px; color: #fff; background: var(--ev-navy) var(--ev-navy-glow); border-radius: 18px 18px 0 0;}
#evScreen .ev-overview-heading {margin: 0;}
.ev-overview-heading>div {min-width: 0;}
#evScreen .ev-overview-heading h1 {color: #fff; overflow-wrap: anywhere;}
#evScreen .ev-overview-heading .ev-eyebrow {color: var(--ev-sky);}
#evScreen .ev-overview-heading p {color: var(--ev-on-navy);}
.ev-overview-heading>.ev-btn {flex: none; background: #ffffff14; border-color: #ffffff33; color: #fff;}
.ev-overview-heading>.ev-btn:hover {background: #ffffff24; border-color: #ffffff66;}
.ev-flow {margin: 0 0 26px;}
.ev-flow ol {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); background: var(--ev-navy-2); border-radius: 0 0 18px 18px; overflow: hidden; box-shadow: 0 10px 30px #10283c26;}
.ev-flow li {min-width: 0; border-right: 1px solid #ffffff14;}
.ev-flow li:last-child {border-right: 0;}
.ev-flow-step {position: relative; width: 100%; height: 100%; display: flex; align-items: flex-start; gap: 11px; padding: 16px 18px 20px; background: none; border: 0; border-radius: 0; text-align: left; color: #fff; font: inherit; cursor: pointer;}
.ev-flow-step:hover {background: #ffffff0d;}
.ev-flow-step:focus-visible {outline-offset: -4px;}
.ev-flow-step::after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #ffffff14;}
.ev-flow-step.done::after {background: var(--ev-sky);}
.ev-flow-step.active::after {background: #7fb0ff;}
.ev-flow-step.attention::after {background: var(--ev-amber);}
.ev-flow-mark {width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #ffffff14; color: var(--ev-on-navy);}
.ev-flow-mark svg {width: 15px; height: 15px;}
.ev-flow-step.done .ev-flow-mark {background: var(--ev-sky); color: var(--ev-sky-ink);}
.ev-flow-step.active .ev-flow-mark {background: #7fb0ff; color: #0d2a5c;}
.ev-flow-step.attention .ev-flow-mark {background: var(--ev-amber); color: #4a3000;}
.ev-flow-copy {display: flex; flex-direction: column; min-width: 0;}
.ev-flow-copy small {font-size: var(--text-2xs); font-weight: 600; color: var(--ev-on-navy-dim);}
.ev-flow-copy b {font-size: var(--text-sm); font-weight: 650; margin: 1px 0 2px;}
.ev-flow-copy em {font-style: normal; font-size: var(--text-xs); line-height: 1.4; color: var(--ev-on-navy);}
.ev-flow-step.attention em {color: var(--ev-amber);}
.ev-overview-grid {display: grid; grid-template-columns: minmax(0,1.75fr) minmax(300px,1fr); gap: 24px; align-items: start; margin-bottom: 24px;}
.ev-overview-side {display: grid; gap: 24px; min-width: 0;}
/* Wide screens: the Site audit card sits under the plan so the two columns stay balanced. */
.ev-overview-main {display: grid; gap: 24px; min-width: 0; align-content: start;}
.ev-plan-card {overflow: hidden;}
.ev-live-plan {position: relative; width: 100%; height: 360px; display: block; padding: 18px 22px; background: #f7f9fb; border: 0; overflow: hidden; cursor: pointer;}
.ev-live-plan:hover {background: #f0f4f8;}
.ev-live-plan img {display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 16px #10283c24);}
.ev-metrics {display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid #eaf0f4; border-bottom: 1px solid #eaf0f4;}
.ev-metric {display: flex; align-items: center; gap: 11px; min-width: 0; padding: 14px 18px; border-right: 1px solid #eaf0f4;}
.ev-metric:last-child {border-right: 0;}
.ev-metric-icon {display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--ev-ok-bg); color: #3d5a14;}
.ev-metric-icon svg {width: 16px; height: 16px;}
.ev-metric-icon.amber {background: var(--ev-warn-bg); color: var(--ev-warn);}
.ev-metric>div {display: flex; flex-direction: column; min-width: 0;}
.ev-metric b {font-size: var(--text-2xl); font-weight: 750; letter-spacing: -.5px; line-height: 1.1; color: var(--ev-navy); font-variant-numeric: tabular-nums;}
.ev-metric>div>span {font-size: var(--text-xs); color: var(--dim); line-height: 1.35; overflow-wrap: anywhere;}
.ev-plan-card-foot {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px;}
.ev-plan-card-foot>div {min-width: 0;}
.ev-plan-card-foot b {display: block; font-size: var(--text-sm); font-weight: 650; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.ev-plan-card-foot small {display: block; font-size: var(--text-xs); color: var(--dim); margin-top: 3px;}
.ev-plan-card-foot>.ev-btn {flex: none;}
.ev-plan-picks {display: flex; gap: 8px; padding: 0 20px 18px; overflow: auto;}
.ev-plan-picks button {flex: none; display: flex; gap: 8px; align-items: center; max-width: 240px; padding: 7px 10px 7px 7px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: var(--text-xs); text-align: left;}
.ev-plan-picks img {width: 40px; height: 30px; object-fit: cover; border-radius: 4px; flex: none;}
.ev-plan-picks small {display: block; color: var(--dim); font-size: var(--text-2xs);}
.ev-next-list {padding: 0 20px;}
.ev-next-list button {width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; border: 0; border-bottom: 1px solid #edf1f5; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer;}
.ev-next-list button:last-child {border-bottom: 0;}
.ev-next-list button:hover b {color: var(--accent);}
.ev-next-icon {display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: #e9eef3; color: var(--ev-navy);}
.ev-next-icon svg {width: 16px; height: 16px;}
.ev-next-list button>span:nth-child(2) {flex: 1; min-width: 0;}
.ev-next-list b {display: block; font-size: var(--text-sm); font-weight: 650; line-height: 1.4;}
.ev-next-list small {display: block; font-size: var(--text-xs); line-height: 1.5; color: #64798a; margin-top: 2px;}
.ev-next-list button>svg {width: 15px; height: 15px; color: #8ba0b0; margin-top: 8px; flex: none;}
.ev-next-footer {padding: 13px 20px; border-top: 1px solid #eaf0f4; background: #fafbfd; color: #60788a; font-size: var(--text-xs); line-height: 1.6;}
.ev-checks-card .ev-card-body {padding-top: 18px; padding-bottom: 10px;}
.ev-check-list {list-style: none; margin: 12px 0 0; padding: 0;}
.ev-check-list li {display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: var(--text-ui); line-height: 1.45; color: var(--dim);}
.ev-check-list svg {width: 16px; height: 16px; flex: none; margin-top: 1px; color: #a3b3c0;}
.ev-check-list li.ok {color: var(--ink);}
.ev-check-list li.ok svg {color: var(--ev-ok);}
.ev-dashboard-bottom {display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 24px; margin-bottom: 8px;}
.ev-dashboard-bottom>.ev-card {display: flex; flex-direction: column; min-width: 0;}
.ev-card-head>svg {width: 18px; height: 18px; color: #6b8597; flex: none;}
.ev-dashboard-bottom .ev-card-body {flex: 1; display: flex; flex-direction: column; align-items: flex-start;}
.ev-dashboard-bottom .ev-card-body>.ev-btn:last-child {margin-top: auto;}
.ev-dashboard-bottom .ev-kv {width: 100%;}
.ev-delivery-summary>b, .ev-backup-card .ev-card-body>b {display: block; font-size: var(--text-sm); font-weight: 650; line-height: 1.45;}
.ev-delivery-summary p, .ev-backup-card p, .ev-downloads-card p {font-size: var(--text-ui); color: var(--dim); line-height: 1.6; margin: 6px 0 16px;}
.ev-downloads-card p {margin-top: 0;}
.ev-delivery-summary .ev-meter {width: 100%; flex: none; margin: -4px 0 18px;}
.ev-download-list {list-style: none; width: 100%; margin: 0 0 16px; padding: 0; display: grid; gap: 10px;}
.ev-download-list b {display: block; font-size: var(--text-ui); font-weight: 600; overflow-wrap: anywhere;}
.ev-download-list small {font-size: var(--text-xs); color: var(--dim);}

/* Stat tiles in Design lab and Snags */
.ev-stats {gap: 14px;}
.ev-stat {position: relative; padding: 15px 18px 15px 20px; border-radius: var(--ev-radius); overflow: hidden;}
.ev-stat::before {content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #d5dee6;}
.ev-stat label {font-size: var(--text-xs); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--dim);}
.ev-stat b {font-size: 26px; line-height: 1.2; margin: 4px 0 0; color: var(--ev-navy); font-variant-numeric: tabular-nums;}
.ev-stat.measured:not(.none)::before, .ev-stat.green::before {background: var(--ev-ok);}
.ev-stat.assumed:not(.none)::before, .ev-stat.amber::before {background: #e0a63a;}
.ev-stat.missing:not(.none)::before, .ev-stat.red::before {background: #d4574c;}
.ev-stat.assumed:not(.none) b, .ev-stat.amber b {color: var(--ev-warn);}
.ev-stat.missing:not(.none) b, .ev-stat.red b {color: var(--ev-bad);}

/* Tabs (.ev-tabs, role=tablist): a view switch, drawn as an underlined row with the selected tab marked. A value toggle is a segmented control (.seg, .ccseg) with the selected value filled navy. */
.ev-tabs {flex-wrap: nowrap; gap: 2px; overflow-x: auto; padding-bottom: 0; scrollbar-width: none;}
.ev-tabs::-webkit-scrollbar {display: none;}
.ev-tabs .ev-btn {flex: none; white-space: nowrap; min-height: 44px; margin-bottom: -1px; padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; box-shadow: none; color: var(--dim); font-size: var(--text-ui); font-weight: 600;}
.ev-tabs .ev-btn:hover {background: transparent; color: var(--ink);}
.ev-tabs .ev-btn[aria-selected=true] {color: var(--ev-navy); border-bottom: 3px solid #2563eb;}
[data-route=planning] .ev-card-body>p+.ev-btn {margin: 12px 0 4px;}

/* Issue */
.ev-group-title {font-size: var(--text-ui); font-weight: 650; color: #4b6578; margin: 0 0 12px;}
.ev-outs {grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-bottom: 30px;}
.ev-outs-compact {grid-template-columns: repeat(4, minmax(0,1fr));}
.ev-out {gap: 10px; padding: 20px; border-radius: var(--ev-radius);}
.ev-out-icon {display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--ev-navy); color: var(--ev-sky);}
.ev-out-icon svg {width: 20px; height: 20px;}
.ev-out h3 {font-size: 15px; font-weight: 650; letter-spacing: -.2px; margin: 4px 0 0;}
.ev-out p {margin: 0;}

/* Snag register; the programme's own styles are in workspace.css */
.ed-snag-table td:first-child b {font-size: var(--text-sm);}
.ed-ref {font-size: var(--text-2xs);}

@media (min-width: 1700px) {
  .ev-live-plan {height: 410px;}
}
@media (max-width: 1200px) {
  .ev-overview-grid {grid-template-columns: minmax(0,1.6fr) minmax(280px,1fr); gap: 20px;}
  .ev-overview-side {gap: 20px;}
  .ev-live-plan {height: 310px;}
  .ev-metric {padding: 13px 14px; gap: 9px;}
  .ev-metric-icon {display: none;}
  .ev-dashboard-bottom {grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px;}
  .ev-outs-compact {grid-template-columns: repeat(2, minmax(0,1fr));}
  .ev-flow-step {padding: 14px 12px 16px; gap: 9px;}
  .ev-flow-mark {width: 26px; height: 26px;}
}
@media (max-width: 1100px) {
  .ev-overview-grid {grid-template-columns: minmax(0,1fr);}
  .ev-overview-side {grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start;}
  .ev-overview-main {display: contents;}
  .ev-overview-side {order: 1;}
  .ev-overview-main>.eva-overview-card {order: 2;}
  .ev-live-plan {height: 380px;}
}
@media (max-width: 1000px) {
  .ev-resume {grid-template-columns: 190px minmax(0,1fr); padding-right: 18px;}
  .ev-resume-actions {grid-column: 1/-1; grid-template-columns: 1fr 1fr;}
}
@media (max-width: 900px) {
  .ev-outs {grid-template-columns: repeat(2, minmax(0,1fr));}
  /* Two to a row: an odd last card (the third of Issue's three) takes the whole row rather than leaving a gap. */
  .ev-outs>.ev-out:last-child:nth-child(odd) {grid-column: 1 / -1;}
  .ev-flow-copy small {display: none;}
}
@media (max-width: 700px) {
  .ev-resume {grid-template-columns: 96px minmax(0,1fr); gap: 14px; padding: 14px; margin-bottom: 28px;}
  .ev-resume-preview {height: 80px;}
  .ev-resume h2 {font-size: 18px;}
  .ev-resume p {margin-bottom: 10px;}
  .ev-resume .ev-facts {gap: 2px 12px; font-size: var(--text-xs);}
  .ev-filter {flex-wrap: wrap; gap: 12px;}
  .ev-project-search {flex: 1 1 100%; flex-wrap: wrap;}
  .ev-search {max-width: none; flex: 1 1 100%;}
  .ev-project-search select {width: 100%;}
  .ev-project-grid {grid-template-columns: minmax(0,1fr); gap: 12px;}
  .ev-project-row {display: grid; grid-template-columns: 92px minmax(0,1fr);}
  .ev-project-row .ev-project-preview {height: auto; min-height: 92px; border-bottom: 0; border-right: 1px solid #e6edf3;}
  .ev-project-row:hover {transform: none;}
  .ev-project-body {padding: 12px 14px;}
  .ev-project-tags {margin-bottom: 6px;}
  .ev-project-body h2 {font-size: 15px;}
  .ev-project-body>p {margin-bottom: 8px;}
  .ev-project-foot {grid-column: 1/-1; padding: 8px 10px 8px 14px;}
  .ev-storage-note {flex-wrap: wrap;}
  .ev-storage-note>.ev-btn {width: 100%;}
  .ev-overview-heading {gap: 12px; padding: 22px 18px 20px; border-radius: 16px 16px 0 0;}
  #evScreen .ev-heading h1, #evScreen .ev-overview-heading h1 {font-size: 28px; letter-spacing: -.8px;}
  .ev-flow {margin-bottom: 20px;}
  .ev-flow ol {grid-template-columns: minmax(0,1fr); border-radius: 0 0 16px 16px;}
  .ev-flow li {border-right: 0; border-bottom: 1px solid #ffffff14;}
  .ev-flow li:last-child {border-bottom: 0;}
  .ev-flow-step {align-items: center; padding: 11px 14px 11px 16px;}
  .ev-flow-step::after {top: 0; right: auto; width: 3px; height: auto;}
  .ev-flow-copy {flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; flex: 1;}
  .ev-flow-copy em {text-align: right;}
  .ev-overview-grid, .ev-overview-side {gap: 20px;}
  .ev-overview-side {grid-template-columns: minmax(0,1fr);}
  .ev-live-plan {height: 250px; padding: 10px;}
  .ev-metrics {grid-template-columns: repeat(2, minmax(0,1fr));}
  .ev-metric:nth-child(2) {border-right: 0;}
  .ev-metric:nth-child(-n+2) {border-bottom: 1px solid #eaf0f4;}
  .ev-plan-card-foot {flex-wrap: wrap; padding: 14px 16px; gap: 12px;}
  .ev-plan-card-foot>.ev-btn {width: 100%;}
  .ev-next-list {padding: 0 16px;}
  .ev-dashboard-bottom {grid-template-columns: minmax(0,1fr); gap: 16px;}
  .ev-stats {gap: 10px;}
  [data-route=planning] .ev-stats {grid-template-columns: repeat(3, minmax(0,1fr));}
  .ev-stat {padding: 12px 12px 12px 16px;}
  .ev-stat b {font-size: 22px;}
  .ev-heading>.ev-actions {justify-content: flex-start;}
  .ev-outs, .ev-outs-compact {grid-template-columns: minmax(0,1fr); gap: 12px;}
  .ev-out {padding: 16px;}
}

/* Drawing workspace: compact tools, full-width stage, contextual inspector. */
#evWorkbench.ev-toolbar-mode {padding: 0; display: block; min-height: 60px; background: #fff; z-index: 44;}
#evWorkbench.ev-toolbar-mode>:not(.ev-toolstrip) {display: none!important;}
.ev-toolstrip {display: flex; align-items: center; gap: 12px; padding: 11px 16px; width: 100%;}
#evToolCategory {display: none;}
.ev-undo-group {display: flex; gap: 2px; padding-right: 11px; border-right: 1px solid var(--line); flex: none;}
.ev-undo-group button {width: 31px; min-height: 34px; padding: 7px!important; border-radius: 6px; display: grid; place-items: center;}
.ev-undo-group button:hover {background: #f0f4f9;}
.ev-undo-group svg {width: 17px; height: 17px;}
.ev-undo-group .btn-label {display: none;}
#evWorkbench .catbar {flex: 1; min-width: 0; background: transparent; border: 0; padding: 0; gap: 3px; overflow-x: auto;}
#evWorkbench .ptools {gap: 3px; margin: 0;}
#evWorkbench .ptool {width: 34px; height: 36px; border-radius: 6px;}
#evWorkbench .ptool svg {width: 18px; height: 18px;}
#evWorkbench .catdiv {margin: 3px 8px;}
#evWorkbench .cattab {font-size: var(--text-xs); padding: 8px 9px; height: 36px; border-radius: 6px; gap: 6px; font-weight: 550;}
#evWorkbench .cattab>svg {display: block; width: 15px; height: 15px;}
#evWorkbench .cattab .chev {display: none;}
#evWorkbench .ev-tech {flex: none;}
#evWorkbench .ev-tech>.ev-btn {min-height: 36px; font-size: var(--text-xs); padding: 8px 11px;}
#evWorkbench .ev-focus-btn {min-height: 36px; font-size: var(--text-xs); padding: 8px 10px; flex: none;}
#evFocus[aria-pressed=true] {background: #e9f1ff; color: #1e55bf; border-color: #a9c4ee;}
#evPlanStrip {height: 51px; padding: 0 19px; gap: 10px; background: #fafbfd; border-bottom-color: #dce5ed;}
#evPlanStrip select {font-family: var(--font); font-size: var(--text-ui); max-width: 350px; min-width: 0; padding-left: 0;}
#evPlanStrip>.ev-btn {font-size: var(--text-xs); min-height: 31px; padding: 6px 9px;}
#evPlanStrip .ev-plan-meta {font-size: var(--text-2xs); margin-left: auto; color: #586f81;}
#evInspectorToggle {margin-left: 5px;}
#evPlanStrip .ev-btn {white-space: nowrap;}
#evPlanStrip>.ev-btn[aria-pressed=true] {background: var(--ev-info-bg); color: var(--ev-info); border-color: #a9c4ee;}
/* Laptop with the inspector inline: Add files and Plan settings go icon-only so the strip stays on one line. Up to 1100px the inspector overlays the plan instead. */
@media (min-width: 1101px) and (max-width: 1250px) {
  #evApp.ev-inspector-open #evPlanStrip>.ev-btn[data-ev-action=add-files] {font-size: 0; gap: 0; padding: 6px; width: 36px; justify-content: center;}
  #evApp.ev-inspector-open #evPlanStrip>.ev-btn[data-ev-action=add-files] svg {width: 17px; height: 17px;}
  #evApp.ev-inspector-open #evInspectorToggle {font-size: 0; gap: 0; padding: 7px; width: 36px; justify-content: center;}
  #evApp.ev-inspector-open #evInspectorToggle span {display: none;}
  #evApp.ev-inspector-open #evPlanStrip #evActivePlan {flex: 1 1 0; min-width: 0; max-width: none;}
}
#root {min-height: 0;}
#root .workrow {overflow: hidden;}
#root .stage {background: #e6ecf1; background-image: radial-gradient(#b5c6d480 1px,transparent 1px); background-size: 18px 18px; min-width: 0;}
#root .rail {position: absolute; left: 14px; top: 13px; bottom: 13px; width: 238px; z-index: 43; border: 1px solid #cddae4; border-radius: 12px; background: #fff; box-shadow: 0 8px 32px #17344926; overflow: hidden;}
#root .palscroll {padding: 2px 13px 17px;}
#root .palhead {padding: 15px 0 9px; background: #fff; gap: 4px;}
#root .palhead b {font-size: var(--text-sm);}
#root .palx {width: 30px; height: 30px; background: #f1f5f8;}
#root .tgroup {font-size: 10px; color: #59768b; padding-top: 18px;}
#root .tool {background: #f7f9fc; border: 1px solid #dce6ee; border-radius: 8px; min-height: 76px; font-size: var(--text-2xs); padding: 10px 5px;}
#root .tool:hover {background: #edf3ff; border-color: #98b9ed;}
#root .tool.on {background: #e8f0ff; border-color: #89ade9;}
#root .tool>.ti {margin-bottom: 5px;}
#root .side {display: none; width: 320px; flex: none; position: static; transform: none; box-shadow: none; background: var(--panel); overflow: hidden; border-left: 1px solid #cfdae4;}
#evApp.ev-inspector-open #side {display: flex;}
.ev-inspector-head {display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 17px 18px 14px; gap: 12px; border-bottom: 1px solid var(--line); flex: none;}
.ev-inspector-head small {display: block; font-size: var(--text-2xs); letter-spacing: 1.2px; color: #668194; margin-bottom: 5px;}
.ev-inspector-head b {font-size: var(--text-base); font-weight: 650;}
.ev-inspector-head .ev-icon-btn {border: 0; width: 31px; height: 31px; background: #f0f4f8;}
#root .side .tab {background: #fff; padding: 6px 12px; border-bottom: 1px solid var(--line);}
#root .side .tab button {font-size: var(--text-xs); min-height: 35px; border-radius: 6px; padding: 7px; border: 0;}
#root .side .tab button.on {background: #eaf1fd; color: #255bc0;}
#root .side .scroll {padding: 15px; gap: 15px;}
#root .side .card {border-radius: 9px; padding: 15px; border-color: #dbe4ec; box-shadow: none;}
#root .side .card h3 {font-size: var(--text-2xs); letter-spacing: .25px; color: #4e6a7f;}
#root .side label {font-size: var(--text-xs); color: #4c6578; line-height: 1.5;}
#root .side input, #root .side textarea, #root .side select {font-size: var(--text-ui); font-family: var(--font); min-height: 36px;}
#root .side .seg button {font-size: var(--text-xs); min-height: 32px;}
#root .side .snav {gap: 4px;}
#root .side .snav button {font-size: var(--text-xs); padding: 8px 5px; border-radius: 6px;}
#root .side .thumb .meta b {font-size: var(--text-xs);}
#root .zoombar {background: #fff; border: 1px solid #ccdae4; border-radius: 9px; color: #28485e; box-shadow: 0 3px 12px #17304414; right: 17px; bottom: 17px;}
#root .zoombar button {width: 38px; height: 36px; color: #28485e;}
#root .hint {background: #fff; border-color: #dbe4ec; font-size: var(--text-xs); color: #536d81;}
#root .hint button {font-size: var(--text-xs); min-height: 34px;}
#root .hint button.ghost {background: var(--panel2); color: var(--ink); border: 1px solid var(--line);}
#root .empty {background: #f4f7fae8; border-radius: 14px; padding: 24px;}
#toast {font-size: var(--text-xs); border-radius: 7px; padding: 10px 16px;}
.ev-tech-menu button {font-size: var(--text-ui); min-height: 44px; padding: 7px 11px;}
.ev-tech-menu small {font-size: var(--text-xs); line-height: 1.5; margin-top: 2px;}
/* Tools menu groups (24 Oct 2026): short headings that are not menu stops, a rule between groups, and the menu scrolls inside itself
   rather than running past the bottom of the window (workspace.js sets the exact max-height when it opens). */
.ev-tech-menu {max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain;}
.ev-tech-group + .ev-tech-group {border-top: 1px solid var(--line); margin-top: 4px;}
.ev-tech-head {padding: 8px 11px 2px; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint);}
.ev-tech-group.ev-tech-change {border-top-color: var(--line2);}
.ev-focus-mode #evWorkbench .ev-undo-group, .ev-focus-mode #evWorkbench .catbar, .ev-focus-mode #evWorkbench .ev-tech {opacity: .65;}
.ev-focus-mode #evWorkbench .catbar:hover, .ev-focus-mode #evWorkbench .ev-tech:hover {opacity: 1;}

/* Shared forms inherit the same readable controls, including Profile. */
.ep-editor {display: grid; gap: 20px;}
.ep-save {font-size: var(--text-2xs);}
.ep-preview-contact {font-size: var(--text-xs);}
.ep-preview-person p {font-size: var(--text-xs);}
.ep-preview-qualifications p {font-size: var(--text-xs);}
.ep-preview-qualifications small {font-size: var(--text-2xs);}
.ep-storage-note, .ep-preferences small {font-size: var(--text-2xs);}
.ed-check {font-size: var(--text-ui); line-height: 1.55;}
.ep-preferences, .ep-preview-paper {margin-bottom: 20px;}
.ev-table {font-size: var(--text-ui);}
.ev-table th {font-size: var(--text-2xs); color: #536f83;}
.ev-table td small {font-size: var(--text-2xs);}
.ev-stats, .ed-toolbar, .ed-programme, #evSnagMount>.ev-card, #evProgrammeMount>.ev-card {margin-bottom: 20px;}

@media (min-width: 1700px) {
  #evScreen {padding: 36px 44px 45px;}
}
@media (max-width: 1200px) {
  .ev-top {padding: 0 22px; gap: 10px;}
  .ev-top .ev-save {display: none;}
  /* A failed save stays visible at every width, as a compact red dot and text. */
  .ev-top .ev-save[data-state=error] {display: flex;}
  #evScreen {padding: 28px;}
  .ev-toolstrip {gap: 8px; padding: 11px 13px;}
  #evWorkbench .cattab {font-size: var(--text-xs); padding: 8px;}
  #evWorkbench .cattab>svg {display: none;}
}
/* Up to 1100px (iPads in either orientation) the inspector overlays the plan; selecting an item pans it clear of the panel. */
@media (max-width: 1100px) {
  #root .side {position: absolute; right: 0; top: 48px; bottom: 0; height: auto; z-index: 45; box-shadow: -8px 0 30px #17304422;}
}
@media (max-width: 1000px) {
  #evWorkbench .ev-focus-btn span {display: none;}
  #evWorkbench .ev-focus-btn {width: 36px; padding: 8px;}
  #evPlanStrip .ev-plan-meta {display: none;}
  #evInspectorToggle {margin-left: auto;}
}
@media (max-width: 700px) {
  #evApp, #evApp.ev-nav-collapsed {grid-template-columns: minmax(0,1fr);}
  #evCollapseNav {display: none;}
  .ev-sidebar, .ev-nav-collapsed .ev-sidebar {width: 240px; padding: 24px 15px 16px;}
  .ev-sidebar.open {box-shadow: none;}
  .ev-nav-collapsed .ev-brand>span, .ev-nav-collapsed .ev-nav-label, .ev-nav-collapsed .ev-nav-caption, .ev-nav-collapsed .ev-build {display: block;}
  .ev-nav-collapsed .ev-sidebar button, .ev-nav-collapsed .ev-sidebar a.ev-nav {flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; padding: 10px 13px; min-height: 43px; white-space: nowrap; text-align: left;}
  .ev-nav-collapsed .ev-nav-label {font-size: inherit; font-weight: inherit; line-height: inherit;}
  .ev-nav-collapsed .ev-brand {justify-content: flex-start; padding: 0 6px 21px;}
  .ev-nav-collapsed .ev-sidebar .ev-nav-out-icon {position: static; margin-left: auto; width: 13px; height: 13px;}
  .ev-top {height: 65px; padding: 0 14px; gap: 10px;}
  .ev-top-title b {font-size: var(--text-ui);}
  .ev-top-title small {font-size: var(--text-2xs); letter-spacing: .5px;}
  #evBackupTop {padding: 8px; min-width: 36px; min-height: 36px;}
  #evBackupTop>span {display: none;}
  #evIssuePlans {font-size: var(--text-2xs); min-height: 36px; padding: 8px 10px;}
  #evIssuePlans svg {display: none;}
  #evScreen {padding: 25px 18px 30px;}
  .ev-overview-heading h1, .ev-heading h1 {font-size: 27px;}
  .ev-overview-heading p {font-size: var(--text-ui);}
  .ev-card-head {padding: 16px 18px; min-height: 57px;}
  #evWorkbench.ev-toolbar-mode {min-height: 56px;}
  .ev-toolstrip {gap: 6px; padding: 9px 10px;}
  .ev-undo-group {display: none;}
  #evWorkbench .ptool {min-width: 36px; height: 36px;}
  #evWorkbench .catbar {flex: none; width: auto; overflow: visible;}
  #evWorkbench .catbar .cattab, #evWorkbench .catbar .catdiv, #evWorkbench .ev-focus-btn {display: none;}
  #evToolCategory {display: block; min-width: 0; flex: 1; width: 80px; height: 36px; padding: 5px; border: 1px solid #ccd9e4; border-radius: 6px; background: #fff; font-family: var(--font); font-size: var(--text-2xs); color: var(--ink);}
  #evWorkbench .cattab {font-size: var(--text-xs); padding: 8px 10px;}
  #evWorkbench .ev-tech>.ev-btn {font-size: 0; gap: 0; width: 36px; height: 36px; padding: 8px;}
  #evWorkbench .ev-tech>.ev-btn svg {width: 17px; height: 17px;}
  #evPlanStrip {padding: 0 11px; gap: 7px; height: 48px;}
  #evPlanStrip select {max-width: 170px; flex: 1; font-size: var(--text-xs);}
  #evPlanStrip>.ev-btn[data-ev-action=add-files] {font-size: 0; gap: 0; padding: 6px; width: 30px;}
  #evPlanStrip>.ev-btn[data-ev-action=add-files] svg {width: 17px; height: 17px;}
  #evPlanStrip>#evInspectorToggle {font-size: 0; gap: 0; padding: 7px;}
  #evInspectorToggle span {display: none;}
  #root .side {width: min(330px,calc(100vw - 25px));}
  #root .rail {left: 10px; top: 10px; bottom: 10px; width: 240px;}
  #root .empty {padding: 15px;}
  #root .startcard {padding: 13px 9px;}
  #root .empty h2 {font-size: 21px;}
  .ep-editor {gap: 18px;}
  .ep-save {font-size: 10px;}
  .ev-heading>.ev-actions {width: 100%;}
}
/* Tablet widths (701-1100px): undo and the canvas tools share the first row with Technical and Focus, and the category tabs take a full second row, so all six categories (including Notes) stay visible with no hidden scroll. */
@media (min-width: 701px) and (max-width: 1100px) {
  #evWorkbench .ev-toolstrip {flex-wrap: wrap; row-gap: 0;}
  #evWorkbench .ev-toolstrip::after {content: ""; order: 5; flex: 0 0 100%; height: 4px;}
  #evWorkbench .catbar {display: contents;}
  #evWorkbench .catbar .catdiv {display: none;}
  .ev-undo-group {order: 1;}
  #evWorkbench .ptools {order: 2;}
  #evWorkbench .ev-tech {order: 3; margin-left: auto;}
  #evWorkbench .ev-focus-btn {order: 4;}
  #evWorkbench .cattab {order: 6;}
  .ev-focus-mode #evWorkbench .ptools, .ev-focus-mode #evWorkbench .cattab {opacity: .65;}
  .ev-focus-mode #evWorkbench .ptools:hover, .ev-focus-mode #evWorkbench .cattab:hover {opacity: 1;}
}

/* Project pages open with a compact navy band (24 October 2026): one heading row with the title, a short description
   and the page's actions, then a slim stage strip for moving between Markup, Design lab, Programme, Readiness and Issue.
   The project's name, type and Example mark are in the top bar, so the band no longer repeats them, and the page's own
   content starts in the top third of the screen. */
#evScreen .ev-page-head {display: block; width: auto; min-width: 0; margin: 0 0 16px; padding: 0; color: #fff; background: var(--ev-navy) var(--ev-navy-glow); border-radius: var(--ev-radius-lg); box-shadow: 0 10px 30px #10283c26; overflow: hidden;}
.ev-page-head-main {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; min-width: 0; min-height: calc(var(--btn-h) + 16px); padding: 8px 12px 8px 24px;}
.ev-stage-strip {min-width: 0; width: 100%;}
.ev-page-head-main>div:first-child {display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; flex: 1 1 360px; min-width: 0;}
#evScreen .ev-page-head h1 {flex: 0 1 auto; min-width: 0; font-size: var(--text-2xl); font-weight: 750; letter-spacing: -.5px; line-height: var(--leading-snug); margin: 0; color: #fff; overflow-wrap: anywhere;}
#evScreen .ev-page-head p {flex: 1 1 260px; min-width: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ev-on-navy); margin: 0; max-width: 760px;}
#evScreen .ev-page-head .ev-eyebrow {display: none;}
.ev-page-head .ev-actions {flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; margin-left: auto;}
#evScreen .ev-page-head .ev-btn {background: #ffffff14; border-color: #ffffff33; color: #fff; box-shadow: none;}
#evScreen .ev-page-head .ev-btn:hover {background: #ffffff24; border-color: #ffffff66;}
/* The primary action on a navy surface is sky blue; everywhere else it is the blue .ev-btn.primary. */
.ev-resume .ev-btn.primary, #evScreen .ev-page-head .ev-btn.primary {background: var(--ev-sky); border-color: var(--ev-sky); color: var(--ev-sky-ink); box-shadow: none;}
.ev-resume .ev-btn.primary:hover, #evScreen .ev-page-head .ev-btn.primary:hover {background: var(--ev-sky-hover); border-color: var(--ev-sky-hover);}
/* The stage strip: one slim row of buttons, 36px tall with a mouse and the touch height (44px) on touch screens, with
   the mark and the coloured rule along the bottom showing done, in progress and needs attention. */
.ev-stage-strip ol {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); background: var(--ev-navy-2); border-top: 1px solid #ffffff14;}
.ev-stage-strip li {min-width: 0; border-right: 1px solid #ffffff14;}
.ev-stage-strip li:last-child {border-right: 0;}
.ev-stage {position: relative; width: 100%; min-height: 36px; display: flex; align-items: center; gap: 8px; padding: 4px 14px 6px; background: none; border: 0; border-radius: 0; text-align: left; color: #fff; font: inherit; cursor: pointer;}
.ev-stage:hover {background: #ffffff0d;}
@media (pointer: coarse) {
  .ev-stage {min-height: var(--btn-h);}
}
.ev-stage:focus-visible {outline-offset: -4px;}
.ev-stage::after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #ffffff14;}
.ev-stage.done::after {background: var(--ev-sky);}
.ev-stage.active::after {background: #7fb0ff;}
.ev-stage.attention::after {background: var(--ev-amber);}
.ev-stage.current {background: #ffffff12;}
.ev-stage.current::after {height: 4px;}
.ev-stage-mark {width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #ffffff14; color: var(--ev-on-navy);}
.ev-stage-mark svg {width: 13px; height: 13px;}
.ev-stage.done .ev-stage-mark {background: var(--ev-sky); color: var(--ev-sky-ink);}
.ev-stage.active .ev-stage-mark {background: #7fb0ff; color: #0d2a5c;}
.ev-stage.attention .ev-stage-mark {background: var(--ev-amber); color: #4a3000;}
.ev-stage-copy {display: flex; align-items: baseline; gap: 6px; min-width: 0;}
.ev-stage-copy small {flex: none; font-size: 10px; font-weight: 600; letter-spacing: .3px; color: var(--ev-on-navy-dim);}
.ev-stage-copy b {min-width: 0; font-size: var(--text-ui); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* Laptops, iPads and phones: the step number leaves the strip so each stage name fits. It stays in the button's
   accessible name, with the stage's state, for screen readers. */
@media (max-width: 1200px) {
  .ev-stage-copy small {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;}
  .ev-stage {padding: 4px 12px 6px;}
}
@media (max-width: 700px) {
  #evScreen .ev-page-head {margin-bottom: 14px; border-radius: 16px;}
  .ev-page-head-main {gap: 10px; padding: 12px 14px 12px 16px;}
  .ev-page-head-main>div:first-child {flex-basis: 100%;}
  #evScreen .ev-page-head p {flex-basis: 100%; font-size: var(--text-ui);}
  .ev-page-head .ev-actions {width: 100%; justify-content: flex-start; margin-left: 0;}
  .ev-stage-strip ol {display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;}
  .ev-stage-strip ol::-webkit-scrollbar {display: none;}
  .ev-stage-strip li {flex: none; border-right: 1px solid #ffffff14; scroll-snap-align: start;}
  .ev-stage-strip ol, .ev-tabs {scroll-snap-type: x proximity; overscroll-behavior-x: contain;}
  .ev-tabs .ev-btn {scroll-snap-align: start;}
  /* Fade whichever edge has more to scroll to, so clipped stages and tabs read as a strip that continues. */
  .ev-stage-strip ol {-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ev-fade-l, 0px), #000 calc(100% - var(--ev-fade-r, 36px)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--ev-fade-l, 0px), #000 calc(100% - var(--ev-fade-r, 36px)), transparent 100%);}
  .ev-tabs {padding-right: 0; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ev-fade-l, 0px), #000 calc(100% - var(--ev-fade-r, 36px)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--ev-fade-l, 0px), #000 calc(100% - var(--ev-fade-r, 36px)), transparent 100%);}
  @supports (animation-timeline: scroll()) {
    .ev-stage-strip ol, .ev-tabs {animation: ev-strip-fade linear both; animation-timeline: scroll(self inline);}
  }
  .ev-stage {padding: 4px 14px 6px; width: auto;}
}

/* Drawing page (friendlier Markup, 31 October 2026): a light tool strip on the warm page, so the plan and the kit carry the colour. Blue marks only the active tool and category. */
#evWorkbench.ev-toolbar-mode {background: var(--top-bar, #ffffff); border-bottom: 1px solid var(--card-line, #d6dfe7); box-shadow: none; color: var(--ink);}
#evWorkbench .ev-undo-group {border-right-color: var(--card-line, #d6dfe7);}
#evWorkbench .ev-undo-group button {background: transparent; border-color: transparent; color: var(--ink); box-shadow: none;}
#evWorkbench .ev-undo-group button:hover {background: #18304312; color: var(--ink);}
#evWorkbench .ev-undo-group button:disabled {opacity: .35;}
#evWorkbench .ptools {background: #18304310; border-radius: 10px; padding: 3px; gap: 2px;}
#evWorkbench .ptool {background: transparent; border-color: transparent; color: var(--ink); box-shadow: none;}
#evWorkbench .ptool:not(.on):hover {background: #fff; color: var(--ink); box-shadow: none;}
#evWorkbench .ptool.on {background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none;}
#evWorkbench .catdiv {background: var(--card-line, #d6dfe7);}
#evWorkbench .cattab {background: transparent; border-color: transparent; color: var(--ink); box-shadow: none;}
#evWorkbench .cattab:not(.on):hover {background: #18304310; color: var(--ink); box-shadow: none;}
#evWorkbench .cattab.on {background: #e6efff; border-color: #bcd0fb; color: #1d4ea6; box-shadow: none;}
#evWorkbench .cattab .cdot {background: var(--accent); box-shadow: 0 0 0 2px var(--top-bar, #ffffff);}
#evWorkbench .ev-tech>.ev-btn, #evWorkbench .ev-focus-btn {background: #fff; border-color: var(--card-line, #d6dfe7); color: var(--ink); box-shadow: none;}
#evWorkbench .ev-tech>.ev-btn:hover, #evWorkbench .ev-focus-btn:hover {background: #f7faff; border-color: #90abc9;}
#evWorkbench #evFocus[aria-pressed=true] {background: var(--accent); border-color: var(--accent); color: #fff;}
#evWorkbench #evToolCategory {background-color: #fff; border-color: var(--card-line, #d6dfe7); color: var(--ink);}
#evWorkbench #evToolCategory option {background: #fff; color: var(--ink);}
#evPlanStrip {background: var(--top-bar, #ffffff); border-bottom: 1px solid var(--card-line, #d6dfe7);}
#evPlanStrip select {font-weight: 650; color: var(--ink);}
#root .zoombar {border-radius: 12px; border-color: #cddae4; box-shadow: 0 10px 30px #10283c26;}
#evWorkbench .ev-tech-menu {color: var(--ink);}

/* Drawing page dialogs (project and review dialogs, photo adjuster) keep the planner's navy title row. The Markup side panel and the kit shelf beside the plan are light (friendlier Markup, 31 October 2026): a white title row, the chosen setting in pale blue. */
#evApp .ev-inspector-head {background: #fff; color: var(--ink); border-bottom: 1px solid var(--card-line, #d6dfe7);}
#evApp .ev-inspector-head small {display: none;}
#evApp .ev-inspector-head b {color: var(--ink);}
#evApp .ev-inspector-head #wbItemSummary {color: var(--dim);}
#evApp .ev-inspector-head .ev-btn, #evApp .ev-inspector-head .ev-icon-btn {background: #fff; border: 1px solid var(--card-line, #d6dfe7); color: var(--ink); box-shadow: none;}
#evApp .ev-inspector-head .ev-btn:hover, #evApp .ev-inspector-head .ev-icon-btn:hover {background: #f7faff; border-color: #90abc9;}
#evApp #root .side .tab {background: #fff; border-bottom: 1px solid var(--card-line, #d6dfe7); padding: 0 12px 10px;}
#evApp #root .side .tab button {background: transparent; color: var(--dim);}
#evApp #root .side .tab button:hover {background: #18304310; color: var(--ink);}
#evApp #root .side .tab button.on {background: #e6efff; color: #1d4ea6;}
#evApp #root .side .snav button.on {background: #e6efff; color: #1d4ea6;}
#evApp #root .side .seg button.on {background: #e6efff; border-color: var(--accent); color: #1d4ea6; box-shadow: inset 0 0 0 1px var(--accent);}
/* The selected option's outline is drawn inside the group's clipped, rounded frame; the end buttons take the frame's inner radius so the outline follows the corner instead of being cut off (1 November 2026). */
.seg:not([class*=grid]) > button:first-child {border-top-left-radius: 7px; border-bottom-left-radius: 7px;}
.seg:not([class*=grid]) > button:last-child {border-top-right-radius: 7px; border-bottom-right-radius: 7px;}
#evApp #root .side .card {border-radius: 12px; box-shadow: 0 2px 10px #10283c0f;}
#root .rail #wbLibraryHeader {background: transparent; border-bottom: 1px solid var(--card-line, #d6dfe7); color: var(--ink);}
#root .rail .wb-library-heading b {color: var(--ink);}
#root .rail .wb-library-heading .ev-icon-btn {background: #fff; border: 1px solid var(--card-line, #d6dfe7); color: var(--ink);}
#root .rail .wb-library-heading .ev-icon-btn:hover {background: #f7faff; border-color: #90abc9;}
#root .rail .wb-search {color: var(--dim);}
#root .rail .wb-library-tabs button {color: var(--dim);}
#root .rail .wb-library-tabs button:hover {color: var(--ink);}
#root .rail .wb-library-tabs button[aria-selected=true] {border-color: var(--accent); color: #1d4ea6;}
#root .wb-tool-cell .tool.on {background: #e6efff; border-color: #9dbff5;}
.ev-backdrop .ev-dialog {border-radius: 16px;}
.ev-backdrop .ev-dialog-head {background: var(--ev-navy); color: #fff; border-bottom: 1px solid #0b1b29;}
.ev-backdrop .ev-dialog-head h2 {color: #fff;}
.ev-backdrop .ev-dialog-head p {color: var(--ev-on-navy);}
.ev-backdrop .ev-dialog-head .ev-btn, .ev-backdrop .ev-dialog-head .ev-icon-btn {background: #ffffff14; border: 1px solid #ffffff33; color: #fff; box-shadow: none;}
.ev-backdrop .ev-dialog-head .ev-btn:hover, .ev-backdrop .ev-dialog-head .ev-icon-btn:hover {background: #ffffff24; border-color: #ffffff66;}
.ev-backdrop .ev-dialog-steps {background: var(--ev-navy); padding: 0 26px; border-bottom: 1px solid #0b1b29;}
.ev-backdrop .ev-dialog-steps button {padding: 12px 10px 11px; color: #c9d6e0; border-bottom-color: #ffffff1f;}
.ev-backdrop .ev-dialog-steps button:hover {color: #fff;}
.ev-backdrop .ev-dialog-steps button.on {border-color: var(--ev-sky); color: #fff;}
#rxBackdrop .rx {border-radius: 16px;}
#rxBackdrop .rx .rx-head {background: var(--ev-navy); color: #fff; border-bottom: 1px solid #0b1b29;}
#rxBackdrop .rx .rx-head h4 {color: #fff;}
#rxBackdrop .rx .rx-head .sub {color: var(--ev-on-navy);}
#peBackdrop .pe {border-radius: 16px; padding-top: 0;}
#peBackdrop .pe .pe-head {background: var(--ev-navy); color: #fff; margin: 0 -18px 16px; padding: 14px 18px;}
#peBackdrop .pe .pe-head h4 {color: #fff;}
#peBackdrop .pe .pe-head .sub {color: var(--ev-on-navy);}
#rxBackdrop .rx .pe-close, #peBackdrop .pe .pe-close {background: #ffffff14; border: 1px solid #ffffff33; color: #fff;}
#rxBackdrop .rx .pe-close:hover, #peBackdrop .pe .pe-close:hover {background: #ffffff24; border-color: #ffffff66; color: #fff;}
#evWorkbench .ev-tech-menu {border-radius: 12px; border-color: #cddae4; box-shadow: 0 10px 30px #10283c26;}
#evWorkbench .ev-tech-menu button:hover {background: #f0f5fa;}
#evPlanStrip .wb-display-options {border-radius: 12px; border-color: #cddae4; box-shadow: 0 10px 30px #10283c26;}
@media (max-width: 700px) {
  .ev-backdrop .ev-dialog-steps {padding: 0 20px;}
}

/* Older pop-ups: the technical dialogs (single-line diagram, cable calculations, charging simulator, DNO data, materials list, earthing wizard, PDF import), the CDM project controls and the measurement prompts open with the same navy title row as the newer panels, with sky blue marking the active CDM tab. Their content and footers are unchanged. */
.wlc-backdrop .wlc {border-radius: 16px; padding-top: 0;}
/* One layer for every modal: the older pop-ups sit with the newer dialogs, above the phone navigation, and messages show above them all. */
.wlc-backdrop, .rx-backdrop, .pe-backdrop {z-index: 160;}
.toast {z-index: 240;}
.wlc-backdrop .wlc > .wlc-head {background: var(--ev-navy); color: #fff; margin: 0 -26px 18px; padding: 20px 26px 18px;}
.wlc-backdrop .wlc > .wlc-head h2 {color: #fff;}
.wlc-backdrop .wlc > .wlc-head p {color: var(--ev-on-navy);}
.wlc-backdrop .wlc > .wlc-head em, .wlc-backdrop .wlc > .wlc-head small {color: var(--ev-on-navy-dim);}
.wlc-backdrop .wlc > .wlc-head .wlc-logo {color: #fff;}
.evsp-cdm-dialog .evsp-cdm-head {background: var(--ev-navy); border-bottom: 0;}
.evsp-cdm-dialog .evsp-cdm-head h2 {color: #fff;}
.evsp-cdm-dialog .evsp-cdm-head p {color: var(--ev-on-navy);}
.evsp-cdm-dialog .evsp-cdm-close {background: #ffffff14; border-color: #ffffff33; color: #fff;}
.evsp-cdm-dialog .evsp-cdm-close:hover {background: #ffffff24; border-color: #ffffff66;}
.evsp-cdm-dialog .evsp-cdm-tabs {background: var(--ev-navy); border-bottom: 1px solid #0b1b29; padding: 0 24px 10px;}
.evsp-cdm-dialog .evsp-cdm-tabs button {color: #c9d6e0;}
.evsp-cdm-dialog .evsp-cdm-tabs button:hover {background: #ffffff14; color: #fff;}
.evsp-cdm-dialog .evsp-cdm-tabs button.on {background: var(--ev-sky); border-color: var(--ev-sky); color: var(--ev-sky-ink); box-shadow: none;}
.sheet-backdrop .sheet {border-radius: 16px; padding-top: 0;}
.sheet-backdrop .sheet h4 {background: var(--ev-navy); color: #fff; margin: 0 -22px 0; padding: 18px 22px 16px;}
.sheet-backdrop .sheet .slab {background: var(--ev-navy); color: var(--ev-on-navy); margin: -12px -22px 16px; padding: 0 22px 16px;}
.sheet-backdrop .sheet .slab + .sheet-help, .sheet-backdrop .sheet h4 + .sheet-help {margin-top: 0;}
@media (max-width: 760px) {
  .evsp-cdm-dialog .evsp-cdm-tabs {padding: 0 12px 8px;}
}

/* Buttons and fields inside the Markup panels and pop-ups: the blue primary action (the same as on the pages; sky blue only on navy), white secondary buttons and fields with the planner's borders, and navy selected states. Styles only, scoped to the side panel, the legacy pop-ups, the CDM dialog and the bodies and footers of the newer dialogs. */
#root .side .pbtn, #root .side .stepper button, #root .side .ev-btn:not(.primary):not(.quiet), .wlc-backdrop .wlc .pbtn, .wlc-backdrop .wlc .hbtn, .sheet-backdrop .sheet .hbtn, #peBackdrop .pe .hbtn, #peBackdrop .pe .pe-zero, #rxBackdrop .rx .hbtn, #rxBackdrop .rx .pbtn, #rxBackdrop .rx .rx-toggle, .evsp-cdm-dialog .evsp-cdm-btn, .fpe-shell .fpe-hbtn, .ev-backdrop .ev-dialog-body .ev-btn:not(.primary):not(.quiet), .ev-backdrop .ev-dialog-foot .ev-btn:not(.primary):not(.quiet) {background: #fff; border: 1px solid var(--line2); border-radius: var(--btn-r); color: var(--ink); box-shadow: none; transition: background .12s, border-color .12s;}
#root .side .pbtn:hover, #root .side .stepper button:hover, #root .side .ev-btn:not(.primary):not(.quiet):hover, .wlc-backdrop .wlc .pbtn:hover, .wlc-backdrop .wlc .hbtn:hover, .sheet-backdrop .sheet .hbtn:hover, #peBackdrop .pe .hbtn:hover, #peBackdrop .pe .pe-zero:hover, #rxBackdrop .rx .hbtn:hover, #rxBackdrop .rx .pbtn:hover, #rxBackdrop .rx .rx-toggle:hover, .evsp-cdm-dialog .evsp-cdm-btn:hover, .fpe-shell .fpe-hbtn:hover, .ev-backdrop .ev-dialog-body .ev-btn:not(.primary):not(.quiet):hover, .ev-backdrop .ev-dialog-foot .ev-btn:not(.primary):not(.quiet):hover {background: #f0f5fa; border-color: #9fb6c8; color: var(--ink);}
#root .side .pbtn.go, #root .side .ev-btn.primary, .wlc-backdrop .wlc .pbtn.go, .wlc-backdrop .wlc .hbtn.primary, .sheet-backdrop .sheet .hbtn.primary, #peBackdrop .pe .hbtn.primary, #rxBackdrop .rx .hbtn.primary, #rxBackdrop .rx .pbtn.go, .evsp-cdm-dialog .evsp-cdm-btn.primary, .fpe-shell .fpe-hbtn.go, .ev-backdrop .ev-dialog-body .ev-btn.primary, .ev-backdrop .ev-dialog-foot .ev-btn.primary {background: var(--accent); border: 1px solid var(--accent); border-radius: var(--btn-r); color: var(--accentInk); box-shadow: none;}
#root .side .pbtn.go:hover, #root .side .ev-btn.primary:hover, .wlc-backdrop .wlc .pbtn.go:hover, .wlc-backdrop .wlc .hbtn.primary:hover, .sheet-backdrop .sheet .hbtn.primary:hover, #peBackdrop .pe .hbtn.primary:hover, #rxBackdrop .rx .hbtn.primary:hover, #rxBackdrop .rx .pbtn.go:hover, .evsp-cdm-dialog .evsp-cdm-btn.primary:hover, .fpe-shell .fpe-hbtn.go:hover, .ev-backdrop .ev-dialog-body .ev-btn.primary:hover, .ev-backdrop .ev-dialog-foot .ev-btn.primary:hover {background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accentInk);}
/* One button size in every dialog: the older pop-ups' buttons take the same tokens as .ev-btn. */
.wlc-backdrop .wlc .hbtn, .wlc-backdrop .wlc .pbtn, .sheet-backdrop .sheet .hbtn, #peBackdrop .pe .hbtn, #rxBackdrop .rx .hbtn, #rxBackdrop .rx .pbtn, .evsp-cdm-dialog .evsp-cdm-btn, .fpe-shell .fpe-hbtn {min-height: var(--btn-h); font-size: var(--btn-fs); border-radius: var(--btn-r);}
#root .side .pbtn {min-height: var(--btn-h); border-radius: var(--btn-r);}
#root .side .pbtn.danger, .wlc-backdrop .wlc .pbtn.danger, #rxBackdrop .rx .pbtn.danger, .evsp-cdm-dialog .evsp-cdm-btn.danger, .fpe-shell .fpe-hbtn.danger {color: var(--ev-bad);}
#root .side .pbtn.danger:hover, .wlc-backdrop .wlc .pbtn.danger:hover, #rxBackdrop .rx .pbtn.danger:hover, .evsp-cdm-dialog .evsp-cdm-btn.danger:hover, .fpe-shell .fpe-hbtn.danger:hover {background: var(--ev-bad-bg); border-color: #e3b8b2; color: var(--ev-bad);}
#root .side .pbtn:disabled, .wlc-backdrop .wlc .hbtn:disabled, .wlc-backdrop .wlc .pbtn:disabled, .sheet-backdrop .sheet .hbtn:disabled, #peBackdrop .pe .hbtn:disabled, #rxBackdrop .rx .hbtn:disabled, #rxBackdrop .rx .pbtn:disabled {opacity: .45; cursor: default;}
#root .side .seg, .wlc-backdrop .wlc .seg, .wlc-backdrop .wlc .ccseg, #rxBackdrop .rx .seg {background: #fff; border-color: var(--line2); border-radius: 8px;}
#root .side .seg button, .wlc-backdrop .wlc .seg button, .wlc-backdrop .wlc .ccseg button, #rxBackdrop .rx .seg button {background: #fff; color: var(--dim);}
#root .side .seg button:not(.on):hover, .wlc-backdrop .wlc .seg button:not(.on):hover, .wlc-backdrop .wlc .ccseg button:not(.on):hover, #rxBackdrop .rx .seg button:not(.on):hover {background: #f0f5fa; color: var(--ink);}
#root .side .seg button.on, .wlc-backdrop .wlc .seg button.on, .wlc-backdrop .wlc .ccseg button.on, #rxBackdrop .rx .seg button.on, .sheet-backdrop .sheet .schip.on, #rxBackdrop .rx .rx-toggle.on, .fpe-shell .fpe-tabs button.on {background: var(--ev-navy); border-color: var(--ev-navy); color: #fff; box-shadow: none;}
#root .side .seg[class*=grid] button, .wlc-backdrop .wlc .seg[class*=grid] button {border: 1px solid var(--line2); border-radius: 8px;}
#root .side .seg[class*=grid] button.on, .wlc-backdrop .wlc .seg[class*=grid] button.on {border-color: var(--ev-navy);}
.sheet-backdrop .sheet .schip {background: #fff; border-color: var(--line2); color: var(--ink);}
.sheet-backdrop .sheet .schip:hover {background: #f0f5fa; border-color: #9fb6c8; color: var(--ink);}
.sheet-backdrop .sheet .schip.on:hover {background: var(--ev-navy-2); border-color: var(--ev-navy-2); color: #fff;}
.fpe-shell .fpe-pal button:hover {border-color: var(--ev-navy); color: var(--ev-navy);}
#evApp #root .side .prop input, #evApp #root .side .prop textarea, #evApp #root .side .prop select, #evApp #root .side .wb-field input:not([type=range]):not([type=color]), #evApp #root .side .wb-field select, #evApp #root .side .wb-field textarea, .wlc-backdrop .wlc input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), .wlc-backdrop .wlc select, .wlc-backdrop .wlc textarea, .sheet-backdrop .sheet input, #rxBackdrop .rx input:not([type=checkbox]):not([type=radio]), #rxBackdrop .rx textarea, #rxBackdrop .rx select, .evsp-cdm-dialog input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), .evsp-cdm-dialog select, .evsp-cdm-dialog textarea, .ev-backdrop .ev-dialog-body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), .ev-backdrop .ev-dialog-body select, .ev-backdrop .ev-dialog-body textarea {background: #fff; border: 1px solid var(--field-border); border-radius: 8px; color: var(--ink); box-shadow: none;}
#evApp #root .side .prop input:focus, #evApp #root .side .prop textarea:focus, #evApp #root .side .prop select:focus, #evApp #root .side .wb-field input:not([type=range]):not([type=color]):focus, #evApp #root .side .wb-field select:focus, #evApp #root .side .wb-field textarea:focus, .wlc-backdrop .wlc input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus, .wlc-backdrop .wlc select:focus, .wlc-backdrop .wlc textarea:focus, .sheet-backdrop .sheet input:focus, #rxBackdrop .rx input:not([type=checkbox]):not([type=radio]):focus, #rxBackdrop .rx textarea:focus, #rxBackdrop .rx select:focus, .evsp-cdm-dialog input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus, .evsp-cdm-dialog select:focus, .evsp-cdm-dialog textarea:focus, .ev-backdrop .ev-dialog-body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus, .ev-backdrop .ev-dialog-body select:focus, .ev-backdrop .ev-dialog-body textarea:focus {border-color: var(--ev-navy);}
/* Drop-down boxes draw their own arrow on every planner page and dialog: Safari's built-in select ignores the rounded border and shows a grey square at the corners (1 November 2026).
   The :not(#evsp-native-select) carries an id's weight, so this outranks the page and dialog rules that set the box's background in one go; the plan strip and Markup panel fields, set with two ids, are listed after it. */
select:not([multiple]):not([size]):not(#evsp-native-select), #evPlanStrip #evActivePlan:not([multiple]):not([size]), #evPlanStrip #wbLabelMode:not([multiple]):not([size]), #evApp #root .side .prop select:not([multiple]):not([size]), #evApp #root .side .wb-field select:not([multiple]):not([size]), .wlc-backdrop .wlc select:not([multiple]):not([size]), #rxBackdrop .rx select:not([multiple]):not([size]), .evsp-cdm-dialog select:not([multiple]):not([size]), .ev-backdrop .ev-dialog-body select:not([multiple]):not([size]) {-webkit-appearance: none; appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234f6576' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px;}
#root .side input[type=checkbox], #root .side input[type=radio], #root .side input[type=range], .wlc-backdrop .wlc input[type=checkbox], .wlc-backdrop .wlc input[type=radio], .wlc-backdrop .wlc input[type=range], .evsp-cdm-dialog input[type=checkbox], .evsp-cdm-dialog input[type=radio], #peBackdrop .pe input[type=range], #rxBackdrop .rx input[type=checkbox], .ev-backdrop .ev-dialog input[type=checkbox], .ev-backdrop .ev-dialog input[type=radio], #evPlanStrip .wb-display-options input, .ev-plan-choice input {accent-color: var(--ev-navy);}
#peBackdrop .pe .pe-ctl b {color: var(--ev-navy);}
.evsp-cdm-dialog .evsp-cdm-route {background: #fff; border-color: var(--line2);}
.evsp-cdm-dialog .evsp-cdm-route:hover {background: #f0f5fa; border-color: #9fb6c8;}
.evsp-cdm-dialog .evsp-cdm-route.on {background: #e6efff; border-color: var(--ev-navy); box-shadow: 0 0 0 2px var(--ev-navy) inset;}
.ev-document-thumbnails button[aria-current=page] {border-color: var(--ev-navy); color: var(--ev-navy); background: #e6efff;}
#root .side .thumb.active {border-color: var(--ev-navy); box-shadow: 0 0 0 2px var(--ev-navy) inset;}
#root .side .thumb.dropbefore {box-shadow: 0 -3px 0 var(--ev-navy);}

/* Edge fades for the phone stage strip and Design lab tabs: driven by the strip's own scroll position where the browser supports it. */
@property --ev-fade-l {syntax: '<length>'; inherits: false; initial-value: 0px;}
@property --ev-fade-r {syntax: '<length>'; inherits: false; initial-value: 36px;}
@keyframes ev-strip-fade {0% {--ev-fade-l: 0px; --ev-fade-r: 36px;} 8% {--ev-fade-l: 36px;} 92% {--ev-fade-r: 36px;} 100% {--ev-fade-l: 36px; --ev-fade-r: 0px;}}

/* Focus: one ring everywhere (defined first, in the planner page). It is navy on light surfaces; navy surfaces re-point it to sky blue, and white menus inside them point it back. */
.ev-sidebar, #evScreen .ev-page-head, .ev-overview-heading, .ev-resume,
.ev-backdrop .ev-dialog-head, .ev-backdrop .ev-dialog-steps, #rxBackdrop .rx .rx-head, #peBackdrop .pe .pe-head, .wlc-backdrop .wlc > .wlc-head, .evsp-cdm-dialog .evsp-cdm-head, .evsp-cdm-dialog .evsp-cdm-tabs,
.sheet-backdrop .sheet h4, .sheet-backdrop .sheet .slab, .ev-help-head, .ev-tour-head,
.eh-home .eh-hero, .eh-welcome, .eh-resource-dark, .eh-returning .eh-workflow {--focus: var(--ev-sky);}
#evWorkbench .ev-tech-menu, #evWorkbench #evToolCategory option {--focus: var(--ev-navy);}
@media (max-width: 700px) {
  .ev-top .ev-save[data-state=error] .ev-save-text {display: none;}
}
/* The save-failure banner sits under the top bar on every page. */
#evSaveBanner {padding: 14px 28px 0;}
#evSaveBanner .ev-backup-nudge {margin: 0;}
@media (max-width: 700px) {#evSaveBanner {padding: 10px 12px 0;}}
/* Segmented buttons sit in a clipped frame, so their ring is drawn inside; on the selected (navy) option it is sky blue. */
.seg button:focus-visible, .ccseg button:focus-visible {outline-offset: -3px;}
.seg button.on:focus-visible, .ccseg button.on:focus-visible {outline-color: var(--ev-sky);}

/* Fields and selected values on the planner pages (Overview, Your projects, Design lab, Programme, Snags, Issue, Site audit and My profile) and the dialogs they open match the Markup panels: a focused field takes a navy border under the navy focus ring, ticks, radios and sliders are navy, the chosen project type is marked in navy, and Design lab's charger assignment lists are drawn like the other fields. The main action stays blue on light surfaces and sky blue on navy. Styles only. */
.ev-field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):focus, .ev-field select:focus, .ev-field textarea:focus, .ev-input:focus, .ev-select:focus, [data-route=planning] .ev-table input:focus, [data-route=planning] .ev-table select:focus {border-color: var(--ev-navy);}
[data-route=planning] .ev-table select {background: #fff; border: 1px solid var(--field-border); border-radius: 6px; color: var(--ink); font: inherit; padding: 7px 9px;}
#evScreen input[type=checkbox], #evScreen input[type=radio], #evScreen input[type=range]:not(#evpPhaseSlider) {accent-color: var(--ev-navy);}
.ev-mode-options button.on {background: #e6efff; border-color: var(--ev-navy); box-shadow: 0 0 0 2px var(--ev-navy) inset; color: var(--ink);}

/* Design pass, 9 October 2026. Styles only: spacing, the current stage, the overview header on phones, plan and audit panels, the evidence register rows and button sizes. */
/* Cards that follow one another on a page (every Design lab tab) keep a gap instead of touching. */
#evScreen .ev-page>.ev-card+.ev-card {margin-top: 20px;}
/* The page header's stage strip: the page you are on is a lighter tab with a ringed mark and a white name; the others step back. */
.ev-stage-copy b {color: var(--ev-on-navy);}
.ev-stage.current {background: #ffffff1f;}
.ev-stage.current .ev-stage-copy b {color: #fff;}
.ev-stage.current .ev-stage-copy small {color: var(--ev-on-navy);}
.ev-stage.current .ev-stage-mark {box-shadow: 0 0 0 2px #fff;}
/* The overview header's Project details button matches the other page headers: a quiet button on navy. */
#evScreen .ev-overview-heading .ev-btn {background: #ffffff14; border-color: #ffffff33; color: #fff; box-shadow: none;}
#evScreen .ev-overview-heading .ev-btn:hover {background: #ffffff24; border-color: #ffffff66;}
/* The plan on the overview sits on a faint drawing grid rather than an empty panel. */
.ev-live-plan {background-color: #f3f6f9; background-image: linear-gradient(#e2e9f0 1px, transparent 1px), linear-gradient(90deg, #e2e9f0 1px, transparent 1px); background-size: 24px 24px; background-position: center;}
.ev-live-plan:hover {background-color: #edf2f7;}
/* Evidence register rows open with a turning chevron in place of the browser's black triangle. */
.evp-evidence-row summary {list-style: none; position: relative; padding-left: 24px; border-radius: 6px;}
.evp-evidence-row summary::-webkit-details-marker {display: none;}
.evp-evidence-row summary::before {content: ''; position: absolute; left: 3px; top: .6em; width: 7px; height: 7px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(-45deg); transition: transform .15s ease;}
.evp-evidence-row[open] summary::before {transform: rotate(45deg); top: .45em;}
.evp-evidence-row summary:hover::before {border-color: var(--ink);}
.evp-evidence-row summary:hover b {color: var(--accentText);}
/* Site audit: the three parts of an audit sit in numbered panels, with room between the button and the note under it. */
.eva-intro-grid {counter-reset: eva-step;}
.eva-intro-grid>div {counter-increment: eva-step; position: relative; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);}
.eva-intro-grid>div::before {content: counter(eva-step, decimal-leading-zero); position: absolute; top: 16px; right: 16px; min-width: 30px; padding: 3px 8px; border-radius: 999px; background: #e6efff; color: var(--accentText); font-size: var(--text-2xs); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;}
.eva-intro .eva-disclaimer {margin-top: 14px;}
/* Home: with no audits yet, the Site audits section shows a quiet dashed panel instead of a loose line of text. */
.eh-audits-empty {display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px dashed var(--line2); border-radius: 14px; background: #fff;}
.eh-audits-empty::before {content: ''; flex: none; width: 40px; height: 40px; border-radius: 10px; background: #e6efff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232056c5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6v3H9zM7 5H5v16h14V5h-2M9 13l2 2 4-4'/%3E%3C/svg%3E") center / 20px no-repeat;}
/* My profile: Use profile on this project uses the standard button text size (it was 11 px). */
.ep-apply .ev-btn {font-size: var(--btn-fs);}
@media (max-width: 700px) {
  #evScreen .ev-page>.ev-card+.ev-card {margin-top: 16px;}
  /* The overview header stacks: name and address first, then Project details on its own line. */
  .ev-overview-heading {flex-direction: column; align-items: stretch;}
  .ev-overview-heading .ev-actions {justify-content: flex-start;}
  /* Practice project: the main button takes the full width, so neither button label wraps onto two lines. */
  .ev-practice .ev-actions .ev-btn.primary {flex-basis: 100%;}
  /* Card titles keep their line; a long header button drops underneath instead of squeezing the title. */
  .ev-card-head {flex-wrap: wrap;}
  .ev-card-head>h2 {flex: 1 1 160px;}
}
/* Overview: the two columns end level. On wide screens each column's last card grows to meet the other column; on a tablet Next actions and Record checks, side by side, share one height. */
@media (min-width: 1101px) {
  .ev-overview-grid {align-items: stretch;}
  .ev-overview-main, .ev-overview-side {display: flex; flex-direction: column;}
  .ev-overview-main>:last-child, .ev-overview-side>:last-child {flex-grow: 1;}
}
@media (min-width: 701px) and (max-width: 1100px) {
  .ev-overview-side {align-items: stretch;}
}
/* Your projects: Projects and Estate overview tabs. The estate overview lists every saved project as one row: a table on
   laptops and desktops, cards on tablets and phones. Totals sit above, then the site map space and the summary exports. */
.ev-project-views {display: flex; margin: 4px 0 20px; border-bottom: 1px solid var(--line);}
.ev-estate-summary {margin-bottom: 22px;}
.ev-estate-stats {grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 16px;}
.ev-estate-stats .ev-stat {min-width: 0; padding: 16px 18px;}
.ev-estate-stats .ev-stat label {font-size: var(--text-xs); color: var(--dim);}
.ev-estate-stats .ev-stat b {font-size: var(--text-2xl); color: var(--ev-navy); font-variant-numeric: tabular-nums; margin: 6px 0 4px;}
.ev-estate-stats .ev-stat b small {font-size: var(--text-sm); font-weight: 600; color: var(--dim); letter-spacing: 0;}
.ev-estate-row {display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: stretch;}
/* Site map placeholder: the coordinates come from the Map button work on another branch. */
.ev-estate-map {display: flex; align-items: center; gap: 14px; min-height: 132px; padding: 20px 22px; border: 1px dashed var(--line2); border-radius: var(--ev-radius); background: var(--panel) radial-gradient(#d6e0e8 1px, transparent 1px); background-size: 14px 14px;}
.ev-estate-map-icon {display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--ev-info-bg); color: var(--ev-info);}
.ev-estate-map h2, .ev-estate-export h2 {font-size: var(--text-sm); font-weight: 700; margin: 0 0 4px;}
.ev-estate-map p, .ev-estate-export p {font-size: var(--text-xs); color: var(--dim); line-height: var(--leading-normal); margin: 0;}
.ev-estate-export {margin: 0;}
.ev-estate-export .ev-actions {margin-top: 14px;}
.ev-estate-table-wrap {background: #fff; border: 1px solid var(--line); border-radius: var(--ev-radius); overflow: hidden;}
.ev-estate-table th, .ev-estate-table td {padding: 12px 14px; vertical-align: top;}
.ev-estate-table th {color: var(--dim);}
.ev-estate-table .num {text-align: right; font-variant-numeric: tabular-nums;}
.ev-estate-table tbody tr {cursor: pointer;}
.ev-estate-table tbody tr:hover {background: var(--panel);}
.ev-estate-table tr.current {box-shadow: inset 3px 0 0 var(--ev-sky);}
.ev-estate-site {min-width: 200px;}
.ev-estate-site .ev-pill {margin-left: 6px; vertical-align: 1px;}
.ev-estate-site small, .ev-estate-table td>small {display: block; color: var(--dim); font-size: var(--text-2xs); line-height: 1.5; margin-top: 3px;}
.ev-estate-open {padding: 0; border: 0; background: none; font: inherit; font-size: var(--text-sm); font-weight: 700; color: var(--ev-navy); text-align: left; cursor: pointer;}
.ev-estate-open:hover {color: var(--accent); text-decoration: underline;}
.ev-estate-table td>b {display: block; font-weight: 700;}
.ev-estate-dash {color: var(--faint);}
.ev-estate-flags {display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none;}
.ev-estate-flags li {font-size: var(--text-2xs); font-weight: 650; line-height: 1.35; padding: 3px 8px; border-radius: 5px; width: fit-content;}
.ev-estate-flags .overdue {background: var(--ev-bad-bg); color: var(--ev-bad);}
.ev-estate-flags .attention {background: var(--ev-warn-bg); color: var(--ev-warn);}
.ev-estate-flags .waiting {background: var(--ev-info-bg); color: var(--ev-info);}
.ev-estate-note {font-size: var(--text-xs); color: var(--dim); line-height: var(--leading-normal); margin: 12px 2px 0; max-width: 820px;}
.ev-estate-empty {background: #fff; border: 1px dashed var(--line2); border-radius: var(--ev-radius); margin-bottom: 16px;}
@media (max-width: 1200px) {
  .ev-estate-stats {grid-template-columns: repeat(3, minmax(0, 1fr));}
  /* Cards: each row becomes a card with the site on top and the figures in a grid of labelled cells. */
  .ev-estate-table-wrap {background: none; border: 0; overflow: visible;}
  .ev-estate-table thead {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
  .ev-estate-table, .ev-estate-table tbody {display: block;}
  .ev-estate-table tbody {display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px;}
  .ev-estate-table tr {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--ev-radius); box-shadow: var(--ev-shadow);}
  .ev-estate-table tbody tr:hover {background: #fff; border-color: #c4d3e0;}
  .ev-estate-table tr.current {box-shadow: 0 0 0 2px var(--ev-sky), var(--ev-shadow);}
  .ev-estate-table td {display: block; padding: 0; border: 0; min-width: 0;}
  .ev-estate-table td.num {text-align: left;}
  .ev-estate-table td[data-label]:not(.ev-estate-site)::before {content: attr(data-label); display: block; font-size: var(--text-2xs); font-weight: 650; color: var(--dim); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px;}
  .ev-estate-site, .ev-estate-flag-cell {grid-column: 1 / -1;}
  .ev-estate-site {padding-bottom: 10px; border-bottom: 1px solid var(--line);}
  .ev-estate-flags {flex-flow: row wrap;}
}
@media (max-width: 1100px) {
  .ev-estate-row {grid-template-columns: 1fr;}
  .ev-estate-map {min-height: 0;}
}
@media (max-width: 700px) {
  .ev-estate-stats {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .ev-estate-stats .ev-stat {padding: 13px 14px;}
  .ev-estate-table tbody {grid-template-columns: 1fr;}
  .ev-estate-table tr {padding: 14px 15px;}
  .ev-estate-site {min-width: 0;}
  .ev-estate-export .ev-actions .ev-btn {flex: 1 1 0;}
}
@media (max-width: 1100px) {
  /* Estate overview: the search takes its own line so the placeholder is not cut short. */
  .ev-estate-library .ev-project-search {flex-wrap: wrap;}
  .ev-estate-library .ev-search {flex: 1 1 100%; max-width: none;}
  .ev-estate-library .ev-project-search select {flex: 1 1 0;}
}

/* Planner page and Your projects, 19 October 2026: the depth, spacing and type of the new home page carried into the drawing page and the project library. Styles only; no control, route or saved data changed. */
/* Tool strip (light since 31 October 2026): the canvas tools sit in a soft well and the active tool has a faint blue glow. */
#evWorkbench .ptool.on {box-shadow: 0 2px 10px #2563eb40;}
/* Plan strip: on the light top bar, with a soft shadow onto the stage; its buttons get a faint lift. */
#evPlanStrip {position: relative; z-index: 2; border-bottom-color: var(--card-line, #d6dfe7); box-shadow: 0 4px 16px #10283c0d;}
#evPlanStrip>.ev-btn {background: #fff; box-shadow: 0 1px 2px #10283c0f;}
#evPlanStrip>.ev-btn[aria-pressed=true] {box-shadow: none;}
/* Stage: the faint line grid from the home page behind the plan, in place of dots. */
#root .stage {background: var(--page, #eef2f6); background-image: linear-gradient(var(--page-grid, #12304a08) 1px, transparent 1px), linear-gradient(90deg, var(--page-grid, #12304a08) 1px, transparent 1px); background-size: 28px 28px;}
/* Selected-item panel: a light title row, and each group of settings is its own white card with a turning chevron instead of the browser's triangle. */
#evApp .ev-inspector-head {padding: 16px 18px 14px; position: relative; z-index: 1;}
#evApp .ev-inspector-head b {letter-spacing: -.2px;}
#evApp #root .side .card.wb-inspector {background: transparent; border: 0; box-shadow: none; padding: 0; display: grid; gap: 10px;}
#evApp #root .side .wb-inspector .wb-section {background: #fff; border: 1px solid #dfe7ee; border-radius: 12px; box-shadow: 0 2px 8px #10283c0a; overflow: hidden;}
#root .wb-inspector .wb-section>h3 {color: #5d788c; letter-spacing: 1px; padding: 14px 16px 0;}
#root .wb-inspector .wb-section>summary {list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; color: var(--ink);}
#root .wb-inspector .wb-section>summary::-webkit-details-marker {display: none;}
#root .wb-inspector .wb-section>summary::after {content: ''; flex: none; width: 8px; height: 8px; margin: -4px 4px 0 0; border-right: 2px solid #5d788c; border-bottom: 2px solid #5d788c; transform: rotate(45deg); transition: transform .2s ease, margin .2s ease;}
#root .wb-inspector .wb-section[open]>summary::after {transform: rotate(-135deg); margin-top: 4px;}
#root .wb-inspector .wb-section[open]>summary {border-bottom: 1px solid #eaf0f4;}
@media (min-width: 1101px) {
  #root .side {box-shadow: -10px 0 30px #10283c12;}
}
/* Equipment picker: a deeper shadow and the navy glow on its title row; tiles lift on hover. */
#root .rail {border-radius: 14px; border-color: #c9d7e2; box-shadow: 0 18px 44px #10283c2e, 0 2px 6px #10283c14;}
#root .wb-tool-cell .tool {transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;}
#root .wb-tool-cell .tool:hover {transform: translateY(-2px); box-shadow: 0 8px 18px #10283c1a;}
#root .tgroup {color: #5d788c; letter-spacing: 1px;}
/* Your projects: the faint page grid, a Continue working band with the home page's grid, glow and tilted plan, facts as pills, deeper project cards and the storage note as a pale blue panel. */
#evScreen {background-color: var(--page); background-image: linear-gradient(var(--page-grid) 1px, transparent 1px), linear-gradient(90deg, var(--page-grid) 1px, transparent 1px); background-size: 28px 28px;}
.ev-resume {position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; box-shadow: 0 16px 40px #10283c33;}
.ev-resume::before {content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px); background-size: 28px 28px; pointer-events: none;}
.ev-resume::after {content: ''; position: absolute; left: 30px; top: 50%; z-index: -1; width: 340px; height: 240px; margin-top: -120px; background: radial-gradient(closest-side, #6aa6ff3d, transparent); pointer-events: none;}
.ev-resume-preview {border: 1px solid #ffffff33; box-shadow: 0 14px 34px #0b1b2966; transition: transform .4s ease;}
.ev-resume-label::before {animation: evPulse 2.4s ease-out infinite;}
@keyframes evPulse {0% {box-shadow: 0 0 0 0 #6aa6ff80;} 70% {box-shadow: 0 0 0 8px #6aa6ff00;} 100% {box-shadow: 0 0 0 0 #6aa6ff00;}}
.ev-resume h2 {font-size: var(--text-2xl); letter-spacing: -.6px;}
.ev-resume .ev-facts {gap: 8px; margin-top: 2px;}
.ev-resume .ev-facts li {background: #ffffff14; border: 1px solid #ffffff1f; border-radius: 999px; padding: 5px 11px; font-size: var(--text-xs);}
.ev-project-row {border-radius: 16px; box-shadow: 0 1px 2px #10283c0a, 0 10px 26px #10283c0d;}
.ev-project-row.current {box-shadow: 0 0 0 2px var(--ev-sky), 0 10px 26px #10283c14;}
.ev-project-row .ev-project-preview {position: relative; overflow: hidden; background: #f3f6f9; background-image: linear-gradient(#10283c0a 1px, transparent 1px), linear-gradient(90deg, #10283c0a 1px, transparent 1px); background-size: 28px 28px;}
.ev-project-row .ev-project-preview::after {content: ''; position: absolute; inset: auto 0 0; height: 36px; background: linear-gradient(transparent, #10283c14); pointer-events: none;}
.ev-project-row .ev-project-preview img {transition: transform .5s ease;}
.ev-project-body {padding: 18px 20px 16px;}
.ev-project-foot {padding: 12px 16px 12px 20px; background: #fafbfd;}
.ev-project-foot .ev-btn {border-radius: 999px; padding: 7px 14px;}
.ev-storage-note {border: 1px solid #e3eaf1; background: #eef3f8; border-radius: 16px; padding: 18px 20px; gap: 16px;}
.ev-storage-note>svg {width: 40px; height: 40px; padding: 10px; box-sizing: border-box; background: #fff; border-radius: 10px; color: var(--ev-navy); box-shadow: 0 2px 6px #10283c0f;}
@media (min-width: 701px) {
  .ev-resume-preview:has(img) {background: #fff; padding: 4px; transform: perspective(1200px) rotateY(8deg) rotateX(2deg);}
  .ev-resume-preview:has(img) img {border-radius: 8px;}
  .ev-resume:hover .ev-resume-preview:has(img) {transform: perspective(1200px) rotateY(4deg) rotateX(1deg);}
  .ev-project-grid {grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px;}
  .ev-project-row .ev-project-preview {height: 196px;}
  .ev-project-row:hover {transform: translateY(-4px); box-shadow: 0 2px 4px #10283c0f, 0 22px 44px #10283c26;}
  .ev-project-row:hover .ev-project-preview img {transform: scale(1.04);}
}
@media (min-width: 1101px) {
  .ev-resume {grid-template-columns: 272px minmax(0,1fr) auto; gap: 30px; padding: 22px 28px 22px 22px;}
  .ev-resume-preview {height: 156px; border-radius: 12px;}
}
@media (prefers-reduced-motion: reduce) {
  .ev-resume-label::before {animation: none;}
  .ev-resume-preview, .ev-project-row .ev-project-preview img, #root .wb-tool-cell .tool, #root .wb-inspector .wb-section>summary::after {transition: none;}
}

/* Project pages, 19 October 2026: the faint grid behind every planner page (the Your projects rule above now covers them all), page headers with the home band's grid lines and a sky glow, deeper cards, stat tiles with a larger navy figure, document cards that lift, navy and pale blue count icons on the overview in place of the pale green, a soft light at the top of the sidebar and a shadow under the top bar. Styles only. */
#evScreen .ev-page-head, .ev-overview-heading {position: relative; background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px), var(--ev-navy-glow); background-size: 28px 28px, 28px 28px, auto;}
#evScreen .ev-page-head::before, .ev-overview-heading::before {content: ''; position: absolute; left: -40px; top: -90px; width: 380px; height: 280px; background: radial-gradient(closest-side, #6aa6ff2e, transparent); pointer-events: none;}
#evScreen .ev-page-head {box-shadow: 0 16px 40px #10283c33;}
.ev-overview-heading {overflow: hidden;}
.ev-flow ol {box-shadow: 0 16px 40px #10283c33;}
#evScreen .ev-card, #evScreen .ev-out, #evScreen .ev-stat {box-shadow: 0 1px 2px #10283c0a, 0 10px 26px #10283c0d;}
#evScreen .ev-card-head {border-bottom-color: #e6edf3;}
.ev-stat b {font-size: var(--text-3xl); font-weight: 750; letter-spacing: -.8px;}
#evScreen .ev-out {transition: transform .18s ease, box-shadow .18s ease;}
#evScreen .ev-out:hover {transform: translateY(-3px); box-shadow: 0 2px 4px #10283c0f, 0 20px 40px #10283c21;}
.ev-out-icon {box-shadow: 0 6px 14px #10283c33;}
.ev-metric-icon {background: #e9f0fe; color: var(--ev-navy);}
.ev-next-icon {background: #e9f0fe;}
.ev-sidebar {background: var(--ev-navy) linear-gradient(180deg, #1b3d56 0, var(--ev-navy) 280px) no-repeat;}
.ev-top {box-shadow: 0 6px 18px #10283c0a;}
.ev-help-head {background: var(--ev-navy) var(--ev-navy-glow);}
@media (prefers-reduced-motion: reduce) {
  #evScreen .ev-out {transition: none;}
}

/* Fixes from the debugging thread, 19 October 2026 */
/* Safari gives a date or time input a wide minimum width of its own, so an empty one spilled out of its field and over
   the text beside it (Programme's start on site). The field's width now holds it, and on iPad and iPhone the input drops
   the native box so it sizes like the other fields; tapping it still opens the date picker. */
input[type=date], input[type=time], input[type=datetime-local], input[type=month] {min-width: 0; max-width: 100%;}
@supports (-webkit-touch-callout: none) {
  input[type=date], input[type=time], input[type=datetime-local], input[type=month] {-webkit-appearance: none; appearance: none; text-align: left;}
}
/* On a tablet the plan strip's buttons left the plan picker a few letters wide ("Sta"); Add files and Plan settings go
   icon-only there, as they do on a laptop with the inspector open, so the plan's name shows. */
@media (min-width: 701px) and (max-width: 1100px) {
  #evPlanStrip>.ev-btn[data-ev-action=add-files], #evPlanStrip>#evInspectorToggle {font-size: 0; gap: 0; padding: 6px; width: 44px; justify-content: center;}
  #evPlanStrip>#evInspectorToggle span {display: none;}
  #evPlanStrip #evActivePlan {min-width: 150px;}
}

/* Pencil button on the zoom bar (shown once a Pencil touches the plan): blue while only the Pencil draws. */
#root .zoombar button#zpen[aria-pressed="true"] {color: var(--accentText); background: var(--ev-info-bg);}

/* Job status (20 October 2026): the picker on the project overview and the pill on Your projects and the estate overview.
   No green: green is kept for passed marks. Won is solid navy, Quoted is blue, On hold is amber, Lost is quiet. */
.ev-job-status {display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-2xs); font-weight: 650; color: var(--ev-on-navy-dim);}
.ev-job-status .ev-select {min-height: var(--btn-h); padding-block: 0;}
.ev-overview-heading .ev-actions {align-items: center; flex-wrap: wrap; justify-content: flex-end;}
.ev-job-pill[data-job="quoted"] {background: var(--ev-info-bg); color: var(--ev-info);}
.ev-job-pill[data-job="won"] {background: var(--ev-navy); color: #fff;}
.ev-job-pill[data-job="hold"] {background: var(--ev-warn-bg); color: var(--ev-warn);}
.ev-job-pill[data-job="lost"] {background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--dim);}
.ev-estate-next {white-space: nowrap;}

/* Design summary at the top of Issue: three counts, then warnings, missing items and the folded list of passes. */
.ev-ds-card {margin-bottom: 24px;}
.ev-ds-stats {grid-template-columns: repeat(3, minmax(0,1fr)); margin: 0 0 6px;}
.ev-ds-stats .ev-stat {box-shadow: none;}
.ev-ds-head {font-size: var(--text-xs); font-weight: 700; color: var(--dim); margin: 16px 0 0; letter-spacing: 0;}
.ev-ds-list {margin-top: 4px;}
.ev-ds-list li + li {border-top: 1px solid #eef2f6;}
.ev-ds-list li.ev-ds-fail svg:first-child {color: var(--ev-bad);}
.ev-ds-list li.ev-ds-warn svg:first-child {color: var(--ev-warn);}
.ev-ds-list li.ev-ds-fail .ev-check-row b, .ev-ds-list li.ev-ds-warn .ev-check-row b {color: var(--ink);}
.ev-ds-passed {margin: 12px 0 4px;}
.ev-ds-passed summary {cursor: pointer; padding: 12px 0; font-size: var(--text-ui); font-weight: 600; color: var(--dim);}
.ev-ds-passed summary:hover {color: var(--accent);}
.ev-ds-card .ev-card-head {flex-wrap: wrap; gap: 8px 16px;}
.ev-ds-switch, .ev-ds-inpack {display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: var(--text-xs); font-weight: 600; color: var(--dim); white-space: nowrap;}
.ev-ds-switch input, .ev-ds-inpack input {width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer;}
.ev-ds-switch {margin-left: auto; color: var(--ink);}
.ev-ds-list li {align-items: center;}
.ev-ds-list .ev-check-row {flex: 1; min-width: 0;}
.ev-ds-inpack {flex: none; padding-left: 8px;}
.ev-ds-view {flex: none; margin-left: 8px; white-space: nowrap;}
.ev-ds-list li.ev-ds-out .ev-check-row b, .ev-ds-list li.ev-ds-out .ev-check-row small {color: #8ba0b0;}
.ev-ds-packnote {margin: 10px 0 0; font-size: var(--text-xs); line-height: 1.5; color: var(--dim);}
@media (max-width: 700px) {
  .ev-ds-stats {gap: 8px;}
  .ev-ds-inpack span:not(.ed-sr-only) {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);}
  .ev-ds-inpack {padding: 0 4px 0 8px;}
  .ev-ds-view {margin-left: 4px;}
  .ev-ds-view-more {display: none;}
  .ev-ds-stats .ev-stat {padding: 10px 10px 10px 14px;}
  .ev-ds-stats .ev-stat b {font-size: var(--text-xl);}
}

/* Issue by recipient: a status line and a "to check" count on each document card, the re-issue warning at the top, More
   documents on a home job, and on a phone one compact row for each card that opens it with a tap anywhere on the row. */
.ev-out .ev-out-status {flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: var(--text-xs); line-height: 1.4; color: var(--dim);}
.ev-out-chip {display: inline-flex; align-items: center; min-height: 22px; padding: 2px 9px; border: 1px solid #f0c36a; border-radius: 999px; background: var(--ev-warn-bg); color: var(--ev-warn); font-weight: 650; white-space: nowrap;}
.ev-out .ev-out-go svg {display: none;}
.ev-outs-more {margin: 0 0 30px;}
.ev-outs-more>summary {display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 48px; padding: 12px 16px; border: 1px solid #dfe7ee; border-radius: var(--ev-radius); background: #fff; cursor: pointer; list-style: none; font-size: var(--text-ui); font-weight: 650; color: var(--ink);}
.ev-outs-more>summary::-webkit-details-marker {display: none;}
.ev-outs-more>summary::before {content: ''; flex: none; width: 7px; height: 7px; margin: 0 2px; border-right: 2px solid #5d788c; border-bottom: 2px solid #5d788c; transform: rotate(-45deg); transition: transform .15s ease;}
.ev-outs-more[open]>summary::before {transform: rotate(45deg);}
.ev-outs-more>summary:hover {border-color: #90abc9;}
.ev-outs-more>summary small {font-size: var(--text-xs); font-weight: 400; color: var(--dim);}
.ev-outs-more>.ev-outs {margin: 14px 0 0;}
.ev-reissue {display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px 16px; margin: 0 0 24px; padding: 16px 18px; border: 1px solid #f0d49b; border-left: 4px solid #e0a63a; border-radius: var(--ev-radius); background: var(--ev-warn-bg);}
.ev-reissue-icon {display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #ffe2a8; color: var(--ev-warn);}
.ev-reissue-icon svg {width: 20px; height: 20px;}
.ev-reissue h2 {margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--ink);}
.ev-reissue p {margin: 4px 0 0; font-size: var(--text-ui); line-height: 1.5; color: #5c4a24;}
.ev-reissue .ev-actions {display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;}
.ev-document-rev-warn {margin: 8px 0 0; padding: 8px 10px; border: 1px solid #f0d49b; border-radius: 8px; background: var(--ev-warn-bg); color: var(--ev-warn); font-size: var(--text-xs); font-weight: 600; line-height: 1.45;}
@media (max-width: 700px) {
  .ev-reissue {grid-template-columns: auto minmax(0,1fr); padding: 14px;}
  .ev-reissue .ev-actions {grid-column: 1/-1;}
  .ev-reissue .ev-actions .ev-btn {flex: 1 1 auto;}
  #evScreen .ev-outs {gap: 0; margin-bottom: 24px; border: 1px solid #dfe7ee; border-radius: var(--ev-radius); background: #fff; box-shadow: var(--ev-shadow); overflow: hidden;}
  #evScreen .ev-out {position: relative; display: grid; grid-template-columns: 36px minmax(0,1fr) 16px; align-items: center; gap: 3px 12px; padding: 12px 14px; border: 0; border-radius: 0; box-shadow: none; transform: none;}
  #evScreen .ev-out + .ev-out {border-top: 1px solid #edf1f5;}
  #evScreen .ev-out:hover {transform: none; box-shadow: none;}
  #evScreen .ev-out:active {background: #f4f7fb;}
  .ev-out .ev-out-icon {grid-column: 1; grid-row: 1 / span 3; align-self: start; width: 36px; height: 36px; box-shadow: none;}
  .ev-out .ev-out-icon svg {width: 18px; height: 18px;}
  .ev-out h3 {grid-column: 2; margin: 0; font-size: var(--text-sm); line-height: 1.35;}
  .ev-out>p {grid-column: 2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.45;}
  .ev-out .ev-out-go {grid-column: 3; grid-row: 1 / span 3; position: static; width: 16px; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: #6f8799;}
  .ev-out .ev-out-go.primary {color: var(--accent);}
  .ev-out .ev-out-go:hover {background: transparent;}
  .ev-out .ev-out-go::after {content: ''; position: absolute; inset: 0;}
  .ev-out .ev-out-go:focus-visible {outline: none;}
  .ev-out .ev-out-go:focus-visible::after {outline: 3px solid var(--focus); outline-offset: -3px;}
  .ev-out .ev-out-go svg {display: block; width: 16px; height: 16px;}
  .ev-out-label {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
  .ev-out .ev-help-q {z-index: 1;}
  .ev-outs-more {margin-bottom: 24px;}
}
@media (prefers-reduced-motion: reduce) {
  .ev-outs-more>summary::before {transition: none;}
}

/* Site check register under the estate export (October 2026). */
.ev-estate-export .ev-estate-register-title{font-size:var(--text-sm);font-weight:700;margin:18px 0 4px;padding-top:14px;border-top:1px solid var(--line)}

/* Page colour, 28 October 2026 (Ben's B): the page is the blue-grey --page from tokens.css, so cards keep a white face
   with a slightly firmer edge and a soft shadow to sit on it. */
#evScreen .ev-card {border-color: var(--card-line); box-shadow: 0 1px 3px #1730441a;}
/* ---- Home job Overview and the demand helper, 30 October 2026. A domestic project's Overview: three steps, the photo with its
   four facts, the Circuit and Supply cards, Send and Next actions; the sidebar keeps Overview, Files, Markup and Issue with the
   rest behind More; the Estimate the existing demand dialog. Design pass only: tokens and the existing breakpoints. ---- */
.ev-sidebar .ev-nav-more {display: none;}
.ev-nav-fold .ev-sidebar .ev-nav-more {display: flex;}
/* Every project, 7 November 2026: the pages for running the job wait behind More until they hold something; a home job folds the Design lab too. */
.ev-nav-fold nav :is([data-ev-route=programme], [data-ev-route=snags], [data-ev-route=readiness], [data-ev-route=assets], [data-ev-route=audit]):not([aria-current], .ev-nav-used) {display: none;}
.ev-home-job nav [data-ev-route=planning]:not([aria-current], .ev-nav-used) {display: none;}
.ev-nav-fold.ev-home-more nav [data-ev-route] {display: flex;}
.ev-flow.ev-flow-3 ol {grid-template-columns: repeat(3, minmax(0,1fr));}
/* The same three steps in a home job's page heads (homeStrip), in place of the five design stages. */
.ev-stage-strip-3 ol {grid-template-columns: repeat(3, minmax(0,1fr));}
.ev-home-card .ev-kv {grid-template-columns: 124px minmax(0,1fr); gap: 12px 14px;}
.ev-home-card .ev-kv dd {line-height: 1.5;}
.ev-home-card .ev-kv sub {font-size: var(--text-2xs); line-height: 0;}
.ev-home-card .ev-card-body > p {margin: 0 0 10px; line-height: 1.55;}
.ev-home-card .ev-card-body > .ev-actions {margin-top: 14px; justify-content: flex-start;}
.ev-home-card .ev-next-footer {border-top: 1px solid #eaf0f4;}
.ev-home-meter {height: 8px; margin: 14px 0 12px;}
.ev-meter.red i {background: var(--ev-bad);}
.ev-meter.amber i {background: var(--ev-warn);}
.ev-meter.green i {background: var(--ev-ok);}
.ev-home-note {margin: 0 0 10px; color: #60788a; font-size: var(--text-xs); line-height: 1.6;}
.ev-home-fail {margin: 12px 0 10px; padding: 10px 14px; border-radius: 10px; background: var(--ev-bad-bg); color: var(--ev-bad); font-size: var(--text-xs); line-height: 1.55;}
.ev-home-fit {margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: var(--ev-info-bg); line-height: 1.55;}
.ev-home-send .ev-next-footer .ev-link-btn {padding: 0; font-size: inherit;}
.ev-home-bottom {grid-template-columns: repeat(2, minmax(0,1fr));}
.ev-demand .ev-dialog-body {padding-top: 20px;}
.dh-q {border: 0; padding: 0; margin: 0 0 14px; min-width: 0;}
.dh-q legend {font-weight: 700; font-size: var(--text-sm); padding: 0; margin-bottom: 7px; color: var(--ev-navy);}
.dh-seg {display: flex; flex-wrap: wrap; gap: 6px;}
.dh-seg button {display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ev-navy); font: inherit; font-size: var(--text-xs); font-weight: 600; text-align: left; cursor: pointer;}
.dh-seg button small {font-size: var(--text-2xs); font-weight: 500; color: var(--dim);}
.dh-seg button:hover {border-color: var(--ev-navy);}
.dh-seg button.on {background: var(--ev-navy); border-color: var(--ev-navy); color: #fff;}
.dh-seg button.on small {color: var(--ev-on-navy-dim);}
.ev-demand .ev-stats {margin: 6px 0 14px;}
.ev-demand .ev-stat {padding: 13px 15px 13px 18px;}
.ev-demand .ev-stat b {font-size: var(--text-xl);}
.ev-demand .ev-stat small {display: block; font-size: var(--text-2xs); color: var(--dim); margin-top: 3px; line-height: 1.4;}
.dh-sum {display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px 18px; margin: 0 0 8px;}
.dh-sum span {display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: var(--text-xs); color: var(--dim);}
.dh-sum b {color: var(--ev-navy); font-variant-numeric: tabular-nums; white-space: nowrap;}
.dh-sum .dh-total {grid-column: 1 / -1; border-bottom: 0; font-weight: 600; color: var(--ev-navy);}
.ev-demand .ev-home-meter {margin: 12px 0 10px;}
.ev-demand .ev-dialog-foot .ev-actions {margin: 0; justify-content: flex-end;}
@media (max-width: 700px) {
  .ev-flow.ev-flow-3 ol {grid-template-columns: minmax(0,1fr);}
  .ev-home-card .ev-kv {grid-template-columns: 96px minmax(0,1fr);}
  .ev-home-bottom {grid-template-columns: minmax(0,1fr);}
  .dh-sum {grid-template-columns: minmax(0,1fr);}
  .ev-demand .ev-stats {grid-template-columns: repeat(2, minmax(0,1fr));}
  .ev-demand .ev-dialog-foot {flex-wrap: wrap;}
  .ev-demand .ev-dialog-foot .ev-actions {width: 100%;}
  .ev-demand .ev-dialog-foot .ev-actions .ev-btn {flex: 1; justify-content: center;}
}
/* ---- Simpler main path, 7 November 2026 (owner's "Do all"): Issue leads with three documents and keeps the rest under More
   documents in their recipient groups. Design pass only: existing tokens and breakpoints. ---- */
.ev-outs-more>.ev-group-sub {margin: 22px 0 0; font-size: var(--text-sm);}
.ev-outs-more>.ev-group-sub+.ev-outs {margin: 10px 0 0;}
/* The stage strip keeps Markup, Design lab and Issue, with Programme and Readiness once the project uses them: three or four steps. */
.ev-flow.ev-flow-4 ol {grid-template-columns: repeat(4, minmax(0,1fr));}
.ev-stage-strip-4 ol {grid-template-columns: repeat(4, minmax(0,1fr));}
@media (max-width: 700px) {
  .ev-flow.ev-flow-4 ol {grid-template-columns: minmax(0,1fr);}
}