/* ============================================================================
   MASAR — panels.css (T4)
   Owns: #panel-root contents, #modal-root, the scenario banner.
   Tokens come from web/css/base.css (T2). Every token is read through a local
   alias with the PLAN §C5 value as fallback, so the panels look correct before
   base.css lands and defer to it the moment it does.
   All box/flow properties are logical → dir="rtl" flips with no overrides.
   ========================================================================== */

:root {
  --p-bg: var(--bg, #05080f);
  --p-panel: var(--panel, rgba(10, 16, 28, .82));
  --p-accent: var(--accent, #22d3ee);
  --p-accent2: var(--accent-2, #7c8cff);
  --p-good: var(--good, #34d399);
  --p-warn: var(--warn, #fbbf24);
  --p-bad: var(--bad, #fb4d5d);
  --p-text: var(--text, #e6edf7);
  --p-muted: var(--muted, #8b98ad);
  --p-radius: var(--radius, 14px);

  /* AA-safe text tints of the status colours on the dark surface */
  --p-good-t: #6ee7b7;
  --p-warn-t: #fcd34d;
  --p-bad-t: #ff97a0;
  --p-accent-t: #67e8f9;

  --p-line: rgba(255, 255, 255, .08);
  --p-line-2: rgba(255, 255, 255, .13);
  --p-surface: rgba(255, 255, 255, .028);
  --p-surface-2: rgba(255, 255, 255, .055);
  --p-shadow: 0 18px 44px rgba(0, 0, 0, .42);
  --p-font: var(--font-text, var(--font-ui, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif));
  --p-display: var(--font-display, "Space Grotesk", "Inter", system-ui, sans-serif);
  --p-num: "Space Grotesk", "Inter", system-ui, sans-serif;
  --p-ease: cubic-bezier(.22, .61, .36, 1);
}

:root[dir="rtl"] {
  --p-font: var(--font-ar, var(--font-ui, "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif));
  --p-display: var(--font-display, "IBM Plex Sans Arabic", "Space Grotesk", sans-serif);
}

/* --------------------------------------------------------------- containers */
#panel-root { min-block-size: 0; }

/**
 * The shell's #panel-root is a transparent, pointer-events:none shelf floating over the
 * 3D map (map.css), so the readable surface is ours to provide. Without it, panel text
 * sits directly on moving road geometry — unreadable, and nowhere near AA contrast.
 * Built from the shell's own surface tokens so it matches the HUD and the rail exactly.
 */
.p-panel {
  block-size: 100%;
  max-block-size: 100%;
  overflow: hidden auto;
  overscroll-behavior: contain;
  /* Panels size their own grids off their real width, not the viewport's. */
  container-type: inline-size;
  padding: 18px 18px 34px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: var(--panel, rgba(10, 16, 28, .82));
  backdrop-filter: var(--blur, blur(14px));
  -webkit-backdrop-filter: var(--blur, blur(14px));
  border: var(--panel-border, 1px solid var(--p-line-2));
  border-radius: var(--p-radius);
  box-shadow: var(--shadow, var(--p-shadow));
  font-family: var(--p-font);
  color: var(--p-text);
  font-size: 13px;
  line-height: 1.55;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.p-panel::-webkit-scrollbar { inline-size: 9px; }
.p-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 99px; }
.p-panel::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .24); }
.p-panel::-webkit-scrollbar-track { background: transparent; }

.p-boot { justify-content: center; }

/* --------------------------------------------------------------- typography */
.p-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.p-head-main { min-inline-size: 0; }
.p-title {
  margin: 0;
  font-family: var(--p-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.p-sub { margin: 5px 0 0; color: var(--p-muted); font-size: 12px; }
.p-head-actions { display: flex; gap: 7px; flex: 0 0 auto; }

.p-sectionhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-block-start: 6px;
  padding-block-end: 6px;
  border-block-end: 1px solid var(--p-line);
}
.p-sectiontitle {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--p-muted);
}
:root[dir="rtl"] .p-sectiontitle { letter-spacing: 0; font-size: 11.5px; }
.p-hint, .m-hint { margin: 4px 0 0; color: var(--p-muted); font-size: 11px; line-height: 1.5; }
.m-note { margin: 0; font-size: 12px; color: var(--p-muted); }
.p-footnote { margin-block-start: 8px; padding-block-start: 12px; border-block-start: 1px solid var(--p-line); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.p-footnote p { display: flex; gap: 7px; margin: 0; color: var(--p-muted); font-size: 11px; }
.p-footnote svg { flex: 0 0 auto; margin-block-start: 2px; }

.tone-good { color: var(--p-good-t); }
.tone-warn { color: var(--p-warn-t); }
.tone-bad { color: var(--p-bad-t); }
.tone-accent { color: var(--p-accent-t); }

.m-warnline {
  display: flex; gap: 8px; align-items: flex-start; margin: 0;
  padding: 9px 11px; border-radius: 10px; font-size: 11.5px;
  background: rgba(251, 191, 36, .09); border: 1px solid rgba(251, 191, 36, .26); color: var(--p-warn-t);
}
.m-warnline svg { flex: 0 0 auto; margin-block-start: 1px; }
.m-inline { display: flex; align-items: center; gap: 6px; }

/* -------------------------------------------------------------------- cards */
.m-card {
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.m-card.tone-good { border-color: rgba(52, 211, 153, .28); background: rgba(52, 211, 153, .05); }
.m-card.tone-bad { border-color: rgba(251, 77, 93, .26); background: rgba(251, 77, 93, .045); }
.m-cardhead { display: flex; gap: 10px; align-items: flex-start; }
.m-cardicon {
  flex: 0 0 auto; inline-size: 28px; block-size: 28px; border-radius: 9px;
  display: grid; place-items: center; color: var(--p-accent);
  background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .2);
}
.m-cardhead-text { min-inline-size: 0; }
.m-cardtitle { margin: 0; font-size: 13.5px; font-weight: 600; font-family: var(--p-display); }
.m-cardsub { margin: 3px 0 0; font-size: 11.5px; color: var(--p-muted); line-height: 1.5; }
.m-cardbody { display: flex; flex-direction: column; gap: 11px; min-inline-size: 0; }
.m-cardbody:empty { display: none; }

.m-takeaway {
  margin: 0;
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: 11px;
  background: linear-gradient(100deg, rgba(34, 211, 238, .1), rgba(124, 140, 255, .06));
  border: 1px solid rgba(34, 211, 238, .2);
  font-size: 12.5px;
  line-height: 1.6;
}
.m-takeaway-label {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--p-accent);
  font-family: var(--p-display);
}
:root[dir="rtl"] .m-takeaway-label { letter-spacing: 0; font-size: 11px; }

/* ------------------------------------------------------------------- badges */
.m-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 99px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  border: 1px solid var(--p-line-2); color: var(--p-muted); background: var(--p-surface-2);
  white-space: nowrap;
}
.m-badge.tone-good { color: var(--p-good-t); border-color: rgba(52, 211, 153, .32); background: rgba(52, 211, 153, .1); }
.m-badge.tone-warn { color: var(--p-warn-t); border-color: rgba(251, 191, 36, .32); background: rgba(251, 191, 36, .1); }
.m-badge.tone-bad { color: var(--p-bad-t); border-color: rgba(251, 77, 93, .34); background: rgba(251, 77, 93, .1); }
.m-badge.tone-info, .m-badge.tone-accent { color: var(--p-accent-t); border-color: rgba(34, 211, 238, .32); background: rgba(34, 211, 238, .1); }

/* ---------------------------------------------------------------- KPI tiles */
/* Two up by default — a 470 px panel cannot hold four readable KPI labels.
   Four up only once the panel is genuinely wide. */
.p-kpigrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.p-kpigrid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (min-width: 600px) {
  .p-kpigrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-kpigrid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-kpigrid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.m-kpi {
  background: var(--p-panel);
  border: 1px solid var(--p-line);
  border-radius: 11px;
  padding: 9px 10px;
  min-inline-size: 0;
  position: relative;
  overflow: hidden;
}
.m-kpi::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .5), transparent);
  opacity: .7;
}
.m-kpi.tone-bad::after { background: linear-gradient(90deg, transparent, rgba(251, 77, 93, .6), transparent); }
.m-kpi.tone-warn::after { background: linear-gradient(90deg, transparent, rgba(251, 191, 36, .6), transparent); }
.m-kpi.tone-good::after { background: linear-gradient(90deg, transparent, rgba(52, 211, 153, .6), transparent); }
.m-kpi-label {
  display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--p-muted); margin-block-end: 3px;
  /* Wrap rather than truncate: a clipped KPI label is unreadable, not compact. */
  line-height: 1.3; min-block-size: 2.6em; text-wrap: balance;
}
:root[dir="rtl"] .m-kpi-label { letter-spacing: 0; font-size: 10.5px; }
.m-kpi-valuerow { display: flex; align-items: baseline; gap: 4px; min-inline-size: 0; flex-wrap: wrap; }
.m-kpi-value { font-family: var(--p-num); font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.m-kpi-unit { font-size: 10px; color: var(--p-muted); }
.m-kpi-delta { display: inline-flex; align-items: center; gap: 2px; margin-block-start: 3px; font-family: var(--p-num); font-size: 11px; font-weight: 600; }
.m-kpi-delta.is-good { color: var(--p-good-t); }
.m-kpi-delta.is-bad { color: var(--p-bad-t); }
.m-kpi-delta.is-flat { color: var(--p-muted); }

.m-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 11.5px; }
.m-stat-label { color: var(--p-muted); }
.m-stat-value { font-family: var(--p-num); font-weight: 600; }

.m-bigmetric { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.m-bigmetric-value {
  font-family: var(--p-num); font-size: 38px; font-weight: 600; line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(180deg, var(--p-text), var(--p-accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.m-bigmetric-label { font-size: 11.5px; color: var(--p-muted); max-inline-size: 190px; line-height: 1.4; }
.m-metricmeta { display: flex; flex-direction: column; gap: 4px; padding-block: 4px; border-block: 1px solid var(--p-line); }

/* -------------------------------------------------------------------- meter */
.m-meter { position: relative; block-size: 5px; border-radius: 99px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.m-meter-fill { display: block; block-size: 100%; border-radius: 99px; background: var(--p-accent); transition: inline-size .5s var(--p-ease); }
.m-meter-fill.tone-warn { background: var(--p-warn); }
.m-meter-fill.tone-bad { background: var(--p-bad); }
.m-meter-fill.tone-good { background: var(--p-good); }

.m-voc { display: flex; align-items: center; gap: 8px; }
.m-voc-track { position: relative; flex: 1; block-size: 6px; border-radius: 99px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.m-voc-fill { display: block; block-size: 100%; border-radius: 99px; background: var(--p-accent); transition: inline-size .5s var(--p-ease); }
.m-voc-fill.tone-warn { background: linear-gradient(90deg, var(--p-warn), #f59e0b); }
.m-voc-fill.tone-bad { background: linear-gradient(90deg, var(--p-warn), var(--p-bad)); }
.m-voc-fill.tone-good { background: var(--p-good); }
.m-voc-tick { position: absolute; inset-block: -2px; inline-size: 1px; background: rgba(255, 255, 255, .55); }
.m-voc-value { font-family: var(--p-num); font-size: 12px; font-weight: 600; min-inline-size: 34px; text-align: end; }

.m-spark { inline-size: 100%; block-size: 22px; display: block; overflow: visible; }
.m-spark-area { fill: rgba(34, 211, 238, .18); }
.m-spark-line { fill: none; stroke: var(--p-accent); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.m-spark-dot { fill: var(--p-bad); stroke: #05080f; stroke-width: 1; }
.m-spark.tone-warn .m-spark-line { stroke: var(--p-warn); }
.m-spark.tone-warn .m-spark-area { fill: rgba(251, 191, 36, .16); }

/* ------------------------------------------------------------------- states */
.m-state {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 18px; text-align: center;
  border: 1px dashed var(--p-line-2); border-radius: var(--p-radius); background: var(--p-surface);
}
.m-state-icon { color: var(--p-muted); }
.m-state.is-error { border-color: rgba(251, 77, 93, .3); background: rgba(251, 77, 93, .05); }
.m-state.is-error .m-state-icon { color: var(--p-bad-t); }
.m-state.is-loading { border-style: solid; }
.m-state-title { margin: 0; font-size: 13.5px; font-weight: 600; font-family: var(--p-display); }
.m-state-body { margin: 0; font-size: 12px; color: var(--p-muted); max-inline-size: 42ch; line-height: 1.6; }
.m-state-hint { margin: 0; font-size: 11px; color: var(--p-muted); max-inline-size: 46ch; }
.m-state-detail { margin-block-start: 2px; inline-size: 100%; font-size: 11px; color: var(--p-muted); }
.m-state-detail summary { cursor: pointer; }
.m-state-detail pre {
  margin: 7px 0 0; padding: 9px; border-radius: 9px; background: rgba(0, 0, 0, .34);
  border: 1px solid var(--p-line); text-align: start; overflow-x: auto;
  font-size: 10.5px; direction: ltr; white-space: pre-wrap; word-break: break-word;
}
.m-spin { display: inline-grid; place-items: center; color: var(--p-accent); animation: m-spin 1.1s linear infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }

.m-skeletons { display: flex; flex-direction: column; gap: 8px; }
.m-skeleton {
  block-size: 46px; border-radius: 11px;
  background: linear-gradient(100deg, var(--p-surface) 20%, var(--p-surface-2) 40%, var(--p-surface) 60%);
  background-size: 280% 100%; animation: m-shimmer 1.5s linear infinite;
}
@keyframes m-shimmer { to { background-position-x: -180%; } }

/* ----------------------------------------------------------------- controls */
.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 13px; border-radius: 10px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  border: 1px solid var(--p-line-2); background: var(--p-surface-2); color: var(--p-text);
  cursor: pointer; transition: background .18s, border-color .18s, transform .12s, color .18s;
  white-space: nowrap;
}
.m-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2); }
.m-btn:active:not(:disabled) { transform: translateY(1px); }
.m-btn:disabled { opacity: .45; cursor: not-allowed; }
.m-btn.is-accent {
  background: linear-gradient(180deg, rgba(34, 211, 238, .22), rgba(34, 211, 238, .1));
  border-color: rgba(34, 211, 238, .45); color: #d8fbff;
}
.m-btn.is-accent:hover:not(:disabled) { background: linear-gradient(180deg, rgba(34, 211, 238, .3), rgba(34, 211, 238, .14)); border-color: rgba(34, 211, 238, .62); }
.m-btn.is-ghost { background: transparent; }
.m-btn.is-quiet { background: transparent; border-color: transparent; color: var(--p-muted); padding-inline: 8px; }
.m-btn.is-quiet:hover { color: var(--p-text); background: var(--p-surface-2); }
.m-btn.is-run { padding: 11px 18px; font-size: 13px; }

.m-iconbtn {
  display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px;
  border-radius: 9px; border: 1px solid transparent; background: transparent;
  color: var(--p-muted); cursor: pointer; transition: color .18s, background .18s, border-color .18s;
}
.m-iconbtn:hover { color: var(--p-text); background: var(--p-surface-2); border-color: var(--p-line); }

.m-infodot {
  inline-size: 18px; block-size: 18px; border-radius: 99px; padding: 0;
  display: inline-grid; place-items: center; cursor: help;
  border: 1px solid var(--p-line-2); background: transparent; color: var(--p-muted);
}
.m-infodot:hover { color: var(--p-accent); border-color: rgba(34, 211, 238, .4); }

/* focus-visible: one consistent ring everywhere */
.p-panel :focus-visible,
.m-overlay :focus-visible,
#report-root :focus-visible {
  outline: 2px solid var(--p-accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* segmented control (real radios) */
.m-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: rgba(0, 0, 0, .3); border: 1px solid var(--p-line); flex-wrap: wrap; }
.m-seg input { position: absolute; opacity: 0; pointer-events: none; }
.m-seg-label {
  padding: 5px 11px; border-radius: 8px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: var(--p-muted);
  font-family: var(--p-num); transition: background .16s, color .16s;
  user-select: none;
}
.m-seg-label:hover { color: var(--p-text); }
.m-seg input:checked + .m-seg-label { background: rgba(34, 211, 238, .16); color: var(--p-accent-t); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .34); }
.m-seg input:focus-visible + .m-seg-label { outline: 2px solid var(--p-accent); outline-offset: 1px; }

/* range */
.m-range-wrap { display: flex; flex-direction: column; gap: 5px; }
.m-range-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.m-range-label { font-size: 11px; color: var(--p-muted); }
.m-range-value { font-family: var(--p-num); font-size: 12.5px; font-weight: 600; color: var(--p-accent-t); }
.m-range { inline-size: 100%; accent-color: var(--p-accent); block-size: 18px; cursor: pointer; }

/* fields */
.m-field { display: flex; flex-direction: column; gap: 5px; }
.m-label { font-size: 11px; color: var(--p-muted); }
.m-input, .m-select, .m-textarea {
  inline-size: 100%; padding: 9px 11px; border-radius: 10px;
  background: rgba(0, 0, 0, .32); border: 1px solid var(--p-line-2);
  color: var(--p-text); font-family: inherit; font-size: 12.5px;
}
.m-input::placeholder, .m-textarea::placeholder { color: rgba(139, 152, 173, .7); }
.m-input:focus, .m-select:focus, .m-textarea:focus { border-color: rgba(34, 211, 238, .5); outline: none; }
.m-textarea { resize: vertical; min-block-size: 62px; line-height: 1.55; }
.m-selectwrap { position: relative; display: flex; align-items: center; }
.m-selectwrap svg { position: absolute; inset-inline-end: 9px; pointer-events: none; color: var(--p-muted); }
.m-select { appearance: none; padding-inline-end: 30px; }
.m-select option { background: #0a1020; color: var(--p-text); }

/* checkbox rows */
.m-checkrow { display: flex; gap: 9px; align-items: flex-start; }
.m-check { margin: 2px 0 0; inline-size: 15px; block-size: 15px; accent-color: var(--p-accent); flex: 0 0 auto; cursor: pointer; }
.m-checklabel { display: flex; flex-direction: column; gap: 1px; cursor: pointer; min-inline-size: 0; }
.m-checktitle { font-size: 12.5px; font-weight: 600; }
.m-checksub { font-size: 10.5px; color: var(--p-muted); font-family: var(--p-num); }

/* progress */
.m-progress-wrap { flex: 1; display: flex; flex-direction: column; gap: 5px; min-inline-size: 0; }
.m-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.m-progress-label { font-size: 11.5px; font-weight: 600; }
.m-progress-pct { font-family: var(--p-num); font-size: 11.5px; color: var(--p-accent-t); }
.m-progress { block-size: 6px; border-radius: 99px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.m-progress-fill {
  display: block; block-size: 100%; inline-size: 0;
  background: linear-gradient(90deg, var(--p-accent2), var(--p-accent));
  transition: inline-size .22s linear;
}

/* ------------------------------------------------------------------- tables */
.m-tablewrap { overflow-x: auto; border: 1px solid var(--p-line); border-radius: 11px; background: var(--p-surface); }
.m-tablewrap.is-compact { border: none; background: transparent; }
.m-table { inline-size: 100%; border-collapse: collapse; font-size: 11.5px; }
.m-table caption { caption-side: top; padding: 8px 10px; text-align: start; color: var(--p-muted); font-size: 11px; }
.m-table th {
  text-align: start; padding: 8px 10px; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--p-muted); font-weight: 600; border-block-end: 1px solid var(--p-line-2); white-space: nowrap;
}
:root[dir="rtl"] .m-table th { letter-spacing: 0; font-size: 10.5px; }
.m-table td { padding: 8px 10px; border-block-end: 1px solid rgba(255, 255, 255, .05); vertical-align: middle; }
.m-table tbody tr:last-child td { border-block-end: none; }
.m-table .align-end { text-align: end; font-family: var(--p-num); }
.m-table tbody tr.is-clickable { cursor: pointer; }
.m-table tbody tr.is-clickable:hover { background: rgba(34, 211, 238, .07); }
.m-table.is-mini { font-size: 11px; }
.m-table.is-mini td, .m-table.is-mini th { padding: 6px 8px; }

/* ------------------------------------------------------------------- charts */
.m-figure { margin: 0; display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.m-figcap { display: flex; flex-direction: column; gap: 2px; }
.m-figtitle { font-size: 12.5px; font-weight: 600; font-family: var(--p-display); }
.m-figsub { font-size: 11px; color: var(--p-muted); line-height: 1.45; }
.m-chart { inline-size: 100%; min-inline-size: 0; }
.m-chart-fallback {
  padding: 18px; border-radius: 11px; border: 1px dashed var(--p-line-2);
  text-align: center; color: var(--p-muted); font-size: 11.5px;
}
.m-chart-fallback strong { display: block; color: var(--p-text); font-size: 12.5px; margin-block-end: 4px; }
.m-chart-fallback p { margin: 0; }
.m-legendrow { display: flex; flex-direction: column; gap: 4px; padding-block-start: 8px; border-block-start: 1px solid var(--p-line); }
.m-chip {
  align-self: flex-start; padding: 3px 9px; border-radius: 99px; font-size: 10.5px;
  background: var(--p-surface-2); border: 1px solid var(--p-line); color: var(--p-muted);
  font-family: var(--p-num);
}

/* ----------------------------------------------------------------- insights */
.m-insights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.m-insight {
  display: flex; gap: 10px; padding: 11px 12px;
  border-radius: 12px; border: 1px solid var(--p-line); background: var(--p-surface);
  border-inline-start: 2px solid var(--p-muted);
}
.m-insight.tone-bad { border-inline-start-color: var(--p-bad); background: rgba(251, 77, 93, .05); }
.m-insight.tone-warn { border-inline-start-color: var(--p-warn); background: rgba(251, 191, 36, .045); }
.m-insight.tone-info { border-inline-start-color: var(--p-accent); }
.m-insight-icon { flex: 0 0 auto; color: var(--p-muted); margin-block-start: 1px; }
.m-insight.tone-bad .m-insight-icon { color: var(--p-bad-t); }
.m-insight.tone-warn .m-insight-icon { color: var(--p-warn-t); }
.m-insight.tone-info .m-insight-icon { color: var(--p-accent-t); }
.m-insight-text { min-inline-size: 0; display: flex; flex-direction: column; gap: 3px; }
.m-insight-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.m-insight-title { margin: 0; font-size: 12.5px; font-weight: 600; }
.m-insight-body { margin: 0; font-size: 11.5px; color: var(--p-muted); line-height: 1.6; }
.m-insight-src { margin: 2px 0 0; font-size: 10px; color: rgba(139, 152, 173, .8); font-family: var(--p-num); }
.m-insights.is-compact .m-insight { padding: 9px 10px; }

/* ---------------------------------------------------------------- corridors */
.m-corridors, .m-bnlist, .m-gaps, .m-alts, .m-savedlist, .m-zonelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }

.m-corridor-btn, .m-bn-btn, .m-gap-btn, .m-alt-btn {
  inline-size: 100%; display: flex; align-items: center; gap: 11px; text-align: start;
  padding: 10px 11px; border-radius: 12px; cursor: pointer;
  background: var(--p-surface); border: 1px solid var(--p-line); color: inherit;
  font-family: inherit; transition: background .16s, border-color .16s, transform .16s;
}
.m-corridor-btn:hover, .m-bn-btn:hover, .m-gap-btn:hover, .m-alt-btn:hover {
  background: rgba(34, 211, 238, .07); border-color: rgba(34, 211, 238, .32);
}
.m-corridor-btn:hover .m-corridor-go, .m-bn-btn:hover .m-bn-go { color: var(--p-accent); transform: translateX(2px); }
:root[dir="rtl"] .m-corridor-go, :root[dir="rtl"] .m-bn-go { transform: scaleX(-1); }
:root[dir="rtl"] .m-corridor-btn:hover .m-corridor-go, :root[dir="rtl"] .m-bn-btn:hover .m-bn-go { transform: scaleX(-1) translateX(2px); }

.m-corridor-rank, .m-bn-rank, .m-gap-rank, .m-chiptoggle-rank {
  flex: 0 0 auto; inline-size: 22px; block-size: 22px; border-radius: 7px;
  display: grid; place-items: center; font-family: var(--p-num); font-size: 11px; font-weight: 600;
  background: var(--p-surface-2); border: 1px solid var(--p-line-2); color: var(--p-muted);
}
.m-corridor-main, .m-bn-main, .m-gap-main, .m-alt-main { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 3px; }
.m-corridor-name, .m-bn-name, .m-gap-name, .m-alt-label {
  font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-corridor-meta, .m-alt-meta { font-size: 11px; color: var(--p-muted); font-family: var(--p-num); }
.m-corridor-share { font-family: var(--p-num); font-size: 13px; font-weight: 600; }
.m-corridor-go, .m-bn-go { flex: 0 0 auto; color: var(--p-muted); transition: color .16s, transform .16s; }

.m-bn-metaline { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--p-muted); }
.m-bn-metaline b { font-family: var(--p-num); color: var(--p-text); font-weight: 600; }
.m-dot { opacity: .5; }
.m-bn-figs { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; text-align: end; }
.m-bn-fig b { display: block; font-family: var(--p-num); font-size: 12.5px; font-weight: 600; }
.m-bn-fig i { display: block; font-size: 9.5px; color: var(--p-muted); font-style: normal; }
.p-back { margin-block-end: -6px; }

/* ------------------------------------------------------------------- causes */
.m-causes { display: flex; flex-direction: column; gap: 9px; }
.m-cause { padding: 10px 11px; border-radius: 11px; background: var(--p-surface); border: 1px solid var(--p-line); display: flex; flex-direction: column; gap: 6px; }
.m-cause-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.m-cause-name { font-size: 12px; font-weight: 600; }
.m-cause-weight { font-family: var(--p-num); font-size: 11.5px; color: var(--p-muted); }
.m-cause-evidence { margin: 0; font-size: 11.5px; color: var(--p-muted); line-height: 1.6; }

.m-zonerow { display: grid; grid-template-columns: minmax(0, 1fr) 76px auto; align-items: center; gap: 10px; }
.m-zonerow-name { display: flex; align-items: center; gap: 7px; min-inline-size: 0; font-size: 12px; }
.m-zonerow-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.m-zonerow-value { font-family: var(--p-num); font-size: 11.5px; color: var(--p-muted); text-align: end; }

.m-gap-bar { display: flex; align-items: center; gap: 8px; }
.m-gap-bar .m-meter { flex: 1; }
.m-gap-pct { font-family: var(--p-num); font-size: 11.5px; font-weight: 600; color: var(--p-warn-t); }
.m-gap-times { font-family: var(--p-num); font-size: 11px; color: var(--p-muted); }
.m-gap-evidence { margin: 3px 0 0; font-size: 11px; color: var(--p-muted); line-height: 1.55; }

/* ---------------------------------------------------------- recommendations */
.m-recs { display: flex; flex-direction: column; gap: 9px; }
.m-rec {
  padding: 12px; border-radius: 12px; display: flex; flex-direction: column; gap: 9px;
  background: linear-gradient(160deg, rgba(124, 140, 255, .07), var(--p-surface));
  border: 1px solid var(--p-line);
}
.m-rec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 11px; }
.m-rec-title { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.m-rec-impact { flex: 0 0 auto; text-align: end; }
.m-rec-impact b { display: block; font-family: var(--p-num); font-size: 18px; font-weight: 600; color: var(--p-accent-t); line-height: 1; }
.m-rec-impact i { display: block; font-size: 9px; font-style: normal; color: var(--p-muted); letter-spacing: .06em; text-transform: uppercase; }
:root[dir="rtl"] .m-rec-impact i { letter-spacing: 0; font-size: 10px; }
.m-rec-rationale { margin: 0; font-size: 11.5px; color: var(--p-muted); line-height: 1.6; }
.m-rec-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.m-rec-foot { display: flex; gap: 7px; }

.m-provenance { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-block-start: 4px; }
.m-provenance .m-hint { direction: ltr; text-align: start; font-family: var(--p-num); font-size: 10px; }
:root[dir="rtl"] .m-provenance .m-hint { text-align: end; }

/* --------------------------------------------------------------- levers */
.m-presets { display: flex; gap: 7px; flex-wrap: wrap; }
.m-levers { display: flex; flex-direction: column; gap: 9px; }
.m-lever {
  border: 1px solid var(--p-line); border-radius: 12px; background: var(--p-surface);
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.m-lever.is-focused {
  border-color: rgba(34, 211, 238, .6);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .14);
  background: rgba(34, 211, 238, .05);
}
.m-lever-head { display: flex; gap: 9px; align-items: flex-start; }
.m-lever-icon { flex: 0 0 auto; color: var(--p-accent); margin-block-start: 1px; }
.m-lever-headtext { flex: 1; min-inline-size: 0; }
.m-lever-title { margin: 0; font-size: 12.5px; font-weight: 600; }
.m-lever-sub { margin: 2px 0 0; font-size: 11px; color: var(--p-muted); line-height: 1.5; }
.m-lever-summary {
  flex: 0 0 auto; font-family: var(--p-num); font-size: 11px; font-weight: 600;
  color: var(--p-accent-t); padding: 2px 8px; border-radius: 99px;
  background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .26);
}
.m-lever-body { display: flex; flex-direction: column; gap: 10px; }

.m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.m-chiptoggle {
  display: inline-flex; align-items: center; gap: 6px; max-inline-size: 100%;
  padding: 5px 10px 5px 6px; border-radius: 99px; cursor: pointer;
  background: var(--p-surface-2); border: 1px solid var(--p-line-2); color: var(--p-muted);
  font-family: inherit; font-size: 11px; transition: background .16s, color .16s, border-color .16s;
}
.m-chiptoggle > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 170px; }
.m-chiptoggle:hover { color: var(--p-text); }
.m-chiptoggle.is-on { background: rgba(34, 211, 238, .14); border-color: rgba(34, 211, 238, .4); color: var(--p-accent-t); }

.m-candidate { padding: 10px; border-radius: 11px; background: rgba(0, 0, 0, .2); border: 1px solid var(--p-line); display: flex; flex-direction: column; gap: 6px; }
.m-candidate.is-on { border-color: rgba(34, 211, 238, .38); background: rgba(34, 211, 238, .06); }
.m-candidate-rationale { margin: 0; padding-inline-start: 24px; font-size: 11px; color: var(--p-muted); line-height: 1.6; }

.p-runrow { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; padding-block: 4px; }
.p-runrow .m-hint { margin: 0; flex: 1; min-inline-size: 140px; }
.p-results, .p-saved, .p-routeresult, .p-alts { display: flex; flex-direction: column; gap: 11px; }

.m-verdict { margin: 0; font-size: 12.5px; line-height: 1.7; }
.m-savings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.m-saving { padding: 10px; border-radius: 11px; background: rgba(0, 0, 0, .24); border: 1px solid var(--p-line); }
.m-saving-label { display: block; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--p-muted); }
:root[dir="rtl"] .m-saving-label { letter-spacing: 0; font-size: 10.5px; }
.m-saving strong { display: block; font-family: var(--p-num); font-size: 19px; font-weight: 600; line-height: 1.3; }
.m-saving i { font-size: 10px; color: var(--p-muted); font-style: normal; }

.m-saved { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 11px; background: var(--p-surface); border: 1px solid var(--p-line); }
.m-saved-main { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.m-saved-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-saved-meta { font-size: 10.5px; color: var(--p-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-saved-figs { display: flex; align-items: baseline; gap: 5px; font-family: var(--p-num); font-size: 11.5px; }
.m-saved-figs i { font-style: normal; color: var(--p-muted); font-size: 10px; }
.m-saved-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }

/* ------------------------------------------------------------------- routes */
.m-endpoints { display: flex; flex-direction: column; gap: 9px; }
.m-endpoint { padding: 11px; border-radius: 12px; background: var(--p-surface); border: 1px solid var(--p-line); display: flex; flex-direction: column; gap: 8px; transition: border-color .2s, box-shadow .2s; }
.m-endpoint.is-picking { border-color: rgba(34, 211, 238, .55); box-shadow: 0 0 0 3px rgba(34, 211, 238, .13); }
.m-endpoint-head { display: flex; align-items: center; gap: 8px; }
.m-endpoint-icon { inline-size: 22px; block-size: 22px; border-radius: 7px; display: grid; place-items: center; border: 1px solid var(--p-line-2); }
.m-endpoint-icon.is-origin { color: var(--p-accent); background: rgba(34, 211, 238, .1); border-color: rgba(34, 211, 238, .3); }
.m-endpoint-icon.is-dest { color: var(--p-accent2); background: rgba(124, 140, 255, .1); border-color: rgba(124, 140, 255, .3); }
.m-endpoint-label { flex: 1; font-size: 11.5px; font-weight: 600; }
.m-endpoint-coords { font-family: var(--p-num); font-size: 10px; color: var(--p-muted); direction: ltr; }
.m-endpoint-body { display: flex; gap: 8px; align-items: flex-end; }
.m-endpoint-body .m-field { flex: 1; min-inline-size: 0; }
.m-endpoint-name { margin: 0; font-size: 11px; color: var(--p-accent-t); }

.m-alt-delta { flex: 0 0 auto; font-family: var(--p-num); font-size: 12px; font-weight: 600; }
.m-alt-btn svg:last-child { flex: 0 0 auto; color: var(--p-muted); }
:root[dir="rtl"] .m-alt-btn svg:last-child { transform: scaleX(-1); }

/* ----------------------------------------------------------------------- ai */
.m-card-connect .m-cardbody { gap: 14px; }
.m-connectstate { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 8px 4px; }
.m-connectstate-icon {
  inline-size: 46px; block-size: 46px; border-radius: 14px; display: grid; place-items: center;
  color: var(--p-accent);
  background: linear-gradient(160deg, rgba(34, 211, 238, .18), rgba(124, 140, 255, .1));
  border: 1px solid rgba(34, 211, 238, .28);
}
.m-connectstate h4 { margin: 0; font-size: 13px; font-weight: 600; }
.m-connectstate p { margin: 0; font-size: 11.5px; color: var(--p-muted); max-inline-size: 40ch; line-height: 1.6; }
.m-fauxinput {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--p-line-2);
  background: rgba(0, 0, 0, .22); color: rgba(139, 152, 173, .65); font-size: 12px;
}
.m-fauxinput-btn { color: rgba(139, 152, 173, .5); }
.m-askrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.m-suggests { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-inline-size: 0; }
.m-suggest {
  padding: 4px 9px; border-radius: 99px; cursor: pointer; font-family: inherit; font-size: 10.5px;
  background: transparent; border: 1px dashed var(--p-line-2); color: var(--p-muted);
  max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-suggest:hover { color: var(--p-accent-t); border-color: rgba(34, 211, 238, .4); border-style: solid; }
.m-thinking { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--p-muted); }
.m-answer { display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; line-height: 1.72; }
.m-answer p { margin: 0; }
.m-answer-list { margin: 0; padding-inline-start: 19px; display: flex; flex-direction: column; gap: 4px; }
.m-answer-live { margin: 0; white-space: pre-wrap; font-family: inherit; font-size: 12.5px; line-height: 1.72; }
.m-disclaimer { display: flex; gap: 7px; align-items: flex-start; margin: 0; font-size: 10.5px; color: var(--p-muted); }
.m-disclaimer svg { flex: 0 0 auto; margin-block-start: 2px; }
.m-evidence { font-size: 11px; color: var(--p-muted); }
.m-evidence summary { cursor: pointer; color: var(--p-accent-t); }
.m-evidence pre {
  margin: 7px 0 0; padding: 10px; border-radius: 10px; max-block-size: 260px; overflow: auto;
  background: rgba(0, 0, 0, .38); border: 1px solid var(--p-line);
  font-size: 10px; line-height: 1.5; direction: ltr; text-align: start;
}

/* ------------------------------------------------------------------- modals */
#modal-root { position: relative; z-index: 60; }
.m-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 22px;
  background: rgba(3, 6, 12, .68); backdrop-filter: blur(6px);
  animation: m-fade .16s var(--p-ease);
}
.m-overlay.is-closing { animation: m-fade .16s var(--p-ease) reverse forwards; }
.m-modal {
  inline-size: min(100%, 480px); max-block-size: min(86vh, 720px);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(14, 21, 36, .98), rgba(8, 13, 23, .98));
  border: 1px solid var(--p-line-2); border-radius: 16px; box-shadow: var(--p-shadow);
  font-family: var(--p-font); color: var(--p-text); font-size: 13px;
  animation: m-rise .2s var(--p-ease);
}
.m-modal.is-lg { inline-size: min(100%, 780px); }
.m-modal-head { display: flex; gap: 10px; align-items: flex-start; padding: 15px 15px 11px; border-block-end: 1px solid var(--p-line); }
.m-modal-icon { color: var(--p-accent); margin-block-start: 2px; }
.m-modal-headtext { flex: 1; min-inline-size: 0; }
.m-modal-title { margin: 0; font-size: 14.5px; font-weight: 600; font-family: var(--p-display); }
.m-modal-sub { margin: 5px 0 0; font-size: 11.5px; color: var(--p-muted); line-height: 1.6; }
.m-modal-body { padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.m-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 15px; border-block-start: 1px solid var(--p-line); flex-wrap: wrap; }

@keyframes m-fade { from { opacity: 0; } }
@keyframes m-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } }

/* ---------------------------------------------------------- scenario banner */
.m-scnbanner {
  /* Sits below the shell's top bar when one exists (base.css publishes --topbar-h). */
  position: fixed; inset-block-start: calc(var(--topbar-h, 0px) + 14px); inset-inline: 0; z-index: 55;
  margin-inline: auto; inline-size: fit-content;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px 7px 13px; border-radius: 99px;
  background: linear-gradient(100deg, rgba(34, 211, 238, .22), rgba(124, 140, 255, .18));
  border: 1px solid rgba(34, 211, 238, .45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .42);
  backdrop-filter: blur(10px);
  font-family: var(--p-font); font-size: 12px; font-weight: 600; color: #eafcff;
  animation: m-drop .3s var(--p-ease);
}
.m-scnbanner-icon { display: grid; place-items: center; color: var(--p-accent); }
.m-scnbanner .m-iconbtn { color: #eafcff; inline-size: 24px; block-size: 24px; }
@keyframes m-drop { from { opacity: 0; transform: translateY(-12px); } }

/* --------------------------------------------------------------- animations */
.p-enter { animation: p-slide .32s var(--p-ease); }
@keyframes p-slide { from { opacity: 0; transform: translateX(14px); } }
:root[dir="rtl"] .p-enter { animation-name: p-slide-rtl; }
@keyframes p-slide-rtl { from { opacity: 0; transform: translateX(-14px); } }

.m-enter { animation: m-in .34s var(--p-ease) both; }
@keyframes m-in { from { opacity: 0; transform: translateY(7px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------- narrow panel */
@media (max-width: 1180px) {
  .p-kpigrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-panel { padding: 15px 14px 30px; }
}