/* SENTINEL v12.4 — Grid & OT view. Split from the Public safety & OT view
   with its visual language unchanged. The at-a-glance strip, ICS row ID and
   tag lines, row dates and "show all" bars are shared with #view-publicsafety
   and styled once, in publicsafety.css. */

/* ── energy & grid (v12.3; moved from the Public safety view in v12.4) ── */
#view-grid .en-lead { padding: var(--s-4) var(--s-5) 0; }
#view-grid .en-bl { font-family: var(--f-display); font-size: var(--t-22); line-height: 1.38; color: var(--paper); max-width: 72ch; text-wrap: pretty; }
#view-grid .en-bl em { font-style: italic; color: var(--amber); }
#view-grid .en-lead .learn-note { margin-top: var(--s-3); }
/* the summary strip copies the Watch pulse (watch.css .pulse-*) */
#view-grid .en-pulse { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: var(--s-5) var(--s-5) 0;
  background: var(--slate); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
#view-grid .en-pulse > li { min-width: 0; }
#view-grid .en-pulse > li + li { border-left: 1px solid var(--rule); }
#view-grid .en-tile { display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  background: none; border: 0; border-radius: 0; text-align: left; font: inherit; color: var(--fog); cursor: pointer; transition: background var(--t-fast); }
#view-grid .en-tile:hover { background: var(--slate-2); }
#view-grid .en-tile:hover span { color: var(--paper); }
#view-grid .en-tile:focus-visible { outline-offset: -2px; }
#view-grid .en-tile b { font-size: var(--t-36); font-weight: 500; line-height: 1; color: var(--paper); }
#view-grid .en-tile span { font-size: var(--t-14); line-height: 1.35; }
#view-grid .en-tile small { display: block; font-size: var(--t-12); color: var(--mist); margin-top: 2px; }
#view-grid .en-tile.is-hot b { color: var(--amber); }
#view-grid .en-tile.is-hot { background: color-mix(in srgb, var(--amber) 6%, transparent); }
#view-grid .en-tile.is-hot:hover { background: color-mix(in srgb, var(--amber) 10%, var(--slate-2)); }

#view-grid .en-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); margin-top: var(--s-5); border-top: 1px solid var(--rule); }
#view-grid .en-sec { min-width: 0; }
#view-grid .en-side { min-width: 0; border-left: 1px solid var(--rule); }
#view-grid .en-side > .en-sec + .en-sec { border-top: 1px solid var(--rule); }
#view-grid .en-sh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); padding: var(--s-4) var(--s-5) 0; min-height: 50px; }
#view-grid .en-h { font-size: var(--t-12); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fog); line-height: 1.4; }
#view-grid .en-h .mono { margin-left: 6px; color: var(--paper); font-weight: 500; letter-spacing: 0; }
#view-grid .en-h:focus { outline: none; }
#view-grid .en-h:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
#view-grid .en-cap { padding: 4px var(--s-5) var(--s-3); font-size: var(--t-12); line-height: 1.55; color: var(--mist); overflow-wrap: anywhere; }
#view-grid .en-cap:empty { display: none; }
#view-grid .en-cap b { color: var(--fog); font-weight: 500; }
#view-grid .en-cap a { color: var(--cyan); }
#view-grid .en-warn { color: var(--sev-high); }
#view-grid .en-list { border-top: 1px solid var(--rule); }
#view-grid .en-list > li.empty { padding-block: var(--s-5); }
#view-grid .en-list .empty { padding-block: var(--s-5); }
#view-grid .en-list .row { padding-block: var(--s-3); }
#view-grid .en-focus { background: color-mix(in srgb, var(--amber) 7%, transparent); }

#view-grid .en-row--kev { box-shadow: inset 3px 0 0 var(--sev-crit); background: color-mix(in srgb, var(--sev-crit) 5%, transparent); }
#view-grid .en-row--grid { box-shadow: inset 3px 0 0 var(--amber); }
#view-grid .en-id { font-size: var(--t-12); color: var(--mist); margin-bottom: 2px; overflow-wrap: anywhere; }
#view-grid .en-id span { color: var(--fog); }
#view-grid .en-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#view-grid .en-kev { margin-top: var(--s-2); font-size: var(--t-13); line-height: 1.5; color: var(--fog); }
#view-grid .en-kev .chip { margin-right: 6px; padding: 0 6px; }
#view-grid .en-cve { background: none; border: 0; padding: 0; font-size: var(--t-13); color: var(--paper); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
#view-grid .en-cve:hover { color: var(--cyan); text-decoration-color: currentColor; }
#view-grid .en-more { padding: var(--s-2) var(--s-5) var(--s-3); border-top: 1px solid var(--rule); }
#view-grid .en-more:empty { display: none; }
#view-grid .en-legend { padding: var(--s-3) var(--s-5) var(--s-4); border-top: 1px solid var(--rule); font-size: var(--t-12); line-height: 1.6; color: var(--mist); }

#view-grid .en-inc--confirmed-cyber { box-shadow: inset 3px 0 0 var(--sev-crit); }
#view-grid .en-inc--suspected { box-shadow: inset 3px 0 0 var(--amber); }
#view-grid .en-inc--outage { box-shadow: inset 3px 0 0 var(--rule-2); }
#view-grid .en-inc-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-2); font-size: var(--t-14); line-height: 1.4; }
#view-grid .en-inc-h b { color: var(--paper); overflow-wrap: anywhere; }
#view-grid .en-inc-h .chip { padding: 0 6px; }
#view-grid .en-where { font-size: var(--t-12); color: var(--fog); }
#view-grid .en-q { margin-top: 6px; font-size: var(--t-13); line-height: 1.5; color: var(--fog); }
#view-grid .en-q q { font-family: var(--f-display); font-size: var(--t-16); color: var(--paper); }
#view-grid .en-q q a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
#view-grid .en-q q a:hover { color: var(--cyan); text-decoration-color: currentColor; }
#view-grid .en-note { padding: var(--s-2) var(--s-5) var(--s-3); font-size: var(--t-13); color: var(--fog); }
#view-grid .en-note a { color: var(--cyan); }

#view-grid .en-victim { font-size: var(--t-14); line-height: 1.4; overflow-wrap: anywhere; }
#view-grid .en-victim b { color: var(--paper); font-weight: 600; }
#view-grid .en-claim .row-sub a { color: var(--cyan); }
#view-grid .en-claim .row-sub .chip { padding: 0 6px; margin-right: 2px; }

#view-grid #grEnGeo { padding: var(--s-3) var(--s-5) var(--s-5); }
#view-grid #grEnGeo > .empty { padding: var(--s-3) 0 0; }
#view-grid .en-gnow { display: flex; align-items: center; gap: var(--s-4); }
#view-grid .en-g { font-size: var(--t-36); font-weight: 500; line-height: 1; color: var(--paper); }
#view-grid .en-gnow.is-hot .en-g { color: var(--amber); }
#view-grid .en-gword { font-size: var(--t-16); font-weight: 600; color: var(--paper); }
#view-grid .en-gword .mono { font-weight: 400; color: var(--fog); }
#view-grid .en-gmeta { font-size: var(--t-12); color: var(--mist); margin-top: 2px; }
#view-grid .en-gmeta em { font-style: normal; color: var(--amber); }
#view-grid .en-gkv { margin-top: var(--s-4); font-size: var(--t-13); line-height: 1.5; gap: var(--s-2) var(--s-4); }
#view-grid .en-gkv dd { color: var(--fog); }
#view-grid .en-gkv a { color: var(--cyan); text-decoration: none; white-space: nowrap; }
#view-grid .en-gkv a:hover { text-decoration: underline; }

/* sector-tag-only advisories: a labelled disclosure under the grid list */
#view-grid .en-tagged { border-top: 1px solid var(--rule); }
#view-grid .en-tg-btn { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: var(--s-3) var(--s-5); background: none; border: 0; text-align: left; font: inherit; color: var(--fog); cursor: pointer; transition: background var(--t-fast); }
#view-grid .en-tg-btn:hover { background: var(--slate-2); }
#view-grid .en-tg-btn:focus-visible { outline-offset: -2px; }
#view-grid .en-tg-h { font-size: var(--t-14); font-weight: 600; color: var(--paper); }
#view-grid .en-tg-h::before { content: "\25B8"; display: inline-block; width: 1.1em; color: var(--mist); transition: transform var(--t-fast); }
#view-grid .en-tg-btn[aria-expanded="true"] .en-tg-h::before { transform: rotate(90deg); }
#view-grid .en-tg-h .mono { margin-left: 4px; color: var(--fog); font-weight: 500; }
#view-grid .en-tg-m { font-size: var(--t-12); line-height: 1.5; color: var(--mist); padding-left: 1.1em; }
#view-grid .en-tg-list .row-title { font-weight: 500; }
#view-grid .en-kev--quiet { color: var(--mist); }
#view-grid .en-kev--quiet .en-cve { color: var(--fog); }

#view-grid .en-ctx { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--rule); font-size: var(--t-13); color: var(--fog); }
#view-grid .en-ctx a { color: var(--cyan); text-decoration: none; }
#view-grid .en-ctx a:hover { text-decoration: underline; }

/* ── ICS advisories ── */
#view-grid .gr-filters { display: flex; flex-direction: column; gap: var(--s-3); border-bottom: 1px solid var(--rule); }
#view-grid .gr-filters .seg { align-self: flex-start; }
#view-grid .gr-frow { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-3); }
#view-grid #grSectors { align-items: center; }
#view-grid #grSectors .field-label { margin-right: var(--s-1); }
#view-grid .gr-row--ps { box-shadow: inset 3px 0 0 var(--amber); }
#view-grid .gr-row--water { box-shadow: inset 3px 0 0 var(--sev-crit); }

/* ── sectors ── */
#view-grid .gr-sec { list-style: none; display: grid; gap: 2px; margin-bottom: var(--s-3); }
#view-grid .gr-secb { display: grid; grid-template-columns: minmax(0, 1fr) 90px 2.5em; align-items: center; gap: var(--s-3); padding: 6px 8px; margin-inline: -8px; width: calc(100% + 16px); background: none; border: 0; border-radius: var(--radius); color: var(--paper); text-align: left; font-size: var(--t-14); cursor: pointer; }
#view-grid .gr-secb:hover { background: var(--slate-2); }
#view-grid .gr-secb[aria-pressed="true"] { background: color-mix(in srgb, var(--amber) 8%, transparent); box-shadow: inset 2px 0 0 var(--amber); }
#view-grid .gr-secb b { text-align: right; font-weight: 500; }
#view-grid .gr-secn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── protocol exposure ── */
#view-grid .gr-port { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) auto; gap: var(--s-3); padding: var(--s-3) var(--s-5); align-items: start; }
#view-grid .gr-pn { font-size: var(--t-22); color: var(--amber); line-height: 1.1; }
#view-grid .gr-pm p:first-child { font-size: var(--t-14); }
#view-grid .gr-pm .meter { margin-top: 8px; }
#view-grid .gr-pc { font-size: var(--t-13); color: var(--fog); padding-top: 2px; }
#view-grid #grPorts .empty { padding-block: var(--s-5); }

/* ── water utilities (the energy panel's section language: .en-sh, .en-list, .en-inc) ── */
#view-grid .gr-wgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#view-grid .gr-wsec { min-width: 0; }
#view-grid .gr-wsec + .gr-wsec { border-left: 1px solid var(--rule); }

@media (max-width: 1080px) {
  #view-grid .en-grid { grid-template-columns: minmax(0, 1fr); }
  #view-grid .en-side { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 900px) {
  #view-grid .en-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-grid .en-pulse > li { border-left: 0; border-top: 1px solid var(--rule); }
  #view-grid .en-pulse > li:nth-child(-n+2) { border-top: 0; }
  #view-grid .en-pulse > li:nth-child(2n) { border-left: 1px solid var(--rule); }
  #view-grid .en-pulse > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  #view-grid .gr-wgrid { grid-template-columns: minmax(0, 1fr); }
  #view-grid .gr-wsec + .gr-wsec { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 720px) {
  #view-grid .gr-frow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  #view-grid .en-lead, #view-grid .en-sh, #view-grid .en-cap, #view-grid .en-more, #view-grid .en-legend,
  #view-grid .en-note, #view-grid .en-ctx, #view-grid #grEnGeo { padding-left: var(--s-4); padding-right: var(--s-4); }
  #view-grid .en-bl { font-size: var(--t-18); }
  #view-grid .en-pulse { margin: var(--s-4) var(--s-4) 0; }
  #view-grid .en-tg-btn { padding-inline: var(--s-4); }
  #view-grid .en-tile { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; }
  #view-grid .en-tile b { font-size: var(--t-22); min-width: 1.6em; }
  #view-grid .en-tile span { font-size: var(--t-13); line-height: 1.25; }
  #view-grid .en-tile small { display: none; }
  #view-grid .en-tile small.keep { display: block; }
  #view-grid .en-list .row { grid-template-columns: minmax(0, 1fr); }
  #view-grid .en-list .row-side { flex-direction: row; justify-content: flex-start; align-items: baseline; gap: var(--s-3); text-align: left; }
  #view-grid .en-gkv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  #view-grid .en-gkv dd + dt { margin-top: var(--s-2); }
  #view-grid .gr-port { padding-inline: var(--s-4); grid-template-columns: 3.4em minmax(0, 1fr); }
  #view-grid .gr-pc { grid-column: 2; }
}