/* BlackGrid Labs monochrome treatment for this isolated Command concept.
   Authority: apps/blackgridlabs-site/DESIGN.md and lib/page.js.
   Hotspot intensity colours are owned by the map layer, not this stylesheet. */
:root {
  --bg: #050506;
  --sidebar: #090909;
  --panel: #0e0e0e;
  --surface: #171717;
  --surface-hover: #202020;
  --border: #303030;
  --border-soft: #252525;
  --text: #e9e9e9;
  --muted: #b4b4b4;
  --subtle: #999999;
  --teal: #e9e9e9;
  --teal-bg: #242424;
  --amber: #cfcfcf;
  --red: #cfcfcf;
}

html { scrollbar-color: #555555 #050506; }
body { background: var(--bg); color: var(--text); }
::selection { color: #050506; background: #cfcfcf; }
button, input, textarea, select, dialog,
.panel, .map-panel, .icon-button, .action, .count, .nav-item,
.avatar, .map-filter, .marker-label, .map-controls, .map-selection,
.pwy-question, .pwy-followups button, .pwy-composer > div,
.evidence-link, .evidence-block, .toast, .launch-step > span:first-child {
  border-radius: 0;
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline-color: #e9e9e9;
}
input, textarea, select { caret-color: #e9e9e9; }
h1 { font-weight: 300; }
h2, h3 { font-weight: 450; }

/* Existing three-zone identity and sticky geometry are preserved. */
.brand-header { background: #050506; border-color: #303030; }
.organization strong { font-weight: 450; }
.organization div > span { color: #a7a7a7; }
.organization i { background: #999999; }
.org-emblem { border-color: #666666; color: #cfcfcf; }
.vallaris-brand > span:last-child { font-weight: 300; }
.provider strong { color: #e9e9e9; font-weight: 450; }
.provider span { color: #b4b4b4; }
.provider-brand-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.provider .bgl-provider-mark {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0;
  flex-shrink: 0;
}

.action-bar { background: #0e0e0e; border-color: #303030; }
.action-bar.collapsed { background: #090909; }
.bar-context > span:nth-child(2) { color: #cfcfcf; }
.square-indicator { background: #e9e9e9; }
.slash { color: #777777; }
.action { color: #b4b4b4; }
.action:hover { background: #202020; color: #ffffff; }
.action.active { background: #242424; color: #e9e9e9; }
.count { color: #e9e9e9; background: #383838; }
.primary-button { background: #e9e9e9; color: #101012; }
.primary-button:hover { background: #ffffff; color: #050506; }
.secondary-button { color: #e9e9e9; background: #121212; border-color: #555555; }
.secondary-button:hover { color: #ffffff; background: #242424; border-color: #888888; }

.sidebar { background: #090909; border-color: #303030; }
.nav-item { color: #b4b4b4; }
.nav-item:hover { color: #ffffff; background: #171717; }
.nav-item.selected { background: #242424; color: #e9e9e9; }
.nav-item.selected:before { background: #e9e9e9; }
.nav-shortcut, .nav-number { color: #b4b4b4; }
.exercise-note strong { color: #cfcfcf; }
.avatar { background: #171717; color: #cfcfcf; border-color: #555555; }
.operator, .exercise-note, .sidebar-module { border-color: #303030; }
.metric-value { font-weight: 300; }
.metric-change, .metric-change.caution { color: #e9e9e9; }
.metric-change.neutral { color: #b4b4b4; }
.metric-change span { color: #999999; }
.overview-tabs button[aria-selected=true] {
  color: #e9e9e9;
  border-bottom-color: #e9e9e9;
}
.context-divider { background: #303030; }
.pwy-glyph, .pwy-glyph:after { border-color: #cfcfcf; }
.demo-label { color: #999999; }

.panel, .map-panel { background: #0e0e0e; border-color: #303030; }
.panel-detail, .map-filter { color: #b4b4b4; }
.map-filter.active { background: #303030; color: #e9e9e9; }
.muted-dot { color: #888888; }
.map-canvas { background: #080808; }
.map-controls { background: #121212; border-color: #555555; }
.map-controls .icon-button { border-color: #303030; color: #b4b4b4; }
.map-controls .icon-button:hover { color: #ffffff; background: #242424; }
.map-scale { color: #b4b4b4; }
.map-scale > span:first-child { border-color: #999999; }
.map-scale .scale-note, .map-source { color: #999999; }
.north-indicator { color: #b4b4b4; }
.north-indicator span { background: #b4b4b4; }
.north-indicator span:before { border-color: #b4b4b4; }
.map-legend { border-color: #252525; }
.map-legend b { color: #e9e9e9; }
.map-marker, .map-marker.warning, .map-marker.critical { color: #e9e9e9; }
.map-marker:before { background: #121212; }
.map-marker[aria-pressed=true]:before { background: #e9e9e9; }
.marker-label { background: #111111ed; color: #d9d9d9; }
.marker-label i, .warning .marker-label i, .critical .marker-label i { color: #e9e9e9; }
.map-selection { background: #111111; border-color: #666666; }
.map-overlay #map-areas path { fill: #cfcfcf; stroke: #999999; }
.map-overlay #map-links path { stroke: #999999; }

/* Status stays readable through its words and shapes, without coloured chrome. */
.status-dot, .status-dot.green { background: #e9e9e9; border-radius: 0; }
.status-dot.amber { background: #9c9c9c; }
.status-dot.red { background: #cfcfcf; }
.status-dot.gray { background: #686868; }
.status-label, .status-label.amber { color: #b4b4b4; }
.operation-meta strong { color: #e9e9e9; }
.mini-track { background: #303030; }
.mini-track i, .operation-row:first-child .mini-track i { background: #cfcfcf; }
.graph-context strong { color: #e9e9e9; }
.issue-total { color: #cfcfcf; }
.issue-row > .issue-symbol, .issue-row.critical > .issue-symbol { color: #cfcfcf; }
.illustrative-note { color: #b4b4b4; }
.text-button, .recommendation-index { color: #e9e9e9; }
.text-button:hover { color: #ffffff; }
.recommendation-row:hover, .issue-row:hover, .operation-row:hover { background: #171717; }

/* SVG presentation attributes are intentionally restyled by the brand layer. */
.dependency-svg > path { stroke: #888888; }
.dependency-svg .graph-node rect { fill: #171717; stroke: #666666; rx: 0; }
.dependency-svg .graph-node circle { fill: #cfcfcf; }
.dependency-svg text { fill: #b4b4b4; }
.dependency-svg .node-title { fill: #e9e9e9; }
.dependency-svg .node-caption { fill: #b4b4b4; }
.dependency-svg .graph-node:hover rect { fill: #242424; stroke: #999999; }
.dependency-svg .graph-node:focus rect { stroke: #e9e9e9; }
.analytics-chart path { stroke: #555555; }
.analytics-chart polyline { stroke: #e9e9e9; }
.analytics-chart circle { fill: #e9e9e9; }
.analytics-chart text { fill: #b4b4b4; }

.pwy-panel { background: #0e0e0e; border-color: #303030; }
.pwy-demo { background: #171717; color: #b4b4b4; border-color: #303030; }
.pwy-question { background: #202020; color: #e9e9e9; border-color: #555555; }
.pwy-answer { color: #cfcfcf; }
.pwy-answer-header { color: #e9e9e9; }
.pwy-answer li strong { color: #e9e9e9; }
.evidence-link { background: #242424; color: #e9e9e9; border-color: #555555; }
.evidence-link:hover { background: #383838; }
.pwy-followups button { color: #cfcfcf; border-color: #454545; }
.pwy-followups button:hover { background: #202020; }
.pwy-composer { background: #111111; border-color: #303030; }
.pwy-composer > div { background: #090909; border-color: #555555; }
.pwy-composer input::placeholder { color: #999999; }
.pwy-composer .icon-button { color: #e9e9e9; background: #303030; }

dialog { background: #111111; border-color: #666666; box-shadow: 0 18px 70px #0008; }
dialog::backdrop { background: #000000cc; }
.dialog-body { color: #cfcfcf; }
.dialog-status { color: #cfcfcf; }
.evidence-block { background: #090909; color: #cfcfcf; border-color: #454545; }
.evidence-block strong { color: #e9e9e9; }
.toast { background: #242424; color: #e9e9e9; border-color: #777777; }

.launch-form label { color: #e9e9e9; }
.launch-form input, .launch-form textarea, .launch-form select {
  background: #111111;
  color: #e9e9e9;
  border-color: #555555;
}
.launch-form input::placeholder, .launch-form textarea::placeholder { color: #999999; }
.launch-form input:invalid:not(:placeholder-shown) { border-color: #cfcfcf; }
.launch-step > span:first-child { border-color: #555555; }
.launch-step.active { color: #e9e9e9; }
.launch-step.active > span:first-child { border-color: #e9e9e9; background: #242424; }
.launch-aside dd { color: #cfcfcf; }
.launch-demo-notice { color: #cfcfcf; }

@media (max-width: 1100px) {
  .provider .bgl-provider-mark { width: 23px; height: 23px; }
  .provider-brand-row { gap: 7px; }
}
@media (max-width: 650px) {
  .provider .bgl-provider-mark { display: none; }
  .provider-brand-row { display: block; }
}
/* Higher-specificity incumbent controls also keep the BlackGrid square edge. */
.primary-button,.secondary-button,.launch-form input,.launch-form textarea,.launch-form select{border-radius:0}