/* IES Electric v1.0.50: breaker & panel family tree, brand stories. Loaded on those pages only (after history.css).
   Mobile first. The SVG chart scrolls sideways inside its frame on small screens; the list below is the no-JS view. */

/* ---------- hero (drawn, no photo) ---------- */
.tr-hero{min-height:440px;background:radial-gradient(ellipse at 75% 30%,#173f7a 0%,#0b2a57 55%,#071c3b 100%)}
.tr-hero::before{background:linear-gradient(180deg,rgba(4,14,32,.35),rgba(4,14,32,.15) 50%,rgba(4,14,32,.55))}
.tr-hero-art{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.55;pointer-events:none}
.hs-anim .tr-hero-art path{stroke-dasharray:1400;animation:hs-draw 2.4s ease-out both}
.tr-hero .lead{max-width:760px}

/* ---------- intro + controls ---------- */
.tr-intro{max-width:880px}
.tr-how{font-size:16px!important;padding:12px 16px;background:var(--light,#f3f5f8);border-left:4px solid var(--accent)}
.tr-ctrl{display:grid;gap:14px;margin:0 0 14px}
.tr-ctrl[hidden]{display:none}
.tr-chips{display:flex;flex-wrap:wrap;gap:8px}
.tr-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--line,#dfe3e7);background:#fff;color:var(--navy);font:600 14.5px/1.2 Inter,sans-serif;cursor:pointer}
.tr-chip i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px rgba(11,42,87,.35)}
.tr-chip[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:inset 0 -3px 0 var(--accent)}
.tr-chip:hover{border-color:var(--accent)}
.tr-scrub{display:grid;grid-template-columns:auto auto 1fr;gap:10px 14px;align-items:center;padding:12px 14px;background:#fff;border:1px solid var(--line,#dfe3e7)}
.tr-scrub label{font:700 14px/1.2 Inter,sans-serif;color:var(--navy);white-space:nowrap}
.tr-scrub output{display:inline-block;min-width:3.2em;padding:4px 8px;margin-left:4px;background:var(--navy);color:var(--accent);font:800 15px/1 Montserrat,Arial,sans-serif;text-align:center}
.tr-scrub input[type=range]{width:100%;min-height:44px;accent-color:#0b2a57;cursor:pointer}
.tr-play{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;background:var(--accent);color:var(--navy);border:0;font:800 14.5px/1.2 Inter,sans-serif;cursor:pointer}
.tr-play-i{width:0;height:0;border-left:11px solid var(--navy);border-top:7px solid transparent;border-bottom:7px solid transparent}
.tr-play[aria-pressed="true"] .tr-play-i{width:11px;height:13px;border:0;border-left:4px solid var(--navy);border-right:4px solid var(--navy)}
.tr-ylog{grid-column:1/-1;margin:0;min-height:1.5em;font-size:14.5px;line-height:1.5;color:var(--text)}
.tr-ylog span{display:block}
.tr-ycount{font-weight:700;color:var(--navy)}
.tr-yev b{display:inline-block;margin-right:6px;padding:1px 6px;background:var(--light,#f3f5f8);color:var(--navy);font-size:13px}
@media (max-width:640px){.tr-scrub{grid-template-columns:1fr auto}.tr-scrub input[type=range]{grid-column:1/-1;order:3}.tr-ylog{order:4}}

/* ---------- chart ---------- */
.tr-fig{margin:0 0 20px;background:#0b2a57;box-shadow:0 18px 40px -26px rgba(11,42,87,.8);border-top:5px solid var(--accent)}
.tr-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-color:#ffc20e #0b2a57}
.tr-scroll:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.tr-svg{display:block;width:100%;min-width:980px;height:auto}
.tr-n{cursor:pointer;outline:none}
.tr-n .tr-pill{transition:fill .15s,stroke-width .15s}
.tr-n:hover .tr-pill,.tr-n:focus-visible .tr-pill{fill:#173f7a;stroke-width:3}
.tr-n:focus-visible .tr-pill{stroke:#fff;stroke-width:3.5}
.tr-n.is-cur .tr-pill{fill:#ffc20e}
.tr-n.is-cur text{fill:#0b2a57}
.tr-n.is-cur text:last-child{fill:#ffc20e}
.tr-br,.tr-n,.tr-link,.tr-lane{transition:opacity .2s}
.tr-focus .tr-br:not(.is-hi),.tr-focus .tr-n:not(.is-hi){opacity:.22}
.tr-focus .tr-link:not(.is-hi){opacity:.15}
.tr-focus .tr-br.is-hi .tr-path{stroke-width:5.5;filter:drop-shadow(0 0 5px rgba(255,255,255,.35))}
.tr-n.is-future{opacity:.08!important;pointer-events:none}
.tr-link.is-future{opacity:0}
.tr-scrubbing .tr-trunk{opacity:.9}
.tr-legend{display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 16px;background:#08214a;color:#dfe6ee;font:500 13px/1.3 Inter,sans-serif}
.tr-legend span{display:inline-flex;align-items:center;gap:7px}
.tr-legend i{display:inline-block;width:26px;height:12px;position:relative}
.lg-line{border-bottom:4px solid #6fb3ff;height:4px!important}
.lg-via{background:radial-gradient(circle,#0b2a57 3px,#6fb3ff 3.5px,#6fb3ff 5.5px,transparent 6px)}
.lg-join{border-bottom:4px solid #8fd6b4;border-right:4px solid #8fd6b4;border-bottom-right-radius:10px}
.lg-dash{border-bottom:2px dashed #dfe6ee;height:6px!important}
.lg-mark::before{content:"";position:absolute;left:7px;top:0;width:9px;height:9px;background:#fff;transform:rotate(45deg)}
.lg-end{border-bottom:4px solid #9aa7b5;height:6px!important}
.lg-end::after{content:"";position:absolute;right:0;top:0;height:14px;border-right:4px solid #9aa7b5}
.lg-warn::before{content:"";position:absolute;left:5px;top:-1px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:14px solid #ffc20e}
.tr-swipe{color:var(--accent);font-weight:700}
@media (min-width:1100px){.tr-swipe{display:none!important}}

/* ---------- details panel ---------- */
.tr-panel{margin:0 0 34px;scroll-margin-top:110px}
.tr-panel[hidden]{display:none}
.tr-panel-in{background:#fff;border:1px solid var(--line,#dfe3e7);border-top:5px solid var(--lc,#ffc20e);padding:18px 20px 14px;box-shadow:0 18px 36px -28px rgba(11,42,87,.7);animation:tr-in .25s ease-out}
@keyframes tr-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tr-panel-in{animation:none}.tr-br,.tr-n,.tr-link,.tr-lane,.tr-n .tr-pill{transition:none}}
.tr-panel-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tr-panel-k{margin:0;font:700 12px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--steel)}
.tr-close{width:44px;height:44px;border:0;background:var(--light,#f3f5f8);color:var(--navy);font:400 28px/1 Arial,sans-serif;cursor:pointer}
.tr-close:hover,.tr-close:focus-visible{background:var(--accent)}
.tr-panel .tr-item{list-style:none;margin:0;padding:0;border:0}
.tr-panel .tr-iname{margin:4px 0 12px;font-size:clamp(22px,2.6vw,28px)}
.tr-panel-nav{display:flex;justify-content:space-between;gap:10px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line,#dfe3e7)}
.tr-panel-nav button{min-height:44px;padding:8px 14px;border:1px solid var(--line,#dfe3e7);background:#fff;color:var(--navy);font:700 14px/1.2 Inter,sans-serif;cursor:pointer}
.tr-panel-nav button:hover,.tr-panel-nav button:focus-visible{border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}

/* ---------- list (no-JS view + panel content) ---------- */
.tr-list{margin:20px 0 40px;padding:0}
.tr-list>h2{margin:0 0 6px}
.tr-lnote{margin:0 0 20px;color:var(--steel)}
.tr-lgroup{margin:0 0 26px;padding:0 0 0 16px;border-left:5px solid var(--lc,#ffc20e);transition:opacity .2s}
.tr-lgroup.is-dim{opacity:.35}
.tr-lgroup>h3{margin:0 0 4px;font-size:22px}
.tr-ltoday{margin:0 0 4px;font-size:15px}
.tr-items{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px}
@media (min-width:900px){.tr-items{grid-template-columns:1fr 1fr}}
.tr-item{background:#fff;border:1px solid var(--line,#dfe3e7);padding:16px 18px;scroll-margin-top:110px}
.tr-item:target{box-shadow:0 0 0 3px var(--accent)}
.tr-item.tr-prob{border-color:#e7b100;background:#fffbea}
.tr-iname{margin:0 0 10px;font-size:20px;line-height:1.25}
.tr-iy{display:inline-block;margin-left:6px;padding:3px 7px;background:var(--navy);color:var(--accent);font:800 12.5px/1 Montserrat,Arial,sans-serif;vertical-align:3px}
.tr-pflag{display:block;margin-top:6px;font:700 13px/1.3 Inter,sans-serif;color:#7a5600}
.tr-facts{margin:0 0 10px;display:grid;gap:6px}
.tr-facts div{display:grid;grid-template-columns:8.5em 1fr;gap:8px}
.tr-facts dt{font:700 12.5px/1.5 Inter,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--steel)}
.tr-facts dd{margin:0;font-size:15.5px;line-height:1.5}
@media (max-width:520px){.tr-facts div{grid-template-columns:1fr;gap:0}}
.tr-ev{list-style:none;margin:0 0 10px;padding:0 0 0 14px;border-left:2px solid var(--line,#dfe3e7);display:grid;gap:6px}
.tr-ev li{font-size:15px;line-height:1.5;position:relative}
.tr-ev li::before{content:"";position:absolute;left:-19px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #fff}
.tr-ev b{color:var(--navy);margin-right:4px}
.tr-note{margin:0 0 8px;font-size:15px;font-style:italic}
.tr-prof{margin:0 0 8px}
.tr-prof a{font-weight:700}
.tr-src{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--steel)}
.tr-src a{color:#0b5cad;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}

/* ---------- problem panels + what fits ---------- */
.tr-box{margin:0 0 34px;padding:24px;background:#fff;border:1px solid var(--line,#dfe3e7);scroll-margin-top:100px}
.tr-box>h2{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:clamp(24px,2.8vw,30px)}
.tr-box>p,.tr-box li{font-size:16px;line-height:1.65}
.tr-problems{border-top:6px solid #e7b100;background:linear-gradient(180deg,#fffbea,#fff 140px)}
.tr-warn{flex:none;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:28px solid #ffc20e;position:relative}
.tr-warn::after{content:"!";position:absolute;left:-4px;top:7px;font:900 17px/1 Arial,sans-serif;color:#0b2a57}
.tr-pgrid{display:grid;gap:16px;margin:16px 0}
@media (min-width:900px){.tr-pgrid{grid-template-columns:1fr 1fr}}
.tr-pcard{padding:16px 18px;border:1px solid #efd88a;background:#fff}
.tr-pcard h3{margin:0 0 8px;font-size:19px}
.tr-pcard ul{margin:0;padding-left:20px;display:grid;gap:8px}
.tr-advice{padding:14px 16px;background:var(--navy);color:#fff;margin:0}
.tr-advice b{color:var(--accent)}
.tr-more{margin:14px 0 0;font-size:15px}
.tr-box a,.tr-lnote a,.tr-backlinks a,.tr-disc a{color:#0b5cad;text-decoration:underline;text-underline-offset:2px}
.tr-fits{border-top:6px solid var(--navy)}
.tr-fits ol{margin:6px 0 0;padding-left:22px;display:grid;gap:10px}
.tr-about{margin-bottom:30px}
.tr-backlinks{margin:16px 0 0;font-weight:700}

/* ---------- brand cards ---------- */
.tr-bcards{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:18px}
@media (min-width:700px){.tr-bcards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
.tr-bcard>a,.tr-bcard>div{display:grid;gap:6px;height:100%;padding:22px;background:#fff;border:1px solid var(--line,#dfe3e7);border-top:5px solid var(--accent);color:var(--text);text-decoration:none;transition:transform .2s,box-shadow .2s}
.tr-bcard>a:hover,.tr-bcard>a:focus-visible{transform:translateY(-3px);box-shadow:0 16px 30px -20px rgba(11,42,87,.6)}
.tr-bmark{display:grid;place-items:center;width:52px;height:52px;background:var(--navy);color:var(--accent);font:800 24px/1 Montserrat,Arial,sans-serif;margin-bottom:6px}
.tr-bcard b{font:800 22px/1.2 Montserrat,Arial,sans-serif;color:var(--navy)}
.tr-bmeta{font:700 13px/1.3 Inter,sans-serif;color:var(--steel);text-transform:uppercase;letter-spacing:.05em}
.tr-btag{font-size:15.5px;line-height:1.55}
.tr-bgo{margin-top:6px;font-weight:800;color:#0b5cad}
.tr-bsoon>div{border-top-color:#c7d0db;border-style:dashed;background:transparent}
.tr-bsoon .tr-bmark{background:#e9edf2;color:var(--steel)}
@media (prefers-reduced-motion:reduce){.tr-bcard>a{transition:none}.tr-bcard>a:hover{transform:none}}

/* ---------- brand profile ---------- */
.tr-bgrid{display:grid;gap:30px}
.tr-bmain,.tr-bside{min-width:0}
@media (min-width:980px){.tr-bgrid{grid-template-columns:minmax(0,1fr) 320px;align-items:start}.tr-bside{position:sticky;top:100px}}
.tr-ribfig{margin:0 0 26px;background:#0b2a57;border-top:5px solid var(--accent)}
.tr-ribbon{display:block;width:100%;height:auto;min-width:640px}
.tr-ribfig{overflow-x:auto}
.tr-ribfig figcaption{padding:8px 12px;background:#08214a;color:#dfe6ee;font-size:13px}
.tr-ribfig .hs-credit{display:inline;color:#9fb0c2;margin-left:6px}
.hs-anim .rb-pt{animation:tr-pop .5s ease-out both;animation-delay:calc(var(--i) * .12s)}
@keyframes tr-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tr-sec{margin:0 0 24px;padding:0}
.tr-sec h2{margin:0 0 8px;font-size:clamp(22px,2.6vw,28px)}
.tr-sec>p{font-size:17px;line-height:1.7;margin:0}
.tr-brand .hs-fig{margin:0 0 26px}
.tr-dim-ctl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;padding:12px 14px;background:#08214a;color:#fff}
.tr-dim-ctl[hidden]{display:none}
.tr-dim-ctl label{font:700 14px/1.2 Inter,sans-serif;color:var(--accent)}
.tr-dim-ctl input{width:100%;min-height:44px;accent-color:#ffc20e;cursor:pointer}
.tr-dim-out{grid-column:1/-1;font-size:14px;color:#dfe6ee}
.tr-disc{margin:24px 0 0;padding:12px 14px;background:var(--light,#f3f5f8);font-size:14px;color:var(--steel)}
.tr-fbox{padding:18px 20px;background:#fff;border:1px solid var(--line,#dfe3e7);border-top:5px solid var(--navy);margin:0 0 18px}
.tr-fbox h2{margin:0 0 10px;font-size:19px}
.tr-fbox h2::after{display:none}
.tr-fbox dl{margin:0;display:grid;gap:10px}
.tr-fbox dt{font:700 12px/1.3 Inter,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--steel)}
.tr-fbox dd{margin:2px 0 0;font-size:15.5px;line-height:1.5;color:var(--navy);font-weight:600}
.tr-fbox ul{margin:0;padding-left:18px;display:grid;gap:6px}
.tr-fbox .tr-src{margin:0}
.tr-side-link{display:grid;gap:4px;margin:0 0 18px;padding:16px 18px;background:var(--navy);color:#dfe6ee;text-decoration:none;border-left:5px solid var(--accent)}
.tr-side-link b{color:#fff;font-size:17px}
.tr-side-link:hover,.tr-side-link:focus-visible{background:#123a72}
.tr-ban{margin-top:6px}

/* ---------- print ---------- */
@media print{.tr-ctrl,.tr-panel,.tr-legend .tr-swipe{display:none!important}.tr-svg{min-width:0}}

/* v1.0.60 brand groups */
.tr-bgroup{margin:2.2rem 0 .4rem;color:#0b2545;border-left:5px solid #ffc20e;padding-left:.6rem}
.tr-bgroup-p{margin:0 0 1rem;color:#334}
.tr-bgroup-p a{color:#0b2545;font-weight:600}