/* css/18-sector.css — sector view.
   Split from the index.html <style> block (REFACTOR-PLAN Phase 2). Load order = cascade order; do not reorder. */
/* ---------- sector view ---------- */
#view-sector{grid-column:1 / -1}
/* Sector, landscape: a full-width KPI strip over two columns — the map hero
   (the ONE shared stage, showing through a transparent slot) and one tabbed
   card carrying the breakdown. No second MapLibre instance exists. */
.sector{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);
  grid-template-rows:84px minmax(0,1fr);gap:12px;min-height:0;margin-bottom:8px}
.sector>.skpistrip{grid-column:1 / -1;grid-row:1}
/* note D: the street-breakdown panel is gone — the map hero takes both columns */
.sector>.secmap{grid-column:1 / -1;grid-row:2}
.sector>.sbreak{grid-column:2;grid-row:2}
/* main is pointer-events:none (the stage lives under it), so the panels that
   are actually interactive on this screen opt back in */
.sector>.panel{pointer-events:auto}
/* A window onto the stage: only its own furniture takes pointer events, and
   the huge spread shadow is the spotlight — it paints the basemap OUT
   everywhere except inside this card, so the map reads as the card's content
   rather than as wallpaper leaking behind the columns. */
.secmap{position:relative;pointer-events:none;border-radius:var(--r);
  border:1px solid var(--hair);overflow:hidden;
  box-shadow:0 0 0 100vmax rgba(7,10,11,.82)}
/* ...which means the tiles that come BEFORE it in the DOM need their own layer */
.sector>.skpistrip{position:relative;z-index:2}
.sm-chip{position:absolute;top:12px;inset-inline-start:12px;pointer-events:auto;
  background:var(--glass-solid);border:1px solid var(--hair);border-radius:999px;
  padding:7px 14px;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.sm-chip b{font-size:var(--fz-body);font-weight:600;letter-spacing:-.01em}
.sm-legend{position:absolute;bottom:12px;inset-inline-start:12px;pointer-events:auto;
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:var(--fz-body);color:var(--tx2);
  background:var(--glass-solid);border:1px solid var(--hair);border-radius:14px;padding:8px 12px;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.sm-legend i{display:inline-block;width:14px;height:4px;border-radius:2px;margin-inline-end:6px;vertical-align:middle}
/* KPI strip — four tiles in one 84 px row, hairline-separated */
.skpistrip{padding:0}
.kpis{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--hair);padding:0}
.kpi{background:var(--glass);padding:10px 16px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.kpi .lbl{font-size:var(--fz-cap);letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .val{font-size:var(--fz-hero);font-weight:750;letter-spacing:-.035em;line-height:1.08;margin-top:2px}
.kpi .val small{font-size:var(--fz-body);color:var(--tx3);font-weight:600;margin-inline-start:3px;letter-spacing:0}
.kpi .delta{font-size:var(--fz-body);margin-top:2px;font-weight:600;color:var(--tx2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up{color:var(--acc)}.down{color:var(--crit)}.flat{color:var(--tx2)}
/* the segmented control at the top of the breakdown card */
.sseg{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 12px 10px}
.sseg button{height:44px;border-radius:12px;background:rgba(255,255,255,.045);
  border:1px solid var(--hair);color:var(--tx2);font-size:var(--fz-body);font-weight:700;letter-spacing:.01em}
.sseg button.on{background:rgba(34,200,130,.14);border-color:rgba(34,200,130,.42);color:var(--tx)}
.streets{padding:0 12px 12px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;min-height:0;scrollbar-width:none}
.streets::-webkit-scrollbar{display:none}
.streets[hidden],.classes[hidden]{display:none!important}
.srow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;align-items:center;
  width:100%;text-align:start;background:none;border:1px solid transparent;border-radius:12px;
  padding:9px 10px;color:inherit;font:inherit;
  transition:background .16s var(--ease),border-color .16s var(--ease)}
.srow b{font-size:var(--fz-md);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .v{font-size:var(--fz-md);font-weight:700;font-family:var(--mono)}
.srow .track{grid-column:1/-1;height:6px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.srow .fill{height:100%;width:100%;border-radius:999px;transform-origin:left;transition:transform .3s var(--ease)}
.srow .sub{grid-column:1/-1;font-size:var(--fz-body);color:var(--tx3);font-weight:600}
.srow.act{background:rgba(34,200,130,.12);border-color:rgba(34,200,130,.4)}
.classes{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:0;scrollbar-width:none}
.classes::-webkit-scrollbar{display:none}
.crow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);background:rgba(255,255,255,.045);border:1px solid var(--hair)}
.crow svg{width:22px;height:22px;stroke:var(--tx3);flex:0 0 auto}
.crow .nm{flex:1;min-width:0}
.crow b{display:block;font-size:var(--fz-body);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .vd{font-size:var(--fz-meta);color:var(--tx3);font-weight:600}
.crow .n{font-size:var(--fz-md);font-weight:700;font-family:var(--mono);flex:0 0 auto}
.crow .bar{width:64px;height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;flex:0 0 auto}
.crow .bar i{display:block;height:100%;background:var(--acc)}
.sbreak .empty{margin:auto;text-align:center;color:var(--tx2);font-size:var(--fz-md);padding:18px}

/* Start screen Tasks tab (inspector task planning) */
.tasks{display:flex;flex-direction:column;gap:8px;margin:6px 0 2px}
.tasks .ptitle{font-size:var(--fz-cap);color:var(--tx2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.task{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}
.task.on{background:rgba(34,200,130,.10);border-color:rgba(34,200,130,.35)}
.task .tno{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:12px;background:rgba(255,255,255,.08)}
.task.on .tno{background:var(--acc);color:#06231A}
.task b{display:block;font-size:var(--fz-body);font-weight:700;letter-spacing:-.01em}
.task small{display:block;color:var(--tx2);font-size:var(--fz-cap);margin-top:1px}
.task>div{flex:1;min-width:0}
.task .tchip{flex:none;font-size:var(--fz-cap);color:var(--tx2);padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.06)}
.task .tchip.now{background:var(--acc);color:#06231A;font-weight:700}

/* pass 23: the dormant Sector screen gets the same opaque surface as every
   other non-Drive module, so re-wiring it cannot bring the basemap back. */
.sector{background:var(--bg)}