/* ============================================================================
   MASAR v5 — css5/9-pages-b.css
   Page layout for the delivery group: requests, work orders, collection,
   planning. Nothing here restyles a kit component — it only places them, and
   adds the four things the kit has no vocabulary for yet:

     · a filter rail          (.p-rail)
     · a kanban board         (.p-board / .p-wo)
     · a month grid           (.p-cal__*)
     · a definition row       (.p-def) and a detail block (.p-block)

   Those four are flagged in the handover as kit candidates: every one of them
   is now used by more than one page.

   Tokens only, logical properties only, both themes by inheritance.
   ========================================================================== */

/* ============================================================ shared atoms */

.p-muted{color:var(--text-3)}
.p-mono{font-family:var(--font-mono);font-size:11.5px;letter-spacing:-.01em}
.p-sub{display:block;font:var(--ty-caption);color:var(--text-3);font-variant-numeric:tabular-nums}
.p-note{font:var(--ty-caption);color:var(--text-3);line-height:1.6}
.p-note--stage{
  margin:5px 2px 0;padding:0;background:none;border:0;
  display:flex;align-items:center;gap:6px;
}
.p-desc{font:var(--ty-body-sm);color:var(--text-2);line-height:1.65;margin-block:6px}

.p-def{
  display:flex;align-items:baseline;gap:var(--s-3);
  padding:6px 0;border-bottom:1px dashed var(--line);min-width:0;
}
.p-def:last-child{border-bottom:0}
.p-def > span{flex:0 0 40%;font:var(--ty-label-sm);color:var(--text-3)}
.p-def > b{flex:1 1 auto;min-width:0;font:var(--ty-body-sm);color:var(--text);font-weight:550;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}

.p-block{
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-3) var(--s-4);margin-top:var(--s-3);background:var(--surface);
}
.p-block > h4{
  font:var(--ty-label);color:var(--text-2);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:var(--s-2);
}

.p-actrow{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
.p-actrow--main{
  margin:var(--s-3) 0;padding:var(--s-3);border-radius:var(--r-md);
  background:var(--surface-sunken);border:1px solid var(--line);
}

.p-atts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.p-att{
  display:inline-flex;align-items:center;gap:5px;max-width:100%;
  padding:3px 8px;border-radius:var(--r-full);background:var(--surface-sunken);
  border:1px solid var(--line);font:var(--ty-caption);color:var(--text-2);
}
.p-att svg{width:13px;height:13px;flex:0 0 auto}

.p-mask{font-family:var(--font-mono);font-size:11.5px;color:var(--text-2);letter-spacing:.02em}
.p-rate{font:var(--ty-metric-sm);color:var(--text);font-variant-numeric:tabular-nums}

.p-sla{font:var(--ty-label-sm);font-variant-numeric:tabular-nums;white-space:nowrap}
.p-sla--ok{color:var(--ok)}
.p-sla--warn{color:var(--warn)}
.p-sla--crit{color:var(--critical);font-weight:650}
.p-sla--off{color:var(--text-3)}

.p-chips{display:flex;flex-wrap:wrap;gap:6px}
.p-search{flex:0 0 260px;max-width:100%}
.p-search--lg{flex:1 1 320px}

.p-bulk{
  display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
  padding:10px var(--card-pad-lg);border-bottom:1px solid var(--line);
  background:var(--accent-soft);
}
.p-bulk b{font:var(--ty-label);color:var(--accent-press);margin-inline-end:var(--s-2)}

/* the small square colour key a legend row uses */
.p-key{width:9px;height:9px;border-radius:3px;flex:0 0 auto;background:var(--neutral-fill)}
.p-key--ok{background:var(--ok-fill)}
.p-key--warn{background:var(--warn-fill)}
.p-key--crit{background:var(--crit-fill)}
.p-key--info{background:var(--info-fill)}
.p-key--live{background:var(--live-fill)}
.p-key--holiday{background:var(--identity)}
.p-key--prov{background:var(--identity);opacity:.4}
.p-key--weekend{background:var(--surface-sunken);border:1px solid var(--line-strong)}

/* a page-owned map viewport */
/* THE MAP TAB FILLS THE PAGE IT WAS GIVEN.
   62vh was a guess at "most of the screen", and a guess in vh leaves its
   error as a band of nothing under the legend — two hundred pixels of it
   on a normal desktop, on three different pages. The card body the map
   sits in already has the true height; the map takes whatever of it the
   search bar and the key do not use. The fixed height remains only as a
   fallback for a body whose own height is content-driven. */
.p-map{height:min(62vh,640px);min-height:320px;position:relative}
.m-card__body:has(> .p-map){display:flex;flex-direction:column;min-height:0}
.m-card__body:has(> .p-map) > .p-map{flex:1 1 auto;height:auto}
.m-card__body:has(> .p-map) > :not(.p-map){flex:0 0 auto}
/* the catalogue, embedded as a tab of the requests console: it fills the
   region the queue card would have taken and scrolls inside its own card */
.p-requests__cat{display:flex;flex-direction:column;min-height:0;gap:var(--s-3)}
.p-requests__cat[hidden]{display:none !important}
.p-services--embed{display:contents}
.p-services--embed .p-services__main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.p-services--embed .p-svcgrid{flex:1 1 auto;min-height:0}
.p-services--embed .p-svcgrid > .m-card__body{overflow:auto;overscroll-behavior:contain;min-height:0}
.p-services--embed #svKpis:empty,.p-services--embed #svFilters:empty{display:none}

.p-map__key{
  padding:8px var(--card-pad-lg);border-top:1px solid var(--line);margin-top:0;
  flex-wrap:nowrap;overflow:hidden;
}
.p-map__note{color:var(--text-3);margin-inline-start:auto;white-space:nowrap}

/* ================================================================ REQUESTS */

/* The page fills the viewport and nothing else: head, the six numbers, then
   the work. The filter rail that took the left third is gone — its filters
   are in the one filter bar at the top of the console. */
/* v6: a simple column — the chip bar takes its height, the working region
   takes the rest. (The old one-row grid assumed children that no longer
   exist and collapsed the chip bar to zero height.) */
.m-page.p-requests{
  display:flex;flex-direction:column;
  gap:10px;padding:12px var(--gutter) 14px;overflow:hidden;
}
/* one row, pinned to the region's height: the queue card fills the page
   whatever number of rows is in it, so the table's own box never changes
   size and the row count measured from it never drifts */
.p-requests__main{
  grid-row:-2 / -1;
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);min-height:0;
}
.p-requests__main > .m-card{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.p-requests__main > .m-card > .m-card__body{flex:1 1 auto;min-height:0;overflow:auto}
.p-requests .p-queue .m-card__body{padding:0}
/* the page's own filter bar is lifted into the scope bar; this slot is only
   a holder and must take no room in the grid */
.p-requests > #rqFilters:empty,.p-services > #svFilters:empty{display:none}
.p-requests > #rqFilters,.p-services > #svFilters{display:contents}

.p-rail__g{padding-block:var(--s-3);border-bottom:1px solid var(--line)}
.p-rail__g:last-child{border-bottom:0}
.p-rail__g > h4{
  font:var(--ty-label-sm);color:var(--text-3);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:var(--s-2);
}
.p-rail__clear{padding-bottom:var(--s-2)}
.p-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}

.p-dt__top{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-3)}
.p-dt__id{display:flex;flex-direction:column;gap:1px;min-width:0;margin-inline-end:auto}
.p-dt__id b{font:var(--ty-h2);color:var(--text)}
.p-dt__id span{font:var(--ty-caption);color:var(--text-3);font-family:var(--font-mono)}
.p-dt__proc{overflow-x:auto;margin-bottom:var(--s-3)}

.p-clock{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3);border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface-sunken);
}
.p-clock__x{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.p-clock__x > span{font:var(--ty-caption);color:var(--text-3)}
.p-clock__x > b{font:var(--ty-metric-sm);font-variant-numeric:tabular-nums;color:var(--text)}
.p-clock--ok{border-color:var(--ok-line);background:var(--ok-soft)}
.p-clock--ok .p-clock__x > b{color:var(--ok)}
.p-clock--warn{border-color:var(--warn-line);background:var(--warn-soft)}
.p-clock--warn .p-clock__x > b{color:var(--warn)}
.p-clock--crit{border-color:var(--crit-line);background:var(--crit-soft)}
.p-clock--crit .p-clock__x > b{color:var(--critical)}

/* ============================================================== WORK ORDERS */

/* The page is one full-height region: head, tabs and figures are lifted
   into the band, and the card takes everything left. On the table view
   the rows scroll INSIDE the card and the pager stands at its foot — it
   used to float mid-page with a field of white under it whenever the page
   held fewer rows than the screen holds. */
.m-page.p-orders{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  gap:12px;padding:14px var(--gutter) 16px;overflow:hidden;
}
.p-orders__main{grid-row:-2 / -1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.p-orders__main > .m-card__body{padding:0;flex:1 1 auto;min-height:0;overflow:auto}
/* the table view: rows scroll, the pager stands at the card's foot */
.p-orders__main > .m-card__body:has(> .m-table-wrap){
  display:flex;flex-direction:column;overflow:hidden;
}
.p-orders__main > .m-card__body > .m-table-wrap{flex:1 1 auto;min-height:0;overflow:auto}
.p-orders__main > .m-card__body > .m-pager{flex:0 0 auto;background:var(--surface)}
.p-orders__main > .m-card__body:has(> .p-map){overflow:hidden}

/* The board fills the height it is given and each column scrolls inside its
   own frame — it used to stop at 62% of the viewport with white space under
   it and the page scrolling behind that. */
/* a missed-collection count: the number carries the warning, a lozenge on
   every row of a thirty-five row table does not */
.p-missed{color:var(--critical);font-weight:650}

.p-board{
  display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));
  gap:var(--s-3);padding:var(--s-3);align-items:stretch;
  height:100%;min-height:0;
}
.p-board__col{
  display:flex;flex-direction:column;min-width:0;min-height:0;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-sunken);
}
.p-board__h{
  display:flex;align-items:center;gap:var(--s-2);
  padding:9px var(--s-3);border-bottom:1px solid var(--line);
  font:var(--ty-label);color:var(--text-2);
}
.p-board__h i{
  margin-inline-start:auto;font-style:normal;font-variant-numeric:tabular-nums;
  padding:1px 7px;border-radius:var(--r-full);background:var(--surface);
  border:1px solid var(--line);font:var(--ty-caption);color:var(--text-2);
}
.p-board__h--info{box-shadow:inset 0 2px 0 var(--info-fill)}
.p-board__h--warn{box-shadow:inset 0 2px 0 var(--warn-fill)}
.p-board__h--live{box-shadow:inset 0 2px 0 var(--live-fill)}
.p-board__h--ok{box-shadow:inset 0 2px 0 var(--ok-fill)}
.p-board__body{
  display:flex;flex-direction:column;gap:var(--s-2);
  padding:var(--s-2);min-height:80px;flex:1 1 auto;overflow:auto;overscroll-behavior:contain;
  transition:background var(--t-base) var(--ease);
}
.p-board__body.is-over{background:var(--accent-soft);outline:2px dashed var(--accent);outline-offset:-4px}

.p-wo{
  display:flex;flex-direction:column;gap:6px;cursor:grab;
  padding:11px 13px;border-radius:var(--r-md);background:var(--surface);
  border:1px solid var(--line);box-shadow:none;
  border-inline-start:3px solid var(--wo,var(--neutral-fill));
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
/* Late is said once, by the card itself, and repeated only by the clock in
   its footer — not by a pill as well. */
.p-wo.is-late{border-inline-start-color:var(--critical)}
.p-wo:hover{border-color:var(--line-strong);box-shadow:var(--sh-xs)}
.p-wo:focus-visible{box-shadow:var(--focus-ring);outline:none}
.p-wo.is-dragging{opacity:.45;cursor:grabbing}
.p-wo__h{display:flex;align-items:center;gap:6px}
.p-wo__h b{font:var(--ty-label);color:var(--text);font-family:var(--font-mono)}
.p-wo__h .m-pill{margin-inline-start:auto}
.p-wo__h .m-icon-btn{margin-inline-start:auto;opacity:0;transition:opacity var(--t-fast) var(--ease)}
.p-wo__h .m-pill + .m-icon-btn{margin-inline-start:0}
.p-wo:hover .m-icon-btn,.p-wo:focus-within .m-icon-btn{opacity:1}
.p-wo__l{font:var(--ty-body-sm);font-weight:550;color:var(--text);line-height:1.4}
.p-wo__m{display:flex;flex-wrap:wrap;gap:4px 10px;font:var(--ty-caption);color:var(--text-3)}
.p-wo__m > span{display:inline-flex;align-items:center;gap:4px;min-width:0}
.p-wo__m svg{width:12px;height:12px;flex:0 0 auto}
.p-wo__f{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  margin-top:1px;padding-top:7px;border-top:1px solid var(--line-subtle);
  font:var(--ty-caption);color:var(--text-3);font-variant-numeric:tabular-nums;
}
.p-wo__f .is-late{color:var(--critical);font-weight:600}
.p-wo__stops{display:inline-flex;align-items:center;gap:6px;color:var(--text-3)}
/* the sliver of progress: a 44px track says "one of three" faster than the
   words did, and takes a tenth of their width */
.p-wo__prog{
  display:inline-block;width:44px;height:4px;border-radius:var(--r-full);
  background:var(--surface-sunken);overflow:hidden;direction:ltr;
}
.p-wo__prog > b{display:block;height:100%;border-radius:var(--r-full);background:var(--ok-fill)}

/* =============================================================== CALENDAR */

.p-cal__head{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--card-pad-lg)}
.p-cal__head > b{font:var(--ty-h2);color:var(--text)}
.p-cal__dow{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;
  padding-inline:var(--card-pad-lg);
}
.p-cal__dow span{
  font:var(--ty-label-sm);color:var(--text-3);text-align:center;padding-block:4px;
}
.p-cal__dow span.is-weekend{color:var(--text-3);opacity:.7}
.p-cal__grid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;
  padding:0 var(--card-pad-lg) var(--s-4);
}
/* A MONTH THAT FITS ON ONE SCREEN, IN THE SOFT LANGUAGE.
   Cells are small cards on the card's own ground: rounded, a whisper of
   shadow, the date in its corner and at most two count chips. An empty
   working day is allowed to be quiet — "Nothing scheduled" thirty times
   was the loudest thing on the month. */
.p-cal__d{
  display:flex;flex-direction:column;gap:3px;min-height:58px;padding:6px 9px;
  border:1px solid var(--line-subtle);border-radius:10px;background:var(--surface);
  box-shadow:0 1px 2px rgba(9,30,54,.04);
  transition:box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.p-cal__d.is-blank{background:transparent;border-color:transparent;box-shadow:none}
.p-cal__d.is-weekend{background:var(--surface-sunken);border-color:transparent;box-shadow:none}
.p-cal__d.is-weekend .p-cal__n{color:var(--text-3)}
.p-cal__d.is-today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.p-cal__d.is-today .p-cal__n{
  background:var(--accent);color:var(--on-accent,#fff);width:20px;height:20px;
  display:grid;place-items:center;border-radius:50%;
}
.p-cal__d.is-holiday{background:var(--identity-soft);border-color:var(--identity-soft-line,var(--line-subtle))}
.p-cal__d.is-provisional{background:repeating-linear-gradient(
  135deg,var(--identity-soft),var(--identity-soft) 6px,transparent 6px,transparent 12px)}
.p-cal__d.is-clickable{cursor:pointer}
.p-cal__d.is-clickable:hover{border-color:var(--line-strong);box-shadow:0 4px 12px rgba(9,30,54,.09)}
.p-cal__d:focus-visible{box-shadow:var(--focus-ring);outline:none}
.p-cal__n{font:var(--ty-label);color:var(--text);font-variant-numeric:tabular-nums}
.p-cal__hol{font:var(--ty-caption);color:var(--identity);font-weight:600;line-height:1.35}
.p-cal__c{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:auto;
}
.p-cal__k{
  display:inline-flex;align-items:center;gap:5px;padding:2px 7px;
  border-radius:var(--r-full);font:600 10.5px/1.5 var(--font);
  font-variant-numeric:tabular-nums;
}
.p-cal__k > i{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.p-cal__k--ok{background:var(--ok-soft);color:var(--ok)}
.p-cal__k--ok > i{background:var(--ok-fill)}
.p-cal__k--warn{background:var(--warn-soft);color:var(--warn)}
.p-cal__k--warn > i{background:var(--warn-fill)}
.p-cal__k--crit{background:var(--crit-soft);color:var(--critical)}
.p-cal__k--crit > i{background:var(--crit-fill)}
.p-cal__key{padding:0 var(--card-pad-lg) var(--s-4)}
/* entity left, whatever trails it right, ONE line — the default row shape
   in drawers and detail blocks everywhere */
.p-calendar .p-block .m-row-item,
#mDrawer .m-row-item,
.p-block .m-row-item{grid-template-columns:minmax(0,1fr) auto;min-height:44px}

/* ============================================================== COLLECTION */

.p-collection__main > .m-card__body{padding:0}
.p-collection .p-filters{
  display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:flex-start;
  padding:var(--s-3) var(--card-pad-lg);border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);
}
.p-filters__g{display:flex;flex-direction:column;gap:6px;min-width:0}
.p-filters__g > span{font:var(--ty-label-sm);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.p-filters > .p-note{flex:1 1 100%}

/* THE LOOKUP IS THE PAGE until a record is open. One element, two shapes:
   a centred hero with a single large field before any query, a compact
   bar above the record after one. */
.p-pointbar{
  display:flex;align-items:center;gap:var(--s-4);
  padding:10px 14px;border:1px solid var(--line-subtle);border-radius:12px;
  background:var(--surface);box-shadow:0 1px 2px rgba(9,30,54,.05);
}
.p-pointbar__hero{display:none}
.p-pointbar__eg{display:none}
.p-pointbar__s{flex:1 1 320px;max-width:640px}
.p-pointbar.is-hero{
  flex-direction:column;align-items:center;gap:12px;
  border:0;background:transparent;box-shadow:none;
  padding:clamp(20px,7vh,68px) 16px 6px;
}
.p-pointbar.is-hero .p-pointbar__hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
}
.p-pointbar__ic{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-press);margin-bottom:4px;
}
.p-pointbar__hero h2{font:var(--ty-h2);color:var(--text)}
.p-pointbar__hero p{font:var(--ty-body-sm);color:var(--text-2);max-width:520px}
.p-pointbar.is-hero .p-pointbar__s{width:min(640px,100%);max-width:none;flex:0 0 auto}
.p-pointbar.is-hero .p-pointbar__s .m-input{
  height:50px;border-radius:var(--r-full);padding-inline-start:48px;
  font-size:15px;border-color:var(--line);background:var(--surface);
  box-shadow:0 6px 24px rgba(9,30,54,.08);
}
.p-pointbar.is-hero .p-pointbar__s .m-input:focus{box-shadow:0 6px 24px rgba(9,30,54,.08),var(--focus-ring)}
.p-pointbar.is-hero .m-search__ic{inset-inline-start:18px}
.p-pointbar.is-hero .m-search__ic svg{width:18px;height:18px}
.p-pointbar.is-hero .p-pointbar__eg{display:flex;align-items:center;gap:7px}
.p-pointbar__eg > span{font:var(--ty-caption);color:var(--text-3)}
.p-pointbar__eg .m-chip{font-family:var(--font-mono)}

.p-point__h{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  padding:var(--s-4) var(--card-pad-lg);border-bottom:1px solid var(--line)}
.p-point__h .m-pill{margin-inline-start:6px}
.p-point__g{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0 var(--s-5);padding:var(--s-2) var(--card-pad-lg);
}
.p-collection .p-block{margin:var(--s-3) var(--card-pad-lg)}

.p-bins{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:var(--s-3);padding:var(--s-4) var(--card-pad-lg);
}
.p-bin{
  display:flex;flex-direction:column;gap:7px;padding:var(--s-3);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  cursor:pointer;
}
.p-bin:hover{border-color:var(--line-strong)}
.p-bin:focus-visible{box-shadow:var(--focus-ring);outline:none}
.p-bin.is-selected{border-color:var(--accent);background:var(--accent-soft)}
.p-bin__h{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.p-bin__h b{margin-inline-end:auto}
.p-bin__m{display:flex;flex-direction:column;gap:3px;font:var(--ty-caption);color:var(--text-2)}
.p-bin__m span{display:flex;align-items:center;gap:6px}
.p-bin__m i{width:8px;height:8px;border-radius:3px;flex:0 0 auto}
.p-bin__f{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px;
  font:var(--ty-caption);color:var(--text-3);
}
.p-bin__f svg{width:12px;height:12px;vertical-align:-2px;margin-inline-end:3px}

/* ================================================================ PLANNING */

/* four explainers in one thin line left the rest of the card a field of
   white; two by two, at a reading width, the page looks composed instead
   of abandoned */
.p-model{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;max-width:1080px;margin-inline:auto;
  padding:14px;background:var(--surface-subtle);border-radius:14px;
}
.p-model ~ .m-demo{display:table;margin:10px auto 0}
.p-model__i{
  display:flex;flex-direction:column;gap:5px;padding:18px 20px;
  border:1px solid var(--line-subtle);border-radius:12px;background:var(--surface);
  box-shadow:0 1px 2px rgba(9,30,54,.05);
}
.p-model__i b{
  font:var(--ty-metric-sm);font-size:19px;color:var(--accent-press,var(--accent));
  font-variant-numeric:tabular-nums;
}
.p-model__i span{font:var(--ty-label);color:var(--text)}
.p-model__i i{font:var(--ty-caption);color:var(--text-3);font-style:normal;line-height:1.55}

.p-note-pre{
  font-family:var(--font-mono);font-size:11.5px;line-height:1.65;color:var(--text-2);
  white-space:pre-wrap;word-break:break-word;direction:ltr;text-align:start;
  max-height:52vh;overflow:auto;padding:var(--s-3);
  background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--r-md);
}

/* ================================================================ RESPONSIVE */

@media (max-width:1280px){
  .p-board{grid-template-columns:repeat(2,minmax(220px,1fr))}
}
@media (max-width:1000px){ .m-page.p-requests{overflow:auto} }
@media (max-width:820px){
  .p-board{grid-template-columns:minmax(0,1fr)}
  .p-cal__d{min-height:72px}
  .p-cal__hol{display:none}
  .p-def{flex-direction:column;gap:2px}
  .p-def > span{flex:0 0 auto}
  .p-search{flex:1 1 100%}
}

/* ==================================================================== RTL */

html[dir="rtl"] .p-note-pre{direction:ltr}
html[dir="rtl"] .p-wo{border-inline-start:3px solid var(--wo,var(--neutral-fill))}

/* ================================================================== PRINT */

@media print{
  .p-board__body{max-height:none;overflow:visible}
  .p-map,.p-bulk,.p-rail{display:none !important}
}

/* ======================================================= SERVICE CATALOGUE
   A card per service, and one detail column. The card has to answer three
   questions from across the room — what is it, how long has it got, and is
   anything breached against it — so those three carry the weight and the
   rest is quiet. */

.m-page.p-services{
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr); /* see .m-page.p-requests */
  gap:12px;padding:14px var(--gutter) 16px;overflow:hidden;
}
.p-services__main{grid-row:-2 / -1;display:grid;grid-template-columns:minmax(0,1fr);min-height:0}
.p-services__main > .m-card{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.p-services__main > .m-card > .m-card__body{flex:1 1 auto;min-height:0;overflow:auto}

.p-svcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.p-svc{
  display:flex;flex-direction:column;gap:11px;text-align:start;
  padding:16px 17px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);position:relative;overflow:hidden;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.p-svc::before{
  content:'';position:absolute;inset-block:0;inset-inline-start:0;width:3px;
  background:var(--sc,var(--accent));
}
.p-svc:hover{border-color:var(--sc,var(--accent));box-shadow:var(--sh-sm)}
.p-svc.is-sel{border-color:var(--sc,var(--accent));box-shadow:0 0 0 1px var(--sc,var(--accent))}
.p-svc__top{display:flex;align-items:flex-start;gap:10px}
.p-svc__ic{
  flex:0 0 auto;width:36px;height:36px;border-radius:var(--r-md);display:grid;place-items:center;
  background:color-mix(in srgb,var(--sc,var(--accent)) 14%,transparent);color:var(--sc,var(--accent));
}
.p-svc__id{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.p-svc__id b{font:var(--ty-body);font-weight:650;color:var(--text);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-svc__id > span{font:var(--ty-caption);color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-svc__sla{
  flex:0 0 auto;display:flex;align-items:center;gap:3px;padding:3px 8px;
  border-radius:var(--r-full);background:var(--surface-sunken);color:var(--text-2);
  font:var(--ty-caption);
}
.p-svc__sla b{color:var(--text);font-weight:650;font-variant-numeric:tabular-nums}
.p-svc__sla svg{width:13px;height:13px;opacity:.7}
.p-svc__d{
  font:var(--ty-caption);color:var(--text-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.p-svc__meta{display:flex;flex-wrap:wrap;gap:5px}
.p-svc__tag{
  display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:var(--r-full);
  background:var(--surface-sunken);color:var(--text-3);font:var(--ty-caption);font-size:10.5px;
}
.p-svc__tag svg{width:12px;height:12px}
.p-svc__tag--ok{background:var(--ok-soft);color:var(--ok)}
.p-svc__tag--sim{background:var(--neutral-soft);color:var(--text-3)}
.p-svc__foot{
  display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:11px;
  border-top:1px solid var(--line-subtle);font:var(--ty-caption);color:var(--text-3);
}
.p-svc__n{font-variant-numeric:tabular-nums}
.p-svc__n.is-bad{color:var(--critical);font-weight:600}
.p-svc__foot .p-svc__sla{margin-inline-end:auto}

.p-svcd{display:flex;flex-direction:column;gap:10px}
.p-svcd h4{
  font:var(--ty-label-sm);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-3);margin:8px 0 0;
}
.p-svcd__head{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.p-svcd__head > div{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.p-svcd__head b{font:var(--ty-h3);font-size:15px;color:var(--text)}
.p-svcd__head > div > span{font:var(--ty-caption);color:var(--text-3)}
.p-svcd__d{font:var(--ty-body-sm);color:var(--text-2);line-height:1.6;margin:0}
.p-svcd__slas{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.p-svcd__sla{
  display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-subtle);
}
.p-svcd__sla.is-def{border-color:var(--sc,var(--accent));background:color-mix(in srgb,var(--sc,var(--accent)) 8%,transparent)}
.p-svcd__sla span{font:var(--ty-caption);color:var(--text-3)}
.p-svcd__sla b{font:var(--ty-metric-sm);font-size:17px;color:var(--text);font-variant-numeric:tabular-nums}
.p-svcd__sla i{font:var(--ty-caption);font-style:normal;color:var(--text-3);font-size:10px}
.p-svcd__ev{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.p-svcd__ev li{display:flex;align-items:center;gap:7px;font:var(--ty-body-sm);color:var(--text-2)}
.p-svcd__ev svg{color:var(--ok);flex:0 0 auto}
.p-svcd__src{
  display:flex;gap:9px;padding:10px 12px;border-radius:var(--r-md);
  background:var(--surface-sunken);color:var(--text-2);
}
.p-svcd__src svg{flex:0 0 auto;margin-top:2px;color:var(--text-3)}
.p-svcd__src p{margin:0;font:var(--ty-caption);line-height:1.6}
.p-svcd__acts{display:flex;gap:8px;padding-top:6px}
.p-svcd__acts .m-btn{flex:1 1 auto}

/* ============================================================== INTAKE FORM */

.p-intake{display:flex;flex-direction:column;gap:13px}
.p-intake__row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.p-intake__note{
  display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--r-md);
  background:var(--surface-sunken);font:var(--ty-caption);color:var(--text-2);line-height:1.5;
}
.p-intake__note > span:nth-child(2){flex:1 1 auto;min-width:0}
.p-intake__ic{
  flex:0 0 auto;width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:color-mix(in srgb,var(--sc,var(--accent)) 14%,transparent);color:var(--sc,var(--accent));
}
.p-intake__sla{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-subtle);
  font:var(--ty-body-sm);color:var(--text-2);
}
.p-intake__sla b{color:var(--text);font-weight:650;font-variant-numeric:tabular-nums}
.p-intake__sla svg{color:var(--text-3)}
.p-intake__due{color:var(--text-3);font:var(--ty-caption)}
.p-intake__insp{
  flex:1 1 100%;color:var(--warn);font:var(--ty-caption);
}
@media (max-width:1000px){
  .m-page.p-services{overflow:auto}
  .p-intake__row{grid-template-columns:minmax(0,1fr)}
}

/* A card whose only header content is a search box does not need a header the
   height of a title. */
.p-queue > .m-card__head{min-height:0;padding:5px 10px}
.p-queue > .m-card__head .p-search{width:min(320px,100%)}

/* the provenance notes under the divisions and channels tables */
.p-srcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;padding:16px 0 4px}
.p-srcs__i{padding:12px 14px;border-radius:var(--r-md);background:var(--surface-sunken)}
.p-srcs__i b{display:block;font:var(--ty-label);color:var(--text);margin-bottom:4px}
.p-srcs__i p{margin:0;font:var(--ty-caption);color:var(--text-2);line-height:1.6}

/* ============================== demand coverage ========================
   One row per stream: the track is the modelled requirement (its length
   ranks the demand), the fill is the contracted fleet inside it. */
/* p-cov was taken — it is the contract-coverage chip on the contracts
   page, and the later stylesheet won. Distinct thing, distinct name.
   ONE SOFT ROW PER STREAM carries what the chart and the table used to
   say between them: name and daily tonnage, the requirement as a track
   with the contracted fleet filled inside, the figures, the gap pill. */
.p-dcov{
  display:flex;flex-direction:column;gap:8px;
  padding:12px 14px;background:var(--surface-subtle);border-radius:12px;
}
.p-dcov__r{
  display:flex;align-items:center;gap:12px;min-width:0;
  padding:10px 14px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line-subtle);
  box-shadow:0 1px 2px rgba(9,30,54,.05);
}
.p-dcov__ic{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--sc,var(--accent)) 13%,transparent);
  color:var(--sc,var(--accent));
}
.p-dcov__x{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.p-dcov__l{display:flex;align-items:baseline;gap:8px;min-width:0}
.p-dcov__l b{
  font:var(--ty-label);font-size:12.5px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.p-dcov__l em{
  font-style:normal;font:var(--ty-caption);color:var(--text-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.p-dcov__t{direction:ltr}
.p-dcov__t > i{
  display:block;height:8px;border-radius:var(--r-full);
  background:var(--surface-sunken);overflow:hidden;
}
.p-dcov__t > i > b{display:block;height:100%;background:var(--ok-fill);border-radius:inherit}
.p-dcov__t > i > b.is-short{background:var(--crit-fill)}
.p-dcov__v{
  flex:0 0 auto;min-width:66px;font:600 12.5px/1 var(--font);color:var(--text);
  font-variant-numeric:tabular-nums;text-align:end;
}
.p-dcov__v em{font-style:normal;font-weight:500;color:var(--text-3);font-size:11px}
.p-dcov__r > .m-pill{flex:0 0 auto;min-width:46px;justify-content:center}
.p-dcov__key{
  padding:2px 4px 0;
  font:var(--ty-caption);font-size:10.6px;color:var(--text-3);
}
html[dir="rtl"] .p-dcov__t > i > b{margin-inline-start:auto}

/* =============================== collection: the point landing ==========
   Before a query the tab is a landing, not a void: a small hero over the
   search's purpose, then the two lists this tab is opened for. */
/* the landing under the hero: two quiet columns of soft row-cards, no
   outer card chrome — the page ground carries them */
.p-collection__main:has(.p-cp0){background:transparent;border:0;box-shadow:none}
.p-cp0{display:flex;flex-direction:column;padding:var(--s-4) 0 var(--s-5)}
.p-cp0__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);
  max-width:1120px;width:100%;margin-inline:auto;align-items:start;
}
.p-cp0__col{
  display:flex;flex-direction:column;gap:8px;
  padding:12px 14px 14px;border-radius:14px;background:var(--surface-subtle);
}
.p-cp0__h{display:flex;align-items:center;gap:8px;padding:2px 2px 4px}
.p-cp0__h h3{
  font:var(--ty-label);color:var(--text-2);text-transform:uppercase;
  letter-spacing:.05em;font-size:11px;
}
.p-cp0__n{
  font:700 10.5px/18px var(--font);font-style:normal;padding:0 8px;
  border-radius:var(--r-full);font-variant-numeric:tabular-nums;
}
.p-cp0__n.is-crit{background:var(--crit-soft);color:var(--critical)}
.p-cp0__n.is-warn{background:var(--warn-soft);color:var(--warn)}
.p-cp0__i{
  display:flex;align-items:center;gap:12px;width:100%;text-align:start;
  padding:11px 14px;border-radius:12px;cursor:pointer;color:var(--text);
  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-cp0__i:hover{border-color:var(--line-strong);box-shadow:0 4px 14px rgba(9,30,54,.09)}
.p-cp0__i:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.p-cp0__tile{
  flex:0 0 auto;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--sc,var(--accent)) 13%,transparent);
  color:var(--sc,var(--accent));
}
.p-cp0__ix{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.p-cp0__ix b{font:var(--ty-label);font-size:12.5px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-cp0__ix span{font:var(--ty-caption);color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-cp0__age,.p-cp0__fill{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;
  font:600 11px/1 var(--font);text-decoration:none;font-variant-numeric:tabular-nums;
}
.p-cp0__age{color:var(--warn)}
.p-cp0__age svg{opacity:.85}
.p-cp0__fill{color:var(--warn)}
.p-cp0__fill.is-crit{color:var(--critical)}
.p-cp0__none{font:var(--ty-body-sm);color:var(--text-3);padding:10px 4px}
@media (max-width:1100px){ .p-cp0__grid{grid-template-columns:minmax(0,1fr)} }

/* the missed view's selection toolbar */
.p-msel{
  display:flex;align-items:center;gap:var(--s-2);
  padding:8px var(--card-pad-lg);border-bottom:1px solid var(--line);
  background:var(--surface-subtle);
}
.p-msel__t{flex:1 1 auto;font:var(--ty-body-sm);color:var(--text-2)}
.p-msel__t b{color:var(--text)}
.m-checkbox{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}

/* the zone drawer */
.p-zdw__cover{display:flex;flex-direction:column;gap:7px;margin-bottom:var(--s-4)}
.p-zdw__coverx{display:flex;align-items:center;gap:5px;font:var(--ty-body-sm);color:var(--text-2)}
.p-zdw__coverx b{color:var(--text)}
.p-zdw__acts{display:flex;gap:var(--s-2);margin-top:var(--s-5)}

/* ================= SERVICE DELIVERY, THE SOFT PASS =====================
   One language for the four service-delivery pages, taken from the common
   card-list pattern: content floats as cards on a quiet ground, a row
   carries at most five facts in title -> meta -> state order, one action,
   soft shadow instead of a drawn border. */

/* -- the request queue as a card list -- */
.p-rql{
  display:flex;flex-direction:column;gap:8px;
  padding:12px 14px;background:var(--surface-subtle);min-height:100%;
}
.p-rql__i{
  display:flex;align-items:center;gap:12px;
  padding:11px 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),
             transform var(--t-fast) var(--ease);
}
.p-rql__i:hover{border-color:var(--line-strong);box-shadow:0 4px 14px rgba(9,30,54,.09)}
.p-rql__i:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.p-rql__i.is-selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.p-rql__i .m-check{opacity:0;transition:opacity var(--t-fast) var(--ease)}
.p-rql__i:hover .m-check,
.p-rql__i .m-check:has(input:checked){opacity:1}
.p-rql__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-rql__x{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.p-rql__t{display:flex;align-items:center;gap:8px;min-width:0}
.p-rql__t b{font:var(--ty-label);font-size:13px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-rql__ref{
  font:500 11px/1 var(--font-mono);color:var(--text-3);text-decoration:none;
  flex:0 0 auto;
}
.p-rql__m{font:var(--ty-caption);color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-rql__sla{flex:0 0 auto;min-width:96px;text-align:end}
.p-rql__i > .m-pill{flex:0 0 auto;min-width:88px;justify-content:center}
@media (max-width:1100px){ .p-rql__sla{display:none} }

/* -- the board, floating -- */
.p-board__col{
  background:var(--surface-subtle);border:0;border-radius:14px;overflow:hidden;
}
.p-board__h{border-bottom:0;padding:11px var(--s-3) 5px}
.p-board__body{padding:8px 10px 10px;gap:8px}
.p-wo{
  border:0;border-radius:12px;
  box-shadow:0 1px 2px rgba(9,30,54,.06);
  border-inline-start:3px solid var(--wo,var(--neutral-fill));
}
.p-wo:hover{box-shadow:0 4px 14px rgba(9,30,54,.10)}
/* in a register where nearly everything runs late, painting every stripe
   red said nothing — the stripe stays the stream's colour and the red
   clock in the corner carries "late" on its own */

/* -- the zone grid -- */
.p-zg{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
  gap:10px;padding:12px 14px;background:var(--surface-subtle);min-height:100%;
}
.p-zg__i{
  display:flex;flex-direction:column;gap:8px;text-align:start;
  padding:13px 15px;border-radius:12px;cursor:pointer;border:1px solid var(--line-subtle);
  background:var(--surface);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-zg__i:hover{border-color:var(--line-strong);box-shadow:0 4px 14px rgba(9,30,54,.09)}
.p-zg__i:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.p-zg__h{display:flex;align-items:flex-start;gap:8px;min-width:0}
.p-zg__h i{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:4px}
.p-zg__hx{display:flex;flex-direction:column;gap:0;min-width:0;flex:1 1 auto}
.p-zg__hx b{font:var(--ty-label);font-size:13px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-zg__hx span{font:var(--ty-caption);font-size:10.4px;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-zg__pct{font:700 19px/1 var(--font);color:var(--text);font-variant-numeric:tabular-nums}
.p-zg__pct em{font-style:normal;font:var(--ty-caption);color:var(--text-3);margin-inline-start:5px}
.p-zg__f{display:flex;align-items:center;gap:8px;font:var(--ty-caption);color:var(--text-3);min-height:18px}
.p-zg__miss{
  display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:var(--r-full);
  background:var(--crit-soft);color:var(--critical);font:600 10.6px/16px var(--font);
}
.p-zg__t{margin-inline-start:auto;font-variant-numeric:tabular-nums}
.p-zg__t b{color:var(--text-2);font-weight:600}

/* -- the missed collections, as the same card list -- */
.p-msl{
  display:flex;flex-direction:column;gap:8px;
  padding:12px 14px;background:var(--surface-subtle);min-height:100%;
}
.p-msl__i{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:12px;
  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-msl__i[data-mrow]{cursor:pointer}
.p-msl__i[data-mrow]:hover{border-color:var(--line-strong);box-shadow:0 4px 14px rgba(9,30,54,.09)}
.p-msl__i:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.p-msl__i.is-selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
/* a raised row is settled business — it steps back and lets the open ones lead */
.p-msl__i.is-raised{opacity:.68;box-shadow:none}
.p-msl__ck{flex:0 0 15px;display:grid;place-items:center}
.p-msl__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-msl__x{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.p-msl__t{display:flex;align-items:center;gap:8px;min-width:0}
.p-msl__t b{font:var(--ty-label);font-size:13px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-msl__ref{font:500 11px/1 var(--font-mono);color:var(--text-3);text-decoration:none;flex:0 0 auto}
.p-msl__m{font:var(--ty-caption);color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-msl__age{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;
  font:600 11px/1 var(--font);color:var(--warn);font-variant-numeric:tabular-nums;
}
.p-msl__age svg{opacity:.85}
@media (max-width:1100px){ .p-msl__age{display:none} }

/* -- planning: demand by zone as one ranked list -- */
.p-zl{display:flex;flex-direction:column;gap:2px;padding:4px 0}
.p-zl__i{
  display:flex;align-items:center;gap:12px;min-width:0;
  padding:8px 12px;border-radius:10px;cursor:pointer;
  transition:background var(--t-fast) var(--ease);
}
.p-zl__i:hover{background:var(--surface-sunken)}
.p-zl__i:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.p-zl__dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.p-zl__x{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.p-zl__t{display:flex;align-items:baseline;gap:8px;min-width:0}
.p-zl__t b{font:var(--ty-label);font-size:12.5px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-zl__t em{font-style:normal;font:var(--ty-caption);color:var(--text-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.p-zl__b{display:block;height:7px;border-radius:var(--r-full);
  background:var(--surface-sunken);overflow:hidden;direction:ltr}
.p-zl__b > b{display:block;height:100%;background:var(--accent);opacity:.7;border-radius:inherit}
html[dir="rtl"] .p-zl__b > b{margin-inline-start:auto}
.p-zl__v{flex:0 0 auto;min-width:70px;text-align:end;
  font:600 12.5px/1 var(--font);color:var(--text);font-variant-numeric:tabular-nums}
.p-zl__v em{font-style:normal;font-weight:500;color:var(--text-3);font-size:11px}

/* -- the administration landing: five doors, one figure each -- */
.p-admin{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:12px;max-width:1180px;
}
.p-admin__t{
  display:flex;align-items:center;gap:14px;text-align:start;
  padding:18px 20px;border-radius:14px;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),
             transform var(--t-fast) var(--ease);
}
.p-admin__t:hover{border-color:var(--line-strong);box-shadow:0 6px 18px rgba(9,30,54,.10);
  transform:translateY(-1px)}
.p-admin__t:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.p-admin__ic{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-press);
}
.p-admin__ic.is-crit{background:var(--crit-soft);color:var(--critical)}
.p-admin__ic.is-ok{background:var(--ok-soft);color:var(--ok)}
.p-admin__x{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.p-admin__x b{font:var(--ty-h3);color:var(--text)}
.p-admin__x span{font:var(--ty-caption);color:var(--text-3)}
.p-admin__n{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.p-admin__n b{font:700 17px/1.2 var(--font);color:var(--text);font-variant-numeric:tabular-nums}
.p-admin__n.is-crit b{color:var(--critical)}
.p-admin__n.is-ok b{color:var(--ok)}
.p-admin__n em{font-style:normal;font:var(--ty-caption);font-size:10px;color:var(--text-3)}
.p-admin__t > svg{flex:0 0 auto;color:var(--text-3)}
html[dir="rtl"] .p-admin__t > svg{transform:scaleX(-1)}

/* ==========================================================================
   REQUESTS & ORDERS v6 — one flow, three views
   Queue: list + the record open beside it. Board: dispatch. Map: the clock
   on the ground. The counts across the top are filters.
   ========================================================================== */

.p-rq6__bar{flex:0 0 auto}
.p-rq6__bar:empty{display:none}
.p-rq6__barrow{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.p-rq6__search{flex:0 1 300px;min-width:190px}
.p-rq6__search .m-input{width:100%}

/* -- the quick chips: figures you can press ---------------------------- */
.p-qc{display:flex;align-items:center;gap:7px;min-width:0;flex:1 1 auto;flex-wrap:wrap}
.p-qc__i{
  display:inline-flex;align-items:baseline;gap:6px;
  height:32px;padding:0 12px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--line);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
  align-items:center;
}
.p-qc__i b{font:700 13.5px/1 var(--font);color:var(--text);font-variant-numeric:tabular-nums}
.p-qc__i span{font:600 11px/1 var(--font);color:var(--text-2);white-space:nowrap}
.p-qc__i em{font:500 10.5px/1 var(--font);font-style:normal;color:var(--text-3);font-variant-numeric:tabular-nums}
.p-qc__i:hover{border-color:var(--line-strong);background:var(--surface-sunken)}
.p-qc__i.is-on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--accent-soft)}
.p-qc__i.is-on span,.p-qc__i.is-on b{color:var(--accent-press)}
.p-qc__i--crit b{color:var(--critical)}
.p-qc__i--crit.is-on{border-color:var(--crit-fill);box-shadow:0 0 0 1px var(--crit-fill);background:var(--crit-soft)}
.p-qc__i--crit.is-on span,.p-qc__i--crit.is-on b{color:var(--critical)}
.p-qc__i--warn b{color:var(--warn)}
.p-qc__i--warn.is-on{border-color:var(--warn-fill);box-shadow:0 0 0 1px var(--warn-fill);background:var(--warn-soft)}
.p-qc__i--warn.is-on span,.p-qc__i--warn.is-on b{color:var(--warn)}
.p-qc__fact{
  display:inline-flex;align-items:center;gap:5px;color:var(--text-3);
  font:var(--ty-caption);white-space:nowrap;
}
.p-qc__fact b{font:700 12.5px/1 var(--font);color:var(--text-2);font-variant-numeric:tabular-nums}
.p-qc__fact svg{opacity:.7}

/* -- the working region ------------------------------------------------- */
.p-rq6__main{
  flex:1 1 auto !important;min-height:0;display:flex;flex-direction:column;
  overflow:hidden !important;
}
.p-rq6__main > *{flex:1 1 auto;min-height:0}

/* Queue: list beside the open record */
.p-rq6__split{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(370px,31vw,440px);
  gap:12px;min-height:0;
}
.p-rq6__list{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.p-rq6__list > .m-card__body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0}

/* rows: one surface, hairline-divided, the clock and the state at the end */
.p-rq6 .p-rql{display:flex;flex-direction:column;padding:0;gap:0}
.p-rq6 .p-rql__i{
  position:relative;display:flex;align-items:center;gap:10px;
  margin:0;padding:9px 14px;min-height:52px;
  background:transparent;border:0;border-radius:0;box-shadow:none;
  border-top:1px solid var(--line-subtle);
  cursor:pointer;transition:background var(--t-fast) var(--ease);
}
.p-rq6 .p-rql__i:first-child{border-top:0}
.p-rq6 .p-rql__i:hover{background:var(--surface-sunken);border-color:var(--line-subtle);box-shadow:none}
.p-rq6 .p-rql__i.is-selected{
  background:var(--accent-soft);border-color:transparent;box-shadow:none;
}
.p-rq6 .p-rql__i.is-selected::before{
  content:'';position:absolute;inset-inline-start:0;inset-block:6px;width:3px;
  border-radius:var(--r-full);background:var(--accent);
}
.p-rq6 .p-rql__i.is-selected + .p-rql__i{border-top-color:transparent}
.p-rq6 .p-rql__ic{
  flex:0 0 auto;width:30px;height:30px;border-radius:var(--r-sm);
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--sc,var(--accent)) 13%,transparent);
  color:var(--sc,var(--accent));
}
.p-rq6 .p-rql__x{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.p-rq6 .p-rql__t{display:flex;align-items:center;gap:6px;min-width:0}
.p-rq6 .p-rql__t b{
  font:600 12.8px/17px var(--font);color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.p-rql__pri{flex:0 0 auto;width:7px;height:7px;border-radius:var(--r-full)}
.p-rql__pri--crit{background:var(--crit-fill)}
.p-rql__pri--warn{background:var(--warn-fill)}
.p-rq6 .p-rql__m{
  font:var(--ty-caption);color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.p-rq6 .p-rql__m u{
  text-decoration:none;font-family:var(--font-mono);font-size:10px;color:var(--text-2);
}
.p-rq6 .p-rql__end{flex:0 0 auto;display:flex;align-items:center;gap:7px}
.p-rq6 .p-rql__i .m-check{opacity:0;transition:opacity var(--t-fast) var(--ease)}
.p-rq6 .p-rql__i:hover .m-check,
.p-rq6 .p-rql__i .m-check:has(input:checked){opacity:1}
.p-rq6 .m-pager{padding:8px 14px;border-top:1px solid var(--line-subtle)}

/* the record panel */
.p-rq6__panel{min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:0}
.p-rqd__empty{flex:1 1 auto;display:grid;place-items:center;padding:20px}
.p-rqd__head{flex:0 0 auto;padding:13px 16px 10px;border-bottom:1px solid var(--line-subtle)}
.p-rqd__id{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.p-rqd__id > b{font:600 12px/1 var(--font-mono);color:var(--text-2);letter-spacing:.01em}
.p-rqd__svc{font:650 14.5px/19px var(--font);color:var(--text);margin-top:6px;letter-spacing:-.01em}
.p-rqd__sub{
  font:var(--ty-caption);color:var(--text-3);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.p-rqd__tabs{flex:0 0 auto;padding:0 10px;border-bottom:1px solid var(--line-subtle)}
.p-rqd__tabs .m-tabs{border-bottom:0;gap:0}
.p-rqd__tabs .m-tab{height:34px;padding:0 10px;font-size:11.8px}
.p-rqd__body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:13px 16px}
.p-rqd__foot{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:10px 14px;border-top:1px solid var(--line-subtle);background:var(--surface-subtle);
}

/* board + map fills */
.p-rq6__board{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.p-rq6__board > .p-board{flex:1 1 auto;min-height:0}
.p-rq6__map{position:relative;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:0}
.p-rq6__map .p-map{flex:1 1 auto;min-height:0;position:relative}
.p-rq6__map .p-map__key{flex:0 0 auto;margin:0;padding:8px 14px;border-top:1px solid var(--line-subtle)}
.p-board__more{
  display:flex;align-items:center;justify-content:center;gap:4px;width:100%;
  padding:9px 0;margin-top:2px;border-radius:var(--r-sm);
  font:var(--ty-label-sm);color:var(--text-2);
}
.p-board__more:hover{background:var(--surface-sunken);color:var(--text)}
html[dir="rtl"] .p-board__more svg{transform:scaleX(-1)}

/* reference drawer */
.p-ref{display:flex;flex-direction:column;min-height:0;height:100%}
.p-ref__seg{flex:0 0 auto;padding:12px 16px;border-bottom:1px solid var(--line-subtle)}
.p-ref__body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:14px 16px;
  display:flex;flex-direction:column;gap:10px}

/* narrow windows: the panel yields — rows open the record dialog instead */
@media (max-width:1100px){
  .p-rq6__split{grid-template-columns:minmax(0,1fr)}
  .p-rq6__panel{display:none}
}

/* ==========================================================================
   COLLECTION v6 — Job 1 on one page: Rounds · Waste analysis · Missed · Plan
   The same grammar as the requests console: the view tabs on the band, a
   row of quick facts that are also filters, and ONE working region that
   fills the rest of the viewport and never scrolls the page itself.
   ========================================================================== */

.p-qc__i--ok b{color:var(--ok)}
.p-qc__i--ok.is-on{border-color:var(--ok-fill);box-shadow:0 0 0 1px var(--ok-fill);background:var(--ok-soft)}
.p-qc__i--ok.is-on span,.p-qc__i--ok.is-on b{color:var(--ok)}

.p-cl6__search{flex:0 1 280px;min-width:190px}
.p-cl6__search .m-input{width:100%}

.p-cl6__main{
  flex:1 1 auto !important;min-height:0;display:flex;flex-direction:column;
  overflow:hidden !important;
}
.p-cl6__main > *{flex:1 1 auto;min-height:0}

/* -- Rounds: the zone ledger beside the day's curve --------------------- */
.p-cl6__split{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(330px,27vw,412px);
  gap:12px;min-height:0;
}
.p-cl6__zones{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.p-cl6__zones > .m-card__head{flex:0 0 auto}
.p-cl6__zlist{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0}

.p-zr{display:flex;flex-direction:column;padding:0}
.p-zr__i{
  display:flex;align-items:center;gap:11px;min-width:0;
  padding:9px 14px;min-height:54px;
  border-top:1px solid var(--line-subtle);
  cursor:pointer;transition:background var(--t-fast) var(--ease);
}
.p-zr__i:first-child{border-top:0}
.p-zr__i:hover{background:var(--surface-sunken)}
.p-zr__i:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.p-zr__dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.p-zr__x{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.p-zr__t{display:flex;align-items:baseline;gap:8px;min-width:0}
.p-zr__t b{
  font:600 12.8px/16px var(--font);color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.p-zr__t em{
  font:var(--ty-caption);font-style:normal;color:var(--text-3);flex:0 0 auto;
}
.p-zr__n{
  flex:0 0 auto;min-width:64px;text-align:end;
  font:650 12.5px/1 var(--font);color:var(--text);font-variant-numeric:tabular-nums;
}
.p-zr__n em{font-style:normal;font-weight:500;font-size:11px;color:var(--text-3)}
.p-zr__i > .m-pill{flex:0 0 auto;min-width:52px;justify-content:center;font-variant-numeric:tabular-nums}
.p-zr__end{flex:0 0 auto;display:flex;align-items:center;gap:9px;min-width:74px;justify-content:flex-end}
.p-zr__miss,.p-zr__crew{
  display:inline-flex;align-items:center;gap:4px;text-decoration:none;
  font:600 11px/1 var(--font);color:var(--text-2);font-variant-numeric:tabular-nums;
}
.p-zr__miss{color:var(--critical)}
.p-zr__miss svg,.p-zr__crew svg{opacity:.8}

.p-cl6__side{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden}
.p-cl6__side > .m-card{flex:0 0 auto;min-height:0}
.p-cl6__side > .p-cl6__muni{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.p-cl6__muni > .m-card__body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.p-cl6__curve{padding-top:6px}

/* -- Waste analysis: the one scrolling canvas of the page ---------------- */
.p-cl6__an{
  min-height:0;overflow:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:12px;padding-bottom:2px;
}
.p-cl6__stats{flex:0 0 auto}
.p-cl6__angrid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;align-items:start;
}
.p-cl6__angrid > .m-card{min-width:0}
.p-cl6__wide{grid-column:1 / -1}
.p-cl6__link{
  display:inline;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;color:var(--accent);text-decoration:underline;
  text-underline-offset:2px;
}
.p-cl6__link:hover{color:var(--accent-press)}

/* -- Missed: the exception queues --------------------------------------- */
.p-cl6__mwrap{
  flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface-subtle);
}
.p-cl6__mwrap .m-pager{padding:8px 14px;border-top:1px solid var(--line-subtle)}
.p-msl__age.is-crit{color:var(--critical)}
.p-cl6__main > .p-msel{flex:0 0 auto;min-height:auto}

/* -- Plan: the sizing model and the demand ledger ------------------------ */
.p-cl6__plan{
  min-height:0;overflow:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:12px;padding-bottom:2px;
}
.p-cl6__plan > .m-card{flex:0 0 auto}

/* -- narrow windows ------------------------------------------------------ */
@media (max-width:1100px){
  .p-cl6__split{grid-template-columns:minmax(0,1fr)}
  .p-cl6__side{display:none}
  .p-cl6__angrid{grid-template-columns:minmax(0,1fr)}
  .p-cl6__search{flex-basis:200px}
}

/* the benchmark dial card */
.p-cl6__gen{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.p-cl6__gen > .m-chart{flex:0 0 auto;width:auto}
.p-cl6__gen .m-donut__g{flex:0 0 auto}
.p-cl6__genx{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px}
.p-cl6__genx .p-def{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:5px 0;border-bottom:1px solid var(--line-subtle)}
.p-cl6__genx .p-def span{font:var(--ty-label-sm);color:var(--text-3)}
.p-cl6__genx .p-def b{font:650 12.5px/1 var(--font);color:var(--text);font-variant-numeric:tabular-nums}
.p-cl6__genx p{font:var(--ty-caption);color:var(--text-3);line-height:1.55;margin-top:7px}

/* ==========================================================================
   LIVE MAP v6 — the map is the view; one panel beside it that answers
   "which unit needs a person" and "where is the unit I want". Same grammar
   as the rest of the console: tabs on the band, a chip line whose numbers
   are pressable, one working region.
   ========================================================================== */

.p-tk6__search{flex:0 1 280px;min-width:190px}
.p-tk6__search .m-input{width:100%}

.p-tk6__wrap{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(316px,24vw,384px);
  gap:12px;min-height:0;
}
.p-tk6__mapcard{min-height:0}

.p-tk6__panel{min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:0}
.p-tk6__phead{flex:0 0 auto;padding:10px 12px;border-bottom:1px solid var(--line-subtle)}
.p-tk6__phead:empty{display:none}
.p-tk6__phead .m-seg{display:flex;width:100%}
.p-tk6__phead .m-seg > button{flex:1 1 0}
.p-tk6__plist{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.p-tk6__plist .m-pager{padding:8px 12px;border-top:1px solid var(--line-subtle)}

/* fleet / exception rows — the one-surface hairline list */
.p-tkr{display:flex;flex-direction:column}
.p-tkr__i{
  display:flex;align-items:center;gap:10px;min-width:0;
  padding:8px 12px;min-height:50px;
  border-top:1px solid var(--line-subtle);
  cursor:pointer;transition:background var(--t-fast) var(--ease);
}
.p-tkr__i:first-child{border-top:0}
.p-tkr__i:hover{background:var(--surface-sunken)}
.p-tkr__i:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.p-tkr__ic{
  flex:0 0 auto;width:30px;height:30px;border-radius:var(--r-sm);
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--sc,var(--accent)) 14%,transparent);
  color:var(--sc,var(--accent));
}
.p-tkr__x{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.p-tkr__t{display:flex;align-items:center;gap:7px;min-width:0}
.p-tkr__t b{font:600 12.6px/16px var(--font);color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-tkr__t u{text-decoration:none;font:500 10px/1 var(--font-mono);color:var(--text-3);flex:0 0 auto}
.p-tkr__m{font:var(--ty-caption);color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-tkr__end{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px}
.p-tkr__end em{font:600 10.8px/1 var(--font);font-style:normal;color:var(--text-2);white-space:nowrap}
.p-tkr__dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}

/* the unit record inside the panel */
.p-tkd{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.p-tkd__back{
  align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  padding:3px 8px;margin:-2px -8px 0;border:0;background:none;cursor:pointer;
  border-radius:var(--r-sm);font:var(--ty-label-sm);color:var(--text-2);
}
.p-tkd__back:hover{background:var(--surface-sunken);color:var(--text)}
html[dir="rtl"] .p-tkd__back svg{transform:scaleX(-1)}
.p-tkd__head{display:flex;align-items:center;gap:10px;min-width:0}
.p-tkd__head .p-tkr__ic{width:36px;height:36px;border-radius:var(--r-md)}
.p-tkd__x{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.p-tkd__t{display:flex;align-items:baseline;gap:7px;min-width:0}
.p-tkd__t b{font:650 14.5px/18px var(--font);color:var(--text)}
.p-tkd__t u{text-decoration:none;font:500 10.5px/1 var(--font-mono);color:var(--text-3)}
.p-tkd__m{font:var(--ty-caption);color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-tkd__g{display:grid;grid-template-columns:1fr;gap:0}
.p-tkd__g .p-def > span{flex-basis:34%}
.p-tkd__g small{font-size:10.5px;color:var(--text-3);font-weight:500}
.p-tkd__stale{color:var(--critical)}
.p-tkd__acts{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:2px}

/* the trips log */
.p-tk6__twrap{
  flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface-subtle);
}
.p-tk6__twrap .m-pager{padding:8px 14px;border-top:1px solid var(--line-subtle)}
.p-tkt{display:flex;flex-direction:column;gap:8px;padding:12px 14px;min-height:100%}
.p-tkt__i{
  display:flex;align-items:center;gap:12px;min-width:0;
  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-tkt__i:hover{border-color:var(--line-strong);box-shadow:0 4px 14px rgba(9,30,54,.09)}
.p-tkt__i:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.p-tkt__x{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.p-tkt__t{display:flex;align-items:baseline;gap:8px;min-width:0}
.p-tkt__t b{font:var(--ty-label);font-size:13px;color:var(--text)}
.p-tkt__t em{font:var(--ty-caption);font-style:normal;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-tkt__m{font:var(--ty-caption);color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-tkt__n{flex:0 0 auto;min-width:56px;text-align:end;
  font:650 12.5px/1.3 var(--font);color:var(--text);font-variant-numeric:tabular-nums}
.p-tkt__n em{display:block;font:500 10px/1 var(--font);font-style:normal;color:var(--text-3)}
.p-tkt__ago{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;
  font:600 11px/1 var(--font);color:var(--text-2);font-variant-numeric:tabular-nums}
.p-tkt__act{flex:0 0 auto}
@media (max-width:1100px){
  .p-tk6__wrap{grid-template-columns:minmax(0,1fr)}
  .p-tk6__panel{display:none}
  .p-tk6__search{flex-basis:200px}
  .p-tkt__n{display:none}
}

/* ==========================================================================
   FLEET v6 — Units · Drivers · Workshop · Against contract, one page.
   The registry rows reuse the live-map row grammar; the ledgers reuse the
   coverage-row grammar from the plan view. Nothing new to learn.
   ========================================================================== */
.p-fl6__wrap{
  flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
}
.p-fl6__wrap .m-pager{padding:8px 14px;border-top:1px solid var(--line-subtle)}
.p-fl6__yr{font:500 10.5px/1 var(--font);font-style:normal;color:var(--text-3);flex:0 0 auto}
.p-fl6 .p-tkr__i{min-height:52px}
.p-fl6 .p-tkr__i .m-pill{flex:0 0 auto}
.p-fl6__shop,.p-fl6__ag{
  min-height:0;overflow:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:12px;padding-bottom:2px;
}
.p-fl6__shop > .m-card,.p-fl6__ag > .m-card,
.p-fl6__shop > .m-banner,.p-fl6__ag > .m-banner{flex:0 0 auto}
@media (max-width:1100px){
  .p-fl6 .p-tkr__m{max-width:46vw}
}

/* ==========================================================================
   CONTRACTORS v6 — League · Cleanliness · Compliance · Contracts · Fleet gap
   The league is a ranked list in the registry row grammar; compliance and
   the contract ledger reuse the coverage-row grammar. One new cell: the
   rank block, and the row of role dots on the coverage list.
   ========================================================================== */
.p-co6__scroll{
  min-height:0;overflow:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:12px;padding-bottom:2px;
}
.p-co6__scroll > .m-card,.p-co6__scroll > .m-banner,.p-co6__scroll > .m-grid{flex:0 0 auto}
.p-co6__ctwrap{
  min-height:0;display:grid;grid-template-rows:minmax(0,55%) minmax(0,1fr);gap:12px;
}
.p-co6__head{
  display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;
  padding:9px 14px;border-bottom:1px solid var(--line-subtle);
  font:var(--ty-caption);color:var(--text-3);
}
.p-co6__head:last-child{border-top:1px solid var(--line-subtle);border-bottom:0}
.p-co6__head .m-demo{margin:0}

.p-co6 .p-co6__i,.p-co6__i{
  display:flex;align-items:center;gap:11px;min-width:0;
  padding:9px 14px;min-height:56px;
  border-top:1px solid var(--line-subtle);
  cursor:pointer;transition:background var(--t-fast) var(--ease);
}
.p-co6__i:first-child{border-top:0}
.p-co6__i:hover{background:var(--surface-sunken)}
.p-co6__i:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.p-co6__rank{flex:0 0 58px;display:flex;flex-direction:column;align-items:center;gap:1px}
.p-co6__rank > b{font:700 15px/1.1 var(--font);color:var(--text);font-variant-numeric:tabular-nums}
.p-co6__rank .p-move{font:600 9.5px/1 var(--font);display:inline-flex;align-items:center;gap:2px}
.p-co6__score{flex:0 0 auto;min-width:84px}
.p-co6__spark{flex:0 0 96px;min-width:0}
.p-co6__spark .m-chart{width:96px}
.p-co6__sla{flex:0 0 118px;display:flex;align-items:center;gap:7px;min-width:0}
.p-co6__sla .m-bar{flex:1 1 auto;min-width:44px}
.p-co6__sla > b{font:650 11.5px/1 var(--font);color:var(--text);font-variant-numeric:tabular-nums;flex:0 0 auto}
.p-co6__sla > b small{font-size:9.5px;color:var(--text-3);font-weight:500}
.p-co6__sla > em{font:var(--ty-caption);font-style:normal;color:var(--text-3)}

/* the seven role dots on the coverage rows */
.p-co6__roles{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px}
.p-co6__role{
  width:10px;height:10px;border-radius:50%;
  background:var(--surface-sunken);border:1px solid var(--line);
}
.p-co6__role.is-on{background:var(--rc,var(--ok-fill));border-color:transparent}
.p-co6__role.is-gap{background:var(--crit-soft);border-color:var(--crit-fill)}

@media (max-width:1280px){
  .p-co6__spark{display:none}
}
@media (max-width:1100px){
  .p-co6__sla{display:none}
  .p-co6__ctwrap{grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
}

/* ==========================================================================
   REPORTS v6 — the report library beside its canvas, in the console grammar:
   the chip line up top, the picker as a quiet rail, the canvas one scrolling
   read with the stat line, the picture and the rows.
   ========================================================================== */
.p-rp6__main{gap:0}
.p-rp6__split{
  flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:clamp(218px,17vw,264px) minmax(0,1fr);gap:12px;
}
.p-rp6__pick{min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:0}
.p-rp6__picklist{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:6px}
.p-rp6__picklist .p-rep__grp{margin:0 0 6px}
.p-rp6__picklist .p-rep__grp > h4{
  font:var(--ty-label-sm);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;
  padding:8px 8px 4px;
}
.p-rp6__picklist .p-rep__item{
  display:flex;align-items:center;gap:8px;min-width:0;
  padding:6px 8px;border-radius:var(--r-md);cursor:pointer;
  transition:background var(--t-fast) var(--ease);
}
.p-rp6__picklist .p-rep__item:hover{background:var(--surface-sunken)}
.p-rp6__picklist .p-rep__item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.p-rp6__picklist .p-rep__item.is-on{background:var(--accent-soft)}
.p-rp6__picklist .p-rep__item.is-on b{color:var(--accent-press)}
.p-rp6__picklist .p-rep__item__ic{
  flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-sm);
  display:grid;place-items:center;color:var(--text-2);background:var(--surface-sunken);
}
.p-rp6__picklist .p-rep__item.is-on .p-rep__item__ic{color:var(--accent-press);background:transparent}
.p-rp6__picklist .p-rep__item__x b{
  font:550 12.2px/15px var(--font);color:var(--text);
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.p-rp6__canvas{
  min-height:0;overflow:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:12px;padding-bottom:2px;
}
.p-rp6__canvas > *{flex:0 0 auto}
.p-rp6__stats{padding:2px 2px 0}
@media (max-width:1100px){
  .p-rp6__split{grid-template-columns:minmax(0,1fr)}
  .p-rp6__pick{display:none}
}
@media print{
  .p-rp6__split{display:block}
  .p-rp6__canvas{overflow:visible}
}

/* ==========================================================================
   ADMINISTRATION v6 — Accounts · Roles · CRM link · Queue · Field map · Log.
   One page for who may use the console and whether the CRM link is healthy.
   The account rows reuse the live-map row grammar; the queue and the log
   keep their tables, boxed in the fleet scroll wrap; the roles matrix keeps
   its rail. Nothing new to learn.
   ========================================================================== */
.p-ad6__scroll{
  flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:12px;padding-bottom:4px;
}
.p-ad6__scroll > .m-banner{flex:0 0 auto}
/* the main column grows every child; a banner is a line, not a region */
.p-ad6 .p-cl6__main > .m-banner{flex:0 0 auto;min-height:auto}
.p-ad6__seen{
  flex:0 0 auto;font:600 10.8px/1 var(--font);font-style:normal;color:var(--text-2);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.p-ad6__seen.is-stale{color:var(--text-3)}
.p-ad6__ok{display:inline-flex;color:var(--ok);flex:0 0 auto}
.p-ad6__roles{align-items:start}
.p-ad6__rail{display:flex;flex-direction:column;gap:12px;min-width:0}
.p-ad6 .p-fl6__wrap .m-table-wrap{border:0;border-radius:0}
@media (max-width:1100px){
  .p-ad6__roles{grid-template-columns:minmax(0,1fr)}
  .p-ad6__seen{display:none}
}

/* ==========================================================================
   MASTER DATA v6 — the registers move into the report-library picker; the
   band keeps the family pills. A count sits at the end of each picker row.
   ========================================================================== */
.p-md6__main .p-rp6__split{grid-template-columns:clamp(218px,17vw,264px) minmax(0,1fr)}
.p-md6__n{
  flex:0 0 auto;font:600 10.5px/1 var(--font);font-style:normal;
  color:var(--text-3);font-variant-numeric:tabular-nums;
  padding:2px 7px;border-radius:var(--r-full);background:var(--surface-sunken);
}
.p-rp6__picklist .p-rep__item.is-on .p-md6__n{background:var(--surface);color:var(--accent-press)}
@media (max-width:1100px){
  .p-md6__main .p-rp6__split{grid-template-columns:minmax(0,1fr)}
}

/* the provenance panel, under a name of its own (see masterdata.js note:
   .p-prov belongs to the facilities verified-name badge) */
.p-mdprov{display:flex;flex-direction:column}
.p-mdprov__head{
  display:flex;align-items:flex-start;gap:var(--s-3);
  padding:var(--card-pad-lg);border-bottom:1px solid var(--line-subtle);
}
.p-mdprov__ic{
  flex:0 0 auto;width:40px;height:40px;border-radius:var(--r-md);
  display:grid;place-items:center;
  background:var(--ok-soft);color:var(--ok);
}
.p-mdprov__x{display:flex;flex-direction:column;gap:4px;min-width:0}
.p-mdprov__x > b{font:var(--ty-h2);color:var(--text)}
.p-mdprov__x > span{font:var(--ty-body-sm);color:var(--text-2);line-height:1.65;max-width:76ch}
.p-mdprov__bar{padding:var(--s-4) var(--card-pad-lg);border-bottom:1px solid var(--line-subtle)}
.p-mdprov__legend{
  display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap;
  margin-block-start:var(--s-2);font:var(--ty-caption);color:var(--text-2);
}
.p-mdprov__legend > span{display:inline-flex;align-items:center;gap:6px}
.p-mdprov__legend b{color:var(--text);font-variant-numeric:tabular-nums}
.p-mdprov__tbl{min-width:0}
@media (max-width:1100px){
  .p-mdprov__head{flex-direction:column}
}

/* ==========================================================================
   REGISTRY v6 — registering records. The drawer forms reuse the kit's
   field atoms; only the commitment grid and the chip-pick field are new.
   ========================================================================== */
.p-rg6__pickf .p-chips{margin-top:2px}
.p-rg6__fleet{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px;
}
.p-rg6__fn{display:flex;flex-direction:column;gap:3px}
.p-rg6__fn > span{font:var(--ty-label-sm);color:var(--text-2)}
.p-rg6__fn .m-input{width:100%}
@media (max-width:1100px){
  .p-rg6__fleet{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- league v6.1: one KPI per row --------------------------------------
   The row keeps rank, movement, the firm and ONE number — the cleanliness
   score the league is ranked on, named so nobody has to guess what the
   figure is. Everything else opens with the row. */
.p-co6__score{display:flex;align-items:center;gap:10px;min-width:0;justify-content:flex-end}
.p-co6__score > u{
  text-decoration:none;font:var(--ty-caption);color:var(--text-3);white-space:nowrap;
}
.p-co6__go{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:var(--r-sm);color:var(--text-3);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.p-co6__i:hover .p-co6__go{background:var(--surface-sunken2,var(--surface-sunken));color:var(--text)}
[dir="rtl"] .p-co6__go svg{transform:scaleX(-1)}
.p-co6__flag{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--crit-fill);margin-inline-start:2px;flex:0 0 auto;
  box-shadow:0 0 0 3px var(--crit-soft);
}
@media (max-width:860px){
  .p-co6__score > u{display:none}
}
.p-co6__hint{font:var(--ty-caption);color:var(--text-3);margin-inline-start:auto}
.p-co6__head .p-co6__hint + .m-demo{margin-inline-start:10px}
@media (max-width:1100px){ .p-co6__hint{display:none} }