/* ============================================================================
   XINNACE v3 — page-features.css
   The "features" artifact's own stylesheet, verbatim, less the 34 chrome rules
   that base.css now owns for every page, and less --maxw / --gutter / --head-h,
   which are shared so the bar and the column do not change between pages.
   Loads AFTER base.css, so everything here wins. Regenerate, do not edit.
   ========================================================================== */


/* ==========================================================================
   XINNACE features page — every module in detail, grouped by pillar.
   Navy is spent only on the header, hero and footer; the body alternates
   white and grey so each pillar reads as its own block. Content sourced from
   the per-module training decks. The .light scope redefines the same tokens,
   so no component holds a raw colour.
   ========================================================================== */

:root{
  --ground:#07111F;
  --ground-2:#0B182A;
  --surface:#101E31;
  --surface-2:#152640;
  --line:#223651;
  --line-2:#39516D;
  --ink:#F5F8FC;
  --ink-soft:#C9D4E2;
  --ink-faint:#AFBDD0;
  --brand:#12B5AB;
  --brand-2:#0FA39A;
  --on-brand:#041816;
  --eyebrow:#46D0C7;
  --manage:#2C8FD6;
  --empower:#1FAE6B;
  --engage:#F59331;
  --manage-text:#7FC0EF;
  --empower-text:#71D19E;
  --engage-text:#FFB66B;
  --manage-wash:rgba(44,143,214,.14);
  --empower-wash:rgba(31,174,107,.14);
  --engage-wash:rgba(245,147,49,.14);
  --good:#4ADE9B;
  --shadow-2:0 18px 44px rgba(0,0,0,.42),0 4px 12px rgba(0,0,0,.30);
  --ease:cubic-bezier(.22,.61,.36,1);
  --f-display:"Poppins","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-body:"Archivo","Helvetica Neue",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.light{
  --ground:#FFFFFF;
  --ground-2:#ECF2F8;
  --surface:#FFFFFF;
  --surface-2:#F2F6FA;
  --line:#DCE6EF;
  --line-2:#C3D2E0;
  --ink:#172235;
  --ink-soft:rgba(23,34,53,.72);
  --ink-faint:#617086;
  --eyebrow:#0E8F87;
  --brand:#1C8A83;
  --brand-2:#146D67;
  --on-brand:#FFFFFF;
  --manage-text:#1F6FA8;
  --empower-text:#157A4C;
  --engage-text:#AF620C;
  --manage-wash:rgba(44,143,214,.10);
  --empower-wash:rgba(31,174,107,.10);
  --engage-wash:rgba(245,147,49,.10);
  --good:#16794A;
  --shadow-2:0 18px 44px rgba(23,34,53,.10),0 4px 12px rgba(23,34,53,.05);
  background:var(--ground);
  color:var(--ink);
}
.light--white{--ground:#FFFFFF;--surface:#FFFFFF;}
.light--grey{--ground:#EFF3F8;--surface:#FFFFFF;--line:#DCE5EE;}
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;background:#07111F;color:#F5F8FC;
  font-family:var(--f-body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
svg{display:block;}
a{color:inherit;}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:4px;}
.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;margin:0;text-wrap:balance;}
h1{font-size:clamp(34px,4.6vw,56px);line-height:1.08;}
h2{font-size:clamp(27px,3.4vw,42px);line-height:1.12;}
h3{font-size:22px;letter-spacing:-.025em;line-height:1.25;}
h4{font-size:16.5px;letter-spacing:-.015em;}
p{margin:0;}
.eyebrow{
  font-family:var(--f-body);font-stretch:75%;font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow);
  display:flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--line-2);flex:none;}
.lede{font-size:clamp(16.5px,1.4vw,19px);line-height:1.62;color:var(--ink-soft);max-width:62ch;}
/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.rv.is-in{opacity:1;transform:none;}
/* ---------- page hero ---------- */
.phero{position:relative;overflow:hidden;background:#07111F;padding:clamp(52px,6.4vw,86px) 0 clamp(44px,5.4vw,68px);}
/* Same unmatched pair as the homepage: both overrun their viewBox so the
   honeycomb is cut flush by the screen edge. Plain outlines, no lit cell. */
.comb{position:absolute;pointer-events:none;color:#12B5AB;}
.comb--r{right:0;top:-26px;width:min(372px,38vw);}
.comb--l{left:0;bottom:-44px;width:min(280px,29vw);}
/* --- Nexus: separate cells drift in, lock into the lattice, then a few
   shared edges take a teal charge. Honours prefers-reduced-motion. --- */
.comb polygon{transform-box:fill-box;transform-origin:center;
  animation:hexLock 1.05s cubic-bezier(.22,1.06,.36,1) backwards;}
@keyframes hexLock{
  from{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rz,0deg)) scale(.84);}
}
.comb__lit{opacity:0;animation:hexCharge 2.6s ease-out .95s forwards;}
@keyframes hexCharge{
  0%{opacity:0;}
  40%{opacity:.85;}
  100%{opacity:.45;}
}
@media (prefers-reduced-motion:reduce){
  .comb polygon{animation:none;}
  .comb__lit{opacity:.42;animation:none;}
}
@media (max-width:760px){
  .comb--r{width:196px;top:-40px;opacity:.6;}
  .comb--l{width:142px;bottom:-58px;opacity:.48;}
}
.phero__in{position:relative;display:flex;flex-direction:column;gap:22px;align-items:flex-start;}
/* module index */
.idx{display:flex;flex-wrap:wrap;gap:8px 9px;padding-top:6px;}
.idx a{
  display:inline-flex;align-items:center;gap:8px;padding:8px 15px 8px 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font-size:13.5px;font-weight:500;text-decoration:none;color:var(--ink-soft);
  transition:border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.idx a:hover{border-color:var(--brand);color:var(--ink);transform:translateY(-1px);}
.idx i{width:9px;height:8px;flex:none;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);}
.idx .i--m{background:var(--manage);}
.idx .i--e{background:var(--empower);}
.idx .i--g{background:var(--engage);}
.idx .i--b{background:#E54B6F;}
/* ---------- pillar bands ---------- */
.band{padding:clamp(56px,6.6vw,88px) 0;scroll-margin-top:calc(var(--head-h) + 10px);}
.band__head{max-width:840px;display:flex;flex-direction:column;gap:14px;}
.pb__word{font-family:var(--f-display);font-weight:700;letter-spacing:-.045em;line-height:1;font-size:clamp(36px,5.4vw,62px);}
.pb--m .pb__word{color:#2C8FD6;}
.pb--e .pb__word{color:#1FAE6B;}
.pb--g .pb__word{color:#F59331;}
/* module blocks */
.mblock{margin-top:clamp(38px,4.6vw,58px);scroll-margin-top:calc(var(--head-h) + 14px);}
.mblock__head{max-width:840px;display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.mtag{font-family:var(--f-body);font-stretch:75%;font-size:9.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;display:flex;align-items:center;gap:7px;}
.mtag i{width:9px;height:8px;flex:none;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:currentColor;}
.pb--m .mtag{color:var(--manage-text);}
.pb--e .mtag{color:var(--empower-text);}
.pb--g .mtag{color:var(--engage-text);}
.mblock__lede{font-size:15.8px;color:var(--ink-soft);max-width:66ch;}
.mblock__tabs{font-family:var(--f-body);font-stretch:75%;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:13px;}
.fcard{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:21px 21px 22px;display:flex;flex-direction:column;gap:10px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);}
.pb--m .fcard:hover{border-color:var(--manage);}
.pb--e .fcard:hover{border-color:var(--empower);}
.pb--g .fcard:hover{border-color:var(--engage);}
.fcard ul{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;}
.fcard li{position:relative;padding-left:17px;font-size:14.2px;color:var(--ink-soft);}
.fcard li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:8px;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);}
.pb--m .fcard li::before{background:var(--manage);}
.pb--e .fcard li::before{background:var(--empower);}
.pb--g .fcard li::before{background:var(--engage);}
.fcard--flag{border-color:var(--line-2);}

/* Progressive disclosure on the module cards. 34 cards carrying 131 bullets is
   more than anyone reads; two are shown and the rest sit behind a toggle.
   <details> rather than a scripted panel, so it works with no JavaScript at
   all — block 6 of v3.js only adds the nicety of clicking anywhere on the card
   instead of on the summary, and the page is complete without it. */
.fmore{margin-top:-2px;}
.fmore summary{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  font-family:var(--f-body);font-stretch:75%;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  transition:color .2s var(--ease);
}
.fmore summary::-webkit-details-marker{display:none;}
.fmore summary::after{
  content:"";width:6px;height:6px;margin-top:-3px;
  border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:rotate(45deg);transition:transform .22s var(--ease);
}
.fmore[open] summary::after{transform:rotate(-135deg);margin-top:2px;}
.fmore summary:hover,.fcard:hover .fmore summary{color:var(--ink);}
.pb--m .fcard:hover .fmore summary{color:var(--manage-text);}
.pb--e .fcard:hover .fmore summary{color:var(--empower-text);}
.pb--g .fcard:hover .fmore summary{color:var(--engage-text);}
.desk .fcard:hover .fmore summary{color:var(--desk);}
.fmore__b{display:none;}
.fmore[open] .fmore__a{display:none;}
.fmore[open] .fmore__b{display:inline;}
.fmore ul{margin-top:10px;}
/* Only the cards block 6 actually wired get the pointer, so a JS-off visitor
   is never told the whole card is clickable when only the summary is. */
.fcard--x{cursor:pointer;}
.fcard--x summary{cursor:pointer;}

/* everyday desk — its own accent, deliberately outside the three pillar hues
   so Tasks / Tickets / Forms read as a separate family rather than a fourth pillar. */
#desk{--desk:#E54B6F;}
.desk{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-top:clamp(28px,3.4vw,40px);}
@media (max-width:820px){.desk{grid-template-columns:1fr;}}
#desk .fcard{scroll-margin-top:calc(var(--head-h) + 14px);}
#desk .eyebrow{color:var(--desk);}
.desk .fcard:hover{border-color:var(--desk);}
.desk .fcard li::before{background:var(--desk);}
.desk .fcard h4{color:var(--desk);}
/* CTA */
.cta{padding:clamp(60px,7.4vw,96px) 0;text-align:center;background:var(--ground);}
.cta__in{display:flex;flex-direction:column;align-items:center;gap:21px;}
.cta .lede{text-align:center;}
.cta__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}
/* ==========================================================================
   Product shots — partials/shots/*.php. Hand-drawn recreations of real
   screens, drawn at a fixed 1120×610 and scaled to the column by v3.js.
   .is-on (added when a shot scrolls into view) starts the entrances; each
   .sh-a / .sh-pop element waits --d milliseconds. Colours inside a shot are
   the app's own, deliberately literal, so the drawing never picks up the
   marketing palette. The initial hidden states are scoped to html.js so the
   drawings are complete when the script never runs.
   ========================================================================== */
.shots{margin:2px 0 24px;}
.shots__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.shots__tab{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-soft);
  font-family:var(--f-body);font-size:13px;font-weight:500;line-height:1.2;
  transition:border-color .2s var(--ease),color .2s var(--ease);}
.shots__tab i{width:9px;height:8px;flex:none;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:var(--line-2);}
.shots__tab:hover{border-color:var(--line-2);color:var(--ink);}
.shots__tab.is-cur{color:var(--ink);}
.pb--m .shots__tab.is-cur{border-color:var(--manage);}  .pb--m .shots__tab.is-cur i{background:var(--manage);}
.pb--e .shots__tab.is-cur{border-color:var(--empower);} .pb--e .shots__tab.is-cur i{background:var(--empower);}
.pb--g .shots__tab.is-cur{border-color:var(--engage);}  .pb--g .shots__tab.is-cur i{background:var(--engage);}
.shots__pane[hidden]{display:none;}
.shot{position:relative;overflow:hidden;aspect-ratio:1120/610;border-radius:14px;border:1px solid var(--line-2);
  box-shadow:var(--shadow-2);background:#F3F6FA;}
.shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(243,246,250,0),#F3F6FA 88%);}
.shot__scr{position:absolute;top:0;left:0;width:1120px;height:610px;transform-origin:0 0;overflow:hidden;
  font-family:var(--f-body);font-size:11px;line-height:1.35;color:#172235;background:#F3F6FA;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;}

/* PHONE SHOTS. Every screen has two drawings: the 1120x610 desktop one and a
   390x720 phone one traced from a phone screenshot (partials/shots/m/). Below
   620px the phone drawing shows and the desktop one is hidden, and v3.js
   scales each by its own data-w/data-h. This replaces the stopgap that let
   the desktop drawing scroll sideways on a phone. */
.shot--m{display:none;aspect-ratio:390/720;}
.shot--m .shot__scr{width:390px;height:720px;}
@media (max-width:620px){
  .shot:not(.shot--m){display:none;}
  .shot--m{display:block;}
}
.sh-ic{flex:none;}
.sh-n{white-space:nowrap;}
/* header band */
.sh-hd{position:relative;overflow:hidden;background:linear-gradient(100deg,#0A1526,#0D1B30 70%,#0B1A2E);padding:14px 24px 0;color:#F5F8FC;}
.sh-hex{position:absolute;right:0;top:-150px;width:340px;height:300px;}
.sh-crumb{position:relative;font-size:10px;color:#AFBDD0;display:flex;gap:6px;align-items:center;}
.sh-crumb u{text-decoration:underline;text-underline-offset:2px;}
.sh-crumb b{font-weight:400;color:#6C7B90;}
.sh-title{position:relative;font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:-.02em;line-height:1.15;margin-top:2px;}
.sh-title::after{content:"";display:block;width:60px;height:3px;border-radius:2px;background:#12B5AB;margin-top:5px;}
.sh-sub{position:relative;font-size:11.5px;color:#C9D4E2;margin-top:7px;max-width:600px;}
.sh-acts{position:absolute;right:24px;top:24px;display:flex;gap:8px;z-index:1;}
.sh-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;font-size:11px;font-weight:600;
  color:#F5F8FC;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.06);white-space:nowrap;}
.sh-btn--pri{background:#3F9DB4;border-color:#3F9DB4;}
.sh-tabs{position:relative;display:flex;gap:4px;margin-top:14px;}
.sh-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:7px 7px 0 0;font-size:11px;font-weight:600;color:#C9D4E2;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-bottom:0;white-space:nowrap;}
.sh-tab i{width:5px;height:5px;border-radius:50%;background:#6C7B90;}
.sh-tab.is-on{color:var(--sh-acc);border-color:var(--sh-acc);background:#0E1D33;box-shadow:inset 0 0 0 .5px var(--sh-acc);}
.sh-tab.is-on i{background:var(--sh-acc);}
/* body */
.sh-bd{padding:16px 24px;display:flex;flex-direction:column;gap:14px;}
.sh-tiles{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;}
.sh-tile{position:relative;background:#fff;border:1px solid #DCE6EF;border-left:3px solid var(--t);border-radius:10px;padding:10px 12px 11px;
  box-shadow:0 2px 6px rgba(23,34,53,.05);background-image:linear-gradient(135deg,#fff 50%,color-mix(in srgb,var(--t) 10%,#fff));}
.sh-tile__ic{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:color-mix(in srgb,var(--t) 13%,#fff);color:var(--t);margin-bottom:7px;}
.sh-tile__n{font-family:var(--f-display);font-weight:700;font-size:19px;line-height:1.1;letter-spacing:-.02em;color:var(--t);}
.sh-tile__l{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#5E6C80;margin-top:4px;}
.sh-tile__s{font-size:9.5px;color:#7A8797;margin-top:2px;}
.sh-tiles--3 .sh-tile{padding:12px 14px;}
.sh-panel{background:#fff;border:1px solid #DCE6EF;border-radius:12px;overflow:hidden;box-shadow:0 2px 6px rgba(23,34,53,.04);}
.sh-panel__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid #E6EDF4;}
.sh-panel__t{font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:-.01em;color:#2A7FA0;}
.sh-panel__s{font-size:10.5px;color:#7A8797;margin-top:2px;}
.sh-panel__acts{display:flex;gap:8px;align-items:center;}
.sh-panel__mt{display:flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:700;font-size:12.5px;color:#172235;}
.sh-panel__mt small{font-family:var(--f-body);font-weight:400;font-size:10px;color:#2A7FA0;margin-left:4px;}
.sh-obtn{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid #C9D6E2;border-radius:7px;background:#fff;font-size:10.5px;font-weight:600;color:#2A6F9E;white-space:nowrap;}
.sh-obtn b{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#2A6F9E;color:#fff;font-size:8.5px;}
.sh-eyebrow{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5E6C80;margin-bottom:2px;}
.sh-seg{display:inline-flex;background:#EEF2F6;border-radius:8px;padding:3px;gap:2px;}
.sh-seg span{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:6px;font-size:10.5px;font-weight:600;color:#5E6C80;white-space:nowrap;}
.sh-seg .is-on{background:#fff;color:#172235;box-shadow:0 1px 3px rgba(23,34,53,.12);}
.sh-two{display:grid;grid-template-columns:2fr 1fr;gap:12px;}
/* tables */
.sh-tbl{width:100%;border-collapse:collapse;font-size:11px;}
.sh-tbl th{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#5E6C80;text-align:left;padding:10px 12px;border-bottom:1px solid #E6EDF4;white-space:nowrap;}
.sh-tbl th i{display:inline-block;width:6px;height:9px;margin-left:5px;vertical-align:-1px;opacity:.45;background:#5E6C80;
  clip-path:polygon(50% 0,100% 38%,0 38%,50% 0,50% 62%,0 62%,50% 100%,100% 62%,50% 62%);}
.sh-tbl td{padding:9px 12px;border-bottom:1px solid #EEF2F6;vertical-align:middle;color:#3B4757;}
.sh-tbl td b{color:#172235;font-weight:700;}
.sh-name b{display:block;font-size:11.5px;}
.sh-name small{display:block;font-size:9.5px;color:#8A96A5;margin-top:1px;}
.sh-cb{display:inline-block;width:12px;height:12px;border:1.5px solid #C3CFDB;border-radius:3px;vertical-align:middle;background:#fff;flex:none;}
.sh-daycol{text-align:center;background:#F8FAFC;border-left:1px solid #EEF2F6;width:56px;}
.sh-tbl th.sh-daycol{text-align:center;}
.sh-tbl th.sh-daycol span{display:block;font-size:8.5px;color:#8A96A5;margin-bottom:1px;}
.sh-daycol--today{background:#EDF3F9;}
.sh-tbl th.sh-daycol--today{box-shadow:inset 0 -2px 0 #2C8FD6;color:#2C8FD6;}
.sh-hrs{text-align:right;width:72px;}
.sh-tbl th.sh-hrs{text-align:right;}
.sh-chip{display:inline-block;min-width:40px;padding:5px 6px;border-radius:6px;text-align:center;font-size:10px;font-weight:700;color:#fff;background:#3C8F3B;line-height:1.1;}
.sh-chip--do{background:#7A8794;}
.sh-chip--al{background:#3B6FE0;}
.sh-chip--dash{background:#fff;border:1px solid #E1E8EF;color:#B5C0CC;font-weight:400;}
.sh-swap{display:inline-grid;}
.sh-swap>*{grid-area:1/1;}
/* pills and leave cards */
.sh-pill{display:inline-block;padding:2px 7px;border-radius:999px;font-size:8.5px;font-weight:700;line-height:1.3;vertical-align:middle;}
.sh-pill--bcea{background:#E3F4EA;color:#1E7A45;}
.sh-pill--policy{background:#EEF1F5;color:#4A5568;}
.sh-pill--unpaid{background:#FDEBDD;color:#B4530A;}
.sh-lv{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:16px 18px;}
.sh-lcard{position:relative;background:#fff;border:1px solid #DCE6EF;border-left:3px solid var(--t);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:7px;min-height:156px;}
.sh-lcard__hd{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-right:16px;font-size:11.5px;font-weight:700;color:#172235;}
.sh-lcard__hd i{width:7px;height:7px;border-radius:50%;background:var(--t);}
.sh-lcard__info{position:absolute;right:10px;top:10px;color:#9AA7B5;}
.sh-lcard__v{font-family:var(--f-display);font-weight:700;font-size:20px;line-height:1.1;letter-spacing:-.02em;color:#172235;}
.sh-lcard__v small{font-family:var(--f-body);font-weight:400;font-size:10.5px;color:#6C7B90;letter-spacing:0;margin-left:4px;}
.sh-lcard__v--txt{font-size:15px;font-weight:600;}
.sh-bar{height:5px;border-radius:3px;background:#E6EDF4;overflow:hidden;}
.sh-bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--t);}
.shot.is-on .sh-bar i{width:var(--w);transition:width 1.1s var(--ease);transition-delay:calc(var(--d,0)*1ms);}
.sh-lcard__s{font-size:9.5px;color:#7A8797;}
.sh-lcard__note{display:flex;gap:4px;align-items:flex-start;font-size:9px;line-height:1.35;color:#B4530A;}
.sh-lcard__note .sh-ic{margin-top:1px;}
.sh-lcard__apply{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border:1px solid #C9D6E2;border-radius:6px;font-size:10px;font-weight:700;color:#2A6F9E;}
/* payroll */
.sh-filters{display:flex;align-items:center;gap:8px;padding:8px 18px;border-bottom:1px solid #E6EDF4;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7A8797;}
.sh-filters span{padding:3px 8px;border-radius:6px;background:#EEF2F6;color:#2A6F9E;letter-spacing:0;text-transform:none;font-size:10px;}
.sh-filters em{padding:3px 8px;border-radius:6px;border:1px solid #F1C9C9;color:#C0392B;font-style:normal;letter-spacing:0;text-transform:none;font-size:10px;}
.sh-tbl--pay th,.sh-tbl--pay td{padding:8px 9px;font-size:10.5px;white-space:nowrap;}
.sh-tbl--pay td.w{white-space:normal;max-width:96px;line-height:1.3;}
/* rosters */
.sh-ro__top{display:flex;align-items:center;justify-content:space-between;padding:12px 18px 8px;}
.sh-ro__meta{padding:0 18px 12px;font-size:10.5px;color:#3B4757;display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
.sh-ro__meta b{color:#172235;}
.sh-ro__meta .gap{width:10px;}
.sh-ro__meta em{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7A8797;padding:0 2px;}
.sh-ro__meta .nm{font-family:var(--f-display);font-weight:700;color:#2A7FA0;font-size:11.5px;}
.sh-ro__pal{display:flex;align-items:center;gap:10px;padding:10px 18px;border-top:1px solid #E6EDF4;border-bottom:1px solid #E6EDF4;background:#FAFBFD;}
.sh-ro__pal p{font-size:9.5px;color:#7A8797;max-width:230px;line-height:1.3;margin-right:6px;}
.sh-pal{display:inline-flex;flex-direction:column;align-items:center;padding:6px 12px;border-radius:8px;background:#EEF2F6;color:#5E6C80;min-width:66px;}
.sh-pal b{font-size:10px;color:#172235;}
.sh-pal small{font-size:8.5px;}
.sh-pal--e{background:#E3F2F1;color:#2A7A72;}
.sh-pal--l{background:#E6EBF7;color:#3A4F8A;}
.sh-ro__none{margin-left:auto;font-size:11px;font-weight:700;color:#3B4757;}
.sh-tbl--ro th,.sh-tbl--ro td{padding:6px 3px;text-align:center;border-left:1px solid #EEF2F6;}
.sh-tbl--ro th{font-size:8.5px;letter-spacing:.03em;}
.sh-tbl--ro th span{display:block;font-size:8px;color:#8A96A5;}
.sh-tbl--ro .sh-ro__person{text-align:left;padding-left:14px;width:196px;border-left:0;}
.sh-ro__p{display:flex;align-items:center;gap:8px;}
.sh-ro__p div{flex:1;min-width:0;}
.sh-ro__p b{display:block;font-size:11px;}
.sh-ro__p small{display:block;font-size:9px;color:#8A96A5;}
.sh-ro__team{display:inline-grid;place-items:center;width:16px;height:16px;border:1px solid #DCE6EF;border-radius:4px;font-size:8.5px;font-style:normal;color:#7A8797;}
.sh-ro__d--we{background:#F8FAFC;}
.sh-shift{display:inline-block;min-width:44px;padding:4px 5px;border-radius:6px;font-size:8.5px;font-weight:700;letter-spacing:.03em;color:#fff;background:#2A8C93;line-height:1.1;}
.sh-shift--l{background:#3A5A9A;}
.sh-shift--o{background:#EEF2F6;color:#9AA7B5;}
.sh-tbl--ro .sh-ro__h{width:84px;text-align:right;padding-right:14px;}
.sh-ro__h .sh-ic{color:#E5484D;margin-left:6px;vertical-align:middle;}
.sh-tbl--ro tfoot td{background:#FDF1F2;border-top:1px solid #E6EDF4;border-bottom:0;font-weight:700;color:#C0392B;padding:9px 3px;}
.sh-tbl--ro tfoot td.is-met{background:#EEF8F1;color:#1E7A45;}
.sh-tbl--ro tfoot td.sh-ro__person,.sh-tbl--ro tfoot td.sh-ro__h{background:#fff;color:#172235;}
.sh-tbl--ro tfoot .sh-ro__person small{display:block;font-weight:400;font-size:9px;color:#8A96A5;}
/* vacancies — People › Vacancies › Reporting */
/* vacancies shot (partials/shots/vacancies.php) — the recruitment pipeline.
   Every class here is sh-va-*; colours are the app's own. The three
   "tightened" rules trim house paddings inside this shot only, so the whole
   pipeline panel lands above the bottom fade. */
/* A. the REPORTING scope strip — house panel head, tightened */
.sh-va-strip>.sh-panel__hd{padding:8px 18px;}
.sh-va-strip .sh-eyebrow{margin-bottom:0;}
.sh-va-strip .sh-panel__s{margin-top:0;}
/* B. house tiles, tightened by 6px; the "/ 10" beside the big 5 */
.sh-va-tiles .sh-tile{padding:8px 12px 9px;}
.sh-va-tiles .sh-tile__ic{margin-bottom:5px;}
.sh-va-of{font-family:var(--f-body);font-weight:400;font-size:10.5px;color:#6C7B90;letter-spacing:0;margin-left:4px;}
/* D. the pipeline panel */
.sh-va-pipe>.sh-panel__hd{padding:9px 18px;}
.sh-va-meta{font-size:10.5px;color:#7A8797;white-space:nowrap;}
.sh-va-meta b{color:#172235;font-weight:700;}
/* stage row: six fixed columns, the connectors take what is left between them */
.sh-va-stages{display:flex;align-items:flex-start;padding:8px 18px 5px;}
.sh-va-stage{flex:0 0 118px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.sh-va-stage .sh-va-stage__c{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c);color:#fff;
  font-family:var(--f-display);font-weight:700;font-size:15px;line-height:1;letter-spacing:-.02em;box-shadow:0 2px 6px color-mix(in srgb,var(--c) 35%,transparent);}
.sh-va-stage b{margin-top:4px;font-size:10.5px;font-weight:700;line-height:1.25;color:#172235;}
.sh-va-stage small{margin-top:1px;font-size:9.5px;line-height:1.25;color:#7A8797;}
.sh-va-avg{display:inline-flex;align-items:center;gap:3px;margin-top:3px;padding:2px 6px;border:1px solid #D9E2EB;border-radius:999px;
  font-size:8px;font-weight:600;font-style:normal;line-height:1.2;color:#5E6C80;white-space:nowrap;}
.sh-va-avg .sh-ic{width:10px;height:10px;color:#D19A2B;}
.sh-va-link{flex:1 1 0;position:relative;height:40px;display:flex;align-items:center;justify-content:center;}
.sh-va-link i{position:absolute;left:4px;right:4px;top:50%;height:1px;background:#D3DDE7;}
.sh-va-link span{position:relative;padding:0 5px;background:#fff;font-size:9.5px;font-weight:600;color:#7A8797;}
/* exits */
.sh-va-left{display:flex;align-items:center;gap:8px;padding:5px 18px;border-top:1px solid #E6EDF4;}
.sh-va-left .sh-eyebrow{margin:0 4px 0 0;}
.sh-va-left .sh-va-exit{display:inline-flex;align-items:center;gap:4px;padding:2.5px 8px;border:1px solid;border-radius:999px;font-size:9.5px;font-weight:600;line-height:1.2;white-space:nowrap;}
.sh-va-exit b{font-weight:700;}
.sh-va-exit--r{color:#C0392B;border-color:#F1C9C9;}
.sh-va-exit--w{color:#5E6C80;border-color:#C9D6E2;}
/* stalled notice, flush with the panel's bottom edge */
.sh-va-note{display:flex;align-items:center;gap:7px;padding:7px 18px;border-top:1px solid #F5D9A8;background:#FFF6E5;font-size:10.5px;color:#5B4A1E;}
.sh-va-note b{font-weight:700;}
/* recognition — People › Recognition › Leaderboard */
/* ---- recognition shot (partials/shots/recognition.php) — sidecar, to merge
   into the shots block of page-features.css. Every class is sh-rc-* except
   .sh-tab__b, which belongs to the shared header: sh_head()'s tabs now take an
   optional third element, a badge count, drawn as a small red pill. */
.sh-tab__b{display:inline-block;margin-left:4px;padding:1px 5px;border-radius:999px;background:#E5484D;color:#fff;font-size:8.5px;font-weight:700;line-height:1.3;}
/* recognition leaderboard: three ranked panels side by side */
.sh-rc-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.sh-rc-3 .sh-panel__mt small{color:#7A8797;}
.sh-rc-row{display:flex;align-items:center;gap:6px;padding:2px 12px;min-height:33px;box-sizing:border-box;border-bottom:1px solid #EEF2F6;}
.sh-rc-row:last-child{border-bottom:0;}
.sh-rc-rank{display:inline-block;width:22px;height:22px;border-radius:50%;flex:none;line-height:22px;text-align:center;font-size:10px;font-weight:700;background:#EEF2F6;color:#5E6C80;}
.sh-rc-rank--1{background:#F5D26B;color:#7A5A00;}
.sh-rc-rank--2{background:#E3E8EE;color:#4A5568;}
.sh-rc-rank--3{background:#F3C9A8;color:#8A4B12;}
.sh-rc-av{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none;background:#E8F3FA;color:#2A6F9E;font-size:9.5px;font-weight:700;letter-spacing:.02em;}
.sh-rc-who{flex:1;min-width:0;line-height:1.2;}
.sh-rc-who b{display:block;font-size:11.5px;font-weight:700;color:#172235;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sh-rc-who small{display:block;font-size:9.5px;color:#8A96A5;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sh-rc-bar{--t:#2A9FB5;width:64px;flex:none;}
.sh-rc-v{min-width:20px;text-align:right;font-size:11.5px;font-weight:700;color:#172235;}
/* articles — Workplace › Articles */
/* articles shot (partials/shots/articles.php) — list beside reader.
   Every class here is sh-ar-*; colours are the app's own. */
.sh-ar{display:grid;grid-template-columns:340px 1fr;gap:14px;}
/* left: the list */
.sh-ar-lhd{padding:11px 14px 12px;border-bottom:1px solid #E6EDF4;}
.sh-ar-total{display:block;margin-top:7px;padding:4px 8px;border-radius:999px;background:#E3F4F2;color:#1E7A72;font-size:10px;font-weight:700;line-height:1.3;text-align:center;}
.sh-ar-flt{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-bottom:1px solid #E6EDF4;}
.sh-ar-flt__row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.sh-ar-fld{display:flex;align-items:center;justify-content:space-between;gap:6px;height:23px;padding:0 9px;border:1px solid #C9D6E2;border-radius:7px;background:#fff;font-size:10.5px;color:#172235;white-space:nowrap;overflow:hidden;}
.sh-ar-fld--ph{color:#9AA7B5;}
.sh-ar-fld i{flex:none;width:6px;height:6px;margin-top:-3px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg);color:#5E6C80;}
.sh-ar-it{padding:11px 14px 11px 11px;border-left:3px solid transparent;border-bottom:1px solid #EEF2F6;}
.sh-ar-it.is-on{border-left-color:#12B5AB;background:#EEF8F7;}
.sh-ar-it.is-on .sh-ar-it__t{color:#2A7FA0;}
.sh-ar-it__r{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sh-ar-it__r--m{margin-top:2px;}
.sh-ar-it__t{flex:1;min-width:0;font-size:11.5px;font-weight:700;line-height:1.3;color:#172235;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sh-ar-it__d{flex:none;font-size:9.5px;color:#8A96A5;}
.sh-ar-it__a{font-size:9.5px;color:#8A96A5;}
.sh-ar-fold{display:inline-flex;align-items:center;gap:4px;padding:1px 7px 1px 6px;border:1px solid #7FD3C8;border-radius:999px;font-size:8.5px;font-weight:700;line-height:1.3;color:#1E7A72;white-space:nowrap;}
.sh-ar-it__s{margin-top:3px;font-size:10px;line-height:1.3;color:#7A8797;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* right: the reader */
.sh-ar-rhd{padding:16px 20px 0;border-bottom:1px solid #E6EDF4;}
.sh-ar-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:4px;font-size:10.5px;color:#7A8797;}
.sh-ar-meta b{color:#172235;font-weight:700;}
.sh-ar-meta__f{display:inline-flex;align-items:center;gap:4px;color:#1E7A72;font-weight:700;}
.sh-ar-rtabs{display:flex;gap:16px;margin-top:10px;}
.sh-ar-rtab{padding:0 2px 6px;border-bottom:2px solid #12B5AB;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#12B5AB;}
.sh-ar-rbd{padding:20px;}
.sh-ar-hero{position:relative;height:250px;border-radius:14px;overflow:hidden;
  background:
    radial-gradient(circle 190px at 14% 8%,rgba(255,255,255,.10) 0,rgba(255,255,255,.10) 82%,rgba(255,255,255,0) 100%),
    radial-gradient(circle 230px at 44% 40%,rgba(255,255,255,.07) 0,rgba(255,255,255,.07) 82%,rgba(255,255,255,0) 100%),
    radial-gradient(circle 160px at 24% 72%,rgba(255,255,255,.06) 0,rgba(255,255,255,.06) 82%,rgba(255,255,255,0) 100%),
    linear-gradient(135deg,#0E3A46,#155E66 55%,#1E7C86);}
.sh-ar-hero__wm{position:absolute;right:18px;top:16px;font-size:9px;font-weight:700;letter-spacing:.22em;color:rgba(255,255,255,.55);}
.sh-ar-hero__txt{position:absolute;left:24px;right:24px;bottom:22px;}
.sh-ar-hero__eb{margin-bottom:8px;font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);}
.sh-ar-hero__t{font-family:var(--f-display);font-weight:700;font-size:26px;line-height:1.18;letter-spacing:-.02em;color:#fff;}
.sh-ar-p{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:#172235;}
/* forms — Workplace › Forms › My Forms */
/* forms — Workplace › Forms › My Forms */
/* forms shot (partials/shots/forms.php) — list beside the form reader.
   Every class here is sh-fo-*; colours are the app's own. The list side
   follows the same idiom as the articles shot but shares none of its rules,
   so the two can be tuned apart. */
.sh-fo{display:grid;grid-template-columns:340px 1fr;gap:14px;}
/* left: the list */
.sh-fo-lhd{padding:11px 14px 12px;border-bottom:1px solid #E6EDF4;}
.sh-fo-lhd__t{display:flex;align-items:center;gap:7px;color:#2A7FA0;}
.sh-fo-total{display:block;margin-top:7px;padding:4px 8px;border-radius:999px;background:#E3F4F2;color:#1E7A72;font-size:10px;font-weight:700;line-height:1.3;text-align:center;}
.sh-fo-flt{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-bottom:1px solid #E6EDF4;}
.sh-fo-flt__row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.sh-fo-fld{display:flex;align-items:center;justify-content:space-between;gap:6px;height:23px;padding:0 9px;border:1px solid #C9D6E2;border-radius:7px;background:#fff;font-size:10.5px;color:#172235;white-space:nowrap;overflow:hidden;}
.sh-fo-fld--ph{color:#9AA7B5;}
.sh-fo-fld i{flex:none;width:6px;height:6px;margin-top:-3px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg);color:#5E6C80;}
.sh-fo-it{padding:11px 14px 11px 11px;border-left:3px solid transparent;border-bottom:1px solid #EEF2F6;}
.sh-fo-it.is-on{border-left-color:#12B5AB;background:#EEF8F7;}
.sh-fo-it.is-on .sh-fo-it__t{color:#2A7FA0;}
.sh-fo-it__t{font-size:11.5px;font-weight:700;line-height:1.3;color:#172235;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sh-fo-it__c{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:4px;}
.sh-fo-chip{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border:1px solid;border-radius:999px;font-size:8.5px;font-weight:700;line-height:1.3;white-space:nowrap;}
.sh-fo-chip--fold{padding-left:6px;border-color:#7FD3C8;color:#1E7A72;}
.sh-fo-chip--scored{border-color:#F5C27A;color:#B4530A;}
.sh-fo-chip--start{border-color:#F5C27A;color:#B4530A;text-transform:uppercase;letter-spacing:.08em;}
.sh-fo-it__s{margin-top:4px;font-size:10px;line-height:1.3;color:#7A8797;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
/* right: the reader */
.sh-fo-rhd{padding:16px 20px 12px;}
.sh-fo-status{margin:0 20px 12px;padding:6px 12px;border:1px solid #F5D9A8;border-radius:7px;background:#FFF6E5;font-size:9.5px;font-weight:700;line-height:1.35;color:#B4530A;}
.sh-fo-rbd{padding:18px 20px;border-top:1px solid #E6EDF4;}
.sh-fo-p{margin:0;font-size:12.5px;line-height:1.55;color:#172235;}
.sh-fo-det{width:700px;max-width:100%;margin-top:14px;border:1px solid #DCE6EF;border-radius:8px;overflow:hidden;}
.sh-fo-det__r{display:grid;grid-template-columns:125px 1fr;align-items:center;min-height:38px;box-sizing:border-box;padding:0 14px;}
.sh-fo-det__r+.sh-fo-det__r{border-top:1px solid #EEF2F6;}
.sh-fo-det__l{font-size:11px;font-weight:600;color:#3B4757;}
.sh-fo-det__v{font-size:11.5px;color:#172235;}
.sh-fo-det__f{display:inline-flex;align-items:center;gap:4px;color:#1E7A72;font-weight:700;}
.sh-fo-ft{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid #E6EDF4;}
.sh-fo-ft__n{font-size:10.5px;color:#7A8797;}
.sh-fo-go{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;background:#3F9DB4;color:#fff;font-size:11px;font-weight:700;line-height:1.35;white-space:nowrap;}
/* the desk grid already carries margin-top:clamp(28px,3.4vw,40px); the shot above it must not add its own 24px */
#desk .shots{margin-bottom:0;}
/* ---- phone chrome: what sh_head_m() draws, plus the body patterns every phone shot shares ---- */
.shm-bar{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;background:#0A1526;color:#F5F8FC;border-bottom:1px solid rgba(255,255,255,.08);}
.shm-burger{display:inline-flex;flex-direction:column;gap:3px;width:16px;}
.shm-burger i{display:block;height:1.6px;border-radius:1px;background:#F5F8FC;}
.shm-brand{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:800;font-size:12.5px;letter-spacing:.12em;color:#F5F8FC;margin-left:4px;}
.shm-brand b{color:#12B5AB;font-weight:800;}
.shm-mark{width:18px;height:16px;color:#F5F8FC;}
.shm-bell{position:relative;margin-left:auto;width:16px;height:16px;color:#C9D4E2;}
.shm-bell svg{width:16px;height:16px;}
.shm-bell b{position:absolute;top:-5px;right:-6px;min-width:13px;height:13px;padding:0 3px;border-radius:999px;background:#F59331;color:#fff;font-size:7.5px;font-weight:700;line-height:13px;text-align:center;}
.shm-ava{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#7A5C3E,#3B2A1E);border:1.5px solid rgba(255,255,255,.35);}
.shm-hd{position:relative;overflow:hidden;background:linear-gradient(100deg,#0A1526,#0D1B30 70%,#0B1A2E);padding:12px 12px 0;color:#F5F8FC;}
.shm-hex{width:220px;height:194px;top:-120px;}
.shm-title{position:relative;font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:-.02em;line-height:1.15;margin-top:2px;}
.shm-title::after{content:"";display:block;width:52px;height:3px;border-radius:2px;background:#12B5AB;margin-top:5px;}
.shm-sub{position:relative;font-size:10.5px;line-height:1.4;color:#C9D4E2;margin-top:7px;}
.shm-acts{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
.shm-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 10px;border-radius:8px;font-size:11px;font-weight:600;
  color:#F5F8FC;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.06);white-space:nowrap;}
.shm-btn--pri{background:#3F9DB4;border-color:#3F9DB4;}
.shm-btn--full{grid-column:1/-1;}
.shm-tabs{position:relative;display:flex;gap:4px;margin-top:14px;overflow:hidden;white-space:nowrap;}
.shm-tab{flex:none;padding:8px 10px;font-size:10.5px;}
/* body */
.shm-bd{padding:12px;display:flex;flex-direction:column;gap:12px;}
/* stat tiles: the app puts them in a row you swipe, cut at the right edge — or, on Leave, a 2x2 grid */
.shm-tiles{display:flex;gap:10px;overflow:hidden;}
.shm-tiles .sh-tile{flex:0 0 128px;}
.shm-tiles--grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow:visible;}
.shm-tiles--grid .sh-tile{flex:auto;}
/* two toolbar buttons sharing a row, e.g. Filters | Export */
.shm-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.shm-row2 .sh-obtn{justify-content:center;height:30px;}
/* a panel head that stacks its title over its actions */
.shm-panel__hd{padding:12px 12px 10px;border-bottom:1px solid #E6EDF4;display:flex;flex-direction:column;gap:9px;}
/* ---- phone shot bodies (partials/shots/m/) ---- */
/* register: name plus the day columns, which run off the right edge as the app's own scroll does */
.sh-m-rg th,.sh-m-rg td{padding:7px 8px;}
.sh-m-rg .sh-daycol{width:38px;padding-left:3px;padding-right:3px;}
.sh-m-rg .sh-chip{min-width:32px;padding:5px 3px;font-size:9.5px;}
.sh-m-rg .sh-name b{white-space:nowrap;}
/* rosters: the grid is the point */
.sh-m-ro__top{padding:12px 12px 10px;display:flex;flex-direction:column;gap:7px;align-items:flex-start;}
.sh-m-ro__nm{font-family:var(--f-display);font-weight:700;color:#2A7FA0;font-size:13px;}
.sh-m-ro__nm span{font-family:var(--f-body);font-weight:400;color:#3B4757;font-size:11px;}
.sh-m-ro__meta{font-size:10px;color:#3B4757;line-height:1.4;}
.sh-m-ro__meta b{color:#172235;}
.sh-m-ro__meta em{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7A8797;}
.sh-m-ro__ctl{width:100%;margin-top:3px;}
.sh-m-ro__ctl .sh-seg{justify-content:center;}
.sh-m-ro__ctl .sh-seg span{flex:1;justify-content:center;}
.sh-m-ro__pal{display:flex;align-items:center;gap:6px;padding:8px 12px;border-top:1px solid #E6EDF4;border-bottom:1px solid #E6EDF4;background:#FAFBFD;}
.sh-m-ro__pal .sh-pal{min-width:0;padding:5px 8px;}
.sh-m-ro__pal .sh-ro__none{margin-left:auto;}
.sh-m-ro th,.sh-m-ro td{padding:7px 6px;}
.sh-m-ro__p{width:118px;}
.sh-m-ro td.sh-m-ro__p b{display:inline;font-size:11px;}
.sh-m-ro__p small{display:block;font-size:8.5px;color:#8A96A5;font-weight:400;}
.sh-m-ro__d{text-align:center;width:50px;border-left:1px solid #EEF2F6;}
.sh-m-ro th.sh-m-ro__d{text-align:center;}
.sh-m-ro th.sh-m-ro__d span{display:block;font-size:8px;color:#8A96A5;}
.sh-m-ro__h{text-align:right;width:36px;}
.sh-m-ro th.sh-m-ro__h{text-align:right;}
.sh-m-ro__c{display:inline-block;min-width:42px;padding:4px 4px;border-radius:6px;font-size:8.5px;font-weight:700;letter-spacing:.03em;text-align:center;}
.sh-m-ro__c--e{background:#DDF3E4;color:#1E7A45;}
.sh-m-ro__c--l{background:#E4E0F7;color:#4B3FA6;}
.sh-m-ro__c--o{background:#EEF1F5;color:#5E6C80;}
.sh-m-ro__on td{background:#F8FAFC;font-size:10px;color:#5E6C80;}
.sh-m-ro__on b{color:#1E7A45;}
.sh-m-ro__on b.is-short{color:#C0392B;}
/* payroll: a card per row */
.sh-m-pr__sort{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid #E6EDF4;}
.sh-m-pr__sort em{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7A8797;}
.sh-m-pr__sel{flex:1;display:flex;align-items:center;justify-content:space-between;height:28px;padding:0 10px;border:1px solid #C9D6E2;border-radius:7px;font-size:11px;font-weight:600;color:#172235;background:#fff;}
.sh-m-pr__sel i{width:6px;height:6px;border-right:1.5px solid #5E6C80;border-bottom:1.5px solid #5E6C80;transform:rotate(45deg) translateY(-2px);}
.sh-m-pr__dir{display:grid;place-items:center;width:28px;height:28px;border:1px solid #C9D6E2;border-radius:7px;color:#2A6F9E;background:#fff;}
.sh-m-pr__card{margin:12px;border:1px solid #DCE6EF;border-radius:10px;padding:10px 12px 4px;background:#fff;}
.sh-m-pr__st{display:inline-block;margin-bottom:6px;}
.sh-m-pr__row{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:8px;padding:6px 0;border-top:1px solid #EEF2F6;font-size:11px;}
.sh-m-pr__row em{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#7A8797;}
.sh-m-pr__row b{font-weight:500;color:#172235;}
/* vacancies: the six pipeline stages as rows, conversion on the connector */
.sh-m-va__hd{padding:11px 12px 10px;border-bottom:1px solid #E6EDF4;}
.sh-m-va__hd .sh-va-meta{margin-top:4px;white-space:normal;}
.sh-m-va__stages{padding:10px 12px 6px;}
.sh-m-va__st{display:flex;align-items:center;gap:9px;}
/* Two classes deep on purpose: .sh-pop sets display:inline-block and is declared
   later in this file, so a one-class selector here loses and the digit sits
   top-left of the circle, clipped. The desktop stage circle is nested for the
   same reason. */
.sh-m-va__st .sh-m-va__c{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:var(--c);color:#fff;
  font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:-.01em;}
.sh-m-va__w{flex:1;min-width:0;line-height:1.2;}
.sh-m-va__w b{display:block;font-size:11px;font-weight:700;color:#172235;}
.sh-m-va__w small{display:block;font-size:9px;color:#7A8797;margin-top:1px;}
.sh-m-va__avg{display:inline-flex;align-items:center;gap:3px;flex:none;padding:2px 6px;border:1px solid #F5D9A8;border-radius:999px;
  background:#FFF6E5;font-style:normal;font-size:8.5px;font-weight:600;color:#8A6B22;}
/* the connector doubles as the conversion label, so it costs no extra row */
.sh-m-va__lk{display:flex;align-items:center;gap:7px;height:14px;margin-left:14px;}
.sh-m-va__lk i{width:1px;height:100%;background:#D3DDE7;}
.sh-m-va__lk span{font-size:8.5px;font-weight:600;color:#7A8797;}
.sh-m-va .sh-va-note{padding:6px 12px;font-size:10px;}
/* recognition: one column of people, a narrower bar to keep the names whole */
.sh-m-rc__hd{padding:9px 12px;border-bottom:1px solid #E6EDF4;}
.sh-m-rc__flt{grid-template-columns:1fr;}
.sh-m-rc__flt .sh-obtn{justify-content:center;height:30px;}
.sh-m-rc .sh-rc-bar{width:46px;}
/* 32px rows, not 33: eight people clear the fade and the ninth runs under it,
   which is the app's own point that this table has no bottom. */
.sh-m-rc .sh-rc-row{min-height:32px;}
.sh-m-rc .sh-rc-who b{font-size:11px;}
/* articles and forms: the list alone, the reader being its own screen on a phone */
.sh-m-ar__hd,.sh-m-fo__hd{padding:11px 12px 10px;border-bottom:1px solid #E6EDF4;}
.sh-m-ar .sh-ar-flt,.sh-m-fo .sh-fo-flt{padding:10px 12px;}
.sh-m-fo__hd .sh-fo-lhd__t{display:flex;align-items:center;gap:6px;color:#2A7FA0;}
.sh-m-ar .sh-ar-it,.sh-m-fo .sh-fo-it{padding:9px 12px 9px 11px;}
.sh-m-ar .sh-ar-it__t{white-space:normal;}
.sh-m-ar .sh-ar-it__s,.sh-m-fo .sh-fo-it__s{white-space:normal;}
/* performance: the trend panel keeps its switch, which wraps under the title */
.sh-m-pf__hd{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px 12px 11px;}
.sh-m-pf__seg{align-self:stretch;justify-content:space-between;}
.sh-m-pf__seg span{flex:1;justify-content:center;padding:5px 6px;}
/* motion */
html.js .sh-a{opacity:0;transform:translateY(8px);}
.sh-pop{display:inline-block;}
html.js .sh-pop{opacity:0;transform:scale(.4);}
.shot.is-on .sh-a{animation:shIn .55s var(--ease) forwards;animation-delay:calc(var(--d,0)*1ms);}
.shot.is-on .sh-pop{animation:shPop .42s cubic-bezier(.34,1.5,.64,1) forwards;animation-delay:calc(var(--d,0)*1ms);}
.shot.is-on .sh-swap .sh-chip--dash{animation:shOut .3s var(--ease) forwards;animation-delay:calc(var(--d,0)*1ms);}
@keyframes shIn{to{opacity:1;transform:none;}}
@keyframes shPop{to{opacity:1;transform:none;}}
@keyframes shOut{to{opacity:0;}}