:root {
  color-scheme: dark;
  --bg: #07101d;
  --panel: #0e1929;
  --panel-2: #111f32;
  --line: #26364c;
  --line-soft: rgba(132, 158, 190, 0.16);
  --text: #edf5ff;
  --muted: #8ea2bb;
  --blue: #43a8ff;
  --cyan: #48d7dc;
  --green: #45d483;
  --amber: #f2b84b;
  --red: #ef6a6a;
  --radius: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% -10%, rgba(44, 108, 179, 0.2), transparent 34rem),
    linear-gradient(180deg, #081321 0%, var(--bg) 45%);
  color: var(--text);
}

.topbar {
  min-height: 88px;
  padding: 18px clamp(18px, 3vw, 42px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 16, 29, 0.86);
}

.eyebrow, .kicker, .label {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.3rem, 2.4vw, 2rem); }
h2 { margin-bottom: 0; font-size: 1rem; }

.pilot-badge, .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,0.025);
  white-space: nowrap;
}

.pilot-badge { padding: 9px 13px; font-size: 0.78rem; font-weight: 700; }
.pilot-badge span { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.tag { padding: 5px 9px; font-size: 0.68rem; }
.tag.unavailable { border-color: rgba(242,184,75,.28); color: #e2c079; }

main { padding: 20px clamp(14px, 2.5vw, 36px) 30px; }

.status-strip {
  display: grid;
  /* Seven children: the badge, four readings, then the two Shelly 1 contacts.
     This declared six, so RLY0 fell to an implicit second row on its own. The
     contacts get narrower tracks than the readings because ON/OFF is short
     where a four-digit wattage is not. */
  grid-template-columns:
    minmax(240px, 1.7fr) repeat(4, minmax(104px, 1fr)) repeat(2, minmax(86px, .8fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

.pump-state, .metric { min-height: 84px; padding: 16px 18px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.pump-state { display: flex; align-items: center; gap: 14px; }
.state-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 18px rgba(242,184,75,.45); }
.pump-state strong { font-size: 1rem; }
.metric p { margin-bottom: 9px; color: var(--muted); font-size: .72rem; }
.metric strong { font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.metric span { color: var(--muted); font-size: .78rem; }
.binary-value.on { color: var(--green); }
.binary-value.off { color: #9fb1c5; }
.binary-value.unknown { color: var(--muted); }

.workspace {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(360px, 1.55fr) minmax(250px, .8fr);
  gap: 18px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(17,31,50,.98), rgba(12,24,40,.98));
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

.process-panel, .trend-panel, .health-panel { min-height: 390px; padding: 18px; }
.panel-heading { min-height: 45px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.tank-scene {
  position: relative;
  height: 235px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(70,118,162,.12) 0 62%, rgba(52,43,31,.18) 62%),
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(130,159,191,.07) 30px);
}

.tank {
  position: absolute;
  left: 25%;
  top: 32px;
  width: 94px;
  height: 158px;
  border: 4px solid #6f7d8c;
  border-radius: 44px 44px 20px 20px;
  overflow: hidden;
  background: rgba(210,222,230,.08);
}
.tank-cap { position: absolute; width: 44px; height: 8px; left: 21px; top: -3px; background: #8592a0; }
.water { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, rgba(67,168,255,.38), rgba(23,102,178,.55)); opacity: .28; transition: height .6s ease, opacity .6s ease; }
/* Faint while it is only decoration; readable once it is tracking real pressure. */
.water.live { opacity: .62; }
.tank-reading { position: absolute; inset: 54px 4px auto; text-align: center; }
.tank-reading span { display: block; color: var(--muted); font-size: .65rem; }
.tank-reading strong { color: #c5d2df; font-size: .9rem; }
.tank-gallons { display: block; margin-top: 2px; color: var(--muted); font-size: .72rem; font-weight: 500; }
.pipe { position: absolute; left: calc(25% + 45px); top: 190px; width: 150px; height: 8px; background: #697888; }
.pump-symbol { position: absolute; left: calc(25% + 170px); top: 167px; width: 46px; height: 46px; border: 4px solid #68798a; border-radius: 50%; }
.pump-symbol span { position: absolute; inset: 11px; border: 3px solid #68798a; transform: rotate(45deg); }
.flow-line { position: absolute; left: calc(25% + 212px); top: 185px; right: 0; height: 8px; background: repeating-linear-gradient(90deg, #697888 0 18px, transparent 18px 25px); }

.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.mini-grid div { padding: 10px; border: 1px solid var(--line-soft); border-radius: 8px; }
.mini-grid span { display: block; color: var(--muted); font-size: .62rem; }
.mini-grid strong { display: block; margin-top: 5px; font-size: .85rem; }

/* Chart marks. Stepped down from the page hues so they sit in the dark-mode
   lightness band against the panel surface; validated for contrast and, for the
   three together, CVD separation. Only one series is ever drawn at a time. */
:root {
  --chart-level: #2b87e0;
  --chart-used: #33a866;
  --chart-starts: #c2882a;
}
.hero { font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.chart-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-top: 16px; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.segmented button {
  padding: 6px 12px; border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: .72rem; cursor: pointer;
}
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button:hover { color: var(--text); background: rgba(132, 158, 190, .08); }
.segmented button.on { background: var(--panel-2); color: var(--text); }
.segmented button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.chart-figure { margin: 14px 0 0; }
.chart-canvas { position: relative; min-height: 260px; }
.chart-caption { margin-top: 10px; color: var(--muted); font-size: .68rem; }

.hc-grid { stroke: var(--line-soft); stroke-width: 1; }
.hc-axis { fill: var(--muted); font-size: 10px; }
/* paint-order puts the stroke behind the glyph, so the label knocks a halo out
   of whatever mark it lands on rather than colliding with the trace. */
.hc-peak {
  fill: #c6d3e1; font-size: 10px; font-weight: 600;
  paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round;
}
.hc-cross { stroke: rgba(198, 211, 225, .45); stroke-width: 1; stroke-dasharray: 3 3; }
.hc-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hc-area { opacity: .18; }
.hc-bar { stroke: none; }
/* Two-class selectors deliberately: a bare .hc-gallons setting fill would win
   over .hc-line's fill:none on equal specificity and flood the line into a
   filled wedge. Each element states both properties. */
.hc-line.hc-gallons { stroke: var(--chart-level); fill: none; }
.hc-line.hc-used { stroke: var(--chart-used); fill: none; }
.hc-line.hc-starts { stroke: var(--chart-starts); fill: none; }
.hc-area.hc-gallons { fill: var(--chart-level); stroke: none; }
.hc-area.hc-used { fill: var(--chart-used); stroke: none; }
.hc-area.hc-starts { fill: var(--chart-starts); stroke: none; }
.hc-bar.hc-gallons { fill: var(--chart-level); stroke: none; }
.hc-bar.hc-used { fill: var(--chart-used); stroke: none; }
.hc-bar.hc-starts { fill: var(--chart-starts); stroke: none; }
.hc-hit { cursor: crosshair; }
.hc-tip {
  position: absolute; top: 6px; padding: 5px 9px; border: 1px solid var(--line);
  border-radius: 7px; background: rgba(7, 16, 29, .95); color: var(--text);
  font-size: .7rem; white-space: nowrap; pointer-events: none;
}
.hc-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 20px; }
.hc-empty strong { color: #c6d3e1; font-size: .9rem; }
.hc-empty span { display: block; max-width: 300px; margin-top: 7px; color: var(--muted); font-size: .72rem; }

.chart-shell { height: 260px; margin-top: 20px; display: grid; grid-template-columns: 38px 1fr; }
.y-labels { display: flex; flex-direction: column; justify-content: space-between; padding: 0 7px 16px 0; color: var(--muted); font-size: .62rem; text-align: right; }
.chart-grid {
  position: relative;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    repeating-linear-gradient(0deg, transparent 0 59px, var(--line-soft) 60px),
    repeating-linear-gradient(90deg, transparent 0 69px, var(--line-soft) 70px);
}
.empty-chart { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 20px; }
.empty-chart strong { color: #c6d3e1; font-size: .9rem; }
.empty-chart span { max-width: 260px; margin-top: 7px; color: var(--muted); font-size: .72rem; }
.chart-legend { display: flex; justify-content: space-between; margin: 12px 2px 0 38px; color: var(--muted); font-size: .68rem; }
.legend-power { display: inline-block; width: 18px; height: 3px; margin-right: 6px; vertical-align: middle; background: var(--blue); }
.muted { color: #667b93; }

.health-list { margin-top: 14px; }
.health-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line-soft); }
.health-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.health-dot.checking { background: var(--amber); box-shadow: 0 0 10px rgba(242,184,75,.4); }
.health-dot.online { background: var(--green); box-shadow: 0 0 10px rgba(69,212,131,.4); }
.health-dot.offline { background: var(--red); box-shadow: 0 0 10px rgba(239,106,106,.4); }
.health-dot.unavailable { background: #50637a; }
.health-row strong, .health-row small { display: block; }
.health-row strong { font-size: .78rem; }
.health-row small { margin-top: 3px; color: var(--muted); font-size: .66rem; }

.safety-note { margin-top: 16px; padding: 12px; border: 1px solid rgba(242,184,75,.24); border-radius: 9px; background: rgba(242,184,75,.055); }
.safety-note strong { color: #e7c77f; font-size: .72rem; }
.safety-note p { margin: 5px 0 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }

.events-panel { margin-top: 18px; padding: 18px; }
.event-table { margin-top: 14px; border: 1px solid var(--line-soft); border-radius: 9px; overflow: hidden; }
.event-head { display: grid; grid-template-columns: 150px 110px 120px 1fr; padding: 9px 12px; background: rgba(255,255,255,.035); color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }
.event-empty { min-height: 78px; display: grid; place-items: center; color: var(--muted); font-size: .76rem; }
.browser-status { margin: 14px 2px; min-height: 20px; color: var(--muted); font-size: .74rem; }
.event-list { display: grid; gap: 8px; }
.event-subheading { margin: 20px 0 10px; color: #cbd9e8; font-size: .8rem; }
.event-card { display: grid; grid-template-columns: minmax(180px, 1.15fr) minmax(150px, 1fr) minmax(180px, 1.5fr) auto; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--line-soft); border-left: 3px solid var(--cyan); border-radius: 8px; color: var(--muted); font-size: .72rem; }
.event-card strong { color: #d8eefc; }.event-card.red { border-left-color: var(--red); }.event-card.yellow { border-left-color: var(--amber); }.event-card.info { border-left-color: var(--cyan); }.event-card a, .history-link { color: #9acdf7; font-weight: 700; text-decoration: none; }.history-link { display: inline-block; margin-top: 14px; font-size: .74rem; }

.records-main { max-width: 1700px; margin: 0 auto; }
.records-toolbar, .column-panel { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 17px; }.records-toolbar small { color: var(--muted); font-size: .68rem; }
.records-actions { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }.records-actions label { display: grid; gap: 5px; color: var(--muted); font-size: .62rem; font-weight: 700; }.records-actions input { width: 150px; }
.column-panel { align-items: start; margin-top: 12px; }.column-picker { display: grid; flex: 1; max-width: 75%; gap: 10px; }.column-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }.column-bar label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .62rem; font-weight: 700; }.column-bar select { width: auto; padding: 6px 8px; font-size: .7rem; }
.column-chips { display: flex; gap: 6px; flex-wrap: wrap; }.column-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 9px; border: 1px solid var(--line); border-radius: 999px; color: #cbd9e8; font-size: .66rem; }.column-chip button { padding: 0 5px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .8rem; line-height: 1; cursor: pointer; }.column-chip button:hover { color: var(--text); }
.column-chip.absent { color: #6f8196; border-style: dashed; }.column-chip.trigger { border-color: rgba(242,184,75,.55); color: #f2cf87; }.column-options label.absent { color: #6f8196; }.column-empty { color: var(--muted); font-size: .66rem; }
.column-more summary { color: var(--blue); font-size: .66rem; font-weight: 700; cursor: pointer; }.column-options { display: flex; gap: 8px 14px; flex-wrap: wrap; margin-top: 9px; }.column-options + .column-options { padding-top: 9px; border-top: 1px solid var(--line-soft); }.column-options label { color: #cbd9e8; font-size: .67rem; white-space: nowrap; }.column-options input { width: auto; margin-right: 5px; accent-color: var(--blue); }
.records-table-panel { margin-top: 12px; overflow: auto; max-height: calc(100vh - 32px); }.records-table { min-width: 1050px; }.records-row { display: grid; grid-template-columns: var(--record-grid-template, 190px 150px repeat(var(--record-columns, 6), minmax(140px, 1fr))); gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line-soft); color: #d3e0ee; font-size: .7rem; line-height: 1.4; }.records-row:first-child { border-top: 0; }.records-head { position: sticky; top: 0; z-index: 1; color: var(--muted); background: #15233a; box-shadow: 0 1px 0 var(--line); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; }.records-row small { color: var(--amber); }.unavailable-value { color: #f2cf87; }.missing-value { color: #8094aa; font-style: italic; }.history-panel { margin-top: 16px; padding: 17px; }.history-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

footer { display: flex; justify-content: space-between; gap: 20px; padding: 14px clamp(18px,3vw,42px) 24px; color: #687e96; font-size: .66rem; }

@media (max-width: 1050px) {
  /* Six readings over three columns is two full rows; four left a ragged pair. */
  .status-strip { grid-template-columns: repeat(3, 1fr); }
  .pump-state { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--line); }
  .workspace { grid-template-columns: 1fr 1fr; }
  .health-panel { grid-column: 1 / -1; min-height: auto; }
  .health-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
}

@media (max-width: 700px) {
  .topbar { align-items: flex-start; }
  .status-strip, .workspace { grid-template-columns: 1fr; }
  .pump-state, .metric { grid-column: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .metric:last-child { border-bottom: 0; }
  .health-panel { grid-column: auto; }
  .health-list { display: block; }
  .event-head { display: none; }
  footer { flex-direction: column; }
  .pilot-badge { font-size: .66rem; }
  .event-card { grid-template-columns: 1fr; gap: 5px; }.records-toolbar, .column-panel { align-items: flex-start; flex-direction: column; }.column-picker { max-width: 100%; }.records-actions { width: 100%; }.records-actions > * { flex: 1 1 auto; }
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-link, .primary-button, .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(67,168,255,.42);
  border-radius: 8px;
  color: #d7ecff;
  background: rgba(67,168,255,.1);
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.nav-link:hover, .primary-button:hover, .secondary-button:hover { background: rgba(67,168,255,.18); }
.danger-button { color: #ff9d9d; border-color: rgba(255, 104, 104, .42); }
.danger-button:hover { background: rgba(255, 104, 104, .12); }
.secondary-button { border-color: var(--line); color: #c2d1e1; background: rgba(255,255,255,.035); }
button:disabled { opacity: .42; cursor: not-allowed; }

.rules-main { max-width: 1500px; margin: 0 auto; }
.editor-notice { display: flex; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 15px; border: 1px solid rgba(242,184,75,.28); border-radius: 10px; color: #dec58f; background: rgba(242,184,75,.06); font-size: .75rem; }
.editor-notice span { color: var(--muted); }
.rules-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px; }
.adoption-summary { padding-left: 18px; border-left: 1px solid var(--line); }
.adoption-state { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 5px; color: var(--muted); background: rgba(255,255,255,.06); font-size: .62rem; }
.adoption-state.active { color: var(--green); background: rgba(69,212,131,.1); }
.adoption-state.pending { color: var(--amber); background: rgba(242,184,75,.1); }
.adoption-state.mismatch { color: var(--red); background: rgba(255,107,107,.1); }
.rules-toolbar small { display: block; max-width: 680px; margin-top: 7px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .64rem; overflow-wrap: anywhere; }
.toolbar-actions, .form-actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.editor-status { margin: 12px 1px; min-height: 20px; color: var(--muted); font-size: .74rem; }
.editor-status.ok { color: var(--green); }.editor-status.warning { color: var(--amber); }.editor-status.error { color: var(--red); }
.rules-workspace { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(520px, 1.6fr); gap: 16px; }
.rule-browser, .rule-form { min-height: 690px; overflow: hidden; }
.rule-filter-row { padding: 14px; border-bottom: 1px solid var(--line); }
.rule-filter-row label, .form-grid label { display: grid; gap: 6px; color: var(--muted); font-size: .68rem; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 9px 10px; color: var(--text); background: #091524; font: inherit; font-size: .78rem; }
textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(67,168,255,.35); border-color: var(--blue); }
.rule-list { max-height: 630px; overflow-y: auto; }
.rule-row { position: relative; display: grid; grid-template-columns: 50px 1fr 38px; gap: 8px; align-items: center; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line-soft); color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.rule-row:hover { background: rgba(255,255,255,.035); }.rule-row.selected { background: rgba(67,168,255,.11); box-shadow: inset 3px 0 var(--blue); }.rule-row.changed::after { content: ""; position: absolute; top: 8px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
.rule-row strong { color: #9acdf7; font-size: .72rem; }.rule-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }.rule-state { color: #6f8197; font-size: .58rem; font-style: normal; text-align: right; }.rule-state.enabled { color: var(--green); }
.rule-form { padding: 18px; }
.rule-title-row { display: flex; align-items: center; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.switch-label { display: flex !important; grid-auto-flow: column; grid-template-columns: auto 1fr; align-items: center; justify-content: start; gap: 8px !important; color: #cbd9e8 !important; }
.switch-label input { width: 17px; height: 17px; accent-color: var(--green); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 17px; }.form-grid .wide { grid-column: 1 / -1; }
.form-actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

@media (max-width: 850px) {
  .rules-toolbar { align-items: flex-start; flex-direction: column; }
  .toolbar-actions { justify-content: flex-start; }
  .adoption-summary { padding-left: 0; border-left: 0; }
  .rules-workspace { grid-template-columns: 1fr; }
  .rule-browser { min-height: auto; }.rule-list { max-height: 340px; }.rule-form { min-height: auto; }
}

.pump-state.running .state-dot {
  background: var(--green);
  box-shadow: 0 0 18px rgba(69,212,131,.5);
}

.pump-state.stopped .state-dot {
  background: var(--blue);
  box-shadow: 0 0 18px rgba(67,168,255,.45);
}

/* Unknown keeps the base amber dot: nothing could be read, which is not the
   same claim as stopped and should not look like it. */

@media (max-width: 700px) {
  .topbar-actions { align-items: flex-end; flex-direction: column-reverse; }
}

/* Rules Engine authoring pilot */
.engine-main { max-width: 1700px; margin: 0 auto; }
.engine-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(260px, 1fr) auto; align-items: center; gap: 20px; padding: 17px; }
.engine-toolbar small { display: block; max-width: 620px; margin-top: 7px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .64rem; overflow-wrap: anywhere; }
.release-history { display: grid; grid-template-columns: minmax(260px,1fr) minmax(300px,.9fr) auto; align-items: end; gap: 14px 20px; margin: 12px 0 16px; padding: 17px; }
.release-history[hidden] { display: none; }.release-history small { display: block; max-width: 680px; margin-top: 7px; color: var(--muted); font-size: .66rem; line-height: 1.45; }
.release-selector { display: grid; gap: 6px; color: var(--muted); font-size: .65rem; font-weight: 700; }.release-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.release-details { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(260px,1fr); gap: 5px 18px; padding-top: 12px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .66rem; }
.release-details strong { color: var(--text); }.release-details code { overflow-wrap: anywhere; color: #9acdf7; }.release-details em { color: var(--green); font-style: normal; }
.engine-validation-summary { padding-left: 20px; border-left: 1px solid var(--line); }
.ok-text { color: var(--green); }.warning-text { color: var(--amber); }.error-text { color: var(--red); }
.engine-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 12px 0 16px; }
.engine-tile { display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; align-items: center; padding: 15px 17px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--panel); text-align: left; cursor: pointer; }
.engine-tile:hover { background: var(--panel-2); }.engine-tile.active { border-color: rgba(67,168,255,.62); box-shadow: inset 0 0 0 1px rgba(67,168,255,.2); background: rgba(67,168,255,.1); }
.engine-tile strong { font-size: .88rem; }.engine-tile small { grid-column: 2; color: var(--muted); font-size: .66rem; }
.tile-step { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; color: #a9d8ff; font-size: .72rem; font-weight: 800; }
.engine-workspace { display: grid; grid-template-columns: minmax(250px, .52fr) minmax(740px, 2fr); gap: 16px; }
.engine-browser { min-height: 740px; overflow: hidden; }.engine-editor { min-height: 740px; padding: 18px; overflow: auto; }
.engine-browser-heading, .engine-editor-heading, .subsection-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.engine-browser-heading { padding: 14px; border-bottom: 1px solid var(--line); }.engine-editor-heading { padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.compact-button { min-height: 30px; padding: 5px 9px; font-size: .66rem; }
.engine-list { max-height: 680px; overflow-y: auto; }
.engine-list-item { position: relative; display: grid; gap: 4px; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line-soft); color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.engine-list-item:hover { background: rgba(255,255,255,.035); }.engine-list-item.selected { background: rgba(67,168,255,.11); box-shadow: inset 3px 0 var(--blue); }
.engine-list-item strong { font-size: .72rem; }.engine-list-item small { color: var(--muted); font-size: .61rem; }.engine-list-item i { position: absolute; top: 12px; right: 10px; color: #667b93; font-size: .56rem; font-style: normal; }
.compact-form { margin-bottom: 20px; }.subsection-heading { margin: 22px 0 10px; }
.data-grid { min-width: 940px; border: 1px solid var(--line-soft); border-radius: 9px; overflow: hidden; }
.data-grid-head, .data-grid-row { display: grid; align-items: center; gap: 7px; padding: 7px; }
.data-grid-head { color: var(--muted); background: rgba(255,255,255,.035); font-size: .58rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.data-grid-row { border-top: 1px solid var(--line-soft); }.data-grid-row input, .data-grid-row select { min-width: 0; padding: 7px; font-size: .68rem; }
.device-fields-grid { display: grid; gap: 9px; }
.device-field-row { border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(255,255,255,.012); overflow: hidden; }
.device-field-primary { display: grid; grid-template-columns: 1.1fr 1.15fr 1fr .68fr .48fr .64fr .82fr .72fr 28px; gap: 7px; align-items: end; padding: 8px; }
.device-field-primary label, .field-action-mapping label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: .57rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.device-field-primary input, .device-field-primary select, .field-action-mapping input { min-width: 0; padding: 7px; font-size: .68rem; }
.field-delete { align-self: end; }.field-action-mapping { border-top: 1px solid var(--line-soft); }
/* Guarded groups reuse the condition and assignment rows, so they must NOT
   inherit the device action mapping's three-column grid, which collapses those
   rows to about 20px. Same chrome, no layout. */
.guarded-group { margin: 7px 0; border: 1px solid var(--line-soft); border-radius: 9px; }
.guarded-group summary { padding: 8px 10px; color: #9acdf7; font-size: .63rem; font-weight: 700; cursor: pointer; }
.guarded-group > div, .guarded-group > button { margin: 0 10px 8px; }
.guarded-group > div:last-of-type { display: grid; gap: 7px; }
.field-action-mapping summary { padding: 8px 10px; color: #9acdf7; font-size: .63rem; font-weight: 700; cursor: pointer; }
.field-action-mapping > div { display: grid; grid-template-columns: 1fr 1.6fr .7fr; gap: 9px; padding: 2px 10px 10px; }
.calculation-output-grid .data-grid-head, .calculation-output-row { grid-template-columns: 1.25fr 1.5fr .7fr .65fr .7fr .65fr; }
.row-delete { width: 27px; height: 27px; border: 1px solid rgba(239,106,106,.3); border-radius: 6px; color: var(--red); background: rgba(239,106,106,.06); cursor: pointer; }
.form-help, .empty-editor { margin: 12px 0 0; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.calculation-config-grid, .event-condition-grid, .event-lower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.calculation-config-grid > section, .event-condition-grid > section, .event-lower-grid > section { padding: 14px; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(255,255,255,.018); }
.expression-card, .event-summary-section { margin-top: 16px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(255,255,255,.018); }
.expression-card textarea { width: 100%; min-height: 92px; margin-top: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
.stacked-form { display: grid; gap: 11px; }.stacked-form label { display: grid; gap: 5px; color: var(--muted); font-size: .66rem; font-weight: 700; }
.condition-controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 10px 0; }.condition-controls label { display: grid; gap: 5px; color: var(--muted); font-size: .62rem; font-weight: 700; }
.condition-list, .event-actions { display: grid; gap: 7px; }.condition-row { display: grid; grid-template-columns: 1.35fr .8fr 1fr 28px; align-items: center; gap: 6px; }.condition-row input, .condition-row select { padding: 7px; font-size: .68rem; }
.add-clause { margin-top: 8px; }.inline-switches { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }.notification-switches { margin: 10px 0 15px; }.action-equals { color: var(--muted); text-align: center; }
.event-action-row { grid-template-columns: 1.3fr 24px 1fr 28px; margin-top: 7px; }
.close-basis-label { display: grid; gap: 5px; margin: 10px 0; color: var(--muted); font-size: .66rem; font-weight: 700; }
.inverse-close-controls { grid-template-columns: 1fr 1fr; }
.event-summary-section { margin-bottom: 18px; overflow: auto; }
.summary-duration { display: grid; grid-template-columns: auto minmax(180px,1fr) minmax(180px,1fr); gap: 10px; align-items: center; margin: 14px 0 10px; }
.summary-grid .data-grid-head, .summary-row { grid-template-columns: 1.25fr 1.1fr 1.1fr 1.2fr .55fr .55fr 28px; min-width: 1080px; }
.validation-panel { margin-top: 16px; padding: 18px; }.validation-finding, .validation-success { display: grid; grid-template-columns: minmax(220px,.8fr) 1.7fr auto; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: .68rem; }
.validation-finding strong { color: #c9d8e8; }.validation-finding span { color: var(--muted); }.validation-finding code { color: var(--red); }.validation-finding.warning code { color: var(--amber); }
.validation-success strong { color: var(--green); }.validation-success span { color: var(--muted); }

@media (max-width: 1150px) {
  .engine-toolbar { grid-template-columns: 1fr 1fr; }.engine-toolbar .toolbar-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .release-history { grid-template-columns: 1fr 1fr; }.release-actions { grid-column: 1 / -1; }
  .engine-workspace { grid-template-columns: 1fr; }.engine-browser { min-height: auto; }.engine-list { max-height: 280px; }.engine-editor { min-height: auto; }
  .device-field-primary { grid-template-columns: 1.1fr 1.1fr 1fr .68fr .5fr; }.field-log, .field-threshold, .field-access { grid-row: 2; }.field-delete { grid-column: 5; grid-row: 2; justify-self: end; }
}
@media (max-width: 780px) {
  .engine-toolbar, .engine-tiles, .calculation-config-grid, .event-condition-grid, .event-lower-grid { grid-template-columns: 1fr; }
  .release-history, .release-details { grid-template-columns: 1fr; }.release-selector, .release-actions { grid-column: 1; }
  .engine-validation-summary { padding-left: 0; border-left: 0; }.engine-tile { min-height: 72px; }
  .condition-controls, .summary-duration { grid-template-columns: 1fr; }.data-grid { min-width: 850px; }
  .device-field-primary, .field-action-mapping > div { grid-template-columns: 1fr 1fr; }.device-field-primary > *, .field-log, .field-threshold, .field-access, .field-delete { grid-column: auto; grid-row: auto; }.field-delete { justify-self: start; }
}

/* Configuration workflow */
.event-action-row { grid-template-columns: 1.3fr minmax(85px,.7fr) 1fr 28px; }
.finding-link { text-align:left; white-space:normal; }
#device-package-state, #import-details { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
#engine-editor :focus { outline:2px solid var(--blue); outline-offset:3px; }

.configuration-guide { padding:24px; max-width:1000px; line-height:1.65; }
.configuration-guide h2 { margin-top:24px; }
.configuration-guide pre { overflow:auto; }

/* Native dialog stays hidden until opened; author display rules must not expose hidden panels. */
[hidden] { display: none !important; }
.load-dialog { max-width: min(36rem, 90vw); background: #102032; color: #e7f0fa; border: 1px solid #426079; border-radius: 12px; padding: 1.5rem; }
.load-dialog::backdrop { background: rgb(0 0 0 / 65%); }
.load-dialog > button, .load-dialog > label { display: block; width: 100%; margin-top: .8rem; }
.load-dialog select { width: 100%; margin-top: .4rem; }
.operator-panel { margin: 0 0 1.5rem; }
.operator-summary, .operator-evidence, .operator-warning, .operator-footnote { margin: .55rem 0; }
.operator-summary { font-size: 1.05rem; font-weight: 700; }
.operator-summary.alert, .operator-warning { color: #f2c75c; }
.operator-evidence, .operator-footnote { color: var(--muted); }
.operator-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
.control-button { min-height: 3.25rem; border: 1px solid #51647e; border-radius: .65rem; color: #fff; background: #233552; font: inherit; font-weight: 750; cursor: pointer; }
.control-button.warning { border-color: #b98523; background: #533d16; }
.control-button.danger { border-color: #a84b4b; background: #512323; }
.control-button:disabled { cursor: wait; opacity: .5; }
@media (max-width: 700px) { .operator-actions { grid-template-columns: 1fr; } }

.analysis-tiles { grid-template-columns: 1fr; margin-top: 16px; }
.validation-finding.info code { color: var(--muted); }
#analysis-holds .validation-finding code { color: var(--muted); }
#analysis-holds .validation-finding.warning code { color: var(--amber); }
.analysis-intro { color: var(--muted); font-size: .7rem; margin: 0 0 10px; }
.analysis-holds-heading { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.analysis-limits { margin-top: 14px; color: var(--muted); font-size: .68rem; }
.analysis-limits summary { cursor: pointer; }
.analysis-limits ul { margin: 8px 0 0; padding-left: 18px; }
.analysis-limits li { margin: 4px 0; }

.sim-block { margin: 4px 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.sim-note { color: var(--muted); font-size: .66rem; margin: 6px 0 10px; }
.sim-note code { color: var(--text); }
.sim-inject { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 10px; }
.sim-inject label { display: grid; gap: 4px; font-size: .66rem; color: var(--muted); }
.sim-inject select { min-width: 260px; }
.sim-inject input { width: 80px; }
.sim-injections { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; min-height: 22px; }
.sim-chip { padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(67,168,255,.5); background: rgba(67,168,255,.12); color: var(--text); font-size: .62rem; cursor: pointer; }
.sim-chip span { color: var(--muted); margin-left: 4px; }
.sim-chip:hover { border-color: var(--red); }
.sim-empty { color: var(--muted); font-size: .64rem; }
.sim-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 16px; margin: 10px 0; }
.sim-controls label, .sim-scrub { display: grid; gap: 4px; font-size: .68rem; color: var(--muted); }
.sim-controls output, .sim-scrub output { color: var(--text); font-weight: 600; }
.sim-toggles { display: block; margin-bottom: 12px; font-size: .68rem; color: var(--muted); }
.sim-toggles label { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; }
.sim-toggles label > span { flex: 1 1 auto; }
.sim-toggles input[type="checkbox"] { flex: none; width: 15px; height: 15px; padding: 0; margin-top: 1px; accent-color: var(--blue); }
.sim-toggles code { color: var(--text); }
.sim-verdict { padding: 11px 13px; border-radius: 9px; font-size: .78rem; font-weight: 600; border: 1px solid var(--line); }
.sim-verdict.ok { color: var(--green); border-color: rgba(60,180,120,.45); }
.sim-verdict.stopped { color: var(--red); border-color: rgba(220,90,90,.45); }
.sim-timeline { display: flex; flex-wrap: wrap; gap: 2px; margin: 12px 0 4px; }
.sim-cell { min-width: 22px; padding: 3px 0; text-align: center; border-radius: 3px; font-size: .58rem; color: #08111c; background: var(--green); }
.sim-cell.stopped { background: var(--red); color: #fff; }
.sim-cell.mute { outline: 1px dashed var(--amber); outline-offset: -1px; }
.sim-scrub { margin: 10px 0; max-width: 320px; }
.sim-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sim-flag { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); font-size: .6rem; color: var(--muted); }
.sim-flag.on { color: var(--text); border-color: rgba(67,168,255,.6); background: rgba(67,168,255,.12); }
.sim-state { display: grid; grid-template-columns: minmax(130px, .5fr) 1.6fr; gap: 4px 14px; margin: 0; font-size: .68rem; }
.sim-state dt { color: var(--muted); }
.sim-state dd { margin: 0; color: var(--text); }
.sim-notes { margin: 10px 0 0; padding-left: 18px; font-size: .66rem; color: var(--amber); }