/* HTML overview: scoped to preserve the surrounding SecuSolar site shell. */
.ce-overview, .ce-overview-modal {
  --overview-input-accent: oklch(78% .10 220);
  --overview-core-accent: oklch(78% .10 150);
  --overview-output-accent: oklch(78% .10 300);
  --stage: var(--overview-input-accent);
  --frame-width: 1px;
  --frame-top-width: 2px;
  --frame-opacity: 32%;
  --frame-top-opacity: 75%;
  --frame-glow-opacity: 4%;
  --frame-radius: 18px;
  --card-radius: 12px;
  --card-opacity: 18%;
  --card-hover-opacity: 65%;
  --frame-background: linear-gradient(155deg,rgba(13,26,40,.96),rgba(7,17,29,.96));
  --card-background: rgba(12,27,42,.90);
  --frame-border: color-mix(in oklab,var(--stage) var(--frame-opacity),transparent);
  --frame-glow: 0 12px 45px color-mix(in oklab,var(--stage) var(--frame-glow-opacity),transparent);
}
.ce-overview { padding: 48px 0 72px; background: #030a13; }
.ce-overview-wrap { width: min(1320px, calc(100% - 40px)); margin-inline: auto; }
.ce-overview-intro { max-width: 850px; margin: 0 auto 36px; text-align: center; }
.ce-overview-intro h2 { font-size: clamp(1.9rem, 3.3vw, 3rem); line-height: 1.15; letter-spacing: -.035em; margin: 12px 0 18px; }
.ce-overview-intro p { color: #abbccc; font-size: 1rem; line-height: 1.7; }
.ce-system { display: grid; grid-template-columns: minmax(0,1fr) 30px minmax(0,1.35fr) 30px minmax(0,1fr); align-items: start; }
.ce-stage { min-width: 0; padding: 20px; border: var(--frame-width) solid color-mix(in oklab,var(--stage) var(--frame-opacity),transparent); border-top: var(--frame-top-width) solid color-mix(in oklab,var(--stage) var(--frame-top-opacity),transparent); border-radius: var(--frame-radius); background: var(--frame-background); box-shadow: 0 12px 45px color-mix(in oklab,var(--stage) var(--frame-glow-opacity),transparent); }
.ce-stage-control { --stage: var(--overview-core-accent); }
.ce-stage-outputs { --stage: var(--overview-output-accent); }
.ce-stage-heading { margin-bottom: 20px; }
.ce-stage-heading > span { color: var(--stage); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; }
.ce-stage-heading h3 { font-size: clamp(1.25rem,1.7vw,1.55rem); line-height: 1.35; margin: 6px 0; }
.ce-stage-heading p { font-size: .85rem; color: #a9bac9; line-height: 1.6; margin: 0; }
.ce-items { display: grid; gap: 10px; }
.ce-item { appearance: none; display: grid; grid-template-columns: 56px minmax(0,1fr) 12px; gap: 12px; align-items: center; width: 100%; min-width: 0; min-height: 104px; padding: 12px; text-align: start; color: #edf5fa; background: var(--card-background); border: var(--frame-width) solid color-mix(in oklab,var(--stage) var(--card-opacity),transparent); border-radius: var(--card-radius); font: inherit; cursor: pointer; transition: border-color .16s, background .16s; }
.ce-item:disabled { cursor: default; }
/* Use our selected/focus states, not a touch flash painted above the dialog. */
.ce-item { -webkit-tap-highlight-color: transparent; }
/* Decorative, original SVG geometry; accessible labels remain live HTML. */
.ce-pictogram { display: block; width: 56px; height: 56px; color: var(--stage); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ce-pictogram .ce-icon-fill { fill: currentColor; fill-opacity: .10; stroke: none; }
.ce-item strong { display: block; font-size: .94rem; line-height: 1.4; font-weight: 600; }
.ce-item small { display: block; font-size: .77rem; color: #a7b9ca; line-height: 1.6; margin-top: 4px; }
.ce-item > .ce-detail-icon { color: var(--stage); font-size: 1.1rem; }
.ce-stage-outputs .ce-item { grid-template-columns: minmax(0,1fr) 56px 12px; }
.ce-stage-outputs .ce-pictogram { grid-column: 2; grid-row: 1; }
.ce-stage-outputs .ce-item > span:not(.ce-detail-icon) { grid-column: 1; grid-row: 1; }
.ce-stage-outputs .ce-detail-icon { grid-column: 3; grid-row: 1; }
.ce-item:focus-visible, .ce-controller:focus-visible { outline: 2px solid var(--stage); outline-offset: 4px; }
.ce-item[aria-expanded="true"] { border-color: #e7bc53; background: #302b1c; }
@media (hover: hover) { .ce-item:not(:disabled):hover { border-color: color-mix(in oklab,var(--stage) var(--card-hover-opacity),transparent); background: #132537; } }
.ce-control-photo { margin: 0 0 18px; }
.ce-controller { appearance: none; display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ce-controller:disabled { cursor: default; }
@media (hover: hover) { .ce-controller:not(:disabled):hover { box-shadow: 0 0 0 1px color-mix(in oklab,var(--stage) var(--card-hover-opacity),transparent); } }
.ce-controller[aria-expanded="true"] { box-shadow: 0 0 0 1px #e7bc53; }
.ce-control-photo img { display: block; width: 100%; height: 215px; max-height: 215px; object-fit: contain; border-radius: 10px; background: #030910; }
.ce-control-photo figcaption { color: #a7b9ca; font-size: .7rem; margin-top: 8px; line-height: 1.5; }
.ce-modules { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ce-modules .ce-item { grid-template-columns: 48px minmax(0,1fr) 12px; gap: 8px; min-height: 104px; }
.ce-modules .ce-pictogram { width: 48px; height: 48px; }
.ce-modules .ce-item strong { font-size: .91rem; }
.ce-local .ce-item { grid-template-columns: 56px minmax(0,1fr) 12px; }
.ce-local-note { margin: 12px 0 0; color: #a7b9ca; font-size: .75rem; line-height: 1.7; }
.ce-flow { display: flex; align-items: center; justify-content: center; height: 180px; color: #76b0c1; }
.ce-flow::before { content: ''; width: 18px; border-top: 1px solid currentColor; }
.ce-flow::after { content: ''; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); margin-left: -7px; }
.ce-flow-local { height: 34px; flex-direction: column; }
.ce-flow-local::before { width: 0; height: 21px; border-top: 0; border-left: 1px solid currentColor; }
.ce-flow-local::after { transform: rotate(135deg); margin: -7px 0 0; }
.ce-overview-footnote { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 24px; color: #9fb0c2; font-size: .8rem; line-height: 1.75; }
.ce-overview-footnote p { margin: 0; }
.ce-overview [data-ce-status]:empty { display: none; }
.ce-overview [data-ce-status] { color: #f0cf80; }
.ce-detail-image { margin: 20px 0; }
/* Keep the previous media footprint, never its pixels, during async selection. */
.ce-detail-image[data-media-state="loading"] img { visibility: hidden; }
.ce-detail-image img { display: block; width: 100%; max-height: 340px; height: auto; object-fit: contain; border-radius: 10px; background: #030910; }
.ce-detail-image figcaption { color: #a7b9ca; font-size: .75rem; line-height: 1.6; margin-top: 9px; }
.ce-detail-image a { display: inline-block; margin-top: 8px; color: #8dd5f3; font-size: .8rem; }
.ce-detail-image a:focus-visible { outline: 2px solid #e7bc53; outline-offset: 3px; }
.ce-overview-modal [data-ce-image-error]:empty { display: none; }
.ce-overview-modal [hidden] { display: none; }
.ce-overview-modal { border: var(--frame-width) solid var(--frame-border); border-radius: var(--frame-radius); background: var(--frame-background); box-shadow: var(--frame-glow); }
/* Keep the lower evidence slot's existing wide footprint; contain the portrait. */
.ce-evidence img[src$="/overview/control-cabinet-clean.jpg"] { aspect-ratio: 1600 / 1066; object-fit: contain; background: #030910; }
@media (max-width: 1100px) {
  .ce-system { grid-template-columns: minmax(0,1fr); max-width: 720px; margin-inline: auto; }
  .ce-flow { height: 44px; flex-direction: column; }
  .ce-flow::before { width: 0; height: 28px; border-top: 0; border-left: 1px solid currentColor; }
  .ce-flow::after { transform: rotate(135deg); margin: -7px 0 0; }
  .ce-flow-local { height: 34px; }
  .ce-flow-local::before { height: 21px; }
  .ce-control-photo img { height: 270px; max-height: 270px; }
}
@media (max-width: 600px) {
  .ce-overview { padding: 36px 0 48px; }
  .ce-overview-wrap { width: calc(100% - 24px); }
  .ce-overview-intro { text-align: start; margin-bottom: 26px; }
  .ce-stage { padding: 16px; }
  .ce-item { grid-template-columns: 56px minmax(0,1fr) 10px; gap: 10px; padding: 10px; }
  .ce-stage-outputs .ce-item { grid-template-columns: minmax(0,1fr) 56px 10px; }
  .ce-modules { grid-template-columns: minmax(0,1fr); }
  .ce-modules .ce-item { min-height: 80px; }
  .ce-overview-footnote { grid-template-columns: minmax(0,1fr); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .ce-item { transition: none; } }