/* ============================================================================
   MASAR v5 — css5/9-pages-a.css
   Page-specific LAYOUT for the first three modules: Command Center,
   Live Operations and Live Tracking. Everything here is either a grid,
   a dock or an anchored overlay — there is no new component vocabulary in
   this file and no colour that is not a token.

   Logical properties only. The map itself is forced LTR in 8-rtl.css
   because it is a picture of the world; every panel below is interface and
   turns with the language.
   ========================================================================== */

/* ==========================================================================
   COMMAND CENTER
   ========================================================================== */


/* the map is the centrepiece: it gets half the viewport, never a thumbnail */
.p-command__mapcard > .m-card__body{min-height:0}

/* the rail matches the map so the two read as one band */
.p-command__panel > .m-card__body{max-height:380px}


.p-command__ai{display:flex;flex-direction:column;gap:var(--s-1);margin-bottom:var(--s-4)}
.p-command__rec{
  display:flex;align-items:flex-start;gap:6px;
  font:var(--ty-body-sm);color:var(--text);padding-inline-start:var(--s-2);
}
.p-command__rec svg{flex:0 0 auto;margin-top:3px;opacity:.6}
.p-command__basis{font:var(--ty-caption);color:var(--text-3);padding-inline-start:var(--s-2)}
.p-command__method{
  margin-top:var(--s-3);padding-top:var(--s-3);
  border-top:1px solid var(--line-subtle);line-height:1.6;
}

/* ==========================================================================
   LIVE OPERATIONS — the HUD layer over a full-bleed map
   ========================================================================== */

/* `.m-page` is `position:absolute; inset:0` — that is what gives every page
   its height. This rule said `position:relative` at the same specificity and
   later in the cascade, so the live page became a static-height box whose
   only children are absolutely positioned: it measured ZERO pixels tall and
   the whole screen came up blank. The page is already a containing block. */
/* ================================================================== LIVE
   The wall board. It is a page like any other now — a header with its own
   sections, the filters in the console's one filter bar, the shift on one
   line of figures — and then the map, with the whole width to itself.

   Before this it was a full-bleed map with a 320-pixel filter panel held
   open down the left whether or not anyone was filtering, a floating shift
   card, a four-button bar along the bottom, and three popups that could all
   be open at once. And it had been invisible since the build: `.p-live` set
   `position:relative` at the same specificity as `.m-page`'s `absolute` and
   later in the cascade, so the page measured zero pixels tall and the whole
   screen came up blank. */

/* FOUR EMPTY ROWS STILL COST FOUR GAPS.
   The head, the tab strip and the filter bar are all lifted onto the
   shell's band, so their rows here are permanently empty — but a gap is
   charged between TRACKS, not between contents, and four 10px gaps put a
   forty-pixel void between the band and the map. One row: the hidden
   containers produce no grid items at all, and the body starts where the
   padding says it starts. */
.m-page.p-live{
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  gap:10px;padding:14px var(--gutter) 16px;overflow:hidden;
}
.p-live > #liveFilters:empty,.p-live > #liveTabs:empty{display:none}
/* The filter bar is lifted into the scope bar and the tab strip onto the
   header line, so either slot can vanish from this grid — and a row that
   vanishes takes the 1fr row's index with it, which left the map placed in
   an `auto` row and drawn zero pixels tall. The body claims the last row by
   name, whatever happened to the ones above it. */
.p-live__body{position:relative;min-height:0;grid-row:-2 / -1}
/* the wall board: the map, and beside it the list of what wants a person */
.p-live__view{
  position:absolute;inset:0;display:grid;
  /* THE QUEUE TAKES THE WIDTH THE MAP WAS WASTING.
     Qatar is a tall, narrow peninsula in a wide frame, so past a point
     every extra pixel given to the map buys more sea. The queue spends
     the same pixels on words: at 340px a fault line wrapped onto three
     rows, at 420 most fit two, and a screen of the list holds two or
     three more things needing a person. */
  grid-template-columns:minmax(0,1fr) clamp(340px,24vw,424px);gap:10px;min-height:0;
}
.p-live__rail{min-height:0;overflow:hidden}
.p-live__rail > .m-card__body{overflow:auto;overscroll-behavior:contain;min-height:0}
/* EVERYTHING STAYS ON THE PAGE.
   The queue used to be dropped on a narrow window to protect the map. A
   control room that loses the list of things needing a person has lost
   the half of the screen that is actually asking for work, so on a narrow
   window the list goes UNDER the map instead of going away. */
@media (max-width:1180px){
  .p-live__view{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(220px,1fr) 300px;
  }
}
.p-live__mapwrap{
  position:relative;inset:auto;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;background:var(--map-bg);min-height:0;
}
/* the panel is the frame the card sits in, not a card itself — it held a
   border AND a background of its own, so the list inside it was drawn on a
   second surface with no head and no edge of its own */
.p-live__panel{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0}
.p-live__panelcard{flex:1 1 auto;min-height:0}
.p-live__panelcard > .m-card__body{overflow:auto;overscroll-behavior:contain;min-height:0}
.p-live__panel[hidden]{display:none}
.p-live .m-map{position:absolute;inset:0}
.p-live__hud{
  position:absolute;inset:0;
  z-index:690;pointer-events:none;
}
.p-live__hud > *{pointer-events:auto}

/* the card anchored to the selected unit */
.p-live__card{
  position:absolute;width:290px;max-height:min(70%,460px);
  display:flex;flex-direction:column;overflow:hidden;
}
.p-live__card[hidden]{display:none !important}
.p-live__cardhead{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--map-panel-line);font:var(--ty-label);color:var(--text);
}
.p-live__cardbody{padding:11px 12px;overflow:auto;min-height:0;display:flex;flex-direction:column;gap:9px}
.p-live__cardfoot{display:flex;gap:7px;padding:9px 12px;border-top:1px solid var(--map-panel-line)}
.p-live__cardfoot .m-btn{flex:1 1 auto}
.p-live__kv{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font:var(--ty-caption)}
.p-live__kv dt{color:var(--text-3)}
.p-live__kv dd{margin:0;color:var(--text);font-weight:550;text-align:end}
.p-live__pills{display:flex;flex-wrap:wrap;gap:5px}
.p-live__note{font:var(--ty-caption);color:var(--text-3);line-height:1.5}

/* ==========================================================================
   LIVE TRACKING
   ========================================================================== */

.p-tracking__search{width:min(240px,42vw)}
/* the map fills the region it is given rather than asking for a fixed slab
   of the page — the region is already sized by what is above it */
.p-tracking__map{position:relative;min-height:260px;height:100%}
.p-tracking__mapcard > .m-card__body{min-height:0}
/* the rail runs the full height of the map beside it: its ground reaches
   the card's foot with no white remainder, and the feeds scroll inside */
.p-tracking__rail{display:flex;flex-direction:column;min-height:0}
.p-tracking__rail > .m-card__head{flex:0 0 auto}
.p-tracking__rail > .m-card__body{
  display:flex;flex-direction:column;gap:var(--s-2);
  flex:1 1 auto;min-height:0;
  overflow:auto;overscroll-behavior:contain;
  background:var(--surface-subtle);
  padding:12px 12px 12px;
}
.p-tracking__rail #trkRings{
  background:var(--surface);border:1px solid var(--line-subtle);border-radius:12px;
  box-shadow:0 1px 2px rgba(9,30,54,.05);padding:10px 8px 4px;
}
.p-tracking__sub{
  font:var(--ty-label-sm);color:var(--text-3);text-transform:uppercase;
  letter-spacing:.06em;font-size:10px;padding:4px 2px 0;
}
/* the trip and workshop feeds ride as soft mini-cards on the rail ground */
.p-tracking__rail .m-activity__i{
  background:var(--surface);border:1px solid var(--line-subtle);border-radius:10px;
  box-shadow:0 1px 2px rgba(9,30,54,.05);margin-bottom:6px;
}
.p-tracking__rail .m-activity__i:hover{border-color:var(--line-strong);
  box-shadow:0 4px 12px rgba(9,30,54,.09)}

/* -- the fleet, as the same card list the delivery pages use -- */
#trkFleet .m-card__body{padding:0}
.p-trkl{
  display:flex;flex-direction:column;gap:8px;
  padding:12px 14px;background:var(--surface-subtle);min-height:100%;
}
.p-trkl__i{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-radius:12px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line-subtle);
  box-shadow:0 1px 2px rgba(9,30,54,.05);
  transition:box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.p-trkl__i:hover{border-color:var(--line-strong);box-shadow:0 4px 14px rgba(9,30,54,.09)}
.p-trkl__i:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.p-trkl__ic{
  flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--sc,var(--accent)) 13%,transparent);
  color:var(--sc,var(--accent));
}
.p-trkl__x{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.p-trkl__t{display:flex;align-items:center;gap:8px;min-width:0}
.p-trkl__t b{font:var(--ty-label);font-size:13px;color:var(--text)}
.p-trkl__t u{font:500 11px/1 var(--font-mono);color:var(--text-3);text-decoration:none}
.p-trkl__m{font:var(--ty-caption);color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-trkl__fuel{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;width:120px;
}
.p-trkl__fuel .m-bar{flex:1 1 auto}
.p-trkl__fuel em{font:600 11px/1 var(--font);font-style:normal;color:var(--text-2);
  font-variant-numeric:tabular-nums;min-width:32px;text-align:end}
.p-trkl__act{flex:0 0 auto;display:flex;gap:2px}
@media (max-width:1100px){ .p-trkl__fuel{display:none} }

/* fleet status: two clean cards */
.p-trks > .m-card{min-width:0}

/* ==========================================================================
   NARROW VIEWPORTS — the rails stack under their panel rather than squeeze
   ========================================================================== */
@media (max-width:1100px){
  .p-command__rail > .m-card__body,
  .p-tracking__map,.p-tracking__rail > .m-card__body{height:auto;max-height:none}
  .p-tracking__map{height:clamp(320px,52vh,520px)}
}
@media (max-width:1000px){
  .m-page.p-live{overflow:auto}
}

/* ==========================================================================
   COMMAND CENTRE — three rows, one screen, nothing spare.
   Head, six figures, and the map beside the list of what needs a person.
   Everything that used to sit below them was a duplicate of a page that
   owns it properly, and duplicates are what made this unreadable.
   ========================================================================== */

/* ONE COLUMN, AND IT IS THE PAGE.
   Without an explicit column the implicit one is sized to its widest item
   — and the header band is deliberately WIDER than the content box, because
   it bleeds into the page padding. The column grew to fit the bleed, so the
   whole page became thirty-seven pixels wider than the window and the
   buttons at its end were clipped. */
/* ============================================================ TODAY (v6)
   One screen, no scroll: four verdict tiles, then three regions — the
   day's curve and streams, the country, the queue of what needs a person. */
.m-page.p-command{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
  gap:12px;
  padding:12px var(--gutter) 14px;
  overflow:hidden;
  animation:m-fade var(--t-base) var(--ease) both;
}

/* -- the verdict tiles ------------------------------------------------- */
.p-td__tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.m-vt{
  position:relative;display:flex;flex-direction:column;gap:3px;
  padding:11px 15px 0;min-height:92px;text-align:start;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-xs);overflow:hidden;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.m-vt:hover{border-color:var(--line-strong);box-shadow:var(--sh-sm)}
.m-vt:active{transform:scale(.992)}
.m-vt:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.m-vt__top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.m-vt__l{
  font:600 10.5px/14px var(--font);letter-spacing:.055em;text-transform:uppercase;
  color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[dir="rtl"] .m-vt__l{letter-spacing:0}
.m-vt__state{
  flex:0 0 auto;display:inline-flex;align-items:center;
  height:20px;padding:0 8px;border-radius:var(--r-full);
  font:600 10.8px/1 var(--font);white-space:nowrap;
}
.m-vt__state--ok{background:var(--ok-soft);color:var(--ok)}
.m-vt__state--warn{background:var(--warn-soft);color:var(--warn)}
.m-vt__state--crit{background:var(--crit-soft);color:var(--critical)}
.m-vt__state--neutral{background:var(--neutral-soft);color:var(--text-2)}
.m-vt__v{
  display:flex;align-items:baseline;gap:5px;
  font:700 23px/27px var(--font);letter-spacing:-.02em;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.m-vt__v em{font-style:normal;font:600 13px/1 var(--font);color:var(--text-3)}
.m-vt__v small{font:var(--ty-label-sm);color:var(--text-3);font-weight:550}
.m-vt__foot{
  font:var(--ty-caption);font-size:10.8px;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.m-vt__g{display:block;margin:4px -15px 0;min-width:0}
.m-vt__g:empty{display:none}
.m-vt__g .m-spark--fluid{width:100%;height:22px;display:block}
.m-vt > :last-child:not(.m-vt__g){padding-bottom:11px}

/* -- the working row: the country, and the queue ----------------------- */
.p-td__main{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(330px,24vw,412px);
  grid-template-rows:minmax(0,1fr);
  gap:12px;min-height:0;
}
.m-page.p-command > .p-td__main{grid-row:-2 / -1}
.p-td__map{min-height:0}
.p-td__queue{min-height:0}
.p-td__qfoot{padding:0}
.p-td__all{
  display:flex;align-items:center;justify-content:center;gap:4px;width:100%;
  height:36px;font:var(--ty-label-sm);color:var(--accent-press);
}
.p-td__all:hover{background:var(--surface-sunken)}
html[dir="rtl"] .p-td__all svg{transform:scaleX(-1)}
.p-rail__n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:17px;padding:0 5px;margin-inline-end:6px;
  border-radius:var(--r-full);background:color-mix(in srgb,var(--rc,var(--accent)) 14%,transparent);
  color:var(--rc,var(--accent));font:700 10.5px/1 var(--font);
  font-variant-numeric:tabular-nums;font-style:normal;vertical-align:1px;
}
/* the one-line analyser finding at the head of the rail */
.p-command__aibar{
  flex:0 0 auto;display:flex;align-items:flex-start;gap:9px;
  padding:9px 15px;border-bottom:1px solid var(--line-subtle);
  background:var(--surface-subtle);min-width:0;
}
.p-command__aiic{
  flex:0 0 auto;width:24px;height:24px;border-radius:var(--r-sm);
  display:grid;place-items:center;background:var(--neutral-soft);color:var(--text-2);
}
.p-command__aibar--crit .p-command__aiic{background:var(--crit-soft);color:var(--critical)}
.p-command__aibar--warn .p-command__aiic{background:var(--warn-soft);color:var(--warn)}
.p-command__aibar--info .p-command__aiic{background:var(--accent-soft);color:var(--accent-press)}
.p-command__aitx{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
/* THE FINDING IS A SENTENCE, SO IT IS ALLOWED TO BE ONE.
   Held to a single line it read "3 loads discharged at a site tha…" —
   which is a headline that stops exactly where it starts to matter. Two
   lines carry the whole finding in the width the rail actually has. */
.p-command__aitx b{
  font:var(--ty-label);font-size:11.8px;line-height:1.32;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.p-command__aitx span{
  font:var(--ty-caption);font-size:10.6px;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.p-command__aimore{
  flex:0 0 auto;min-width:20px;height:18px;padding:0 6px;margin-top:1px;border-radius:var(--r-full);
  background:var(--neutral-soft);color:var(--text-2);
  font:600 10.5px/18px var(--font);text-align:center;
}
.p-command__ailink{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;margin-top:2px;
  font:var(--ty-label-sm);font-size:11px;color:var(--accent-press);white-space:nowrap;
}
.p-command__ailink:hover{text-decoration:underline}
html[dir="rtl"] .p-command__ailink svg{transform:scaleX(-1)}
.p-command__mapcard{
  position:relative;min-height:0;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--map-bg);box-shadow:var(--sh-xs);
}
.p-command__map{position:absolute;inset:0;height:auto;min-height:0}
.p-command__map .m-map{position:absolute;inset:0}

/* -- the rail --------------------------------------------------------- */
.p-command__rail{display:flex;flex-direction:column;min-height:0;overflow:hidden}
/* the title and the figure share ONE line: a title block with no basis
   takes the whole row and pushes anything beside it onto a second */
.p-command__rail > .m-card__head{min-height:46px;padding:9px 15px;flex-wrap:nowrap}
.p-command__rail > .m-card__head .m-card__title{flex:0 1 auto;min-width:0}
.p-command__rail > .m-card__head h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-command__rail > .m-card__head h3{font:var(--ty-h3);font-size:14px}
.p-command__raillist{flex:1 1 auto;min-height:0;overflow:auto}
.p-command__raillist .p-rail__i{padding-inline:15px 13px}
html[dir="rtl"] .p-command__raillist .p-rail__i{padding-inline:13px 15px}

/* THE ONE FIGURE ON THE RAIL'S TITLE ROW.
   This was a band of two tiles between the card's name and its list — a
   third thing to read before the first row. The count of critical alarms
   is already the first chip of the summary strip, so it is not said twice;
   contractor compliance is the one figure that belongs to this card and
   nowhere else, and it rides at the end of the title row. */
.p-command__comply{
  display:inline-flex;align-items:center;gap:5px;
  height:24px;padding:0 9px;border-radius:var(--r-full);
  background:var(--neutral-soft);color:var(--text-2);
}
.p-command__comply b{font:700 12px/1 var(--font);color:var(--text);font-variant-numeric:tabular-nums}
.p-command__comply span{font:var(--ty-caption);font-size:10.4px}
.p-command__comply svg{width:13px;height:13px;opacity:.85}
.p-command__comply:hover{filter:brightness(.97)}
.p-command__comply--ok{background:var(--ok-soft)}
.p-command__comply--ok b,.p-command__comply--ok svg{color:var(--ok)}
.p-command__comply--info{background:var(--accent-soft)}
.p-command__comply--info b,.p-command__comply--info svg{color:var(--accent-press)}
.p-command__comply--warn{background:var(--warn-soft)}
.p-command__comply--warn b,.p-command__comply--warn svg{color:var(--warn)}

/* -- the map furniture, kept quiet ------------------------------------ */
/* The GROUP carries the panel, not the button: styling .m-map-btn here beat
   `.m-map-btn[aria-pressed="true"]` on specificity and cascade order, so the
   selected basemap sat there looking exactly like the two it was chosen
   over. A control that cannot show its own state is not a control. */
.p-command .m-hud,.p-command .m-map-grp,.p-command .m-drill{
  background:color-mix(in srgb,var(--surface) 93%,transparent);
  box-shadow:0 2px 12px rgba(6,31,56,.26);
}

/* -- responsive ------------------------------------------------------- */
@media (max-width:1330px){
  /* the movement still shows as an arrow and a figure; the words go */
  .p-command__kpis .m-kpi__d span{display:none}
}
/* -- narrower windows: the left column folds first, then everything
      stacks; the page is then allowed to scroll ------------------------- */
@media (max-width:1460px){
  .p-td__main{grid-template-columns:minmax(0,1fr) clamp(312px,23vw,368px)}
}
@media (max-width:1100px){
  .m-page.p-command{grid-template-rows:auto auto;overflow:auto}
  .p-td__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-td__main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(300px,52vh) auto}
  .p-td__map,.p-td__queue{grid-column:1;grid-row:auto}
  .p-td__queue{min-height:340px}
}
/* EVERYTHING STAYS ON THE PAGE — on a short window every part gets a
   little smaller in step, and the map keeps whatever is left. */
@media (max-height:860px){
  .m-page.p-command{gap:10px;padding:10px var(--gutter) 12px}
  .p-td__tiles{gap:10px}
  .p-td__main{gap:10px}

  .m-vt{min-height:82px;padding:9px 13px 0}
  .m-vt__v{font:700 21px/25px var(--font)}
  .m-vt__g .m-spark--fluid{height:18px}
  .p-command__rail > .m-card__head{min-height:40px;padding:6px 13px}
}
@media (max-height:780px){
  .m-page.p-command{gap:8px;padding:8px var(--gutter) 10px}
  .m-vt{min-height:74px;padding:8px 12px 0;gap:2px}
  .m-vt__v{font:700 19px/23px var(--font)}
  .m-vt__foot{display:none}
  .m-vt__g .m-spark--fluid{height:14px}

}

/* ==================================================== THE ATTENTION RAIL
   A queue of things that need a person, read top to bottom. Each row says
   what, where and how long — and opens the record over this page rather
   than navigating to it, so the operator never loses the map or their
   place in the queue. The colour bar is the severity; it is the only
   colour in the row, because everything in this list is already an
   exception and painting all of it red says nothing. */

/* THE SUMMARY STRIP — the shape of the queue before any of it is read,
   and a filter for each kind. Sticky, because it is the thing you come back
   to after scrolling into the list. */
.p-rail__sum{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  padding:8px 13px;background:var(--surface);
  border-bottom:1px solid var(--line-subtle);
}
.p-rail__chip{
  display:inline-flex;align-items:center;gap:5px;
  height:24px;padding:0 9px;border-radius:var(--r-full);
  background:var(--surface-sunken);border:1px solid transparent;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.p-rail__chip i{width:7px;height:7px;border-radius:var(--r-full);flex:0 0 auto}
.p-rail__chip b{font:600 11.5px/1 var(--font);color:var(--text);font-variant-numeric:tabular-nums}
.p-rail__chip span{font:var(--ty-caption);font-size:10.6px;color:var(--text-2);white-space:nowrap}
.p-rail__chip:hover{background:var(--neutral-soft);border-color:var(--line)}
.p-rail__chip.is-on{background:var(--accent-soft);border-color:var(--accent-soft-line)}
.p-rail__chip.is-on span,.p-rail__chip.is-on b{color:var(--accent-press)}
.p-rail__clear{
  display:inline-grid;place-items:center;width:22px;height:22px;
  border-radius:var(--r-full);color:var(--text-3);
}
.p-rail__clear:hover{background:var(--neutral-soft);color:var(--text)}

.p-rail{display:flex;flex-direction:column}
.p-rail__i{
  position:relative;display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px 10px 14px;
  border-top:1px solid var(--line-subtle);
  cursor:pointer;transition:background var(--t-fast) var(--ease);
}
.p-rail__i:first-child{border-top:0}
/* The severity bar is for the rows that ARE a severity. On a list where
   every row carried one, the bar stopped meaning anything and the eye had
   nowhere to land first. */
.p-rail__i--hot::before{
  content:'';position:absolute;inset-block:9px;inset-inline-start:0;
  width:3px;border-radius:0 3px 3px 0;background:var(--rc,var(--accent));
}
.p-rail__i:hover{background:var(--surface-sunken)}
.p-rail__i:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.p-rail__ic{
  flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-sm);
  display:grid;place-items:center;margin-top:1px;
  background:color-mix(in srgb,var(--rc,var(--accent)) 14%,transparent);
  color:var(--rc,var(--accent));
}
.p-rail__x{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.p-rail__x b{
  font:var(--ty-body-sm);font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.p-rail__x span{
  font:var(--ty-caption);color:var(--text-3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.p-rail__r{flex:0 0 auto;display:flex;align-items:center;gap:3px;padding-top:2px;color:var(--text-3)}
.p-rail__t{font:var(--ty-caption);font-variant-numeric:tabular-nums;white-space:nowrap}
/* the chevron is an affordance, not a decoration: it appears on the row the
   pointer is on, so a list of forty rows is not forty arrows */
.p-rail__r svg{opacity:0;transition:opacity var(--t-fast) var(--ease)}
.p-rail__i:hover .p-rail__r svg,.p-rail__i:focus-visible .p-rail__r svg{opacity:.7}
/* the head of an attention card: its name, and how many are in it */
.m-card__head .m-card__n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:19px;padding:0 6px;margin-inline-start:7px;
  border-radius:var(--r-full);background:var(--neutral-soft);color:var(--text-2);
  font:600 11px/19px var(--font);font-variant-numeric:tabular-nums;
}
.m-card__head .m-card__n--crit{background:var(--crit-soft);color:var(--critical)}
.p-rail__r svg{width:14px;height:14px}
.p-rail__i:hover .p-rail__r svg{color:var(--accent)}
html[dir="rtl"] .p-rail__i{padding:11px 14px 11px 12px}
html[dir="rtl"] .p-rail__r svg{transform:scaleX(-1)}

/* ==================================================== THE PEEK CARD
   The body of the detail modal opened from any list. Same anatomy as the
   map popup, because it answers the same question. */

.m-peek{display:flex;flex-direction:column;gap:12px}
.m-peek__head{display:flex;align-items:center;gap:11px}
.m-peek__ic{
  flex:0 0 auto;width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;
  background:color-mix(in srgb,var(--pc,var(--accent)) 13%,transparent);color:var(--pc,var(--accent));
}
.m-peek__id{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.m-peek__id b{font:var(--ty-h3);font-size:16px;color:var(--text)}
.m-peek__id span{font:var(--ty-caption);color:var(--text-2);overflow:hidden;text-overflow:ellipsis}
.m-peek__metric{
  display:flex;align-items:baseline;gap:8px;padding:11px 13px;
  background:var(--surface-sunken);border-radius:var(--r-md);
}
.m-peek__metric b{font:var(--ty-metric-sm);font-size:22px;color:var(--text)}
.m-peek__metric span{font:var(--ty-caption);color:var(--text-2)}
.m-peek__kv{
  display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;
  font:var(--ty-body-sm);
}
.m-peek__kv dt{color:var(--text-3)}
.m-peek__kv dd{margin:0;color:var(--text);font-weight:550;text-align:end;overflow-wrap:anywhere}
.m-peek__note{
  display:flex;align-items:flex-start;gap:7px;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--warn-soft);color:var(--warn);font:var(--ty-caption);
}
.m-peek__note svg{flex:0 0 auto;margin-top:1px}

/* A CUT ROW SHOULD READ AS "MORE BELOW", NOT AS A BROKEN ROW.
   Both queues are taller than their panel by design; without a signal the
   half-row at the floor looks like a rendering fault. The panel carries a
   soft edge over its own last rows — the text dissolves into the card
   instead of being sliced by it, and a hairline of shadow under it says
   the list goes on. It sits over the list, not in it, so the rows keep
   their hover and their click. */
.p-live__rail,.p-command__rail{position:relative}
.p-live__rail::after,.p-command__rail::after{
  content:'';position:absolute;inset-inline:1px;bottom:1px;height:22px;
  pointer-events:none;z-index:2;border-radius:0 0 var(--r-lg) var(--r-lg);
  background:linear-gradient(to top,
    var(--surface) 22%,
    color-mix(in srgb,var(--surface) 55%,transparent) 62%,
    color-mix(in srgb,var(--surface) 0%,transparent) 100%);
}