/* ENERGYX: ENERGY tab panel (hook, first action, threats board, fuel mix, GB live mix). Accent = the ENERGY category color via --ex. */
/* the plain hook + WHAT YOU CAN DO tiles sit right under the tab title (phone.css orders widgets after the layer cards; the hook must stay visible first) */
#lpanel>#ex-hookbox{order:-4}
.ex{--ex:#ffc400;--ex-ink:color-mix(in srgb,var(--ex) 70%,var(--ink));margin:6px 0 8px;display:flex;flex-direction:column;gap:8px}
html[data-theme="light"] .ex{--ex:#8a6400}
html[data-theme="light"] .ex-hero .ex-go{color:#fff}
.ex-hook{margin:0;font-size:12px;line-height:1.5;color:var(--ink);letter-spacing:.02em}
.ex-hook b{display:block;font:700 15px/1.25 var(--hd);letter-spacing:.06em;color:var(--ex-ink);margin-bottom:3px}
.ex-do{display:flex;flex-direction:column;gap:5px}
.ex-do>span,.ex-h>span{font-size:9px;letter-spacing:.22em;color:var(--mute)}
.ex-do div{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ex-do button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;font-size:9px;line-height:1.3;letter-spacing:.08em;color:var(--ink);border:1px solid var(--line2);background:color-mix(in srgb,var(--ex) 5%,transparent);padding:7px 4px;min-height:52px}
.ex-do button svg{width:18px;height:18px;color:var(--ex)}
.ex-do button.lit{border-color:var(--ex);color:var(--ex-ink);background:color-mix(in srgb,var(--ex) 14%,transparent)}
.ex-cap a{color:var(--cy2)}
.ex-do button:hover,.ex-do button:focus-visible{border-color:var(--ex);background:color-mix(in srgb,var(--ex) 12%,transparent);outline:none}
.ex-hero{display:flex;flex-direction:column;gap:6px;padding:10px 12px 10px 13px;border:1px solid color-mix(in srgb,var(--ex) 40%,transparent);border-left:4px solid var(--ex);background:linear-gradient(135deg,color-mix(in srgb,var(--ex) 10%,transparent),transparent 70%)}
.ex-hero em{font-style:normal;font-size:9px;letter-spacing:.2em;color:var(--dim);display:flex;align-items:center;gap:6px}
.ex-hero em svg{width:13px;height:13px;color:var(--ex)}
.ex-hero b{font:700 18px/1.15 var(--hd);letter-spacing:.08em;color:var(--ex-ink)}
.ex-hero p{margin:0;font-size:11px;line-height:1.45;color:var(--dim)}
.ex-hero .ex-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;height:auto;white-space:normal;text-align:center;line-height:1.3;padding:10px 10px;font-size:12px;letter-spacing:.12em;background:var(--ex);border-color:var(--ex);color:#140e00}
.ex-hero .ex-go svg{width:18px;height:18px;flex:none}
.ex-hero .ex-go:hover{filter:brightness(1.1);box-shadow:0 0 16px color-mix(in srgb,var(--ex) 55%,transparent)}
.ex-hero.ld b{animation:exp 1.1s ease-in-out infinite}
.ex-btns{display:flex;flex-wrap:wrap;gap:5px}
.ex-card{border-top:1px solid var(--line2);padding-top:7px}
.ex-card.flash{animation:exf .9s ease-out}
.ex-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.ex-h>b{font:700 15px var(--hd);color:var(--ok);letter-spacing:.06em}.ex-h>b.n{color:var(--red2)}.ex-h>b.ex-age{font:400 10px var(--mono);color:var(--dim);letter-spacing:.12em}
.ex-sc button{font-size:9px;padding:3px 7px}
.ex-tot{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.ex-tot b{font:700 20px var(--hd);letter-spacing:.05em;color:var(--ink)}.ex-tot span{font-size:10px;letter-spacing:.12em;color:var(--dim)}
.ex-bar{display:flex;height:10px;margin:6px 0;border:1px solid var(--line2);overflow:hidden}.ex-bar i{display:block;min-width:1px}
.ex-chips{gap:4px}
.ex-chip b{font-weight:700;color:var(--ink)}.ex-chip small{color:var(--dim)}
.ex-cap{margin:6px 0 0;font-size:10px;line-height:1.45;color:var(--dim);letter-spacing:.02em}
.ex-list{display:flex;flex-direction:column;gap:4px}
.ex-row{display:flex;gap:8px;align-items:flex-start;text-align:left;width:100%;padding:7px 8px;border:1px solid var(--line2);border-left:3px solid var(--warn);background:color-mix(in srgb,var(--warn) 5%,transparent);color:var(--ink);font:inherit;cursor:pointer}
.ex-row.hot{border-left-color:var(--red);background:color-mix(in srgb,var(--red) 8%,transparent)}
.ex-row.info{border-left-color:var(--mute);background:transparent}
.ex-row:hover,.ex-row:focus-visible{border-color:var(--ex);outline:none}
.ex-row span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ex-row b{font-size:11px;letter-spacing:.06em;line-height:1.3;font-weight:700;overflow-wrap:anywhere}
.ex-row small{font-size:9.5px;letter-spacing:.08em;color:var(--dim);line-height:1.35;overflow-wrap:anywhere}
.ex-k{flex:none;display:grid;place-items:center;width:20px;height:20px;font:700 11px var(--mono);font-style:normal;border:1px solid currentColor;color:var(--warn)}
.ex-row.hot .ex-k{color:var(--red2)}.ex-row.info .ex-k{color:var(--mute)}
.ex-more{margin-top:5px}
.ex-clear{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 6%,transparent)}
.ex-clear b{font:700 15px var(--hd);letter-spacing:.12em;color:var(--ok)}.ex-clear span{font-size:11px;line-height:1.4;color:var(--dim)}
.ex-ages{display:flex;flex-wrap:wrap;gap:3px 10px;margin-top:5px;font-size:9px;letter-spacing:.12em;color:var(--mute)}.ex-ages .stale{color:var(--warn)}
.ex-gb{display:block;width:100%;text-align:left;padding:8px;border:1px solid var(--line2);background:color-mix(in srgb,var(--ok) 4%,transparent);color:var(--ink);font:inherit;cursor:pointer}
.ex-gb:hover,.ex-gb:focus-visible{border-color:var(--ex);outline:none}
.ex-leg{display:flex;flex-wrap:wrap;gap:3px 10px;font-size:10px;letter-spacing:.08em;color:var(--dim)}.ex-leg i{display:inline-block;width:8px;height:8px;margin-right:4px;vertical-align:0}.ex-leg b{color:var(--ink)}
.ex-ic{display:block;margin-top:5px;font-size:9.5px;letter-spacing:.08em;color:var(--dim);line-height:1.4}
.ex-eus{display:flex;flex-direction:column;gap:3px}
.ex-eu{display:grid;grid-template-columns:minmax(78px,1fr) 2fr auto;column-gap:8px;row-gap:2px;align-items:center;text-align:left;width:100%;padding:5px 7px;border:1px solid var(--line2);background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.ex-eu:hover,.ex-eu:focus-visible{border-color:var(--ex);outline:none}
.ex-eu b{font-size:10px;letter-spacing:.1em;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-eu .ex-bar{margin:0;height:8px}.ex-eu em{font-style:normal;font-size:10px;color:var(--ink);letter-spacing:.06em;text-align:right}
.ex-eu small{grid-column:1 / -1;font-size:9px;letter-spacing:.1em;color:var(--dim)}
.ex-lock{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 9px;border:1px dashed color-mix(in srgb,var(--ex) 45%,transparent);background:color-mix(in srgb,var(--ex) 4%,transparent);color:var(--ink);font:inherit;cursor:pointer}
.ex-lock:hover,.ex-lock:focus-visible{border-style:solid;border-color:var(--ex);outline:none}
.ex-lock svg{flex:none;width:18px;height:18px;color:var(--ex)}
.ex-lock span{display:flex;flex-direction:column;gap:2px;min-width:0}.ex-lock b{font-size:10px;letter-spacing:.2em;color:var(--ex-ink)}.ex-lock small{font-size:10px;line-height:1.4;color:var(--dim);letter-spacing:.04em}
.ex-src{margin:2px 0 0;font-size:9px;line-height:1.5;letter-spacing:.1em;color:var(--mute)}
#rail button[data-cat=energy]>span,#catstrip button[data-cat=energy]>span{letter-spacing:.06em}
@keyframes exp{50%{opacity:.45}}
@keyframes exf{0%{background:color-mix(in srgb,var(--ex) 22%,transparent)}100%{background:transparent}}

@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  .ex{gap:7px;margin:4px 0 6px}
  .ex-hook{font-size:11.5px}.ex-hook b{font-size:14px}
  .ex-do button{min-height:56px;font-size:9.5px}
  .ex-hero b{font-size:16px}
  .ex-hero .ex-go{padding:12px 8px;font-size:11.5px;letter-spacing:.08em}
  .ex-row{padding:8px}.ex-row b{font-size:11px}.ex-row small{font-size:10px}
  .ex-sc button{padding:5px 8px}
  .ex-cap,.ex-ages,.ex-src{font-size:10px}
}
@media (prefers-reduced-motion: reduce){.ex-hero.ld b,.ex-card.flash{animation:none}}