/* Auvere Monitor — stylesheet
   Two type roles only: a system sans for prose, a monospace for every number.
   Numbers are the subject of this site, so they get the instrument face. */

:root{
  --bg:#161616;
  --card:#1f1f1f;
  --sunk:#191919;
  --line:#333;
  --line-soft:#2a2a2a;

  --ink:#ececec;
  --dim:#9b9b9b;
  --faint:#6d6d6d;

  --made:#00b4e0;   /* produced */
  --idle:#585858;   /* standby: declared available, not produced */
  --up:#3aa655;     /* uptime */
  --price:#3aa655;  /* day-ahead price line in Myth Buster charts */
  --lost:#e0483c;   /* shut down or limited */
  --maint:#e0a91b;  /* planned event */

  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --r:9px;
  --r-card:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  padding:0 14px 40px;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
}

h1{font-size:16px;font-weight:600;margin:0 0 2px}
h2{font-size:14px;font-weight:600;margin:22px 0 6px;color:var(--ink)}
#panel-simulations h2:first-child{margin-top:0}
p{margin:0 0 12px}
a{color:var(--made)}

.sub{color:var(--faint);font-size:13px;margin-bottom:14px}

/* --- tabs ---
   Mobile: a hamburger reveals a stacked menu. The tab row grew past what a
   narrow viewport can hold — the Estlink link was already being clipped
   before the Simulations tab was added. Desktop keeps the flat row. */
.tabs{
  display:flex;align-items:center;gap:2px;
  max-width:1060px;margin:0 auto;padding:14px 0 12px;
  position:relative;
}
.nav-toggle{
  appearance:none;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);
  width:44px;height:40px;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:4px;cursor:pointer;padding:0;flex:none;
}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:1px}
.nav-toggle:focus-visible{outline:2px solid var(--made);outline-offset:1px}
.nav-items{
  display:none;position:absolute;top:100%;left:0;right:0;z-index:20;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:6px;flex-direction:column;gap:2px;
}
.nav-items.open{display:flex}
.tab{
  appearance:none;background:none;border:0;color:var(--dim);
  font:500 14px var(--sans);padding:10px 13px;border-radius:var(--r);
  cursor:pointer;white-space:nowrap;min-height:40px;text-align:left;
}
.tab:hover{color:var(--ink)}
.tab.active{background:#2c2c2c;color:var(--ink)}
.tab:focus-visible,.seg button:focus-visible{outline:2px solid var(--made);outline-offset:1px}
/* Carries .tab too, so it only needs to override what differs: it's an
   anchor, never gets .active, and shouldn't inherit button text-alignment. */
.tab-link{text-decoration:none;display:flex;align-items:center}
.tab-link:hover{color:var(--made)}

main{max-width:1060px;margin:0 auto}
.panel{display:none}
.panel.active{display:block}

.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:16px 14px;
}
.caption{color:var(--faint);font-size:12.5px;line-height:1.6;margin:14px 0 0;
  padding-top:12px;border-top:1px solid var(--line-soft)}

/* --- timeline header --- */
.tl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
/* Mobile-first: the four presets and the dropdown each take a full row, so
   nothing can be pushed off the side of the viewport. Restored to one row at
   the wide breakpoint below. */
.tl-controls{display:flex;gap:7px;align-items:stretch;flex:1 0 100%;order:3;min-width:0;flex-wrap:wrap}
.tl-controls .seg{flex:1 1 100%;min-width:0}
#tl-period{flex:1 1 100%}

/* Both controls are 42px tall: 34px inner button + 2x3px padding + 2x1px border.
   The select must match exactly or the row looks misaligned. */
.seg{display:flex;gap:3px;background:var(--sunk);border:1px solid var(--line);
  border-radius:var(--r);padding:3px;height:42px;box-sizing:border-box}
.seg button{
  flex:1;appearance:none;background:none;border:0;color:var(--dim);
  font:500 12.5px var(--sans);height:34px;padding:0 6px;border-radius:6px;
  cursor:pointer;white-space:nowrap;min-width:0;
}
.seg button[aria-pressed="true"]{background:#323232;color:var(--ink)}
#tl-period{
  appearance:none;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink);font:13px var(--sans);height:42px;padding:0 30px 0 12px;cursor:pointer;
  box-sizing:border-box;flex:0 0 auto;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),
    linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 16px) 19px,calc(100% - 11px) 19px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
#tl-period:focus-visible{outline:2px solid var(--made);outline-offset:1px}

/* --- metrics ---
   Label and value sit on one line, same font, both left-aligned. 2-digit day
   formatting (see fDayY in main.js) keeps the date string's width constant
   while dragging, which is what actually stopped the earlier jumping — this
   nowrap is just a second guarantee that the date itself never breaks mid-string. */
.mets-block{border:1px solid var(--line-soft);border-radius:10px;padding:11px 12px 12px;margin-bottom:14px}
.mets-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-bottom:9px}
.mets-label,.tl-range{font:12px var(--mono);color:var(--faint);white-space:nowrap}
.mets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.met{background:var(--sunk);border-radius:var(--r);padding:9px 10px;border-left:3px solid var(--idle)}
.met.made{border-left-color:var(--made)}
.met.lost{border-left-color:var(--lost)}
.met.maint{border-left-color:var(--maint)}
.met.auvere{border-left-color:var(--mk-auvere)}
.met.time{border-left-color:var(--up)}
.met-k{font-size:11px;color:var(--dim)}
.met-v{font:500 19px/1.15 var(--mono);letter-spacing:-.02em;margin-top:3px}
.met-s{font-size:11px;color:var(--faint);margin-top:2px;line-height:1.3}

/* --- event lane --- */
.lane{position:relative;height:26px;margin-bottom:3px;touch-action:pan-y}
.pill{
  position:absolute;top:5px;height:16px;border-radius:3px;overflow:hidden;
  color:#141414;font:500 11px/16px var(--sans);padding:0 5px;white-space:nowrap;
  background:var(--maint);border:0;text-align:left;cursor:pointer;
}
.pill.broken{background:var(--lost);color:#fff}
.pill::after{content:"";position:absolute;inset:-9px -6px}
.pill.sel{box-shadow:0 0 0 2px var(--ink)}

/* --- plot --- */
.plot{position:relative}
#tl-canvas{display:block;width:100%;height:210px;touch-action:pan-y}
.crosshair{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.45);pointer-events:none;opacity:0}

/* --- brush ---
   Replaces the range input. The highlighted region is sized to win/N, so window
   length and position are both visible: a 1-week window on an 11-year record is
   a sliver, "all" fills the bar. Locked (non-draggable) for anchored periods,
   where it still works as a position indicator. */
.brush{position:relative;height:32px;margin-top:10px;background:#232323;border-radius:6px;
  overflow:hidden;cursor:grab;touch-action:pan-y}
.brush:active{cursor:grabbing}
.brush.locked{cursor:default;opacity:.75}
.brush canvas{display:block;width:100%;height:32px}
.brush-win{position:absolute;top:0;bottom:0;background:rgba(255,255,255,.16);
  border-left:2px solid var(--ink);border-right:2px solid var(--ink);
  min-width:6px;box-sizing:border-box;pointer-events:none}
.brush.locked .brush-win{border-color:var(--dim)}
.brush:focus-visible{outline:2px solid var(--made);outline-offset:2px}
.brush-ends{display:flex;justify-content:space-between;gap:10px;
  font:11px var(--mono);color:var(--faint);margin-top:4px}

/* --- readout --- */
.readout{background:var(--sunk);border-radius:var(--r);padding:8px 11px;margin-top:9px;min-height:60px}
.rd-t{font:12px var(--mono);color:var(--faint)}
.rd-vals{display:flex;gap:16px;flex-wrap:wrap;margin-top:3px}
.rd-vals b{font:500 15px var(--mono)}
.rd-vals i{font-style:normal;font-size:11px;color:var(--dim);display:block}
.rd-why{
  margin-top:6px;font-size:12px;color:#c8c8c8;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* --- key --- */
.key{
  display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--dim);
  border-top:1px solid var(--line-soft);margin-top:12px;padding-top:11px;
}
.key-ev{margin-left:auto}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.sw-made{background:var(--made)}
.sw-idle{background:var(--idle)}
.sw-lost{background:var(--lost)}
/* Mirrors makeHatch() in main.js: same colours, same 45° stripe, so the
   legend key visually matches what unmetered hours draw as on the canvas. */
.sw-miss{background:#232323;background-image:repeating-linear-gradient(-45deg,
  #3d3d3d 0 1.3px,#232323 1.3px 4.2px)}
.sw-maint{background:var(--maint)}
.sw-broken{background:var(--lost);margin-left:10px}

/* --- event detail --- */
.detail{
  margin-top:12px;border-left:3px solid var(--maint);background:var(--sunk);
  padding:11px 13px;border-radius:0 var(--r) var(--r) 0;position:relative;
}
.detail.broken{border-left-color:var(--lost)}
.detail-t{font:12px var(--mono);color:var(--dim);margin-bottom:5px;padding-right:36px}
.detail-r{font-size:13px;line-height:1.5;color:#d8d8d8}
.detail-x{
  position:absolute;top:2px;right:2px;appearance:none;background:none;border:0;
  color:var(--faint);font:20px/1 var(--sans);cursor:pointer;min-width:40px;min-height:40px;
}
.detail-x:hover{color:var(--ink)}

/* --- status strip --- */
.strip{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:10px;padding:12px 14px}

/* Next-maintenance footer — a full-width row, present or absent as a whole
   unit (border included), never shown empty. Sits below either strip state
   identically since it's a flex sibling of the donut/text columns, not
   nested inside either one. */
.strip-next{flex:1 1 100%;border-top:1px solid var(--line-soft);padding-top:9px;margin-top:2px;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12px}
.strip-next-k{color:var(--faint);white-space:nowrap}
.strip-next-k::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;
  background:var(--maint);margin-right:6px;vertical-align:1px}
.strip-next-v{font:12px var(--mono);color:var(--ink);white-space:nowrap}
.strip-next-x{font:12px var(--mono);color:var(--faint);white-space:nowrap}
.strip-d{flex:0 0 88px;position:relative}
.strip-d svg{display:block}
.strip-dc{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none}
.strip-dv{font:600 17px/1 var(--mono);color:var(--ink)}
.strip-du{font:9.5px var(--mono);color:var(--faint);margin-top:1px}
.strip-r{flex:1;min-width:0}
.strip-t{font-size:14px;font-weight:600;margin-bottom:2px}
/* Deliberately lighter and unbolded: it qualifies the headline rather than
   being part of it, and should not compete with the figure it is hedging. */
.strip-age{font-weight:400;color:var(--faint);font-size:12.5px;margin-left:4px}
.strip-s{font-size:12px;color:var(--dim);line-height:1.45}
.strip-bar{height:7px;border-radius:4px;background:#2c2c2c;position:relative;margin:9px 0 5px}
.strip-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.strip-now{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);border-radius:1px}
.strip-ghost{position:absolute;top:50%;width:14px;height:14px;
  transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
  font:700 9px/1 var(--mono);color:#e9e9e9;text-shadow:0 0 2px rgba(0,0,0,.6);cursor:help}
.strip-ends{display:flex;justify-content:space-between;gap:10px;font:10.5px var(--mono);color:var(--faint)}
.strip-note{font-size:11px;color:var(--faint);margin-top:5px}
.strip-note.warn{color:var(--lost)}
.strip-km{display:flex;gap:12px;align-items:center;margin-top:6px;flex-wrap:wrap}
.strip-km svg{flex:0 0 240px;display:block}
.strip-km-txt{font-size:12px;color:var(--dim);line-height:1.45;min-width:150px;flex:1}
.strip-km-txt b{color:var(--ink)}
.strip-big{font:600 15px var(--mono);color:var(--ink)}
.is-broken{color:var(--lost)}
.is-maint{color:var(--maint)}
.is-run{color:#3aa655}
.is-idle{color:var(--dim)}
@media (max-width:560px){
  /* Donut stays beside the text — stacking it left a dead column to the right.
     Shrunk so the right-hand column keeps a usable width. */
  .strip{gap:12px}
  .strip-d{flex:0 0 64px}
  .strip-d svg{width:64px;height:64px}
  .strip-dv{font-size:14px}
  .strip-du{font-size:8.5px}
  .strip-km{gap:8px}
  .strip-km svg{flex:0 0 100%;width:100%}
  .strip-km-txt{min-width:0}
}

/* --- outage log --- */
.ol-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:7px;margin-bottom:14px;
}
.ol-stats>div{background:var(--sunk);border-radius:var(--r);padding:9px 10px}
.ol-k{display:block;font-size:11px;color:var(--dim)}
.ol-v{display:block;font:500 19px/1.2 var(--mono);margin-top:3px}
.ol-v.is-broken{color:var(--lost)}
.ol-v.is-maint{color:var(--maint)}

.ol-filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.ol-filters input,.ol-filters select{
  background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink);font:14px var(--sans);padding:9px 11px;min-height:40px;
}
.ol-filters input{flex:1 1 100%}
.ol-filters select{flex:1 1 auto;min-width:0}
.ol-filters input:focus,.ol-filters select:focus{outline:2px solid var(--made);outline-offset:-1px}

/* Fixed-height, scrolls inside the card rather than growing the page — with a
   sticky header so the column labels stay visible while scrolling. Several
   hundred rows render at once; there is no pagination to click through. */
.ol-scroll{
  max-height:520px;overflow-y:auto;overflow-x:auto;
  border:1px solid var(--line-soft);border-radius:var(--r);
}
.ol-table{width:100%;min-width:640px;border-collapse:collapse;font-size:13px}
.ol-table thead th{
  position:sticky;top:0;background:#242424;text-align:left;
  font-size:11px;color:var(--faint);font-weight:500;letter-spacing:.03em;text-transform:uppercase;
  padding:9px 10px;border-bottom:1px solid var(--line-soft);white-space:nowrap;
}
.ol-table td{padding:8px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.ol-table tbody tr:hover td{background:var(--sunk)}
.ol-c-start,.ol-c-end,.ol-c-dur,.ol-c-cap{font:12px var(--mono);color:var(--dim);white-space:nowrap}
.ol-c-reason{font-size:13px;line-height:1.4;color:#dcdcdc;min-width:220px}
.ol-tag{
  display:inline-block;font:600 10.5px var(--mono);letter-spacing:.03em;
  padding:2px 7px;border-radius:4px;white-space:nowrap;
}
.ol-tag.broken{background:var(--lost);color:#fff}
.ol-tag.maint{background:var(--maint);color:#141414}
.ol-empty{color:var(--faint);font-size:13px;padding:18px 2px;text-align:left}

/* --- notice bar --- */
.notice-bar{max-width:1060px;margin:0 auto 12px;padding:0 14px;position:relative}
.notice-toggle{
  background:none;border:0;color:var(--dim);font:12.5px var(--sans);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;padding:9px 0;
}
.notice-toggle:hover{color:var(--ink)}
.notice-toggle:focus-visible{outline:2px solid var(--made);outline-offset:2px}
.notice-chev{font-size:10px;color:var(--faint);transition:transform .15s}
.notice-panel{
  display:none;position:absolute;left:14px;right:14px;z-index:5;
  background:var(--card);border:1px solid var(--maint);border-radius:10px;
  padding:12px 14px;margin-top:2px;max-width:640px;
  font-size:12.5px;line-height:1.6;color:var(--dim);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.notice-panel p{margin:0 0 9px}
.notice-panel p:last-child{margin-bottom:0}
.notice-panel b{color:var(--maint)}
.notice-bar:hover .notice-panel,
.notice-bar.open .notice-panel{display:block}
.notice-bar:hover .notice-chev,
.notice-bar.open .notice-chev{transform:rotate(180deg)}

/* --- feed freshness footer --- */
.feedbar{
  max-width:1060px;margin:18px auto 0;padding:10px 14px;
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow-x:auto;
  font-size:11.5px;color:var(--faint);white-space:nowrap;
  border-top:1px solid var(--line-soft);
}
.fb-row{display:inline-flex;align-items:center;gap:5px;cursor:default}
.fb-label{color:var(--faint)}
.fb-sep{color:var(--line)}
.fb-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.fb-green{background:var(--up)}
.fb-yellow{background:var(--maint)}
.fb-red{background:var(--lost)}
.fb-grey{background:var(--idle)}
/* --- simulations --- */
#panel-simulations .card + .card{margin-top:12px}
.sim-switch{margin-top:12px;display:inline-flex;width:auto}
.tally{display:flex;align-items:center;gap:14px;background:var(--sunk);border-radius:10px;
  padding:12px 14px;margin:14px 0}
.tally-n{font:600 26px var(--mono);color:var(--ink)}
.tally-lbl{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.03em}
.tally-bar{flex:1;height:10px;border-radius:5px;overflow:hidden;background:var(--line-soft);
  display:flex;min-width:80px}
.tally-bar div{height:100%}
.tally-split{font:12px var(--mono);color:var(--dim);white-space:nowrap}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.btnrow button{appearance:none;border:1px solid var(--line);background:var(--sunk);color:var(--ink);
  font:500 13.5px var(--sans);padding:10px 16px;border-radius:9px;cursor:pointer}
.btnrow button:hover{background:#242424}
.btnrow button.primary{background:var(--made);border-color:var(--made);color:#0d1420;font-weight:600}
.btnrow button.ghost{background:none;color:var(--dim);border-color:var(--line-soft)}
#sim-picker{appearance:none;background:var(--sunk);border:1px solid var(--line);color:var(--ink);
  font:13.5px var(--sans);padding:10px 34px 10px 14px;border-radius:9px;width:100%;margin-top:8px;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
    linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.eventcard{margin-top:16px;border-radius:10px;overflow:hidden;border:1px solid var(--line-soft)}
.ev-head{padding:12px 14px;background:var(--sunk)}
.ev-date{font:12px var(--mono);color:var(--faint)}
.ev-reason{font-size:14.5px;color:var(--ink);margin-top:2px;line-height:1.4}
.ev-meta{font-size:11.5px;color:var(--faint);margin-top:5px}
.ev-chart{padding:10px 14px 6px;background:var(--card)}
.ev-chart svg{display:block;width:100%;height:auto}
.ev-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft)}
.ev-stat{background:var(--card);padding:12px 14px}
.ev-stat-lbl{font-size:10.5px;color:var(--dim)}
.ev-stat-val{font:600 19px var(--mono);color:var(--ink);margin-top:2px}
/* Named for direction of PRICE, not for the site's --up/--down variables:
   --up is green (uptime) elsewhere in this stylesheet, which is the opposite
   meaning here. Rising price is bad news, falling price is good news. */
.ev-stat-val.price-rose{color:var(--lost)}
.ev-stat-val.price-fell{color:#3aa655}
.hint{font-size:12px;color:var(--faint);line-height:1.6;margin-top:12px}
.progress{font-size:12px;color:var(--faint);margin-top:10px}


/* --- about --- */
#panel-about p{font-size:13.5px;line-height:1.55;color:var(--dim)}
#panel-about .sub{font-size:12.5px;color:var(--faint)}
.more-btn{
  appearance:none;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);
  color:var(--dim);font:14px var(--sans);padding:11px 16px;cursor:pointer;min-height:44px;
  width:100%;margin-bottom:12px;
}
.more-btn:hover{color:var(--ink)}
.more-btn:focus-visible{outline:2px solid var(--made);outline-offset:1px}
.defs{margin:0 0 12px}
.defs dt{font-weight:600;font-size:13.5px;margin-top:10px}
.defs dd{margin:2px 0 0;color:var(--dim);font-size:13.5px;line-height:1.5}
#panel-about ul{margin:0 0 12px;padding-left:20px;color:var(--dim);font-size:13.5px;line-height:1.55}
#panel-about li{margin-bottom:6px}
h1.mt{margin-top:30px}
.changelog{list-style:none;padding:0;margin:0 0 12px}
.changelog li{border-left:2px solid var(--line);padding:0 0 0 12px;margin-bottom:20px}
.cl-date{display:block;font:11.5px var(--mono);color:var(--faint);margin-bottom:2px}
.cl-title{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.cl-body{color:var(--dim);font-size:13.5px;line-height:1.55}
.cl-body p{margin:0 0 10px}
.cl-body ul{margin:0 0 10px;padding-left:20px}
.cl-body li{border-left:0;padding:0;margin-bottom:5px}

.about-img{display:block;width:100%;max-width:640px;border-radius:8px;margin:12px 0 4px}
.img-cap{font-size:12px;color:var(--faint);margin:0 0 14px}
.c-made{color:var(--made)}
.c-maint{color:var(--maint)}
.c-lost{color:var(--lost)}

/* --- wide --- */
@media (min-width:700px){
  .nav-toggle{display:none}
  .nav-items{display:flex;position:static;flex-direction:row;background:none;border:0;padding:0;gap:2px}
  .tab{text-align:center}
  body{padding:0 20px 48px}
  .card{padding:20px 22px}
  h1{font-size:17px}
  .seg button{flex:0 0 auto}
  .tl-controls{flex:0 0 auto;order:0;margin-left:auto;flex-wrap:nowrap}
  .tl-controls .seg{flex:0 0 auto}
  #tl-period{flex:0 0 auto}
  .seg button{flex:0 0 auto;font-size:13px;padding:0 12px}
  .mets{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
  .met-v{font-size:22px}
  #tl-canvas{height:280px}
  .lane{height:28px}
  .ol-filters input{flex:1 1 260px}
  .ol-filters select{flex:0 0 auto}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* --- market tab ---
   Structure mirrors the Dashboard: strip, .mets-block, .plot, .key. Only the
   fuel palette and the two market-specific pieces (mix bar, tooltip) live
   here; everything else reuses the dashboard's own classes so the two tabs
   stay in sync by construction rather than by duplicated rules.

   The palette is its own scale rather than reusing --made/--lost, which carry
   a "good/bad" reading that oil shale versus wind should not inherit. */
#panel-market{
  --mk-other:#7f8c8d;
  --mk-bio:#8e44ad;
  --mk-shale:#c0392b;
  --mk-auvere:#FF007F;
  --mk-wind:#3498db;
  --mk-solar:#f1c40f;
  --mk-battery:#4a69bd;
  --mk-net:#2ecc71;
  --mk-net-fi:#1abc9c;
  --mk-net-lv:#d35400;
  --mk-price:#ffffff;
  --mk-grid:#242424;
  --mk-zero:#3f4a4e;
  --mk-day:#202020;
}

#mk-chart{display:block;width:100%;overflow:visible}
.mk-axis text{fill:var(--faint);font:11px var(--mono)}

.mk-legend-item{cursor:pointer;user-select:none;transition:opacity .12s}
.mk-legend-item.mk-dim{opacity:.32}

/* Current mix as proportions of consumption — the chart's latest column read
   sideways. Sits in the strip so the headline share has its composition
   directly under it instead of in a separate block. */
.mk-mixbar{display:flex;height:20px;border-radius:5px;overflow:hidden;margin-top:10px;background:#2c2c2c}
.mk-mixbar i{
  display:flex;align-items:center;justify-content:center;height:100%;overflow:hidden;
  font:500 10px var(--mono);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.65);white-space:nowrap;
}

.mk-tip{
  position:fixed;pointer-events:none;z-index:40;background:#0d0d0d;
  border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;
  font-size:12px;min-width:215px;opacity:0;transition:opacity .1s;
  box-shadow:0 8px 22px rgba(0,0,0,.6);
}
.mk-th{font-size:12.5px;color:var(--ink);margin-bottom:8px;font-weight:600}
.mk-row{display:flex;justify-content:space-between;gap:14px;color:var(--dim);padding:1.5px 0}
.mk-row span{display:flex;align-items:center;gap:6px}
.mk-row span i{width:8px;height:8px;border-radius:2px;display:block;flex:none}
.mk-row b{color:var(--ink);font-weight:400;font-family:var(--mono)}
.mk-sep{border-top:1px solid var(--line-soft);margin:7px 0}

/* The hatch and price-line keys need swatches that match what's drawn, not a
   flat colour chip that misrepresents them. */
.key i.mk-hatchkey{
  display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px;
  background:repeating-linear-gradient(45deg,var(--mk-shale) 0 2px,transparent 2px 4px),
    rgba(192,57,43,.35);
}
.key i.mk-linekey{
  display:inline-block;width:10px;height:0;border-top:2px solid var(--mk-price);
  margin-right:6px;vertical-align:3px;
}
.key i.mk-sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}

@media (max-width:560px){ .mk-tip{display:none} }