/* Alarms group: alarm record, alarm log. Tokens only; extends app.css in its idiom. */

/* ---------- Tab strip: underline tabs, a select on a phone ---------- */
.al-tabs .tabsel{display:none}
.al-tabs .utabs .count{margin-left:var(--space-2)}
.al-body > .region{min-width:0}
.hstack.nw{flex-wrap:nowrap}
td.acts .note{margin-bottom:var(--space-2)}
td.acts .hstack{flex-wrap:nowrap}

/* ---------- Alarms table: row expansion for delivery ---------- */
.tbl-alarms tr.exp{display:none}
.tbl-alarms tr.exp.open{display:table-row}
.tbl-alarms tr.exp td{white-space:normal}
.tbl-alarms td .note{margin-top:var(--space-2)}
.tbl-alarms td.st-cell{max-width:calc(var(--space-48) * 4.5);min-width:calc(var(--space-48) * 3)}
.tbl-wrap td.wrap{min-width:calc(var(--space-48) * 3)}
.al-exp{display:flex;flex-direction:column;gap:var(--space-8);max-width:calc(var(--layout-dialog-width-lg) * .9)}

/* ---------- Delivery by rule: one disclosure per rule ---------- */
.dl-rules > * + *{border-top:var(--line)}
.dl-rule > summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-12);padding:var(--space-8) 0;cursor:pointer;list-style:none}
.dl-rule > summary::-webkit-details-marker{display:none}
.dl-rule > summary::before{content:'';width:var(--space-6);height:var(--space-6);border-right:var(--size-border-width-thick) solid var(--text-tertiary);border-bottom:var(--size-border-width-thick) solid var(--text-tertiary);transform:rotate(-45deg);align-self:center;transition:transform var(--dur-feedback) var(--ease-standard)}
.dl-rule[open] > summary::before{transform:rotate(45deg)}
.dl-body{display:flex;flex-direction:column;gap:var(--space-8);padding:0 0 var(--space-12) var(--space-16)}
.dl-body .tbl-wrap{border:var(--line);border-radius:var(--radius-control)}

/* ---------- Alarm record ---------- */
.rec-title .state-ctl{display:inline-flex;align-items:center;gap:var(--space-8);flex-wrap:wrap}
.al-src{display:grid;grid-template-columns:minmax(0,calc(var(--layout-page-rail-basis) * .85)) 1fr;gap:var(--space-16);align-items:start}
.al-src .al-evidence{height:auto;aspect-ratio:4/3;max-height:calc(var(--layout-evidence-height) * 1.2)}
.tlstrip{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-8)}
.tlstrip li{flex:1 1 0;min-width:0;position:relative;border-top:var(--size-border-width-thick) solid var(--text-secondary);padding:var(--space-12) var(--space-8) 0 0;display:flex;flex-direction:column;gap:var(--space-2)}
.tlstrip li::before{content:'';position:absolute;left:0;top:calc(var(--space-6) * -1 - var(--size-border-width-thick) / 2);width:var(--size-dot);height:var(--size-dot);border-radius:var(--radius-pill);background:var(--surface-raised);border:var(--size-border-width-thick) solid var(--text-secondary)}
.tlstrip li.done::before{background:var(--text-secondary)}
.tlstrip li.now{border-top-color:var(--action-primary)}
.tlstrip li.now::before{background:var(--action-primary);border-color:var(--action-primary)}
.tlstrip li.wait{border-top:var(--size-border-width-thick) dashed var(--border-strong)}
.tlstrip li.wait::before{border-color:var(--border-strong)}
.tlstrip .t-title{font:var(--font-emphasis)}
.tlstrip li.wait .t-title{color:var(--text-tertiary);font-weight:var(--fw-body)}
.tlstrip .t-at{font:var(--font-data-sm);color:var(--text-secondary)}

.al-tight{gap:var(--space-12)}

/* ---------- Alarm-system health ---------- */
.rate-chart{margin-bottom:var(--space-16);overflow-x:auto}
.rate-chart .rate.ok{fill:var(--border-strong)}
.rate-chart .rate.over-ok{fill:var(--text-tertiary)}
.rate-chart .rate.over-max{fill:var(--text-primary)}
.rate-chart .flood{fill:var(--surface-group)}
.rate-chart .thr-ref{stroke:var(--text-tertiary)}
.rate-chart .thr-refmax{stroke:var(--text-primary)}
.rate-chart text.thr-ref,.rate-chart text.thr-refmax{fill:var(--text-secondary);stroke:none}
.rate-chart text.val{font-weight:var(--fw-label);fill:var(--text-primary)}
.rate-chart text.on-line{paint-order:stroke;stroke:var(--surface-raised);stroke-width:4}
.hl-kv{margin:0}
.hl-kv .lines{margin-top:var(--space-4)}

/* ---------- Analytics ---------- */
.an-scope{margin-top:var(--space-4)}
.an-scope .toolbar{gap:var(--space-16);flex-wrap:wrap}
.an-islands{flex-wrap:wrap}
.an-islands .sc.zero,.an-islands .sc.zero b{color:var(--text-tertiary)}
.an-dir{color:var(--text-secondary)}
.an-body > .region{scroll-margin-top:calc(var(--space-48) * 2.5)}
.an-legend-row{padding-bottom:0}
.an-drill{display:flex;flex-direction:column;gap:var(--space-8);margin-top:var(--space-12);padding-top:var(--space-12);border-top:var(--line)}
.an-drill .tbl-wrap{border:var(--line);border-radius:var(--radius-control)}
.heat-key{display:inline-flex;align-items:center;gap:var(--space-2)}
/* health index rows */
.spark{display:block;width:100%;max-width:calc(var(--space-48) * 11);height:auto;overflow:visible}
.chart-cell{width:calc(var(--space-48) * 11.5)}
.tbl-trend td{height:calc(var(--size-row-height-default) * 1.9);vertical-align:middle}
.spark text,.heat text.tick,.cstrip text.tick{font:var(--font-chart-axis);fill:var(--text-tertiary)}
.spark .grid{stroke:var(--data-gridline)}
.spark .base{stroke:var(--data-baseline)}
.spark .hi{fill:none;stroke:var(--text-primary);stroke-width:2;stroke-linejoin:round}
.spark .hi-dot,.spark .s-end{fill:var(--text-primary)}
.spark .grid.dash{stroke-dasharray:2 3}
.m-fix{fill:var(--level-fixed-fill);stroke:var(--surface-raised);stroke-width:1}
.m-fix-tick{fill:none;stroke:var(--text-on-accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.m-rep{fill:var(--surface-raised);stroke:var(--text-primary);stroke-width:1.5}
.spark a.ev{cursor:pointer}
.spark a.ev:hover .m-rep,.spark a.ev:focus-visible .m-rep{fill:var(--text-primary)}
.spark a.ev:hover .m-fix,.spark a.ev:focus-visible .m-fix{stroke:var(--text-primary)}
.lg-hi{stroke:var(--text-primary);stroke-width:2}
/* heat map: one neutral sequential ramp; repeats in grey */
.heat-wrap{overflow-x:auto}
.heat{display:block;width:100%;height:auto;overflow:visible}
.heat text.hl{font:var(--font-label);fill:var(--text-primary)}
.heat text.ht{font:var(--font-data-sm);fill:var(--text-secondary)}
.heat text.hn{font:var(--font-data-sm);fill:var(--text-primary);pointer-events:none}
.heat text.hn.inv{fill:var(--text-on-accent)}
.heat .sep{stroke:var(--border-subtle)}
.hc{stroke:transparent;stroke-width:1.5}
.hc.h0,.hc.r0{fill:var(--surface-group)}
.hc.h1{fill:color-mix(in srgb,var(--data-category-1) 18%,var(--surface-raised))}
.hc.h2{fill:color-mix(in srgb,var(--data-category-1) 40%,var(--surface-raised))}
.hc.h3{fill:color-mix(in srgb,var(--data-category-1) 72%,var(--surface-raised))}
.hc.h4{fill:var(--data-category-1)}
.hc.r1{fill:color-mix(in srgb,var(--data-category-2) 25%,var(--surface-raised))}
.hc.r2{fill:color-mix(in srgb,var(--data-category-2) 50%,var(--surface-raised))}
.hc.r3,.hc.r4{fill:var(--data-category-2)}
.heat a.hcell{cursor:pointer}
.heat a.hcell:hover .hc,.heat a.hcell:focus-visible .hc,.hc.on{stroke:var(--text-primary)}
/* repair outcomes: neutral stack, distinct in grey */
.rbar-cell{width:calc(var(--space-48) * 8)}
.rbar{display:block;width:100%;max-width:calc(var(--space-48) * 7.5);height:auto}
.ro.holding{fill:var(--data-category-1)}
.ro.degrading{fill:color-mix(in srgb,var(--data-category-1) 40%,var(--surface-raised))}
.ro.failed{fill:var(--text-primary)}
.ro.falseClear{fill:var(--surface-raised);stroke:var(--text-primary);stroke-width:1.5;stroke-dasharray:3 2}
.ro.pending{fill:var(--border-strong)}
.rbar text.rn{font:var(--font-data-sm);fill:var(--text-on-accent);pointer-events:none}
.rbar text.rn.degrading,.rbar text.rn.falseClear,.rbar text.rn.pending{fill:var(--text-primary)}
.rbar a.rseg:hover .ro,.rbar a.rseg:focus-visible .ro{stroke:var(--text-primary);stroke-width:2}
/* cluster strips: the belt map's language */
.strip-cell{width:72%}
.cstrip{display:block;width:100%;height:auto;overflow:visible}
.cstrip .belt{stroke:var(--map-carry);stroke-width:4;stroke-linecap:round}
.cstrip .anc{stroke:var(--text-primary);stroke-width:1.5}
.cstrip .rec{fill:var(--surface-raised);stroke:var(--text-secondary);stroke-width:1.5}
.cstrip .bandr{fill:color-mix(in srgb,var(--data-category-1) 22%,transparent);stroke:var(--data-category-1);stroke-width:1.5}
.cstrip text.bandn{font:var(--font-data-sm);font-weight:var(--fw-emphasis);fill:var(--text-primary)}
.cstrip a.band{cursor:pointer}
.cstrip a.band:hover .bandr,.cstrip a.band:focus-visible .bandr{fill:color-mix(in srgb,var(--data-category-1) 45%,transparent)}
.legend .bandr{fill:color-mix(in srgb,var(--data-category-1) 22%,transparent);stroke:var(--data-category-1);stroke-width:1.5}
.legend .rec{fill:var(--surface-raised);stroke:var(--text-secondary);stroke-width:1.5}
.legend .anc{stroke:var(--text-primary);stroke-width:1.5}
.tbl-strips td{vertical-align:middle}
.strip-wrap{overflow-x:auto}

/* ---------- Phone: same order, vertical records, tabs as a select ---------- */
@media (max-width:45em){
  .al-tabs .utabs{display:none}
  .al-tabs .tabsel{display:block}
  .al-tabs .tabsel select{width:100%}
  .tbl-alarms.records tr.exp.open{display:block}
  .tbl-alarms.records tr.exp td{display:block;text-align:left}
  .tbl-alarms.records tr.exp td::before{content:none}
  td.acts .hstack{flex-wrap:wrap}
  .al-src{grid-template-columns:1fr}
  .rate-chart{direction:rtl}
  .rate-chart svg{min-width:calc(var(--space-48) * 12.5);direction:ltr}
  td.acts:empty{display:none}
  .tbl-trend.records td.chart-cell,.tbl-strips.records td.strip-cell,.tbl-repair.records td.rbar-cell{flex-direction:column;align-items:stretch;gap:var(--space-4)}
  .tbl-trend.records td.chart-cell .chart{width:100%}
  .tbl-trend.records td.chart-cell .spark,.tbl-repair.records .rbar{max-width:none}
  .strip-cell,.rbar-cell{width:auto}
  .heat{width:calc(var(--space-48) * 14);max-width:none}
  .cstrip{width:calc(var(--space-48) * 13);max-width:none}
  .tbl-trend.records td.chart-cell,.tbl-strips.records td.strip-cell,.tbl-repair.records td.rbar-cell{flex:1 1 100%;display:flex}
  .an-islands .sg{flex:1 1 40%}
  .tlstrip{flex-direction:column;gap:var(--space-12);border-left:var(--size-border-width-thick) solid var(--border-strong);padding-left:var(--space-16)}
  .tlstrip li,.tlstrip li.wait{border-top:0;padding:0}
  .tlstrip li::before{left:calc(var(--space-16) * -1 - var(--size-border-width-thick) / 2 - var(--size-dot) / 2 + var(--size-border-width-thick) / 2);top:var(--space-2)}
  .chart-cell{width:auto}
  .an-scope .toolbar{gap:var(--space-8)}
  .tbl-trend.records td{height:auto}
}