/* ==========================================================================
   Effred ecosystem — design system
   --------------------------------------------------------------------------
   One shell, seven portals. The grammar is deliberately inherited from the
   SSL Certificate Manager: a 46 px sticky strip of navigation, pill tabs, a
   dense data grid, Inter + JetBrains Mono, light by default with a dark
   toggle. What is new here is the ecosystem layer — portal cards, a product
   switcher, the rainbow profile ring, and a load strip that also reports
   itself as a circle inside the nav.

   Labels are short on purpose. A column is "Joined", not "Date of joining".
   Anything longer than two words belongs in a tooltip, not on the screen.

   Every time on screen is India Standard Time.
   ========================================================================== */

/* -- Light (default) ------------------------------------------------------ */
:root{
  /* surfaces */
  --bg:#f4f5f7; --bg2:#fff; --bg3:#eceef1; --bgH:#e2e5ea; --bgI:#f8f9fb;
  --bd:#d8dbe1; --bdL:#e6e8ed;
  /* ink */
  --tx:#0d0f14; --tx2:#525965; --tx3:#626975;
  /* Brand and semantics. These are TEXT colours — on a 9 px status pill they
     have to clear 4.5:1 against their own tint, which is why the greens and
     ambers are darker here than the portal accents below. */
  --ac:#2e6db4; --acBg:#eaf1fa; --acD:#255a95;
  --gn:#157742; --gnBg:#eaf6ef;
  --am:#8f5e07; --amBg:#fdf5e6;
  --rd:#bf3434; --rdBg:#fbecec;
  --bl:#2563eb; --blBg:#eef4ff;
  --vi:#6d28d9; --viBg:#f4f0fe;
  --te:#0a7263; --teBg:#e6f6f3;
  --or:#b34209; --orBg:#fdefe7;
  --sl:#475569; --slBg:#eef1f5;
  /* Portal accents. These are GRAPHIC colours — icon strokes and 3 px rails,
     which need 3:1, not 4.5:1. Keeping them vivid is what stops the seven
     portals from turning into seven shades of mud. */
  --p-dash:#2e6db4; --p-ems:#0e9f8a; --p-hrms:#4f46e5; --p-acct:#1e9e5a;
  --p-docs:#c8820b; --p-amc:#ea580c; --p-legal:#7c3aed; --p-admin:#475569;
  /* shape */
  --r:6px; --rl:10px; --rx:13px; --rp:999px;
  --sh:0 1px 2px rgba(13,15,20,.05);
  --shM:0 4px 14px rgba(13,15,20,.07);
  --shL:0 16px 44px rgba(13,15,20,.13);
  --ring:0 0 0 2px var(--acBg);
  /* type */
  --f:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fm:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --nav-h:46px;
}


/* -- Base ----------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f);background:var(--bg);color:var(--tx);font-size:13px;
  min-height:100vh;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Figures line up in a column. Every screen in this product is a column of
     numbers, and proportional digits make a total look ragged. */
  font-variant-numeric:tabular-nums;
  /* Inter's disambiguated characters. This app is full of codes people read
     aloud and type back — EMP0011, IFSC, a UTR — and the default `l`, `1`
     and `I` are close enough in Inter to be misread. cv05 gives `l` a tail,
     cv08 an upper-case `I` with serifs, cv11 a single-storey `a`. */
  font-feature-settings:'cv05' 1,'cv08' 1,'cv11' 1;
  font-optical-sizing:auto;
  line-height:1.5;text-rendering:optimizeLegibility}
::selection{background:var(--ac);color:#fff}
a{color:var(--ac);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.25;letter-spacing:-.02em;font-weight:500}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bd);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--tx3)}
:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
svg.i{width:14px;height:14px;flex-shrink:0;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn svg.i{width:13px;height:13px}
.ico-btn svg.i{width:13px;height:13px}
.tab svg.i{width:13px;height:13px}
.empty svg.i{width:24px;height:24px}
.pc-ic svg.i{width:19px;height:19px;stroke-width:1.7}
.ki-ic svg.i{width:15px;height:15px}

/* Density is a user preference; it only ever changes padding, never type. */
body[data-density="compact"] table.dt td{padding:4px 9px}
body[data-density="relaxed"] table.dt td{padding:10px 12px}

/* == 1. Load strip + nav circle ============================================
   Two views of one state. The strip answers "is something happening"; the
   circle in the nav answers "is it still happening" once the strip has run
   to 90% and parked there. */
#loadbar{position:fixed;top:0;left:0;height:2px;width:0;z-index:2000;
  background:linear-gradient(90deg,var(--ac),var(--te) 45%,var(--vi));
  box-shadow:0 0 10px var(--ac);opacity:1;
  transition:width .25s cubic-bezier(.2,.7,.3,1),opacity .35s}
#loadbar.done{opacity:0}
.navspin{width:15px;height:15px;border-radius:50%;flex-shrink:0;
  border:1.8px solid var(--bd);border-top-color:var(--ac);
  animation:spin .62s linear infinite;opacity:0;
  transition:opacity .2s;margin:0 2px}
.navspin.on{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.ld-spin{display:inline-block;width:16px;height:16px;border:2px solid var(--bd);
  border-top-color:var(--ac);border-radius:50%;animation:spin .62s linear infinite}
.loader-w{display:flex;align-items:center;justify-content:center;padding:38px;
  gap:9px;color:var(--tx3);font-size:11px;font-weight:600}

/* == 2. Top navigation strip =============================================== */
.nav{position:sticky;top:0;z-index:120;background:var(--bg2);
  border-bottom:1px solid var(--bd)}
.nav-in{display:flex;align-items:center;height:var(--nav-h);padding:0 12px;gap:7px;
  max-width:1860px;margin:0 auto}
.nav-brand{font-weight:600;font-size:13.5px;letter-spacing:-.03em;white-space:nowrap;
  display:flex;align-items:center;gap:7px;color:var(--tx);flex-shrink:0}
.nav-brand:hover{text-decoration:none;opacity:.82}
.nav-logo{height:22px;width:auto;display:block}
.nav-mark{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  background:var(--ac);color:#fff;font-size:11px;font-weight:600;letter-spacing:-.02em;
  flex-shrink:0}
/* The drawn mark sits a little heavier than a UI icon: at 13 px on a coloured
   tile a 1.9 stroke goes thin and the arms start to disappear. */
.nav-mark svg.i{width:13px;height:13px;stroke-width:2.4}
.sep{width:1px;height:16px;background:var(--bd);flex-shrink:0}
/* The tenant chip. Which company am I inside — always answerable at a glance. */
.nav-tenant{display:flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;
  border:1px solid var(--bd);border-radius:var(--rp);background:var(--bgI);
  font-size:11px;font-weight:500;white-space:nowrap;flex-shrink:0;cursor:pointer;
  color:var(--tx)}
.nav-tenant:hover{border-color:var(--tx3);text-decoration:none}
.nav-tenant .tn-av{width:17px;height:17px;border-radius:50%;display:grid;
  place-items:center;font-size:8px;font-weight:600;color:#fff;background:var(--sl)}
.nav-tenant .tn-host{font-family:var(--fm);font-size:9.5px;color:var(--tx3);font-weight:500}
.nav-tag{font-size:8.5px;font-weight:600;color:var(--tx2);letter-spacing:.7px;
  text-transform:uppercase;white-space:nowrap;flex-shrink:0}
.gap{flex:1;min-width:4px}

/* Global search sits in the strip, not on the page. Ctrl/Cmd-K focuses it. */
.nav-search{display:flex;align-items:center;gap:7px;padding:0 9px;height:28px;
  border:1px solid var(--bd);border-radius:var(--r);background:var(--bg);
  min-width:150px;max-width:300px;flex:1;color:var(--tx3);cursor:text}
.nav-search:hover{border-color:var(--tx3)}
.nav-search input{flex:1;border:none;outline:none;background:none;font-family:var(--f);
  font-size:11.5px;color:var(--tx);min-width:0;height:auto;padding:0}
.nav-search input:focus{box-shadow:none;border:none}
.kbd{font-family:var(--fm);font-size:8.5px;font-weight:600;color:var(--tx3);
  border:1px solid var(--bd);border-bottom-width:2px;border-radius:4px;
  padding:1px 4px;background:var(--bg2);white-space:nowrap}

/* Icon actions: bell, approvals, help. Counts ride on the corner. */
.nav-ico{position:relative;width:28px;height:28px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:var(--r);
  border:1px solid transparent;background:none;color:var(--tx2);cursor:pointer;
  flex-shrink:0}
.nav-ico:hover{background:var(--bg3);color:var(--tx);text-decoration:none}
.nav-ico .dot{position:absolute;top:2px;right:2px;min-width:14px;height:14px;
  padding:0 3px;border-radius:var(--rp);background:var(--rd);color:#fff;
  font-size:8px;font-weight:600;display:grid;place-items:center;
  border:1.5px solid var(--bg2);line-height:1}
.nav-ico .dot.am{background:var(--am)}
.nav-ico.on{background:var(--bg3);color:var(--tx)}


/* == 3. Product switcher =================================================== */
.sw{position:relative;flex-shrink:0}
.sw-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px;
  border:1px solid var(--bd);border-radius:var(--r);background:var(--bg2);
  color:var(--tx);font-family:var(--f);font-size:11.5px;font-weight:500;cursor:pointer;
  white-space:nowrap}
.sw-btn:hover{background:var(--bg3)}
.sw-btn .car{width:5px;height:5px;border-right:1.6px solid var(--tx3);
  border-bottom:1.6px solid var(--tx3);transform:translateY(-2px) rotate(45deg)}
.sw.open .sw-btn{border-color:var(--ac);box-shadow:var(--ring)}
.sw-pop{position:absolute;top:34px;left:0;z-index:300;width:376px;
  background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rx);
  box-shadow:var(--shL);padding:7px;display:none;animation:pop .14s ease-out}
.sw.open .sw-pop{display:block}
.sw-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.sw-i{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:9px;
  cursor:pointer;color:var(--tx);border:1px solid transparent}
.sw-i:hover{background:var(--bg3);text-decoration:none}
.sw-i.on{background:var(--acBg);border-color:var(--ac)}
.sw-i.off{opacity:.4;cursor:not-allowed}
.sw-i .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  color:#fff;flex-shrink:0}
.sw-i .nm{font-size:11.5px;font-weight:500;line-height:1.25}
/* Was `.sb`, which is also the class on every table's search box — a
   bordered 28px flex row with a 190px minimum. The subtitle inherited all
   of it and rendered as a grey input inside every card in the switcher,
   which is also what forced the popover wider than its content. Two
   components must not share a class name. */
.sw-i .sw-sub{display:block;font-size:9px;color:var(--tx3);font-weight:600;
  margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-foot{border-top:1px solid var(--bdL);margin-top:6px;padding:7px 9px 3px;
  font-size:9.5px;color:var(--tx3);font-weight:600;display:flex;
  justify-content:space-between;align-items:center}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.985)}}

/* == 4. Profile — the rainbow ring =========================================
   The ring is a conic gradient behind a 2 px inset, so the avatar itself
   stays a clean circle. It rotates on hover and while the session is being
   refreshed; otherwise it is still, because a permanently spinning avatar
   reads as an error state. */
.pf{position:relative;flex-shrink:0}
.av-ring{width:30px;height:30px;border-radius:50%;padding:2px;cursor:pointer;
  background:conic-gradient(from 0deg,#ff5f6d,#ffc371,#4ade80,#38bdf8,#818cf8,#e879f9,#ff5f6d);
  display:grid;place-items:center;transition:transform .2s;position:relative}
.av-ring::before{content:'';position:absolute;inset:-1px;border-radius:50%;
  background:inherit;filter:blur(7px);opacity:0;transition:opacity .25s;z-index:-1}
.av-ring:hover::before{opacity:.55}
.av-ring:hover{transform:scale(1.06)}
.av-ring.spin{animation:ringspin 2.4s linear infinite}
@keyframes ringspin{to{transform:rotate(360deg)}}
.av-ring > .av-in{width:100%;height:100%;border-radius:50%;background:var(--bg2);
  padding:1.5px;display:grid;place-items:center}
.av-ring .av-face{width:100%;height:100%;border-radius:50%;object-fit:cover;
  display:grid;place-items:center;font-size:10.5px;font-weight:600;color:#fff;
  background:var(--sl);letter-spacing:-.02em}
.av-ring.sm{width:24px;height:24px}
.av-ring.sm .av-face{font-size:8.5px}
.av-ring.lg{width:48px;height:48px}
.av-ring.lg .av-face{font-size:16px}
.av-ring.xl{width:74px;height:74px;padding:3px}
.av-ring.xl .av-face{font-size:24px}
/* Muted ring for people who are not the signed-in user. */
.av-ring.mute{background:var(--bd)}
.pf-pop{position:absolute;top:38px;right:0;z-index:300;width:252px;
  background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rx);
  box-shadow:var(--shL);display:none;overflow:hidden;animation:pop .14s ease-out}
.pf.open .pf-pop{display:block}
.pf-head{padding:12px;display:flex;gap:10px;align-items:center;
  border-bottom:1px solid var(--bdL);background:var(--bgI)}
.pf-nm{font-size:12.5px;font-weight:600;line-height:1.25}
.pf-ml{font-size:9.5px;color:var(--tx3);font-weight:600;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-list{padding:5px}
.pf-i{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;
  font-size:11.5px;font-weight:600;color:var(--tx);cursor:pointer}
.pf-i:hover{background:var(--bg3);text-decoration:none}
.pf-i.dg{color:var(--rd)}
.pf-i .rt{margin-left:auto;font-size:9px;color:var(--tx3);font-weight:600}
.pf-sep{height:1px;background:var(--bdL);margin:5px 0}

/* Avatar stack — teams, panels, watchers. */
.av-stack{display:flex;align-items:center}
.av-stack > *{margin-left:-7px;border:2px solid var(--bg2);border-radius:50%}
.av-stack > *:first-child{margin-left:0}
.av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:9px;font-weight:600;color:#fff;background:var(--sl);flex-shrink:0;
  letter-spacing:-.02em}
/* The same disc, holding a photograph instead of initials. object-fit is what
   stops a portrait being squashed into a circle. */
img.av{object-fit:cover;background:var(--bg3)}
.av.sm{width:20px;height:20px;font-size:8px}
.av.lg{width:34px;height:34px;font-size:12px}
.av-more{background:var(--bg3);color:var(--tx2)}

/* == 5. Buttons ============================================================ */
.btn{display:inline-flex;align-items:center;gap:5px;padding:0 11px;height:28px;
  border-radius:var(--r);font-family:var(--f);font-size:11px;font-weight:500;
  border:1px solid var(--bd);background:var(--bg2);color:var(--tx2);
  cursor:pointer;white-space:nowrap;flex-shrink:0;text-decoration:none;
  transition:background .12s,border-color .12s,color .12s}
.btn:hover{background:var(--bgH);text-decoration:none;color:var(--tx)}
.btn-p{background:var(--ac);color:#fff;border-color:var(--ac)}
.btn-p:hover{background:var(--acD);border-color:var(--acD);color:#fff}
.btn-dark{background:var(--tx);color:var(--bg2);border-color:var(--tx)}
.btn-dark:hover{opacity:.86;color:var(--bg2)}
.btn-gn{background:var(--gn);color:#fff;border-color:var(--gn)}
.btn-gn:hover{color:#fff;opacity:.88}
.btn-rd{background:var(--rd);color:#fff;border-color:var(--rd)}
.btn-rd:hover{color:#fff;opacity:.88}
.btn-gh{border-color:transparent;background:none}
.btn-gh:hover{background:var(--bg3)}
.btn-sm{height:23px;padding:0 8px;font-size:10px;gap:4px}
.btn-lg{height:34px;padding:0 16px;font-size:12.5px}
.btn-w{width:100%;justify-content:center}
.btn:disabled,.btn.dis{opacity:.42;cursor:not-allowed;pointer-events:none}
.btn.busy{position:relative;color:transparent!important}
.btn.busy svg.i{visibility:hidden}
.btn.busy::after{content:'';position:absolute;inset:0;margin:auto;width:12px;
  height:12px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:spin .6s linear infinite}
.btn:not(.btn-p):not(.btn-dark):not(.btn-gn):not(.btn-rd).busy::after{
  border-color:var(--bd);border-top-color:var(--ac)}
.ico-btn{width:26px;height:26px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--bd);border-radius:var(--r);
  background:var(--bg2);color:var(--tx2);cursor:pointer;flex-shrink:0}
.ico-btn:hover{border-color:var(--tx3);color:var(--tx)}
.ico-btn.danger:hover{border-color:var(--rd);color:var(--rd)}
.ico-btn.bare{border-color:transparent;background:none}
.ico-btn.bare:hover{background:var(--bg3)}
.btn-grp{display:inline-flex}
.btn-grp .btn{border-radius:0;margin-left:-1px}
.btn-grp .btn:first-child{border-radius:var(--r) 0 0 var(--r);margin-left:0}
.btn-grp .btn:last-child{border-radius:0 var(--r) var(--r) 0}

/* == 6. Page frame ========================================================= */
.main{max-width:1860px;margin:0 auto;padding:12px 14px 30px}
.main.narrow{max-width:1180px}
/* A form at 840 was two columns of 400, which is narrow for a label above
   an input and cramped for three. 1040 gives three honest columns. */
.main.form{max-width:1040px}
.main.wide{max-width:100%}
/* Optional left rail for portals with many sections. Collapses to icons. */
.shell{display:flex;align-items:flex-start;gap:0;max-width:1860px;margin:0 auto}
/* The rail is a column, so it is drawn as one: a hairline down its right
   edge, a little more width, and its own quiet ground. Without the line it
   floated in the page and the eye had to find the boundary from the ragged
   right-hand ends of the labels. */
.side{width:216px;flex-shrink:0;padding:10px 9px 30px;position:sticky;
  top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow-y:auto;
  background:var(--bg2);border-right:1px solid var(--bd);scrollbar-width:thin}
.side::-webkit-scrollbar{width:6px}
.side.mini{width:54px;padding:10px 7px 30px}
.side-t{font-size:8.5px;font-weight:600;color:var(--tx3);text-transform:uppercase;
  letter-spacing:.8px;padding:14px 10px 5px;line-height:1}
.side-t:first-child{padding-top:4px}
.side.mini .side-t,.side.mini .sd-lb,.side.mini .sd-ct{display:none}
.side.mini .sd{justify-content:center;padding:8px 0}
/* 500 for a label, 600 for the one you are on. It was the other way round —
   every row you were NOT on rendered heavier than the row you were, so the
   rail read as a list of ten equally-shouted destinations with one quiet one.
   The house rule is 600 for titles and values, 500 for labels. */
.sd{display:flex;align-items:center;gap:10px;padding:6.5px 10px;border-radius:7px;
  font-size:12px;font-weight:500;color:var(--tx2);cursor:pointer;
  margin-bottom:1px;position:relative;letter-spacing:-.005em;
  transition:background .12s,color .12s}
.sd .ic{display:flex;align-items:center;color:var(--tx3);flex-shrink:0}
.sd:hover{background:var(--bg3);color:var(--tx);text-decoration:none}
.sd:hover .ic{color:var(--tx2)}
.sd.on{background:var(--acBg);color:var(--ac);font-weight:600}
.sd.on .ic{color:var(--ac)}
.sd.on::before{content:"";position:absolute;left:-9px;top:5px;bottom:5px;width:2.5px;
  border-radius:0 3px 3px 0;background:var(--ac)}
.sd-lb{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-ct{font-size:9.5px;font-weight:600;color:var(--tx2);background:var(--bg3);
  border-radius:var(--rp);padding:1px 6px;flex-shrink:0;
  font-variant-numeric:tabular-nums}
.sd:hover .sd-ct{background:var(--bg2)}
.sd.on .sd-ct{background:var(--bg2);color:var(--ac)}
.sd-ct.hot{background:var(--rdBg);color:var(--rd)}
.side + .main{flex:1;min-width:0;padding-left:16px}
/* The narrow-screen rail lives in section 26 with the rest of the responsive
   rules, so there is one place that decides what happens below 1023px rather
   than two that fight over it. */

/* Page header: breadcrumb, title, status, meta, actions. */
.ph{display:flex;align-items:flex-start;gap:12px;margin-bottom:11px;flex-wrap:wrap}
.ph-l{flex:1;min-width:220px}
.crumb{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:600;
  color:var(--tx3);margin-bottom:4px;flex-wrap:wrap}
.crumb a{color:var(--tx3)}
.crumb a:hover{color:var(--tx2);text-decoration:none}
.crumb .cs{opacity:.5}
.ph h1{font-size:19px;font-weight:600;letter-spacing:-.03em;display:flex;
  align-items:center;gap:9px;flex-wrap:wrap}
.ph-meta{font-size:10px;color:var(--tx3);font-weight:600;margin-top:3px;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ph-meta .mono{font-family:var(--fm)}
.ph-act{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* == 7. Portal cards — the dashboard's front door ==========================
   A card is a door, not a report. No coloured rail down the edge and no
   blinking dot: the accent lives in the icon tile alone, and anything waiting
   is said in words with a count. Colour is used once per card, quietly. */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
@media(max-width:1400px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1040px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pgrid{grid-template-columns:1fr}}
.pc{position:relative;background:var(--bg2);border:1px solid var(--bd);
  border-radius:14px;padding:16px 17px 14px;box-shadow:var(--sh);
  cursor:pointer;overflow:hidden;display:flex;flex-direction:column;
  min-height:158px;text-align:left;font-family:var(--f);color:var(--tx);
  transition:border-color .18s,box-shadow .18s,transform .18s}
.pc:hover{border-color:var(--pa,var(--ac));box-shadow:var(--shM);
  transform:translateY(-1px);text-decoration:none}
.pc:active{transform:none}
.pc-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
/* The one place the portal's colour appears. A soft tint, a 1 px keyline of
   the same hue, and the icon stroked in it. */
.pc-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  color:var(--pa,var(--ac));
  background:color-mix(in srgb,var(--pa,var(--ac)) 9%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pa,var(--ac)) 18%,transparent);
  flex-shrink:0}
.pc-nm{font-size:13.5px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.pc-sb{font-size:10.5px;color:var(--tx3);font-weight:400;margin-top:3px;line-height:1.4}
.pc-go{margin-left:auto;color:var(--tx3);opacity:0;flex-shrink:0;
  transition:opacity .18s,transform .18s;transform:translateX(-4px)}
.pc:hover .pc-go{opacity:.8;transform:none}
.pc-nums{display:flex;gap:20px;margin-top:auto;padding-top:4px}
.pc-n{min-width:0}
.pc-n-v{font-size:21px;font-weight:600;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums}
.pc-n-l{font-size:9px;font-weight:500;color:var(--tx3);text-transform:uppercase;
  letter-spacing:.6px;margin-top:5px;white-space:nowrap}
.pc-n.hot .pc-n-v{color:var(--rd)}
.pc-n.warn .pc-n-v{color:var(--am)}
.pc-n.ok .pc-n-v{color:var(--gn)}
/* What is waiting. A count and a noun, on a quiet keyline. Never animated --
   a pulsing dot on eight cards at once is a fairground, not a dashboard. */
.pc-need{margin:14px -17px -14px;padding:9px 17px;border-top:1px solid var(--bdL);
  font-size:10.5px;font-weight:500;color:var(--tx2);display:flex;
  align-items:center;gap:7px}
.pc-need .ct{font-weight:600;color:var(--tx);font-variant-numeric:tabular-nums}
.pc-need.hot{color:var(--rd)}
.pc-need.hot .ct{color:var(--rd)}
.pc-need.warn{color:var(--am)}
.pc-need.warn .ct{color:var(--am)}
.pc-need.calm{color:var(--tx3)}
/* Entitled to the company, but not to this person. */
.pc.lock{cursor:not-allowed;opacity:.6;background:var(--bgI)}
.pc.lock:hover{transform:none;box-shadow:var(--sh);border-color:var(--bd)}
.pc.lock .pc-ic{color:var(--tx3);background:var(--bg3);box-shadow:none}
.pc.lock .pc-nums{visibility:hidden}
.pc-lockchip{position:absolute;top:16px;right:16px;display:inline-flex;
  align-items:center;gap:5px;font-size:9px;font-weight:500;
  letter-spacing:.3px;color:var(--tx3)}
/* Portal accent binding */
.pc[data-p="dash"]{--pa:var(--p-dash)} .pc[data-p="ems"]{--pa:var(--p-ems)}
.pc[data-p="hrms"]{--pa:var(--p-hrms)} .pc[data-p="acct"]{--pa:var(--p-acct)}
.pc[data-p="docs"]{--pa:var(--p-docs)} .pc[data-p="amc"]{--pa:var(--p-amc)}
.pc[data-p="legal"]{--pa:var(--p-legal)} .pc[data-p="admin"]{--pa:var(--p-admin)}
.sw-i[data-p="dash"] .ic{background:var(--p-dash)}
.sw-i[data-p="ems"] .ic{background:var(--p-ems)}
.sw-i[data-p="hrms"] .ic{background:var(--p-hrms)}
.sw-i[data-p="acct"] .ic{background:var(--p-acct)}
.sw-i[data-p="docs"] .ic{background:var(--p-docs)}
.sw-i[data-p="amc"] .ic{background:var(--p-amc)}
.sw-i[data-p="legal"] .ic{background:var(--p-legal)}
.sw-i[data-p="admin"] .ic{background:var(--p-admin)}

/* == 8. KPI tiles ========================================================== */
.kg{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:11px}
.kg.k6{grid-template-columns:repeat(6,1fr)}
.kg.k5{grid-template-columns:repeat(5,1fr)}
.kg.k4{grid-template-columns:repeat(4,1fr)}
.kg.k3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1160px){.kg,.kg.k6,.kg.k5,.kg.k4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.kg,.kg.k6,.kg.k5,.kg.k4,.kg.k3{grid-template-columns:repeat(2,1fr)}}
.ki{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rl);
  padding:11px 13px;box-shadow:var(--sh);position:relative;text-align:left;
  font-family:var(--f);color:var(--tx);
  transition:transform .15s,border-color .15s,box-shadow .15s}
.ki.drill{cursor:pointer}
.ki.drill:hover{border-color:var(--ac);transform:translateY(-2px);box-shadow:var(--shM)}
.ki-lb{font-size:8.5px;font-weight:600;color:var(--tx3);text-transform:uppercase;
  letter-spacing:.55px;margin-bottom:5px;display:flex;align-items:center;gap:5px}
.ki-v{font-size:24px;font-weight:600;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:5px}
.ki-v .un{font-size:11px;font-weight:500;color:var(--tx3);letter-spacing:0}
.ki-sub{font-size:9px;color:var(--tx3);margin-top:5px;font-weight:600;
  display:flex;align-items:center;gap:5px}
.ki.ok .ki-v{color:var(--gn)} .ki.warn .ki-v{color:var(--am)}
.ki.crit .ki-v{color:var(--rd)} .ki.acc .ki-v{color:var(--ac)}
.ki.info .ki-v{color:var(--bl)}
/* A 3 px rail so the row reads by colour position, not by hue alone. */
.ki.crit::before,.ki.warn::before,.ki.ok::before,.ki.acc::before,.ki.info::before{
  content:'';position:absolute;left:0;top:11px;bottom:11px;width:3px;
  border-radius:0 3px 3px 0}
.ki.crit::before{background:var(--rd)} .ki.warn::before{background:var(--am)}
.ki.ok::before{background:var(--gn)} .ki.acc::before{background:var(--ac)}
.ki.info::before{background:var(--bl)}
.trend{display:inline-flex;align-items:center;gap:2px;font-weight:600;font-size:9px}
.trend.up{color:var(--gn)} .trend.dn{color:var(--rd)} .trend.flat{color:var(--tx3)}

/* == 9. Cards and grids ==================================================== */
.cd{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rx);
  overflow:hidden;box-shadow:var(--sh);margin-bottom:9px}
.cd-h{padding:9px 13px;border-bottom:1px solid var(--bd);display:flex;
  align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.cd-t{font-size:12px;font-weight:600;letter-spacing:-.02em;display:flex;
  align-items:center;gap:7px}
.cd-s{font-size:9px;color:var(--tx3);font-weight:600}
.cd-bd{padding:12px 13px}
.cd-bd.flush{padding:0}
.cd-f{padding:8px 13px;border-top:1px solid var(--bdL);background:var(--bgI);
  font-size:10px;font-weight:600;color:var(--tx3);display:flex;
  justify-content:space-between;align-items:center;gap:8px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:9px}
.g21{display:grid;grid-template-columns:2fr 1fr;gap:9px;margin-bottom:9px}
.g12{display:grid;grid-template-columns:1fr 2fr;gap:9px;margin-bottom:9px}
@media(max-width:1000px){.g2,.g3,.g21,.g12{grid-template-columns:1fr}}
.chart-wrap{position:relative;height:236px}
.chart-wrap.sm{height:172px}
.chart-wrap.lg{height:310px}

/* == 10. Tabs, segments ==================================================== */
.tabs{display:flex;gap:1px;background:var(--bg3);border-radius:7px;padding:2px;
  margin-bottom:11px;width:max-content;max-width:100%;overflow-x:auto;
  scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:none;background:none;font-family:var(--f);font-size:11px;font-weight:500;
  color:var(--tx2);padding:6px 15px;border-radius:5px;cursor:pointer;
  white-space:nowrap;display:flex;align-items:center;gap:6px}
.tab:hover{color:var(--tx)}
.tab.on{background:var(--bg2);color:var(--tx);box-shadow:var(--sh)}
.tab .cnt{background:var(--tx3);color:var(--bg2);border-radius:var(--rp);padding:0 5px;
  font-size:8.5px;font-weight:600;min-width:15px;text-align:center;line-height:15px}
.tab.on .cnt{background:var(--ac);color:#fff}
.tab .cnt.rd{background:var(--rd);color:#fff}
/* Underline tabs for record detail pages. */
.utabs{display:flex;gap:2px;border-bottom:1px solid var(--bd);margin-bottom:12px;
  overflow-x:auto;scrollbar-width:none}
.utabs::-webkit-scrollbar{display:none}
.utab{border:none;background:none;font-family:var(--f);font-size:11.5px;font-weight:500;
  color:var(--tx3);padding:8px 12px;cursor:pointer;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;
  align-items:center;gap:6px}
.utab:hover{color:var(--tx2)}
.utab.on{color:var(--tx);border-bottom-color:var(--ac)}

/* == 11. Toolbar, filters ================================================== */
.toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 12px;
  border-bottom:1px solid var(--bd);background:var(--bg2)}
.sb{display:flex;align-items:center;gap:7px;padding:0 10px;height:28px;
  border:1px solid var(--bd);border-radius:var(--r);background:var(--bg);
  min-width:190px;flex:1;max-width:330px}
.sb svg{color:var(--tx3)}
.sb input{flex:1;border:none;outline:none;font-family:var(--f);font-size:11.5px;
  background:none;color:var(--tx);padding:0;min-width:0;height:auto}
.sb input:focus{box-shadow:none;border:none}
.sel{appearance:none;
  background:var(--bg3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%239aa1ad'/%3E%3C/svg%3E") no-repeat right 7px center;
  border:1px solid var(--bd);border-radius:var(--r);padding:0 22px 0 8px;height:26px;
  font-family:var(--f);font-size:11px;font-weight:500;color:var(--tx);cursor:pointer;
  width:auto}
option{background:var(--bg2);color:var(--tx)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:500;
  padding:3px 9px;border-radius:var(--rp);background:var(--bg3);color:var(--tx2);
  border:1px solid var(--bd);cursor:pointer;white-space:nowrap}
/* The red is for a chip that removes a filter — the X reading. A chip that
   *selects* one is a different control and must not promise a delete. */
.chip:hover{border-color:var(--rd);color:var(--rd)}
.chip.st{cursor:default} .chip.st:hover{border-color:var(--bd);color:var(--tx2)}
.chip.on{background:var(--acBg);border-color:var(--ac);color:var(--ac)}
.chip.on:hover,.chip-row.pick .chip:hover{border-color:var(--ac);color:var(--ac)}
.chip .n{font-variant-numeric:tabular-nums;opacity:.7;font-weight:600}
.chip-row{display:flex;gap:5px;flex-wrap:wrap;padding:7px 12px;
  border-bottom:1px solid var(--bd);background:var(--bg2);align-items:center}
/* The same row of chips used as a page control rather than a table header:
   no bar, no border, no background. Two screens wanted it, which is the bar
   for putting a shape in the kit rather than in a page. */
.ph-act .chip-row{padding:0;border:0;background:none}
/* Quick-range segment — the control people reach for first. */
.qf{display:inline-flex;background:var(--bg3);border-radius:7px;padding:2px;gap:1px}
.qf button{border:none;background:none;font-family:var(--f);font-size:10px;
  font-weight:500;color:var(--tx2);padding:5px 11px;border-radius:5px;cursor:pointer;
  white-space:nowrap}
.qf button:hover{color:var(--tx)}
.qf button.on{background:var(--bg2);color:var(--tx);box-shadow:var(--sh)}
.qf button.on.crit{color:var(--rd)} .qf button.on.warn{color:var(--am)}
/* Bulk-action bar, appears when rows are selected. */
.bulk{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--acBg);
  border-bottom:1px solid var(--ac);font-size:11px;font-weight:500;color:var(--ac);
  flex-wrap:wrap}

/* == 12. Data grid ========================================================= */
.rtw{overflow:auto;max-height:calc(100vh - 290px);min-height:260px;position:relative;
  background:var(--bg2)}
.rtw.short{max-height:340px;min-height:0}
.rtw.auto{max-height:none;min-height:0}
.grid-ov{position:absolute;inset:0;display:none;align-items:center;
  justify-content:center;gap:9px;
  background:color-mix(in srgb,var(--bg2) 74%,transparent);z-index:5;
  font-size:11px;font-weight:500;color:var(--tx2)}
.rtw.loading .grid-ov{display:flex}
table.dt{border-collapse:separate;border-spacing:0;font-size:11px;white-space:nowrap;
  width:max-content;min-width:100%}
table.dt th{position:sticky;top:0;z-index:3;background:var(--bg3);color:var(--tx2);
  font-weight:600;text-transform:uppercase;letter-spacing:.4px;font-size:8.5px;
  padding:0;text-align:left;border-bottom:1.5px solid var(--bd);
  border-right:1px solid var(--bd)}
.th-in{display:flex;align-items:center;gap:5px;padding:7px 10px;cursor:pointer;
  user-select:none;white-space:nowrap}
.th-in:hover{color:var(--tx)}
.th-in.plain{cursor:default}
.th-lb{flex:1;overflow:hidden;text-overflow:ellipsis}
.th-arrow{font-size:8px;opacity:.35}
.th-arrow.on{opacity:1;color:var(--tx)}
.th-f{width:11px;height:11px;flex-shrink:0;cursor:pointer;color:var(--tx3);
  fill:currentColor}
.th-f:hover,.th-f.on{color:var(--ac)}
table.dt td{padding:7px 10px;border-bottom:1px solid var(--bdL);
  border-right:1px solid var(--bdL);color:var(--tx);vertical-align:middle;
  max-width:440px;overflow:hidden;text-overflow:ellipsis}
table.dt td.num{text-align:right;font-family:var(--fm);font-weight:600}
table.dt td.mono{font-family:var(--fm)}
table.dt tbody tr{cursor:pointer}
table.dt tbody tr:hover td{background:var(--bg3)}
table.dt tbody tr.sel td{background:var(--acBg)}
table.dt tbody tr.mut td{color:var(--tx3)}
table.dt tfoot td{background:var(--bg3);font-weight:600;border-top:1.5px solid var(--bd);
  position:sticky;bottom:0;z-index:2}
.sticky-l{position:sticky;left:0;background:var(--bg2);z-index:2;
  border-right:1.5px solid var(--bd)}
table.dt th.sticky-l{z-index:4;background:var(--bg3)}
table.dt tbody tr:hover .sticky-l{background:var(--bg3)}
table.dt tbody tr.sel .sticky-l{background:var(--acBg)}
.sticky-r{position:sticky;right:0;background:var(--bg2);
  border-left:1.5px solid var(--bd);z-index:2}
table.dt th.sticky-r{z-index:4;background:var(--bg3)}
table.dt tbody tr:hover .sticky-r{background:var(--bg3)}
table.dt tbody tr.sel .sticky-r{background:var(--acBg)}
.row-act{display:flex;gap:4px;justify-content:flex-end}
.sub{font-size:9px;color:var(--tx3);font-weight:600}
.cbx{accent-color:var(--ac);width:13px;height:13px;cursor:pointer}
/* Two-line identity cell: avatar, name, secondary. Used in every directory. */
.idc{display:flex;align-items:center;gap:8px;min-width:0}
.idc-b{min-width:0}
.idc-n{font-weight:500;font-size:11px;overflow:hidden;text-overflow:ellipsis}
.idc-s{font-size:9px;color:var(--tx3);font-weight:600;overflow:hidden;
  text-overflow:ellipsis;margin-top:1px}
/* Number + proportional bar, so magnitude is visible while scanning. */
.dl{display:flex;align-items:center;gap:7px;justify-content:flex-end}
.dl-n{font-family:var(--fm);font-weight:500}
.dl-bar{width:36px;height:4px;border-radius:2px;background:var(--bg3);
  overflow:hidden;flex-shrink:0}
.dl-bar i{display:block;height:100%;border-radius:2px;background:var(--ac)}
/* Column filter popup + column chooser */
.fdd{position:fixed;z-index:400;background:var(--bg2);border:1px solid var(--bd);
  border-radius:9px;box-shadow:var(--shM);min-width:215px;max-width:300px;
  max-height:340px;display:none;flex-direction:column}
.fdd.show{display:flex}
.fdd-h{padding:7px 10px;border-bottom:1px solid var(--bd)}
.fdd-h input{width:100%;padding:0 8px;height:27px;border:1px solid var(--bd);
  border-radius:5px;font-size:10.5px;background:var(--bg);color:var(--tx);outline:none}
.fdd-b{flex:1;overflow-y:auto;padding:4px 0;min-height:60px}
.fdd-i{display:flex;align-items:center;gap:7px;padding:5px 12px;font-size:10.5px;
  cursor:pointer}
.fdd-i:hover{background:var(--bg3)}
.fdd-i input{accent-color:var(--ac);width:13px;height:13px}
.fdd-f{padding:6px 10px;border-top:1px solid var(--bd);display:flex;gap:6px;
  justify-content:flex-end}
.colpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px}
.colpick label{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:5px;
  font-size:11px;cursor:pointer;font-weight:600}
.colpick label:hover{background:var(--bg3)}
.colpick input{accent-color:var(--ac);width:13px;height:13px}

/* == 13. Pagination ======================================================== */
.pgw{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 12px;border-top:1px solid var(--bd);flex-wrap:wrap;background:var(--bg2)}
.pg-btn{min-width:24px;height:24px;padding:0 8px;border:1px solid var(--bd);
  border-radius:5px;background:var(--bg2);color:var(--tx2);font-size:10px;
  font-weight:500;cursor:pointer}
.pg-btn:hover:not(:disabled){border-color:var(--tx3);color:var(--tx)}
.pg-btn.on{background:var(--ac);color:#fff;border-color:var(--ac)}
.pg-btn:disabled{opacity:.4;cursor:not-allowed}
.pg-info{font-size:10px;color:var(--tx3);font-weight:600}

/* == 14. Status: tags, dots, pills ========================================= */
.tg{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;
  border-radius:var(--rp);font-size:9px;font-weight:600;white-space:nowrap;
  letter-spacing:.1px}
.tg::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;
  flex-shrink:0;opacity:.85}
.tg.nodot::before{display:none}
.tg-gn{background:var(--gnBg);color:var(--gn)} .tg-am{background:var(--amBg);color:var(--am)}
.tg-rd{background:var(--rdBg);color:var(--rd)} .tg-bl{background:var(--blBg);color:var(--bl)}
.tg-vi{background:var(--viBg);color:var(--vi)} .tg-ac{background:var(--acBg);color:var(--ac)}
.tg-te{background:var(--teBg);color:var(--te)} .tg-or{background:var(--orBg);color:var(--or)}
.tg-gy{background:var(--bg3);color:var(--tx2)}
.tg.lg{font-size:10.5px;padding:3px 10px}
.tg.sq{border-radius:5px}
/* Priority + severity marks */
.pri{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:600}
.pri i{width:3px;height:11px;border-radius:2px;background:currentColor;display:block}
.pri.p1{color:var(--rd)} .pri.p2{color:var(--am)} .pri.p3{color:var(--bl)}
.pri.p4{color:var(--tx3)}
/* Progress */
.prg{height:5px;border-radius:3px;background:var(--bg3);overflow:hidden;min-width:52px}
.prg i{display:block;height:100%;border-radius:3px;background:var(--ac);
  transition:width .35s ease-out}
.prg.gn i{background:var(--gn)} .prg.am i{background:var(--am)} .prg.rd i{background:var(--rd)}
.prg.lg{height:8px}

/* == 15. Modals and drawers ================================================ */
.mm{position:fixed;inset:0;z-index:300;background:rgba(6,8,12,.48);display:none;
  align-items:center;justify-content:center;backdrop-filter:blur(3px);padding:18px}
.mm.show{display:flex}
.md{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rx);
  width:100%;max-width:900px;max-height:calc(100vh - 52px);display:flex;
  flex-direction:column;box-shadow:var(--shL);animation:mdin .15s ease-out}
/* Widened across the board. Every dialog in this product is a form, and a
   form dialog at 820 put a two-column row at 380 each with a 9 px gutter,
   which is where a label like Reporting manager wraps and the row goes
   ragged. */
.md.lg{max-width:1180px} .md.sm{max-width:520px} .md.xl{max-width:1400px}
@keyframes mdin{from{opacity:0;transform:translateY(-10px) scale(.99)}}
.md-h{display:flex;align-items:flex-start;justify-content:space-between;
  padding:15px 22px;border-bottom:1px solid var(--bd);gap:10px}
.md-t{font-size:14px;font-weight:600;letter-spacing:-.02em;display:flex;
  align-items:center;gap:8px}
.md-s{font-size:9.5px;color:var(--tx3);font-weight:600;margin-top:3px}
.md-x{width:26px;height:26px;display:grid;place-items:center;border:none;
  background:var(--bg3);color:var(--tx3);cursor:pointer;border-radius:6px;flex-shrink:0}
.md-x:hover{color:var(--tx)}
.md-b{flex:1;overflow-y:auto;padding:18px 22px}
.md-b.flush{padding:0}
.md-f{padding:14px 22px;border-top:1px solid var(--bd);display:flex;
  justify-content:flex-end;gap:8px;flex-wrap:wrap;align-items:center}
.md-f .gap{flex:1}
/* Right drawer for quick view / quick edit. */
.dw{position:fixed;inset:0;z-index:300;display:none}
.dw.show{display:block}
.dw-bg{position:absolute;inset:0;background:rgba(6,8,12,.4)}
.dw-p{position:absolute;top:0;right:0;bottom:0;width:min(640px,100%);
  background:var(--bg2);border-left:1px solid var(--bd);display:flex;
  flex-direction:column;box-shadow:var(--shL);animation:dwin .18s ease-out}
.dw-p.wide{width:min(960px,100%)}
@keyframes dwin{from{transform:translateX(28px);opacity:.4}}
/* Label/value detail grid */
.dv{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0;
  border:1px solid var(--bd);border-radius:9px;overflow:hidden}
.dv-i{padding:9px 12px;border-bottom:1px solid var(--bdL);
  border-right:1px solid var(--bdL);min-width:0}
.dv-l{font-size:8px;font-weight:600;color:var(--tx3);text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:4px}
.dv-v{font-size:11.5px;font-weight:600;white-space:pre-wrap;word-break:break-word}
.dv-v.mono{font-family:var(--fm)}
.dv-i.wide{grid-column:1/-1}
.sec-t{font-size:8.5px;font-weight:600;color:var(--tx3);text-transform:uppercase;
  letter-spacing:.7px;margin:15px 0 7px;display:flex;align-items:center;gap:8px}
.sec-t::after{content:'';flex:1;height:1px;background:var(--bdL)}

/* Facts about one thing: label left, value right, aligned down the column.
   Lives here rather than in a page because a drawer, a profile and a confirm
   box all want the same shape, and three copies drift. */
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:12px;
  align-items:baseline;margin:0}
.kv dt{color:var(--tx3);white-space:nowrap}
.kv dd{color:var(--tx);margin:0;min-width:0;overflow-wrap:anywhere}
.kv dd.mono{font-family:var(--fm);font-size:11px}
.kv.wide{grid-template-columns:104px 1fr}
.sec-t:first-child{margin-top:0}
/* Headline block on a detail modal — the one number that matters. */
.hero{display:flex;align-items:center;gap:15px;padding:13px 16px;border-radius:var(--rl);
  margin-bottom:13px;border:1px solid var(--bd);background:var(--bgI)}
.hero.crit{background:var(--rdBg);border-color:var(--rd)}
.hero.warn{background:var(--amBg);border-color:var(--am)}
.hero.info{background:var(--blBg);border-color:var(--bl)}
.hero.ok{background:var(--gnBg);border-color:var(--gn)}
.hero-n{font-size:31px;font-weight:600;line-height:1;letter-spacing:-.04em}
.hero-t{font-size:12.5px;font-weight:600}
.hero-s{font-size:10px;color:var(--tx2);margin-top:3px;font-weight:600}

/* == 16. Forms ============================================================= */
.fld{margin-bottom:14px}
.fld label,label.lbl{display:block;font-size:9px;font-weight:600;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.55px;margin-bottom:5px}
.fld label .req,label.lbl .req{color:var(--rd);margin-left:2px}
.fld input,.fld select,.fld textarea,
input[type=text],input[type=email],input[type=date],input[type=time],input[type=number],
input[type=search],input[type=password],input[type=tel],input[type=url],select,textarea{
  width:100%;padding:0 11px;height:34px;border:1px solid var(--bd);border-radius:var(--r);
  font-family:var(--f);font-size:12.5px;background:var(--bg);color:var(--tx);outline:none}
textarea{padding:9px 11px;height:auto;resize:vertical;min-height:84px;line-height:1.6}
.fld input:focus,.fld select:focus,.fld textarea:focus,
input:focus,select:focus,textarea:focus{border-color:var(--ac);box-shadow:var(--ring)}
input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}
input[type=color]{width:100%;height:32px;padding:2px;cursor:pointer}
input[type=range]{width:100%;accent-color:var(--ac);padding:0;height:auto}
.fld-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fld-row4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:680px){.fld-row2,.fld-row3,.fld-row4{grid-template-columns:1fr}}
.hint{font-size:9px;color:var(--tx3);margin-top:4px;font-weight:500;text-transform:none;
  letter-spacing:0;line-height:1.5}
.err-txt{font-size:9px;color:var(--rd);margin-top:4px;display:none;font-weight:500}
.fld.has-err input,.fld.has-err select,.fld.has-err textarea,.fld.has-err .ss-toggle{
  border-color:var(--rd)}
.fld.has-err .err-txt{display:block}
/* Input with a fixed prefix or suffix: rupee, per cent, .effred.com */
.ig{display:flex;align-items:stretch}
.ig .pfx,.ig .sfx{display:flex;align-items:center;padding:0 9px;background:var(--bg3);
  border:1px solid var(--bd);font-size:11px;font-weight:500;color:var(--tx2);
  white-space:nowrap}
.ig .pfx{border-right:none;border-radius:var(--r) 0 0 var(--r)}
.ig .sfx{border-left:none;border-radius:0 var(--r) var(--r) 0;font-family:var(--fm);
  font-size:10.5px}
.ig input{border-radius:0}
.ig > input:first-child{border-radius:var(--r) 0 0 var(--r)}
.ig > input:last-child{border-radius:0 var(--r) var(--r) 0}
.check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;padding:9px 11px;
  border:1px solid var(--bd);border-radius:var(--r);background:var(--bg)}
.check:hover{border-color:var(--tx3)}
.check input{margin-top:1px;accent-color:var(--ac);width:14px;height:14px;flex-shrink:0}
.check-title{font-weight:500;font-size:11px;color:var(--tx);display:block}
.check-sub{font-size:9px;color:var(--tx3);margin-top:3px;display:block;font-weight:500;
  line-height:1.5}
/* Toggle switch for settings rows */
.sw-t{width:32px;height:18px;border-radius:9px;background:var(--bg3);
  border:1px solid var(--bd);position:relative;cursor:pointer;flex-shrink:0;
  transition:background .18s,border-color .18s}
.sw-t::after{content:'';position:absolute;top:1px;left:1px;width:14px;height:14px;
  border-radius:50%;background:var(--bg2);box-shadow:var(--sh);transition:left .18s}
.sw-t.on{background:var(--ac);border-color:var(--ac)}
.sw-t.on::after{left:15px}
.set-row{display:flex;align-items:center;gap:13px;padding:11px 0;
  border-bottom:1px solid var(--bdL)}
.set-row:last-child{border-bottom:none}
.set-b{flex:1;min-width:0}
.set-n{font-size:11.5px;font-weight:500}
.set-d{font-size:9.5px;color:var(--tx3);margin-top:2px;font-weight:500;line-height:1.5}
/* Section tabs inside a form dialog */
.ftabs{display:flex;gap:1px;background:var(--bg3);border-radius:7px;padding:2px;
  margin-bottom:13px;width:max-content;max-width:100%;overflow-x:auto}
.ftab{border:none;background:none;font-family:var(--f);font-size:11px;font-weight:500;
  color:var(--tx2);padding:6px 14px;border-radius:5px;cursor:pointer;white-space:nowrap}
.ftab.on{background:var(--bg2);color:var(--tx);box-shadow:var(--sh)}
.ftab.err{color:var(--rd)}
.ftab.err::after{content:'\00B7';margin-left:4px;font-size:15px;line-height:0}
.fpane{display:none}
.fpane.on{display:block;animation:fadeIn .16s ease-out}
/* Searchable select */
.ss{position:relative}
.ss-toggle{width:100%;padding:0 26px 0 11px;height:34px;background:var(--bg);
  color:var(--tx);border:1px solid var(--bd);border-radius:var(--r);font-size:12.5px;
  cursor:pointer;text-align:left;font-family:var(--f);position:relative;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;
  align-items:center;gap:7px}
.ss-toggle:after{content:"";position:absolute;right:10px;top:50%;width:5px;height:5px;
  border-right:1.5px solid var(--tx3);border-bottom:1.5px solid var(--tx3);
  transform:translateY(-70%) rotate(45deg)}
.ss-toggle.placeholder{color:var(--tx3)}
.ss-panel{position:fixed;z-index:1000;background:var(--bg2);border:1px solid var(--bd);
  border-radius:9px;box-shadow:var(--shL);display:none;flex-direction:column;
  overflow:hidden;min-width:220px;max-width:460px}
.ss.open .ss-panel{display:flex}
.ss.open .ss-toggle{border-color:var(--ac);box-shadow:var(--ring)}
.ss-search{flex:0 0 auto;padding:7px;border-bottom:1px solid var(--bd)}
.ss-search input{padding:0 9px;height:30px;font-size:11.5px}
.ss-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px}
.ss-opt{padding:7px 10px;border-radius:5px;cursor:pointer;font-size:12px;display:flex;
  align-items:center;gap:8px}
.ss-opt:hover,.ss-opt.hl{background:var(--bg3)}
.ss-opt.sel{color:var(--ac);font-weight:500}
.ss-empty{padding:13px;text-align:center;color:var(--tx3);font-size:10.5px}
.ss-foot{flex:0 0 auto;padding:6px 8px;border-top:1px solid var(--bd);display:flex;gap:6px}
.ss-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.tag{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--rp);
  padding:2px 8px;font-size:9.5px;font-weight:500;display:inline-flex;
  align-items:center;gap:5px}
.tag button{background:none;border:none;color:var(--tx3);cursor:pointer;font-size:12px;
  line-height:1;padding:0}
.tag button:hover{color:var(--rd)}
/* Upload */
.upload-zone{border:1.5px dashed var(--bd);border-radius:var(--rx);padding:22px;
  text-align:center;cursor:pointer;background:var(--bg)}
.upload-zone:hover,.upload-zone.drag{border-color:var(--ac);background:var(--acBg)}
.upload-zone p{font-size:11.5px;color:var(--tx2);font-weight:500;display:flex;
  align-items:center;justify-content:center;gap:8px}
.upload-zone .us{font-size:9.5px;color:var(--tx3);font-weight:500;margin-top:4px;
  display:block}
.file-row{display:flex;align-items:center;gap:9px;padding:8px 10px;
  border:1px solid var(--bd);border-radius:var(--r);background:var(--bg2);margin-top:6px}
.file-ic{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;
  background:var(--bg3);color:var(--tx2);flex-shrink:0;font-size:8px;font-weight:600;
  font-family:var(--fm)}
/* Role / option picker cards */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
@media(max-width:700px){.roles{grid-template-columns:1fr}}
.role-c{border:1px solid var(--bd);border-radius:var(--rl);padding:11px 13px;
  cursor:pointer;background:var(--bg2);text-align:left;font-family:var(--f);
  color:var(--tx);transition:border-color .14s,background .14s}
.role-c:hover{border-color:var(--ac)}
.role-c.on{border-color:var(--ac);background:var(--acBg)}
.role-c-t{font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.role-c-d{font-size:9.5px;color:var(--tx2);margin-top:5px;line-height:1.55;font-weight:500}

/* == 17. Stepper / wizard ================================================== */
.stp{display:flex;align-items:center;gap:0;margin-bottom:16px;overflow-x:auto;
  scrollbar-width:none;padding-bottom:2px}
.stp::-webkit-scrollbar{display:none}
.stp-i{display:flex;align-items:center;gap:8px;flex-shrink:0}
.stp-n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:9.5px;font-weight:600;background:var(--bg3);color:var(--tx3);
  border:1px solid var(--bd);flex-shrink:0}
.stp-i.on .stp-n{background:var(--ac);color:#fff;border-color:var(--ac)}
.stp-i.dn .stp-n{background:var(--gn);color:#fff;border-color:var(--gn)}
.stp-l{font-size:10.5px;font-weight:500;color:var(--tx3);white-space:nowrap}
.stp-i.on .stp-l{color:var(--tx)} .stp-i.dn .stp-l{color:var(--tx2)}
.stp-bar{width:34px;height:1.5px;background:var(--bd);margin:0 10px;flex-shrink:0}
.stp-i.dn + .stp-bar{background:var(--gn)}

/* == 18. Timeline / activity / approvals =================================== */
.tl{position:relative;padding-left:17px}
.tl::before{content:'';position:absolute;left:4px;top:5px;bottom:5px;width:1px;
  background:var(--bd)}
.tl-i{position:relative;padding:0 0 13px 0}
.tl-i:last-child{padding-bottom:0}
.tl-i::before{content:'';position:absolute;left:-16px;top:4px;width:8px;height:8px;
  border-radius:50%;background:var(--ac);border:2px solid var(--bg2)}
.tl-i.ok::before{background:var(--gn)} .tl-i.warn::before{background:var(--am)}
.tl-i.rd::before{background:var(--rd)} .tl-i.mut::before{background:var(--tx3)}
.tl-s{font-size:11.5px;font-weight:600;line-height:1.5}
.tl-s b{font-weight:600}
.tl-m{font-size:9px;color:var(--tx3);margin-top:2px;font-weight:600}
/* Approval chain — a compact horizontal read of who is next. */
.chain{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.chain-s{display:flex;align-items:center;gap:7px;padding:5px 9px;
  border:1px solid var(--bd);border-radius:var(--rp);background:var(--bg2);
  font-size:10px;font-weight:500}
.chain-s.dn{border-color:var(--gn);color:var(--gn);background:var(--gnBg)}
.chain-s.now{border-color:var(--am);color:var(--am);background:var(--amBg)}
.chain-s.rj{border-color:var(--rd);color:var(--rd);background:var(--rdBg)}
.chain-a{width:16px;height:1.5px;background:var(--bd);flex-shrink:0}
/* Approval card — one component, used in the inbox, on records and in email. */
.apc{border:1px solid var(--bd);border-radius:var(--rl);background:var(--bg2);
  padding:11px 13px;margin-bottom:7px;display:flex;gap:12px;align-items:flex-start}
.apc:hover{border-color:var(--tx3)}
.apc-b{flex:1;min-width:0}
.apc-t{font-size:12px;font-weight:600;letter-spacing:-.02em}
.apc-m{font-size:9.5px;color:var(--tx3);font-weight:600;margin-top:3px;display:flex;
  gap:9px;flex-wrap:wrap}
.apc-a{display:flex;gap:6px;flex-shrink:0;align-items:center}
.apc-amt{font-family:var(--fm);font-size:14px;font-weight:600;white-space:nowrap}
/* SLA pip */
.sla{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:600}
.sla.ok{color:var(--gn)} .sla.warn{color:var(--am)} .sla.br{color:var(--rd)}

/* == 19. Board (kanban) ==================================================== */
.kb{display:flex;gap:9px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.kb-c{width:274px;flex-shrink:0;background:var(--bgI);border:1px solid var(--bd);
  border-radius:var(--rl);display:flex;flex-direction:column;
  max-height:calc(100vh - 250px)}
.kb-h{padding:9px 11px;border-bottom:1px solid var(--bd);display:flex;
  align-items:center;gap:7px}
.kb-t{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
  color:var(--tx2)}
.kb-n{font-size:9px;font-weight:600;background:var(--bg3);border-radius:var(--rp);
  padding:1px 6px;color:var(--tx2)}
.kb-sum{margin-left:auto;font-family:var(--fm);font-size:10px;font-weight:500;
  color:var(--tx3)}
.kb-b{padding:7px;overflow-y:auto;flex:1;min-height:60px}
.kbc{background:var(--bg2);border:1px solid var(--bd);border-radius:9px;padding:9px 10px;
  margin-bottom:6px;cursor:pointer;box-shadow:var(--sh)}
.kbc:hover{border-color:var(--ac)}
.kbc-t{font-size:11.5px;font-weight:500;line-height:1.35;margin-bottom:6px}
.kbc-m{font-size:9px;color:var(--tx3);font-weight:600;display:flex;align-items:center;
  gap:8px;flex-wrap:wrap;margin-top:6px}

/* == 20. Calendar ========================================================== */
.cal{border:1px solid var(--bd);border-radius:var(--rl);overflow:hidden;
  background:var(--bg2)}
.cal-hd{display:grid;grid-template-columns:repeat(7,1fr);background:var(--bg3)}
.cal-hd div{padding:6px 8px;font-size:8.5px;font-weight:600;color:var(--tx2);
  text-transform:uppercase;letter-spacing:.5px;text-align:center;
  border-right:1px solid var(--bd)}
.cal-hd div:last-child{border-right:none}
.cal-gd{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-d{min-height:82px;padding:5px 6px;border-right:1px solid var(--bdL);
  border-bottom:1px solid var(--bdL);position:relative}
.cal-d:nth-child(7n){border-right:none}
.cal-d.off{background:var(--bgI)}
.cal-d.today{background:var(--acBg)}
.cal-n{font-size:10px;font-weight:600;color:var(--tx2);margin-bottom:4px}
.cal-d.today .cal-n{color:var(--ac)}
.cal-e{font-size:9px;font-weight:500;padding:2px 5px;border-radius:4px;margin-bottom:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}

/* == 21. Feedback: banners, toasts, tooltips, empty ======================== */
.banner{max-width:1860px;margin:9px auto 0;padding:8px 13px;font-size:10.5px;
  font-weight:500;background:var(--amBg);color:var(--am);border:1px solid var(--am);
  border-radius:var(--r);display:flex;gap:8px;align-items:center}
.banner.info{background:var(--blBg);color:var(--bl);border-color:var(--bl)}
.banner.rd{background:var(--rdBg);color:var(--rd);border-color:var(--rd)}
.banner.gn{background:var(--gnBg);color:var(--gn);border-color:var(--gn)}
.banner .gap{flex:1}
/* Impersonation runs edge to edge above everything, and is impossible to miss. */
/* Pinned to one red in both themes. The dark palette's --rd is a light coral
   that white text cannot sit on, and this is the one bar that must never be
   hard to read. */
.imp{background:#a72d2d;color:#fff;font-size:10.5px;font-weight:600;padding:6px 14px;
  display:flex;align-items:center;gap:9px;position:sticky;top:0;z-index:130}
.imp .btn{background:#fff;border-color:#fff;color:#a72d2d}
.imp .btn:hover{background:#f2e6e6;border-color:#f2e6e6;color:#8f2626}
.toast-w{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:1200;
  display:flex;flex-direction:column;gap:7px;align-items:center;max-width:92%}
.toast{background:var(--bg2);border:1px solid var(--bd);border-radius:9px;
  padding:10px 18px;font-size:11.5px;font-weight:600;box-shadow:var(--shM);
  animation:tin .18s ease-out;display:flex;align-items:flex-start;gap:10px;min-width:250px}
.toast.ok{border-color:var(--gn)} .toast.err{border-color:var(--rd)}
.toast.warn{border-color:var(--am)}
.toast-ic{flex-shrink:0;margin-top:1px;color:var(--ac)}
.toast.ok .toast-ic{color:var(--gn)} .toast.err .toast-ic{color:var(--rd)}
.toast.warn .toast-ic{color:var(--am)}
.toast-title{font-weight:600;font-size:11.5px}
.toast-msg{color:var(--tx2);font-size:10.5px;font-weight:500;margin-top:2px;line-height:1.5}
@keyframes tin{from{opacity:0;transform:translateY(10px)}}
.tip{position:fixed;z-index:1400;max-width:270px;padding:7px 10px;background:#16181d;
  color:#f2f3f5;border-radius:7px;font-size:11px;line-height:1.45;font-weight:500;
  pointer-events:none;opacity:0;transform:translateY(-3px);
  transition:opacity .13s,transform .13s;box-shadow:0 8px 22px -8px rgba(0,0,0,.5)}
.tip.show{opacity:1;transform:none}
.empty{font-size:11px;color:var(--tx3);text-align:center;padding:34px 20px}
.empty .big{font-size:12.5px;font-weight:600;color:var(--tx2);margin-bottom:5px}
.empty .btn{margin-top:11px}
.empty-ic{width:44px;height:44px;border-radius:13px;background:var(--bg3);color:var(--tx3);
  display:grid;place-items:center;margin:0 auto 11px}
/* Skeletons */
@keyframes shimmer{0%{background-position:-560px 0}100%{background-position:560px 0}}
.sk{background:linear-gradient(90deg,var(--bg3) 25%,var(--bgH) 50%,var(--bg3) 75%);
  background-size:560px 100%;animation:shimmer 1.25s infinite linear;border-radius:5px;
  height:11px}
.sk-kpi{height:66px;border-radius:var(--rl);border:1px solid var(--bd)}
.sk-card{height:250px;border-radius:var(--rx);border:1px solid var(--bd)}
.sk-pc{height:146px;border-radius:var(--rx);border:1px solid var(--bd)}
.sk-row{height:29px;border-radius:5px;margin-bottom:5px}
@keyframes fadeIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.fade-in{animation:fadeIn .2s ease-out}

/* == 22. Bars and donut (chart fallback) =================================== */
.bars{display:flex;flex-direction:column;gap:7px}
.bar-row{display:grid;grid-template-columns:minmax(80px,160px) 1fr 56px;gap:10px;
  align-items:center;font-size:10.5px}
.bar-row.drill{cursor:pointer}
.bar-row.drill:hover .bar-fill{opacity:.8}
.bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.bar-track{height:8px;background:var(--bg3);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;background:var(--ac);border-radius:4px;transition:width .35s}
.bar-val{text-align:right;font-family:var(--fm);font-weight:500;font-size:10px}
.donut{width:126px;height:126px;border-radius:50%;flex-shrink:0;position:relative;
  display:grid;place-items:center}
.donut::after{content:'';position:absolute;inset:17px;border-radius:50%;
  background:var(--bg2)}
.donut-c{position:relative;z-index:1;text-align:center}
.donut-v{font-size:19px;font-weight:600;letter-spacing:-.03em;line-height:1}
.donut-l{font-size:8px;font-weight:600;color:var(--tx3);text-transform:uppercase;
  letter-spacing:.5px;margin-top:3px}
.lgd{display:flex;flex-direction:column;gap:6px}
.lgd-i{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600}
.lgd-i .sw2{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.lgd-i .vl{margin-left:auto;font-family:var(--fm);font-weight:500}

/* == 23. Auth / public shell =============================================== */
.auth{min-height:100vh;display:grid;place-items:center;padding:22px;background:var(--bg)}
.auth-c{width:100%;max-width:392px}
.auth-card{background:var(--bg2);border:1px solid var(--bd);border-radius:16px;
  padding:26px 26px 22px;box-shadow:var(--shM)}
.auth h1{font-size:21px;font-weight:600;letter-spacing:-.035em;margin-bottom:6px}
.auth-s{font-size:11.5px;color:var(--tx2);margin-bottom:20px;line-height:1.55;
  font-weight:500}
.auth-ft{text-align:center;font-size:9.5px;color:var(--tx3);margin-top:16px;font-weight:600}
.otp{display:flex;gap:8px;justify-content:center}
.otp input{width:42px;height:50px;text-align:center;font-size:19px;font-weight:600;
  font-family:var(--fm);padding:0}
/* Password strength meter */
.pw{display:flex;gap:4px;margin-top:7px}
.pw i{flex:1;height:3px;border-radius:2px;background:var(--bg3)}
.pw.s1 i:nth-child(1){background:var(--rd)}
.pw.s2 i:nth-child(-n+2){background:var(--am)}
.pw.s3 i:nth-child(-n+3){background:var(--bl)}
.pw.s4 i{background:var(--gn)}

/* == 24. Footer ============================================================ */
.ft{text-align:center;padding:20px 0 8px;font-size:9px;color:var(--tx3);font-weight:600}
.ft .dot{opacity:.4;margin:0 6px}

/* == 25. Utilities ========================================================= */
.muted{color:var(--tx3)} .small{font-size:9.5px} .right{text-align:right}
.center{text-align:center} .nowrap{white-space:nowrap} .hidden{display:none!important}
.mono{font-family:var(--fm)} .bold{font-weight:600}
.flex{display:flex;align-items:center;gap:7px}
.wrap{flex-wrap:wrap} .col{flex-direction:column;align-items:stretch}
.between{justify-content:space-between} .grow{flex:1;min-width:0}
.mt0{margin-top:0} .mt8{margin-top:8px} .mt12{margin-top:12px} .mt16{margin-top:16px}
.mb0{margin-bottom:0} .mb8{margin-bottom:8px} .mb12{margin-bottom:12px}
.sep-h{height:1px;background:var(--bd);margin:13px 0}
.pre{font-family:var(--fm);font-size:10.5px;background:var(--bg);border:1px solid var(--bd);
  border-radius:8px;padding:11px;white-space:pre-wrap;margin-top:10px;max-height:270px;
  overflow:auto;line-height:1.6}
.gn-t{color:var(--gn)} .rd-t{color:var(--rd)} .am-t{color:var(--am)} .ac-t{color:var(--ac)}
.cur{font-family:var(--fm);font-weight:500;font-variant-numeric:tabular-nums}
.micro{font-size:8.5px;color:var(--tx3);font-weight:500;letter-spacing:.3px;
  text-transform:uppercase}

/* == 26. Responsive + print ================================================ */
@media(max-width:1023px){
  /* The rail used to slide off the left edge below this width and wait for a
     `.open` class that nothing ever added — so on every tablet and every
     phone the whole left-hand navigation simply was not there, and there was
     no control anywhere to bring it back.

     It becomes a strip of chips above the page instead. That needs no toggle,
     cannot be stranded in the closed state, and takes one line of height. */
  .shell{flex-direction:column;align-items:stretch}
  .side{position:static;height:auto;max-height:none;width:100%;
    border-right:0;border-bottom:1px solid var(--bd);
    display:flex;flex-wrap:wrap;gap:4px;padding:9px 12px;overflow:visible}
  .side-t{width:100%;padding:5px 2px 2px}
  /* One heading is orientation; five are a wall of eight-pixel capitals. */
  .side-t:not(:first-child){display:none}
  .sd{width:auto;margin:0;border:1px solid var(--bd);background:var(--bg);
    padding:5px 10px}
  .sd.on{border-color:var(--ac)}
  .sd.on::before{display:none}
  /* `.main` carries `margin:0 auto` so it centres on a wide screen. An auto
     margin on the cross axis of a flex container switches off stretch, so
     once `.shell` stacks into a column the main pane stopped being 100% wide
     and became as wide as its widest child instead — which for any screen
     with a data table on it meant the whole page scrolled sideways and the
     `.rtw` wrapper that exists to scroll the table never got the chance.
     Explicit width, no auto margin, below this width. */
  .side + .main,.main{padding-left:0;width:100%;margin-left:0;margin-right:0;
    min-width:0;max-width:100%}
  .nav-search{display:none}
  .nav-tenant .tn-host{display:none}
}
@media(max-width:767px){
  .nav-tag,.sw-btn .lb{display:none}
  .ph h1{font-size:17px}
  .rtw{max-height:none}
  .kg,.kg.k6,.kg.k5,.kg.k4,.kg.k3{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  /* The top strip carries a brand, a switcher, a search box, three icon
     actions, an Admin button and a profile ring. At this width that is more
     than fits, and what it did was push the profile ring off the right-hand
     edge — the one control that gets somebody signed out.

     So the strip drops to what cannot be reached any other way. The Admin
     button keeps its icon and loses its word; the tenant chip and the help
     icon go, because both are reachable from inside the page. */
  .nav-in{padding:0 8px;gap:5px}
  /* The brand is the one thing here that can give ground: it has a mark
     beside it and the company name is on every page anyway. Everything else
     in the strip is a control, and a control pushed off the right-hand edge
     is a control nobody can reach. */
  .nav-brand{font-size:12.5px;min-width:0;overflow:hidden;
    text-overflow:ellipsis;flex-shrink:1}
  .nav-ico{width:26px}
  #efHelp{display:none}
  .nav-tenant{display:none}
  .nav-in > .btn{padding:0 8px;font-size:0;gap:0}
  .nav-in > .btn svg.i{width:15px;height:15px}
  .ph-act{width:100%}
  .ph-act .btn{flex:1;justify-content:center}
  .kg,.kg.k6,.kg.k5,.kg.k4,.kg.k3{grid-template-columns:1fr}
  .sm-i{min-width:100%}
  .md-b,.md-h,.md-f{padding-left:14px;padding-right:14px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .av-ring.spin{animation:none}
}
@media print{
  .nav,.imp,.side,.btn,.tabs,.toolbar,.pgw,.ft,.dm,.chip-row,.nav-ico,.pf,#loadbar{
    display:none!important}
  body{background:#fff}
  .cd,.ki,.pc{box-shadow:none;break-inside:avoid}
}

/* == 22. Search, the bell, the org chart and the week grid =================
   Everything here belongs to a control that existed in the nav and did
   nothing: the search box, the bell, and the two shapes the self-service
   screens needed that the kit did not carry — a reporting tree and a week
   of hours. */

/* -- The search results popover ------------------------------------------ */
.srch{position:relative;flex:1;max-width:340px;min-width:120px}
.srch .nav-search{width:100%}
.srch-pop{position:absolute;top:34px;left:0;right:0;z-index:320;
  max-height:min(72vh,520px);overflow:auto;background:var(--bg2);
  border:1px solid var(--bd);border-radius:var(--rx);box-shadow:var(--shL);
  padding:5px;display:none;animation:pop .14s ease-out}
.srch.open .srch-pop{display:block}
.srch-g{font-size:9px;font-weight:600;color:var(--tx3);letter-spacing:.4px;
  text-transform:uppercase;padding:8px 9px 4px}
.srch-r{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:7px;
  color:var(--tx);cursor:pointer;text-decoration:none}
.srch-r:hover,.srch-r.on{background:var(--bg3);text-decoration:none}
.srch-r.on{outline:1px solid var(--ac);outline-offset:-1px}
.srch-r .ic{width:22px;height:22px;border-radius:6px;background:var(--bg3);
  color:var(--tx2);display:grid;place-items:center;flex-shrink:0}
.srch-r .ic svg.i{width:13px;height:13px}
.srch-r .tx{min-width:0;flex:1}
/* Two spans in a flex row render on one line without this. Fixed five times. */
.srch-r .t{display:block;font-size:11.5px;font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.srch-r .s{display:block;font-size:9px;color:var(--tx3);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srch-note{padding:16px 12px;text-align:center;font-size:11px;color:var(--tx3);
  font-weight:500}
.srch-all{display:flex;align-items:center;gap:7px;margin-top:4px;padding:8px 9px;
  border-top:1px solid var(--bdL);font-size:10.5px;font-weight:600;
  color:var(--ac);cursor:pointer}
.srch-all:hover{text-decoration:none;background:var(--bg3);border-radius:0 0 9px 9px}
.srch-all svg.i{width:13px;height:13px}

/* -- The bell ------------------------------------------------------------- */
.bell{position:relative;flex-shrink:0}
.bell-pop{position:absolute;top:34px;right:0;z-index:320;width:308px;
  background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rx);
  box-shadow:var(--shL);display:none;overflow:hidden;animation:pop .14s ease-out}
.bell.open .bell-pop{display:block}
.bell-h{padding:9px 12px;border-bottom:1px solid var(--bdL);background:var(--bgI);
  font-size:11.5px;font-weight:600;display:flex;align-items:center;
  justify-content:space-between;gap:8px}
.bell-l{max-height:340px;overflow:auto;padding:4px}
.bell-i{display:block;padding:8px 9px;border-radius:7px;color:var(--tx);
  cursor:pointer;position:relative}
.bell-i:hover{background:var(--bg3);text-decoration:none}
.bell-i.new{background:var(--acBg)}
.bell-i.new:hover{background:var(--acBg);filter:brightness(.98)}
.bell-i .t{display:block;font-size:11.5px;font-weight:500;line-height:1.35}
.bell-i .s{display:block;font-size:9.5px;color:var(--tx3);font-weight:500;
  margin-top:2px;line-height:1.4}
.bell-i .w{display:block;font-size:8.5px;color:var(--tx3);font-weight:600;
  margin-top:3px;letter-spacing:.2px}
.bell-f{display:block;padding:8px;text-align:center;border-top:1px solid var(--bdL);
  font-size:10.5px;font-weight:600;color:var(--ac);cursor:pointer}
.bell-f:hover{background:var(--bg3);text-decoration:none}

/* -- The org chart --------------------------------------------------------
   Top down: one box at the root, a drop, a bar across the children, a drop
   into each. Built out of nested lists and four ::before/::after rules rather
   than an SVG, so it reads in reporting order to a screen reader, prints, and
   keeps every node a real link.

   The trick is that each child <li> draws half the horizontal bar on its own
   side. First child draws the right half, last child the left half, and the
   ones between draw both — which is what makes the bar stop at the outermost
   children instead of running past them. */
.og{overflow:auto;padding:8px 2px 20px}
.og-in{display:inline-block;min-width:100%}
.og ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center}
.og-root{padding-top:0}
.og li{position:relative;padding:26px 9px 0;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.og-root > li{padding-top:0}

/* The drop into this box from the bar above it. */
.og li::before{content:'';position:absolute;top:0;left:50%;width:1px;height:26px;
  background:var(--bd)}
.og-root > li::before{display:none}
/* Half a bar on each side, so the run stops at the outermost child. */
.og li::after{content:'';position:absolute;top:0;height:1px;background:var(--bd);
  left:0;right:0}
.og li:first-child::after{left:50%}
.og li:last-child::after{right:50%}
.og li:only-child::after{display:none}
/* The drop out of a box towards its children. */
.og li > ul{position:relative;padding-top:26px}
.og li > ul::before{content:'';position:absolute;top:0;left:50%;width:1px;
  height:26px;background:var(--bd)}

.og-c{display:inline-block}
.og-b{display:flex;flex-direction:column;align-items:center;gap:3px;
  width:172px;padding:12px 11px 11px;border:1px solid var(--bd);
  border-radius:var(--rl);background:var(--bg2);color:var(--tx);
  box-shadow:var(--sh);transition:border-color .15s,box-shadow .15s}
a.og-b:hover{border-color:var(--ac);box-shadow:var(--shM);text-decoration:none}
.og-c.top .og-b{border-color:var(--ac);background:var(--acBg)}
.og-c.me .og-b{border-color:var(--ac);box-shadow:var(--ring)}
.og-b .av{margin-bottom:4px}
.og-n{display:block;font-size:12px;font-weight:600;letter-spacing:-.01em;
  line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.og-t{display:block;font-size:10px;color:var(--tx2);font-weight:500;
  line-height:1.35;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.og-d{display:block;font-size:9px;color:var(--tx3);font-weight:600;
  text-transform:uppercase;letter-spacing:.3px}
.og-k{display:inline-block;margin-top:5px;padding:1px 7px;border-radius:var(--rp);
  background:var(--bg3);color:var(--tx2);font-size:8.5px;font-weight:600}

/* On a narrow screen a wide tree is unusable side to side, so it becomes the
   indented list it used to be — same markup, different rules. */
@media (max-width:820px){
  .og ul{display:block}
  .og li{padding:0 0 0 22px;text-align:left;align-items:flex-start}
  .og li::before{top:0;bottom:0;left:8px;height:auto}
  .og li:last-child::before{bottom:auto;height:19px}
  .og li::after{top:19px;left:8px;right:auto;width:11px}
  .og li:first-child::after{left:8px}
  .og-root > li{padding-left:0}
  .og-root > li::after{display:none}
  .og li > ul{padding-top:2px}
  .og li > ul::before{display:none}
  .og-b{flex-direction:row;align-items:center;width:auto;min-width:0;
    max-width:340px;text-align:left;padding:7px 11px 7px 8px;margin:3px 0}
  .og-b .av{margin:0}
  .og-b > span:not(.av){align-items:flex-start}
  .og-n,.og-t,.og-d{text-align:left}
  .og-k{margin-top:0}
}

/* -- One person's chain, top of the company down to them ------------------ */
.ogc{list-style:none;margin:0;padding:0}
.ogc li{position:relative;padding:0 0 0 20px}
.ogc li::before{content:'';position:absolute;left:6px;top:0;bottom:0;
  border-left:1px solid var(--bd)}
.ogc li:first-child::before{top:16px}
.ogc li:last-child::before{bottom:auto;height:16px}
.ogc li::after{content:'';position:absolute;left:6px;top:16px;width:10px;
  border-top:1px solid var(--bd)}
.ogc li:first-child::after{display:none}
.ogc-b{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:8px;
  color:var(--tx)}
.ogc-b:hover{background:var(--bg3);text-decoration:none}
.ogc li.me .ogc-b{background:var(--acBg)}
.ogc-x{min-width:0;flex:1}
.ogc-n{display:block;font-size:11.5px;font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ogc-t{display:block;font-size:9.5px;color:var(--tx3);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* -- The week of hours ----------------------------------------------------
   Seven columns on a desktop, stacked on a phone. The day header carries its
   own state — a week off, a holiday, an approved day away — because that is
   what decides whether an empty cell is a problem. */
.tsg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.tsd{border:1px solid var(--bd);border-radius:var(--rl);background:var(--bg2);
  min-height:118px;display:flex;flex-direction:column;overflow:hidden}
.tsd.off{background:var(--bgI);border-style:dashed}
.tsd.today{border-color:var(--ac);box-shadow:var(--ring)}
.tsd-h{padding:6px 8px;border-bottom:1px solid var(--bdL);background:var(--bgI);
  display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.tsd-d{font-size:10.5px;font-weight:600}
.tsd-n{font-size:8.5px;color:var(--tx3);font-weight:600}
.tsd-b{padding:6px;flex:1;display:flex;flex-direction:column;gap:5px}
.tsd-e{border:1px solid var(--bdL);border-radius:7px;padding:5px 6px;
  background:var(--bgI);font-size:10px;line-height:1.35;cursor:pointer}
.tsd-e:hover{border-color:var(--ac)}
.tsd-e .p{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.tsd-e .h{display:block;color:var(--tx3);font-weight:600;font-size:9px;margin-top:1px}
.tsd-f{padding:5px 6px;border-top:1px solid var(--bdL);font-size:9.5px;
  font-weight:600;color:var(--tx2);display:flex;justify-content:space-between}
.tsd-add{border:1px dashed var(--bd);border-radius:7px;padding:5px;font-size:10px;
  font-weight:600;color:var(--tx3);background:none;cursor:pointer;width:100%}
.tsd-add:hover{border-color:var(--ac);color:var(--ac)}
@media (max-width:900px){
  .tsg{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .tsg{grid-template-columns:1fr}
  .srch{display:none}
}

/* -- A month of days, for one person -------------------------------------- */
.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.mgrid-h{font-size:8.5px;font-weight:600;color:var(--tx3);text-align:center;
  padding:2px 0;letter-spacing:.3px;text-transform:uppercase}
.mday{aspect-ratio:1;border:1px solid var(--bdL);border-radius:8px;padding:4px;
  display:flex;flex-direction:column;justify-content:space-between;
  font-size:10px;background:var(--bg2);min-height:38px}
.mday.pad{border:none;background:none}
.mday .n{font-weight:600;font-size:10px}
.mday .m{font-size:7.5px;font-weight:600;text-transform:uppercase;letter-spacing:.2px}
.mday.s-present{background:var(--gnBg);border-color:transparent;color:var(--gn)}
.mday.s-wfh{background:var(--blBg);border-color:transparent;color:var(--bl)}
.mday.s-leave{background:var(--viBg);border-color:transparent;color:var(--vi)}
.mday.s-absent{background:var(--rdBg);border-color:transparent;color:var(--rd)}
.mday.s-half_day{background:var(--amBg);border-color:transparent;color:var(--am)}
.mday.s-week_off{background:var(--bgI);color:var(--tx3)}
.mday.s-holiday{background:var(--teBg);border-color:transparent;color:var(--te)}
.mday.today{outline:2px solid var(--ac);outline-offset:-1px}

/* -- A stack of things that happened, newest last -------------------------- */
.trail{list-style:none;margin:0;padding:0 0 0 20px;position:relative}
.trail::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;
  border-left:1px solid var(--bd)}
.trail li{position:relative;padding:0 0 13px}
.trail li:last-child{padding-bottom:0}
.trail li::before{content:'';position:absolute;left:-18px;top:5px;width:7px;
  height:7px;border-radius:50%;background:var(--bg2);
  border:1.6px solid var(--tx3)}
.trail li.on::before{border-color:var(--ac);background:var(--ac)}
.trail .t{display:block;font-size:11.5px;font-weight:500}
.trail .s{display:block;font-size:9.5px;color:var(--tx3);font-weight:600;
  margin-top:1px}

/* -- Two numbers side by side, for a detail header ------------------------ */
.facts{display:flex;flex-wrap:wrap;gap:20px}
.fact .l{display:block;font-size:9px;font-weight:600;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.3px}
.fact .v{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em;
  margin-top:2px}
.fact .v.sm{font-size:12.5px}

/* A short list of consequences inside a confirm dialog. Used where a dialog
   has to state more than one thing that is true and cannot be a paragraph
   without becoming a wall. */
.bul{margin:0;padding:0 0 0 17px;font-size:12px;line-height:1.65;color:var(--tx2)}
.bul li{margin:0 0 4px}
.bul li:last-child{margin-bottom:0}


/* == 27. Going back ========================================================
   A named destination, not browser history. A page opened from a notification
   email has no history inside the product, and the browser's own back button
   takes the reader out of it entirely. */
.bk{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:600;
  color:var(--tx3);padding:2px 7px 2px 4px;margin:0 5px 0 -4px;border-radius:var(--r);
  border:1px solid transparent}
.bk:hover{color:var(--tx);background:var(--bg3);border-color:var(--bd);
  text-decoration:none}
.bk svg.i{width:12px;height:12px}

/* == 28. Announcement banners ==============================================
   Loud on purpose and rare on purpose. Tone is carried by a keyline down the
   left and by the icon colour — never by a filled block and never by anything
   that moves. A banner that shouts is a banner people learn to look past, and
   then the one that mattered is the one they looked past. */
.bnw{display:grid;gap:6px;margin-bottom:11px}
.bnw:empty{display:none}
/* The fold. Everything past the first notice lives behind one line, because
   a company with four live announcements used to push every screen in the
   product below the fold. */
.bn-more{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:6px 11px;border:1px solid var(--bdL);border-radius:var(--rl);
  background:var(--bgI);color:var(--tx3);font:500 11px var(--f);cursor:pointer}
.bn-more:hover{border-color:var(--bd);color:var(--tx2)}
.bn-more svg.i{width:12px;height:12px;flex:none;transition:transform .15s}
.bn-more.on svg.i{transform:rotate(180deg)}
.bn-more>span:first-of-type{flex:none;font-weight:600}
.bn-more-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;opacity:.75}
.bn-rest{display:grid;gap:6px}
/* `display:grid` on the same element beats the user agent's `[hidden]`
   rule, so the fold rendered its contents at full height while claiming to
   be closed. Every `hidden` element that also carries a display in this file
   needs this line beside it. */
.bn-rest[hidden]{display:none}
/* How many identical notices folded into this one. */
.bn-n{display:inline-block;margin-left:7px;font-size:9.5px;font-weight:600;
  background:var(--bg3);color:var(--tx3);border-radius:var(--rp);
  padding:0 6px;vertical-align:middle}
.bn{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;
  border:1px solid var(--bd);border-left-width:3px;border-radius:var(--rl);
  background:var(--bg2);box-shadow:var(--sh)}
.bn-ic{flex:none;display:grid;place-items:center;width:20px;height:20px;
  color:var(--tx3)}
.bn-ic svg.i{width:15px;height:15px}
.bn-b{flex:1;min-width:0}
.bn-t{font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.bn-x{font-size:11.5px;color:var(--tx2);margin-top:3px;line-height:1.55;
  white-space:pre-wrap;overflow-wrap:anywhere}
.bn .btn{flex:none;align-self:center}
.bn-x-btn{flex:none;width:22px;height:22px;display:grid;place-items:center;
  border:none;background:none;color:var(--tx3);cursor:pointer;border-radius:5px}
.bn-x-btn:hover{background:var(--bg3);color:var(--tx)}
.bn-i{border-left-color:var(--bl)}      .bn-i .bn-ic{color:var(--bl)}
.bn-a{border-left-color:var(--am)}      .bn-a .bn-ic{color:var(--am)}
.bn-u{border-left-color:var(--rd);background:var(--rdBg);border-color:var(--rd)}
.bn-u .bn-ic{color:var(--rd)}
.bn-u .bn-t{color:var(--rd)}

/* == 29. SLA clocks ========================================================
   Two promises, side by side, so they are compared rather than read one at a
   time. The label is inside the chip because "4h left" on its own has been
   read as the wrong clock by everybody who has ever been shown it. */
.sla-w{display:inline-flex;gap:5px;flex-wrap:wrap;align-items:center}
.sla{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:600;
  padding:2px 7px;border-radius:var(--rp);border:1px solid var(--bd);
  background:var(--bgI);color:var(--tx2);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.sla b{font-weight:600;color:var(--tx3);font-size:8.5px;text-transform:uppercase;
  letter-spacing:.5px}
.sla-ok{background:var(--gnBg);border-color:transparent;color:var(--gn)}
.sla-ok b{color:var(--gn);opacity:.75}
.sla-live{background:var(--blBg);border-color:transparent;color:var(--bl)}
.sla-live b{color:var(--bl);opacity:.75}
.sla-soon{background:var(--amBg);border-color:transparent;color:var(--am)}
.sla-soon b{color:var(--am);opacity:.75}
.sla-late{background:var(--rdBg);border-color:transparent;color:var(--rd)}
.sla-late b{color:var(--rd);opacity:.75}
.sla-none{color:var(--tx3)}
/* The two clocks stacked, on a detail page where there is room to name them. */
.slabox{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(max-width:640px){.slabox{grid-template-columns:1fr}}
.slabox .sb-i{border:1px solid var(--bd);border-radius:var(--rl);padding:10px 12px;
  background:var(--bg2)}
.slabox .sb-l{font-size:8.5px;font-weight:600;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.55px}
.slabox .sb-v{font-size:17px;font-weight:600;letter-spacing:-.03em;margin-top:5px;
  font-variant-numeric:tabular-nums}
.slabox .sb-s{font-size:9.5px;color:var(--tx3);font-weight:600;margin-top:3px}
.slabox .sb-i.late{border-color:var(--rd)} .slabox .sb-i.late .sb-v{color:var(--rd)}
.slabox .sb-i.ok .sb-v{color:var(--gn)}
.slabox .sb-i.soon .sb-v{color:var(--am)}

/* == 30. Month calendar ====================================================
   One month as weeks. Built in the kit rather than per screen because three
   screens want it and three copies of date arithmetic is three chances to be
   a day out. */
.cal{border:1px solid var(--bd);border-radius:var(--rx);overflow:hidden;
  background:var(--bg2)}
.cal-hd{display:grid;grid-template-columns:repeat(7,1fr);background:var(--bgI);
  border-bottom:1px solid var(--bd)}
.cal-hd div{padding:7px 9px;font-size:8.5px;font-weight:600;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.6px}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-d{min-height:96px;padding:6px 7px;border-right:1px solid var(--bdL);
  border-bottom:1px solid var(--bdL);display:flex;flex-direction:column;gap:3px;
  min-width:0}
.cal-d:nth-child(7n){border-right:0}
.cal-d.out{background:var(--bgI)}
.cal-d.off{background:var(--bgI)}
.cal-d.now{background:var(--acBg);box-shadow:inset 0 0 0 1px var(--ac)}
.cal-d[role=button]{cursor:pointer}
.cal-d[role=button]:hover{background:var(--bg3)}
.cal-n{font-size:11px;font-weight:600;color:var(--tx2);
  font-variant-numeric:tabular-nums;line-height:1.2}
.cal-d.now .cal-n{color:var(--ac)}
.cal-d.out .cal-n{display:none}
/* An entry is a line of text on a tint, not a coloured bar with a tooltip:
   the point of a calendar is reading it without hovering anything. */
.cal-e{display:block;font-size:9.5px;font-weight:500;padding:2px 6px;
  border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-left:2px solid currentColor}
.cal-e.me{font-weight:600}
.cal-more{font-size:8.5px;color:var(--tx3);font-weight:600;padding-left:2px}
.cal-gn{background:var(--gnBg);color:var(--gn)}
.cal-vi{background:var(--viBg);color:var(--vi)}
.cal-bl{background:var(--blBg);color:var(--bl)}
.cal-or{background:var(--orBg);color:var(--or)}
.cal-te{background:var(--teBg);color:var(--te)}
.cal-ac{background:var(--acBg);color:var(--ac)}
.cal-am{background:var(--amBg);color:var(--am)}
.cal-rd{background:var(--rdBg);color:var(--rd)}
.cal-gy{background:var(--bg3);color:var(--tx2)}
@media(max-width:880px){
  .cal-d{min-height:70px;padding:4px 5px}
  .cal-e{font-size:8.5px;padding:1px 4px}
}
/* The legend. Named colours, once, so nothing on the grid needs a caption. */
.cal-key{display:flex;flex-wrap:wrap;gap:5px 14px;padding:9px 2px 0;
  font-size:9.5px;font-weight:600;color:var(--tx3)}
.cal-key span{display:inline-flex;align-items:center;gap:6px}
.cal-key i{width:9px;height:9px;border-radius:3px;display:block}

/* == 31. Meter =============================================================
   Against a quota. Says both numbers and then draws the ratio — never the
   ratio alone, because a per cent of an unstated total is not actionable. */
.mt{margin-bottom:11px}
.mt:last-child{margin-bottom:0}
.mt-h{display:flex;justify-content:space-between;align-items:baseline;gap:9px;
  font-size:10.5px;font-weight:500;color:var(--tx2);margin-bottom:5px}
.mt-v{font-size:10.5px;font-weight:600;color:var(--tx);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.mt-b{height:6px;border-radius:3px;background:var(--bg3);overflow:hidden}
.mt-b i{display:block;height:100%;background:var(--ac);border-radius:3px;
  transition:width .3s}
.mt.high .mt-b i{background:var(--am)}
.mt.high .mt-v{color:var(--am)}
.mt.full .mt-b i{background:var(--rd)}
.mt.full .mt-v{color:var(--rd)}

/* == 32. Permission picker =================================================
   Fifty-eight codes and a checkbox each was a screen that could only be used
   by somebody who already knew the answer. Every row now says what it does,
   which screens it opens, and whether it is one to be careful with. */
.pm-p{border:1px solid var(--bd);border-radius:var(--rl);margin-bottom:9px;
  overflow:hidden;background:var(--bg2)}
.pm-h{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--bgI);
  border-bottom:1px solid var(--bd);cursor:pointer}
.pm-h:hover{background:var(--bg3)}
.pm-nm{font-size:11.5px;font-weight:600;flex:1;min-width:0}
.pm-ct{font-size:9.5px;font-weight:600;color:var(--tx3);
  font-variant-numeric:tabular-nums}
.pm-l{padding:2px 0}
.pm-i{display:flex;align-items:flex-start;gap:11px;padding:9px 12px;
  border-top:1px solid var(--bdL);cursor:pointer}
.pm-i:first-child{border-top:0}
.pm-i:hover{background:var(--bgI)}
.pm-i input{margin-top:2px;accent-color:var(--ac);width:14px;height:14px;flex:none}
.pm-b{flex:1;min-width:0}
.pm-t{font-size:11.5px;font-weight:500;display:flex;align-items:center;gap:7px;
  flex-wrap:wrap}
.pm-w{font-size:10.5px;color:var(--tx2);margin-top:3px;line-height:1.55}
.pm-where{font-size:9.5px;color:var(--tx3);margin-top:4px;font-weight:600}
.pm-code{font-family:var(--fm);font-size:9px;color:var(--tx3)}
/* Marked, not hidden. A permission an administrator cannot find is one they
   will grant by making somebody an owner instead. */
.pm-care{font-size:8.5px;font-weight:600;color:var(--am);background:var(--amBg);
  border-radius:var(--rp);padding:1px 7px;letter-spacing:.3px;white-space:nowrap}
.pm-i.no{opacity:.5}
.pm-i.no input{cursor:not-allowed}
.pm-no{font-size:8.5px;font-weight:600;color:var(--tx3);background:var(--bg3);
  border-radius:var(--rp);padding:1px 7px;white-space:nowrap}

/* == 33. Role cards ========================================================
   A starting point for a group, shown as what it lets somebody do rather than
   as a list of codes. */
.rl{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:10px}
.rl-c{border:1px solid var(--bd);border-radius:var(--rl);padding:13px 14px;
  background:var(--bg2);display:flex;flex-direction:column;min-width:0}
.rl-c:hover{border-color:var(--ac)}
.rl-t{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.rl-d{font-size:10.5px;color:var(--tx2);margin-top:5px;line-height:1.55;flex:1}
.rl-does{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px}
.rl-does span{font-size:9px;font-weight:500;background:var(--bg3);color:var(--tx2);
  border-radius:var(--rp);padding:2px 8px}
.rl-f{display:flex;align-items:center;gap:8px;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--bdL)}
.rl-n{font-size:9.5px;color:var(--tx3);font-weight:600;flex:1}

/* == 34. Job cards =========================================================
   An opening, from the inside. */
.jb{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.jb-c{border:1px solid var(--bd);border-radius:var(--rx);padding:14px 15px;
  background:var(--bg2);display:flex;flex-direction:column;min-width:0;
  box-shadow:var(--sh)}
.jb-c:hover{border-color:var(--ac);box-shadow:var(--shM)}
.jb-t{font-size:13.5px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.jb-m{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:10.5px;
  color:var(--tx3);font-weight:600}
.jb-m span{display:inline-flex;align-items:center;gap:5px}
.jb-s{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.jb-s span{font-size:9.5px;font-weight:500;background:var(--bg3);color:var(--tx2);
  border-radius:var(--rp);padding:2px 8px}
.jb-f{display:flex;align-items:center;gap:7px;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--bdL)}
.jb-rw{font-size:10px;font-weight:600;color:var(--gn);flex:1}

/* == 35. Card content, straightened ========================================
   Three shapes that were laying out wrong wherever they appeared.

   Two spans in a flex row render on one line, which is how "Farhan
   ShaikhSite Engineer" got onto four screens. The kit now owns the fix rather
   than each page discovering it again. */
.x-n,.x-s{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.x-n{font-weight:500;font-size:11.5px}
.x-s{font-size:10px;color:var(--tx3);font-weight:600}
/* A definition grid whose last row has a right border on the last cell, and a
   ragged bottom edge where the row did not fill. Both are the same fix. */
.dv-i:last-child{border-right:0}
.dv-i{display:flex;flex-direction:column;justify-content:flex-start}
/* A card body whose children are cards should not double its own padding. */
.cd-bd > .cd:last-child{margin-bottom:0}
.cd-bd > .g2:last-child,.cd-bd > .g3:last-child{margin-bottom:0}
/* A card header where the title block and the actions collide at narrow
   widths: the title keeps its line, the actions wrap under it. */
.cd-h > div:first-child{min-width:0;flex:1}
.cd-t{min-width:0;overflow-wrap:anywhere}
.cd-s{overflow-wrap:anywhere}
/* Long values inside a facts grid have to wrap, not push the column open —
   an IFSC or a 200-character note was widening the whole card. */
.kv dd,.dv-v{overflow-wrap:anywhere}

/* == 36. Page sections =====================================================
   A heading with a rule to its right, for a page that has grown past one
   card. `.sec-t` already did this inside a modal; this is its page-level
   twin, with room above it. */
.pg-sec{display:flex;align-items:center;gap:10px;margin:20px 0 10px;
  font-size:11px;font-weight:600;color:var(--tx2);letter-spacing:-.01em}
.pg-sec::after{content:"";flex:1;height:1px;background:var(--bd)}
.pg-sec:first-child{margin-top:0}
.pg-sec .ct{font-size:9.5px;color:var(--tx3);font-weight:600}

/* == 37. A thread ==========================================================
   Two sides talking. Used by the support desk on both planes, and by the
   request desks. Whose message it is has to be answerable at a glance from
   the shape alone, because the names on it are unfamiliar in both
   directions. */
.th{display:grid;gap:10px}
.th-m{display:flex;gap:10px;max-width:min(760px,100%)}
.th-m.mine{margin-left:auto;flex-direction:row-reverse}
.th-av{width:28px;height:28px;border-radius:50%;flex:none;display:grid;
  place-items:center;font-size:9.5px;font-weight:600;color:#fff}
.th-b{border:1px solid var(--bd);border-radius:var(--rl);padding:10px 13px;
  background:var(--bg2);min-width:0}
.th-m.mine .th-b{background:var(--acBg);border-color:transparent}
.th-h{display:flex;align-items:baseline;gap:9px;margin-bottom:4px;flex-wrap:wrap}
.th-who{font-size:11px;font-weight:600}
.th-at{font-size:9.5px;color:var(--tx3);font-weight:600}
.th-t{font-size:12px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
/* Effred talking to Effred. Never crosses to the customer's side, and it has
   to be obvious on the screen that it will not. */
.th-m.note .th-b{background:var(--amBg);border-color:var(--am);border-style:dashed}
.th-tag{font-size:8.5px;font-weight:600;color:var(--am);text-transform:uppercase;
  letter-spacing:.5px}

/* == 38. A summary strip ===================================================
   Facts about one record, across the top of its page. Denser than KPI tiles
   and quieter: these are not measurements, they are what the record is. */
.sm{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--bd);
  border-radius:var(--rl);background:var(--bg2);overflow:hidden;margin-bottom:11px}
.sm-i{padding:10px 15px;border-right:1px solid var(--bdL);min-width:132px;flex:1}
.sm-i:last-child{border-right:0}
.sm-l{font-size:8.5px;font-weight:600;color:var(--tx3);text-transform:uppercase;
  letter-spacing:.55px}
.sm-v{font-size:13px;font-weight:600;margin-top:4px;letter-spacing:-.02em;
  overflow-wrap:anywhere}
.sm-v.big{font-size:19px}
@media(max-width:700px){.sm-i{min-width:50%;flex:none;
  border-bottom:1px solid var(--bdL)}}