/* ECOS native workspace / Editorial design system v0.2
   Source of truth: ecos-web/styles.css + operating-picture/page.css.
   ECOS is a separate visual identity, not the previous WeWeb blue-card UI.
   Palette, typography and structural discipline share the public website. */
:root{
 --ink:#071521;--ink2:#112536;--ink3:#162a3b;
 --paper:#f7f8f6;--paper2:#edeee9;--white:#fff;
 --type:#17232b;--muted:#5e6b73;--light:#f1f5f7;
 --mutedlight:#a9bac4;--line:#d9ddda;
 --blue:#5ea8ff;--green:#52c89f;--amber:#f2be64;--temp:#8aafff;
 --shell:1392px;--font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--type);font:400 15px/1.55 var(--font);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
svg{display:block}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #398ef5;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.skip{position:absolute;z-index:1000;top:-90px;left:18px;padding:12px 20px;background:var(--ink);color:white}
.skip:focus{top:12px}
.shell{width:min(calc(100% - 96px),var(--shell));margin-inline:auto}
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{background:var(--paper);border-bottom:1px solid #dadeda;position:relative;z-index:20}
.header-inner{min-height:91px;display:flex;align-items:center;gap:21px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand-mark.ecos-circuit-meridian{width:38px;height:38px}
.brand-type{font-size:13px;font-weight:780;letter-spacing:.11em;white-space:nowrap;color:#17232b}
.brand-type b{color:#4575a4;font-weight:850}
.header-divider{width:1px;height:30px;background:#d0d8d8;margin-inline:9px 3px}
.topbar-title{min-width:120px;line-height:1.45;white-space:nowrap}
.header-kicker{display:block;font-size:9px;letter-spacing:.18em;font-weight:780;color:#708791}
.topbar-title strong{display:block;font-size:12px;letter-spacing:-.015em;font-weight:640;color:#254153}
.topbar-title i{font-style:normal;color:#9ab0b9}
.topbar-controls{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:11px;min-width:0}
.select-wrap select{border:1px solid #c1cccf;border-radius:2px;color:#334d5c;background:transparent;font-weight:620;font-size:11px;padding:10px 11px;max-width:205px;min-height:40px;cursor:pointer}
.search-wrap{border:1px solid #c1cccf;border-radius:2px;min-width:90px;max-width:190px;display:flex;align-items:center;gap:4px;padding:0 10px;height:40px}
.search-wrap>span{font-size:20px;color:#658394}
.search-wrap input{width:100%;border:0;background:transparent;outline:none;font-size:11px;min-width:0;color:#193244}
.search-wrap input::placeholder{color:#859aa3}
.mode-pill{font-size:9px;letter-spacing:.14em;font-weight:800;white-space:nowrap;color:#386778;border:1px solid #a9c7cf;padding:9px 11px;display:inline-flex;align-items:center;gap:8px;height:37px}
.mode-pill i{display:block;width:6px;height:6px;background:#5ba8a0;border-radius:50%}
.avatar{font-size:11px;letter-spacing:.08em;font-weight:700;border:1px solid #b7c7cc;color:#284b5b;height:37px;width:37px;display:grid;place-items:center;border-radius:50%}
.mobile-menu{display:none;align-items:center;gap:7px;border:1px solid #c1cccf;background:transparent;color:#234255;font-weight:700;padding:9px 12px;font-size:11px;border-radius:2px}
.section-nav{border-bottom:1px solid #c9d2d4;background:#f1f3f0;position:relative;z-index:10}
.nav-inner{display:flex;align-items:center;gap:24px;min-height:61px;overflow-x:auto;scrollbar-width:thin}
.nav-item{border:0;border-bottom:2px solid transparent;background:none;padding:18px 0 16px;white-space:nowrap;font-size:11px;color:#667680;font-weight:680;letter-spacing:-.006em}
.nav-item:hover{color:#143649;border-bottom-color:#91a6ad}
.nav-item.active{color:#102d42;border-bottom-color:#416f8b}
.nav-index{font-size:9px;font-weight:730;letter-spacing:.06em;color:#8da1a7;margin-right:8px}
.nav-item.active .nav-index{color:#4a7e9b}
.environment-notice{border-bottom:1px solid #d9e0de;background:#edf0ee;font-size:11px;color:#687d86}
.notice-inner{min-height:50px;display:flex;align-items:center;gap:25px}
.notice-identity{display:inline-flex;align-items:center;gap:10px;color:#365c6f;white-space:nowrap}
.notice-identity strong{font-weight:800;letter-spacing:.14em;font-size:9px}
.cross{font-size:17px;color:#4c8298}
.notice-inner>span:nth-child(2){flex:1}
.text-button{border:0;border-bottom:1px solid #9eb8bf;padding:4px 0;background:none;color:#355c70;font-size:11px;font-weight:750;white-space:nowrap}
.text-button span{margin-left:8px}
main.shell{padding-top:56px;padding-bottom:93px;flex:1;min-width:0}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:41px;padding-bottom:28px;border-bottom:1px solid #b8c7c9}
.eyebrow{font-size:10px;letter-spacing:.17em;font-weight:760;text-transform:uppercase;color:#567b8c}
.page-head h1{font-size:clamp(43px,5vw,76px);font-weight:590;letter-spacing:-.067em;line-height:1.08;margin:16px 0 21px;color:#142c3a;text-wrap:balance}
.page-head p{font-size:clamp(14px,1.2vw,17px);line-height:1.55;letter-spacing:-.02em;color:#536771;margin:0;max-width:750px}
.label{font-size:9px;letter-spacing:.14em;font-weight:750;border:1px solid #aebec3;color:#6c8793;padding:8px 10px;border-radius:2px;white-space:nowrap;text-transform:uppercase;display:inline-flex;align-items:center}
.grid{display:grid;gap:15px}
.kpis{grid-template-columns:repeat(5,minmax(0,1fr));margin:0 0 30px;gap:0}
.card{min-width:0;overflow:hidden;background:#fff;border:1px solid #d8dfde;border-radius:3px;box-shadow:none}
.card-pad{padding:25px}
.card-title{padding:17px 22px;border-bottom:1px solid #d9e1e1;display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-title h2,.card-title h3{font-size:13px;letter-spacing:-.018em;font-weight:750;color:#233a48;margin:0}
.card-title small{font-size:10px;color:#6d8490}
.kpi{display:flex;flex-direction:column;align-items:flex-start;gap:13px;padding:17px 21px 21px;border:0;border-top:1px solid #9eb4bc;border-radius:0;background:transparent;min-height:125px;position:relative}
.kpi:not(:first-child){border-left:1px solid #d7dfdf}
.kpi-icon{display:none}
.kpi strong{display:block;font-weight:580;font-size:clamp(29px,2.65vw,41px);letter-spacing:-.064em;color:#123047;line-height:1.05}
.kpi span:not(.kpi-icon){color:#677a83;display:block;margin-top:7px;font-size:10px;font-weight:680;letter-spacing:.075em;text-transform:uppercase;line-height:1.55}
.kpi.red{border-top-color:#bd9b83}.kpi.orange{border-top-color:#c9b288}.kpi.green{border-top-color:#7baea1}
.impact{background:#0b1f2e;color:#eff6f8;margin-bottom:31px;padding:32px 35px;display:flex;align-items:center;gap:18px;border:1px solid #284353;border-radius:2px}
.impact .icon{font-size:26px;color:#7bb8c6;border:1px solid #446c7a;padding:9px 15px;font-weight:300}
.impact strong{font-size:clamp(19px,2vw,26px);letter-spacing:-.045em;font-weight:560;display:block;line-height:1.24}
.impact p{margin:10px 0 0;max-width:710px;color:#a4b9c4;font-size:12px;line-height:1.7}
.impact .spacer{flex:1}
.btn,.btn-soft{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:41px;border-radius:2px;border:1px solid #102d42;background:#102d42;color:#fff;font-size:11px;font-weight:740;padding:10px 14px;white-space:normal}
.btn:hover{background:#264f68}
.btn-soft{background:transparent;color:#244e65;border-color:#aabdc2}
.btn-soft:hover{background:#e6edee}
.impact .btn{background:#e7f0f3;border-color:#e7f0f3;color:#123349;white-space:nowrap}
.impact .btn:hover{background:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.columns{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.82fr);gap:24px;align-items:start}
.stack{display:grid;gap:24px;min-width:0}
.diagram{padding:20px 22px 22px}
.diagram-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.diagram-legend{display:flex;align-items:center;gap:15px;flex-wrap:wrap;font-size:10px;color:#7e959e}
.dot{display:inline-block;width:6px;height:6px;margin-right:5px;vertical-align:middle;background:#98a6ab}
.dot.green{background:#52c89f}.dot.red{background:#dfb17d}.dot.amber{background:#f2be64}
.tiny{font-size:11px;color:#657d88;line-height:1.65}
.topology{position:relative;overflow:hidden;color:#edf5f8;background:#0c1e2c;border:1px solid #2a4557;border-radius:2px;padding:30px 24px 19px;min-height:290px}
.topology::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.20;background-image:linear-gradient(#53778d3b 1px,transparent 1px),linear-gradient(90deg,#53778d3b 1px,transparent 1px);background-size:39px 39px}
.topology>*{position:relative}
.source-row,.asset-row{display:flex;gap:10px;justify-content:space-between;flex-wrap:nowrap;min-width:0}
.source{background:#112e36;color:#9ed7bb;border:1px solid #477f6e;flex:1;min-width:0;text-align:center;border-radius:2px;font-size:10px;font-weight:700;letter-spacing:.015em;padding:10px 7px}
.route-line{height:25px;display:flex;justify-content:center;position:relative}
.route-line::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:#648c99}
.route-line::before{content:"";position:absolute;top:50%;left:12%;right:12%;height:1px;background:#4b7481}
.node{border:1px solid #4c7381;border-radius:2px;background:#132c3c;flex:1;min-width:0;text-align:center;color:#edf5f8;padding:12px 7px;font-size:11px;font-weight:660;line-height:1.35}
.node .sub{display:block;font-size:9px;font-weight:520;line-height:1.4;color:#a7beca;margin-top:6px;overflow-wrap:anywhere}
.node[data-select],.node[data-asset]{cursor:pointer}
.node:hover{background:#1c394c;border-color:#a2d7f3}
.node.selected{border-color:#e4f4fa;outline:1px solid #e4f4fa;outline-offset:1px}
.node.isolated{border-color:#bca16a;color:#f4e3b7;background:#262e32}
.node.pending{border-color:#c89b54;border-style:dashed;background:#2d2d2a;color:#f7d39b}
.node.reviewed{border-color:#578a77;color:#bcddca}
.diagram-note{color:#8ba3af;font-size:10px;line-height:1.65;margin:17px 0 0}
.zone-map{padding:19px 23px}
.zone-map-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.zone-tile{background:#f4f6f4;border:1px solid #d1dad9;border-radius:2px;text-align:left;min-height:83px;padding:15px;cursor:pointer}
.zone-tile:hover{border-color:#6893a7;background:#edf2f2}
.zone-tile strong{display:block;font-size:12px;color:#274252}
.zone-tile small{display:block;font-size:10px;line-height:1.5;color:#738b95;margin-top:7px}
.zone-tile:first-child{border-top:2px solid #aa926b}.zone-tile:nth-child(2){border-top:2px solid #658ca2}
.zone-tile.wide{grid-column:1/-1}
.detail{padding:24px 24px 25px}
.detail-head{display:flex;align-items:center;justify-content:space-between;gap:11px;margin-bottom:14px}
.detail h2{font-size:clamp(31px,2.5vw,41px);letter-spacing:-.065em;font-weight:570;line-height:1.1;color:#172f3d;margin:0 0 9px}
.detail p{color:#71858b;font-size:12px;line-height:1.7;margin:0}
.status{display:inline-flex;align-items:center;gap:6px;border:1px solid #d0dcde;border-radius:2px;padding:4px 7px;font-size:9px;font-weight:780;letter-spacing:.055em;text-transform:uppercase;line-height:1.35;white-space:normal;color:#537080;background:#f5f7f6}
.status::before{content:"";width:5px;height:5px;flex:none;background:#9dafb6}
.status.isolation-recorded{color:#895e35;border-color:#d9c3a3;background:#f9f5ee}.status.isolation-recorded::before{background:#bf9565}
.status.review-pending,.status.pending{color:#95692d;border-color:#e5d2ad;background:#fcf7ee}.status.review-pending::before{background:#e1ac4e}
.status.record-reviewed,.status.reviewed{color:#477968;border-color:#b3d0c6;background:#f1f8f5}.status.record-reviewed::before{background:#52a682}
.status.temporary-feed-record{color:#6079a5;border-color:#c5d4e3;background:#f3f6fa}
.status.recorded-de-energized{color:#647989}
.statline{margin:22px 0 17px;padding:12px 14px;background:#f4f1ea;border:0;border-left:2px solid #bda06b;color:#785a2e;font-size:10px;font-weight:800;letter-spacing:.045em}
.statline.neutral{background:#f0f3f2;border-left-color:#9daeb2;color:#607882}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;border-top:1px solid #d8e1e0;border-bottom:1px solid #d8e1e0;padding:19px 0;margin:0}
.facts dt{color:#7d959c;font-size:9px;letter-spacing:.07em;text-transform:uppercase;font-weight:750}
.facts dd{margin:7px 0 0;color:#2e4855;font-size:12px;font-weight:700;overflow-wrap:anywhere;line-height:1.5}
.note{background:#f0f3f2;border-left:2px solid #9fafb0;padding:14px;color:#667d87;font-size:10px;line-height:1.75;margin-top:17px}
.detail .actions{display:flex;flex-wrap:wrap;gap:8px}
.table-wrap{overflow-x:auto}
.table{border-collapse:collapse;width:100%;text-align:left;font-size:12px}
.table th{background:#f3f5f2;color:#677d87;font-size:9px;font-weight:760;letter-spacing:.10em;text-transform:uppercase;white-space:nowrap}
.table td,.table th{padding:14px 19px;border-bottom:1px solid #e3e8e5;vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table td{color:#2d4551}
.table td:first-child{font-weight:720}
.table .link{border:0;background:transparent;padding:0;color:#356782;font-size:12px;font-weight:750;text-align:left}
.table .link:hover{text-decoration:underline}
.table td .muted{display:block;font-size:10px;font-weight:500;color:#718692;line-height:1.4;margin-top:3px}
.section-grid,.report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.zone-card{border-top:2px solid #8cadb7}
.zone-card h3{font-weight:600;letter-spacing:-.035em;font-size:19px;margin:20px 0 10px;line-height:1.25}
.zone-card p{font-size:12px;color:#6f838c;line-height:1.7;min-height:48px}
.zone-card .metadata{margin:17px 0;padding-top:13px;border-top:1px solid #d8e0df;font-size:11px;color:#627b85;line-height:1.75}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.callout{border-top:1px solid #b9c9cf;background:transparent;border-radius:0;padding:18px 3px 0;font-size:12px;line-height:1.75;color:#657b85}
.callout strong{color:#284657;display:block;font-weight:700;margin-bottom:8px}
.handover-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0;border-bottom:1px solid #dce3e1}
.handover-item:last-child{border:0}
.handover-item b{font-size:12px;font-weight:680}
.handover-item p{font-size:10px;color:#7a9198;margin:6px 0 0}
.report-card{padding:26px;border-top:2px solid #8cadb7}
.report-card h3{font-size:17px;font-weight:610;letter-spacing:-.035em;margin:0 0 13px}
.report-card p{font-size:12px;line-height:1.75;color:#6f838c;min-height:70px;margin:0 0 16px}
.right{text-align:right}
.result-count{font-size:11px;color:#698491}
.search-result{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 22px;border-bottom:1px solid #e1e7e5}
.search-result:last-child{border:0}
.search-result b{font-size:12px;font-weight:740}
.search-result span{font-size:11px;color:#718992;display:block;margin-top:4px}
.empty{padding:35px;text-align:center;color:#7b9096;font-size:12px}
.app-footer{background:#081826;color:#9bb5c1;min-height:142px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-block:38px;font-size:10px;line-height:1.7}
.footer-inner>div{color:#9db4bf;letter-spacing:.075em}
.footer-mark{font-size:15px;font-weight:780;color:#e4eef1;letter-spacing:.11em;margin-right:12px}
.footer-mark span{font-size:8px}
.footer-inner a{border-bottom:1px solid #557587;color:#d4e8ef;font-size:11px;white-space:nowrap;padding-bottom:4px}
@media(max-width:1450px){.header-divider,.topbar-title{display:none}.topbar-controls{gap:8px}.nav-inner{gap:19px}}
@media(max-width:1200px){.shell{width:calc(100% - 64px)}.columns{grid-template-columns:minmax(0,1.4fr) minmax(290px,.85fr)}.nav-inner{gap:17px}.nav-item{font-size:10px}.search-wrap{display:none}}
@media(max-width:1000px){.columns{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(5,minmax(0,1fr))}.section-grid,.report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail h2{font-size:36px}.phase{display:none}.nav-inner{gap:23px;min-height:56px}}
@media(max-width:720px){.shell{width:calc(100% - 40px)}.header-inner{min-height:72px}.brand-type{font-size:11px}.brand-mark.ecos-circuit-meridian{width:32px;height:32px}.topbar-controls{gap:8px}.topbar select{max-width:156px;font-size:10px}.avatar{display:none}.mode-pill{font-size:8px;padding:8px;height:34px}.mobile-menu{display:none}.section-nav{display:block}.nav-inner{overflow-x:auto;overscroll-behavior-inline:contain;gap:21px;min-height:54px}.nav-item{padding:15px 0 14px;font-size:11px}.notice-inner{flex-wrap:wrap;gap:6px 15px;padding-block:13px}.notice-inner>span:nth-child(2){order:3;width:100%;flex-basis:100%}.notice-inner .text-button{margin-left:auto}main.shell{padding-top:39px;padding-bottom:63px}.page-head{align-items:flex-start;flex-direction:column;gap:17px;margin-bottom:30px;padding-bottom:22px}.page-head h1{font-size:clamp(43px,9.2vw,61px);margin:12px 0 13px}.page-head p{font-size:14px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.kpi{min-height:112px;padding:14px 10px 17px;border-left:0!important}.impact{padding:24px 20px;flex-wrap:wrap}.impact .spacer{display:none}.impact .btn{margin-left:auto}.diagram{padding:14px}.topology{padding:18px 12px}.source-row,.asset-row{gap:5px}.node{font-size:10px;padding:12px 3px}.node .sub{font-size:8px}.zone-map-grid{grid-template-columns:1fr}.zone-tile.wide{grid-column:auto}.footer-inner{flex-direction:column;align-items:flex-start;gap:15px}.section-grid,.report-grid{grid-template-columns:1fr}.table th,.table td{padding:12px 10px}}
@media(max-width:440px){.shell{width:calc(100% - 30px)}.brand-type{font-size:10px;letter-spacing:.065em}.mode-pill{display:none}.topbar select{max-width:145px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.topology .source{font-size:9px}.node{font-size:9px}.node .sub{font-size:7px}.detail{padding:18px}.facts{gap:13px}.facts dd{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}