/* ED/UC Simulator: page-specific layer, the Load Flow Simulator's with the
   hour scrubber and the charts.
   Tokens and shared components come from ../dark.css, ../light.css, ../shared.css. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500;600&display=swap');

.container{max-width:1500px;}
.layout{grid-template-columns:340px 1fr;}
/* The column layout, the inner scroller and the pinned tab bar come from
   shared.css; the action row sits below the scroller, so it stays put too. */
.ctrl-scroll{flex:1 1 auto;}
.btn-row{flex-shrink:0;display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-top:1px solid var(--border);}
.btn-row .btn-primary{padding:10px 16px;font-size:.88rem;}
.btn-back{text-decoration:none;display:inline-flex;align-items:center;}
h1{font-size:1.85rem;margin:0 0 4px;}

/* ── Quick Start ── */
.quick-start-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.quick-start-label{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:.82rem;color:var(--muted);white-space:nowrap;flex-shrink:0;}
.quick-start-label .tico{width:1.05em;height:1.05em;}
.quick-start-btns{display:flex;gap:6px;flex-wrap:wrap;}
.quick-start-btn{background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--muted);padding:5px 11px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all var(--motion-fast);white-space:nowrap;font-family:inherit;}
.quick-start-btn:hover{border-color:var(--accent);color:var(--text);}
.quick-start-btn.active{border-color:var(--accent2);color:var(--text);background:rgba(143,205,189,.15);}

/* ── Control panel ── */
.ctrl-tab{padding:11px 6px;font-size:.82rem;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.ctrl-tab .tico{width:1.25em;height:1.25em;}
.field-group>:first-child{border-top:none;}
.toggle-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border);}
.toggle-label{font-weight:700;font-size:.88rem;flex:1;}
.note{color:var(--muted);font-size:.79rem;line-height:1.45;margin:0 0 10px;}
.field-row .field-label{font-weight:700;font-size:.88rem;}
.field-row.inline{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;}
.field-row.inline>.field-label{flex:1;min-width:0;}
.field-row.inline>.affix-wrap,.field-row.inline>.sel-input,.field-row.inline>.seg-group{flex:0 0 52%;}
/* A segmented control beside its label fills the same 52% as an input, on one
   row: its options share the width, so a short option is never a stub, and on
   a narrow screen it takes room from the label rather than wrap. */
.field-row.inline>.seg-group{flex:0 0 auto;min-width:52%;flex-wrap:nowrap;}
.field-row.inline>.seg-group>.seg-btn{flex:1 0 auto;padding:5px 8px;text-align:center;}
.field-row.is-derived .affix-input{color:var(--muted);border-style:dashed;}

/* ── The Run gate ──
   One solve takes milliseconds, but drawing a network passes through states
   that cannot be solved (a line still being connected, an island with no
   source). So the diagram never re-solves on its own: an electrical change
   steps the results back and lights the button. Moving, renaming and the
   display options never do. */
.stale-note{display:none;flex-basis:100%;margin:0 0 2px;font-size:.78rem;font-weight:700;color:var(--accent2);}
body.is-stale .stale-note{display:block;}
.btn-primary.needs-run{box-shadow:0 0 0 2px var(--card-bg),0 0 0 4px var(--accent2);}
.ed-result{transition:opacity var(--transition-fast);}
body.is-stale .ed-result{opacity:.45;}
body.is-stale #sldSvg .lyr-res{opacity:.3;}

/* ── Inspector ── */
.insp-head{display:flex;align-items:center;gap:8px;margin:0 0 4px;}
.insp-head .insp-kind{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--radius-sm);background:var(--input-bg);border:1px solid var(--border);color:var(--accent);flex-shrink:0;}
.insp-head .insp-kind svg{width:20px;height:20px;}
.insp-head .txt-input{flex:1;min-width:0;padding:7px 10px;font-weight:700;}
.insp-sub{color:var(--muted);font-size:.78rem;margin:0 0 10px;line-height:1.4;}
.insp-done{display:none;}
.issue-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.issue-list li{font-size:.8rem;line-height:1.4;padding:7px 10px;border-radius:var(--radius-sm);background:var(--warning-bg);color:var(--warning-text);cursor:pointer;}
.issue-list li.err{background:var(--error-bg);color:var(--error-text);}
.issue-list li.none{background:var(--success-bg);color:var(--success-text);cursor:default;}
.el-list{display:flex;flex-wrap:wrap;gap:5px;padding:4px 0 6px;}
.el-chip{background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-pill);padding:3px 10px;font-size:.76rem;font-weight:600;color:var(--text);cursor:pointer;font-family:inherit;}
.el-chip:hover{border-color:var(--accent);}
.el-chip.is-free{border-style:dashed;color:var(--muted);}
.stat-line{font-size:.82rem;color:var(--muted);padding:8px 0 4px;line-height:1.5;}
.stat-line strong{color:var(--text);font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;}
#globalTooltip kbd{font-family:'DM Mono',monospace;font-size:.72rem;padding:0 4px;border:1px solid currentColor;border-radius:4px;opacity:.9;}
.field-group[hidden]{display:none;}
.el-group+.el-group{margin-top:4px;}
.el-group-title{font-size:.72rem;font-weight:700;color:var(--muted);padding-top:4px;}
.insp-actions{display:flex;gap:2px;}
.ends-line{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted);flex-wrap:wrap;}
.ends-line strong{color:var(--text);}

/* ── Label matrix ── */
#labelMatrix{display:flex;flex-direction:column;gap:10px;}
#labelMatrix>*{margin-top:0;margin-bottom:0;}
.lbl-chips{display:flex;flex-wrap:wrap;gap:5px;padding:6px 0 8px;}
.lbl-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 6px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--input-bg);font-size:.76rem;font-weight:600;color:var(--muted);cursor:pointer;user-select:none;}
.lbl-chip input{accent-color:var(--accent);margin:0;width:13px;height:13px;}
.lbl-chip:has(input:checked){color:var(--text);border-color:var(--accent);}

/* ── The diagram card ── */
.chart-card{padding:18px 20px;margin-bottom:18px;}
.chart-card>.sub{color:var(--muted);font-size:.8rem;margin:5px 0 0;line-height:1.4;min-height:1.1em;}
.sld-viewbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin:12px 0 10px;font-size:.84rem;}
.flow-toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-weight:600;color:var(--text);user-select:none;}
.flow-toggle input{accent-color:var(--accent);margin:0;width:15px;height:15px;}
/* The key is a short run of the diagram's own arrows (script.js draws them from
   LF.GLYPH): solid arrows for active power, open chevrons for reactive. They
   run while that flow is on and stand still, faded, while it is off. */
.flow-key{display:inline-block;width:32px;height:10px;flex-shrink:0;overflow:hidden;stroke-linecap:round;stroke-linejoin:round;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);}
.flow-key-p{fill:var(--line-a);stroke:var(--line-a);stroke-width:.6;}
.flow-key-q{fill:none;stroke:var(--gold);stroke-width:1.8;}
.flow-key .fk-run{animation:lfKey .8s linear infinite;}
.flow-toggle input:not(:checked)+.flow-key{opacity:.45;}
.flow-toggle input:not(:checked)+.flow-key .fk-run{animation:none;}
@keyframes lfKey{from{transform:translateX(0);}to{transform:translateX(12px);}}
@media(prefers-reduced-motion:reduce){.flow-key .fk-run{animation:none;}}
.viewbar-field{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--muted);}
.viewbar-field .sel-input{width:auto;padding-top:5px;padding-bottom:5px;font-size:.82rem;}
.sld-body{display:flex;gap:10px;align-items:stretch;}
.sld-palette{display:flex;flex-direction:column;gap:4px;flex:0 0 74px;}
.pal-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 5px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--input-bg);color:var(--text);font-family:inherit;font-size:.66rem;font-weight:700;line-height:1.15;cursor:grab;touch-action:none;user-select:none;transition:border-color var(--motion-fast),background var(--motion-fast);}
.pal-btn svg{width:30px;height:24px;color:var(--text);}
.pal-btn:hover{border-color:var(--accent);}
.pal-btn.is-armed{border-color:var(--accent2);background:rgba(143,205,189,.16);}
.pal-help{display:flex;justify-content:center;align-items:center;padding:2px 0 4px;font-size:.66rem;font-weight:700;color:var(--muted);text-align:center;line-height:1.2;}
.pal-sep{height:1px;background:var(--border);margin:4px 2px;}
.pal-row{display:flex;justify-content:space-between;}
.pal-row .btn-bare{min-width:34px;height:30px;font-size:1.05rem;}
.pal-clear{font-size:.7rem;justify-content:center;width:100%;}
.sld-stage{position:relative;flex:1 1 auto;min-height:620px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--panel);touch-action:pan-y;user-select:none;-webkit-user-select:none;}
#sldSvg{display:block;width:100%;height:100%;cursor:default;}
#sldSvg.is-panning{cursor:grabbing;}
/* The active region: once the diagram is clicked or focused, the wheel zooms
   it instead of scrolling the page. A soft blue ring drawn over the stage,
   on its own rounded corners, says so (an outline on the SVG would be square
   and cut off at the stage's corners). */
#sldSvg:focus,#sldSvg:focus-visible{outline:none;}
.sld-stage::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow var(--motion-fast);z-index:2;}
.sld-stage.is-active::after,.sld-stage:has(#sldSvg:focus-visible)::after{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 65%,transparent);}
#sldSvg [data-id]{cursor:pointer;}
#sldSvg text{user-select:none;-webkit-user-select:none;}
/* A part's shadow before it is placed: the part itself, see-through and soft. */
#sldSvg .ed-ghost{opacity:.5;filter:drop-shadow(0 2px 3px rgba(0,0,0,.28));}
/* ⤢ in the stage's top right, in the accent fill, as on the Cost of Living map. */
.sld-full{position:absolute;right:10px;top:10px;z-index:3;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:var(--radius-sm);border:1px solid var(--accent-strong);background:var(--accent-strong);color:var(--text-inv);font-family:inherit;font-size:1.2rem;font-weight:700;line-height:1;cursor:pointer;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-strong) 28%,transparent),var(--shadow-sm);}
.sld-full:hover{background:var(--accent);border-color:var(--accent);}
.sld-full:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.sld-full .zf-close,.sld-card.is-full .sld-full .zf-open{display:none;}
.sld-card.is-full .sld-full .zf-close{display:block;}
.sld-zoom{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:4px;}
.sld-zoom .btn-icon{min-width:32px;padding:4px 0;background:var(--panel);font-size:.95rem;}
.sld-hint{position:absolute;left:12px;bottom:10px;max-width:calc(100% - 70px);font-size:.78rem;color:var(--muted);background:var(--panel);border-radius:var(--radius-sm);padding:3px 8px;pointer-events:none;opacity:0;transition:opacity var(--motion-base);}
.sld-hint.visible{opacity:.95;}
.hover-box{margin-top:10px;color:var(--muted);font-size:.84rem;min-height:22px;line-height:1.5;}
.hover-box strong{color:var(--text);}
.hover-box .mono{color:var(--text);}

/* ⤢ Full screen: the diagram card fills the window with only the view bar,
   the palette and the diagram. The page under it is locked, so a plain wheel
   zooms and one finger pans. A selected element's panel opens as a sidebar on
   the right, and the diagram makes room for it. */
html.sld-full-open{overflow:hidden;scrollbar-gutter:auto;}
.sld-card.is-full{position:fixed;inset:0;z-index:1000;margin:0;display:flex;flex-direction:column;border:0;border-radius:0;box-shadow:none;background:var(--panel);
  padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));}
.sld-card.is-full>.chart-head,.sld-card.is-full>.sub,.sld-card.is-full>.hover-box{display:none;}
.sld-card.is-full .sld-viewbar{flex:0 0 auto;margin-top:0;}
.sld-card.is-full .sld-body{flex:1 1 auto;min-height:0;}
.sld-card.is-full .sld-stage{min-height:0;touch-action:none;}
.sld-card.is-full .sld-stage::after{display:none;}
@media(min-width:701px){
  html.sld-full-open body.ed-has-sel .sld-card.is-full{right:340px;}
  html.sld-full-open body.ed-has-sel .controls{position:fixed;top:0;right:0;bottom:0;left:auto;width:340px;max-height:none !important;align-self:stretch;z-index:1001;margin:0;border-radius:0;border-top:0;border-right:0;border-bottom:0;box-shadow:var(--shadow-lg);background:var(--panel);display:flex;flex-direction:column;}
  html.sld-full-open body.ed-has-sel .controls .ctrl-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;}
  html.sld-full-open body.ed-has-sel .controls .quick-start-row,html.sld-full-open body.ed-has-sel .controls .ctrl-tabs{display:none;}
}
/* On a phone the panel stays the sheet from below, lifted over the diagram. */
@media(max-width:700px){ html.sld-full-open body.ed-sheet .controls{z-index:1001;} }

/* Flow lanes: arrows that move with SMIL (ed-draw.js), paused while the result is stale. */
#sldSvg.no-p .fl-p{display:none;}

/* ── The hour: a scrubber with play, beside the view options ── */
.hour-ctl{display:inline-flex;align-items:center;gap:8px;flex:1 1 260px;min-width:220px;}
.hour-ctl .btn-icon{min-width:32px;padding:4px 0;font-size:.85rem;}
.hour-field{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--muted);white-space:nowrap;flex-shrink:0;}
.hour-ctl input[type=range]{flex:1 1 auto;min-width:80px;accent-color:var(--accent);cursor:pointer;margin:0;}
.hour-out{flex-shrink:0;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-weight:600;font-size:.84rem;color:var(--text);min-width:9.6em;text-align:right;white-space:nowrap;}
.hour-ctl[data-off]{opacity:.45;pointer-events:none;}
/* On a phone the date takes the room the word Hour had; the label stays for screen readers. */
@media(max-width:600px){
  .hour-ctl{min-width:0;}
  .hour-field{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .hour-out{min-width:0;font-size:.78rem;}
}

/* ── Charts ── */
.legend{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 14px;font-size:.84rem;}
.legend-item{display:flex;align-items:center;gap:7px;cursor:pointer;transition:opacity .15s;}
.legend-item.hidden{opacity:.35;}
.canvas-wrap{height:380px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--card-bg);}
.canvas-wrap canvas{cursor:pointer;}
.commit-wrap{height:300px;}
.chart-card[hidden]{display:none;}
.inspector-chart{margin:6px 0 2px;}

/* ── Results ── */
.metrics{grid-template-columns:repeat(4,1fr);}
.metric .value.warn{color:var(--warning-text);}
.metric{padding:14px 16px;min-height:96px;}
.metric .label{display:flex;align-items:center;gap:5px;}
.metric .value{font-size:1.3rem;}
.metric .value.neg{color:var(--negative-em);}
.metric .sub{color:var(--muted);font-size:.78rem;margin-top:5px;line-height:1.35;}
.detail-section{padding:20px;margin-bottom:18px;}
.detail-head{margin-bottom:4px;}
.detail-head .seg-group{margin-left:4px;}
.table-wrap{max-height:460px;overflow:auto;}
th{position:sticky;top:0;background:var(--panel);z-index:1;}
td.neg{color:var(--negative-em);font-weight:700;}
td.muted{color:var(--muted);}
tr.is-sel td{background:rgba(141,187,255,.12);}
body.light tr.is-sel td{background:rgba(90,145,232,.10);}
tbody tr{cursor:pointer;}

.page-footer{max-width:1500px;margin:0 auto;padding:0 24px 24px;}

/* ── Embed: the diagram alone, read-only ── */
html.abt-embed .sld-edit-only,html.abt-embed .sld-zoom,html.abt-embed .sld-full{display:none !important;}
html.abt-embed .sld-stage{background:transparent;border:0;border-radius:0;}
html.abt-embed .sld-body{gap:0;}
html.abt-embed .chart-card>.sub{margin-top:0;}

@media(max-width:1100px){
  .layout{grid-template-columns:1fr;}
  .controls{position:static;max-height:none;}
  .metrics{grid-template-columns:repeat(2,1fr);}
  .sld-stage{min-height:520px;}
  .canvas-wrap{height:340px;}
  .commit-wrap{height:280px;}
  /* The inspector becomes a sheet over the page while an element is selected. */
  body.ed-sheet .controls{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:60;max-height:62vh;display:flex;flex-direction:column;border-radius:16px 16px 0 0;box-shadow:var(--shadow-lg);background:var(--panel);padding-bottom:env(safe-area-inset-bottom);}
  body.ed-sheet .controls .ctrl-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;}
  body.ed-sheet .controls .quick-start-row{display:none;}
  body.ed-sheet .insp-done{display:block;}
}
@media(max-width:600px){
  h1{font-size:1.35rem;}
  .container{padding:10px;}
  .page-footer{padding:0 10px 16px;}
  .metrics{grid-template-columns:1fr;}
  .sld-body{flex-direction:column;}
  .sld-palette{flex-direction:row;flex:0 0 auto;overflow-x:auto;padding-bottom:2px;}
  .pal-btn{flex:0 0 64px;}
  .pal-help{flex:0 0 auto;padding:0 6px;}
  .pal-sep{width:1px;height:auto;margin:2px 4px;}
  .pal-row{flex-direction:column;justify-content:center;}
  .pal-clear{width:auto;}
  .sld-stage{height:60vh;min-height:320px;}
  .canvas-wrap{height:300px;}
  .commit-wrap{height:260px;}
  .ctrl-tab{font-size:.76rem;}
  .chart-card{padding:14px 12px;}
}

/* ── Horizon: a number and its unit side by side ── */
.span-row{display:flex;gap:8px;}
.span-row .txt-input{flex:1 1 0;min-width:0;}
.span-row .sel-input{flex:0 0 108px;width:108px;}

/* ── A profile: 24 bars, one an hour, drawn and dragged in the inspector ── */
.prof-bars{display:block;width:100%;height:auto;aspect-ratio:256/90;max-height:120px;margin-top:6px;cursor:ns-resize;touch-action:none;user-select:none;}
.prof-bars .pb{fill:var(--accent);opacity:.75;}
.prof-bars:hover .pb{opacity:.9;}
.prof-bars .pb.pb-on{opacity:1;}
.prof-bars .pb-axis{stroke:var(--muted);stroke-opacity:.55;stroke-width:1;fill:none;}
.prof-bars .pb-t{fill:var(--muted);font:500 8px 'DM Mono',monospace;}
.prof-bars .pb-v{fill:var(--text);font:600 8.5px 'DM Mono',monospace;paint-order:stroke;stroke:var(--panel);stroke-width:3px;stroke-linejoin:round;pointer-events:none;}