@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --bg:#F6F4F7; --panel:#FFFFFF; --panel2:#FBFAFC; --sunk:#F0ECF2;
  --ink:#1E1523; --ink2:#5A4E63; --ink3:#857A8E;
  --line:#E4E0E7; --line2:#F0ECF2;
  --brand:#2A1B33; --brand2:#41294F; --brandInk:#F2ECF5; --brandDim:#B09CBB;
  --accent:#F45F04; --accent2:#B84500; --accentInk:#FFFFFF; --accentSoft:rgba(244,95,4,.14);
  --c1:#1668A5; --c2:#E06100; --c3:#7A5AA8;
  --kLeave:#1668A5; --kWfh:#4C79CF; --kAdv:#A8720C; --kLtr:#7A5AA8;
  --kAtt:#0F7A8E; --kPay:#B0243C; --kSet:#8A5A12;
  --good:#1F7A4D; --warn:#A8720C; --bad:#B0243C;
  --goodBg:#E6F1EB; --warnBg:#F8F0DE; --badBg:#F9E8EC;
  /* Three shadows, not one: a hairline to seat the panel, a close soft one
     to give it thickness, and a wide faint one to lift it off the ground.
     A single blur reads as a drop shadow; three read as an object. */
  --shadow:0 1px 2px rgba(30,21,35,.04), 0 2px 6px -2px rgba(30,21,35,.06), 0 14px 32px -18px rgba(30,21,35,.22);
  --lift:0 2px 4px -1px rgba(30,21,35,.06), 0 12px 26px -8px rgba(30,21,35,.16);
  /* Referenced by four rules and defined by none until now. */
  --card:#FFFFFF;
  --railLabel:#F2A25A;
  --acctColor:#0F9D75; --acctColorOn:#0B7A5C; --acctInk:#FFFFFF;
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15101A; --panel:#1E1826; --panel2:#241D2D; --sunk:#191320;
    --ink:#EFEAF2; --ink2:#AEA3B8; --ink3:#837895;
    --line:#332A3D; --line2:#262032;
    --brand:#1E1424; --brand2:#31203C; --brandInk:#F2ECF5; --brandDim:#A995B4;
    --accent:#F4741F; --accent2:#FF9350; --accentInk:#20100A; --accentSoft:rgba(244,116,31,.18);
    --c1:#3A8CC9; --c2:#DC5A08; --c3:#9578CE;
    --kLeave:#4A9BD8; --kWfh:#7FA6EC; --kAdv:#D19A2E; --kLtr:#9578CE;
    --kAtt:#45B0C4; --kPay:#E0697F; --kSet:#C79A4E;
    --good:#4FB07A; --warn:#D19A2E; --bad:#E0697F;
    --goodBg:#152820; --warnBg:#2A2317; --badBg:#2C1A1E;
    --shadow:0 1px 2px rgba(0,0,0,.34), 0 8px 24px -16px rgba(0,0,0,.7);
    --lift:0 2px 4px -1px rgba(0,0,0,.4), 0 12px 26px -8px rgba(0,0,0,.6);
    --card:#1E1826;
  }
}
:root[data-theme="dark"]{
  --bg:#15101A; --panel:#1E1826; --panel2:#241D2D; --sunk:#191320;
  --ink:#EFEAF2; --ink2:#AEA3B8; --ink3:#837895;
  --line:#332A3D; --line2:#262032;
  --brand:#1E1424; --brand2:#31203C; --brandInk:#F2ECF5; --brandDim:#A995B4;
  --accent:#F4741F; --accent2:#FF9350; --accentInk:#20100A; --accentSoft:rgba(244,116,31,.18);
  --c1:#3A8CC9; --c2:#DC5A08; --c3:#9578CE;
  --kLeave:#4A9BD8; --kWfh:#7FA6EC; --kAdv:#D19A2E; --kLtr:#9578CE;
  --kAtt:#45B0C4; --kPay:#E0697F; --kSet:#C79A4E;
  --good:#4FB07A; --warn:#D19A2E; --bad:#E0697F;
  --goodBg:#152820; --warnBg:#2A2317; --badBg:#2C1A1E;
  --shadow:0 1px 2px rgba(0,0,0,.34), 0 8px 24px -16px rgba(0,0,0,.7);
  --lift:0 2px 4px -1px rgba(0,0,0,.4), 0 12px 26px -8px rgba(0,0,0,.6);
  --card:#1E1826;
}

/* One identity across all three companies: CorpLex One is the app, and the company
   is a line under the mark. Only payslips and letters carry a company's own
   letterhead. Chart colours stay shared so a figure means the same thing everywhere. */

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;font-size:15px;line-height:1.5;font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-family:'Newsreader','Bodoni Moda',Georgia,serif;font-weight:500;text-wrap:balance;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--c1);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- login ---------- */
#login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--panel)}
#login .brandside{background:var(--brand);color:var(--brandInk);padding:56px 48px;display:flex;flex-direction:column;justify-content:space-between;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 34px)}
#login .brandside .mark{padding-top:14px}
#login .brandside .mark img{display:block;width:180px;height:auto}
#login .brandside .pitch{font-family:'Newsreader','Bodoni Moda',Georgia,serif;font-size:34px;line-height:1.2;margin-top:auto}
#login .brandside .sub{color:var(--brandDim);margin-top:14px;font-size:14px}
#login .brandside .foot{color:var(--brandDim);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-top:40px}
#login .formside{display:flex;align-items:center;justify-content:center;padding:40px 32px}
#login .form{width:100%;max-width:340px}
#login h1{font-size:26px;margin-bottom:4px}
#login .lead{color:var(--ink2);margin:0 0 26px}
label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel2);color:var(--ink);font:inherit;
  /* after the shorthand, which would otherwise pull 11px down from label{} */
  font-size:14px;letter-spacing:normal;text-transform:none}
input:focus,select:focus{border-color:var(--c1);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c1) 18%,transparent)}
.field{margin-bottom:16px}
.btn{border:1px solid var(--accent);background:var(--accent);color:var(--accentInk);padding:10px 16px;border-radius:8px;font-weight:600;font-size:15px}
.btn:hover{filter:brightness(.93)}
.btn.wide{width:100%}
.btn.ghost{background:transparent;color:var(--ink2);border-color:var(--line)}
.btn.ghost:hover{background:var(--sunk);color:var(--ink)}
.btn[disabled]{opacity:.42;cursor:not-allowed;filter:none}
a.btn{display:inline-block;text-decoration:none;line-height:1.25}
.demonote{margin-top:18px;padding:11px 13px;border:1px dashed var(--line);border-radius:8px;color:var(--ink2);font-size:12.5px;background:var(--panel2)}
.demonote b{color:var(--ink);font-weight:500}

/* ---------- app shell ---------- */
#app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.rail{background:var(--brand);color:var(--brandInk);padding:20px 14px;display:flex;flex-direction:column;gap:22px;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 1px,transparent 1px 34px);
  position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;overscroll-behavior:contain;z-index:30}
.rail::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px}
.rail .mark{padding:8px 8px 0;cursor:pointer;border-radius:8px;transition:opacity .12s}
.rail .mark:hover{opacity:.82}
.appmark{display:flex;align-items:baseline;gap:7px}
.appmark img{display:block;width:118px;height:auto;position:relative;top:6px}
.appmark .one{position:relative;padding-left:9px;font-family:'Bodoni Moda','Didot',Georgia,serif;
  font-size:25px;line-height:1;font-weight:400;color:var(--brandInk);letter-spacing:.01em}
.appmark .one::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:23px;background:currentColor;opacity:.3}
.appmark.big{gap:10px}
.appmark.big img{width:172px;top:9px}
.appmark.big .one{font-size:36px;padding-left:13px}
.appmark.big .one::before{height:32px}
.appmark .crown{position:absolute;right:13px;transform:translateX(50%);
  bottom:calc(100% - 4px);width:19px;height:auto;display:block;color:var(--accent)}
.appmark.big .crown{width:27px;bottom:calc(100% - 6px);right:19px}
.markco{margin:11px 0 0 1px;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--railLabel);font-weight:600}
.rail nav{display:flex;flex-direction:column;gap:2px}
.rail .navlabel{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--railLabel);font-weight:600;padding:14px 8px 6px;display:flex;align-items:center;gap:9px}
.rail .navlabel::after{content:'';flex:1;height:1px;background:currentColor;opacity:.28}
.rail button.nav{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;color:var(--brandDim);
  padding:8px 9px;border-radius:7px;font-size:13.5px}
.rail button.nav:hover{background:rgba(255,255,255,.07);color:var(--brandInk)}
.rail button.nav[aria-current="true"]{background:var(--accentSoft);color:#fff;font-weight:500;box-shadow:inset 3px 0 0 var(--accent)}
.rail .who{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding-top:14px;font-size:12px;color:var(--brandDim)}
.rail .who b{display:block;color:var(--brandInk);font-size:13.5px;font-weight:500}
.rail .who .out{display:block;margin-top:10px;background:none;border:1px solid rgba(255,255,255,.2);color:var(--brandDim);
  padding:5px 10px;border-radius:6px;font-size:12px}
.rail .who .out:hover{color:#fff;border-color:rgba(255,255,255,.45)}

main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:12px 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topbar .ttl{font-family:'Newsreader','Bodoni Moda',Georgia,serif;font-size:19px;margin-right:auto}
.topbar .ttl small{display:block;font-family:'IBM Plex Sans',sans-serif;font-size:11.5px;color:var(--ink3);letter-spacing:.04em}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.seg button{background:none;border:0;padding:6px 12px;font-size:12.5px;color:var(--ink2);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--brand);color:var(--brandInk)}
.seg.halfseg{display:grid;grid-template-columns:1fr 1fr;width:100%;align-self:stretch}
.seg.halfseg button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 14px;text-align:left;
  font-size:14px;font-weight:600;color:var(--ink)}
.seg.halfseg button span{font-size:12px;font-weight:400;color:var(--ink3)}
.seg.halfseg button[aria-pressed="true"]{background:var(--accentSoft);color:var(--accent2)}
.seg.halfseg button[aria-pressed="true"] span{color:var(--accent2);opacity:.8}
.seg.segbig{align-self:flex-start}
.seg.segbig button{padding:9px 20px;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px}
.segn{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:99px;background:var(--warn);color:#fff;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.seg.segbig button[aria-pressed="true"] .segn{background:var(--accent);color:var(--accentInk)}
.conbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--brand);background:var(--brand);color:var(--brandInk);
  padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:600}
.conbtn:hover{filter:brightness(1.18)}
.conbtn svg{opacity:.8}
.conbtn.on{background:var(--accent);border-color:var(--accent);color:var(--accentInk)}
.acctbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--acctColor);background:var(--acctColor);color:var(--acctInk);
  padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:600}
.acctbtn:hover{filter:brightness(1.12)}
.acctbtn svg{opacity:.85}
.acctbtn.on{background:var(--acctColorOn);border-color:var(--acctColorOn)}
.conbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--brand);color:var(--brandInk);
  border-radius:var(--r);padding:12px 16px;box-shadow:var(--shadow)}
.conbar h2{font-family:'Newsreader','Bodoni Moda',Georgia,serif;font-size:19px;font-weight:500;margin:0}
.conbar .cwho{color:var(--brandDim);font-size:12.5px}
.conbar .ctabs{margin-left:auto}
.conbar .cback{flex:none}
.conbar .ctabs{display:inline-flex;gap:3px;background:rgba(255,255,255,.09);border-radius:9px;padding:3px}
.conbar .ctabs button{background:none;border:0;color:var(--brandDim);padding:6px 13px;border-radius:7px;font-size:13px}
.conbar .ctabs button:hover{color:var(--brandInk);background:rgba(255,255,255,.09)}
.conbar .ctabs button[aria-current="true"]{background:var(--accent);color:var(--accentInk);font-weight:600}
.conbar .ctabs button[data-csec="accounts"]{color:#7BE0BC}
.conbar .ctabs button[data-csec="accounts"][aria-current="true"]{background:var(--acctColor);color:var(--acctInk)}
.conbar .cback{background:none;border:1px solid rgba(255,255,255,.28);color:var(--brandInk);padding:6px 12px;border-radius:8px;font-size:12.5px}
.conbar .cback:hover{background:rgba(255,255,255,.1)}
.pick{display:flex;align-items:center;gap:7px}
.pick select{width:auto;max-width:220px;padding:6px 9px;font-size:12.5px;border-radius:8px;background:var(--panel);text-overflow:ellipsis}
/* A cap so a line of prose stays readable on a wide monitor; 1560 was set
   when the widest screen in the office was smaller than the ones on the desks
   now, and it left a blank strip down the right of every staff page. */
.content{padding:22px 24px 60px;display:flex;flex-direction:column;gap:18px}

/* ---------- pieces ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.panel > header{padding:14px 18px;border-bottom:1px solid var(--line2);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.panel > header h3{font-size:16.5px}
.panel > header .hint{color:var(--ink3);font-size:12px;margin-left:auto}
.pad{padding:18px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Was align-items:start. Panels in a row stretch to the tallest, and what
   closes the card goes to the bottom of it. */
/* Asking for leave is three short fields; reading what you asked for is a
   table of six columns. An equal third each gave the form width it had no use
   for and the table less than it needed, so the form gives up 40% of its
   share and the two beside it take it. */
.grid.g3.lv3{grid-template-columns:0.6fr 1.2fr 1.2fr}
@media (max-width:1100px){ .grid.g3.lv3{grid-template-columns:minmax(0,1fr)} }
/* and in that narrower box the two dates sit one above the other rather than
   squeezing a day, a month and a year into half of it */
.rqdates{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
/* One shape for the three tables on Team performance: a second line under a
   name for the thing that needs saying about it, and a leaver greyed. */
/* The one figure the page is about. Everything else on the strip is working
   towards it, so it carries the accent and the others do not. */
.teamtab th[data-ts]{cursor:pointer;user-select:none}
.teamtab th[data-ts]:hover{color:var(--ink)}
.teamtab th .tsi{font-style:normal;margin-left:4px;color:var(--accent)}
.strip .stat.lead{background:var(--accentSoft)}
.strip .stat.lead .k{color:var(--accent2)}
.strip .stat.lead .v{color:var(--accent2)}
.deptbar{display:flex;justify-content:flex-end;margin:0 0 14px}
.deptbar .seg{margin-left:0 !important}
.teamtab .tsub{display:block;font-size:11.5px;color:var(--ink3);font-weight:400;
  white-space:normal;line-height:1.35;margin-top:1px}
.teamtab td:first-child,.teamtab td:nth-child(2){white-space:normal;line-height:1.35}
.teamtab tr.tgone td{color:var(--ink3)}
.teamtab tr.tme td{background:var(--panel2);font-weight:500}
.monthpick{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2)}
.monthpick select{min-width:170px}
.srdrift{border-left:3px solid var(--warn);background:var(--sunk);border-radius:0 8px 8px 0;
  padding:12px 15px;margin:14px 0 0;font-size:13px;color:var(--ink2)}
.srdrift > b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:6px}
.srdrift p{margin:0 0 6px}
.srdrift p span{color:var(--ink);font-weight:600}
.srdrift em{display:block;font-style:normal;color:var(--ink3);font-size:12.5px;margin-top:8px}
.srfail{border-left:3px solid var(--bad);background:var(--badBg);color:var(--ink);
  padding:11px 14px;border-radius:0 8px 8px 0;margin:0 0 12px;font-size:13.5px}
.srfail b{color:var(--bad)}
.srfail em{display:block;font-style:normal;color:var(--ink2);font-size:12.5px;margin-top:5px}
.grid.gtop > .panel{display:flex;flex-direction:column}
.grid.gtop > .panel > .pad{flex:1;display:flex;flex-direction:column}
.grid.gtop > .panel > .tw{flex:1}
.grid.gtop > .panel > .cap{margin-top:auto}
.grid.gtop > .panel > .pad > .note:last-child,
.grid.gtop > .panel > .pad > .cap:last-child{margin-top:auto}
.grid.hrow > .panel{display:flex;flex-direction:column;height:auto;min-height:180px}
.hbody{flex:1;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.hbody .feed{margin-top:-2px}
.hfoot{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--line2);color:var(--ink2);font-size:12.5px}
.cistack{display:flex;flex-direction:column;gap:9px}
.cirow{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.cirow .btn{width:100%}
.grid.hrow .cibox{min-width:0}
.grid.hrow .cihint{max-width:none;font-size:12px}
.grid.hrow .anns{gap:12px}
.grid.hrow .anns li p{max-width:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grid.hrow .cap{margin-top:auto}
@media(max-width:940px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.strip.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.strip.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:620px){ .strip.two{grid-template-columns:minmax(0,1fr)} }
/* And three, for a strip that has three cards on it. The grid was fixed at
   four, so the documents desk — which lost its Company documents card when
   the licences came off (row 8) — was three cards and a quarter of the row
   left empty. */
.strip.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media screen and (max-width:1400px){.strip.five{grid-template-columns:repeat(3,minmax(0,1fr))}
  .strip.five .stat:nth-child(3n){border-right:0}}
@media(max-width:840px){.strip,.strip.five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip.five .stat:nth-child(3n){border-right:1px solid var(--line2)}}
.stat{padding:15px 18px;border-right:1px solid var(--line2);display:flex;flex-direction:column;gap:5px;min-width:0}
.strip .stat:last-child{border-right:0}
.stat .k{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.stat .v{font-family:'IBM Plex Sans',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:25px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.stat .v .cur{font-size:12px;color:var(--ink3);margin-right:4px;letter-spacing:.04em}
.stat .n{font-size:12px;color:var(--ink2)}

.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:99px;font-size:11.5px;font-weight:500;white-space:nowrap}
.pill.good{background:var(--goodBg);color:var(--good)}
.pill.warn{background:var(--warnBg);color:var(--warn)}
.pill.bad{background:var(--badBg);color:var(--bad)}
.pill.mute{background:var(--sunk);color:var(--ink3)}
.pill .dt{width:6px;height:6px;border-radius:99px;background:currentColor}

table{width:100%;border-collapse:collapse;font-size:14px}
.tw{overflow-x:auto}
th{text-align:left;font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink);
  padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel2);position:sticky;top:0}
td{padding:9px 12px;border-bottom:1px solid var(--line2);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--panel2)}
td.r,th.r{text-align:right}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.005em}
tr.tot td{border-top:2px solid var(--line);font-weight:600;background:var(--panel2)}
.cap{color:var(--ink3);font-size:12px;padding:10px 18px;border-top:1px solid var(--line2)}
/* v1.89.2 — Work from home on a desk (Avin: "keep the dates width less and
   put them same row, next will be reason in a big box like a paragraph. This
   section should be 30%, 70% should be view my requests"). */
.wfhgrid{grid-template-columns:minmax(300px,3fr) minmax(0,7fr);align-items:stretch}
.wfhgrid > .panel{display:flex;flex-direction:column}
/* the button already says who it goes to; the hint only wrapped under the title */
.wfhform > header .hint{display:none}
.wfhform .rqdates{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wfhform .rqdates .field{min-width:0}
.wfhform .rqdates input{min-width:0;width:100%;padding-left:9px;padding-right:6px;font-size:13.5px}
.wfhform textarea{resize:vertical;min-height:132px;line-height:1.55;font:inherit}
.tw-wfl{max-height:62vh;overflow:auto}
.wfl{border-collapse:separate;border-spacing:0;table-layout:fixed}
.wfl thead{position:sticky;top:0;z-index:2;background:var(--panel2);box-shadow:0 -2px 0 var(--panel2),0 1px 0 var(--line)}
.wfl thead th{position:static;background:var(--panel2)}
.wfl td.why{color:var(--ink2);line-height:1.5;white-space:normal;overflow-wrap:break-word}


.meter{height:9px;border-radius:99px;background:var(--sunk);overflow:hidden;display:flex;gap:2px}
.meter i{display:block;height:100%}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block}

.bars{display:flex;flex-direction:column;gap:9px}
.bars .row{display:grid;grid-template-columns:minmax(190px,250px) minmax(0,1fr) 108px;gap:12px;align-items:center;font-size:13px}
@media(max-width:700px){.bars .row{grid-template-columns:130px minmax(0,1fr) 92px}}
.bars .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
.bars .track{display:block;background:var(--sunk);border-radius:4px;height:16px;overflow:hidden}
.bars .fill{display:block;height:100%;border-radius:0 4px 4px 0}
.bars .row.me .nm{color:var(--ink);font-weight:600}
.bars .row.me .track{box-shadow:0 0 0 2px color-mix(in srgb,var(--c1) 45%,transparent)}
.bars .val{text-align:right;font-family:'IBM Plex Sans',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:12.5px}
.rk{display:inline-block;width:18px;color:var(--ink3);font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:12px}

svg .grid line{stroke:var(--line2);stroke-width:1}
svg .ax{fill:var(--ink3);font-size:10.5px;font-family:'IBM Plex Sans',system-ui,sans-serif}
svg .axl{fill:var(--ink2);font-size:11px;font-family:'IBM Plex Sans',sans-serif}
svg .thr{stroke:var(--ink3);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
svg .thrl{fill:var(--ink3);font-size:9.5px;font-family:'IBM Plex Sans',sans-serif}
svg .dl{fill:var(--ink);font-size:10.5px;font-family:'IBM Plex Sans',system-ui,sans-serif}
.chartwrap{position:relative}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:60;
  background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:99px;font-size:13.5px;font-weight:500;
  box-shadow:0 6px 24px -8px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* the download icons at the right of the invoices header */
.expbar{display:inline-flex;align-items:center;gap:4px;margin-left:auto}
.expbar .exph{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);
  font-weight:600;margin-right:5px}
.expbtn{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);color:var(--ink2);font:inherit;font-size:12px;font-weight:600;
  letter-spacing:.04em;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.expbtn:hover{border-color:var(--accent);color:var(--accent2);background:var(--panel2)}
.expbtn svg{width:15px;height:15px;flex:none}
.rawbox{margin:0 0 14px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);overflow:hidden}
.rawbox header{padding:9px 13px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.rawbox header b{font-size:13px}
.rawbox textarea{width:100%;border:0;background:transparent;color:var(--ink2);font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11.5px;line-height:1.5;padding:11px 13px;resize:vertical;min-height:120px;display:block}
.tip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-108%);background:var(--ink);color:var(--bg);
  padding:7px 10px;border-radius:7px;font-size:12px;white-space:nowrap;z-index:5;box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
.tip b{font-family:'IBM Plex Sans',system-ui,sans-serif}

.kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 16px;font-size:13px}
.kv dt{color:var(--ink2);margin:0}
.kv dd{margin:0;font-variant-numeric:tabular-nums;text-align:right;font-weight:500}
.kv .sep{grid-column:1/-1;height:1px;background:var(--line2);margin:3px 0}
.kv dd.big{font-size:16px}

.kv.two{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;column-gap:16px}
.kv.wide{grid-template-columns:150px minmax(0,1fr);gap:11px 18px;font-size:13.5px}
.kv.wide dt{font-weight:600;color:var(--ink)}
.kv.wide dd{text-align:left;font-weight:400;font-variant-numeric:normal;color:var(--ink2);line-height:1.55}

.note{border-left:3px solid var(--c2);background:var(--panel2);padding:11px 14px;border-radius:0 8px 8px 0;color:var(--ink2);font-size:12.5px}
.note b{color:var(--ink);font-weight:500}
.calc{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:20px}
@media(max-width:760px){.calc{grid-template-columns:minmax(0,1fr)}}
.drop{border:1.5px dashed var(--line);border-radius:var(--r);padding:26px;text-align:center;color:var(--ink2);background:var(--panel2)}
.drop .big{font-family:'Newsreader','Bodoni Moda',Georgia,serif;font-size:19px;color:var(--ink);margin-bottom:5px}
.steps{counter-reset:s;display:flex;flex-direction:column;gap:0}
.steps li{list-style:none;display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;padding:0 0 16px;position:relative}
.steps li::before{counter-increment:s;content:counter(s);width:22px;height:22px;border-radius:99px;background:var(--brand);color:var(--brandInk);
  display:grid;place-items:center;font-size:11.5px;font-family:'IBM Plex Sans',system-ui,sans-serif}
.steps li::after{content:"";position:absolute;left:11px;top:24px;bottom:2px;width:1px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps li b{grid-column:2;display:block;font-weight:500}
.steps li span{grid-column:2}
.steps span{color:var(--ink2);font-size:12.5px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--panel2);border-radius:99px;padding:3px 10px;font-size:11.5px;color:var(--ink2)}
.chip.in{border-color:color-mix(in srgb,var(--c2) 45%,var(--line));color:var(--c2)}
.kpirow{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:900px){.kpirow{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
#cfOut,#pfOut{display:flex;flex-direction:column;gap:16px}
.feegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* Two cards in a row, the same height: the foot is pushed to the bottom
   rather than following whichever table ran shorter. */
.fee{display:flex;flex-direction:column}
.fee .feefoot{margin-top:auto}
.feegrid.one{grid-template-columns:minmax(0,1fr)}
@media(max-width:820px){.feegrid{grid-template-columns:minmax(0,1fr)}}
.fee{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.fee.best{border-color:var(--accent);box-shadow:0 0 0 2px var(--accentSoft)}
.feehead{padding:8px 14px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:10px;justify-content:space-between}
.feehead.stripe{background:var(--brand);color:var(--brandInk)}
.feehead.pos{background:var(--accent);color:var(--accentInk)}
.fee table{font-size:13.5px}
@media(max-width:620px){
  .fee table{table-layout:auto!important;font-size:13px}
  .fee colgroup col{width:auto!important}
  .fee th,.fee td{padding:6px 9px}
}
.fee th{padding:6px 12px;background:var(--panel2)}
.fee td{padding:6px 12px}
.fee tbody tr:hover td{background:transparent}
.feefoot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 12px;
  border-top:1px solid var(--line);background:var(--panel2);font-size:12.5px;color:var(--ink2)}
.feefoot b{color:var(--ink);font-size:13.5px}
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:32px;
  border:1px solid var(--line);background:var(--panel);border-radius:8px;color:var(--ink2)}
.bell:hover{color:var(--ink);border-color:var(--ink3)}
.bellpop{position:absolute;top:52px;right:96px;z-index:60;width:340px;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;box-shadow:0 18px 40px -16px rgba(0,0,0,.45);overflow:hidden}
.bellpop{max-height:min(70vh,560px);overflow-y:auto}
.mepop{position:absolute;top:52px;right:18px;z-index:61;width:252px;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;box-shadow:0 18px 40px -16px rgba(0,0,0,.45);
  padding:6px 0 0;display:flex;flex-direction:column}
.mepop .mprows{display:flex;flex-direction:column}
.mepop .mprow{display:flex;align-items:baseline;gap:10px;padding:7px 15px;width:100%;
  background:none;border:0;text-align:left;font:inherit}
.mepop .mprow > span{flex:0 0 82px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.mepop .mprow > b{flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--ink);
  overflow-wrap:anywhere}
/* The name is the way back to My profile, so it has to look like it does
   something. The other three are facts, not controls. */
.mepop .mpname{cursor:pointer}
.mepop .mpname > b{color:var(--accent2)}
.mepop .mpname:hover{background:var(--accentSoft)}
/* Sign out was a line of quiet grey text, left-aligned, under three rows of
   quiet grey text — so it read as a fourth fact about you rather than the one
   thing on the panel you can press.
     'While clicking on Small round profile, the Signout is not clearly
      visible. Make it centered, with a box and bold the font'        -- Avin
   Its own box, centred, bold. */
.mepop .mprows{border-bottom:1px solid var(--line2);padding-bottom:4px}
.mepop .mpout{margin:10px 12px 12px;padding:10px 15px;width:calc(100% - 24px);
  border:1px solid var(--line);border-radius:9px;background:var(--panel2);
  text-align:center;font:inherit;font-size:13.5px;font-weight:700;
  letter-spacing:.01em;color:var(--ink);cursor:pointer}
.mepop .mpout:hover{background:var(--warnBg);border-color:var(--warn);color:var(--warn)}
.mepop .mpout:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mepop .buildno{display:block;padding:7px 15px 9px;border-top:1px solid var(--line2);
  font-size:10.5px;letter-spacing:.03em;color:var(--ink3)}
.theseg button{display:flex;align-items:center;justify-content:center;padding:0;width:34px}
/* A word tells you which one is on even when the pill behind it is faint. An
   icon does not, so the one that is off is dimmed as well as unfilled. */
.theseg button svg{opacity:.5}
.theseg button[aria-pressed="true"] svg{opacity:1}
@media(max-width:560px){ .mepop{right:10px;width:min(252px,calc(100vw - 20px))} }
.bellpop .bprow{display:flex;align-items:stretch;border-bottom:1px solid var(--line2)}
.bellpop .bprow > button:first-child{flex:1;border-bottom:0}
.bellpop .bpok{flex:0 0 40px;border-left:1px solid var(--line2);display:flex;align-items:center;justify-content:center;
  color:var(--ink3);padding:0}
.bellpop .bpok:hover{background:var(--goodBg);color:var(--good)}
.bellpop .bphead b{margin-left:auto;font-size:11px;letter-spacing:0;background:var(--accentSoft);color:var(--accent2);
  border-radius:99px;padding:1px 8px;text-transform:none}
.bellpop .bphead button{width:auto;padding:0;margin-left:10px;font-size:11px;letter-spacing:0;text-transform:none;
  color:var(--ink3);text-decoration:underline;display:inline}
.bellpop .bphead button:hover{color:var(--accent2);background:none}
.bellpop .bphead{padding:9px 14px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);
  display:flex;align-items:center;position:sticky;top:0;background:var(--panel);z-index:2;
  background:var(--panel2);border-bottom:1px solid var(--line2)}
.bellpop button{display:flex;gap:10px;width:100%;text-align:left;border:0;background:none;padding:11px 14px;
  border-bottom:1px solid var(--line2);align-items:flex-start}
.bellpop button:hover{background:var(--panel2)}
.bellpop button i{width:7px;height:7px;border-radius:99px;margin-top:6px;flex:0 0 auto}
.bellpop button i.warn{background:var(--accent)} .bellpop button i.good{background:var(--good)} .bellpop button i.bad{background:var(--bad)}
.bellpop button b{display:block;font-size:13px;font-weight:600;line-height:1.35}
.bellpop button em{display:block;font-style:normal;font-size:12px;color:var(--ink2);margin-top:2px}
/* Its own line, always. Inline it sat beside a short subtitle and wrapped
   under a long one, so a column of rows had it in two different places. */
.bellpop button em .bpdesk{display:block;width:fit-content;margin:5px 0 0;padding:0 7px;border-radius:99px;
  background:var(--panel2);border:1px solid var(--line2);color:var(--ink3);
  font-size:10.5px;line-height:16px;white-space:nowrap}
.bellpop .bpfoot{padding:9px 14px;font-size:11.5px;color:var(--ink3);background:var(--panel2)}
.bell .dot{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;
  background:var(--accent);color:var(--accentInk);font-size:10.5px;font-weight:600;display:grid;place-items:center;
  font-family:'IBM Plex Sans',system-ui,sans-serif}
/* No cap at all. A table is never too wide to read, only too narrow, and
   everything this class is put on is a table. */
main.wide .content{max-width:none}
main.fixed{height:100vh;overflow:hidden}
main.fixed .content{flex:1;min-height:0;overflow:hidden;max-width:none;padding-bottom:18px}
.paygrid{display:grid;grid-template-columns:minmax(330px,390px) minmax(0,1fr);gap:14px;height:100%;min-height:0}
.paycol{min-height:0;display:flex;flex-direction:column;gap:14px;overflow-y:auto;padding-right:3px}
.paycol > .panel{flex:0 0 auto}
.paycol.left{overflow:hidden}
.paycol.left > .panel.payform{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.formbody{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:18px}
.formbody .field{margin:0}
.formbody label i{color:var(--bad);font-style:normal}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.badge{margin-top:7px;font-size:12px;line-height:1.5}
.combo{position:relative}
.combolist{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);background:var(--panel);
  border:1px solid var(--line);border-radius:9px;box-shadow:0 12px 28px -12px rgba(0,0,0,.35);overflow:hidden;max-height:232px;overflow-y:auto}
.combolist button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;
  padding:8px 11px;font-size:13px;border-bottom:1px solid var(--line2)}
.combolist button:last-child{border-bottom:0}
.combolist button:hover{background:var(--panel2)}
.combolist button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combolist i{font-style:normal;font-size:11px;font-family:'IBM Plex Sans',system-ui,sans-serif;white-space:nowrap}
.combolist i.ok{color:var(--good)}
.combolist i.due{color:var(--bad)}
.combolist .empty{padding:10px 11px;color:var(--ink3);font-size:12.5px}
.filebtn{display:flex;align-items:center;gap:7px;width:100%;padding:6px 10px;border:1px dashed var(--line);
  background:var(--panel2);border-radius:7px;color:var(--ink2);font-size:12.5px}
.filebtn:hover{border-color:var(--accent);color:var(--ink)}
.filebtn span{margin-left:auto;color:var(--ink3);font-size:11.5px}
.formbody .btn.wide{margin-top:auto;padding:9px 16px}
.paycol.right{overflow:hidden}
.paycol table th,.paycol table td{padding:8px 10px;font-size:13px}
.paycol table th.act,.paycol table td.act{padding-left:12px}
.paycol.right > .panel{display:flex;flex-direction:column;min-height:0}
.paycol.right > .panel.grow{flex:1 1 0}
.paycol.right > .panel .tw{flex:1 1 auto;min-height:0;overflow:auto}
.paycol.right > .panel > .pad{overflow-y:auto;min-height:0}
.paycol th.act,.paycol td.act{position:sticky;right:0;background:var(--panel);box-shadow:-8px 0 10px -10px rgba(0,0,0,.35);text-align:right}
.paycol thead th.act{background:var(--panel2)}
.paycol tbody tr:hover td.act{background:var(--panel2)}
.paycol.left > .panel.payform{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.paycol::-webkit-scrollbar{width:8px}
.paycol::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.paycol::-webkit-scrollbar-track{background:transparent}
@media(max-width:1000px){
  main.fixed{height:auto;overflow:visible}
  .paycol.left,.paycol.right{overflow:visible}
  .formbody{overflow:visible}
  main.fixed .content{height:auto;overflow:visible}
  .paygrid{grid-template-columns:minmax(0,1fr);height:auto}
  .paycol{overflow:visible}
}
.invpanel{display:flex;flex-direction:column;min-height:0;height:100%}
.filterbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 18px;border-bottom:1px solid var(--line2);background:var(--panel2)}
.filterbar .ff{width:auto;padding:5px 9px;font-size:12.5px;border-radius:7px;background:var(--panel)}
.filterbar input.ff{width:210px}
.filterbar .fclear{padding:5px 11px;font-size:12.5px;margin-left:auto}
.filterbar .fclear.off{opacity:.45;pointer-events:none}
.invtable th.sortable{cursor:pointer;user-select:none}
.invtable th.sortable:hover{color:var(--ink)}
.invtable th.sorted{color:var(--accent2)}
.invtable th .sar{margin-left:4px;font-size:8px;vertical-align:1px}
.invscroll{flex:1 1 auto;min-height:0;overflow:auto}
.invtable{font-size:13.5px}
.invtable th{padding:0 9px;height:36px;line-height:36px;vertical-align:middle;white-space:nowrap;
  font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.invtable td{padding:6px 9px}
.invtable td.nw{white-space:nowrap}
/* One line per invoice. Anything that would wrap is cut with the whole value
   on hover — the browser's own tooltip, so it works on a touch device's
   long-press too. */
/* The company name is the one column here worth reading in full, and PR#
   giving up its wrapping is where the room comes from. */
.invtable td.cname{min-width:0;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.invtable td.cname .pill{margin-left:5px}
/* One line, cut. It used to be overflow-wrap:anywhere, which is not narrow —
   it is TALL: one long reference made the whole row three lines deep. The
   hover it already carries says the rest. */
.invtable td.prno,.invtable th.prno{max-width:96px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* The columns that hold a known shape stop being given room to grow into. */
.invtable td,.invtable th{padding-left:8px;padding-right:8px}
.invtable td.s1,.invtable th.s1{padding-left:14px}
.invtable td.n.nw{white-space:nowrap}
.invtable colgroup col.tight{width:1%}
.gtable{table-layout:fixed;width:100%;min-width:820px}
.gtable td.n,.gtable td.r,.gtable th.r,.gtable .netcol{font-variant-numeric:tabular-nums}
.gtable td.gname,.gtable td.gnote{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gtable tr.grp td{background:var(--sunk);color:var(--ink2);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:7px 9px;border-top:1px solid var(--line)}
.gtable tr.sub td{background:var(--panel2);font-weight:600;color:var(--ink2);border-top:1px solid var(--line2)}
.gtable tr.sub td.s1{background:var(--panel2)}
.gtable tr.tot td{background:var(--panel2);font-weight:700;color:var(--ink);border-top:2px solid var(--line)}
.gtable tr.tot td.s1{background:var(--panel2)}
.gtable tr.dimr td{color:var(--ink3)}
.gtable2{width:100%;font-size:13.5px}
.gtable2 td.n,.gtable2 th.r,.gtable2 td.r{font-variant-numeric:tabular-nums}
.invtable td.me{font-weight:600;color:var(--ink)}
.regblock{border-top:1px solid var(--line2)}
.regtable{table-layout:fixed;width:100%;border-collapse:separate;border-spacing:0}
.regtable td{border-bottom:1px solid var(--line2)}
.regtable td.netcol{font-weight:600;color:var(--ink)}
.regtable tr.tot td.netcol{font-weight:700}
@media(min-width:1200px){
  .regblock .tw{overflow:visible}
  .regblock .tw-dgrid, .regblock .tw-rgstr{overflow-x:auto}
  .regbar{position:sticky;top:var(--bandH,56px);z-index:12}
  .regtable thead th{position:sticky;top:var(--underH,95px);z-index:11}
  .regtable thead th.s1,.regtable thead th.s2{z-index:13}
  .invtable.regtable td.s1,.invtable.regtable td.s2{position:static;box-shadow:none}
  .invtable.regtable th.s1,.invtable.regtable th.s2{position:sticky;left:auto;box-shadow:none}
}
@media(max-width:1199px){ .regtable{min-width:1200px} }
.regtable th,.regtable td{overflow:hidden;text-overflow:ellipsis}
.regtable td.s2,.regtable th.s2{left:230px}
.regtable td.nw.s1{white-space:normal}
.regtable .mini{max-width:100%}
.regbar{display:flex;align-items:baseline;gap:12px;padding:9px 18px;background:var(--panel2);border-bottom:1px solid var(--line2)}
.regbar b{font-size:13.5px}
.regbar span{font-size:12px;color:var(--ink3)}
.regbar em{margin-left:auto;font-style:normal;font-size:12.5px;color:var(--ink2)}
.regbar em b{color:var(--ink);font-size:13.5px}
.regbar.grand{background:var(--sunk);border-top:2px solid var(--line);border-bottom:0;padding:12px 18px}
.cotabs{display:flex;align-items:center;gap:3px;padding:9px 14px;background:var(--panel2);
  border-bottom:1px solid var(--line2);flex-wrap:wrap}
.cotabs button{border:1px solid transparent;background:transparent;color:var(--ink2);
  padding:4px 13px;border-radius:99px;font-size:13.5px;font-weight:500;
  display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap}
.cotabs button i{font-style:normal;font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.cotabs button:hover:not([disabled]){background:var(--sunk)}
.cotabs button[aria-selected="true"]{background:var(--brand);color:var(--brandInk);border-color:var(--brand)}
.cotabs button[aria-selected="true"] i{color:var(--brandDim)}
.cotabs button[disabled]{opacity:.42;cursor:default}
.cotabs em{margin-left:auto;font-style:normal;font-size:12.5px;color:var(--ink2);padding-left:10px}
.cotabs em b{color:var(--ink);font-size:13.5px}
/* A table whose columns are set in pixels is as wide as its columns, not as
   wide as the panel — otherwise width:100% scales the pixels straight back
   down and the columns are squeezed exactly as before. */
.cotab.rgstr{width:auto;min-width:100%}
/* The band that names a company on the All tab. The cell carries the colour so
   it runs the full width of a table wider than its panel; the words inside it
   stay at the left edge when that table is scrolled sideways. */
tr.coband > td{padding:0;overflow:visible;background:var(--sunk);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
tr.coband > td > span{position:sticky;left:0;display:inline-flex;align-items:baseline;gap:10px;
  padding:7px 16px 7px 18px}
tr.coband b{font-size:13px}
tr.coband i{font-style:normal;font-size:12px;color:var(--ink3)}
@media(min-width:1200px){
  .cotabs{position:sticky;top:var(--bandH,56px);z-index:12}
  .regblock .cotab thead th{position:sticky;top:var(--underH,99px);z-index:11}
}
select.mini{width:auto;padding:2px 6px;font-size:11.5px;border-radius:6px;background:var(--panel2);border-color:var(--line)}
.invtable tfoot td{position:sticky;bottom:0;background:var(--panel2);border-top:2px solid var(--line);z-index:3}
.invtable th.s1,.invtable td.s1{position:sticky;left:0;z-index:4;background:var(--panel)}
.invtable th.s2,.invtable td.s2{position:sticky;left:94px;z-index:4;background:var(--panel);
  box-shadow:8px 0 10px -10px rgba(0,0,0,.35)}
.invtable thead th.s1,.invtable thead th.s2{z-index:6;background:var(--panel2)}
.invtable tfoot td.s1,.invtable tfoot td.s2{z-index:6;background:var(--panel2)}
.invtable tbody tr:hover td.s1,.invtable tbody tr:hover td.s2{background:var(--panel2)}
.wfbar{display:flex;gap:0;flex-wrap:wrap}
.wfstep{display:flex;align-items:center;gap:9px;padding:9px 16px 9px 12px;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink3);font-size:13px;flex:1 1 180px}
.wfstep:first-child{border-radius:9px 0 0 9px}
.wfstep:last-child{border-radius:0 9px 9px 0}
.wfstep + .wfstep{border-left:0}
.wfstep i{width:22px;height:22px;border-radius:99px;background:var(--sunk);color:var(--ink3);display:grid;
  place-items:center;font-style:normal;font-size:11.5px;font-family:'IBM Plex Sans',system-ui,sans-serif;flex:0 0 auto}
.wfstep.done{color:var(--ink);background:var(--panel)}
.wfstep.done i{background:var(--good);color:#fff}
.wfstep.now{color:var(--ink);background:var(--accentSoft);border-color:var(--accent)}
.wfstep.now i{background:var(--accent);color:var(--accentInk)}
.hidden{display:none!important}
@media(max-width:860px){
  #app{grid-template-columns:minmax(0,1fr)}
  .rail{flex-direction:row;align-items:center;gap:12px;overflow-x:auto;overflow-y:visible;padding:10px 12px;height:auto;top:0}
  .rail nav{flex-direction:row;gap:4px}
  .rail .navlabel,.rail .who .m{display:none}
  .rail .who{margin-top:0;border-top:0;border-left:1px solid rgba(255,255,255,.12);padding:0 0 0 12px;white-space:nowrap}
  #login{grid-template-columns:minmax(0,1fr)}
  #login .brandside{padding:32px 26px}
  #login .brandside .pitch{font-size:26px;margin-top:22px}
}
/* ---------- phone ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;background:var(--panel);
  border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 14px -8px rgba(0,0,0,.28)}
.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:none;border:0;padding:6px 2px;color:var(--ink3);font:inherit;font-size:10.5px;font-weight:600;
  letter-spacing:.01em;position:relative;min-height:50px}
.tabbar button svg{width:22px;height:22px;stroke-width:1.7}
.tabbar button[aria-current="true"]{color:var(--accent2)}
.tabbar .tbdot{position:absolute;top:3px;right:calc(50% - 20px);min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;background:var(--accent);color:var(--accentInk);font-size:10px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center}
.tabbar .tbadd{padding-top:0}
.tbplus{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:var(--accentInk);box-shadow:0 4px 12px -4px color-mix(in srgb,var(--accent) 70%,transparent)}
.tbplus svg{width:22px;height:22px}
.tabbar .tbadd:active .tbplus{transform:scale(.94)}
.tbplus[data-on="1"]{background:var(--accent2);box-shadow:0 0 0 3px var(--accentSoft)}

/* ---- the phone's own three pages ----
   The +, Payroll and More are all the same object: a stack of rows, an icon
   on the left, a label and the answer to the question you had before you
   tapped. One shape for all three, so learning one teaches the others. */
.plist{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;margin-bottom:14px}
.pli{display:flex;align-items:center;gap:13px;padding:14px 15px;border-top:1px solid var(--line2);
  background:none;border-left:0;border-right:0;border-bottom:0;font:inherit;color:var(--ink);
  text-align:left;width:100%;cursor:pointer}
.pli:first-child{border-top:0}
.pli:active{background:var(--sunk)}
.pli[disabled]{opacity:.45;cursor:not-allowed}
.pli .ic{width:38px;height:38px;border-radius:10px;background:var(--sunk);color:var(--ink2);
  display:grid;place-items:center;flex:0 0 auto}
.pli .ic svg{width:19px;height:19px;stroke-width:1.7}
.pli .pt{min-width:0;flex:1 1 auto}
.pli .pt b{display:block;font-weight:600;font-size:15px;line-height:1.3}
.pli .pt i{display:block;font-style:normal;font-size:12.5px;color:var(--ink3);line-height:1.4;margin-top:2px}
.pli .pch{color:var(--ink3);flex:0 0 auto;display:grid;place-items:center}
.pli .pch svg{width:17px;height:17px}
.pli .ponly{flex:0 0 auto;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--accent2);
  background:var(--accentSoft);border-radius:99px;padding:3px 10px}
.pli .ponly.bad{color:var(--bad);background:var(--badBg)}
.mochips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 15px 15px}
/* Sign out is the one destructive thing on the phone, so it is a button of its
   own rather than a row that looks like the eight above it. */
.mout{display:block;width:100%;margin:6px 0 14px;padding:14px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);color:var(--bad);
  font:inherit;font-size:15px;font-weight:700;text-align:center;box-shadow:var(--shadow)}
.mout:active{background:var(--badBg);border-color:var(--bad)}
.mout[disabled]{opacity:.6}
/* A five-row summary is not a table: on a phone a table scrolls its second
   column off the screen and the figures vanish silently. Label left, figure
   right, wrapping where it has to. */
.pfacts{display:flex;flex-direction:column;padding:2px 0 4px}
.pfacts > div{display:flex;align-items:baseline;gap:12px;padding:11px 15px;border-top:1px solid var(--line2)}
.pfacts > div:first-child{border-top:0}
.pfacts span{color:var(--ink2);font-size:14px;white-space:nowrap;flex:0 0 auto}
.pfacts b{margin-left:auto;font-weight:600;font-size:14.5px;text-align:right;font-variant-numeric:tabular-nums}
.pfacts b i{font-style:normal;font-weight:400;color:var(--ink3);font-size:13px}

/* ---- the clock ----
   'Check in check out - very very small box' / 'Clock should show hrs/mins/
    secs' / 'Digital clock on left - next to it check in check out button |
    Below this, Office, WFH, Client in small pills'                  -- Avin
   Seconds set smaller than hours and minutes: the eye reads the number it
   wants and the ticking digit does not drag it back every second. */
.ckbox{margin-bottom:14px}
.ckrow{display:flex;align-items:center;gap:12px;padding:12px 14px 4px}
.ckt{line-height:1;font-variant-numeric:tabular-nums}
.ckt .ckhm{font-size:29px;font-weight:600;letter-spacing:-.02em}
.ckt .cks{font-size:18px;font-weight:500;color:var(--ink3);letter-spacing:-.01em}
.ckt.zero .ckhm,.ckt.zero .cks{color:var(--ink3)}
.ckt small{display:block;font-size:10.5px;font-weight:500;color:var(--ink3);letter-spacing:.05em;
  margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ckt small b{color:var(--ink2);font-weight:700}
.ckgo{margin-left:auto;flex:0 0 auto;border:1px solid var(--accent);background:var(--accent);color:var(--accentInk);
  border-radius:9px;font:inherit;font-size:14.5px;font-weight:700;padding:11px 18px;white-space:nowrap}
.ckgo.out{background:transparent;color:var(--accent2)}
.ckgo[disabled]{opacity:.5}
.ckpills{display:flex;gap:7px;padding:10px 14px 13px}
.ckpill{flex:1 1 0;border:1px solid var(--line);background:var(--panel2);color:var(--ink2);
  border-radius:99px;font:inherit;font-size:12.5px;font-weight:600;padding:6px 4px}
.ckpill[aria-pressed="true"]{border-color:var(--accent);background:var(--accentSoft);color:var(--accent2)}
.ckpill[disabled]{opacity:.55}

/* ---- Today, the two completion rows, announcements ---- */
.hrow2{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-top:1px solid var(--line2)}
.hrow2:first-of-type{border-top:0}
.hdot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto;margin-top:6px}
.hdot.b{background:var(--c1)} .hdot.g{background:var(--good)}
/* A birthday or an anniversary, marked the way the desktop marks it: the
   cake or the medal, and enough of a lift off the panel that it reads as an
   occasion rather than as one more row of admin. */
/* Done for the day. Still on the list, because the list is about today and
   they were on it; just no longer asking to be read. */
.hrow2.done .hcol b,.hrow2.done .hwhen{color:var(--ink3)}
.hrow2.done .pa{opacity:.62}
.hrow2.cel{background:var(--accentSoft)}
.hrow2.cel .hcol b{color:var(--accent2)}
.hcel{flex:0 0 auto;margin-top:1px;color:var(--accent2);display:inline-flex}
.hcel svg{display:block}
.hcol{min-width:0;flex:1 1 auto}
.hcol b{display:block;font-weight:600;font-size:14px;line-height:1.35}
.hcol i{display:block;font-style:normal;font-size:12.5px;color:var(--ink3);line-height:1.4;margin-top:1px}
.dbox .drow{display:flex;align-items:center;gap:12px;padding:12px 14px;width:100%;
  background:none;border:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.dbox .drow:active{background:var(--sunk)}
.dring{width:44px;height:44px;flex:0 0 auto}
.dcta{margin-left:auto;flex:0 0 auto;font-size:13px;font-weight:700;color:var(--accent2);white-space:nowrap}
.dnext{border-top:1px solid var(--line2)}
/* Not '.none': that class already exists on the console's edit cells, where
   it marks a figure nobody has set, and padding it out blew those cells past
   their columns on the leave-balances screen. A name of its own instead. */
.hnone{padding:18px 14px;margin:0;color:var(--ink3);font-size:13px;text-align:center}

/* ---- the week ---- */
.wkbars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding:12px 12px 14px}
.wkbars > div{text-align:center;border-radius:7px;padding:3px 0}
.wkbars > div.on{background:var(--sunk)}
.wkbars .wd{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.wkbars .wbar{display:block;height:52px;margin:5px 3px 4px;border-radius:5px;background:var(--panel2);
  border:1px solid var(--line2);position:relative;overflow:hidden}
.wkbars .wbar i{position:absolute;left:0;right:0;bottom:0;border-radius:4px;background:var(--c1)}
.wkbars .wbar i.short{background:var(--warn)}
.wkbars .wbar i.off,.wkbars .wbar i.none{background:var(--line)}
.wkbars .wh{display:block;font-size:9.5px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
.wkbars .wh.mute{font-weight:400;color:var(--ink3)}

/* ---- looking a colleague up ----
   The answer sits on the right of the row, in the colour of the state, so a
   list of four people reads as four answers rather than four names. */
.hrow2.tap{width:100%;background:none;border:0;border-top:1px solid var(--line2);
  font:inherit;color:var(--ink);text-align:left;cursor:pointer;align-items:center}
.hrow2.tap:first-of-type{border-top:0}
.hrow2.tap:active{background:var(--sunk)}
.hwhen{margin-left:auto;flex:0 0 auto;text-align:right;font-size:11.5px;color:var(--ink3);
  line-height:1.35;white-space:nowrap}
.hwhen b{display:block;font-weight:700;font-size:12px}
.hwhen i{display:block;font-style:normal;font-size:10.5px;opacity:.85}
.mfind{margin-bottom:14px}
.mfind.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accentSoft), var(--shadow)}
.mbar{display:flex;align-items:center;gap:9px;padding:11px 13px}
.mbar svg{width:16px;height:16px;flex:0 0 auto}
.mbar input{flex:1 1 auto;min-width:0;border:0;background:transparent;font:inherit;font-size:15px;
  color:var(--ink);padding:0;outline:none}
.mbar .mx{flex:0 0 auto;border:0;background:none;color:var(--ink3);font-size:22px;line-height:1;
  padding:0 4px;cursor:pointer}
.mres{border-top:1px solid var(--line)}
.mfind .pli{border-top:0}

/* ---- one colleague ---- */
.bk{margin-bottom:12px}
.mate .mhead{display:flex;align-items:center;gap:13px;padding:15px 15px 12px}
.mate .mwho{min-width:0}
.mate .mwho h3{margin:0 0 3px;font-size:19px}
.mate .mwho p{margin:0;font-size:12.5px;color:var(--ink3);line-height:1.45}
/* The qualifier goes UNDER the value, not beside it: 'Miraziz Makhamatzhanov
   their manager' on one line wrapped into two and read as part of the name. */
.mate .pfacts b i{display:block;font-style:normal;font-weight:400;color:var(--ink3);font-size:12px;margin-top:1px}
.pfacts a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.pfacts b{max-width:none}
.bk{width:auto;align-self:flex-start;padding:8px 14px;font-size:13.5px;font-weight:600}
.macts{display:flex;gap:9px;padding:13px 15px 4px}
/* Both buttons are the same shape and the same height, and the WhatsApp mark
   sits beside its word rather than being pushed to one end of the button by
   `text-align` doing a job that is flexbox's. */
.macts .btn{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;
  gap:7px;text-align:center;font-size:14px;padding:11px 0;line-height:1.2}
.macts .btn svg{flex:none}

/* A heading inside the colleague card — small, quiet, and not a panel of its
   own, because three stacked panels for one person is three borders. */
.mate .mgrp{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);
  padding:12px 14px 2px;border-top:1px solid var(--line);margin-top:2px}

/* ---- a wide table, stacked ----
   One card per row, the heading beside the value, the first column as the
   card's own heading. Empty cells are dropped before this ever runs. */
.tstack{display:flex;flex-direction:column;gap:10px;padding:2px 0 4px}
.tscard{border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);padding:10px 12px}
.tscard .tshead{font-weight:700;font-size:14.5px;margin-bottom:6px;line-height:1.3}
.tscard > div:not(.tshead){display:flex;align-items:baseline;gap:12px;padding:3px 0;font-size:13px}
.tscard > div span{color:var(--ink3);white-space:nowrap;flex:0 0 auto}
.tscard > div b{margin-left:auto;text-align:right;font-weight:600;
  font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.tscard .pill{font-size:11px}
.tsnote{margin:0;padding:8px 12px;font-size:12.5px;color:var(--ink3)}


/* ---- a renewal everybody shares ----
   One line for thirty-one people, opening to the names. It reads as a row of
   the table, not as a button parked in a cell, so the register still scans
   down the left edge as a list of documents. */
.docmany{background:none;border:0;font:inherit;padding:0;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:1px;color:inherit}
.docmany b{font-size:13.5px;font-weight:600}
.docmany span{font-size:11.5px;color:var(--ink2)}
.docmany i{font-style:normal;font-size:11px;color:var(--accent2);text-decoration:underline;
  text-underline-offset:2px}
tr.docgrp td{background:color-mix(in srgb, var(--accent) 5%, var(--panel))}
tr.docnames td{background:var(--sunk);padding:9px 12px!important}
tr.docnames span{display:inline-block;font-size:12px;color:var(--ink2);
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:3px 10px;margin:0 6px 6px 0}

/* ---- 'How it works', at the foot of the page and shut ----
   One row until somebody wants it; a heading and its line when they do. */
.how{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);margin-top:14px;overflow:hidden}
.how > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:12px 14px;font-size:13px;font-weight:600;color:var(--ink2)}
.how > summary::-webkit-details-marker{display:none}
.how > summary svg{width:17px;height:17px;margin-left:auto;flex:none;
  transition:transform .18s ease;color:var(--ink3)}
.how[open] > summary svg{transform:rotate(180deg)}
.how[open] > summary{border-bottom:1px solid var(--line2)}
.howl > div{padding:10px 14px;border-top:1px solid var(--line2)}
.howl > div:first-child{border-top:0}
.howl b{display:block;font-size:13px;font-weight:600;margin-bottom:2px}
.howl i{font-style:normal;display:block;font-size:12.5px;color:var(--ink2);line-height:1.5}

/* ---- when he is free, a day at a time ----
   Five columns of quarter-hours is a week at a glance on a desktop and four
   pixels a slot on a phone. This is the same information as an answer.
   Named apf-, not ap-: .apday was already taken by the diary. */
.apfdays{display:flex;flex-direction:column}
.apfday{display:block;padding:11px 14px;border-top:1px solid var(--line2)}
.apfday:first-child{border-top:0}
.apfday.away{background:var(--sunk)}
.apfday.pick{box-shadow:inset 3px 0 0 var(--accent)}
.apfday .apfh{display:flex;align-items:baseline;gap:10px}
.apfday .apfh b{font-size:14px;font-weight:600;white-space:nowrap}
.apfday .apfh span{margin-left:auto;font-size:11.5px;color:var(--ink3);text-align:right}
.apfruns{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.apfrun{font:inherit;font-size:12.5px;font-variant-numeric:tabular-nums;
  padding:7px 11px;border-radius:999px;cursor:pointer;
  border:1px solid color-mix(in srgb, var(--good) 34%, var(--line));
  background:color-mix(in srgb, var(--good) 11%, var(--panel));color:var(--ink)}
.apfrun i{font-style:normal;color:var(--ink3);margin:0 3px}
.apfrun:active{background:color-mix(in srgb, var(--good) 22%, var(--panel))}

/* ---- the month, a phone's worth ----
   Two rows a day and no more: what the day was, and what the clock said.
   The stacked-table treatment turned each day into six lines, which is a
   screen and a half for a working week. */
.asum{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.asum span{background:var(--panel);padding:9px 12px;display:flex;flex-direction:column;gap:1px}
.asum b{font-size:17px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.asum i{font-style:normal;font-size:11px;color:var(--ink3)}
/* The four figures as lines, matching the .stat treatment on every other
   phone page: what it is on the left, the figure on the right. */
.asum.asumlines{display:block;background:transparent;border-bottom:0}
.asum.asumlines span{display:flex;flex-direction:row;align-items:baseline;
  justify-content:space-between;gap:14px;padding:11px 14px;border-bottom:1px solid var(--line)}
.asum.asumlines span:last-child{border-bottom:0}
.asum.asumlines i{font-size:12.5px;color:var(--ink2)}
.asum.asumlines b{font-size:17px;white-space:nowrap}
.asum.asumlines b em{font-style:normal;font-size:11.5px;color:var(--ink3);
  font-weight:400;margin-left:5px}
.adays{display:flex;flex-direction:column}
.aday{padding:9px 14px;border-bottom:1px solid var(--line)}
.aday:last-child{border-bottom:0}
.aday.off{background:var(--sunk)}
.aday.on{box-shadow:inset 3px 0 0 var(--accent)}
.aday .ad1{display:flex;align-items:center;gap:8px}
.aday .ad1 b{font-size:14px;font-weight:600}
.aday .ad1 .dpill{margin-left:auto;flex:0 0 auto;font-size:11px}
.aday .ad2{font-size:12.5px;color:var(--ink2);margin-top:2px;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* ---- the four figures ----
   Two by two, all four the same height whatever their caption runs to, and
   the one that leads carries the accent rather than a bigger number. */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:11px 12px;display:flex;flex-direction:column;gap:3px;min-height:96px}
.kpi .k{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);line-height:1.35}
.kpi .v{margin-top:auto;font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.kpi .v .cur{font-size:10.5px;font-weight:500;color:var(--ink3);margin-right:4px;letter-spacing:0}
.kpi .n{font-size:10.5px;color:var(--ink3);line-height:1.35}
.kpi.lead{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), var(--shadow)}

/* ---- the search icon, and the page it opens ---- */
/* No margin-left:auto here. The title already carries margin-right:auto and
   the bell carried one too, and two autos either side of this icon split the
   gap and parked it in the middle of the bar. The push is moved onto this
   icon in the phone block below, where it is the first of the group. */
/* The back arrow. Sized and spaced like the search circle on the other side
   of the bar, so the two read as a pair rather than as one button and one
   afterthought. It is display:none on a laptop — the rail is the way back
   there, and it always has been. */
.topback{display:none}
.topsearch{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--panel);
  color:var(--ink2);display:grid;place-items:center;flex:0 0 auto}
.topsearch:active{background:var(--sunk)}
.sbar{margin-bottom:6px}
.sgrp{display:flex;align-items:baseline;gap:8px;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink3);padding:14px 3px 6px}
.sgrp span{margin-left:auto;font-size:11px;letter-spacing:0;text-transform:none}

/* ---- the once-a-day nudge ----
   Over everything, including the tab bar: a thing that can be scrolled past
   is a thing that gets scrolled past. */
/* why a check-out did not save, on the card, until the next press */
.cibad{font-size:12.5px;color:var(--bad);line-height:1.45}
.cibtns .ciwhy,.cistack .ciwhy{flex:1 1 100%;order:-1;margin-bottom:2px}
.ckbad{display:block;margin:6px 0 0;padding:0 14px}
/* the two carriers, on the Postman page */
.postcar{padding:2px 0 0}
.postpills{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 2px}
.postcar .cap code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--sunk);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.nagwrap{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:22px}
.nagbg{position:absolute;inset:0;background:rgba(30,21,35,.55);backdrop-filter:blur(2px)}
.nag{position:relative;width:100%;max-width:360px;background:var(--panel);border-radius:16px;
  padding:20px 18px 16px;box-shadow:0 24px 60px -18px rgba(0,0,0,.55)}
.nag h3{margin:0 0 6px;font-size:21px}
.nag p{margin:0 0 15px;font-size:13.5px;line-height:1.55;color:var(--ink2)}
.nag p b{color:var(--ink)}
.nagmiss{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:17px}
.nagmiss span{font-size:11.5px;border:1px solid var(--line);border-radius:99px;padding:3px 10px;
  color:var(--ink2);background:var(--panel2)}
.nagmiss .more{border-color:var(--accent);color:var(--accent2);font-weight:600}
.nagact{display:flex;gap:9px}
.nagact button{flex:1;border-radius:9px;font:inherit;font-size:14.5px;font-weight:700;padding:11px 0;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink2)}
.nagact button.p{background:var(--accent);border-color:var(--accent);color:var(--accentInk)}
.naglater{display:block;text-align:center;font-size:11px;color:var(--ink3);margin-top:11px}

/* ---- The Friday Five ----
   The head says the one thing somebody wants on opening it: is it on now,
   and how long have I got. */
.fivehead{border-radius:var(--r);padding:13px 15px;margin-bottom:14px;border:1px solid var(--line);
  background:var(--panel);box-shadow:var(--shadow)}
.fivehead .k{display:block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3)}
.fivehead b{display:block;font-size:20px;font-weight:600;letter-spacing:-.01em;margin:4px 0 2px}
.fivehead .n{font-size:12px;color:var(--ink3)}
.fivehead.live{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
.fivehead.live b{color:var(--accent2)}
.fivehead.soon{border-left:3px solid var(--c1)}

.fiveq{padding:14px 15px;border-top:1px solid var(--line2)}
.fiveq:first-of-type{border-top:0}
.fqq{margin:0 0 11px;font-size:15px;font-weight:600;line-height:1.4;display:flex;gap:9px;align-items:baseline}
.fqq span{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--sunk);color:var(--ink2);
  font-size:11px;font-weight:700;display:inline-grid;place-items:center}
.fqopts{display:flex;flex-direction:column;gap:7px}
.fqo{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;font-size:14px;
  padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);
  color:var(--ink);cursor:pointer}
.fqo:active{background:var(--sunk)}
.fqo .fql{flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:var(--panel);
  border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--ink3);
  display:inline-grid;place-items:center}
.fqo .fqt{min-width:0}
.fqo .fqm{margin-left:auto;flex:0 0 auto;font-weight:700}
.fqo.mine{border-color:var(--accent);background:var(--accentSoft)}
.fqo.mine .fql{border-color:var(--accent);background:var(--accent);color:var(--accentInk)}
.fqo[disabled]{cursor:default}
/* Once it has shut: the right one, and the one you picked if it was not. */
.fqo.right{border-color:var(--good);background:var(--goodBg)}
.fqo.right .fql{border-color:var(--good);background:var(--good);color:#fff}
.fqo.right .fqm{color:var(--good)}
.fqo.wrong{border-color:var(--bad);background:var(--badBg)}
.fqo.wrong .fql{border-color:var(--bad);background:var(--bad);color:#fff}
.fqo.wrong .fqm{color:var(--bad)}
.fqnote{margin:10px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink3);
  border-left:2px solid var(--line);padding-left:11px}

.fiveme{margin:0;padding:12px 15px;font-size:14px;line-height:1.5;border-bottom:1px solid var(--line2);
  background:color-mix(in srgb,var(--good) 7%,var(--panel))}
.fiveme.none{background:var(--panel2);color:var(--ink3)}
.fiverank{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--sunk);color:var(--ink2);
  font-size:11.5px;font-weight:700;display:grid;place-items:center;margin-top:1px}
.fiverank.win{background:var(--accent);color:var(--accentInk)}
.hrow2.isme{background:var(--accentSoft)}
.hrow2.isme .hwhen b{color:var(--accent2)}

/* ---- writing a round ----
   The option and its letter are one control: tapping anywhere on the row
   marks it right, which is what somebody expects a row to do. */
.fcq{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.fcq:first-of-type{border-top:0;padding-top:0;margin-top:0}
.fcopts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}
.fcopt{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel2);cursor:pointer;margin:0}
.fcopt.on{border-color:var(--good);background:var(--goodBg)}
.fcopt input[type=radio]{width:16px;height:16px;flex:0 0 auto;margin:0;accent-color:var(--good)}
.fcopt .fcl{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--ink3);width:12px}
.fcopt.on .fcl{color:var(--good)}
.fcopt .fcin{flex:1 1 auto;min-width:0;border:0;background:transparent;padding:4px 0;
  font:inherit;font-size:14px;color:var(--ink);outline:none;width:100%}
.fcpub{display:flex;align-items:center;gap:8px;margin:0 auto 0 0;font-size:13.5px;color:var(--ink2)}
.fcpub input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
@media (max-width:900px){ .fcopts{grid-template-columns:1fr} }
.sheet button.sh.big{align-items:flex-start;padding:14px 20px;gap:13px}
.sheet button.sh.big svg{margin-top:2px;color:var(--accent2)}
.sheet button.sh.big b{display:block;font-size:15.5px;font-weight:600}
.sheet button.sh.big i{display:block;font-style:normal;font-size:13px;color:var(--ink2);margin-top:2px}
.sheet .shdot{margin-left:auto;font-size:12px;font-weight:600;color:var(--accent2);
  background:var(--accentSoft);padding:2px 9px;border-radius:99px}
.cochip{padding:9px 15px;border:1px solid var(--line);border-radius:99px;background:var(--panel);
  color:var(--ink2);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.cochip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brandInk)}
.sheet .shhint{margin:2px 20px 0;font-size:12.5px;color:var(--ink3)}
.sheet .shnote{margin:2px 20px 6px;padding:11px 13px;border-radius:9px;background:var(--sunk);
  color:var(--ink2);font-size:13.5px}
.mepic{width:36px;height:36px;flex:none;border-radius:50%;overflow:hidden;padding:0;cursor:pointer;
  border:1px solid var(--line);background:var(--sunk);color:var(--ink2);
  display:flex;align-items:center;justify-content:center;font:inherit;font-size:12.5px;font-weight:700}
.mepic img{width:100%;height:100%;object-fit:cover;display:block}
.mepic:hover{border-color:var(--accent)}
.mepic[aria-current="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accentSoft)}
.sheetwrap{position:fixed;inset:0;z-index:50}
.sheetbg{position:absolute;inset:0;background:rgba(20,14,26,.45)}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--panel);border-radius:16px 16px 0 0;
  padding:8px 0 calc(14px + env(safe-area-inset-bottom));max-height:82vh;overflow-y:auto;
  box-shadow:0 -8px 30px -12px rgba(0,0,0,.4)}
.shtop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 20px 10px;
  border-bottom:1px solid var(--line2);margin-bottom:4px}
.shtop b{font-family:'Newsreader','Bodoni Moda',Georgia,serif;font-size:19px;font-weight:500}
.shclose{background:none;border:0;font:inherit;font-size:15px;font-weight:600;color:var(--accent2);
  padding:6px 4px;cursor:pointer}
.askbar{display:flex;align-items:center;gap:12px;margin:0 0 2px}
.askback{width:38px;height:38px;flex:none;border:1px solid var(--line);border-radius:10px;background:var(--panel);
  color:var(--ink2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.askback svg{width:19px;height:19px}
.askbar b{display:block;font-family:'Newsreader','Bodoni Moda',Georgia,serif;font-size:21px;font-weight:500;line-height:1.2}
.askbar span{display:block;font-size:12.5px;color:var(--ink3)}
.askbal{display:flex;align-items:baseline;gap:9px;padding:12px 16px;border-radius:10px;
  background:var(--accentSoft);color:var(--accent2);flex-wrap:wrap}
.askbal span{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.askbal b{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.askbal i{font-style:normal;font-size:12.5px;opacity:.85;margin-left:auto}
.sheet .grab{width:38px;height:4px;border-radius:99px;background:var(--line);margin:6px auto 10px}
.sheet h4{margin:14px 20px 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.sheet a,.sheet button.sh{display:flex;align-items:center;gap:12px;width:100%;padding:13px 20px;background:none;
  border:0;font:inherit;font-size:15px;color:var(--ink);text-align:left;cursor:pointer}
.sheet button.sh:hover{background:var(--panel2)}
.sheet button.sh[aria-current="true"]{color:var(--accent2);font-weight:600}
.sheet button.sh svg{width:19px;height:19px;flex:none;stroke-width:1.7;color:var(--ink3)}
.sheet button.sh[aria-current="true"] svg{color:var(--accent2)}
.sheet .shrow{display:flex;align-items:center;gap:10px;padding:10px 20px 4px;flex-wrap:wrap}
.sheet .shrow .seg{flex:none}

@media(max-width:720px){
  .rail{display:none!important}
  #app{grid-template-columns:minmax(0,1fr)}
  .tabbar{display:grid}
  body{padding-bottom:66px}
  .topbar{position:sticky;top:0;z-index:30;padding:9px 14px;gap:8px;min-height:0;flex-wrap:nowrap}
  .topbar .pick,.topbar #ySeg,.topbar #qSeg,.topbar .conbtn,.topbar #themeSeg{display:none!important}
  /* The title takes the slack rather than pushing with an auto margin of its
     own: an auto here and an auto on the first icon split the gap between
     them and parked the search icon in the middle of the bar. */
  .topbar .ttl{font-size:19px;min-width:0;flex:1 1 auto;margin-right:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .ttl small{display:block;font-size:11.5px}
  .topbar .topsearch{margin-left:auto}
  .topbar .topback{display:inline-flex;align-items:center;justify-content:center;
    width:32px;height:32px;margin-left:-6px;margin-right:2px;flex:0 0 auto;
    border:0;background:none;color:var(--ink);border-radius:50%;padding:0}
  .topbar .topback.hidden{display:none}
  .topbar .topback:active{background:var(--sunk)}
  .topbar .topsearch.hidden + .bell,
  .topbar .bell:first-of-type{margin-left:auto}
  .mepic{display:flex}
  .hhero.slim .pad{padding:16px 18px}
  .grid.hrow > .panel{height:auto}
  .grid.hrow .anns li p{-webkit-line-clamp:3}
  .hhero.slim h2{font-size:25px}
  .mtop{display:flex;align-items:center;gap:8px;margin-left:auto}
  .content{padding:14px 13px 30px;gap:13px;max-width:none}
  main.wide .content{max-width:none}
  .panel>header{padding:13px 15px;flex-wrap:wrap;gap:7px}
  .panel>header h3{font-size:17px}
  .pad{padding:15px}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat .v{font-size:24px}
  .stat{padding:13px 15px}
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tw table{min-width:560px}
  .pgrid{grid-template-columns:minmax(0,1fr)}
  .bellpop{position:fixed;left:8px;right:8px;top:58px;width:auto;max-height:70vh}
  .seg.segbig{width:100%;align-self:stretch;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .seg.segbig button{flex:0 0 auto;justify-content:center;padding:9px 14px;font-size:13px;white-space:nowrap}
  /* Two or three tabs share the width rather than huddling at the left with
     a third of the bar left blank. Four or more keep their own width and the
     row scrolls, because sharing there would clip the words. */
  .seg.segbig:not(:has(button:nth-child(4))) button{flex:1 1 0;min-width:0}
  .expbar{width:100%;margin-left:0;padding-top:2px}
  .hhero .pad{padding:18px}
  .hhero h2{font-size:26px}
  /* the A4 sheet is not shown on a phone - it is what the PDF is made from */
  .slwrap.printonly{display:none}
  /* .revlink moved out of this media query — see the note in mkweb.mjs. */
.mnet{padding:18px 16px;background:var(--brand);color:var(--brandInk);display:flex;flex-direction:column;gap:3px}
  .mnet span{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brandDim);font-weight:600}
  .mnet b{font-family:'Newsreader','Bodoni Moda',Georgia,serif;font-size:32px;font-weight:500;line-height:1.1}
  .mnet i{font-style:normal;font-size:12.5px;color:var(--brandDim)}
  .mlines{padding:4px 0 10px}
  .mlines h4{margin:14px 16px 4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:700}
  .mline{display:flex;justify-content:space-between;gap:14px;padding:9px 16px;font-size:14.5px;border-bottom:1px solid var(--line2)}
  .mline b{font-weight:600;font-variant-numeric:tabular-nums}
  .mline.tot{border-bottom:0;border-top:1px solid var(--line);font-weight:600;background:var(--panel2)}
  .seg.segbig{width:100%;gap:2px;padding:2px}
  .seg.segbig button{flex:1 1 0;min-width:0;padding:9px 6px;font-size:12.5px;
    display:flex;align-items:center;justify-content:center;gap:5px;text-align:center}
  .seg.segbig button b{font-size:12.5px;font-weight:600;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  /* the countdown and the star are what make it two lines tall */
  .seg.segbig button em,.seg.segbig button svg{display:none}
  /* And the round badge goes with them, for the same reason and to the same
     place: 119px of tab cannot hold 'The Friday Five' and a number, and the
     panel directly underneath says when the next round is and how many have
     been played. Two ways of saying 'this one' in a three-tab strip — an
     orange ring on the live round and a white pill on the open tab — is one
     way too many, so the ring comes off too. */
  .seg.segbig button .segn{display:none}
  .seg.segbig button.lead{box-shadow:none}
  .hme{padding:0 18px 18px!important;flex-direction:row!important;align-items:center!important;gap:14px}
  .hmepic{width:56px;height:56px}
  .hmepic span{font-size:19px}
  .orgwrap{padding-left:2px}
}
@media(max-width:720px){
  /* one to a row, and each row is a line rather than a card */
  .strip{grid-template-columns:minmax(0,1fr)}
  .stat{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
    gap:1px 14px;padding:11px 15px;border-right:0;border-bottom:1px solid var(--line2)}
  .strip .stat:last-child{border-bottom:0}
  .stat .k{grid-column:1;grid-row:1;font-size:11.5px;letter-spacing:.04em;
    text-transform:none;color:var(--ink2);font-weight:500;align-self:center}
  /* Most values are a figure. A few are a phrase — 'Straight to WhatsApp',
     'Nothing to pay' — and those are allowed to wrap at a space rather than
     be cut, but never to take more than about two thirds of the row. Never
     mid-word: overflow-wrap stays at its default. */
  /* !important on the size, and deliberately. A dozen of these carry an inline
     font-size — 22px for a date, 17px where the figure is a phrase — written
     for a tall desktop card. Inline beats a stylesheet, so 'Next ticket due'
     came out at 22px, wrapped 01 Jul / 2027 onto two lines and made its row
     half as tall again as the three beside it. On a phone every figure in a
     row is one size. */
  /* The cap is in vw, not per cent. A percentage on a grid item resolves
     against its TRACK, and the track here is auto — sized from the item
     itself — so 70% collapsed to 130px and wrapped 'Straight to WhatsApp'
     onto two lines. On a phone the row is always the width of the screen,
     so the screen is the thing to measure against. */
  .stat .v{grid-column:2;grid-row:1;font-size:19px!important;text-align:right;
    max-width:64vw;line-height:1.25}
  .stat .v .cur{font-size:11px}
  /* THE CAPTION, WHATEVER IT IS CALLED. Most strips write it as .n and the
     marketplace, the rooms and the ask board write it as .s — and one that is
     not named here is not spanned, so it lands in the label column and wraps
     to three lines against a 108px track. Anything in a .stat that is not the
     label or the figure is a caption and gets the full width. */
  .stat > :not(.k):not(.v){grid-column:1/-1;font-size:11.5px;line-height:1.45;color:var(--ink3)}
  /* a lead tile keeps its accent but not its height */
  .stat.lead,.stat.bad{padding:11px 15px}
}
@media(max-width:400px){ .tabbar button{font-size:9.5px} .tabbar button svg{width:20px;height:20px} }

@media(max-width:720px){

  /* ---- the ground it all sits on -------------------------------------
     Light only. See the note above: dark is defined at the top of this file
     and must keep winning down here. */
  :root[data-theme="light"]{
    --bg:#F1EDF5;
    --sunk:#F7F4FA;
    --line:#EBE5F0;
    --line2:#F4F0F7;
    --shadow:0 1px 2px rgba(30,21,35,.05), 0 8px 22px -12px rgba(30,21,35,.20);
  }

  .content{padding:14px 12px 34px;gap:12px}

  /* ---- panels float ---------------------------------------------------
     No border: a hairline and a shadow at the same time is a box pretending
     to be a card. One or the other, and on a phone it is the shadow. */
  .panel{border:0;border-radius:18px;box-shadow:var(--shadow)}
  .panel>header{padding:14px 16px 10px}
  /* A serif heading on every card is what makes the phone read like a
     document. The serif stays where it earns its place — the greeting on
     Home, a payslip, a letter — and comes off the twenty card headings. */
  .panel>header h3{font-family:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
    font-size:14px;font-weight:600;letter-spacing:-.01em}
  /* A header with a title, a note and a count put the count on a line of its
     own the moment the note was long enough to wrap - a lonely '0' under a
     paragraph. The note shrinks and wraps inside its own box instead, so
     whatever follows it stays on the first line where it belongs. The basis
     is 0, not auto: at auto the note still asks for its whole content width
     and the count is pushed to a line of its own anyway. */
  .panel>header .hint{font-size:11.5px;flex:1 1 0;min-width:0;text-align:right}
  .pad{padding:16px}
  .cap{font-size:11.5px;line-height:1.5}

  /* ---- every button is a pill ---------------------------------------- */
  .btn{border:0;border-radius:999px;padding:12px 18px;font-size:14px;
    box-shadow:0 8px 18px -8px color-mix(in srgb, var(--accent) 60%, transparent)}
  .btn.wide{width:100%}
  .btn.ghost{background:var(--sunk);color:var(--ink2);box-shadow:none}
  .btn.ghost:active{background:var(--line)}
  .btn.ghost.bad{background:var(--badBg);color:var(--bad)}
  /* A SMALL BUTTON IS STILL A THUMB.
     .btn.sm was written for a table row on a laptop, where the pointer is a
     pixel. It came out 29px tall on the phone — and two of the things wearing
     it are Approve and Decline on somebody's salary advance. Both platforms
     ask for about 44; this gets to 42 and keeps the smaller type. */
  .btn.sm{padding:11px 16px;font-size:13px;box-shadow:none;min-height:42px;
    display:inline-flex;align-items:center;justify-content:center}
  .btn.sq{border-radius:999px;padding:8px 14px}
  .btn:disabled{box-shadow:none}

  /* ---- something you have to tap is worth 44 pixels ------------------- */
  input,select,textarea{border-radius:13px;padding:12px 13px;background:var(--sunk);
    border-color:transparent;font-size:15px}
  input:focus,select:focus,textarea:focus{background:var(--panel);border-color:var(--accent)}
  .field label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}

  /* ---- the segmented control ------------------------------------------ */
  .seg{border:0;background:var(--sunk);border-radius:999px;padding:3px;gap:3px}
  .seg button{border:0;border-radius:999px;padding:8px 13px;font-weight:500}
  .seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);font-weight:600;
    box-shadow:0 1px 3px rgba(30,21,35,.13)}
  .seg.segbig{background:var(--sunk)}
  .seg.segbig button[aria-pressed="true"]{background:var(--panel);color:var(--ink)}

  /* ---- a pill you can read at arm's length ---------------------------- */
  .pill{padding:5px 11px;font-size:11.5px;font-weight:600}

  /* ---- the + list and the More list stop being one slab --------------- */
  .plist{background:none;border:0;border-radius:0;box-shadow:none;gap:10px}
  .pli{background:var(--panel);border-radius:18px;border-top:0;box-shadow:var(--shadow);
    padding:13px 14px}
  .pli .ic{border-radius:12px;width:36px;height:36px}
  /* THE ICONS EARN THEIR COLOUR FROM WHAT THEY OPEN.
     Twelve grey discs down a page say only 'these are rows'. The colour is
     the portal's own kind-colour for that thing — leave is the blue it is on
     every calendar, an advance the amber it is on every ledger — so the row
     and the page behind it agree before you have tapped it. Done on the
     attribute the row already carries, so nothing in the markup changes. */
  .pli[data-plus="leave"] .ic,.pli[data-plus="requests"] .ic,.pli[data-plus="rooms"] .ic{
    background:color-mix(in srgb, var(--kLeave) 14%, var(--panel));color:var(--kLeave)}
  .pli[data-plus="WFH"] .ic,.pli[data-plus="profile"] .ic,.pli[data-plus="letters"] .ic{
    background:color-mix(in srgb, var(--kLtr) 14%, var(--panel));color:var(--kLtr)}
  .pli[data-plus="loans"] .ic,.pli[data-plus="payment"] .ic{
    background:color-mix(in srgb, var(--kAdv) 14%, var(--panel));color:var(--kAdv)}
  .pli[data-plus="regular"] .ic,.pli[data-plus="attend"] .ic,.pli[data-plus="appts"] .ic{
    background:color-mix(in srgb, var(--kAtt) 14%, var(--panel));color:var(--kAtt)}
  .pli[data-plus="myslip"] .ic,.pli[data-plus="myticket"] .ic{
    background:color-mix(in srgb, var(--kPay) 14%, var(--panel));color:var(--kPay)}
  .pli[data-plus="offwork"] .ic{
    background:color-mix(in srgb, var(--good) 14%, var(--panel));color:var(--good)}
  .pli[data-plus="approvals"] .ic,.pli[data-plus="dashboard"] .ic{
    background:var(--accentSoft);color:var(--accent2)}
  .pli .ic svg{width:18px;height:18px}
  .pli .pt b{font-size:14px}
  .pli .pt i{font-size:11.5px}
  .pli .ponly{border-radius:999px;padding:4px 9px}

  /* ---- a person in a list has a face ---------------------------------- */
  .hrow2{align-items:center;padding:9px 16px}
  .hrow2 .pav{position:relative;flex:0 0 auto;display:block}
  .hrow2 .pa{width:36px;height:36px}
  /* Initials are a label, not a heading: the serif that suits a payslip makes
     a two-letter disc look like a footnote. */
  .hrow2 .pa span{font-family:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
    font-size:12.5px;font-weight:600;color:inherit;letter-spacing:.01em}
  .pa.tn0{background:color-mix(in srgb, var(--kLeave) 15%, var(--panel));color:var(--kLeave)}
  .pa.tn1{background:color-mix(in srgb, var(--kLtr)   15%, var(--panel));color:var(--kLtr)}
  .pa.tn2{background:color-mix(in srgb, var(--kAtt)   15%, var(--panel));color:var(--kAtt)}
  .pa.tn3{background:color-mix(in srgb, var(--kAdv)   15%, var(--panel));color:var(--kAdv)}
  .pa.tn4{background:color-mix(in srgb, var(--kPay)   15%, var(--panel));color:var(--kPay)}
  .pa.tn5{background:color-mix(in srgb, var(--good)   15%, var(--panel));color:var(--good)}
  .pa.tn6{background:color-mix(in srgb, var(--accent) 15%, var(--panel));color:var(--accent2)}
  /* the cake on a birthday row is the same size as a face, so the two kinds
     of row keep one left edge */
  .hrow2 .hcel{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
  /* Where they are now was a coloured dot in the row. It is the same colour,
     moved onto the corner of the photograph, so the row keeps the fact and
     gains the face. */
  .hrow2 .pdot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;
    border-radius:50%;border:2px solid var(--panel);display:block}
  /* THE TITLE WAS ON THE SCREEN TWICE.
     The bar at the top says 'Leave request' and so did the form underneath
     it — the form's title was there because the form used to carry its own
     back button and needed to say what you had drilled into. The chevron
     went this morning; the title goes now, and what is left is the one thing
     the bar does not say: who it goes to. */
  .askbar b{display:none}
  .askbar span{font-size:13px;color:var(--ink2)}
  .askbar{margin:0 0 10px}

  /* a label with a list under it, rather than a right-aligned paragraph */
  /* the same 15px gutter and the same hairline as every other row here */
  .pfacts .mlist{display:block;padding:11px 15px;border-top:1px solid var(--line2)}
  .pfacts .mlist > span{display:block;font-size:14px;color:var(--ink2);margin-bottom:9px}
  .pfacts .mchips{display:flex;flex-wrap:wrap;gap:6px}
  .pfacts .mchips i{font-style:normal;background:var(--sunk);border-radius:999px;
    padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--ink)}
  /* Initials are a label, not a heading, wherever they appear on a phone. */
  .pa span{font-family:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;font-weight:600}
  .hcol b{font-size:13.5px}
  .hcol i{font-size:11.5px}
  .hwhen{font-size:11.5px}

  /* ---- the bar at the foot -------------------------------------------- */
  .tabbar{background:color-mix(in srgb, var(--panel) 92%, transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line)}
}

.apxlist{display:flex;flex-direction:column}
.apx{padding:14px 16px;border-bottom:1px solid var(--line2)}
.apx:last-child{border-bottom:0}
.apxh{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.apxh b{display:block;font-size:15px;line-height:1.25}
.apxh span{display:block;font-size:12.5px;color:var(--ink2)}
.apxd{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;margin-bottom:4px}
.apxr{margin:0 0 11px;font-size:13.5px;color:var(--ink2)}
.apxb{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.apxb .btn{padding:11px 10px;font-size:14px}

/* ---------- approvals ---------- */
.apk{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;
  white-space:nowrap;color:var(--t);background:color-mix(in srgb,var(--t) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--t) 30%,transparent)}
.apfilter{display:flex;gap:8px;flex-wrap:wrap;padding:12px 18px 12px;border-bottom:1px solid var(--line)}
.apf{border:1px solid var(--line);background:none;border-radius:999px;padding:4px 13px;
  font:inherit;font-size:13px;color:var(--ink2);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px}
.apf:hover{border-color:var(--ink3);color:var(--ink)}
.apf i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ink3)}
.apf[aria-current="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.apf[aria-current="true"] i{color:var(--panel);opacity:.72}
.rail button.nav .navcnt{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;
  min-width:18px;text-align:center;padding:1px 6px;border-radius:999px;
  background:var(--accent);color:var(--accentInk)}
.rail.tuck button.nav .navcnt{display:none}

.refin{width:100%;max-width:230px;padding:5px 9px;border:1px solid var(--line);border-radius:7px;
  background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.refin:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.refin.masked{max-width:190px;letter-spacing:.04em}
.refin.part{border-color:var(--bad)}
.refin.part:focus{outline-color:var(--bad);border-color:var(--bad)}

/* ---------- staff records ---------- */
.jform label.srchg span{color:var(--accent2);font-weight:600}
.jform label.srchg input,.jform label.srchg select{border-color:var(--accent)}
/* A bare label{} up the sheet uppercases every label on the page, and
   text-transform inherits — so a sentence written inside one is shouted at the
   reader unless it says otherwise. Both of these are sentences. */
.jform label .pfhint{text-transform:none;letter-spacing:0}
/* Its own colour, so the sales decision does not read as one more employment
   field. The tint is the third chart hue rather than the accent, because the
   accent means 'press me' everywhere else in the portal. */
.srpanel{border-color:color-mix(in srgb, var(--c3) 34%, var(--line));
  background:color-mix(in srgb, var(--c3) 4%, var(--panel))}
.srpanel > header{background:color-mix(in srgb, var(--c3) 9%, var(--panel));
  border-bottom-color:color-mix(in srgb, var(--c3) 22%, var(--line2));
  border-radius:var(--r) var(--r) 0 0}
.srpanel > header h3{color:var(--c3)}
.srpanel .srsales{margin-top:0;padding-top:0;border-top:0}
.srelse{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:4px;
  padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
.srelse span{font-size:13px;color:var(--ink2)}
.srelse span b{color:var(--ink);font-weight:600;margin-right:5px}
.srelse .btn{margin-left:auto}
/* The fresh record sits inside the settlement panel, so it needs an edge of its
   own or it reads as one more row of the exit. Marked out rather than tinted:
   the colour on this screen already means a status. */
.frbox{margin-top:16px;padding:15px 16px 17px;border:1px solid var(--line);
  border-radius:11px;background:var(--panel2)}
.frbox h4{margin:0 0 4px;font-family:var(--serif);font-size:16.5px;font-weight:600;color:var(--ink)}
.frbox > .cap{margin:0 0 6px}
.frbox .jform{margin-bottom:0}
.frbox .edconf{margin-bottom:0}
.frbox .edtab td:first-child{white-space:nowrap;color:var(--ink2);width:1%;padding-right:18px}
/* The by-month table is read down a column, so the month is the anchor and the
   figures want to line up under one another rather than be scanned across. */
.gmon td.s1{white-space:nowrap;font-weight:600}
.gmon tbody tr.on td{background:color-mix(in srgb, var(--accent) 7%, transparent)}
/* A sentence, and .grp elsewhere is a label — so it inherits the capitals and
   the tracking that a label wants and a sentence does not. */
.gmon tbody tr.grp td{font-size:12.5px;font-weight:600;color:var(--ink2);
  text-transform:none;letter-spacing:0;
  background:var(--panel2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gmon tbody tr.sub td{border-top:1px solid var(--line);font-weight:600}
/* Letter templates: a list you click into, and the one you clicked over the
   page. The overlay is drawn by the view rather than pushed into the modal box
   by hand, so a redraw redraws it instead of wiping what has been typed. */
/* The bar carried the page name at one end and two controls at the other with
   the width of the screen between them. The name now has a line under it, and
   the controls are one group rather than two things adrift. */
.topbar .ttl{line-height:1.2}
.topbar .ttl small{margin-top:2px}
.topbar .tbend{display:flex;align-items:center;gap:8px;margin-left:auto}
.topbar .bell{margin-left:0}
@media screen and (max-width:900px){.topbar .ttl small{display:none}}
/* My commission: three panels in one row. Not a plain third each — the band
   table carries five columns and the line-by-line four, while the not-counted
   panel is a short list of pairs. Widths set to what is in them, so the two
   tables are not squeezed to make room for a column of prose.

   Their BOTTOMS LINE UP. align-items:start was here and it should not have
   been: it is the property that lets three cards side by side end at three
   different heights, which is the thing Avin has now had to point out more
   than once. Grid stretches by default, so the fix is to stop overriding it —
   and then each panel is a column with its footnote pushed to the bottom, so
   the extra room falls between the table and the note rather than below it. */
.grid.commrow{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.25fr) minmax(0,1fr);
  gap:var(--gap, 18px)}
.grid.commrow > .panel{min-width:0;display:flex;flex-direction:column}
.grid.commrow > .panel > .pad{flex:1;display:flex;flex-direction:column}
.grid.commrow > .panel > .tw{flex:1}
.grid.commrow > .panel > .cap{margin-top:auto}
.grid.commrow .cfoot{margin-top:auto;padding-top:14px}
.grid.commrow table{table-layout:auto;width:100%}
.grid.commrow th,.grid.commrow td{padding-left:9px;padding-right:9px}
.grid.commrow th:first-child,.grid.commrow td:first-child{padding-left:14px}
.grid.commrow th:last-child,.grid.commrow td:last-child{padding-right:14px}
@media screen and (max-width:1450px){
  .grid.commrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .grid.commrow > .panel:last-child{grid-column:1 / -1}}
@media screen and (max-width:900px){.grid.commrow{grid-template-columns:minmax(0,1fr)}
  .grid.commrow > .panel:last-child{grid-column:auto}}
/* The forfeited tile says something has gone wrong only when it has. */
.strip .stat.bad .v{color:var(--bad)}
.lttab2 tbody tr{cursor:pointer}
.lttab2 tbody tr:hover td{background:color-mix(in srgb, var(--accent) 5%, transparent)}
.lttab2 td.ltsay{color:var(--ink2);font-size:13px}
.lookwrap.ltmodal{position:fixed;inset:0;z-index:80}
/* Sized to what is in it. .look is a document viewer and fills the screen on
   purpose; a form that does the same leaves half a page of white under the
   buttons. */
.ltmodal .ltlook{inset:auto 0 auto 0;top:56px;height:auto;margin:0 auto;
  max-height:calc(100vh - 112px)}
.ltmodal .ltbody{flex:0 1 auto;overflow:auto}
.ltmodal .ltbody{display:block;align-items:stretch;padding:18px 20px 20px;background:var(--panel)}
.ltform{display:grid;grid-template-columns:1fr 240px;gap:14px 16px}
.ltform label{display:flex;flex-direction:column;gap:5px;margin:0;min-width:0}
.ltform label.wide{grid-column:1 / -1}
.ltform label span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.ltform textarea{width:100%;box-sizing:border-box;resize:vertical;line-height:1.55}
.ltfields{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.ltchip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;font-size:12px;
  color:var(--ink2);background:var(--panel2);border:1px solid var(--line);
  border-radius:7px;cursor:pointer;font-family:inherit}
.ltchip:hover{border-color:var(--accent);color:var(--ink)}
.ltchip code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--ink)}
.ltpreview{margin-top:16px;padding:12px 14px;border-left:2px solid var(--line2);background:var(--panel2);
  border-radius:0 8px 8px 0}
.ltpreview .ltpk{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:5px}
.ltpreview p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink)}
.ltmodal .edconf{margin:0}
.ltmodal .edtab td:first-child{white-space:nowrap;color:var(--ink2);width:1%;padding-right:16px}
@media screen and (max-width:820px){.ltform{grid-template-columns:1fr}
  .ltmodal .ltlook{inset:16px;max-height:calc(100vh - 32px)}}
.srnew{display:flex;gap:7px;align-items:center}
.srnew input{min-width:0}
.srnew .btn{flex:none;white-space:nowrap}
.srsales{margin-top:18px;padding-top:16px;border-top:1px solid var(--line2)}
.srtick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 11px;align-items:start;
  cursor:pointer;text-transform:none;letter-spacing:0;margin-bottom:0}
.srtick input{margin-top:3px;width:auto}
.srtick b{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4}
.srtick em{grid-column:2;font-style:normal;font-size:12.5px;color:var(--ink2);line-height:1.5}
.srlist{margin:0;padding:13px 16px 14px 34px;display:flex;flex-direction:column;gap:11px}
.srlist li{font-size:13.5px;color:var(--ink)}
.srlist li b{margin-right:5px}
.srlist li em{display:block;font-style:normal;font-size:12.5px;color:var(--ink2);
  margin-top:3px;line-height:1.5}

/* ---------- country rates ---------- */
.ratefind{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.ratefind input{flex:0 1 300px;padding:7px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px}
.ratefind input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.ratefind span{font-size:12.5px;color:var(--ink3)}
/* Ten rows, then it scrolls. The row at the boundary fades rather than being
   sliced in half: a scroll hint should not look like clipped text. */
.ratescroll{max-height:433px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent);
          mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent)}
.ratescroll.atend{-webkit-mask-image:none;mask-image:none}
.ratescroll thead th{position:sticky;top:0;z-index:1;background:var(--panel2)}
.rateIn{width:100%;max-width:110px;text-align:right;padding:4px 7px;border:1px solid var(--line);
  border-radius:6px;background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px;
  font-variant-numeric:tabular-nums}
.rateIn:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}

/* ---------- payslip ---------- */
.slwrap{padding:22px 18px 26px;background:var(--sunk);display:flex;justify-content:center;overflow-x:auto}
.slip{width:210mm;min-height:297mm;flex:none;box-sizing:border-box;display:flex;flex-direction:column;
  background:#fff;color:#1b1b1b;border:1px solid var(--line);border-radius:3px;
  padding:13mm 14mm;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:12.5px;
  box-shadow:0 2px 10px rgba(16,26,36,.13)}
.slbody{display:flex;flex-direction:column;flex:1}
.slhead{display:flex;align-items:flex-start;gap:16px;padding-bottom:16px}
.slhead img{width:104px;height:auto;margin-top:3px;flex:none}
.slco{flex:1;min-width:0}
.slco h4{font-size:19px;font-weight:700;color:#1b1b1b;margin:0 0 3px;letter-spacing:-.01em}
.slco span{display:block;font-size:11.5px;color:#3d3d3d;line-height:1.42}
.slco .slwarn{color:#A8720C;font-style:italic;margin-top:3px}
.slper{text-align:right;flex:none}
.slper span{display:block;font-size:11.5px;color:#5a5a5a}
.slper b{display:block;font-size:16px;font-weight:700;margin-top:2px}
.slgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:26px;padding:6px 0 18px;
  border-bottom:1px dashed #cfcfcf}
.sltitle{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#1b1b1b;margin-bottom:12px}
.slkv{display:grid;grid-template-columns:auto 12px minmax(0,1fr);row-gap:9px;align-items:baseline;font-size:12.5px}
.slkv .sk{color:#5a5a5a}
.slkv .sc{color:#8a8a8a}
.slkv .sv{font-weight:600;color:#1b1b1b;font-variant-numeric:tabular-nums}
.slkv .slmiss{font-style:italic;font-weight:400;color:#9a9a9a}
.slnetbox{background:#E9F6EE;border-left:3px solid #34A853;border-radius:4px;padding:14px 16px 12px}
.slnetbox b{display:block;font-size:25px;font-weight:600;color:#1b1b1b;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.slnetbox span{display:block;font-size:12px;color:#5a5a5a;margin-top:2px}
.sldays{border-top:1px dashed #cfcfcf;margin-top:14px;padding-top:12px;display:grid;row-gap:9px}
.sldays div{display:grid;grid-template-columns:auto 12px minmax(0,1fr);align-items:baseline;font-size:12.5px}
.sldays span{color:#5a5a5a}.sldays i{font-style:normal;color:#8a8a8a}
.sldays b{font-weight:600;font-variant-numeric:tabular-nums}
.sltables{display:grid;grid-template-columns:1fr 1fr;margin-top:18px;border:1px solid #e3e3e3;border-radius:5px;overflow:hidden}
.slside{display:flex;flex-direction:column;min-width:0}
.slside:first-child{border-right:1px solid #e3e3e3}
.slsh{display:flex;justify-content:space-between;gap:12px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:#1b1b1b;padding:12px 16px 9px;border-bottom:1px dashed #cfcfcf}
.slrows{flex:1;min-height:44px}
.slrow{display:flex;justify-content:space-between;gap:12px;padding:9px 16px;font-size:12.5px;color:#1b1b1b}
.slrow b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.slrow.none span{color:#9a9a9a;font-style:italic}
.slst{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;background:#f5f5f5;border-top:1px solid #e8e8e8;
  font-size:12.5px;font-weight:700;color:#1b1b1b}
.slst b{font-variant-numeric:tabular-nums;white-space:nowrap}
.slpay{display:flex;align-items:stretch;justify-content:space-between;margin-top:16px;border:1px solid #e3e3e3;border-radius:5px;overflow:hidden}
.slpay>div:first-child{padding:13px 16px}
.slpay b{display:block;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.slpay span{display:block;font-size:11.5px;color:#5a5a5a;margin-top:2px}
.slpayv{background:#E9F6EE;display:flex;align-items:center;padding:0 20px;font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums}
.slwords{text-align:right;margin:14px 0 0;font-size:12.5px;color:#1b1b1b}
.slwords span{color:#5a5a5a}
.slfoot{text-align:center;margin:26px 0 0;padding-top:16px;border-top:1px solid #e8e8e8;font-size:11.5px;color:#8a8a8a}
.revsent{max-height:420px;overflow-y:auto}
.revsent thead th{position:sticky;top:0;background:var(--panel);z-index:1;box-shadow:0 1px 0 var(--line)}
.myrevt thead th{position:sticky;top:0;z-index:3;background:var(--panel2);box-shadow:inset 0 -1px 0 var(--line)}
.mline.mhist > span{display:flex;flex-direction:column;gap:2px}
.mline.mhist > span > i{font-style:normal;font-size:12.5px;color:var(--ink3)}
/* the settlement box on a month: beside the run, never inside it */
.exbox{margin:16px 18px 18px;border:1px solid var(--warn);border-radius:10px;overflow:hidden;background:var(--panel)}
.exbox.done{border-color:var(--line)}
.exboxh{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--warnBg);
  font-size:13px;font-weight:700;color:var(--warn);flex-wrap:wrap}
.exbox.done .exboxh{background:var(--goodBg);color:var(--good)}
.exboxh span{margin-left:auto;font-weight:400;color:var(--ink2);font-size:12.5px}
.exbox .cap{border-top:1px solid var(--line2)}
/* the free lines on a settlement, and the small segmented add/deduct */
.exline{display:grid;grid-template-columns:minmax(0,1fr) 130px auto;gap:9px;margin-bottom:9px;align-items:center}
.exline .ff{width:100%}
.exline .ff.n{text-align:right;font-variant-numeric:tabular-nums}
.seg.sm button{padding:5px 11px;font-size:12px}
.exdrop{border:0;background:none;color:var(--ink3);font-size:16px;line-height:1;padding:0 4px;margin-left:6px;
  cursor:pointer;vertical-align:-1px}
.exdrop:hover{color:var(--bad)}
@media (max-width:700px){.exline{grid-template-columns:1fr;gap:7px}}
/* the settlement: the payslip's paper, a leaver's document */
.settle .slhead{border-bottom:0;padding-bottom:13px}
.stbar{text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#1b1b1b;padding:10px 12px;border-top:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3;background:#f7f7f7}
.sttitle{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#1b1b1b;margin:18px 0 12px}
.stkv{display:grid;grid-template-columns:auto 12px minmax(0,1fr) auto 12px minmax(0,1fr);
  row-gap:9px;column-gap:0;align-items:baseline;font-size:12.5px;padding-bottom:18px;border-bottom:1px dashed #cfcfcf}
.stkv>.sk{color:#5a5a5a;padding-right:10px}
.stkv>.sk:nth-child(6n+4){padding-left:34px}
.stkv>.sc{color:#8a8a8a}
.stkv>.sv{font-weight:600;color:#1b1b1b;font-variant-numeric:tabular-nums;padding-left:8px}
.settle .sltables{margin-top:18px}
.settle .slrow{align-items:flex-start}
.settle .slrow i{display:block;font-style:normal;font-size:11px;color:#8a8a8a;margin-top:2px;line-height:1.35}
.stnet{margin-top:16px;border:1px solid #e3e3e3;border-radius:5px;overflow:hidden}
.stnh{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;background:#f5f5f5;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#1b1b1b}
.stnr,.stnt{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;font-size:12.5px;color:#1b1b1b}
.stnr{border-top:1px solid #eee}
.stnr b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.stnt{border-top:1px solid #e3e3e3;background:#E9F6EE;font-weight:700}
.stnt b{font-variant-numeric:tabular-nums;white-space:nowrap}
.stwords{text-align:center;margin:16px 0 0;padding:13px 12px;border:1px solid #e3e3e3;border-radius:5px}
.stwords p{margin:0;font-size:14.5px;color:#1b1b1b;text-wrap:balance}
.stwords p b{font-weight:700;font-variant-numeric:tabular-nums}
.stwords p span{color:#3d3d3d}
.stwords i{display:block;font-style:normal;font-size:11px;color:#8a8a8a;margin-top:4px}
.stnote{display:flex;gap:10px;align-items:baseline;margin-top:18px;font-size:12.5px;color:#1b1b1b}
.stnote i{flex:1;border-bottom:1px dotted #c8c8c8;height:13px}
.stsign{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:22px;
  padding-top:14px;border-top:1px solid #e8e8e8;font-size:12.5px;color:#1b1b1b}
.stdecl{margin-top:26px}
.stdecl h5{margin:0 0 7px;font-size:13.5px;font-weight:700;color:#1b1b1b}
.stdecl p{margin:0;font-size:12px;line-height:1.55;color:#3d3d3d}
.stemp{display:flex;justify-content:flex-end;align-items:baseline;gap:10px;margin-top:30px;font-size:12.5px}
.stemp i{width:180px;border-bottom:1px solid #b9b9b9;height:13px}
@media screen and (max-width:900px){.stkv{grid-template-columns:auto 12px minmax(0,1fr)}
  .stkv>.sk:nth-child(6n+4){padding-left:0}
  .stsign{grid-template-columns:1fr;gap:14px}}
/* the leave matrix: eleven columns, so the headings turn and the dashes recede */
.obtab thead .obgrp th{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);
  text-align:center;padding-bottom:4px;border-bottom:1px solid var(--line)}
.obtab thead .obgrp th:nth-child(2){border-right:1px solid var(--line)}
.obtab th.r,.obtab td.r{text-align:right}
.obtab td.obdash{color:var(--ink3)}
.obtab tbody td{font-variant-numeric:tabular-nums}
/* editing a table: a draft on screen, and nothing written until it is agreed */
.edbtn{padding:5px 12px;font-size:12.5px}
.panel header .edbtn:first-of-type{margin-left:auto}
.edmsg{font-size:12.5px;color:var(--ink3);margin-left:auto}
.edmsg.on{color:var(--warn);font-weight:600}
.ff.edchanged,input.edchanged,select.edchanged{border-color:var(--warn);box-shadow:0 0 0 2px var(--warnSoft, rgba(168,114,12,.14))}
tr.edrow td{background:var(--warnSoft, rgba(168,114,12,.07))}
/* v1.48 Permissions: one tick, the same in read and edit mode. */
.pmtab th.c,.pmtab td.c{text-align:center;padding-left:4px;padding-right:4px}
.pmtab td.c{overflow:visible}
/* Nothing on this table is cut short: a name or a heading that does not fit
   goes onto a second line instead of ending in an ellipsis. */
.tw table.pmtab th,.tw table.pmtab td{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal}
.tw table.pmtab .pmtick,.tw table.pmtab .pmmark{appearance:none;-webkit-appearance:none;box-sizing:border-box;
  width:18px;height:18px;min-width:18px;padding:0;margin:0;border:1.5px solid var(--ink3);border-radius:4px;
  background:var(--panel);display:inline-grid;place-content:center;vertical-align:middle;position:relative}
.tw table.pmtab .pmtick{cursor:pointer}
.tw table.pmtab .pmmark{border-color:var(--line)}
.tw table.pmtab .pmtick::after,.tw table.pmtab .pmmark::after{content:'';width:5px;height:9px;
  border:solid var(--accentInk);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);opacity:0}
.tw table.pmtab .pmtick:checked,.tw table.pmtab .pmmark.on{background:var(--accent);border-color:var(--accent)}
.tw table.pmtab .pmtick:checked::after,.tw table.pmtab .pmmark.on::after{opacity:1}
.tw table.pmtab .pmtick:disabled{cursor:not-allowed;opacity:.4}
.tw table.pmtab .pmtick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tw table.pmtab .pmmark.on.via{opacity:.38}
.tw table.pmtab input.pmtick.edchanged{box-shadow:none;border-color:var(--ink3)}
.tw table.pmtab input.pmtick.edchanged:checked{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentSoft)}
.pmdim{color:var(--ink3)}
.pmtab td.c .pmdim{font-size:12px}
.tw table.pmtab select.pmsel{width:auto;max-width:100%;height:26px;min-height:0;margin:-3px 0;padding:0 6px;font-size:12.5px;vertical-align:middle}
.pmbad{margin:0 18px 12px}
.edconf{margin:0 18px 16px;border:1px solid var(--warn);border-radius:8px;overflow:hidden;background:var(--card)}
.edconf h4{margin:0;padding:13px 16px 12px;font-size:14.5px;background:var(--warnSoft, rgba(168,114,12,.10));
  border-bottom:1px solid var(--line)}
.edtab{width:100%;border-collapse:collapse;font-size:13px}
.edtab th{text-align:left;font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink);
  padding:9px 16px 7px;border-bottom:1px solid var(--line)}
.edtab td{padding:9px 16px;border-bottom:1px solid var(--line)}
.edtab tr:last-child td{border-bottom:0}
.edtab .edwas{color:var(--ink3);text-decoration:line-through}
.edtab .ednow{font-weight:700}
.edconfb{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.edconfb span{font-size:12.5px;color:var(--ink2)}
.edok{margin:0 18px 14px;padding:10px 14px;border-radius:8px;font-size:13px;
  background:var(--goodSoft, rgba(52,168,83,.10));border-left:3px solid var(--good)}
.edread{color:var(--ink)}
.edread.none{color:var(--ink3)}
@media screen and (max-width:900px){.edconf,.edok{margin-left:0;margin-right:0}}
.slsize{display:flex;align-items:center;gap:8px;color:var(--ink3);font-size:12px}
@media screen and (max-width:900px){.slwrap{padding:14px 0}.slip{width:100%;min-width:0;min-height:0}
  .slgrid,.sltables{grid-template-columns:1fr}.slside:first-child{border-right:0;border-bottom:1px solid #e3e3e3}}
/* ---------- home ---------- */
.hhero{background:linear-gradient(120deg, var(--brand) 0%, var(--brand2) 100%);border-color:transparent;color:var(--brandInk);
  background-image:linear-gradient(120deg, var(--brand) 0%, var(--brand2) 100%),repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 1px,transparent 1px 34px)}
.hhero .pad{padding:22px 22px 24px}
.hhero .hgreet{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--railLabel);font-weight:600}
.hhero h2{font-family:'Newsreader','Bodoni Moda',Georgia,serif;font-size:28px;font-weight:500;margin:6px 0 4px;letter-spacing:-.01em}
.hhero p{margin:0;color:var(--brandDim);font-size:13.5px}
.htodo{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.htodo button{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);
  color:var(--brandInk);padding:7px 13px;border-radius:99px;font-size:12.5px}
.htodo button:hover{background:rgba(255,255,255,.19)}
.htodo button i{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.hhero.withact{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,382px);align-items:stretch}
.hhero.withme{display:grid;grid-template-columns:minmax(0,1fr) 190px;align-items:center}
.hme{padding:20px 24px 20px 0;display:flex;flex-direction:column;align-items:center;gap:12px}
.hmepic{width:96px;height:96px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.12);
  border:2px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;flex:none}
.hmepic img{width:100%;height:100%;object-fit:cover;display:block}
.hmepic span{font-family:'Newsreader','Bodoni Moda',Georgia,serif;font-size:32px;color:var(--brandInk);letter-spacing:.02em}
.hmebtn{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);color:var(--brandInk);
  padding:6px 15px;border-radius:99px;font-size:12.5px;font-weight:500;white-space:nowrap}
.hmebtn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45)}
@media(max-width:820px){.hhero.withme{grid-template-columns:1fr}.hme{padding:0 22px 22px;align-items:flex-start}}
/* The Friday Five leads, and looks it.
   A dot beside a label is a notification, not a design: it says 'something
   needs you' rather than 'there is something good in here'. So the whole
   chip is different — it carries the accent whether or not you are on it, a
   star, and a second line counting down to Friday. The two beside it stay
   the plain chips they were, which is what makes this one read as the one. */
.offseg{align-items:stretch;overflow:visible}
.offseg .lead{margin:-1px 0 -1px -1px;border-radius:8px 0 0 8px}
.offseg button:last-child{border-radius:0 7px 7px 0}
.offseg .lead{display:flex;align-items:center;gap:9px;text-align:left;
  padding:9px 20px 9px 16px;
  color:var(--accent2);
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--accent) 13%,var(--panel)),
    color-mix(in srgb,var(--accent) 6%,var(--panel)));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent)}
.offseg .lead svg{flex:none;fill:currentColor;stroke:none;opacity:.95}
.offseg .lead b{display:block;font-size:14.5px;font-weight:600;line-height:1.25}
.offseg .lead em{display:block;font-style:normal;font-size:11.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;opacity:.72;margin-top:2px}
.offseg .lead:hover{background:linear-gradient(135deg,
  color-mix(in srgb,var(--accent) 19%,var(--panel)),
  color-mix(in srgb,var(--accent) 10%,var(--panel)))}
/* On it: solid, so the difference between looking at it and being in it is
   as clear as it is on the other two. */
.offseg .lead[aria-pressed="true"]{color:#fff;background:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent)}
.offseg .lead[aria-pressed="true"] em{opacity:.82}

/* ---- Off work: the board ----
   Cards of one size in a row, the way a noticeboard reads. The picture is a
   fixed shape so a portrait photograph of a sofa does not make one card twice
   the height of the rest. */
.mkgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));align-items:stretch}
.mkcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.mkcard.sold{opacity:.68}
.mkpic{position:relative;aspect-ratio:4/3;background:var(--sunk);display:flex;
  align-items:center;justify-content:center;overflow:hidden}
.mkpic img{width:100%;height:100%;object-fit:cover;display:block}
.mkno{color:var(--ink3);opacity:.55;display:flex;flex-direction:column;align-items:center;gap:9px}
.mkno em{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.mksold{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  background:rgba(20,14,24,.72);color:#fff;text-align:center;padding:7px 0;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.mkin{padding:14px 16px 4px;flex:1;min-width:0}
.mkin h4{margin:0 0 4px;font-size:15.5px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.mkprice{margin:0 0 8px;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.mkprice .cur{font-size:11.5px;font-weight:600;color:var(--ink3);letter-spacing:.06em;margin-right:2px}
.mkdet{margin:0 0 9px;font-size:13px;line-height:1.6;color:var(--ink2);overflow-wrap:anywhere}
.mkwho{margin:0;font-size:12.5px;color:var(--ink3)}
.mkwho em{font-style:normal;display:block;opacity:.85;margin-top:1px}
.mkcard footer{padding:12px 16px 14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mkcard footer .btn{padding:6px 13px;font-size:13px}
.mkgone{font-size:12.5px;color:var(--ink3)}
/* WhatsApp is a place, not a brand exercise: green enough to be recognised,
   quiet enough to sit in the portal. */
.btn.wa{display:inline-flex;align-items:center;gap:7px;background:#1f7a4d;border-color:#1f7a4d;color:#fff}
.btn.wa:hover{background:#1a6742;border-color:#1a6742}
.btn.ghost.bad{color:var(--bad)}
.btn.ghost.bad:hover{border-color:var(--bad)}
.mkseg{margin-bottom:16px;flex-wrap:wrap}
.mkform .mkfrow{display:grid;gap:16px;grid-template-columns:minmax(0,2fr) minmax(180px,1fr) minmax(180px,1fr)}
.mkform .mkfrow:nth-of-type(2){grid-template-columns:minmax(0,2fr) minmax(220px,1fr)}
.mkform textarea{width:100%;resize:vertical;font:inherit;line-height:1.6;padding:10px 13px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink)}
.mkhint{display:block;font-size:12px;color:var(--ink3);margin-top:6px;line-height:1.5}
.mknote{margin:16px 0 0;padding:11px 14px;border-radius:var(--r);font-size:13px;line-height:1.6;
  border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel));color:var(--ink)}
.mkstale{margin-bottom:16px;padding:14px 18px;border-radius:var(--r);font-size:13.5px;line-height:1.6;
  border-left:3px solid var(--warn);background:color-mix(in srgb,var(--warn) 9%,var(--panel));color:var(--ink)}
.mkstalelist{display:flex;flex-direction:column;gap:8px;margin-top:11px}
.mkstalelist span{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-weight:600}
.mkstalelist .btn{padding:4px 11px;font-size:12.5px;font-weight:500}
/* A tab that is coming, said plainly, rather than an empty panel that reads
   like a fault every time somebody clicks it. */
.soon{text-align:center;padding:44px 24px 48px}
.soon h3{margin:0 0 10px;font-size:19px}
.soon p{margin:0 auto 8px;max-width:52ch;font-size:14px;line-height:1.7;color:var(--ink2)}
.soon .when{font-size:12.5px;color:var(--ink3);text-transform:uppercase;letter-spacing:.1em;margin-top:14px}

/* ---- the emails, laid out by kind ----
   Six boxes, all the same height, so the whole set is one object rather than
   six of different sizes that happen to be near each other. */
/* Three across, so six boxes are two full rows with no gap at the end —
   auto-fit gave four and two, which leaves half a row of nothing. */
.mgrid{display:grid;gap:16px;margin-bottom:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  /* Every row the same height as well as every column: six boxes, one size.
     It only works because the five kinds come out 5, 7, 6, 4 and 4 — near
     enough that no box is left mostly empty by the tallest. */
  grid-auto-rows:1fr;align-items:stretch}
@media(max-width:1180px){ .mgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:760px){ .mgrid{grid-template-columns:minmax(0,1fr)} }
.mbox{display:flex;flex-direction:column;margin:0}
.mbox .mrows{display:flex;flex-direction:column;flex:1}
.mbox .mrows button{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;
  background:none;border:0;border-bottom:1px solid var(--line2);padding:12px 18px}
.mbox .mrows button:last-child{border-bottom:0}
.mbox .mrows button:hover{background:var(--panel2)}
.mbox .mrows button b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:2px}
.mbox .mrows button em{display:block;font-style:normal;font-size:12.5px;color:var(--ink3)}
.mbox .mrows button.off b{color:var(--ink3)}
.mbox .mrows button .pill{margin-left:6px;vertical-align:1px}
.mboxcap{margin:0;padding:13px 18px 15px;border-top:1px solid var(--line2);
  font-size:12.5px;line-height:1.6;color:var(--ink3)}
/* Settings, in two columns so the panel is not a metre of empty space beside
   four short fields. */
/* The settings are a box in the grid like the rest, so they scroll inside
   rather than stretching the row past the emails beside them. */
.msetin{flex:1;min-height:0;overflow-y:auto;padding:16px 18px 6px}
.msetin .field{margin-bottom:13px}
.msetin .pfchk{margin-bottom:9px}
.msetkv{margin:0}
.msetkv dt{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin:0 0 3px}
.msetkv dd{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.msetkv dd:last-child{margin-bottom:6px}
.mboxset .mboxcap{margin-top:auto}

/* ---- reading and rewording one, over the top ----
   The same dialog as the document viewer, narrower, and scrolling inside
   rather than stretching the page behind it. */
/* .lookwrap on its own has no positioning — only .lookwrap.ltmodal does —
   so this needs its own, or the dialog lands wherever the page happens to be
   scrolled to with its header off the top. */
.mpopwrap{position:fixed;inset:0;z-index:80}
/* Sized to what is in it, up to nearly the window, and centred — rather than
   pinned 36px from every edge, which made a short email sit in half a screen
   of nothing. */
/* Two classes deep, because .look is defined further down the file and its
   inset:32px would otherwise win on equal specificity — the same trap the
   body rule below falls into. */
.mpopwrap .mpop{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(900px,calc(100vw - 48px));max-height:calc(100vh - 56px);height:auto}
.mpopwrap .mpop header{flex-wrap:wrap}
.mpopwrap .mpop header .btn{margin-left:0}
.mpopwrap .mpop header .btn:first-of-type{margin-left:auto}
.mpopwrap .mpop header span{flex:1;min-width:120px}
.lookx{background:none;border:0;font:inherit;font-size:24px;line-height:1;color:var(--ink3);
  cursor:pointer;padding:0 2px 3px;margin-left:4px}
.lookx:hover{color:var(--ink)}
/* Home: 'View all' on Who's on leave and Working from home. A link in the
   caption line, and the full list in a pop-up over the page. */
.caplink{background:none;border:0;padding:0;font:inherit;color:var(--accent2);font-weight:600;cursor:pointer}
.caplink:hover{text-decoration:underline}
.mpopwrap .mpop.hpop{width:min(760px,calc(100vw - 32px))}
.mpopwrap .look.hpop .lookbody.hpopbody{display:block;align-items:initial;justify-content:initial;background:var(--panel);padding:4px 18px 14px}
.hptab{width:100%;border-collapse:collapse;font-size:13.5px}
.hptab th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);
  font-weight:600;padding:10px 10px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap;
  position:sticky;top:0;background:var(--panel)}
.hptab td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line2);color:var(--ink2);white-space:nowrap}
.hptab tr:last-child td{border-bottom:0}
.hptab .r{text-align:right;padding-right:0}
.hptab td.dt{font-variant-numeric:tabular-nums}
.hptab td.nm{white-space:normal}
.hptab td.nm b{color:var(--ink);font-weight:600}
.hptab td.nm i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px}
.hpnone{color:var(--ink3);padding:18px 0;margin:0}
@media screen and (max-width:700px){
  .hptab th:nth-child(2),.hptab td:nth-child(2){display:none}
  .hptab{font-size:13px}
}
/* .lookbody centres its child, which is right for a passport scan and wrong
   for a page of text — and it is defined further down the file, so this has
   to out-specify it rather than merely follow it. */
.mpopwrap .mpop .lookbody{display:block;background:var(--sunk);overflow-y:auto}
.mpopwrap .mpop .mpopin{padding:20px 22px 26px;max-width:820px;margin:0 auto}
@media(max-width:720px){ .mpopwrap .mpop{width:calc(100vw - 20px);max-height:calc(100vh - 20px)} }

/* ---- the shifts themselves ----
   Three columns for the form, because a shift is a name and two times and
   nothing else; the two times are narrow because a time input that is as wide
   as a name field looks like it wants more than four digits. */
/* Two auto margins in one header split the gap between them and leave the
   hint stranded in the middle; the hint follows the heading, the button goes
   to the far end. */
.shiftset > header .hint{margin-left:12px}
.shiftset .shform{padding-bottom:20px;border-bottom:1px solid var(--line);max-width:880px}
.shfrow{display:grid;grid-template-columns:minmax(0,1fr) 160px 160px;gap:16px;align-items:end}
.shfrow .field{margin-bottom:0}
.shiftset .mact{margin-top:18px;padding-top:16px}
.shiftset table{width:100%}
/* Names of the people on a shift: the row stays one line high however many
   there are, and the rest is on the panel below. */
.shwho{display:block;color:var(--ink2);line-height:1.5}
.shwho em{color:var(--ink3);font-style:normal}
.shact{white-space:nowrap}
.shact .btn{padding:5px 12px;font-size:12.5px;font-weight:500}
.shact .btn + .btn{margin-left:7px}
@media (max-width:900px){ .shfrow{grid-template-columns:1fr} }

/* ---- changing the words of an email ----
   The editor sits where the preview was, so the panel keeps its size and the
   page does not jump when you open it. */
.mhdr{margin-left:auto;display:flex;gap:8px;align-items:center}
.medit .field{margin-bottom:16px}
.medit textarea{width:100%;min-height:260px;resize:vertical;font:inherit;line-height:1.62;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink)}
.medit textarea:disabled{opacity:.55;cursor:not-allowed}
.mtok{border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.mtok .k{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:9px}
.mtok .chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.mtok .chips em{color:var(--mute);font-size:13px}
.mchip{font:inherit;font-size:12.5px;font-variant-numeric:tabular-nums;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:99px;padding:4px 11px;line-height:1.5}
.mchip:hover{border-color:var(--accent);color:var(--accent)}
.mchip.need{border-color:var(--accent);color:var(--accent);font-weight:600}
.mnote{font-size:13px;line-height:1.6;color:var(--mute);margin:11px 0 0}
.mwarn{font-size:13.5px;line-height:1.6;margin:16px 0 0;padding:11px 14px;border-radius:var(--r);
  border-left:3px solid var(--bad);background:color-mix(in srgb,var(--bad) 8%,var(--panel));color:var(--ink)}
.mown{font-size:13px;line-height:1.6;margin:0 0 16px;padding:10px 14px;border-radius:var(--r);
  border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel));color:var(--ink)}
.mact{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;
  border-top:1px solid var(--line);padding-top:18px}
/* The confirmation step: what was there, and what is going in its place. */
.mconf h4{margin:0 0 18px;font-size:17px}
.mdiff{margin-bottom:18px}
.mdiff .k{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:7px}
.mdiff p{margin:0;padding:9px 13px;font-size:14px;line-height:1.6;border-radius:var(--r)}
.mdiff .was{color:var(--mute);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--mute) 55%,transparent);
  background:color-mix(in srgb,var(--mute) 7%,var(--panel));margin-bottom:5px}
.mdiff .now{color:var(--ink);background:color-mix(in srgb,var(--ok,var(--accent)) 9%,var(--panel));
  border-left:3px solid var(--accent)}
.hact{background:var(--accent);color:#fff;border-radius:0 var(--r) var(--r) 0;padding:16px 18px 14px;
  display:flex;flex-direction:column;box-shadow:inset 1px 0 0 rgba(255,255,255,.22)}
.hacth{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:#fff;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.28)}
.hacth .dt{width:7px;height:7px;border-radius:50%;background:#fff;flex:none;animation:hpulse 2.4s ease-in-out infinite}
@keyframes hpulse{0%,100%{opacity:1}50%{opacity:.35}}
.hacth b{margin-left:auto;font-size:13px;letter-spacing:0;background:rgba(0,0,0,.22);border-radius:99px;padding:1px 9px}
.hact ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.hact li{border-bottom:1px solid rgba(255,255,255,.2)}
.hact li:last-child{border-bottom:0}
.hact li button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;
  color:#fff;padding:10px 2px;border-radius:7px}
.hact li button:hover{background:rgba(255,255,255,.14);padding-left:8px;padding-right:8px}
.hact li button span{flex:1;min-width:0}
.hact li b{display:block;font-size:13.5px;font-weight:600}
.hact li em{display:block;font-style:normal;font-size:12px;color:rgba(255,255,255,.82);margin-top:1px}
.hact li svg{flex:none;opacity:.8}
.hactf{margin-top:auto;padding-top:10px;font-size:12px;color:rgba(255,255,255,.85)}
@media(max-width:980px){.hhero.withact{grid-template-columns:1fr}.hact{border-radius:0 0 var(--r) var(--r);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}}
.hgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hcard{display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;height:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 17px 15px;box-shadow:var(--shadow);
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease}
.hcard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 18px rgba(16,26,36,.11)}
.hcard .hi{width:32px;height:32px;border-radius:9px;background:var(--accentSoft);color:var(--accent2);
  display:flex;align-items:center;justify-content:center;margin-bottom:3px}
.hcard b{font-size:15.5px;color:var(--ink);font-weight:600}
.hcard .hd{color:var(--ink2);font-size:12.5px;line-height:1.5}
.hcard .hv{margin-top:auto;padding-top:11px;font-size:12.5px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.hcard.con{background:var(--panel2);border-color:var(--brandDim)}
.hcard.con .hi{background:var(--brand);color:var(--brandInk)}
@media(max-width:1100px){.hgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.hgrid{grid-template-columns:1fr}}

/* ---------- HR ---------- */
.ciwrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.cibox{flex:0 0 auto;min-width:210px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.cibox .cik{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.cibox b{display:block;font-size:26px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
.cibox .cin{display:block;font-size:12.5px;color:var(--ink2);margin-top:3px}
.cibtns{display:flex;gap:9px;flex-wrap:wrap;align-items:center;flex:1 1 300px}
.cibtns .btn[disabled]{opacity:.45;cursor:not-allowed}
.cihint{color:var(--ink2);font-size:12.5px}
.dpill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap}
.dpill::before{content:'';width:8px;height:8px;border-radius:2px;background:var(--dc);flex:none}
.availtable{table-layout:auto;width:100%}
.availtable th.r{text-align:center;font-weight:600;padding:6px 0;min-width:34px}
/* ---------- Team availability: one month, full width ---------- */
/* WHICH COLUMN ABSORBS THE SURPLUS.
 *
 *   'Why have you given so much space for names - this looks so odd and you
 *    were saying the columns will be tight. With that space, i add 10 long
 *    names. narrow the names columns by 150% and use the width for dates
 *    column equally'                                                 -- Avin
 *
 * It was the wrong way round: the days were pinned at 34px and the name
 * column was width:auto, so on a wide screen the names took six hundred
 * pixels to hold two hundred pixels of text while the days stayed cramped.
 * That is the wasted-column-width fault, written into the stylesheet.
 *
 * The name column is fixed at what the longest name actually measures and the
 * DAYS take what is left, shared equally — which is what fixed layout does
 * with columns that have no width of their own.
 *
 * 250px is not a guess. The longest name on the roster, 'Donia Mohamed
 * Mahmoud Ahmed', is 217px at this size, plus 26px of padding: 243. The
 * remaining seven are headroom for a longer one arriving, and the column
 * cannot go below that without cutting a name, which is the other rule. */
.availtable.avmonth{table-layout:fixed}
.availtable.avmonth th.s1{width:250px}
.availtable.avmonth th.r{min-width:0;padding:5px 0}
/* 11px is the portal's floor for type somebody has to read, and a weekday
   initial is no exception — it was 9px here, which is the same mistake as the
   10px payroll headings Avin caught. A single letter fits at 11 in a 28px
   column with room to spare. */
.availtable.avmonth th.r span{font-size:11px;letter-spacing:0;line-height:1.2}
.availtable.avmonth th.r b{font-size:12px;font-weight:600;line-height:1.2}
.availtable.avmonth th.av-off{background:var(--sunk)}
.availtable.avmonth td.av{font-size:11px;padding:7px 0}
/* Padding only. This line used to carry width:auto as well, and sitting
   below the 250px rule at the same specificity it quietly won — which is how
   the name column came to take six hundred pixels. */
.availtable.avmonth td.s1,.availtable.avmonth th.s1{padding-right:10px}
/* One hairline down each side of today rather than two heavy bars — beside a
   shaded weekend the old two-pixel pair read as something being wrong. */
.availtable.avmonth .av-today{box-shadow:inset 1px 0 0 var(--accent),inset -1px 0 0 var(--accent)}
.availtable.avmonth th.av-today{background:var(--accentSoft)}
.avhead{display:flex;align-items:center;gap:12px;margin-left:auto;flex-wrap:wrap}
.avmon{display:flex;align-items:center;gap:6px}
.avmon b{font-size:14px;font-weight:600;min-width:13ch;text-align:center;
  font-family:'IBM Plex Sans',system-ui,sans-serif}
.avmon .btn.sm{padding:3px 10px;line-height:1.2}
.avmon .btn.sm[data-avmon="-1"],.avmon .btn.sm[data-avmon="1"]{font-size:17px;padding:0 10px}
@media screen and (max-width:900px){
  .avhead{width:100%;margin-left:0}
}
.availtable th.r span{display:block;font-size:11.5px;letter-spacing:0;color:var(--ink2);text-transform:none}
.availtable th.r b{display:block;font-size:12.5px;font-variant-numeric:tabular-nums}
.availtable td.av{text-align:center;font-size:11.5px;font-weight:700;color:var(--ink2);padding:8px 0;
  border-left:1px solid var(--line2)}
.availtable .av-today{box-shadow:inset 2px 0 0 var(--accent),inset -2px 0 0 var(--accent)}
.availtable td.av-we{background:var(--sunk)!important}
.availtable td.s1,.availtable th.s1{text-align:left;white-space:nowrap;padding-right:14px}
.lgd{display:inline-flex;align-items:center;gap:7px;margin-right:16px;font-size:12.5px;color:var(--ink2)}
.lgd i{width:10px;height:10px;border-radius:3px;display:inline-block}
.cfin{width:78px;padding:3px 8px;font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- home feeds ---------- */
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.feed li{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line2)}
.feed li:last-child{border-bottom:0;padding-bottom:0}
.feed li:first-child{padding-top:0}
.feed li i{width:8px;height:8px;border-radius:3px;flex:none}
.feed li div{flex:1;min-width:0}
.feed li b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.feed li span{display:block;font-size:12px;color:var(--ink2);margin-top:1px}
.feed li em{font-style:normal;font-size:12px;color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
.anns{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.anns li{padding-left:12px;border-left:2px solid var(--line)}
.anns li.pin{border-left-color:var(--accent)}
.anns .ah{display:flex;align-items:baseline;gap:10px}
.anns .ah b{font-size:14px;font-weight:600;color:var(--ink)}
.anns .ah span{margin-left:auto;font-size:11.5px;color:var(--ink3);white-space:nowrap}
.anns p{margin:4px 0 3px;font-size:13px;color:var(--ink2);line-height:1.5}
.anns .ab{font-size:11.5px;color:var(--ink3)}

/* ---------- letters ---------- */
.slip.letter .slbody{padding-top:22px}
/* The header on the page Avin sends: the company on the left, the logo on
   the right, one rule under both. The portal had the logo on the left, which
   is the first thing you notice is different when you hold the two up. */
.slip .lthead{background:none;align-items:flex-start;justify-content:space-between;gap:24px;
  border-bottom:1px solid #c9c9c9;padding-bottom:12px;margin-bottom:30px}
.slip .lthead img{order:2;width:150px;height:auto;margin:0;flex:none}
.slip .lthead .slco{order:1;flex:1;min-width:0}
.slip .lthead .slco h4{font-size:15px;font-weight:700;color:#1b1b1b;margin:0 0 3px}
.slip .lthead .slco span{display:block;font-size:11.5px;color:#5a5a5a;line-height:1.45}
.slip .ltto{margin:0 0 22px;font-size:13px;color:#1b1b1b;font-weight:600}
.slip .lttitle{margin:0 0 18px;font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;
  /* The small variant is underlined, so the block shrinks to its own words
     before it is centred — a full-width centred block would be underlined
     from margin to margin. The .big variant below drops the underline and
     resets the margin, so it is centred by text-align alone. */
  display:table;margin-left:auto;margin-right:auto;text-align:center}
.slip .ltbody{margin:0 0 14px;font-size:13px;line-height:1.75;color:#1b1b1b}
.slip .ltsig{margin-top:34px;display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:#1b1b1b}
.slip .ltsig .ltclose{margin-bottom:10px;color:#1b1b1b}

/* ---------- what the group spends on people ---------- */
/* Names checked against the stylesheet before they were invented this time:
   pfhead, topbar and trendlink were all already taken, and borrowing one
   means borrowing a layout somebody else wrote. */
.costbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.costsplit{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.csk{display:inline-block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  padding:4px 11px;border-radius:999px;margin-bottom:12px}
.csk.auto{background:color-mix(in srgb,var(--good) 14%,var(--panel));color:var(--good)}
.csk.typed{background:color-mix(in srgb,var(--accent) 15%,var(--panel));color:var(--accent2)}
.csl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.csl li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 12px;
  padding:10px 13px;border-radius:12px;background:var(--sunk)}
.csl li b{font-size:14px;font-weight:600}
.csl li span{grid-column:1;font-size:12.5px;color:var(--ink2);line-height:1.45}
.csl li em{grid-row:1;grid-column:2;font-style:normal;font-size:11.5px;font-weight:700;
  color:var(--good);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.csl.typed li em{color:var(--accent2);text-transform:none;letter-spacing:0;font-size:12.5px}
.howseg{display:flex;width:100%;margin-top:2px}
.howseg button{flex:1 1 0;min-width:0;white-space:normal;line-height:1.3;padding:9px 6px;font-size:12.5px}
.jform.cost2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* The panel beside it is taller, and a row of cards is one height — so rather
   than leaving three hundred pixels of white under the buttons, the box you
   paste into grows to fill them. Dead space turned into the thing the panel
   is actually for. */
.pastepad{display:flex;flex-direction:column}
.pastepad textarea{flex:1 1 auto;min-height:150px}
.pvbox{margin-top:12px;border-radius:13px;background:var(--sunk);padding:11px 14px;
  display:flex;flex-direction:column;gap:3px}
.pvrow{font-size:12.5px;color:var(--ink2)}
.pvrow b{font-size:13.5px;display:block;margin-bottom:1px}
.pvrow.ok b{color:var(--good)}
.pvrow.bad b{color:var(--bad)}
tr.stopped td{opacity:.55}
.cosco{display:block;font-size:11.5px;color:var(--ink3)}

/* the three figures on a person, which answer three different questions */
.costnow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.cn{padding:15px 17px;border-radius:14px;background:var(--sunk);display:flex;flex-direction:column;gap:3px}
.cn .cnk{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--ink3)}
.cn .cnv{font-family:'Newsreader','Bodoni Moda',Georgia,serif;font-size:27px;line-height:1.15;
  font-variant-numeric:tabular-nums}
.cn .cnn{font-size:12px;color:var(--ink3);line-height:1.45}
.cn.fixed .cnk{color:var(--c1)}
.cn.var{background:color-mix(in srgb,var(--accent) 9%,var(--sunk))}
.cn.var .cnk{color:var(--accent2)}
.cn.tot{background:var(--brand);color:var(--brandInk)}
.cn.tot .cnk{color:var(--railLabel)}
.cn.tot .cnn{color:var(--brandDim)}
/* Six across, so the twelve sit in two rows of six (rows 24-27, 18 Sep):
   '4 rows are two much... Make it two rows, commission amount is shown twice,
   so skip commission and make 6 each'. Three across in between and two on a
   phone — six columns on a phone is not a row, it is a queue. */
.cbreak{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin-top:16px;
  background:var(--line2);border-radius:13px;overflow:hidden}
@media(max-width:1180px){.cbreak{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* The total line of a table is a total, and reads as one. */
.costp tfoot td, .costp tfoot b{font-weight:700}
.cb{background:var(--panel);padding:11px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.cb span{font-size:11.5px;color:var(--ink3)}
.cb b{font-size:15px;font-variant-numeric:tabular-nums;font-weight:600}
.cb.none b{color:var(--ink3);font-weight:400}
.cb.comm{background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.cb.comm b{color:var(--accent2)}
tr.thism td{background:color-mix(in srgb,var(--c1) 5%,var(--panel))}

/* A phone gets the same screens, two across and then one — the tables keep
   their own sideways scroll, which is what .tw is for. */
@media(max-width:720px){
  .costsplit{gap:16px}
  .howseg{flex-wrap:wrap}
  .howseg button{flex:1 1 46%}
  .jform.cost2{grid-template-columns:minmax(0,1fr)}
  .cbreak{grid-template-columns:repeat(2,minmax(0,1fr))}
  .costbar .seg{width:100%}
  .costbar .seg:last-child{margin-left:0}
}

/* ---------- meeting rooms ---------- */
.rmpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.rmcard{display:flex;flex-direction:column;gap:6px;padding:15px 17px;border:1px solid var(--line);
  border-radius:11px;background:var(--panel);cursor:pointer;text-align:left;font:inherit;color:inherit}
.rmcard.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accentSoft);background:var(--accentSoft)}
.rmcard b{font-size:15px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0}
.rmcard>span{font-size:12.5px;color:var(--ink3);text-transform:none;letter-spacing:0}
.rmcard .pill{align-self:flex-start;margin-top:3px}
.rmfree{display:flex;align-items:center;gap:12px;margin-top:16px;padding:11px 14px;
  border-left:3px solid var(--good);background:var(--panel2);border-radius:0 8px 8px 0;
  font-size:13px;color:var(--ink2)}
.rmfree.no{border-left-color:var(--warn)}
/* Day, From and To are three of a kind, so they share the row evenly. */
.rmform{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rmform label{display:flex;flex-direction:column;gap:5px}
.rmform label>span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.rmform label.wide{grid-column:1/-1}
.rmform input,.rmform select{width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px;
  font-variant-numeric:tabular-nums}
.rmgrid{margin-top:6px}
.rmhours{position:relative;height:18px;margin-left:220px;margin-bottom:6px}
.rmhours span{position:absolute;top:0;transform:translateX(-50%);font-variant-numeric:tabular-nums}
.rmhours span.hour{font-size:11px;color:var(--ink2);font-weight:500}
.rmhours span.half{font-size:10px;color:var(--ink3);opacity:.75}
.rmrow{display:grid;grid-template-columns:220px minmax(0,1fr);border-top:1px solid var(--line2)}
.rmname{padding:14px 16px 14px 0;display:flex;flex-direction:column;gap:2px}
.rmname b{font-size:13.5px;color:var(--ink);font-weight:500}
.rmname span{font-size:11.5px;color:var(--ink3)}
/* Ruled every half hour, firmer on the hour, so a 30-minute booking sits in a
   slot you can see rather than floating inside an hour. */
.rmlane{position:relative;min-height:86px;margin:10px 0;border-radius:8px;background:var(--panel2);
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(4.1666% - 1px),var(--line2) calc(4.1666% - 1px) 4.1666%),
                   repeating-linear-gradient(90deg,transparent 0 calc(8.3333% - 1px),var(--line) calc(8.3333% - 1px) 8.3333%)}
.rmblock{position:absolute;top:0;bottom:0;padding:7px 9px;border-radius:7px;overflow:hidden;
  background:var(--accent);color:#fff;display:flex;flex-direction:column;justify-content:center;gap:3px;
  border:0;font:inherit;text-align:left}
/* The time always fits and always shows; the purpose takes what room is left
   and stops at two lines rather than running out of the bottom of the block.
   The whole of it is on the block's title, for a hover. */
.rmblock b,.rmblock span{white-space:normal;overflow-wrap:anywhere;line-height:1.22}
.rmblock b{font-size:11.5px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;min-height:0}
.rmblock span{font-size:10.5px;opacity:.85;flex:none;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
/* Half an hour is 4% of a twelve-hour lane — about 45px. Nothing but the
   start time fits, so that is all a narrow block shows, centred, and the rest
   is in the table underneath. */
.rmblock.tight{padding:6px 3px;align-items:center}
.rmblock.tight b{display:none}
.rmblock.tight span{font-size:10px;font-weight:600;opacity:1;text-align:center}
.rmkey{display:flex;gap:20px;margin-top:14px;font-size:12px;color:var(--ink3)}
.rmkey i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:7px;vertical-align:-2px}
.rmkey i.busy{background:var(--accent)}
.rmkey i.free{background:var(--panel2);border:1px solid var(--line)}
/* A timeline is the wrong shape on a phone: twelve hours across 430px turns
   every booking into a column of single letters. The same day, as a list. */
.rmlist{margin-top:18px;border-top:1px solid var(--line);padding-top:4px}
.rmday{border-top:1px solid var(--line2);padding:12px 0 4px}
.rmdayhd{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.rmdayhd b{font-size:13.5px;color:var(--ink);font-weight:600}
.rmdayhd span{font-size:11.5px;color:var(--ink3)}
.rmitem{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:12px;padding:8px 0;
  border-top:1px solid var(--line2);align-items:center}
.rmitem b{font-size:12.5px;color:var(--accent2);font-variant-numeric:tabular-nums;font-weight:600}
.rmitem span{font-size:13px;color:var(--ink);display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.rmitem i{font-style:normal;font-size:11.5px;color:var(--ink3)}
.rmitem.free b,.rmitem.free span{color:var(--ink3)}
.btn.sm{padding:3px 11px;font-size:12px}

/* ---------- the room page as one screen: book on the left, the day beside it */
.rmsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch}
/* Two boxes in a row are ONE OBJECT: same top, same bottom. The form's closing
   note is pushed to the foot so the left half fills the height the day sets
   rather than trailing off into white space. */
.rmbox{display:flex;flex-direction:column;min-width:0;margin:0}
.rmbox > .pad{flex:1;display:flex;flex-direction:column}
.rmbox > .pad > .cap:last-child{margin-top:auto;padding-bottom:0}
.rmbox .btn.rmgo{align-self:flex-start}
.rmbox .rmpick{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
@media(max-width:1240px){ .rmsplit{grid-template-columns:minmax(0,1fr)} }

/* The date sits over the ROOM COLUMNS, not over the panel — the time gutter is
   not part of what the date is above.
     'In availability - date should be centered'
     'Date center should be of two boxes (Corplex and POA) - not center of the
      whole box'                                                      -- Avin */
.rmdaybar{display:flex;gap:8px;align-items:center;margin-bottom:12px;justify-content:center}
.rmdaybar.centre{padding-left:64px}
.rmdaybar input{width:auto;margin:0;padding:6px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--ink);font-family:inherit;font-size:13px}

/* the day, running down instead of across */
.rmcols{display:grid;gap:8px}
.rmch{height:52px;display:flex;flex-direction:column;justify-content:center;gap:2px;
  border-bottom:1px solid var(--line);margin-bottom:6px}
.rmch b{font-size:13px}
.rmch span{font-size:11.5px;color:var(--ink3);line-height:1.3}
.rmscale{position:relative}
.rmscale span{position:absolute;right:8px;transform:translateY(-50%);font-size:11px;color:var(--ink3);
  font-variant-numeric:tabular-nums}
.rmscale span.half{display:none}
.rmtrack{position:relative;border:1px solid var(--line);border-radius:9px;background:var(--panel2);overflow:hidden}
.rmtrack.pick{box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent)}
.rmslot{position:absolute;left:0;right:0;border-top:1px dashed var(--line2);cursor:pointer}
.rmslot.hour{border-top:1px solid var(--line)}
.rmslot:first-of-type{border-top:0}
.rmslot:hover{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.rmslot[data-no]{cursor:default}
.rmslot[data-no]:hover{background:transparent}
.apshut{position:absolute;left:0;right:0;
  background:repeating-linear-gradient(135deg,var(--sunk),var(--sunk) 5px,var(--panel2) 5px,var(--panel2) 10px)}
.rmev{position:absolute;left:4px;right:4px;border-radius:8px;padding:4px 8px;overflow:hidden;
  background:var(--accent);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.16);
  display:flex;flex-direction:column;justify-content:flex-start}
.rmev.mine{background:var(--c1)}
.rmev b{display:block;font-size:10.5px;line-height:1.15;font-variant-numeric:tabular-nums;opacity:.92}
.rmev span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12px;font-weight:600;line-height:1.25;margin-top:1px;overflow-wrap:break-word}
 /* An hour and a half is two lines of title and still has room for the name
   underneath; an hour has one line. Neither is allowed to run out of the
   bottom of its block. */
.rmev.roomy span{-webkit-line-clamp:2}
.rmev i{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  font-style:normal;font-size:10.5px;line-height:1.2;opacity:.85;margin-top:2px}
/* A half hour is one line: the time and what it is. Without the explicit row
   the flex column above hides the title altogether. */
.rmev.tight{padding:3px 8px;flex-direction:row;align-items:center;gap:6px}
.rmev.tight b{display:inline;flex:0 0 auto}
.rmev.tight span{-webkit-line-clamp:1;margin:0;font-size:11.5px;flex:1 1 auto;min-width:0}
.rmev.tight i{display:none}
.rmkey i.k{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:7px;vertical-align:-2px}
.rmkey i.k.free{background:var(--panel2);border:1px solid var(--line)}
.rmkey i.k.busy{background:var(--accent)}
.rmkey i.k.mine{background:var(--c1)}
.rmkey i.k.shut{background:repeating-linear-gradient(135deg,var(--sunk),var(--sunk) 3px,var(--panel2) 3px,var(--panel2) 6px);
  border:1px solid var(--line)}

/* the spans still left in the chosen room, one click each */
.apgaps{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line2)}
.apgapk{flex:0 0 100%;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.apgapn{font-size:13px;color:var(--ink3)}
.rmchip{display:inline-flex;align-items:baseline;gap:6px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer;
  font-size:12.5px;font-variant-numeric:tabular-nums;font-family:inherit}
.rmchip i{font-style:normal;font-size:11px;color:var(--ink3)}
.rmchip:hover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, var(--panel))}

/* A timeline running ACROSS was the wrong shape on a phone — twelve hours in
   430px turned every booking into a column of single letters — and it was
   hidden there for that reason. Running DOWN it is the right shape: the hours
   have the whole screen and each room is still a column. So it stays. */

/* A column heading is what tells you what the figures under it are, so it is
   the last thing that should be shortened to make room. Kept whole; the
   table scrolls inside its own box instead, which is what that box is for.
     'no text clipped or broken mid-word'                             -- Avin */
.tw table th{white-space:nowrap}

/* A newer portal exists. Slim, at the foot, out of the way of the work —
   and never in the way of the Save button somebody is reaching for. */
.newbuild{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-radius:999px;
  background:var(--ink);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.28);font-size:13.5px;
  max-width:calc(100vw - 28px)}
.newbuild span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.newbuild button{border:0;border-radius:999px;font:inherit;font-size:13px;font-weight:600;
  padding:5px 14px;background:var(--brand);color:var(--brandInk);cursor:pointer}
.newbuild button:hover{filter:brightness(1.15)}
.newbuild button#nbNo{background:transparent;color:#fff;opacity:.7;padding:5px 8px;font-size:16px}
.newbuild button#nbNo:hover{opacity:1;filter:none}
@media(max-width:560px){ .newbuild{left:12px;right:12px;transform:none;bottom:12px;border-radius:14px} }

/* Home: the day he keeps, in the box that was already called Your day. */
.feed.apday li{gap:12px}
.feed.apday .apt{flex:0 0 44px;font-size:13px;font-variant-numeric:tabular-nums;color:var(--accent2)}
.feed.apday li>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.feed.apday li>div b{font-size:13.5px;font-weight:600}
.feed.apday li>div span{font-size:11.5px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed.apday em{font-style:normal;font-size:11.5px;color:var(--ink3);flex:0 0 auto}
.feed.apday li.gone{opacity:.55}
.hfoot.apnext{color:var(--ink2)}
.hfoot.apnext b{color:var(--accent2);font-variant-numeric:tabular-nums}

/* ---------- an appointment with the boss ----------
   The same grid as the rooms, with three states the rooms do not have: the
   hours he keeps, the time he has taken out of them, and an appointment that
   is yours rather than somebody else's. */
/* 'Reduce the first box by 50%, increase second box by 50%' — the form is a
   column of controls; the week is a picture, and the picture wants the room. */
.rmsplit.oneThree{grid-template-columns:minmax(320px,1.3fr) minmax(0,3fr)}
@media(max-width:1240px){ .rmsplit.oneThree{grid-template-columns:minmax(0,1fr)} }
/* 'Day, From, To can come in three rows' — in a narrow box they are a column. */
.rmform.stack{grid-template-columns:repeat(2,minmax(0,1fr))}
.rmform.stack label:first-child:nth-last-child(3){grid-column:1/-1}
/* the hours he keeps, under everything else in the column */
.apopen{position:absolute;left:0;right:0;
  background:color-mix(in srgb, var(--good) 13%, var(--panel));
  border-top:1px solid color-mix(in srgb, var(--good) 30%, var(--panel));
  border-bottom:1px solid color-mix(in srgb, var(--good) 30%, var(--panel))}
/* An hour he has blocked himself is neither free nor somebody's appointment. */
.rmev.block{background:color-mix(in srgb, var(--ink2) 82%, var(--panel));color:#fff}
.rmkey i.k.block{background:color-mix(in srgb, var(--ink2) 82%, var(--panel))}
.rmkey i.k.open{background:color-mix(in srgb, var(--good) 30%, var(--panel));
  border:1px solid color-mix(in srgb, var(--good) 45%, var(--panel))}
/* Five columns of quarter hours are narrow. A block too short for two lines
   shows the name and nothing else — the time is on the scale beside it, and
   half a name is worth less than no clock. */
.rmcols.apw .rmev.tight b{display:none}
.rmcols.apw .rmev.tight span{font-size:11.5px}
.apweek{font-size:13.5px;white-space:nowrap}
.rmchip.block{background:color-mix(in srgb, var(--ink2) 12%, var(--panel));border-color:var(--line)}
.rmchip.block em{font-style:normal;color:var(--ink3);margin-left:2px}
.rmchip.block:hover{border-color:var(--bad);color:var(--bad)}
.rmchip.block:hover em{color:var(--bad)}
/* .rmitem span is a column, which is right for the subject over the name and
   wrong for two buttons side by side. */
.rmitem span.apacts{flex-direction:row;gap:8px;justify-content:flex-end}
.apwhole{display:flex;gap:7px;align-items:center;font-size:13px;color:var(--ink2);
  text-transform:none;letter-spacing:0;margin-top:8px}
.apwhole input{width:auto;margin:0}
/* the weekly hours: the controls sit together, the buttons at the far end */
.aphours{display:flex;flex-direction:column}
.aphead,.aprow{display:grid;grid-template-columns:150px 230px 230px minmax(0,1fr);gap:14px;align-items:center}
.aphead{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);
  padding-bottom:8px;border-bottom:1px solid var(--line2)}
.aprow{padding:10px 0;border-bottom:1px solid var(--line2)}
.aprow > span:nth-child(4){text-align:right}
.aprow select{padding:5px 8px;font-size:13px;width:auto;display:inline-block}
.aprow em{font-style:normal;color:var(--ink3);font-size:12.5px;margin:0 4px}
.apday{font-weight:600;font-size:13.5px}
.apnone{color:var(--ink3);font-size:13px}
.apsave{display:flex;gap:14px;align-items:flex-start;margin-top:18px;flex-wrap:wrap}
.apsave .cap{flex:1;min-width:280px}

@media(max-width:900px){
  .rmform{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rmdaybar.centre{padding-left:0}
  .rmcols{gap:6px}
  .rmch{height:60px}
  .rmch b{font-size:12px}
  .rmch span{font-size:10.5px}
  .rmkey{flex-wrap:wrap;gap:10px 16px;font-size:11.5px}
}
/* A date box has an intrinsic width — the day, the month, the year and the
   little calendar — and a third of a phone is not it. 'Meeting room - date
   box is shrinked and not fully visible': the three-column row stays on a
   tablet, where it fits, and becomes the day on its own line with From and
   To beside each other underneath on a phone, where it does not. */
@media(max-width:720px){
  .rmform{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rmform label:first-child{grid-column:1/-1}
  .rmform input[type=date]{width:100%;min-width:0}
  .rmdaybar{gap:6px}
  .rmdaybar input{flex:1 1 auto;width:auto;min-width:0;text-align:center}
}
/* Where you put your own signature: what is on file beside what it is for. */
.sigpad{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:start}
.sigbox{min-height:104px;display:flex;align-items:center;justify-content:center;padding:12px;
  border:1px dashed var(--line);border-radius:10px;background:var(--panel2)}
.sigbox img{max-width:100%;max-height:80px;object-fit:contain}
.sigbox span{font-size:12.5px;color:var(--ink3);text-align:center;line-height:1.5}
.sigsay p{margin:0 0 12px;font-size:13px;color:var(--ink2);line-height:1.6}
.sigacts{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.sigacts label.btn{cursor:pointer}
@media(max-width:720px){ .sigpad{grid-template-columns:minmax(0,1fr)} }
/* The signature itself. Left where a hand would put it, sized so a wide scan
   and a narrow one both sit the same height above the name. */
.slip .ltsig .ltink{display:block;height:52px;width:auto;max-width:230px;
  object-fit:contain;object-position:left bottom;margin:6px 0 4px}
.slip .ltsig b{font-weight:700;margin-bottom:2px}
.slip .ltsig i{display:block;width:190px;border-bottom:1px solid #9a9a9a;margin:34px 0 6px}
.slip .ltsig span:last-child{color:#5a5a5a}
.slip .lttitle.big{font-size:26px;font-weight:700;letter-spacing:-.01em;text-transform:uppercase;
  color:#111;margin:6px auto 26px;text-decoration:none;display:block;text-align:center}
.ltto2{display:flex;width:100%}
.ltto2 button{flex:1 1 0;min-width:0;white-space:normal;line-height:1.3;padding-top:8px;padding-bottom:8px}
@media(max-width:560px){ .ltto2{flex-wrap:wrap} .ltto2 button{flex:1 1 100%} }
.slip .ltdear{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin:0 0 20px}
.slip .ltdear p{margin:0;font-size:13px;color:#1b1b1b}
.slip .lttab{width:68%;border-collapse:collapse;margin:0 0 26px;
  font-variant-numeric:tabular-nums}
.slip .lttab th{text-align:left;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:#5a5a5a;font-weight:700;padding:0 0 7px;border-bottom:1px solid #c9c9c9}
.slip .lttab td{font-size:13px;color:#1b1b1b;padding:8px 0;border-bottom:0}
.slip .lttab .r{text-align:right}
.slip .lttab tfoot td{font-weight:700;border-top:1px solid #c9c9c9;
  border-bottom:1px solid #c9c9c9;padding:9px 0}
.slip .lttab tfoot td:first-child{text-transform:uppercase;font-size:12px;letter-spacing:.02em}
.slip .ltsig.plain i{margin:10px 0 6px}

/* ---------- profile ---------- */
.pfhead{display:flex;align-items:center;gap:20px;padding:20px 22px;flex-wrap:wrap}
.pfpic{position:relative;flex:none;width:84px;height:84px;border-radius:50%;background:var(--sunk);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:visible}
.pfpic img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.pfpic > span{font-family:'Newsreader','Bodoni Moda',Georgia,serif;font-size:28px;color:var(--ink3);letter-spacing:.02em}
.pfpicbtn{position:absolute;left:50%;transform:translateX(-50%);bottom:-11px;white-space:nowrap;
  background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:2px 9px;font-size:11px;
  color:var(--ink2);cursor:pointer;box-shadow:var(--shadow)}
.pfpicbtn:hover{border-color:var(--accent);color:var(--ink)}
.pfwho{flex:1;min-width:200px}
.pfwho h2{font-family:'Newsreader','Bodoni Moda',Georgia,serif;font-size:24px;font-weight:500;margin:0}
.pfwho p{margin:3px 0 0;color:var(--ink2);font-size:13.5px}
.pfleg{margin:4px 0 0;font-size:12.5px;color:var(--ink3)}
.pfupd{display:block;margin-top:5px;font-size:12px;color:var(--ink3)}
.pfmeter{flex:0 0 auto;min-width:190px;text-align:right}
.pfmeter b{display:block;font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:6px}
.pfmeter span{display:block;font-size:12.5px;color:var(--ink2)}
.pfbar{height:7px;border-radius:99px;background:var(--sunk);overflow:hidden}
.pfbar i{display:block;height:100%;border-radius:99px;transition:width .25s ease}
.pfbar.sm{height:6px;max-width:150px;margin-bottom:3px}
/* ---- the Friday Five, started and stopped (row 20) ---- */
.fivego{margin-bottom:18px}
.fgrow{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;padding:4px 0 14px}
.fgrow + .fgrow{border-top:1px solid var(--line2);padding-top:16px}
.fgrow > div:first-child{flex:1 1 320px;min-width:0}
.fgrow b{display:block;font-size:14.5px;margin-bottom:3px}
.fgrow p{margin:0;font-size:13px;color:var(--ink2);line-height:1.5;max-width:70ch}
.fgrow .btn{flex:none;align-self:center}
.fgdate{display:flex;flex-direction:column;gap:4px;flex:none;align-self:center}
.fgdate span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.fgdate input{padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel);
  font:inherit;font-size:13.5px;color:var(--ink)}
.fgdone{margin:2px 0 0;padding:10px 13px;border-radius:10px;background:var(--accentSoft);
  color:var(--accent2);font-size:13.5px;font-weight:600}
@media(max-width:720px){
  .pfmeter{flex:1 1 100%;min-width:0;text-align:left;
    display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:baseline}
  .pfmeter .pfbar{grid-column:1 / -1;margin-bottom:8px}
  .pfmeter b{margin-top:0;font-size:20px}
  .pfmeter span{text-align:right}
}
/* The one thing on the phone's document list that is pressable, so it looks
   pressable and is big enough to press with a thumb. */
.mpsee{appearance:none;border:1px solid var(--line);background:var(--panel);
  border-radius:99px;padding:5px 12px;font:inherit;font-size:12.5px;font-weight:600;
  color:var(--ink2);cursor:pointer;min-height:30px}
.mpsee:hover,.mpsee:focus-visible{border-color:var(--accent);color:var(--ink)}
.pfup{display:inline-block;margin-left:10px;background:var(--panel2);border:1px solid var(--line);
  border-radius:7px;padding:2px 10px;font-size:12px;color:var(--ink2);cursor:pointer}
.pfup:hover{border-color:var(--accent);color:var(--ink)}
.pffile{display:inline-flex;align-items:baseline;gap:8px}
.pffile b{font-weight:600;font-size:13px}
.pffile em{font-style:normal;font-size:11.5px;color:var(--ink3)}
.pffile a{color:var(--c1)}
.pfdate{width:auto;padding:4px 9px;font-size:12.5px}

/* ---------- request mode ---------- */
.rqmode{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.rqmode button{text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;display:flex;flex-direction:column;gap:2px;transition:border-color .14s,background .14s}
.rqmode button:hover{border-color:var(--accent)}
.rqmode button b{font-size:14.5px;font-weight:600;color:var(--ink)}
.rqmode button span{font-size:12px;color:var(--ink2)}
.rqmode button[aria-pressed="true"]{background:var(--accentSoft);border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent)}
.pfhint{display:block;margin-top:6px;font-size:12px;color:var(--ink3);line-height:1.5}

/* --- people directory --- */
.pa{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:var(--sunk);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.pa img{width:100%;height:100%;object-fit:cover;display:block}
.pa span{font-family:'Newsreader','Bodoni Moda',Georgia,serif;font-size:16px;color:var(--ink2);letter-spacing:.02em}
.pa.big{width:82px;height:82px}
.pa.big span{font-size:30px}
/* ---- organisation tree: top down ---- */
.orgwrap{overflow-x:auto;padding-top:8px;padding-bottom:4px}
.ot, .ot ul{list-style:none;margin:0;padding:0}
.ot{display:flex;justify-content:center;min-width:min-content}
.ot ul{display:flex;justify-content:center;padding-top:34px;position:relative}
.ot ul::before{content:'';position:absolute;top:0;left:50%;width:1px;height:34px;background:var(--line)}
.ot li{position:relative;padding:34px 18px 0;text-align:center;display:flex;flex-direction:column;align-items:center}
.ot li::before,.ot li::after{content:'';position:absolute;top:0;right:50%;width:50%;height:34px;
  border-top:1px solid var(--line)}
.ot li::after{right:auto;left:50%;border-left:1px solid var(--line)}
.ot li:only-child{padding-top:0}
.ot li:only-child::before,.ot li:only-child::after{display:none}
.ot li:first-child::before,.ot li:last-child::after{border:0}
.ot li:last-child::before{border-right:1px solid var(--line);border-radius:0 7px 0 0}
.ot li:first-child::after{border-radius:7px 0 0 0}
.ot > li{padding-top:0}
.ot > li::before,.ot > li::after{display:none}

/* a manager with many reports: one spine, names down it */
.ot ul.stack{display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  margin-left:50%;padding:26px 0 4px;border-left:1px solid var(--line)}
.ot ul.stack::before{display:none}
.ot ul.stack > li{padding:0 0 0 20px;text-align:left;align-items:flex-start;display:block}
.ot ul.stack > li::before{content:'';position:absolute;left:0;top:23px;width:20px;height:1px;
  background:var(--line);border:0;border-radius:0}
.ot ul.stack > li::after{display:none}
.ot ul.stack > li:last-child{position:relative}
.ot ul.stack > li:last-child::after{content:'';display:block;position:absolute;left:-1px;top:24px;bottom:-8px;
  width:1px;background:var(--panel);border:0}

.otdept{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:184px;padding:9px 14px;border-radius:9px;
  background:var(--sunk);border:1px solid var(--line);white-space:nowrap}
.otdept .odn{font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--ink2)}
.otdept .odc{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--panel);
  border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;color:var(--ink3);font-variant-numeric:tabular-nums}
.otdept.rev{background:var(--accentSoft);border-color:transparent}
.otdept.rev .odn{color:var(--accent2)}
.otdept.rev .odc{background:var(--panel);border-color:var(--accentSoft);color:var(--accent2)}
.otn{display:inline-flex;align-items:center;gap:9px;padding:8px 13px 8px 8px;border:1px solid var(--line);
  border-radius:99px;background:var(--panel);cursor:pointer;font:inherit;text-align:left;
  transition:border-color .12s,background .12s;white-space:nowrap}
.otn:hover{border-color:var(--accent);background:var(--panel2)}
.otn .pa{width:30px;height:30px;font-size:10.5px}
.otn .otwho{display:flex;flex-direction:column;gap:1px;min-width:0}
.otn .otn1{font-weight:600;font-size:13.5px;color:var(--ink);line-height:1.25}
.otn .otn2{font-size:11.5px;color:var(--ink2);line-height:1.25}
.otn .otd{font-size:10px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;
  padding:2px 7px;border-radius:99px;background:var(--sunk);color:var(--ink3)}
.otn .otd.rev{background:var(--accentSoft);color:var(--accent2)}
/* stacked in a column: keep the box narrow and the text wrapped */
.otn.col{flex-direction:column;align-items:center;text-align:center;gap:6px;width:172px;
  padding:12px 11px;border-radius:12px;white-space:normal}
.otn.col .otwho{align-items:center;text-align:center}
.otn.col .otn1{font-size:13px}
.otn.col .otn2{font-size:11px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:10px}
.pcard{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto auto;
  column-gap:11px;row-gap:1px;align-items:start;text-align:left;padding:11px 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);cursor:pointer;font:inherit;transition:border-color .12s,background .12s}
.pcard:hover{border-color:var(--accent);background:var(--panel2)}
.pcard .pa{grid-row:1/4}
.pcard .pn{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
.pcard .pt{font-size:12px;color:var(--ink2);line-height:1.3}
.pcard .ps{font-size:11.5px;line-height:1.4;margin-top:2px}
.pfact{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.pfact .btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.btn.wa{background:#25D366;border-color:#25D366;color:#08301A}
.btn.wa:hover{filter:brightness(.94)}
.walink{display:inline-flex;vertical-align:-3px;margin-left:7px;color:#1FA855}
.walink:hover{color:#25D366}
.wnb{white-space:nowrap}
.wholink{background:none;border:0;padding:0;font:inherit;color:var(--accent2);cursor:pointer;
  text-align:left;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line2)}
.wholink:hover{text-decoration-color:var(--accent)}
.kv.wide dd a{color:var(--accent2);text-decoration:underline;text-underline-offset:2px}
.pfhint b{color:var(--ink2)}
.rqnote{margin:-6px 0 16px;padding:10px 12px;background:var(--panel2);border-radius:8px;
  font-size:12.5px;color:var(--ink2);line-height:1.55}
select:disabled,select option:disabled{color:var(--ink3)}

.col{display:flex;flex-direction:column;gap:16px;min-width:0}

/* --- celebration strip on home --- */
.celeb{display:flex;align-items:center;gap:15px;padding:13px 20px;border-radius:var(--r);
  border:1px solid var(--accent);background:var(--accentSoft);box-shadow:var(--shadow)}
.celeb.quiet{border-color:var(--line);background:var(--panel)}
.celeb .cmark{flex:none;display:flex;color:var(--accent)}
.celeb.quiet .cmark{color:var(--ink3)}
.celeb .ctext{min-width:0;flex:1}
.celeb .ck{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent2);font-weight:600;margin-bottom:3px}
.celeb.quiet .ck{color:var(--ink3)}
.celeb .ctext p{margin:0;font-size:15px;color:var(--ink);line-height:1.4}
.celeb .ctext p b{font-weight:600}
.celeb .cnext{display:block;margin-top:4px;font-size:12.5px;color:var(--ink2)}
.celeb .btn{flex:none}
.celeb .cdone{flex:none;font-size:12.5px;color:var(--good);font-weight:600}

/* --- profile checkbox --- */
.pfchk{display:flex;align-items:flex-start;gap:9px;margin-top:10px;cursor:pointer;
  text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink);margin-bottom:0}
.pfchk input{width:15px;height:15px;flex:none;margin-top:1px;accent-color:var(--accent);padding:0}
.pfchk span{line-height:1.45}

/* --- morning email --- */
.dseg{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.dseg button{position:relative;min-width:52px;padding:7px 12px 8px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);color:var(--ink2);cursor:pointer;font:inherit;text-align:center}
.dseg button b{display:block;font-size:12px;font-weight:600;color:var(--ink)}
.dseg button em{display:block;font-style:normal;font-size:11px;color:var(--ink3);margin-top:1px}
.dseg button[aria-pressed="true"]{border-color:var(--accent);background:var(--accentSoft);box-shadow:inset 0 0 0 1px var(--accent)}
.dseg button i{position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%}
.dseg button i.cel{background:var(--accent)}
.dseg button.off{opacity:.42;background:var(--sunk)}
.dseg button.off[aria-pressed="true"]{opacity:1;border-color:var(--ink3);background:var(--sunk);box-shadow:inset 0 0 0 1px var(--ink3)}
.dskip{margin:0 0 14px;padding:10px 14px;border-radius:8px;background:var(--sunk);
  border-left:3px solid var(--ink3);font-size:12.5px;color:var(--ink2);line-height:1.55}
.dskip b{color:var(--ink)}
.mail{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel2)}
.mhead{padding:11px 18px;background:var(--sunk);border-bottom:1px solid var(--line)}
.mrow{display:flex;gap:12px;font-size:12.5px;color:var(--ink2);padding:2px 0}
.mrow span{width:52px;flex:none;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);padding-top:2px}
.mrow b{color:var(--ink);font-weight:600;min-width:0}
.mbody{background:var(--panel);padding:22px 26px 20px}
.mbrand{font-family:'Newsreader','Bodoni Moda',Georgia,serif;font-size:19px;font-weight:600;color:var(--ink);
  padding-bottom:13px;border-bottom:2px solid var(--accent);margin-bottom:6px}
.mbrand em{display:block;font-family:'IBM Plex Sans',sans-serif;font-style:normal;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:400;margin-top:3px}
.dsec{padding-top:17px}
.dsec h4{margin:0 0 9px;font-family:'IBM Plex Sans',sans-serif;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3);font-weight:600}
.dcel{margin:0 0 7px;font-size:15px;color:var(--ink);line-height:1.5;padding-left:30px;position:relative}
.dcel span{position:absolute;left:0;top:2px;display:flex;color:var(--accent)}
.dhol{margin:0 0 8px;font-size:14.5px;color:var(--ink);padding:9px 12px;border-radius:8px;
  background:var(--accentSoft);border-left:3px solid var(--accent)}
.dtab{width:100%;border-collapse:collapse;font-size:13.5px}
.dtab td{padding:6px 0;border-bottom:1px solid var(--line2);color:var(--ink2)}
.dtab td b{color:var(--ink);font-weight:600}
.dtab td.r{text-align:right;color:var(--ink3);font-size:12.5px;white-space:nowrap}
.dlist{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink2);line-height:1.75}
.dlist b{color:var(--ink);font-weight:600}
.dnote{margin:9px 0 0;font-size:12.5px;color:var(--ink3)}
.dann{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.6}
.dann b{color:var(--ink);font-size:14.5px}
.mfoot{margin:20px 0 0;padding-top:13px;border-top:1px solid var(--line2);font-size:11.5px;color:var(--ink3);line-height:1.55}
.dpara{margin:0 0 11px;font-size:14px;color:var(--ink2);line-height:1.62}
.dpara b{color:var(--ink);font-weight:600}
.dsec .dpara:last-child{margin-bottom:0}
.dtab td:first-child{color:var(--ink2)}
.mlist{padding:6px 0 4px;max-height:none}
.mgrp{padding:14px 18px 5px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.mgrp:first-child{padding-top:6px}
.mlist button{display:block;width:100%;text-align:left;background:none;border:0;border-left:3px solid transparent;
  padding:7px 18px 8px;cursor:pointer;font:inherit}
.mlist button:hover{background:var(--panel2)}
.mlist button b{display:block;font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.35}
.mlist button em{display:block;font-style:normal;font-size:11.5px;color:var(--ink3);margin-top:1px}
.mlist button[aria-pressed="true"]{background:var(--accentSoft);border-left-color:var(--accent)}
.mlist button[aria-pressed="true"] b{font-weight:600;color:var(--ink)}

@page{size:A4;margin:0}
.printhead{display:none}
@page{size:A4 portrait;margin:0}
@media print{
  html,body{background:#fff;margin:0!important;padding:0!important;height:auto!important;min-height:0!important}
  #app,main{height:auto!important;min-height:0!important;margin:0!important;padding:0!important;display:block!important}
  .content{gap:0!important;display:block!important;min-height:0!important}
  .rail,.topbar,.filterbar,.bellpop,.conbar,#login,.tip,.tabbar,.sheetwrap,.toast,
  .nagwrap,.topsearch,.phonetab{display:none!important}
  body{padding-bottom:0!important}
  main,main.wide,main.fixed{height:auto!important;overflow:visible!important}
  .content{padding:0!important;max-width:none!important}
  #app{display:block!important}
  .panel{display:none!important}
  /* Everything that is NOT a panel is chrome around the document: a notice
     bar, a segmented row, a back button, the profile nudge. Hiding panels
     alone left all of it on the paper, and on a phone — where the notices
     stack up before the payslip — the print preview was a screenshot of the
     app with the payslip somewhere near the bottom. This is the fix for
     'Not able to save payslip pdf.' */
  body:not(.printinv) #view > *:not(.panel){display:none!important}
  .panel:has(.slwrap){display:block!important;border:0!important;box-shadow:none!important}
  /* the invoice list, printed landscape and fitted to the page */
  body.printinv{ }
  body.printinv .panel:has(.invtable){display:block!important;border:0!important;box-shadow:none!important}
  body.printinv .panel:has(.invtable)>header,body.printinv .expbar,body.printinv .cap,
  body.printinv .rawbox{display:none!important}
  body.printinv .printhead{display:block;margin:0 0 8px}
  body.printinv .printhead b{font-family:'Newsreader','Bodoni Moda',Georgia,serif;font-size:15pt;display:block}
  body.printinv .printhead span{font-size:8pt;color:#5A4E63}
  body.printinv .tw,body.printinv .invscroll{overflow:visible!important;max-height:none!important;height:auto!important}
  body.printinv .invtable{width:100%;font-size:6.6pt;border-collapse:collapse}
  body.printinv .invtable th,body.printinv .invtable td{padding:2.5px 4px!important;white-space:normal!important;
    border-bottom:.4pt solid #ddd;position:static!important;background:#fff!important}
  body.printinv .invtable thead th{background:#F0ECF2!important;font-size:6pt;letter-spacing:.02em}
  body.printinv .invtable .sar,body.printinv .invtable .pill .dt{display:none}
  body.printinv .invtable tfoot .tot td{border-top:.8pt solid #2A1B33;font-weight:700}
  .slwrap.printonly{display:flex!important}
  .panel:has(.slwrap) .mnet,.panel:has(.slwrap) .mlines,.panel:has(.slwrap) .pad,
  .panel:has(.slwrap) .cap{display:none!important}
  body.printinv thead{display:table-header-group}
  body.printinv tfoot{display:table-row-group}   /* totals once, at the end */
  /* named page, so landscape applies only to the invoice list - a payslip or a
     letter printed from the same stylesheet stays portrait */
  body.printinv{page:landsheet}
  @page landsheet{size:A4 landscape;margin:9mm}
  .panel:has(.slwrap)>header{display:none!important}
  .slwrap{background:#fff;padding:0;overflow:visible;display:block}
  .slip{border:0;border-radius:0;box-shadow:none;width:210mm;min-height:0;height:auto;max-height:297mm;overflow:hidden;
    padding:13mm 14mm;margin:0;page-break-after:avoid;break-after:avoid;break-inside:avoid}
}


/* ---------- sign in ---------- */
#login .formside{position:relative}
.lgmsg{margin:0 0 14px;padding:10px 13px;border-radius:9px;font-size:13.5px;line-height:1.45}
.lgmsg.bad{background:var(--badBg);color:var(--bad);border:1px solid color-mix(in oklab,var(--bad) 26%,transparent)}
.lgmsg.good{background:var(--goodBg);color:var(--good);border:1px solid color-mix(in oklab,var(--good) 26%,transparent)}
.lgsmall{margin:14px 0 0;font-size:13px;text-align:center}
.lgsmall a{color:var(--ink2)}
.lgsmall a:hover{color:var(--accent2)}
#lgGo[disabled]{opacity:.6;cursor:default}
.toast.bad{background:var(--bad);color:#fff}

/* ---------- the running clock ----------
   b.ciclock, not .ciclock: the shell already styles a b inside .cibox, and a
   bare class loses to it on specificity. */
.buildno{display:block;margin-top:10px;font-size:10.5px;letter-spacing:.06em;
  color:var(--brandDim);opacity:.7;font-variant-numeric:tabular-nums}

/* ---------- the opening moment ---------- */
#boot{position:fixed;inset:0;z-index:300;background:var(--brand);color:var(--brandInk);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
#boot.hidden{display:none}
/* THE SAME MARK, TWICE.
 *
 *   'Check why the loading Logo and the Page Logo isn't the same'     -- Avin
 *
 * They were two separate sets of rules describing the same lockup — a
 * different typeface for One, a differently placed crown, and a divider drawn
 * as a border in one place and a pseudo-element in the other. Two descriptions
 * of one thing drift, and these had: a later rule changed every Bodoni Moda in
 * the file to Newsreader and spared the rail's wordmark by name, which left
 * the loading screen setting One in the wrong face.
 *
 * So the opening screen now wears .appmark, the same class the rail wears, and
 * this only says how big. There is one description of the mark, and nothing
 * can change one copy of it without changing both. */
.appmark.boot{gap:12px}
.appmark.boot img{width:210px;top:11px}
.appmark.boot .one{font-size:44px;padding-left:16px}
.appmark.boot .one::before{height:40px}
.appmark.boot .crown{width:33px;right:23px;bottom:calc(100% - 7px)}
.bootbar{width:132px;height:2px;background:rgba(242,236,245,.18);border-radius:2px;overflow:hidden}
.bootbar i{display:block;width:40%;height:100%;background:var(--accent);border-radius:2px;
  animation:bootslide 1.15s ease-in-out infinite}
@keyframes bootslide{
  0%   {transform:translateX(-110%)}
  100% {transform:translateX(360%)}
}
@media(prefers-reduced-motion:reduce){ .bootbar i{animation:none;width:100%;opacity:.5} }

/* ---------- the profile, in rows ---------- */
.frow{display:grid;gap:0 16px;align-items:start}
.frow.c1{grid-template-columns:1fr}
.frow.c2{grid-template-columns:1fr 1fr}
.frow.c3{grid-template-columns:1fr 1fr 1fr}
.frow .field{margin-bottom:14px}
.bdrow{display:grid;grid-template-columns:96px 1fr;gap:8px}
/* A field that is shown rather than typed. It sits on the same baseline as the
   inputs beside it so a row does not go ragged, but it carries no border and no
   background — the point is that there is nothing here to press. */
.pfread{min-height:38px;display:flex;align-items:center;gap:6px;font-size:15px;color:var(--ink)}
/* "Nothing on file" wherever a value is expected and absent. */
.miss{color:var(--ink3);font-style:italic}

/* ---------- a letter waiting to be read ----------
   One line that says a revision letter or a settlement is there, and opens it.
   It lives on My payslip at both widths, so its rules live at both widths. */
.revlink{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 16px;padding:14px 16px;
  background:var(--accentSoft);border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius:12px;font:inherit;text-align:left;cursor:pointer;color:var(--accent2)}
.revlink:hover{filter:brightness(.97)}
.revlink > svg:first-child{width:20px;height:20px;flex:none}
.revlink .rvgo{width:17px;height:17px;flex:none;margin-left:auto;opacity:.7}
.revlink b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.revlink i{display:block;font-style:normal;font-size:12.5px;opacity:.82;margin-top:1px}
@media(max-width:720px){ .revlink{margin:0;border-radius:0;border:0;border-top:1px solid var(--line2)} }

/* ---------- the settlement rail ----------
   Six segments across the top of an exit, saying where it has got to. It had
   no stylesheet at all, so a span, a b and an em ran together into
   "1 · doneDraftedby Avin Mascarenhas". Each segment is a small stack now:
   the number and the state on one line, what the step is under it, and who or
   when under that. */
.exrail .step{flex:1 1 150px;min-width:0;display:grid;
  grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto auto auto;
  column-gap:8px;row-gap:1px;align-content:start;
  padding:10px 13px;border:1px solid var(--line);background:var(--panel2)}
.exrail .step:first-child{border-radius:9px 0 0 9px}
.exrail .step:last-child{border-radius:0 9px 9px 0}
.exrail .step + .step{border-left:0}
.exrail .step i{grid-row:1;grid-column:1;width:22px;height:22px;border-radius:99px;
  background:var(--sunk);color:var(--ink3);display:grid;place-items:center;
  font-style:normal;font-size:11.5px;font-family:'IBM Plex Sans',system-ui,sans-serif}
.exrail .step .sw{grid-row:1;grid-column:2;align-self:center;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.exrail .step b{grid-row:2;grid-column:2;font-weight:500;font-size:13.5px;color:var(--ink2);
  line-height:1.25;overflow-wrap:break-word}
.exrail .step em{grid-row:3;grid-column:2;font-style:normal;font-size:11.5px;color:var(--ink3);
  line-height:1.3;overflow-wrap:break-word}
.exrail .step.done{background:var(--panel)}
.exrail .step.done i{background:var(--good);color:#fff}
.exrail .step.done b{color:var(--ink)}
.exrail .step.now{background:var(--accentSoft);border-color:var(--accent)}
.exrail .step.now i{background:var(--accent);color:var(--accentInk)}
.exrail .step.now .sw{color:var(--accent);font-weight:600}
.exrail .step.now b{color:var(--ink)}
@media(max-width:1100px){ .exrail{gap:8px}
  .exrail .step{flex:1 1 210px;border-radius:9px!important;border-left:1px solid var(--line)!important} }

/* The one button on a screen that undoes rather than advances. */
.btn.ghost.bad{color:var(--bad);border-color:color-mix(in srgb, var(--bad) 32%, var(--line))}
.btn.ghost.bad:hover{background:color-mix(in srgb, var(--bad) 9%, transparent);border-color:var(--bad)}
/* Inside the grid the same span stands for one blank cell among many, so it is
   a quiet dash rather than eight italic sentences a row. */
.dgrid .miss{font-style:normal;opacity:.5}

/* ---------- the staff documents grid ----------
   Five documents across and two things under each. There is no honest way to
   fit twelve columns into a panel, so the register keeps its real widths and
   scrolls sideways inside .tw rather than crushing a date into '16 Fe…'. It
   is narrower than it was with FOUR documents, because the paperclip stopped
   being a column of its own and became a mark in the expiry cell.
   The employee column is what you read down, so it is the widest and stays. */
.dgrid{min-width:1950px}
.dgrid th,.dgrid td{padding-left:9px;padding-right:9px}
/* The group heading: one document, spanning its two columns. */
.dgrid tr.dgrp th.grp{text-align:center;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink2);padding-bottom:3px}
/* A hairline at the start of each document, so the eye knows where one ends.
   On the heading it runs the full height; on a cell it is quieter. */
.dgrid th.b,.dgrid td.b{border-left:1px solid var(--line)}
.dgrid td.num{font-variant-numeric:tabular-nums;font-size:13.5px;white-space:nowrap}

/* ---------- the staff register ----------
   Twelve columns of somebody's own words — two of them addresses — so this one
   scrolls sideways like the documents grid, but its cells wrap instead of
   ending in an ellipsis. Avin: 'I am ok with horizontal scrolling, but need to
   see everything clearly', and half an address is not clearly. */
.rgstr{min-width:2000px}
/* ---- the heading stays while you work down the list ----
     'This header freeze it when scrolling down to see records'      -- Avin
   A sticky heading only sticks to something that scrolls, and .tw scrolls
   sideways but grows downwards for ever — so the heading was pinned to the
   top of a box that never moved and went off the screen with the page. A
   height turns each company's block into a real scrollport: the two heading
   rows stay, the employee column stays with them, and the company name above
   stays too because .regbar is already sticky.
   Two heading rows, so the second is offset by the height of the first. */
.tw-dgrid, .tw-rgstr{max-height:62vh}
.dgrid thead th, .rgstr thead th{position:sticky;z-index:5;background:var(--panel2)}
.dgrid thead tr.dgrp th, .rgstr thead tr.dgrp th,
.dgrid thead tr.dgrp th.grp, .rgstr thead tr.dgrp th.grp{
  top:0;height:28px;line-height:28px;padding-top:0;padding-bottom:0}
.dgrid thead tr:last-child th, .rgstr thead tr:last-child th{top:29px}
/* The employee column crosses both — sticky left and, in the heading, sticky
   top as well, so the corner does not slide out from under the words. */
.dgrid th.s1, .dgrid td.s1{position:sticky;left:0;background:var(--panel)}
.dgrid thead th.s1{background:var(--panel2);z-index:7}
.dgrid tbody td.s1{z-index:4;box-shadow:8px 0 10px -10px rgba(0,0,0,.35)}
.dgrid thead th.s1{box-shadow:8px 0 10px -10px rgba(0,0,0,.35)}
.rgstr th,.rgstr td{padding-left:9px;padding-right:9px;vertical-align:top}
.rgstr td{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45}
.rgstr td.nw{white-space:nowrap}
/* Left, not centred. A heading centred over four columns has its middle off
   the screen as soon as the table is scrolled, and what is left on the screen
   is half a word — 'RY' where HOME COUNTRY should be. Against the left edge of
   its own group it is either readable or gone. */
.rgstr tr.dgrp th.grp{text-align:left;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink2);padding-bottom:3px}
/* 'the name column is what you read down' — so it stays on the screen while
   the rest of the row goes past it. */
.rgstr thead th:first-child,
.rgstr tbody tr:not(.coband) td:first-child{position:sticky;left:0;z-index:4;background:var(--panel)}
.rgstr thead th:first-child{background:var(--panel2);z-index:8}
.rgstr tbody tr:not(.coband) td:first-child{box-shadow:8px 0 10px -10px rgba(0,0,0,.35)}
.rgstr tbody tr:hover td:first-child{background:var(--panel2)}
.rgstr th.b,.rgstr td.b{border-left:1px solid var(--line)}
.rgstr .miss{font-style:normal;opacity:.5}
/* The copy the employee uploaded: one icon, sitting after the expiry date
   rather than in a column of its own — which is what let a fifth document
   onto the register without making it wider. */
.dgrid td.n.withclip{white-space:nowrap}
.dgrid td.n.withclip .clip{margin-left:5px;vertical-align:middle}
.clip{font-size:15px;line-height:1;background:none;border:0;padding:3px 5px;border-radius:6px;
  color:var(--ink2);cursor:pointer}
.clip:hover{background:var(--panel2);color:var(--ink)}
.clip.no{opacity:.32;cursor:default;filter:grayscale(1)}
.clip.no:hover{background:none}
.pfgrid{align-items:stretch}
.pfgrid > .panel{display:flex;flex-direction:column;height:100%}
.pfgrid > .panel > .pad{flex:1}
/* Change sits on the rim of the photograph; Remove goes under it, not across
   the name beside it. */
.pfhead .pfpic{margin-bottom:16px}
.pfpicdel{position:absolute;left:50%;transform:translateX(-50%);bottom:-32px;
  white-space:nowrap;border:0;background:none;color:var(--ink3);
  font:inherit;font-size:11px;cursor:pointer;text-decoration:underline;padding:0}
.pfpicdel:hover{color:var(--bad)}
@media(max-width:900px){ .frow.c2,.frow.c3{grid-template-columns:1fr} }

.fxf{width:104px}
.fxf.hidden{display:none}
.lookbtn{border:1px solid var(--line);background:var(--panel);color:var(--ink2);
  border-radius:7px;padding:2px 9px;font:inherit;font-size:12px;cursor:pointer}
.lookbtn:hover{border-color:var(--accent);color:var(--accent2)}
#lookWrap{position:fixed;inset:0;z-index:200}
#lookWrap.hidden{display:none}
.lookbg{position:absolute;inset:0;background:rgba(20,14,24,.62)}
.look{position:absolute;inset:32px;margin:0 auto;display:flex;
  flex-direction:column;background:var(--panel);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.look header{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--panel2)}
.look header b{font-size:15px;white-space:nowrap}
.look header span{color:var(--ink3);font-size:12.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.look header .btn{padding:5px 12px;font-size:13px}
.look header .btn:first-of-type{margin-left:auto}
.lookbody{flex:1;min-height:0;background:var(--sunk);display:flex;
  align-items:center;justify-content:center;overflow:auto}
.lookbody iframe{width:100%;height:100%;border:0;background:#fff}
.lookbody img{max-width:100%;max-height:100%;object-fit:contain;display:block}
/* The viewer's own bar, on a phone.
 *
 * It was one row: title, subtitle, and two buttons pushed to the right by
 * margin-left:auto. On a 390-pixel screen there is no right to push them to,
 * so 'Print or save as PDF' came out one word per line, four lines tall,
 * with the subtitle crushed into three characters beside it. Two rows
 * instead — what you are looking at, then what you can do with it — and the
 * buttons share the second row evenly. */
@media(max-width:720px){
  .look{inset:12px}
  .look header{flex-wrap:wrap;gap:8px 10px;padding:10px 12px}
  .look header b{flex:1 1 100%;min-width:0;white-space:normal;font-size:14.5px;line-height:1.3}
  .look header span{flex:1 1 100%;min-width:0;white-space:normal;text-overflow:clip;
    font-size:12px;margin-top:-4px}
  .look header .btn{flex:1 1 0;min-width:0;white-space:nowrap;text-align:center;
    justify-content:center;padding:9px 10px;font-size:13px}
  .look header .btn:first-of-type{margin-left:0}
}

b.ciclock{display:flex;align-items:center;gap:11px;font-weight:inherit}
b.ciclock .citime{font-variant-numeric:tabular-nums;letter-spacing:.5px;
  font-feature-settings:'tnum' 1}
b.ciclock .cidot{display:block;width:9px;height:9px;border-radius:50%;
  background:var(--good);flex:none;
  box-shadow:0 0 0 0 color-mix(in oklab,var(--good) 60%,transparent);
  animation:cipulse 2s ease-out infinite}
@keyframes cipulse{
  0%   {box-shadow:0 0 0 0 color-mix(in oklab,var(--good) 55%,transparent)}
  70%  {box-shadow:0 0 0 9px color-mix(in oklab,var(--good) 0%,transparent)}
  100% {box-shadow:0 0 0 0 color-mix(in oklab,var(--good) 0%,transparent)}
}
@media(prefers-reduced-motion:reduce){ b.ciclock .cidot{animation:none} }

/* The day when it is over. Same clock, same place, same width — the dot
   stops pulsing and goes grey, which is the whole difference between 'you
   are on the clock' and 'that was your day'. */
b.ciclock .cidot.done{background:var(--ink3);animation:none;box-shadow:none}

/* ---- the leave page: one card per kind, on a rail ----
   Ten kinds in one row that scrolls sideways rather than two rows of five.
   Avin: '10 blocks looks a lot. Can we use one row only and a scroller?' */
.lvrail{position:relative;margin-bottom:14px}
.lvgrid{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;
  padding:2px 46px 8px 2px;scrollbar-width:thin}
.lvgrid::-webkit-scrollbar{height:7px}
.lvgrid::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.lvnext{position:absolute;right:0;top:calc(50% - 4px);transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--panel);
  color:var(--ink2);font-size:20px;line-height:1;cursor:pointer;box-shadow:var(--shadow);z-index:2}
.lvnext:hover{color:var(--accent2);border-color:var(--accent)}
.lvrail::after{content:'';position:absolute;right:0;top:0;bottom:9px;width:64px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--bg) 78%)}
.lvc{flex:0 0 208px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 14px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow)}
.lvc.na{background:var(--sunk)}
.lvk{font-size:13px;font-weight:600;line-height:1.25}
.lvn{display:flex;gap:18px;margin-top:auto}
.lvn span{display:flex;flex-direction:column}
.lvn b{font-size:21px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.lvn i{font-style:normal;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.lvf{font-size:11.5px;color:var(--ink3);line-height:1.35;min-height:3.9em}
.lvsplit{display:grid;grid-template-columns:340px minmax(0,1fr);gap:14px;align-items:stretch}
/* The one number anybody opens this form to see, so it does not read as
   another grey note. */
.bkline{background:var(--panel2)}
.bkline.over{background:color-mix(in srgb,var(--bad) 7%,var(--panel));
  border-left-color:var(--bad)}
.bkline.over b{color:var(--bad)}
@media(max-width:900px){ .lvsplit{grid-template-columns:1fr} }

/* The joining-date box on Staff Records. A plain text box in the app's own
   date wording — '01 Sep 2019' — rather than a native date input, which
   renders as 09/15/2026 in this locale. Same box as Meeting rooms. */
.jform input.srdate{max-width:190px;font-variant-numeric:tabular-nums;font-weight:600}
/* .cibox b is the 26px number. The times in the line UNDER it are bold, not
   enormous — without this the 'IN 08:30 · OUT 17:00' line came out as four
   stacked headlines. */
.cibox .cin b{display:inline;font-size:inherit;font-weight:600;margin:0}

/* ---------- saving your profile ----------
   It follows you down the page: a Save button you have to go looking for is
   a Save button people do not press. */
.pfsave{position:fixed;left:50%;bottom:20px;transform:translate(-50%,140%);
  display:flex;align-items:center;gap:18px;padding:12px 14px 12px 20px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  box-shadow:0 2px 6px rgba(30,21,35,.06), 0 16px 40px -18px rgba(30,21,35,.45);
  z-index:60;transition:transform .22s ease, opacity .22s ease;opacity:0;
  pointer-events:none;max-width:calc(100vw - 32px)}
.pfsave.on,.pfsave.just{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.pfsave.on{border-color:var(--accent)}
.pfsave span{font-size:13.5px;color:var(--ink2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pfsave.on span{color:var(--ink);font-weight:600}
.pfsave.just span{color:var(--good);font-weight:600}
.pfsave button[disabled]{display:none}
@media(prefers-reduced-motion:reduce){ .pfsave{transition:none} }
@media(max-width:720px){ .pfsave{bottom:78px} }   /* clear of the tab bar */

/* The device list on your own profile borrows the panel it sits in; the only
   thing it needs of its own is that the 'this one' pill does not push the
   label onto a second line in a narrow column. */
.pfdev b{white-space:nowrap}
/* The turn-them-on card on the phone Home borrows .dbox wholesale; the only
   thing it needs of its own is a footer on the profile panel that does not
   read as another table row. */
/* One line, not three. It was a paragraph, then a button under it, then a
   second paragraph under that saying much the same thing — 'Notifications box
   can be reduced by bringing the second row along with the first row'. The
   sentence and the button share a line now and wrap only when there is no
   room for both. */
.belloff{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;
  border-top:1px solid var(--line2)}
.belloff p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.5}
/* ==================== My profile, in tabs ============================= */
.pftabs{display:flex;gap:2px;padding:0 20px;border-top:1px solid var(--line2);overflow-x:auto}
.pftabs button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:13px 16px;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink3);cursor:pointer;
  white-space:nowrap}
.pftabs button:hover{color:var(--ink2)}
.pftabs button[aria-pressed="true"]{color:var(--accent2);border-bottom-color:var(--accent)}
.mpmiss{padding:14px 0 0}

/* ---- a box that can be opened, saved, or not touched at all ---- */
.box > header{align-items:center;min-height:52px}
.box .ebtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  margin-left:auto;border-radius:9px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink3);cursor:pointer;padding:0;flex:none}
.box .ebtn + .ebtn{margin-left:6px}
.box .ebtn:hover{color:var(--accent2);border-color:var(--accent)}
.box .ebtn[disabled]{opacity:.45;cursor:default}
.box .ebtn[disabled]:hover{color:var(--ink3);border-color:var(--line)}
.boxacts{margin-left:auto;display:inline-flex;align-items:center}
.boxacts .ebtn{margin-left:0}
/* The tick is the only green thing on the page, and only once there is
   something to save. Grey until then, so it reads as 'nothing yet' rather
   than 'press me'. */
.box .ebtn.tick.live{color:#fff;background:var(--good);border-color:var(--good)}
.box .ebtn.tick.live:hover{filter:brightness(1.06)}
/* The padlock is given the pencil's box rather than its own size. Otherwise a
   header holding a 30px button is taller than one holding a 13px icon, and the
   three titles across a row sit at three different heights. */
.box > header .hint{margin-left:auto}
.box > header .hint ~ .boxlock,
.box > header .hint ~ .boxacts{margin-left:12px}
.boxlock{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;color:var(--ink3);flex:none}
.box.open{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.box.locked > header > h3{color:var(--ink2)}
.boxkv dd{font-family:inherit;min-height:30px}

/* ---- a row that carries its own pencil ----
   Every row is the same height open or shut, so pressing a pencil does not
   shunt the rows under it down the card — and three cards in a row stay the
   same height as each other whichever one is being edited. */
.boxkv dd.rowdd{display:flex;align-items:center;gap:8px}
.boxkv dd.rowdd .rowval{flex:1;min-width:0;line-height:1.45}
.boxkv dd.rowdd > input.boxin,.boxkv dd.rowdd > select.boxin{flex:1;min-width:0}
.rowacts{display:inline-flex;gap:5px;flex:none}
.box .ebtn.sm{width:26px;height:26px;border-radius:7px}
/* At rest the pencil is quiet; it wakes when the row is pointed at. On a touch
   screen there is no hover, so it never drops below legible. */
.boxkv dd.rowdd > .ebtn.pen{opacity:.5;transition:opacity .12s}
.boxkv dd.rowdd:hover > .ebtn.pen,.boxkv dd.rowdd > .ebtn.pen:focus-visible{opacity:1}
@media(hover:none){ .boxkv dd.rowdd > .ebtn.pen{opacity:1} }
.boxnone{color:var(--ink3);font-weight:500}
/* No nowrap. The note sits inside a flex row whose min-width is 0 so it can
   shrink; a nowrap child overrides that and pushed the whole page 81px wide
   at 1180. The sweep caught it. */
.boxwhy{color:var(--ink3);font-weight:500;font-size:12.5px}
/* With a Show button in the header, the pencil no longer needs to push itself
   all the way over — the button already did it. */
.box > header > .btn + .ebtn,.box > header > .btn + .boxacts{margin-left:9px}
.box input.boxin,.box select.boxin{width:100%;padding:6px 9px;font-size:13.5px;font-weight:600}
.box input.boxin.changed,.box select.boxin.changed{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 6%,var(--panel))}
/* A placeholder at the same weight as a value reads as a value. An empty
   expiry date must not look like a date somebody typed. */
.box input.boxin::placeholder{font-weight:500;color:var(--ink3)}
.box input.boxin.srdate{font-variant-numeric:tabular-nums}
.box input.boxin.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 6%,var(--panel))}
.boxnote{margin:14px 0 0;font-size:12.5px;color:var(--ink3);line-height:1.5}
.boxnote b{color:var(--ink2)}
/* Eight facts in one column left two thirds of the panel empty, so: two pairs
   across. The leading dl. is deliberate — the shell's own style block is
   inside the markup injected into the body, so it sits LATER in the document
   than anything appended to head and wins every tie on equal specificity.
   kv.wide is two classes; this is two classes and an element, which beats it. */
dl.boxkv.emp3{grid-template-columns:150px minmax(0,1fr) 150px minmax(0,1fr);column-gap:26px}
@media(max-width:1100px){ dl.boxkv.emp3{grid-template-columns:150px minmax(0,1fr)} }
.doctab{table-layout:fixed;width:100%}
.doctab col:nth-child(1){width:18%}
.doctab col:nth-child(2){width:24%}
.doctab col:nth-child(3){width:19%}
.doctab col:nth-child(4){width:15%}
.doctab col:nth-child(5){width:12%}
.doctab col:nth-child(6){width:12%}
/* Three boxes in a row are the same height whatever is in them. */
.grid.g3 > .panel.box{display:flex;flex-direction:column}
.grid.g3 > .panel.box > .pad{flex:1}

/* ---- the phone, which reads and does not write ---- */
.mplist{display:flex;flex-direction:column;gap:0}
.mprow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--line2)}
.mprow:last-child{border-bottom:0}
.mprow > span{font-size:13px;color:var(--ink3);flex:none}
.mprow > b{font-size:14px;font-weight:600;text-align:right;min-width:0;word-break:break-word}
.mprow > b i{font-style:normal}
.mpdoc{flex-wrap:wrap}
.mpdoc > em{flex-basis:100%;text-align:right;font-style:normal;font-size:12px;color:var(--ink3)}
.mpsay .pad{display:flex;flex-direction:column;gap:7px}
.mpsay b{font-size:15px}
.mpsay p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.5}
.mpsay p.mpwhy{font-size:12.5px;color:var(--ink3)}
/* choosing a photograph — pick it, put it where you want it, then it is cut */
.lookwrap.cropwrap{position:fixed;inset:0;z-index:120}
.cropwrap .croplook{inset:auto 0 auto 0;top:50%;transform:translateY(-50%);
  height:auto;max-height:calc(100vh - 32px);max-width:440px;margin:0 auto}
.cropbody{display:block;padding:18px 20px 4px;background:var(--panel);overflow:auto}
.croplook.wide{max-width:560px}
/* No aspect-ratio here on purpose: the shape is the picture's, and both the
   ratio and the width are written on the element — a max-height here would
   cap the height while width:100% held the width, and the box would quietly
   stop being the shape it says it is. */
.cropstage.band{height:auto;border-radius:14px;margin-inline:auto}
.cropshape{display:flex;gap:6px;margin-left:auto}
.cropshape button{border:0;background:var(--sunk);color:var(--ink2);border-radius:999px;
  padding:6px 13px;font-size:12.5px;font-weight:600;line-height:1.2}
.cropshape button[aria-pressed="true"]{background:var(--brand);color:var(--brandInk)}
.cropstage.band .cropmask{border-radius:14px;-webkit-mask-image:none;mask-image:none;
  box-shadow:0 0 0 1px rgba(20,14,24,.20) inset}
.cropstage{position:relative;width:320px;height:320px;margin:0 auto;
  border-radius:12px;overflow:hidden;background:var(--sunk);
  cursor:grab;touch-action:none;user-select:none}
.cropstage.dragging{cursor:grabbing}
/* .lookbody img caps a picture at max-width:100%, max-height:100% and
   object-fit:contain — right for a passport scan filling the viewer, and
   exactly wrong here: it held the height at the stage's 320px however wide
   the picture was told to be, so zooming stretched it sideways and left a
   band of empty stage above and below. */
.cropstage img{position:absolute;left:50%;top:50%;height:auto;
  max-width:none;max-height:none;object-fit:fill;display:block;
  /* the width and the nudge are both written on the element */
  pointer-events:none}
/* the circle, said with a shadow rather than a second image */
.cropmask{position:absolute;inset:0;pointer-events:none;border-radius:12px;
  box-shadow:0 0 0 999px rgba(20,14,24,.58) inset;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, transparent 0 140px, #000 142px);
  mask-image:radial-gradient(circle at 50% 50%, transparent 0 140px, #000 142px)}
.ckbox .ciwarn{margin:12px 14px 0}
.ckbox .ciwrow{margin-top:9px}
.crophint{font-size:12.5px;color:var(--ink3);margin:12px 0 0;text-align:center;line-height:1.5}
.croptools{display:flex;align-items:center;gap:14px;padding:12px 20px;flex:none;
  border-top:1px solid var(--line2);background:var(--panel)}
.croptools label{display:flex;align-items:center;gap:10px;flex:1;margin:0}
.croptools label span{font-size:11.5px;color:var(--ink3);text-transform:uppercase;
  letter-spacing:.04em;font-weight:600;white-space:nowrap}
.croptools input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}
.cropfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:none;
  padding:12px 20px 16px;border-top:1px solid var(--line2);background:var(--panel)}
/* Pick another is a label wrapping a hidden file input, and a bare label in
   this stylesheet is a small uppercase field name. It is a button here. */
.cropfoot label.btn{display:inline-flex;align-items:center;margin:0;
  font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink2)}
.cropfoot label.btn:hover{color:var(--accent2)}
.crophint2{font-size:12px;color:var(--ink3);flex:1 1 100%}
.cropbad{font-size:12.5px;color:var(--bad);flex:1 1 100%}

@media(max-width:480px){
  .cropwrap .croplook{inset:10px;top:10px;transform:none;max-height:calc(100vh - 20px)}
  .cropstage{width:280px;height:280px}
  .cropmask{-webkit-mask-image:radial-gradient(circle at 50% 50%, transparent 0 128px, #000 129px);
    mask-image:radial-gradient(circle at 50% 50%, transparent 0 128px, #000 129px)}
}
/* the letter, over the page — view and issue are the same picture */
/* .lookwrap on its own carries no positioning: only .lookwrap.ltmodal does,
   and without this the dialog lays itself out against the page instead of
   over it. */
.lookwrap.ltpwrap{position:fixed;inset:0;z-index:80}
.ltpwrap .ltplook{inset:24px;margin:0 auto;max-width:900px}
/* .lookbody is a centring FLEX box, which is right for a passport scan and
   wrong here: it put the letter, the date and the buttons in a row beside
   each other and pushed the letter off the left of the screen. */
.ltpbody{display:block;padding:0;background:var(--sunk);overflow:auto}
.ltpsheet{padding:20px 20px 8px;background:var(--sunk);display:block}
.ltpsheet .slip{width:100%;max-width:794px;min-height:0;margin:0 auto}
.ltplook header .ltpst{margin-left:auto;font-size:11.5px;font-weight:600;letter-spacing:.03em;
  padding:2px 9px;border-radius:99px;background:var(--sunk);color:var(--ink2)}
.ltplook header .btn:first-of-type{margin-left:12px}
.ltpdate{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:none;
  padding:13px 20px;border-top:1px solid var(--line2);background:var(--panel)}
.ltpdate label{display:flex;align-items:center;gap:10px;margin:0}
.ltpdate label span{font-size:11.5px;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;
  font-weight:600;white-space:nowrap}
.ltpdate input.srdate{width:150px;font-variant-numeric:tabular-nums;font-weight:600}
.ltpdate input.srdate.bad{border-color:var(--bad)}
.ltpdate select{max-width:280px}
.ltpbad{font-size:12.5px;color:var(--bad)}
.ltphint{font-size:12.5px;color:var(--ink3);flex:1 1 220px;min-width:0}
/* v1.57: the sales report preview — who gets it on the left, their email on the right */
.look.srlook{max-width:1240px}
.srbody{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,630px);background:var(--sunk)}
.srleft{overflow:auto;padding:16px 18px;background:var(--panel);border-right:1px solid var(--line)}
.srleft table{width:100%}
.srleft tr[data-srpick]{cursor:pointer}
.srleft tr[data-srpick]:hover td{background:var(--panel2)}
.srleft tr.on td{background:var(--accentSoft)}
.srleft td.n,.srleft th{white-space:nowrap}
.srleft .srhow{display:block;font-style:normal;font-size:12px;color:var(--ink3);margin-top:1px}
.srright{min-height:0;display:flex}
.srframe{flex:1;width:100%;height:100%;border:0;background:#F6F4F7}
.ltpfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:none;
  padding:13px 20px 16px;border-top:1px solid var(--line2);background:var(--panel)}

/* Printing it. #view's own print rules hide everything that is not a panel,
   and the popup is not a panel — so it says so louder, and then takes the
   paper for itself. */
@media print{
  body:not(.printinv) #view > .ltpwrap{display:block!important;position:static!important}
  .ltpwrap .lookbg,.ltpwrap .ltplook > header,
  .ltpwrap .ltpdate,.ltpwrap .ltpfoot{display:none!important}
  .ltpwrap .ltplook{position:static;inset:auto;margin:0;max-width:none;height:auto;
    box-shadow:none;background:#fff;border-radius:0;overflow:visible}
  .ltpwrap .ltpbody{overflow:visible;background:#fff;padding:0;display:block}
  .ltpwrap .ltpsheet{background:#fff;padding:0;overflow:visible}
  .ltpwrap .ltpsheet .slip{width:210mm;min-height:297mm;max-width:none;margin:0;box-shadow:none}
}

/* the template editor's own preview, on the letterhead rather than as a line
   of prose — 'a proper preview of letter with letterhead' */
.ltprev2{border-top:1px solid var(--line2);margin-top:16px;padding-top:14px}
.ltprev2 > .ltpk{display:block;font-size:11.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:9px}
.ltprev2 .slwrap{background:var(--sunk);padding:14px;border-radius:8px;
  max-height:300px;overflow:auto;display:block}
.ltprev2 .slwrap .slip{width:100%;max-width:720px;min-height:0;margin:0 auto}
.ltprev2 .ltpwho{font-size:12.5px;color:var(--ink3);margin:9px 0 0}
.ltfields{display:flex;flex-wrap:wrap;gap:6px}
.ltfields .ltchip{text-align:left}

@media(max-width:860px){
  .ltpwrap .ltplook{inset:12px;max-width:none}
  .ltpsheet{padding:12px 12px 6px}
}
.mail .mlink{color:var(--accent);font-weight:600;text-decoration:underline}
/* ==================== the salary, over time ============================ */
.dpop.histpop{width:min(1060px,100%)}
/* A clear gap, or it reads as '01 May 2025 See the trend' — one phrase, with
   the date looking like part of the link. */
.trendlink{margin-left:12px;font-size:12.5px;font-weight:600;color:var(--accent2);
  cursor:pointer;white-space:nowrap;background:none;border:0;padding:0;font-family:inherit}
.trendlink:hover{text-decoration:underline}
.schart{margin:0}
.schart svg{display:block;width:100%;height:auto}
.schart figcaption{margin-top:10px;font-size:12.5px;color:var(--ink3);line-height:1.5}
table.histtab{table-layout:fixed;width:100%}
table.histtab col:nth-child(1){width:16%}
table.histtab col:nth-child(2){width:13%}
table.histtab col:nth-child(3){width:14%}
table.histtab col:nth-child(4){width:13%}
table.histtab col:nth-child(5){width:16%}
table.histtab col:nth-child(6){width:28%}
/* Its own widths: the loader's table has five columns and histtab's colgroup
   is written for six, so the last column took the leftovers and the error
   sentence wrapped with room to spare beside it. */
table.histtab.loadtab col:nth-child(1){width:26%}
table.histtab.loadtab col:nth-child(2){width:13%}
table.histtab.loadtab col:nth-child(3){width:14%}
table.histtab.loadtab col:nth-child(4){width:13%}
table.histtab.loadtab col:nth-child(5){width:34%}
table.histtab tr.on td{background:color-mix(in srgb,var(--c1) 9%,var(--panel))}
table.histtab tr.rowbad td{background:color-mix(in srgb,var(--bad) 6%,var(--panel))}
/* A rule inside a key-value list, so 'what the figure is' and 'how it is
   paid and by whom' read as two groups rather than one long column. */
dt.kvsep{height:1px;background:var(--line2);margin:6px 0;padding:0}
/* Three boxes in a row, the same height whatever is in them. The grid already
   stretches the panels; this is so the PAD grows rather than leaving the
   closing sentence floating half way up a tall card. */
.grid.cf3 > .panel{display:flex;flex-direction:column}
.grid.cf3 > .panel > .pad{flex:1}

/* the edit column on the console screen */
table.histtab.edittab col:nth-child(1){width:15%}
table.histtab.edittab col:nth-child(2){width:12%}
table.histtab.edittab col:nth-child(3){width:13%}
table.histtab.edittab col:nth-child(4){width:11%}
table.histtab.edittab col:nth-child(5){width:13%}
table.histtab.edittab col:nth-child(6){width:30%}
table.histtab.edittab col:nth-child(7){width:6%}
table.edittab input.boxin{width:100%;padding:5px 8px;font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums}
table.edittab .ebtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink3);
  cursor:pointer;padding:0;flex:none}
table.edittab .ebtn:hover{color:var(--accent2);border-color:var(--accent)}
table.edittab .ebtn[disabled]{opacity:.45;cursor:default}
table.edittab .ebtn.tick.live{color:#fff;background:var(--good);border-color:var(--good)}
table.edittab .rowacts{display:inline-flex;gap:5px}
/* Quiet until the row is pointed at, legible always on a touch screen. */
table.edittab .ebtn.pen{opacity:.45;transition:opacity .12s}
table.edittab tr:hover .ebtn.pen,table.edittab .ebtn.pen:focus-visible{opacity:1}
@media(hover:none){ table.edittab .ebtn.pen{opacity:1} }
/* ============ who checks in, and when they are chased ================== */
.atwho{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.atwho label{display:flex;flex-direction:column;gap:6px}
.atwho label span{font-size:11px;letter-spacing:.04em;color:var(--ink3);text-transform:uppercase}
.atwho select{padding:9px 11px;font-size:13.5px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--ink);font-family:inherit;min-width:170px}
.atwho select[disabled]{opacity:.45}
/* On the boxes' baseline, not on their labels'. */
.atwho .btn{margin-bottom:0}

.atsay{margin:0 0 16px;font-size:13.5px;line-height:1.7;color:var(--ink2);max-width:84ch}
.atsay b{color:var(--ink)}
.atdone{margin:0 0 16px;font-size:13px;font-weight:600;color:var(--good)}

/* Two panels now, not one in two columns — they were reading as two halves of
   a single setting, and they are not: one is about a person, the other about
   everybody. */
.atsub{margin:18px 0 10px;padding-top:16px;border-top:1px solid var(--line2);
  font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
ul.atlist{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:7px}
ul.atlist li{font-size:13.5px;font-weight:600;color:var(--ink)}
ul.atlist li span{font-weight:400;color:var(--ink3);margin-left:7px}
.atnone{margin:0 0 10px;font-size:13.5px;color:var(--ink3)}
/* NO max-width here.
 *
 *   'Text is cut half way, we agreed not to do this'                -- Avin
 *
 * It was 56ch, which in a panel that is 800px wide wraps the paragraph at
 * roughly the halfway mark and leaves the right-hand half of the box empty —
 * exactly the wasted column width that keeps getting sent back. A measure
 * that suits a wide page is not a measure that suits a panel; the panel is
 * already half a screen, so it is its own measure.
 * The one place that DOES want a narrow column is the timings panel, where
 * this note sits beside the three rows rather than under them — .atwhenpad
 * sets 44ch for that case and only that case. */
.atcap{margin:0;font-size:12px;line-height:1.6;color:var(--ink3)}

.attimes{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.attimes label{display:grid;grid-template-columns:1fr 84px;gap:4px 14px;align-items:center}
/* The label is not uppercased here: the shell uppercases every label>span, and
   'REMIND THE EMPLOYEE' beside a box reads as shouting rather than a field. */
.attimes label span{font-size:13.5px;font-weight:600;color:var(--ink);text-transform:none;
  letter-spacing:0}
/* text-transform:none here too, not only on the span above it. The shell
   uppercases everything inside a label, and a sentence of helper prose set in
   capitals reads as shouting rather than as a note — the same trap the My
   profile build fell into. */
.attimes label em{grid-column:1;font-style:normal;font-size:12px;color:var(--ink3);
  line-height:1.5;text-transform:none;letter-spacing:0}
input.atin{grid-column:2;grid-row:1 / span 2;width:84px;padding:9px 10px;font-size:14px;
  font-weight:600;text-align:center;font-variant-numeric:tabular-nums;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);
  font-family:inherit}
input.atin:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accentSoft)}

/* The timings read as a list, not a form, until Edit is pressed.
   The note sits BESIDE the three rows rather than under them: the rows are
   620px in a panel twice that, and a column of dead space to the right of
   three short lines is exactly the thing that gets sent back. */
.atwhenpad{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);
  gap:12px 40px;align-items:start}
.atwhenpad > .attimes{grid-column:1}
.atwhenpad > .atcap{grid-column:2;grid-row:1;margin:0;max-width:44ch}
.atwhenpad > .srfail,.atwhenpad > .atdone{grid-column:1}
@media(max-width:1100px){
  .atwhenpad{grid-template-columns:1fr}
  .atwhenpad > .atcap{grid-column:1;grid-row:auto}
}
input.atin.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 6%,var(--panel))}

@media(max-width:900px){
  .atwho select{min-width:0;width:100%}
  .atwho label{flex:1 1 200px}
}

/* The Admin looks, the Super Admin changes. Same grid slot as the box it
   replaces, so the two rows line up whichever of them is reading. */
.atfix{grid-column:2;grid-row:1 / span 2;width:84px;padding:9px 10px;font-size:14px;
  font-weight:600;text-align:center;font-variant-numeric:tabular-nums;color:var(--ink2);
  border:1px solid var(--line2);border-radius:9px;background:var(--sunk)}

/* THE PAIR. Two boxes of equal size in the same row — and the same height as
   each other whichever has more in it, which is the rule Avin has had to say
   more than once. The grid does the width; stretch does the height. */
.grid.g2.atpair{align-items:stretch}
.grid.g2.atpair > .panel{display:flex;flex-direction:column}
.grid.g2.atpair > .panel > .pad{flex:1}
/* Side by side there is no room for a second column of prose, so the note
   goes back under the rows. */
.grid.g2.atpair .atwhenpad{grid-template-columns:1fr}
.grid.g2.atpair .atwhenpad > .atcap{grid-column:1;grid-row:auto}
.grid.g2.atpair .atwho{gap:12px}
.grid.g2.atpair .atwho label{flex:1 1 190px}
.grid.g2.atpair .atwho select{min-width:0;width:100%}
@media(max-width:1100px){ .grid.g2.atpair{grid-template-columns:1fr} }

/* The two headers line up even when one of them carries a button and the
   other does not — side by side, a header half a line taller than its
   neighbour is the first thing the eye catches. */
/* 74, which is what a header carrying Cancel and Save comes to. Anything
   less and the right-hand header grows past its neighbour the moment Edit is
   pressed, and the two panels stop lining up at the one time you are looking
   closely at them. */
.grid.g2.atpair > .panel > header{min-height:74px;align-items:center}
/* And the note follows the rows instead of being pushed to the foot of the
   panel by the stretch that keeps the two the same height. */
.grid.g2.atpair .atwhenpad{display:block}
.grid.g2.atpair .atwhenpad > .attimes{margin-bottom:16px}
.grid.g2.atpair .atwhenpad > .atcap{max-width:none}
/* ==================== the calendar ==================================== */
.calwrap{position:relative;display:block}
.calwrap input{padding-right:34px}          /* room for the button inside the box */
.calbtn{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:7px;background:none;color:var(--ink3);cursor:pointer;padding:0}
.calbtn:hover{color:var(--accent2);background:var(--sunk)}
.calbtn[aria-expanded="true"]{color:var(--accentInk);background:var(--accent)}

/* Over the page, not pushing it about: a calendar that reflows the rows below
   it moves the very box you are aiming at. */
.calpop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;width:266px;
  padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--panel);
  box-shadow:0 14px 34px rgba(0,0,0,.16)}
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.calhead b{font-size:13.5px;color:var(--ink)}
.calnav{width:27px;height:27px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--ink2);font-size:16px;line-height:1;cursor:pointer;padding:0}
.calnav:hover{color:var(--accent2);border-color:var(--accent)}

.caldow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:3px}
.caldow span{text-align:center;font-size:10.5px;letter-spacing:.03em;color:var(--ink3)}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.calx{display:block;height:30px}
.calday{height:30px;border:1px solid transparent;border-radius:8px;background:none;
  color:var(--ink);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;
  font-variant-numeric:tabular-nums;padding:0}
.calday:hover:not([disabled]){border-color:var(--accent);color:var(--accent2)}
/* The days that do not come off a leave balance, said in the picture rather
   than in a sentence underneath it. */
.calday.wk{color:var(--ink3);background:var(--sunk)}
.calday.hol{color:var(--bad);background:color-mix(in srgb,var(--bad) 9%,var(--panel))}
.calday.now{box-shadow:inset 0 0 0 1px var(--line)}
.calday.on{background:var(--accent);color:var(--accentInk);border-color:var(--accent)}
.calday.on:hover{color:var(--accentInk)}
.calday[disabled]{opacity:.3;cursor:default}

.calfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--line2)}
.calkey{font-size:10.5px;color:var(--ink3);display:inline-flex;align-items:center;gap:4px}
.calkey i{width:9px;height:9px;border-radius:3px;display:inline-block}
.calkey i.wk{background:var(--sunk);border:1px solid var(--line)}
.calkey i.hol{background:color-mix(in srgb,var(--bad) 28%,var(--panel));
  border:1px solid color-mix(in srgb,var(--bad) 45%,var(--line));margin-left:5px}
.calclr{border:0;background:none;color:var(--accent2);font-size:11.5px;font-weight:600;
  font-family:inherit;cursor:pointer;padding:0}
.calclr:hover{text-decoration:underline}

/* On a phone it opens against the right edge of the screen instead of running
   off it. The leave forecast is a desktop screen, but the control is not. */
@media(max-width:720px){
  .calpop{left:auto;right:0;width:min(266px,calc(100vw - 48px))}
}
/* ==================== the leave forecast ============================== */
.lfhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.lflab{font-size:13px;font-weight:600;color:var(--ink)}
/* How far ahead. Two choices, so a pair of buttons rather than a dropdown —
   one press instead of two, and both options readable without opening it. */
.lfseg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.lfseg button{padding:6px 13px;font-size:12.5px;font-weight:600;font-family:inherit;
  border:0;background:var(--panel);color:var(--ink2);cursor:pointer}
.lfseg button + button{border-left:1px solid var(--line)}
.lfseg button.on{background:var(--accent);color:var(--accentInk)}

.lftrips{display:grid;grid-template-columns:180px 180px max-content 32px;
  gap:9px 14px;align-items:center;justify-content:start}
.lfth{font-size:11px;letter-spacing:.04em;color:var(--ink3);text-transform:uppercase;
  align-self:end;padding-bottom:1px}
.lfdays{font-size:12.5px;font-weight:600;color:var(--accent2);white-space:nowrap}
.lfdel{width:32px;height:35px;border:1px solid var(--line);border-radius:9px;background:var(--panel);
  color:var(--ink3);font-size:17px;line-height:1;cursor:pointer}
.lfdel:hover:not([disabled]){color:var(--bad);border-color:var(--bad)}
.lfdel[disabled]{opacity:.35;cursor:default}
.lfadd{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:14px 0 20px}
input.lfin{width:100%;padding:9px 11px;font-size:13.5px;font-weight:600;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);color:var(--ink);font-family:inherit}
input.lfin:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accentSoft)}
/* An example, not a value. At 600 weight a placeholder date reads as a date
   already typed in, and the empty screen looks as though it has been filled. */
input.lfin::placeholder{font-weight:400;color:var(--ink3);opacity:.75}
/* Sits on the same baseline as the boxes, not under their labels. */
.lfnote{font-size:12.5px;color:var(--ink3);padding-bottom:11px}

.lfsay{margin:0 0 16px;font-size:15px;line-height:1.75;color:var(--ink2);max-width:74ch}
.lfsay b{color:var(--ink)}
.lfsay b.big{font-size:27px;font-weight:700;color:var(--accent2);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* The one thing on this page nobody is told anywhere else. */
.lfwarn{display:flex;flex-direction:column;gap:5px;margin:0 0 20px;padding:13px 16px;
  border-radius:11px;border:1px solid color-mix(in srgb,var(--bad) 32%,var(--line));
  background:color-mix(in srgb,var(--bad) 7%,var(--panel))}
.lfwarn b{font-size:14px;color:var(--bad)}
.lfwarn span{font-size:12.5px;line-height:1.65;color:var(--ink2);max-width:82ch}

.lfchart{margin:0 0 20px}
.lfchart svg{display:block;width:100%;height:auto}
.lfchart figcaption{margin-top:10px;font-size:12.5px;color:var(--ink3);line-height:1.55}

/* ---- the month-by-month list, which is what staff actually read ---- */
table.lftab{table-layout:fixed;width:100%}
table.lftab col:nth-child(1){width:40%}
table.lftab col:nth-child(2){width:18%}
table.lftab col:nth-child(3){width:22%}
table.lftab col:nth-child(4){width:20%}
table.lftab td,table.lftab th{font-variant-numeric:tabular-nums}
table.lftab td:first-child,table.lftab th:first-child{font-variant-numeric:normal}
/* Today is the line everything else is measured from, so it is set apart. */
table.lftab tr.lfnow td{background:var(--sunk);color:var(--ink2)}
table.lftab tr.lfplan td{background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
/* Approved leave is a fact, so it is tinted in the portal's neutral blue
   rather than the pencil's orange — different colour, different kind of thing. */
table.lftab tr.lfbook td{background:color-mix(in srgb,var(--c1) 6%,var(--panel))}
.lfb{margin-left:6px;font-size:11.5px;font-weight:600;color:var(--c1);white-space:nowrap}
table.lftab tr.lfgone td{background:color-mix(in srgb,var(--bad) 7%,var(--panel))}
.lfx{margin-left:8px;font-size:11.5px;font-weight:600;color:var(--bad);white-space:nowrap}
.lfp{margin-left:6px;font-size:11.5px;font-weight:600;color:var(--accent2);white-space:nowrap}
.lfe{font-size:12.5px;font-weight:600;color:var(--bad);white-space:nowrap}

/* Three equal boxes, so the answer cannot break across a line. */
.strip.lf3{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 20px}
.strip.lf3 .stat:last-child{border-right:0}
@media(max-width:840px){ .strip.lf3{grid-template-columns:1fr}
  .strip.lf3 .stat{border-right:0;border-bottom:1px solid var(--line2)}
  .strip.lf3 .stat:last-child{border-bottom:0} }

/* Its left edge sits on the table's first column, not on the panel's padding —
   two lists a few pixels out of line is the sort of thing that gets sent back. */
dl.lfkv{display:grid;grid-template-columns:auto 1fr;gap:9px 22px;font-size:13.5px;
  align-content:start;margin:0;padding:16px 12px 4px}
dl.lfkv dt{color:var(--ink3)}
dl.lfkv dd{margin:0;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

@media(max-width:720px){
  /* The two boxes keep a row of their own; the count and the cross follow. */
  .lftrips{grid-template-columns:1fr 1fr max-content 32px;gap:8px 10px}
  .lfsay b.big{font-size:23px}
}

/* The day inside the month when the balance actually went under. */
.lfdip{font-size:11.5px;font-weight:600;color:var(--bad);white-space:nowrap}

/* A date that cannot be read. Said on the box and beside it, never by
   silently rewriting what somebody is still typing. */
input.lfin.lfwrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 5%,var(--panel))}
.lfwhy{color:var(--bad);font-weight:600}

/* 'Rest of the month' on the first row: the Today line above it is a balance
   on a date, this one is what is still to come before the month ends. */
.lftab .lfrest{font-size:10.5px;color:var(--ink3);margin-left:6px;white-space:nowrap}
/* ---- Ask a colleague ----
   The cards are the marketplace's grid without the photograph: same width,
   same gap, so the two tabs of Off work do not look like two different
   products. A question is a button because the whole card opens it — a link
   inside a card that is itself clickable is two targets for one intention. */
.askgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-top:14px}
.askcard{display:flex;flex-direction:column;gap:7px;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px 16px 13px;
  font:inherit;color:inherit;transition:border-color .12s, box-shadow .12s}
.askcard:hover{border-color:color-mix(in srgb, var(--c1) 45%, var(--line));
  box-shadow:0 2px 10px rgba(0,0,0,.05)}
.askcard.done{border-left:3px solid var(--good);padding-left:14px}
.askcard .asktop{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.askcard b{font-size:15.5px;line-height:1.35;color:var(--ink)}
.askcard .askdet{font-size:13px;color:var(--ink2);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.askcard .askwho{font-size:12.5px;color:var(--ink3);margin-top:auto;padding-top:6px}
.askcard .askwho em{font-style:normal;color:var(--c1)}
.askcard .askn{font-size:12.5px;font-weight:600;color:var(--c1)}
.askcard .askn.good{color:var(--good)}
.askcard .askn.none{color:var(--ink3);font-weight:400}

/* One question, open. */
.askq > header h3{font-size:17px;line-height:1.3}
.askdetail p{margin:0;color:var(--ink2);line-height:1.55;font-size:14px}
.asklist{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:12px}
.askans{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--panel)}
.askans.best{border-color:color-mix(in srgb, var(--good) 45%, var(--line));
  background:color-mix(in srgb, var(--good) 5%, var(--panel))}
.askhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.askhead b{font-size:14px}
.askhead > span{font-size:12.5px;color:var(--ink3)}
.askact{margin-left:auto;display:flex;gap:6px}
.askans p{margin:0;line-height:1.55;font-size:14px;color:var(--ink)}

/* The box at the foot. Same field furniture as the marketplace form so the
   two do not disagree about what a label looks like. */
.askbox{border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.askbox label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:6px}
.askbox textarea{width:100%;box-sizing:border-box;font:inherit;font-size:14px;line-height:1.5;
  padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);
  color:var(--ink);resize:vertical}
.askbox textarea:focus{outline:none;border-color:var(--c1)}
.askbox .mact{margin-top:10px}
.askbox .mact .cap{padding:0}
/* The sentence takes the room and the button keeps its own; on a phone, where
   there is not room for both, the button drops under it. (Left on its own
   line so the rule above stays the anchor a later swap looks for.) */
.belloff p{flex:1 1 260px}
.belloff .btn{flex:0 0 auto}


/* ================= the employee profile, in tabs =================
   Desktop only. The phone keeps the card it has and never draws any of it. */
.pfwrap{padding:0;overflow:hidden}
.pfwrap .pfhead{padding:18px 20px 16px}
.pfno{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink3);
  font-weight:500;margin-right:9px;vertical-align:2px}
.pfst{font-size:13px;font-weight:600;margin-left:12px;vertical-align:2px;white-space:nowrap}
.pfnow{margin:3px 0 2px !important;font-size:13.5px;color:var(--ink2)}
.pfside{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.pfmgr{text-align:right}
.pfmgr>span{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink3);font-weight:600;margin-bottom:4px}
.pfmgr>div{display:flex;align-items:center;gap:8px}
.pfmgr>div .wholink{font-size:13.5px;font-weight:600}
.pftabs{display:flex;gap:0;background:var(--panel2);border-top:1px solid var(--line);padding:0 12px}
.pftabs button{border-radius:0;background:none;border:0;padding:12px 16px;font-size:14px;font-weight:600;
  color:var(--ink2);border-bottom:2.5px solid transparent;box-shadow:none;cursor:pointer;font-family:inherit}
.pftabs button:hover{color:var(--ink)}
.pftabs button[aria-pressed="true"]{color:var(--accent2);border-bottom-color:var(--accent);background:none}
.pfxs{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.pfx{padding:14px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.pfx:nth-child(3n){border-right:0}
.pfx:nth-child(n+4){border-bottom:0}
.pfx span{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink3);font-weight:600;margin-bottom:4px}
.pfx b{font-size:14.5px;font-weight:600}

/* ---- the week, every bar on one 07:00–20:00 scale ---- */
.wnav{display:flex;align-items:center;gap:10px}
.wnav b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;min-width:210px;text-align:center}
.btn.sq{padding:5px 11px;font-size:16px;line-height:1}
.wgrid{display:flex;flex-direction:column}
.wrow{display:grid;grid-template-columns:64px 118px minmax(0,1fr) 84px 104px;align-items:center;gap:14px;
  padding:11px 16px;border-top:1px solid var(--line)}
.wrow[role="button"]{cursor:pointer}
.wrow[role="button"]:hover{background:var(--panel2)}
.wrow.off{background:var(--sunk)}
.wrow.on{box-shadow:inset 3px 0 0 var(--accent)}
.wd{text-align:center}
.wd span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);font-weight:600}
.wd b{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.wrow.on .wd b{color:var(--accent2)}
.wi .wloc{display:block;font-size:11.5px;font-weight:600}
.wi b,.wo b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.wh{text-align:right}
.wh b{display:block;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.wh b.z{color:var(--ink3);font-weight:500}
.wh span{font-size:11px;color:var(--ink3)}
.wleg{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink3)}
.wleg .wseg{position:static;display:inline-block;width:14px;height:7px;margin-left:8px}
.wleg .wseg:first-child{margin-left:0}
.wbar{position:relative;height:22px;display:flex;align-items:center}
.wtrack{position:absolute;left:0;right:0;height:3px;border-radius:99px;background:var(--line)}
.wseg{position:absolute;height:9px;border-radius:99px;background:var(--c1);border:0}
.wseg.home{background:var(--c3)}
.wseg.client{background:var(--accent2)}
.wchip{position:relative;margin:0 auto;font-size:11px;font-weight:600;padding:2px 10px;border-radius:99px;
  background:var(--panel);border:1px solid var(--line);color:var(--ink3)}
.wchip.lv{border-color:var(--dc);color:var(--dc)}
.wchip.bad{border-color:var(--bad);color:var(--bad)}

/* ---- a day, and a leave, opened ---- */
.dpopwrap{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px}
.dpopbg{position:absolute;inset:0;background:rgba(30,21,35,.5)}
.dpop{position:relative;width:min(720px,100%);max-height:calc(100vh - 60px);overflow:auto;
  box-shadow:0 28px 70px -20px rgba(0,0,0,.55)}
.dsum{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line)}
.dsum span{background:var(--panel);padding:10px 14px;display:flex;flex-direction:column;gap:1px}
.dsum b{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.dsum i{font-style:normal;font-size:11px;color:var(--ink3)}
.dpop input.ff.tin{width:82px;font-variant-numeric:tabular-nums;padding:5px 8px;font-size:13.5px}
.dpop select.ff{padding:5px 8px;font-size:13.5px}
.dedit{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.dwhy{display:block;width:100%}
.dwhy>span{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);
  font-weight:600;margin-bottom:5px}
.dacts{display:flex;gap:9px;width:100%;align-items:center}
.btn.sm{padding:5px 11px;font-size:12.5px}
/* Simple: what it was for, the two dates, what that comes to. Everything else
   the record already knows and nobody opened this box to read. */
.lvpop .lvsimple{display:flex;flex-direction:column;gap:14px;padding:16px 20px 20px}
.lvmeta{margin:0;font-size:13.5px;color:var(--ink2)}
.lvdates{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.lvdates label{display:flex;flex-direction:column;gap:5px}
.lvdates label>span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink3);font-weight:600}
.lvdates label>b{font-size:15px;font-weight:600;padding:6px 0}
/* the app's own date box, not the browser's — Avin has already had one of
   those and it read 09/15/2026 */
.lvdates input.dbox{width:132px;padding:6px 10px;font-size:13.5px;font-weight:600;
  font-variant-numeric:tabular-nums}
.lvcalc{margin:0 0 7px;font-size:13.5px;color:var(--ink2)}
.lvcalc b{color:var(--ink)}
.lvcalc.over{color:var(--bad)}
.lvcalc.over b{color:var(--bad)}

/* ---- the leave tab ---- */
.lvhead{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center;padding:2px 2px 12px;
  font-size:13.5px;color:var(--ink2)}
.lvhead b{color:var(--ink);font-weight:600}
.lvhead .warnline{margin-left:auto}
.ldot{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--dc);
  margin-right:8px;vertical-align:0}
tr.hol td{color:var(--ink2)}
tr.lvrow{cursor:pointer}
tr.lvrow:hover td{background:var(--panel2)}
/* The two leave tables sit one above the other on the same screen, so their
   columns line up rather than nearly line up. */
table.lvtab{table-layout:fixed;width:100%}
table.lvtab col:nth-child(1){width:13%}
table.lvtab col:nth-child(2){width:19%}
table.lvtab col:nth-child(3){width:22%}
table.lvtab col:nth-child(4){width:9%}
table.lvtab col:nth-child(5){width:22%}
table.lvtab col:nth-child(6){width:15%}

  /* Four numbers that belong together read better close than spread out. */
  .strip.tight .stat{padding:12px 15px;gap:3px}
  .strip.tight .stat .v{font-size:22px}
  .strip.tight .stat .k i{font-style:normal;color:var(--ink3);opacity:.75;
    letter-spacing:.04em;margin-left:5px}
  .strip.tight .stat .n b{font-weight:600;font-variant-numeric:tabular-nums}
  @media(max-width:840px){ .strip.tight .stat .v{font-size:20px} }

  /* A box you type a figure into should look like the figure until you touch
     it — a register of thirty inputs with borders on is a form, not a table. */
  .payc{padding:0 !important}
  .payin{width:100%;border:0;background:transparent;padding:7px 9px;text-align:right;
    font:inherit;font-family:'IBM Plex Sans',system-ui,sans-serif;
    font-variant-numeric:tabular-nums;color:var(--ink3);border-radius:0;
    -moz-appearance:textfield}
  .payin::-webkit-outer-spin-button,.payin::-webkit-inner-spin-button{
    -webkit-appearance:none;margin:0}
  .payin.has{color:var(--ink)}
  .payin:hover{background:var(--sunk)}
  .payin:focus{outline:2px solid var(--accent);outline-offset:-2px;background:var(--card);
    color:var(--ink)}
  .payin:disabled{opacity:.45}
  .autoc{display:block;font-style:normal;font-weight:400;text-transform:none;
    letter-spacing:0;color:var(--ink3);opacity:.8;font-size:9.5px;line-height:1}
  /* one kind of column stops and the next begins */
  .paytable td.rule, .paytable th.rule{border-right:1px solid var(--line)}
  /* The register carries more columns than any other screen, which is why its
     headings were set at 10px. That is the size Avin was complaining about,
     and the width argument does not hold: the headings wrap between words and
     the table scrolls inside .tw, so the cost of reading them is one taller
     header row, not a wider table. */
  .paytable th{font-size:12.5px;line-height:1.25;white-space:normal;vertical-align:bottom}
  .paytable .autoc{font-size:10.5px}
  .paytable td, .paytable th{padding-left:6px;padding-right:6px}
  /* The register's headings wrap between words rather than being cut. They
     inherit nowrap and a 36px line-height from .invtable, which is right for
     a heading of one word and wrong for AIR TICKET, which came out as
     'Air Ticke'. Two short lines cost one row of header and lose nothing. */
  .invtable.regtable th{white-space:normal;line-height:1.25;height:auto;
    padding-top:9px;padding-bottom:9px;vertical-align:bottom}
  /* Every consultant: twelve columns to a fixed width, so the last one is on
     the screen rather than twenty-three pixels past it. */
  /* the company blocks a list of people is split into */
  .cotab{table-layout:fixed;width:100%}
  .cotab th,.cotab td{overflow:hidden;text-overflow:ellipsis}
  .cotab td.nw{white-space:nowrap}
  /* headings break between their words, never through one */
  .cotab th{white-space:normal;line-height:1.3;vertical-align:bottom}
  .regblock:first-of-type{border-top:0}

  /* an order number that copies the payment when you click it */
  .paytab .ordbtn{background:none;border:0;padding:0;font:inherit;color:var(--accent2);
    cursor:pointer;border-bottom:1px dashed var(--line);line-height:1.35}
  .paytab .ordbtn:hover{color:var(--accent);border-bottom-color:var(--accent)}
  .paytab .ordbtn.copied{color:var(--good);border-bottom-color:transparent;font-weight:600}
  /* Paid on: a date you click to change, dressed like the order number */
  .paytab .paydbtn{background:none;border:0;padding:0;font:inherit;color:var(--accent2);
    cursor:pointer;border-bottom:1px dashed var(--line);line-height:1.35}
  .paytab .paydbtn:hover{color:var(--accent);border-bottom-color:var(--accent)}
  .paytab .paydbtn.unset{color:var(--ink3)}
  /* 0111: a vendor Zoho Books does not know */
  .nib{color:var(--bad);font-size:9px;margin-right:4px;vertical-align:1px;cursor:help}
  .zlbtn{background:none;border:0;padding:0;font:inherit;color:var(--accent2);cursor:pointer;
    border-bottom:1px dashed var(--line);margin-left:4px}
  .zlbtn:hover{color:var(--accent);border-bottom-color:var(--accent)}
  .zlbtn[disabled]{color:var(--ink3);cursor:default}
  /* the currency box read "AEI" on a phone at 66px */
  .payform .amtrow select{width:84px;flex:0 0 84px}
  /* the Bigin lookup, so nobody types over it thinking nothing happened */
  .pill.lookup{display:inline-flex;align-items:center;gap:7px;font-weight:600}
  .lkdot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:lkp 1s ease-in-out infinite}
  @keyframes lkp{0%,100%{opacity:.25}50%{opacity:1}}
  #pqClient.looking::placeholder{color:var(--warn, #b7791f);font-weight:600}
  /* 0112: the VAT beside the Bill tick, and its pop-up */
  .vatchip{margin-left:7px;background:none;border:0;padding:0;font:inherit;font-size:11px;font-weight:600;
    color:var(--accent2);cursor:pointer;border-bottom:1px dashed var(--line);vertical-align:middle;line-height:1.35}
  .vatchip:hover{color:var(--accent);border-bottom-color:var(--accent)}
  .vatchip.oos{color:var(--ink3)}
  .vatchip.need{color:var(--bad);border-bottom-color:var(--bad)}
  .vatinv{padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--line)}
  .vatinv input{max-width:340px}
  .vatinvnote{margin-top:6px;font-size:12px;color:var(--ink3)}
  .docbox.vatbox{height:auto;max-height:88vh;width:min(660px,100%)}
  /* v1.51: the bill on the left, the form on the right */
  .docbox.vatbox.vatwide{width:min(1320px,100%);height:min(90vh,900px);max-height:none}
  .vatcols{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 540px}
  .vatcols .vatbody{overflow:auto}
  .vatview{display:flex;flex-direction:column;min-height:0;min-width:0;border-right:1px solid var(--line);background:var(--sunk)}
  .vatvbar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--panel2);min-width:0}
  .vattab{background:none;border:1px solid transparent;border-radius:7px;padding:5px 10px;font:inherit;font-size:12.5px;
    color:var(--ink2);cursor:pointer;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vattab.on{background:var(--panel);border-color:var(--line);color:var(--ink);font-weight:600;cursor:default}
  .vatdl{margin-left:auto;flex:none;font-size:12.5px;color:var(--accent2);text-decoration:none;border-bottom:1px dotted var(--accent2)}
  .vatslot{flex:1;min-height:0}
  #vatDocLayer{position:fixed;z-index:81;background:var(--sunk);overflow:auto;display:flex;justify-content:center;align-items:flex-start}
  #vatDocLayer iframe{width:100%;height:100%;border:0;background:#fff}
  #vatDocLayer img{max-width:100%;height:auto;display:block}
  #vatDocLayer .vatnone{margin:auto;padding:24px;color:var(--ink3);font-size:13px;text-align:center}
  .vatbody{padding:14px 18px 18px;overflow:auto}
  /* the bare label{} and input{} rules up the sheet would uppercase these and
     stretch the radio across the row */
  .vatbody label.vatopt{display:flex;gap:10px;align-items:flex-start;padding:8px 0;margin:0;cursor:pointer;
    font-size:13.5px;letter-spacing:normal;text-transform:none;color:var(--ink)}
  .vatbody .vatopt input{width:16px;height:16px;flex:0 0 16px;margin:2px 0 0;padding:0;accent-color:var(--accent)}
  .vatopt span{display:flex;flex-direction:column;gap:2px}
  .vatopt b{font-weight:600}
  .vatopt i{font-style:normal;font-size:12px;color:var(--ink3)}
  .vathead,.vatline{display:grid;grid-template-columns:minmax(0,1fr) 140px 140px 26px;gap:8px;align-items:center}
  .vathead{margin-top:10px;padding-bottom:5px;font-size:11px;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em}
  .vatline{margin-bottom:8px}
  .vatline input,.vatline select{width:100%;min-width:0}
  .vx{background:none;border:0;padding:0;font-size:19px;line-height:1;color:var(--ink3);cursor:pointer}
  .vx[disabled]{opacity:.3;cursor:default}
  .vatsum{margin-top:10px;font-size:12.5px;color:var(--ink2)}
  .vatfoot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
  .paytab .paydin{position:absolute;left:6px;bottom:4px;width:1px;height:1px;opacity:0;
    border:0;padding:0;margin:0;pointer-events:none}
  /* a document, said with an icon rather than its file name */
  .paytab .docico{background:none;border:0;padding:2px;color:var(--ink3);cursor:pointer;
    line-height:0;border-radius:5px;display:inline-block;vertical-align:middle}
  .paytab button.docico:hover{color:var(--accent2);background:var(--accentSoft)}
  .paytab .docico.off{cursor:default;opacity:.55}

  /* the export panel: dates at the top, the rows it would take underneath */
  .expdates{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:0 0 14px;
    border-bottom:1px solid var(--line2);margin-bottom:14px}
  .expdates label{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2)}
  .expdates input[type=date]{padding:5px 8px;font-size:12.5px;width:auto}
  .exphead{padding:0 0 10px}
  .exphead .pfchk{font-size:12.5px}
  .expfoot{display:flex;gap:10px;align-items:center;padding:14px 16px;
    border-top:1px solid var(--line2);background:var(--panel2)}
  #expPop .docbox{width:min(720px,94vw)}
  #expPop .tw{max-height:46vh;overflow:auto}

  /* Organisation is not another filter on the same list — it is a different
     view — so its tab does not look like the four beside it. */
  #peopleSeg .orgtab{margin-left:10px;border-left:1px solid var(--line);
    color:var(--accent2);font-weight:500}
  #peopleSeg .orgtab[aria-pressed="true"]{background:var(--accent2);color:#fff}

  /* the two attendance forms, side by side; the day's own segments run the
     width of the left card rather than the page */
  .attpair > section{min-width:0}
  /* Which day, checked in at, checked out at — one row, as Avin asked. It sat
     in half the width and was stacked into three; at the widths this runs at
     the three fit that half, and under 900px the pair collapses to one column
     anyway, which is where stacking them is right. */
  .attpair .rgform{grid-template-columns:minmax(0,1.5fr) 1fr 1fr;gap:10px}
  @media (max-width:900px){ .attpair .rgform{grid-template-columns:minmax(0,1fr)} }
  @media (max-width:1180px){ .attpair{grid-template-columns:minmax(0,1fr)} }

  /* the two lines under the three leave columns: one gap, not two margins
     plus the grid's own */
  .lvnotes{display:flex;flex-direction:column;gap:10px;margin-top:14px}
  .lvnotes .note{margin:0}

  /* what the two colours in the organisation tree mean, beside the tree */
  .orglgd{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto;font-size:11.5px;color:var(--ink3)}
  .orglgd span{display:flex;align-items:center;gap:6px}
  .orglgd i{width:9px;height:9px;border-radius:3px;background:var(--line);flex:none}
  .orglgd i.rev{background:var(--accent)}

  /* Mattia's commission: the three currencies side by side, the way the
     sheet has them stacked. The one box that is typed into is the one the
     sheet highlights. */
  .mcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
  .mcblock{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
  .mchead{background:var(--panel2);border-bottom:1px solid var(--line2);padding:9px 14px;
    font-weight:600;font-size:13.5px}
  .mchead span{font-weight:400;color:var(--ink3);font-size:12px;margin-left:4px}
  .mcblock table{font-size:13px}
  .mcblock th,.mcblock td{padding:7px 12px}
  .mcblock tr.tot td{background:var(--sunk);font-weight:600;border-top:1px solid var(--line)}
  .mcsay{margin:0 0 4px;color:var(--ink2);font-size:14.5px}
  .field.mcyellow input{background:#fff9c4;border-color:#e6d97a}
  :root:not([data-theme="light"]) .field.mcyellow input{background:#4a4326;border-color:#6b5f2e}

  .teamtab{table-layout:fixed;width:100%}
  .teamtab td,.teamtab th{overflow:hidden;text-overflow:ellipsis}
  /* Headings wrap between their words rather than being cut, and the role
     pill wraps too, a size down: OUTSTANDING and COMMISSION are single words
     and set the width of their own columns, so the room has to come from
     somewhere that can give it. */
  .teamtab th{white-space:normal;line-height:1.3}
  .teamtab .pill{white-space:normal;font-size:10px;padding:2px 6px}
  .paytable .payin{padding-left:5px;padding-right:6px;font-size:12.5px}
  .paytable td.n{font-size:12.5px}
  /* what check-in made of the month, offered rather than imposed */
  .attday{display:block;width:100%;border:0;background:transparent;cursor:pointer;
    padding:0 9px 5px;text-align:right;font:inherit;font-size:10.5px;
    color:var(--warn);white-space:nowrap}
  .attday:hover{text-decoration:underline}
  .attday:disabled{opacity:.4;cursor:default}

  /* A payslip in the viewer: white paper on the sunk background, and the
     window prints as the sheet alone. */
  
  .slipbody{align-items:flex-start;padding:24px;display:block}
  .slipbody .slip{margin:0 auto}
  /* A4, shrunk to fit — not reflowed.
   *
   * Below 900px the sheet used to become width:100%, which on a phone tore
   * the letterhead apart: the logo landed on top of the company name and
   * every line broke after two words. A letter is a piece of A4 and looks
   * like one at any size, so inside the viewer it keeps its 210mm and is
   * scaled down to the width there is — the way a PDF reader opens a page
   * fitted to the screen. Pinch to read it; the button above prints the
   * full-size original. The scale itself is set by showSlip(), which is the
   * only place that knows how wide the viewer came out. */
  @media screen and (max-width:900px){
    .slipbody{padding:10px}
    /* 297mm as well as 210mm: a short letter on a full sheet is what a
       letter looks like, and a white block that stops where the words stop
       looks like a web page. */
    .slipbody .slip{width:210mm;min-width:210mm;max-width:none;min-height:297mm;
      zoom:var(--slipzoom, .44);margin:0}
    .slipbody .slgrid,.slipbody .sltables{grid-template-columns:1fr 1fr}
    .slipbody .slside:first-child{border-right:1px solid #e3e3e3;border-bottom:0}
  }
  /* and the hint under the buttons, for the one thing a browser cannot do */
  .look header .lookhint{flex:1 1 100%;color:var(--ink3);font-size:11.5px;
    white-space:normal;margin:-2px 0 0}
  .sliprow, tr.sliprow{cursor:pointer}
  tr.sliprow:hover{background:var(--panel2)}
  /* The newest month — the one the figures at the top of the page are about. */
  tr.sliprow.on td:first-child{box-shadow:inset 3px 0 0 var(--ink)}
  @media print{
    body.printslip #app{display:none!important}
    body.printslip #lookWrap{position:static!important;z-index:auto}
    body.printslip #lookWrap .lookbg,
    body.printslip #lookWrap .look header{display:none!important}
    body.printslip #lookWrap .look{position:static;inset:auto;margin:0;max-width:none;
      box-shadow:none;background:#fff;border-radius:0}
    body.printslip #lookWrap .lookbody{overflow:visible;background:#fff;padding:0}
    /* and on paper it is A4 again, which is the one place it has to be. */
    body.printslip .slip{width:210mm;border:0;box-shadow:none}
  }

  /* the nudge — a note, not an alarm, until it is your manager's business */
  .nudge{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;margin-bottom:16px;
    border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:10px;
    background:var(--card)}
  .nudge.loud{border-left-color:var(--bad)}
  .nudge .ndot{width:8px;height:8px;border-radius:50%;background:var(--warn);
    margin-top:6px;flex:none}
  .nudge.loud .ndot{background:var(--bad)}
  .nudge b{display:block;font-size:14.5px}
  /* Only the headline is a block. A bold inside the sentence under it — a
     figure, the name of a button — is part of that sentence. */
  .nudge span b{display:inline;font-size:inherit}
  .nudge span:not(.ndot){display:block;color:var(--ink2);font-size:13.5px;margin-top:2px}
  /* A banner may carry one action. It sits at the right, centred against the
     two lines of text, and drops under them when there is no room. */
  .nudge > div{flex:1;min-width:0}
  .nudge > .btn{flex:none;align-self:center;margin-left:auto}
  @media(max-width:640px){ .nudge{flex-wrap:wrap} .nudge > .btn{margin-left:20px} }

  /* what the record says about where a check-in came from */
  .wmark{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:20px;
    font-size:11px;letter-spacing:.02em;color:var(--ink3);border:1px solid var(--line);
    vertical-align:1px;white-space:nowrap}
  .wmark.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}

  .ciwarn{margin-top:16px;padding:13px 16px;border:1px solid var(--line);
    border-left:3px solid var(--warn);border-radius:10px;font-size:14px;color:var(--ink2)}
  .ciwarn b{color:var(--ink)}
  .ciwrow{display:flex;gap:10px;margin-top:11px}
  .ciwrow input{flex:1;min-width:0}
  /* sending a payroll month back (v1.38) */
  .ciwarn .runtip{color:var(--ink3);font-size:12.5px;margin-left:6px}
  .ciwarn textarea.runask{display:block;margin-top:10px;resize:vertical;line-height:1.55;min-height:112px}
  .runwhy{white-space:pre-line;margin-top:6px;color:var(--ink)}
  .runhist{margin-top:12px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-size:12.5px;color:var(--ink2)}
  .runhist > b{display:block;color:var(--ink);font-size:12.5px;margin-bottom:2px}
  .runhrow{padding:8px 0;border-top:1px solid var(--line)}
  .runhrow:first-of-type{border-top:0}
  .runhrow > span{color:var(--ink3);font-size:12px}

  /* fixing a missed day */
  /* Three fixed tracks rather than a fraction. The form lives on the
     Regularization tab and nowhere else now, so it is drawn at one width —
     its own, not the screen's. */
  .rgform{display:grid;grid-template-columns:minmax(200px,1fr) 150px 150px;gap:14px;
    justify-content:start;margin-bottom:16px}
  .rgform label{display:flex;flex-direction:column;gap:5px;min-width:0}
  .rgform label.wide{grid-column:1/-1}
  .rgform span{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
  .btn.sm{padding:5px 12px;font-size:12.5px}

  /* the sub-tabs of the section you are in, kept on screen so the screens of
     one job stay one click from each other */
  .subbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    margin:-8px 0 2px;padding:0 2px}
  .subtabs{display:inline-flex;gap:3px;background:var(--sunk);border:1px solid var(--line);
    border-radius:9px;padding:3px;flex-wrap:wrap}
  .subtabs button{background:none;border:0;color:var(--ink2);padding:6px 13px;
    border-radius:7px;font-size:13.5px;font-family:inherit}
  .subtabs button:hover{color:var(--ink);background:var(--panel)}
  .subtabs button[aria-current="true"]{background:var(--accent);color:var(--accentInk);font-weight:600}
  .subtitle{font-family:'Newsreader','Bodoni Moda',Georgia,serif;font-size:18px;color:var(--ink2);
    margin-left:auto}

  /* payment requests: the documents on one, and turning one down */
  .pqfiles{display:flex;flex-direction:column;gap:6px;margin:-4px 0 4px}
  .pqfile{display:flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line);
    border-radius:8px;padding:6px 8px 6px 11px;font-size:12.5px}
  .pqfile span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pqfile i{font-style:normal;color:var(--ink3);font-size:11.5px;white-space:nowrap}
  .pqfile button{background:none;border:0;color:var(--ink3);font-size:16px;line-height:1;
    padding:0 3px;font-family:inherit}
  .pqfile button:hover{color:var(--bad)}
  .pqerr{color:var(--bad);background:var(--badBg);border-left:3px solid var(--bad);
    border-radius:0 8px 8px 0;padding:10px 13px;font-size:12.5px;line-height:1.6;margin:-2px 0 2px}
  .pqerr b{font-weight:600}
  .pqerr i{font-style:normal;opacity:.7;font-size:11.5px;letter-spacing:.03em}
  .pqdocs{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
  .pqdocs a,.pqdocs span{font-size:11px;color:var(--ink3);text-decoration:underline;
    overflow-wrap:anywhere}
  .pqdocs a:hover{color:var(--accent2)}
  .pqdocs .dropdoc{background:none;border:0;color:var(--ink3);font-size:13px;line-height:1;padding:0 2px;font-family:inherit}
  .pqdocs .dropdoc:hover{color:var(--bad)}
  .actpair{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
  .btn.sm.x{padding:4px 9px;font-size:14px;line-height:1;color:var(--bad)}
  .btn.sm.x:hover{border-color:var(--bad);background:var(--badBg)}

  /* the two payment tables: a lot of narrow columns, so each one is told what
     it is — a date never wraps, a purpose always may */
  .paytab table{table-layout:auto}
  .paytab td,.paytab th{vertical-align:top}
  .paytab td.nw,.paytab th.nw{white-space:nowrap}
  /* Break at spaces, not mid-word: 'anywhere' turned Dubai Economy (DED) into
     'Dubai Econo / my (DED)', which reads as a rendering fault. */
  .paytab td.cell{max-width:190px;overflow-wrap:break-word;word-break:normal;hyphens:none}
  .paytab .sub{font-size:11px;color:var(--ink3);margin-top:3px;line-height:1.45}
  .paytab .sub.bad{color:var(--bad)}
  .paytab .sub .pill{font-size:10.5px;padding:1px 7px}
  .paytab .doc{display:inline-block;overflow-wrap:anywhere;
    white-space:nowrap;vertical-align:bottom;font-size:11.5px;color:var(--ink2);text-decoration:underline}
  .paytab a.doc:hover{color:var(--accent2)}
  .paytab .docwrap{display:inline-flex;align-items:center;gap:2px;margin-right:6px}
  .paytab .adddoc{background:none;border:1px dashed var(--line);border-radius:6px;color:var(--ink3);
    font-family:inherit;font-size:11px;padding:2px 8px;white-space:nowrap;margin-top:3px;display:inline-block}
  .paytab .adddoc:hover{border-color:var(--accent);color:var(--accent2)}

  /* The raise screen: the form beside the confirmation, and the table across
     the page underneath both. My own requests carries eleven columns now, and
     in the old right-hand pane the last three fell off the edge. */
  /* Side by side when there is room for both, stacked when there is not.
     Eleven columns in the eight hundred pixels left over on a 1440 laptop is
     not a table, it is a row of ellipses — the date, the order number and the
     amount were all being cut. 'Room' is measured on the space this screen
     actually has rather than the width of the window, so folding the rail
     away is enough to bring the form back alongside the table. That is what
     the fold is for. The wrapper exists only to be the thing measured: size
     containment on anything larger would trap the document pop-up inside it. */
  .payonew{container-type:inline-size}
  .payone{display:grid;grid-template-columns:minmax(0,1fr);
    gap:14px;margin-bottom:14px}
  .payone > div:empty{display:none}
  /* The form and the list end together. align-items:start was here as well,
     and side by side it left the request list ending five hundred pixels
     above the bottom of the form. Stacked on a narrow screen each is its own
     row and none of this applies. */
  .payone > div{display:flex;flex-direction:column}
  .payone > div > .panel{flex:1;display:flex;flex-direction:column;min-height:0}
  .payone > div > .panel > .tw{flex:1;min-height:0}
  .payone > div > .panel > .cap{margin-top:auto}
  /* Stacked, the form has the whole page to spread across, and a one-line
     Name of the employee eleven hundred pixels wide looks like a mistake.
     Alongside the table its column is 350px, so this never applies there. */
  
  @container (min-width:860px){
    /* The form at 300 and the list taking everything else. Fixed rather than a
       percentage: the form is a column of labelled boxes and it looks wrong
       both too narrow and too wide, while the table beside it can always use
       whatever it is given. */
    .payone{grid-template-columns:minmax(260px,300px) minmax(0,1fr)}
  }

  /* Approve and the cross belong on one line. Wrapped, the cross read as a
     second separate thing rather than the other half of one choice. */
  .paytab td.act{white-space:nowrap}
  .paytab .actpair{flex-wrap:nowrap}

  /* the reconciliation half of a decided row: two pickers and three boxes,
     laid out the way the sheet Avin keeps lays them out */
  .paytab select.acsel{font-size:12px;padding:4px 6px;max-width:126px}
  .paytab select.acsel.stpaid{color:var(--good);font-weight:600}
  .paytab select.acsel.stunpaid{color:var(--ink3)}
  .paytab select.acsel.stinitiated{color:var(--warn)}
  .paytab th.c,.paytab td.c{text-align:center;padding-left:6px;padding-right:6px}
  .paytab input.rtick{width:auto;margin:0;accent-color:var(--good);transform:scale(1.15)}
  /* Both payment tables lay out by decided width rather than by content.
     A content-sized table has a minimum it will not shrink past — sixteen
     columns came to 1,610px — so it scrolled sideways on a laptop and on a
     1920 monitor alike, because a browser window is never the whole screen.
     Fixed layout with percentage columns has no such minimum: everything
     gives up width together and the table is exactly as wide as its panel. */
  .paytab table{table-layout:fixed;width:100%}
  /* Headings are nowrap everywhere else, which is right for a table that sizes
     itself to its content and wrong for one with decided columns: the heading
     hangs into the next column instead of the column being wide enough. */
  .paytab th{white-space:normal;line-height:1.3;font-size:10px;letter-spacing:.05em}
  /* A heading that breaks mid-word — BOO / KS — reads as damage. These three
     are one short word each and get the width to stay one. */
  .paytab th.c{font-size:9px;letter-spacing:.03em}
  /* Every heading reads from the left, including the amount, which was the one
     right-aligned one and looked like a mistake next to ten that were not.
     Bottom-aligned so a heading that takes two lines still sits on the same
     baseline as the ones that take one. */
  .paytab th{text-align:left;vertical-align:bottom}
  .paytab th.c{text-align:center}
  .paytab th.r,.paytab td.r{text-align:left}

  /* the amount leads, the currency follows, and the order number is short */
  .amtfrow{grid-template-columns:minmax(0,0.72fr) minmax(0,1fr)}
  .amtrow select{order:2;width:66px}
  .amtrow input{order:1}

  /* raised, said once and quietly: the row appearing beside it is the proof */
  .pqok{border-left:3px solid var(--good);background:var(--goodBg);color:var(--ink);
    border-radius:0 8px 8px 0;padding:9px 13px;font-size:12.5px;line-height:1.6;margin:-2px 0 4px}
  .pqok b{font-weight:600}
  .pqok .bad{color:var(--bad)}
  .paytab td,.paytab th{overflow-wrap:break-word;word-break:normal}
  .paytab td.cell{max-width:none}
  .paytab.recon table{font-size:12.5px}
  .paytab.recon td,.paytab.recon th{padding:8px 7px}
  /* My requests sits in half a screen beside the form, so it takes the same
     compact type as the reconciliation table rather than the roomy default. */
  .payone .paytab table{font-size:12.5px}
  .payone .paytab td,.payone .paytab th{padding:8px 7px}

  /* ------------------------------------------------ a table read like a sheet
     One line a row. What made these tall was never the columns: it was a note
     under Status wrapping to four lines on every row, and a client name
     wrapping to three. Cut to one line, thirty fit where six did. */
  .paytab td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
  .paytab td.act,.paytab td.c{overflow:visible}
  .paytab td,.paytab th{padding:5px 7px;border-right:1px solid var(--line2)}
  .paytab td:last-child,.paytab th:last-child{border-right:0}
  .paytab table{font-size:12.5px}
  .paytab .pill{font-size:10.5px;padding:1px 7px}
  .paytab .why{color:var(--ink3);font-size:11.5px;margin-left:5px}
  .paytab tbody tr:hover td{background:var(--panel2)}
  .paytab .btn.sm{padding:3px 8px;font-size:11.5px}
  .paytab .actpair{gap:4px}
  .paytab select.acsel{padding:2px 4px;font-size:11.5px}
  .paytab .doc{max-width:100%;display:inline-block;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;vertical-align:middle}
  .paytab .adddoc{margin-top:0;padding:1px 6px}
  .paytab input.rtick{transform:scale(1);margin:0}
  /* the pencil, last in the row */
  /* the pencil sits in the narrowest column there is, so it is a mark and
     not a button with room around it */
  .paytab .btn.sm.ed{padding:2px 4px;line-height:0;border-color:transparent}
  .paytab .btn.sm.ed:hover{border-color:var(--accent)}

  /* what a cut cell is hiding. Nothing to press: the Copy button that used to
     sit under the text came off every table on 12 September. */
  .cellpop{position:absolute;z-index:90;background:var(--panel);border:1px solid var(--line);
    border-radius:8px;box-shadow:var(--shadow);padding:7px 10px;font-size:11.5px;
    line-height:1.45;color:var(--ink);display:block;max-width:320px}
  .cellpop .ct{white-space:pre-wrap;word-break:break-word;max-height:160px;overflow:auto;
    -webkit-user-select:text;user-select:text}
  /* a control in a fixed column takes the column's width, not its own */
  .paytab select.acsel{width:100%;max-width:none;min-width:0}
  .paytab .doc{max-width:100%}
  .paytab .actpair .btn{padding:4px 8px}
  .paytab .btn.sm.ed{padding:3px 8px;font-size:11px;color:var(--ink3)}
  .paytab .btn.sm.ed:hover{color:var(--accent2);border-color:var(--accent)}

  /* the header of the decided list: search, export, and the Miraziz nudge */
  .dechead{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
  .paysearch{width:190px;padding:5px 10px;font-size:12.5px}
  .wamsg{margin:0;white-space:pre-wrap;font-family:'IBM Plex Sans',sans-serif;
    font-size:13px;line-height:1.75;color:var(--ink);background:var(--panel2);
    border:1px solid var(--line);border-radius:10px;padding:16px}

  /* currency beside the amount */
  .amtrow{display:flex;gap:6px}
  .amtrow select{width:74px;flex:0 0 auto}
  .amtrow input{flex:1;min-width:0}

  /* correcting a request */
  .edform{display:grid;grid-template-columns:1fr 1fr;gap:13px 14px}
  .edform label{display:flex;flex-direction:column;gap:5px;min-width:0}
  .edform label.wide{grid-column:1/-1}
  .edform span{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}

  /* a client who is not on the list yet */
  .combolist .addnew{border-top:1px solid var(--line)}
  .combolist .addnew i{display:block;font-style:normal;font-size:11px;color:var(--ink3);margin-top:2px}

  /* the rail, put away: icons only, and everything that was words is gone */
  .rail button.nav svg{flex:0 0 auto}
  .railtog{position:absolute;top:14px;right:10px;background:none;border:0;padding:5px;
    border-radius:7px;color:var(--brandDim);line-height:0;cursor:pointer}
  .railtog:hover{background:rgba(255,255,255,.09);color:var(--brandInk)}
  /* The rail is pinned and must not travel with the page. It was, until I
     gave it position:relative to hang the fold toggle off — which silently
     replaced the position:sticky in the base stylesheet and let the whole
     rail scroll away on any long screen. Sticky is a positioning context of
     its own, so the toggle is just as happy inside it; this restates the
     base rule rather than replacing it. checklook.mjs now scrolls every
     screen and checks the rail is still where it was. */
  .rail{position:sticky;top:0;align-self:start;height:100vh;
    overflow-y:auto;overscroll-behavior:contain;z-index:30}
  #app.tucked{grid-template-columns:62px minmax(0,1fr)}
  #app.tucked .rail{padding:16px 7px;gap:12px;align-items:center}
  #app.tucked .rail .markco,
  #app.tucked .rail .navlabel,
  #app.tucked .rail button.nav span,
  #app.tucked .rail .who .m,
  #app.tucked .rail .who b,
  #app.tucked .rail .who span,
  #app.tucked .rail .who .buildno,
  #app.tucked .rail .appmark .one{display:none}
  /* The wordmark does not shrink to 62px and a squashed logo is worse than
     none. Collapsed, the rail is the toggle and the icons. */
  #app.tucked .rail .mark{padding:0;width:100%}
  #app.tucked .rail .appmark{display:none}
  #app.tucked .rail nav{width:100%}
  #app.tucked .rail button.nav{justify-content:center;padding:9px 0}
  #app.tucked .rail button.nav[aria-current="true"]{box-shadow:none;background:var(--accent);color:#fff}
  #app.tucked .rail .who{border-top:1px solid rgba(255,255,255,.12);padding-top:12px;width:100%;
    display:flex;justify-content:center}
  #app.tucked .rail .who .out{margin:0;padding:6px 8px;width:auto}
  #app.tucked .railtog{position:static;margin:0 auto}
  #app.tucked .railtog svg{transform:rotate(180deg)}
  /* a screen too narrow for a rail already hides it; the toggle must not fight that */
  @media(max-width:860px){ #app.tucked{grid-template-columns:minmax(0,1fr)} }
  /* In a fixed layout a column cannot grow, so anything that refuses to wrap
     hangs over the edge and the panel scrolls after all. Only the date and the
     amount keep nowrap, and both are short enough to be given room. */
  .paytab.recon td.act{white-space:normal}
  /* v1.50: Past payments' Status without the dot, so the column can be narrower */
  .paytab td.st .dt{display:none}
  /* v1.49: Split beside the dot, and the pop-up's rows */
  .paytab.recon.banktw td.act{white-space:nowrap;text-align:left}
  .paytab .splitbtn,.paytab .splitgap{display:inline-block;width:38px;text-align:left;vertical-align:middle}
  .splitnote{font-size:12.5px;line-height:1.5;color:var(--ink3)}
  .paytab .splitbtn{background:none;border:0;padding:0 7px 0 0;font:inherit;font-size:11.5px;color:var(--ink3);
    cursor:pointer;vertical-align:middle;text-decoration:underline dotted;text-underline-offset:2px}
  .paytab .splitbtn:hover{color:var(--accent2)}
  .paytab .splitbtn.on{color:var(--accent2);font-weight:600;text-decoration:none}
  .paytab .splitbtn[disabled]{cursor:default}
  /* v1.53: petty cash -- Expense is longer than Split; one width so the dots line up */
  .paytab.pettytw .splitbtn,.paytab.pettytw .splitgap{width:58px}
  .pxlist{margin-top:8px;max-height:252px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
  .pxopt{display:block;width:100%;text-align:left;padding:8px 12px;border:0;border-bottom:1px solid var(--line);background:none;
    font:inherit;font-size:13px;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pxopt:last-child{border-bottom:0}
  /* v1.55: name on the left, its type on the right */
  .pxopt{display:flex;align-items:center;gap:10px}
  .pxopt .pxname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pxopt .pxtag{flex:none;font-size:11.5px;font-weight:400;color:var(--ink3)}
  .pxopt:hover{background:var(--sunk)}
  .pxopt.on{background:var(--sunk);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
  .pxnone{padding:14px 12px;font-size:12.5px;color:var(--ink3)}
  .pxpick{margin:10px 0 4px;font-size:13px;color:var(--ink2)}
  /* v1.54: the Record pop-up */
  .docbox.vatbox.pxbox{width:min(700px,100%)}
  .pxseg{display:flex;gap:4px;padding:4px;margin:0 0 14px;background:var(--sunk);border-radius:10px}
  .pxk{flex:1;border:0;background:none;border-radius:7px;padding:8px 6px;font:inherit;font-size:13px;color:var(--ink2);cursor:pointer;white-space:nowrap}
  .pxk:hover{color:var(--ink)}
  .pxk.on{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12);cursor:default}
  #pxVQ,#pxNbNo{width:100%}
  .pxchosen{display:flex;align-items:center;gap:10px;padding:9px 12px;margin-bottom:6px;border:1px solid var(--line);border-radius:8px;
    background:var(--panel2);font-size:13.5px}
  .pxchosen b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pxchosen .zlbtn{margin-left:auto;flex:none}
  .pxsub{margin:4px 0 0 26px}
  .pxlbl{display:block;margin:0 0 6px;font-size:11px;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em}
  .pxbhead,.vatbody label.pxbill{display:grid;grid-template-columns:22px minmax(0,1fr) 92px 110px 120px;gap:8px;align-items:center}
  .pxbhead{margin-top:4px;padding-bottom:5px;font-size:11px;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em}
  .pxbhead .r,.pxbill .r{text-align:right}
  .vatbody label.pxbill{padding:6px 0;margin:0;border-top:1px solid var(--line);font-size:13px;letter-spacing:normal;text-transform:none;
    color:var(--ink);cursor:pointer}
  .vatbody label.pxbill > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vatbody .pxbill input[type=checkbox]{width:16px;height:16px;margin:0;padding:0;accent-color:var(--accent)}
  .vatbody .pxbill input.num{width:100%;min-width:0;padding:6px 9px;text-align:right}
  .pxxfer{padding:12px 14px;margin-bottom:10px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);font-size:14px}
  .paytab .pxpast{display:inline-block;font-size:11.5px;color:var(--ink3);vertical-align:middle;cursor:help}
  #pxQ{width:100%}
  .vatbody .sclrw{display:block}
  .splithead,.splitline{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 130px 26px;gap:8px;align-items:center}
  .splithead{margin-top:4px;padding-bottom:5px;font-size:11px;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em}
  .splitline{margin-bottom:8px}
  .splitline input{width:100%;min-width:0}
  .paytab.recon .actpair{flex-wrap:wrap}
  .paytab.recon td.c{padding-left:3px;padding-right:3px}
  .paytab.recon .pill{white-space:normal}
  .subtabs .cnt{display:inline-block;min-width:17px;padding:0 5px;margin-left:5px;
    border-radius:99px;background:var(--warn);color:#fff;font-size:10.5px;font-style:normal;
    font-weight:700;line-height:17px;text-align:center;vertical-align:middle}
  .subtabs .cnt.mute{background:var(--sunk);color:var(--ink3)}
  .subtabs button[aria-current="true"] .cnt{background:var(--accentInk);color:var(--accent)}
  .subtabs button[aria-current="true"] .cnt.mute{background:rgba(255,255,255,.22);color:#fff}

  /* a document, over the page rather than in place of it */
  .docpop{position:fixed;inset:0;z-index:80;background:rgba(20,12,24,.62);
    display:flex;align-items:center;justify-content:center;padding:28px}
  .docbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
    box-shadow:var(--shadow);width:min(980px,100%);height:min(88vh,900px);
    display:flex;flex-direction:column;overflow:hidden}
  .docbox header{display:flex;align-items:center;gap:10px;padding:11px 14px;
    border-bottom:1px solid var(--line);background:var(--panel2)}
  .docbox header b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;font-size:14px;font-weight:600}
  .docbody{flex:1;min-height:0;background:var(--sunk);display:flex;
    align-items:center;justify-content:center;overflow:auto}
  .docbody iframe{width:100%;height:100%;border:0;background:#fff}
  .docbody img{max-width:100%;max-height:100%;object-fit:contain}
  button.doc{background:none;border:0;padding:0;font-family:inherit;cursor:pointer;
    text-align:left}
  .selfnote{color:var(--warn);font-size:11px;margin-top:3px}
  .rjbox{padding:14px 16px}
  .rjbox label{display:block;font-size:12.5px;color:var(--ink2);margin-bottom:8px}
  .rjbox input{width:100%}

  /* reading a workbook, and saying what was in it before anything is written */
  .upmsg{border-left:3px solid var(--bad);background:var(--badBg);color:var(--ink);
    padding:11px 14px;border-radius:0 8px 8px 0;font-size:13px;margin-top:14px}
  .upmsg.warn{border-left-color:var(--warn);background:var(--warnBg)}
  .upmsg.good{border-left-color:var(--good);background:var(--goodBg)}
  .upmsg b{font-weight:600}
  .upact{display:flex;gap:10px;margin-top:16px;align-items:center;flex-wrap:wrap}
  .upact .why{color:var(--ink3);font-size:12.5px}
  .upfile{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:14px}
  .upfile b{font-size:16px}
  .upfile span{color:var(--ink3);font-size:12.5px}
  .upnames{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
  .upnames span{background:var(--warnBg);color:var(--warn);border-radius:99px;
    padding:3px 10px;font-size:12.5px}

  /* a revision letter waiting to be sent */
  .draft{border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:10px;
    padding:14px 16px;margin-bottom:12px;background:var(--card)}
  .draft:last-child{margin-bottom:0}
  .dhead{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
  .dhead>div:first-child{flex:1;min-width:180px}
  .dsub{display:block;font-size:12.5px;color:var(--ink3);margin-top:2px}
  .dfig{text-align:right;white-space:nowrap}
  .dfig .was{color:var(--ink3);font-size:14px}
  .dfig .arw{color:var(--ink3);margin:0 7px}
  .dfig b{font-size:18px}
  .dact{display:flex;gap:8px}
  .dask{margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
  .dask p{margin:0 0 12px;font-size:14px;color:var(--ink2)}
  .drow{display:flex;gap:10px;align-items:center}

  /* adding somebody */
  .jform{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 18px;
    margin-bottom:18px}
  .jform label{display:flex;flex-direction:column;gap:5px;min-width:0}
  .jform label.wide{grid-column:1/-1}
  .jform label.tick{flex-direction:row;align-items:center;gap:9px}
  .jform label.tick input{width:auto}
  .jform span{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}
  .jform label.tick span{text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink2)}
  .jnote{grid-column:1/-1;margin:-4px 0 4px;font-size:13px;color:var(--ink3);
    line-height:1.55}
  .jnote b{color:var(--ink2)}
  .jwhy{font-size:13px;color:var(--ink3)}
  .pbdate{width:150px;margin-left:8px;vertical-align:middle}

  /* where the office is */
  .offrow{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap}
  .offrow>div{display:flex;flex-direction:column;gap:4px}
  .offrow .k{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
  .offrow b{font-size:19px}
  .offrow .n{font-size:12.5px;color:var(--ink3)}

  @media (max-width:820px){
    .rgform{grid-template-columns:1fr 1fr}
    .rgform label:first-child{grid-column:1/-1}
    .ciwrow{flex-direction:column}
    .jform{grid-template-columns:1fr 1fr}
    .dhead{gap:12px}
    .dfig{text-align:left}
  }
@media(min-width:721px){

  /* ---- the ground -------------------------------------------------------
     A white panel on a near-white page has to draw its own edge, which is
     what the 1px border was for. Drop the ground half a step and the panel
     draws its own edge by being lighter than what is behind it. */
  :root[data-theme="light"], :root:not([data-theme="dark"]){
    --bg:#F1EEF5;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){ --bg:#120F17; }
  }
  :root[data-theme="dark"]{ --bg:#120F17; }

  .content{padding:24px 26px 64px;gap:20px}

  /* ---- panels -----------------------------------------------------------
     No border, more corner, real shadow. The header keeps its divider —
     under a table the first row needs something to sit beneath — but it is
     the faint line, and the heading above it gets room to breathe. */
  .panel, .hcard, .celeb, .look, .docbox{border:0}
  .panel{border-radius:16px;box-shadow:var(--shadow)}
  .panel > header{padding:15px 20px 13px;border-bottom:1px solid var(--line2)}
  .panel > header h3{font-size:17px;letter-spacing:-.015em}
  .panel > header .hint{font-size:12px;color:var(--ink3)}
  .pad{padding:18px 20px}
  .cap{padding:11px 20px}

  /* An empty panel is stretched to its neighbour's height by the rule that
     says a row of cards is one height. That rule stays — it is the right
     rule. What changes is where the one sentence sits inside all that room:
     centred, rather than abandoned in the top-left corner of three hundred
     pixels of white. empty() writes a bare <p> with an inline margin, so the
     centring is done by the container and nothing needs !important. */
  .pad.hbody:has(> p:only-child){justify-content:center;align-items:center;text-align:center}
  /* The same thing happens to a table with nothing in it: 'Nothing requested
     yet.' in the top-left of a panel stretched to the height of the form
     beside it. A table cannot be centred in its panel the way a paragraph
     can, but a single placeholder row can be given room and put in the
     middle of the width. tr:only-child is what keeps this off a real table —
     a grouping row with a colspan always has rows under it. */
  .panel tbody:has(> tr:only-child > td[colspan]) td{
    padding:44px 12px;text-align:center;border-bottom:0}

  /* ---- controls ---------------------------------------------------------
     The phone's inputs are a sunk fill with no border. On a desktop form
     that reads as modern and, more usefully, as quieter: a page of fifteen
     outlined boxes is fifteen rectangles competing with the content. */
  input,select,textarea{border-color:transparent;background:var(--sunk);border-radius:10px;padding:10px 12px}
  input:hover,select:hover,textarea:hover{background:color-mix(in srgb, var(--sunk) 82%, var(--ink) 4%)}
  input:focus,select:focus,textarea:focus{background:var(--panel);border-color:var(--c1)}

  /* A primary button carries a shadow in its own colour — it is the one
     element on the page allowed to look like it is floating. */
  .btn{border-radius:11px;border-color:transparent;font-weight:600;
    box-shadow:0 1px 2px rgba(30,21,35,.10), 0 8px 18px -10px color-mix(in srgb, var(--accent) 70%, transparent);
    transition:transform .12s ease, box-shadow .12s ease, filter .12s ease}
  .btn:hover{transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(30,21,35,.12), 0 12px 22px -10px color-mix(in srgb, var(--accent) 78%, transparent)}
  .btn:active{transform:translateY(0)}
  .btn.ghost{background:var(--sunk);color:var(--ink2);box-shadow:none}
  .btn.ghost:hover{background:color-mix(in srgb, var(--sunk) 78%, var(--ink) 6%);color:var(--ink);transform:none}
  .btn[disabled]{box-shadow:none;transform:none}

  /* ---- the two banners at the top of Home -------------------------------
     Was: a 1px box with a 3px coloured bar down its left edge, painted with
     a token that does not exist. Now: the panel's own surface, a wash of the
     hue it is warning in, and the colour carried by the dot. */
  .nudge{border:0;border-radius:16px;padding:15px 18px;gap:14px;box-shadow:var(--shadow);
    background:linear-gradient(90deg,
      color-mix(in srgb, var(--warn) 7%, var(--card)) 0%,
      color-mix(in srgb, var(--warn) 2%, var(--card)) 30%,
      var(--card) 62%)}
  .nudge.loud{background:linear-gradient(90deg,
      color-mix(in srgb, var(--bad) 10%, var(--card)) 0%,
      color-mix(in srgb, var(--bad) 3%, var(--card)) 34%,
      var(--card) 70%)}
  .nudge .ndot{width:10px;height:10px;margin-top:5px;
    box-shadow:0 0 0 4px color-mix(in srgb, var(--warn) 18%, transparent)}
  .nudge.loud .ndot{box-shadow:0 0 0 4px color-mix(in srgb, var(--bad) 18%, transparent)}

  /* ---- shortcut cards ---------------------------------------------------
     Hover turned the border orange. There is no border to turn now, and an
     orange outline was never the point — the point is that the thing under
     the pointer comes forward. */
  .hcard{border-radius:16px;box-shadow:var(--shadow);padding:17px 18px 16px;
    transition:box-shadow .16s ease, transform .16s ease}
  .hcard:hover{transform:translateY(-3px);box-shadow:var(--lift)}
  .hcard .hi{width:36px;height:36px;border-radius:12px}
  .hcard.con{background:var(--panel)}

  /* ---- the welcome band -------------------------------------------------
     Same two brand purples, but lit from the top right, so it has a light
     source instead of a diagonal wipe. */
  .hhero{border-radius:18px;
    background-image:radial-gradient(120% 140% at 88% 0%, var(--brand2) 0%, var(--brand) 62%),
      repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 34px)}
  .hhero .pad{padding:26px 26px 28px}
  .hhero h2{font-size:30px}
  .celeb{border-radius:16px;box-shadow:var(--shadow)}

  /* ---- boxes inside panels ----------------------------------------------
     A white box on a white panel has to draw a border or it is not a box.
     The modern answer is to go the other way: a nested surface sinks rather
     than outlines itself, which is what the phone does with its inputs and
     what this does with its tiles. The person cards on People, the check-in
     box on Home, the little summary cards — all of them stop being outlined
     rectangles and become tiles.
     The distinction that decides it: a TILE holds a few lines and sinks; a
     CONTAINER holds a heading and a table and keeps an edge, because a table
     needs something to end against. Containers keep a border, at the fainter
     of the two line colours. */
  .pcard, .cibox, .tscard, .askans, .chip{border:0;background:var(--sunk)}
  .pcard{border-radius:13px;padding:12px 13px;
    transition:background .14s ease, transform .14s ease, box-shadow .14s ease}
  .pcard:hover{background:var(--panel);transform:translateY(-2px);box-shadow:var(--lift)}
  .cibox, .tscard{border-radius:13px}
  .askans{border-radius:13px}
  .mcblock, .rawbox, .mail, .fee, .lfseg{border-color:var(--line2);border-radius:13px}

  /* ---- faces ------------------------------------------------------------
     The seven tints were written for the phone, where a list of people is a
     column of discs and a grey one is a hole in it. The desktop has the same
     problem and worse — twenty-six initials on People, all the same grey.
     Same seven colours, same function picking them, so a person's disc is
     the same colour on both screens, which is the point of a colour that is
     derived from their name rather than assigned. */
  .pa.tn0{background:color-mix(in srgb, var(--kLeave) 16%, var(--panel));color:var(--kLeave)}
  .pa.tn1{background:color-mix(in srgb, var(--kLtr)   16%, var(--panel));color:var(--kLtr)}
  .pa.tn2{background:color-mix(in srgb, var(--kAtt)   16%, var(--panel));color:var(--kAtt)}
  .pa.tn3{background:color-mix(in srgb, var(--kAdv)   16%, var(--panel));color:var(--kAdv)}
  .pa.tn4{background:color-mix(in srgb, var(--kPay)   16%, var(--panel));color:var(--kPay)}
  .pa.tn5{background:color-mix(in srgb, var(--good)   16%, var(--panel));color:var(--good)}
  .pa.tn6{background:color-mix(in srgb, var(--accent) 16%, var(--panel));color:var(--accent2)}
  /* Initials are a label, not a heading — the same reason as on the phone. */
  .pcard .pa span, .hrow2 .pa span{font-family:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
    font-weight:600;color:inherit}

  /* ---- the rest of the shared furniture --------------------------------- */
  .seg{border:0;background:var(--sunk);border-radius:999px;padding:3px;gap:3px}
  .stat{border-right-color:var(--line2)}
  .strip{border-radius:16px}
  .note{border-left:0;border-radius:12px;padding:12px 15px;
    background:color-mix(in srgb, var(--c2) 7%, var(--card))}
  .plist{border-radius:16px}
  .pli:first-child{border-top-left-radius:16px;border-top-right-radius:16px}
  .pli:last-child{border-bottom-left-radius:16px;border-bottom-right-radius:16px}
}

/* ---------- Console -> Pay -> Monthly costs (0097) ---------- */
.cmbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.cmstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.cmstrip > div{background:var(--sunk);border-radius:13px;padding:13px 15px;
  display:flex;flex-direction:column;gap:3px}
.cmstrip .k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink3)}
.cmstrip .v{font-family:'Newsreader',Georgia,serif;font-size:23px;line-height:1.1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.cmstrip .s{font-size:12px;color:var(--ink3);line-height:1.35}

.cmsave[hidden]{display:none}
.cmsave{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;
  background:var(--accentSoft);border:1px solid var(--accent);border-radius:13px;padding:10px 14px}
.cmsave > span{font-weight:700;font-size:13px;color:var(--accent2);margin-right:auto}

.cmwrap{overflow-x:auto}
.cmtab{width:100%;min-width:1100px;border-collapse:collapse;table-layout:fixed;
  font-variant-numeric:tabular-nums}
.cmtab th,.cmtab td{padding:6px 3px;border-bottom:1px solid var(--line2);text-align:right;
  vertical-align:middle}
.cmtab th{font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink3);
  font-weight:700;border-bottom:1px solid var(--line);white-space:nowrap;padding-bottom:8px}
.cmtab th.cmwho,.cmtab td.cmwho{text-align:left;width:21%;padding-left:2px}
.cmtab td.cmwho{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmtab td.cmwho b{display:block;font-size:13px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis}
.cmtab td.cmwho span{display:block;font-size:11px;color:var(--ink3)}
.cmtab th.cmtotc,.cmtab td.cmtotc{width:9%;padding-right:2px;font-size:13px;font-weight:700;color:var(--ink)}
.cmtab tbody tr:hover td{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.cmtab tfoot td{border-top:2px solid var(--line);border-bottom:0;font-weight:700;
  padding-top:10px;font-size:13px}
.cmtab tfoot td.cmwho span{font-weight:400}

/* One cell: the box, and one line under it saying where its figure came from.
   The line is always there, empty or not, so every row in the grid is the
   same height and the columns stay level across the page. */
.cmcell{display:flex;flex-direction:column;align-items:stretch;gap:2px}
.cmcell input{width:100%;padding:5px 5px;font-size:12.5px;text-align:right;
  font-variant-numeric:tabular-nums;border-radius:8px;background:var(--panel)}
.cmcell input::placeholder{color:var(--ink3);opacity:.65}
.cmcell small[hidden],.cmcell .cmchip[hidden]{display:none}
.cmcell small,.cmcell .cmchip{display:block;font-size:9.5px;line-height:1.3;height:13px;
  text-align:right;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmcell .cmchip{border:0;background:none;padding:0;cursor:pointer;color:var(--accent2);
  font-weight:600;letter-spacing:.01em}
.cmcell .cmchip.once{color:var(--c1)}
.cmcell .cmchip:hover{text-decoration:underline}
.cmcell.ed input{border-color:var(--accent);background:var(--accentSoft);font-weight:700}

.cmnote{margin:16px 0 0;color:var(--ink2);font-size:13px;line-height:1.55}


/* ---------- the month picker the costing screens share ---------- */
.mpick{display:inline-flex;align-items:center;gap:9px;margin:0}
.mpick > span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--ink3)}
.mpick select{padding:7px 30px 7px 12px;font-size:13.5px;font-weight:600;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  min-width:160px;cursor:pointer}
.mpick select:hover{border-color:var(--accent)}
.mpick select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* A stat whose value is words rather than a figure. Level with the numbers
   beside it, so a row of cards still reads as a row. */
.stat .v.word{font-size:15.5px;font-weight:600;letter-spacing:0;line-height:1.3;
  font-variant-numeric:normal;align-self:center}
@media(max-width:720px){ .stat .v.word{font-size:14px!important} }

/* ---------- how current the sales figures are (0101) ---------- */
/* Padded to the same height as the year and quarter beside it: .seg is a 1px
   border round a 12.5px button with 6px of padding, and three controls in a
   row that are not the same height read as three controls somebody forgot
   about. */
.asof{display:inline-flex;align-items:center;gap:7px;padding:0 12px;border-radius:8px;
  background:var(--sunk);border:1px solid var(--line);white-space:nowrap;cursor:default;
  /* The same height as the year and the quarter beside it. Three controls in
     a row that are not the same height read as three controls somebody forgot
     about, so this is measured against .seg rather than guessed: a 1px border
     round a 12.5px button with 6px of padding comes to 37. */
  box-sizing:border-box;min-height:37px;line-height:1.4}
.asof .k{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--ink3)}
.asof b{font-size:12.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.4}
/* Green while the last workbook is within ten days, amber beyond it. The ring
   is the same trick the online marks elsewhere use: a spread shadow rather
   than a second element, so it never moves anything beside it. */
.adot{width:8px;height:8px;border-radius:99px;flex:0 0 auto;background:var(--good);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 20%,transparent)}
.adot.old{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 20%,transparent)}
/* Was 980, which was late: at 1080 the bar had already wrapped the bell and
   the avatar onto a row of their own. */
@media(max-width:1240px){ .asof .k{display:none} }
/* ON A PHONE IT HAS A LINE OF ITS OWN. Ordered last and given the whole
   width, so the page name keeps the first line instead of being cut to
   'My dash...'. No box: it is a line under a bar, not a control. And the
   words come back, because on a full line there is room for them and a bare
   date beside a page title is a date that could mean anything. */
@media screen and (max-width:900px){
  /* The phone bar is one row on purpose — flex-wrap:nowrap, so that a long
     page name is cut with an ellipsis rather than shoving the bell onto a
     second line. Wrapping comes back ONLY so this box can take a line of its
     own: everything else on the row is fixed-width or shrinks, so nothing
     else has ever needed the second line and nothing else takes it. */
  .topbar{flex-wrap:wrap}
  /* flex:1 1 100% and not width:100% — a flex item may shrink out of a width,
     and it did: the bar squeezed the page name down to one letter rather than
     letting the box take a line. */
  .topbar .asof{order:9;flex:1 1 100%;min-height:0;padding:0;border:0;background:none;
    gap:8px;margin:1px 0 0;white-space:normal}
  .topbar .asof .k{display:inline;font-size:9.5px;letter-spacing:.07em}
  .topbar .asof b{font-size:12px;color:var(--ink2)}
}

/* The paperclip in edit mode: the same glyph, offered rather than dead. */
.clip.up{cursor:pointer;opacity:.9;border:1px dashed var(--accent);border-radius:6px;
  padding:0 3px;line-height:1.3;display:inline-block}
.clip.up:hover{background:var(--accentSoft);opacity:1}
.clip.up.busy{opacity:.45;cursor:progress;border-style:solid}

/* ---------- the off-network question (item 1) ---------- */
.ciask{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,#000 42%,transparent);padding:20px}
.ciaskbox{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px 18px;max-width:420px;width:100%;
  box-shadow:0 18px 50px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:12px}
.ciaskbox > b{font-size:17px;color:var(--ink);line-height:1.3}
.ciaskbox > p{margin:0;font-size:14px;line-height:1.55;color:var(--ink2)}
.ciaskgo{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.ciaskgo .btn{width:100%;justify-content:center}
.ciaskno{align-self:center;background:none;border:0;color:var(--ink3);font-size:13px;
  padding:6px 10px;cursor:pointer}
.ciaskno:hover{color:var(--ink2);text-decoration:underline}

/* ---------- the cross on a search box (item 15) ---------- */
.sclrw{position:relative;display:inline-block}
.sclrw > input{width:100%}
.sclrw > input[data-sclr]{padding-right:28px}
.sclrx{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;line-height:1;border:0;border-radius:50%;padding:0;
  background:none;color:var(--ink3);font-size:17px;cursor:pointer;display:none;
  align-items:center;justify-content:center}
.sclrw.on > .sclrx{display:flex}
.sclrx:hover{background:var(--sunk);color:var(--ink)}

/* ---------- the band that stays put (item 21, then rows 12 and 22) --------- */
/*
 *     'Its looks worse now - the reason is that only the tabs are frozen and
 *      the background screen isnt - the whole screen + tabs need to freeze to
 *      look good'
 *     'They look much worse here - the forms and request list scroll behind
 *      the frozen tabs'                                                -- Avin
 *
 * Both true, and both the same fault in three parts.
 *
 *   ONE. The top bar was 88% of the page colour with a blur behind it, so
 *   everything that went under it could still be seen going under it.
 *
 *   TWO. A sticky strip only paints its own box. The tab pill is
 *   align-self:flex-start — as wide as its buttons and no wider — so on the
 *   payment screen the form and the request list slid past it in plain view
 *   with nothing behind them at all. Even the full-width bars left the
 *   content's 24px gutters open at both edges.
 *
 *   THREE. The sub-tabs sat at --topH + 52px, where 52 was a guess at the
 *   height of the console bar above them. Wrong by a few pixels all the time
 *   and wrong by a row whenever that bar wrapped, which is a stripe of moving
 *   page between two things that are supposed to be still.
 *
 * The band is opaque now, and it is as wide as the screen. A huge spread
 * box-shadow in the page colour paints the ground beside each strip, and
 * clip-path cuts that paint down to a band a little taller than the strip —
 * so nothing shows through, nothing shows beside, and no scrollbar is created
 * by any of it, because neither a shadow nor a clip adds to the page's width.
 * --conH is measured like --topH rather than guessed.
 */
.topbar{background:var(--bg);backdrop-filter:none}
.conbar{position:sticky;top:var(--topH,62px);z-index:16;
  box-shadow:var(--shadow),0 0 0 100vmax var(--bg);
  clip-path:inset(-24px -26px -10px -26px)}
.subbar{position:sticky;top:calc(var(--topH,62px) + var(--conH,52px));z-index:15;
  background:var(--bg);padding-top:2px;padding-bottom:2px;
  box-shadow:0 0 0 100vmax var(--bg);
  clip-path:inset(-12px -26px -10px -26px)}
/* The tab pill is only as wide as its own buttons, so this one has to reach
   all the way to the right-hand edge of the screen and not merely to the
   gutter. 100vmax is past the edge in every window there is. */
.content > .seg.segbig{position:sticky;top:var(--topH,62px);z-index:14;
  background:var(--bg);padding:4px 0;
  box-shadow:0 0 0 100vmax var(--bg);
  clip-path:inset(-22px -100vmax -10px -26px)}
/* AND THE TABLE HEADS THAT WERE STICKY FOR NOTHING.
 *
 * Every th in the portal carried position:sticky;top:0 — stuck to the top of
 * the WINDOW, which is behind the bar, so the heading was never once visible
 * while it was doing it: it slid under the band and the rows appeared to
 * scroll up into nothing. That is 'the forms and request list scroll behind
 * the frozen tabs'.
 *
 * Moving it down to the band looks right for one beat and then goes wrong,
 * because these tables are border-collapse:collapse and a collapsed table
 * does not carry its borders with a cell that moves — the heading travels and
 * its lines stay where they were, which is a row of empty boxes above the
 * words. The register is the one table built border-collapse:separate, and
 * there it works and it keeps its own rule below.
 *
 * So the heading scrolls with its rows, the way it always looked as though it
 * did. Nothing is lost: it was never sticking anywhere anybody could see. */
th{position:static}
/* Except sideways, which is a different thing and does work: the name column
   of a wide table stays put while the figures scroll under it. */
.invtable th.s1,.invtable th.s2,.paycol th.act{position:sticky}
@media(max-width:720px){
  /* The phone has its own tab bar at the bottom and much less height to give
     away; the console is not reachable there at all. Nothing is stuck, so
     nothing needs a band behind it. */
  .content > .seg.segbig{position:static;padding:0;box-shadow:none;clip-path:none}
  .conbar{box-shadow:var(--shadow);clip-path:none}
  .subbar{box-shadow:none;clip-path:none}
}

/* 0120: his requests on a phone — one block each, two big buttons */
.apask{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-bottom:1px solid var(--line2)}
.apask:last-child{border-bottom:0}
.apask > span{color:var(--ink2);font-size:14px;line-height:1.4}
.apask > span.apaskwho{color:var(--ink);font-weight:600}
.apaskgo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.apaskgo .btn{width:100%}

/* 0118: who marked a check-in from home as Office, under the word */
.dpop .mkby{display:block;font-size:11.5px;color:var(--ink3)}

/* ---- the Mashreq statements keep their heading ----
     'Freeze the titles on top'                                        -- Avin
   Same answer as the register: a sticky heading needs a box that scrolls, so
   the statement's table box is as tall as the screen leaves room for and
   scrolls inside itself. The table is border-collapse:collapse, whose lines
   do not travel with a sticky cell, so the rule under the heading is an
   inset shadow that does. */
.banktw{max-height:calc(100vh - var(--topH,62px) - var(--conH,52px) - 190px);min-height:300px;overflow:auto}
.banktw thead th{position:sticky;top:0;z-index:3;background:var(--panel2);box-shadow:inset 0 -1px 0 var(--line)}

/* ---------- the console's work-from-home screen (item 17) ---------- */
.wfcbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.wfctab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.wfctab th,.wfctab td{padding:7px 9px;font-size:13px;border-bottom:1px solid var(--line2);text-align:left}
.wfctab th{font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink3);
  font-weight:700;border-bottom:1px solid var(--line);white-space:nowrap}
.wfctab th.r,.wfctab td.r{text-align:right}
.wfctab tbody tr:hover td{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.wfctab .wfcwhen{color:var(--ink3);font-size:12px;line-height:1.5}

/* ---------- every total in the portal, at one weight (item 26) ----------
   Last in the file on purpose: this is the rule that settles the argument
   between the per-screen ones above, which had totals at 600 on most
   screens, 700 on a few, and both inside a single payroll row. */
tr.tot td, tr.tot th,
tfoot td, tfoot th,
.mline.tot, .cn.tot,
/* Mattia's block sets its own 600 with a more specific selector than the one
   above, so it is named here rather than left to win the argument. */
.mcblock tr.tot td,
.feefoot b, .costp tfoot b{font-weight:700}
/* A figure inside a total cell is the total; it does not get to be lighter
   than the cell it is in. */
tr.tot td b, tr.tot td strong, tfoot td b, tfoot td strong,
.mline.tot b, .cn.tot b{font-weight:700}
/* ---- Console → Staff (v1.61) ---- */
.st-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.st-grow{flex:1}
.st-bar .st-q{width:300px;flex:0 0 300px;max-width:100%;padding:7px 11px;font-size:13.5px}
.st-back{background:none;border:0;color:var(--ink2);font-size:14px;padding:6px 2px;cursor:pointer;font-weight:500}
.st-back:hover{color:var(--ink)}
.st-dim{color:var(--ink3)}
.st-goes{color:var(--ink3);font-size:12.5px;font-weight:400;font-family:'IBM Plex Sans',sans-serif}
h2 .st-goes{font-size:13.5px}
.st-dir .st-goes,.st-opt .st-goes{display:block;line-height:1.3}
.st-nw{white-space:nowrap}
.st-empty{text-align:center;color:var(--ink3);padding:30px 0!important}
.st-dir tbody tr{cursor:pointer}
.st-dir tbody tr:hover td{background:var(--panel2)}
.st-dir tbody tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.st-dir td{vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-dir td .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.st-nm{display:inline-flex;align-items:center;gap:10px;min-width:0}
.st-nm > span:last-child{overflow:hidden;text-overflow:ellipsis}
.pa.st-sm{width:28px;height:28px}
.pa.st-sm span{font-size:11px}
.pa.st-lg{width:64px;height:64px}
.pa.st-lg span{font-size:24px}
/* the jump box */
.st-pick{position:relative;width:360px;max-width:100%}
.st-pick input{padding:8px 12px 8px 34px;font-size:14px;background:var(--panel);width:100%}
.st-pick svg{position:absolute;left:11px;top:50%;margin-top:-7px;width:14px;height:14px;color:var(--ink3);pointer-events:none}
.st-drop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;box-shadow:var(--lift,var(--shadow));z-index:40;max-height:360px;overflow:auto;display:none}
.st-pick.open .st-drop{display:block}
.st-opt{display:flex;gap:10px;align-items:center;padding:7px 12px;cursor:pointer;font-size:14px}
.st-opt small{display:block;color:var(--ink3);font-size:12px}
.st-opt:hover,.st-opt.hi{background:var(--accentSoft)}
.st-step{display:inline-flex;align-items:center;gap:6px;color:var(--ink3);font-size:12.5px}
.st-step button{width:30px;height:30px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;cursor:pointer;font-size:16px;line-height:1}
.st-step button:disabled{opacity:.4;cursor:default}
/* the head */
.st-head{overflow:hidden}
.st-who{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line2)}
.st-who h2{font-size:25px;margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.st-no{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12.5px;color:var(--ink3);font-weight:400}
.st-meta{color:var(--ink2);font-size:14px;margin-top:2px}
.st-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.st-act{display:flex;gap:8px;align-items:center}
.st-act .btn{font-size:14px;padding:8px 16px;line-height:1.25}
.strip.st-flat{border:0;box-shadow:none;border-radius:0;margin:0}
.strip.st-flat .stat .v{font-size:21px}
/* the tabs stay under the console bar while the page scrolls */
.content > #stTabs.seg.segbig{top:calc(var(--topH,62px) + var(--conH,52px))}
/* panels in a row are the same height, and their buttons sit on the bottom */
.st-row{align-items:stretch}
.st-row > .panel{display:flex;flex-direction:column;min-width:0;margin:0}
.st-p > header{align-items:center}
.st-p > header .hint{margin-left:auto;text-align:right}
.st-hbtn{margin-left:12px}
.st-foot{margin-top:auto;padding:12px 18px;border-top:1px solid var(--line2);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.st-txt{padding:16px 18px;color:var(--ink2);font-size:14px;line-height:1.5}
.st-kv{display:block;margin:0;padding:16px 18px;font-size:14px}
.st-kv dt{color:var(--ink3);font-size:11px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:1px}
.st-kv dd{margin:0 0 11px;min-width:0;overflow-wrap:anywhere}
.st-kv dd:last-child{margin-bottom:0}
.st-link{background:none;border:0;padding:0;color:var(--accent2);cursor:pointer;font:inherit;font-weight:500}
.st-link:hover{text-decoration:underline}
.st-docs td,.st-money td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-docs td.r,.st-money td.r,.st-docs th.r,.st-money th.r{text-align:right}
.pill.st-days{min-width:40px;justify-content:center}
.st-money tfoot td{font-weight:600;border-top:1px solid var(--line);background:var(--panel2);border-bottom:0}
.st-money tr.st-sub td{color:var(--ink3);font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:var(--panel2)}
.st-facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0}
.st-facts > div{padding:14px 18px;border-right:1px solid var(--line2);min-width:0}
.st-facts > div:last-child{border-right:0}
.st-facts > div > span{display:block;color:var(--ink3);font-size:11px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:3px}
.st-facts b{font-weight:500;font-size:14px;overflow-wrap:anywhere}
.st-perms{display:flex;flex-direction:column}
.st-perm{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--line2);font-size:14px}
.st-perm:last-child{border-bottom:0}
.st-perm > div > span{display:block;font-size:12px;color:var(--ink3)}
.st-lock{display:flex;align-items:center;gap:8px;background:var(--sunk);border-radius:8px;padding:9px 13px;font-size:13px;color:var(--ink2)}
.st-editbar{display:flex;align-items:center;gap:10px;background:var(--accentSoft);border-radius:var(--r,12px);padding:10px 14px;font-size:14px}
.st-backbar{display:flex;align-items:center;gap:12px;padding:4px 2px!important}
@media print{
  .conbar,.subbar,.st-bar,#stTabs,.st-act,.st-foot,.rail,.topbar{display:none!important}
}
/* v1.62: the Notifications switch on More, and its steps when Blocked. */
.mnot .mnrow{display:flex;align-items:center;gap:13px;padding:14px 15px}
.mnot .mnic{width:38px;height:38px;border-radius:10px;background:var(--sunk);color:var(--ink2);
  flex:0 0 auto;display:grid;place-items:center}
.mnot .mnt{flex:1 1 auto;min-width:0}
.mnot .mnt b{display:block;font-weight:600;font-size:15px;line-height:1.3}
.mnot .mnt i{display:block;font-style:normal;font-size:12.5px;color:var(--ink3);line-height:1.4;margin-top:2px}
.mnot[data-mnot="blocked"] .mnt b{color:var(--warn)}
.mtog{flex:0 0 auto;position:relative;width:50px;height:30px;padding:0;border:0;border-radius:999px;
  background:color-mix(in srgb, var(--ink3) 45%, transparent);cursor:pointer;transition:background .18s}
.mtog span{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .18s}
.mtog[aria-checked="true"]{background:var(--good)}
.mtog[aria-checked="true"] span{transform:translateX(20px)}
.mtog:disabled{opacity:.45;cursor:default}
.mtog.busy{opacity:.6}
.mnot .mnbtn{width:100%;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.mnot .mnbtn:active{background:var(--sunk)}
.mnot .mnbtn.busy{opacity:.6}
.mnot .mnic.mnok{background:var(--goodBg);color:var(--good)}
.mnot .mntap{display:block;font-style:normal;font-size:12.5px;font-weight:600;color:var(--accent2);margin-top:4px}
.mnsteps{padding:0 15px 15px}
.mnsteps p{margin:0 0 8px;font-size:13.5px;color:var(--ink2);line-height:1.5}
.mnsteps ol{margin:0 0 12px;padding-left:22px;font-size:14px;line-height:1.75;color:var(--ink)}
.mnsteps .mnalso{font-size:12.5px;color:var(--ink3)}
.mnsteps .btn{width:100%}
/* v1.63: 'You are using an old version' — centred on a desk, a short sheet on a phone. */
.nbwrap{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(30,21,35,.45)}
:root[data-theme="dark"] .nbwrap{background:rgba(0,0,0,.6)}
.nbpop{font-family:'IBM Plex Sans',system-ui,sans-serif;width:430px;max-width:100%;background:var(--panel);color:var(--ink);border-radius:18px;
  padding:26px 26px 22px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.nbgrab{display:none}
.nbtop{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:8px}
.nbic{width:48px;height:48px;border-radius:14px;background:var(--accentSoft);color:var(--accent);
  display:grid;place-items:center;flex:0 0 auto}
.nbic svg{width:26px;height:26px}
.nbpop h2{font-family:'IBM Plex Sans',system-ui,sans-serif;letter-spacing:0;margin:0;font-size:20px;font-weight:700;line-height:1.25;color:var(--ink)}
.nbpop p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.nbvers{display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:12px 14px;border-radius:12px;
  background:var(--sunk);font-size:14px;color:var(--ink2)}
.nbvers s{color:var(--ink3)}
.nbvers b{color:var(--accent);font-weight:700}
.nbbtns{display:flex;gap:10px;margin-top:18px}
.nbbtns button{flex:1;border-radius:12px;font:inherit;font-weight:600;font-size:15px;padding:12px 16px;cursor:pointer}
#nbNo{background:transparent;color:var(--ink2);border:1px solid var(--line)}
#nbGo{background:var(--accent);color:var(--accentInk);border:1px solid var(--accent)}
.nbnote{margin-top:12px;font-size:12.5px;color:var(--ink3);text-align:center}
@media(max-width:560px){
  .nbwrap{align-items:flex-end;padding:0}
  .nbpop{width:100%;border-radius:22px 22px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom))}
  .nbgrab{display:block;width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 12px}
  .nbtop{flex-direction:row;align-items:center;gap:12px;margin-bottom:6px}
  .nbic{width:36px;height:36px;border-radius:10px}
  .nbic svg{width:20px;height:20px}
  .nbpop h2{font-size:17px}
  .nbpop p{font-size:13.5px}
  .nbvers{margin-top:10px;padding:8px 12px;font-size:13px}
  .nbbtns{margin-top:12px}
  .nbbtns button{padding:10px 12px;font-size:14px}
  .nbnote{font-size:11.5px;margin-top:8px}
}
/* v1.64: the switch under the sub-tab row scrolls with the page */
.content > #swSeg.seg.segbig{position:static;margin-top:2px}
/* v1.67: a console bar with no section buttons (the documents desk) drew
   an empty pill as a stray dot beside Back to my portal */
.conbar .ctabs:empty{background:none;border:0;padding:0;box-shadow:none}
/* ---- Console → Requests (v1.69) ---- */
.rq-top{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.rq-top p{flex:1;margin:0;color:var(--ink2);font-size:14px;min-width:0}
.rq-top .btn{flex:0 0 auto;padding:8px 16px;font-size:14px}
.rq-teamtop{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:12px 18px}
.rq-form{margin-bottom:14px}
.rq-form > header .hint{margin-left:auto}
.rq-kseg{margin-bottom:14px}
.rq-kseg button{padding:7px 14px;font-size:13px}
.rq-grid{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:flex-end}
.rq-grid .rq-f{margin:0;flex:0 0 160px;min-width:0}
.rq-grid .rq-f.rq-wide{flex:0 0 230px}
.rq-grid .rq-f.rq-num{flex:0 0 120px}
.rq-grid .rq-f.rq-grow{flex:1 1 220px}
.rq-grid .rq-f label{display:block;font-size:12px;color:var(--ink3);margin-bottom:5px;white-space:nowrap}
.rq-grid input,.rq-grid select{padding:8px 10px;font-size:14px;height:38px}
.rq-foot{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}
.rq-foot .btn{padding:8px 16px;font-size:14px;flex:0 0 auto}
.rq-line{flex:1;margin:0;color:var(--ink2);font-size:13.5px;min-width:0}
.rq-over{color:var(--bad)}
.rq-err{margin:10px 0 0;color:var(--bad);font-size:13.5px;font-weight:500}
.rq-filt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line2)}
.rq-filt .seg button{padding:6px 12px}
.rq-filt .rq-kind{width:190px;flex:0 0 190px;padding:6px 10px;font-size:13px;height:32px}
.rq-filt .rq-q{width:220px;flex:0 0 220px;margin-left:auto;padding:6px 11px;font-size:13px;height:32px}
.rq-list .regblock .cotabs{padding-top:10px}
table.rqtable td{vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.rqtable td.rq-act{overflow:visible}
/* v1.89.4 — a long 'Decided by' name wraps inside its cell instead of running out of it */
table.rqtable td.rq-act{white-space:normal;overflow-wrap:break-word;line-height:1.35}
table.rqtable td.rq-act .btn{white-space:nowrap}
table.rqtable td.rq-act .rq-by{white-space:normal}
/* every column but Reason has a set width; Reason takes what is left */
table.rqtable{table-layout:fixed}
/* a small screen: the list scrolls sideways instead of squeezing Reason to nothing */
@media(max-width:1399px){
  .regblock .tw-rqtable{overflow-x:auto}
  table.rqtable{min-width:1300px}
}
/* a narrow Reason wraps between words, never inside one */
table.rqtable tbody td.rq-why{overflow-wrap:break-word}
table.rqtable td.rq-why{white-space:normal;overflow-wrap:anywhere;color:var(--ink2);font-size:13px;line-height:1.4;padding-top:9px;padding-bottom:9px}
table.rqtable td.rq-wrap{white-space:normal;overflow-wrap:anywhere}
.rq-by{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;white-space:nowrap}
.rq-by .rq-tag{margin-left:0}
.rq-no{display:block;color:var(--bad);font-size:12px;margin-top:2px}
table.rqtable td.rq-act .btn + .btn{margin-left:4px}
table.rqtable .pill{vertical-align:middle}
.rq-dim{color:var(--ink3)}
.rq-tag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent2,var(--accent));background:var(--accentSoft);border-radius:99px;padding:1px 7px;margin-left:4px;vertical-align:1px}
.rq-when{width:auto;height:28px;padding:2px 6px;font-size:12.5px;vertical-align:middle}
@media (max-width: 760px){
  .rq-top{flex-direction:column;align-items:stretch}
  .rq-grid .rq-f,.rq-grid .rq-f.rq-wide,.rq-grid .rq-f.rq-num,.rq-grid .rq-f.rq-grow{flex:1 1 100%}
  .rq-foot{flex-wrap:wrap}
  .rq-foot .rq-line{flex:1 1 100%}
  .rq-foot .btn{flex:1 1 0}
  .rq-kseg{display:flex}
  .rq-kseg button{flex:1;white-space:nowrap;padding:7px 6px;font-size:12.5px}
}
/* v1.70 — POA workbook on Weekly upload */
.poaup-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
table.poaup-people,table.poaup-hist{table-layout:fixed;width:100%}
table.poaup-people td,table.poaup-people th,table.poaup-hist td,table.poaup-hist th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poaup-h{margin:22px 0 -8px;font-size:15px;font-weight:600}
/* v1.71 — My commission, for POA */
.poa-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.poa-pair{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:stretch;margin-bottom:14px}
.grid.poa-pair>.panel{display:flex;flex-direction:column;min-width:0;margin:0}
.grid.poa-pair>.panel>.pad{flex:1;display:flex;flex-direction:column}
table.poa-steps,table.poa-months{table-layout:fixed;width:100%}
table.poa-steps td,table.poa-steps th,table.poa-months td,table.poa-months th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
tr.poa-row{cursor:pointer}
tr.poa-row:hover td{background:var(--panel2)}
tr.poa-row.on td{font-weight:600;background:var(--panel2)}
tr.poa-future td{color:var(--ink3)}
table.poa-steps tr.sub td{border-top:1px solid var(--line);font-weight:500}
/* v1.72 — My dashboard and My invoices, for POA */
.grid.poa-pair2{align-items:stretch;margin-bottom:14px}
.grid.poa-pair2>.panel{display:flex;flex-direction:column;min-width:0;margin:0}
.grid.poa-pair2>.panel>.pad:last-child{flex:1;display:flex;flex-direction:column}
table.poa-cli,table.poa-inv{table-layout:fixed;width:100%}
table.poa-cli td,table.poa-cli th,table.poa-inv td,table.poa-inv th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.poa-inv tr.poa-cn td{color:var(--ink2)}
table.poa-inv td.wrap,table.poa-inv th.wrap{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
/* v1.80 — My invoices (POA): the headings stay put and the totals stay in view, as on CorpLex's */
table.poa-inv thead th{position:sticky;top:0;z-index:3;background:var(--panel2);box-shadow:inset 0 -1px 0 var(--line)}
table.poa-inv tfoot td{position:sticky;bottom:0;z-index:3;background:var(--panel2);border-top:2px solid var(--line)}
/* v2.74 — My invoices (POA): the invoices not counted yet, in the same columns as the list above */
table.poa-nc{table-layout:fixed;width:100%}
table.poa-nc td,table.poa-nc th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.poa-nc td.wrap,table.poa-nc th.wrap{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;hyphens:none}
table.poa-nc tr.poa-cn td{color:var(--ink2)}
table.poa-nc thead th{position:sticky;top:0;z-index:3;background:var(--panel2);box-shadow:inset 0 -1px 0 var(--line)}
table.poa-nc tfoot td{background:var(--panel2);border-top:2px solid var(--line)}
.panel.poa-ncp .pill.mute{white-space:nowrap}
.panel.invpanel.poa-withnc{height:auto}
.panel.invpanel.poa-withnc>.invscroll{flex:none;max-height:calc(100vh - 240px)}
/* v1.73 — Department, Team performance and Commissions, for POA */
table.poa-dm,table.poa-team{table-layout:fixed;width:100%}
table.poa-dm td,table.poa-dm th,table.poa-team td,table.poa-team th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.poa-team tr.poa-left td{color:var(--ink2)}
table.poa-team td.poa-hit{color:var(--good);font-weight:600}
table.poa-team td.poa-owed{color:var(--warn);font-weight:600}
.grid.poa-pair2>.panel>.tw+.cap{margin-top:auto}
/* v1.80 — the target table's five columns fit a half-width panel at 1280 */
table.poa-dm td,table.poa-dm th{padding-left:8px;padding-right:8px}
table.poa-dm td:first-child,table.poa-dm th:first-child{padding-left:16px}
/* v1.80 — a long name wraps at a space at 1280 rather than being cut */
table.poa-team td.pn{white-space:normal;overflow:visible;text-overflow:clip}
/* v1.74 — Rules & targets, for POA */
.poa-rules h4{margin:18px 0 4px;font-size:14px;font-weight:600}
.poa-rules h4:first-child{margin-top:0}
.poa-rules p{margin:0 0 8px;color:var(--ink2);font-size:13.5px}
table.poa-rt{table-layout:fixed;width:100%;margin-bottom:6px}
table.poa-rt td,table.poa-rt th{white-space:normal}
header.poa-subh{border-top:1px solid var(--line)}
#qSeg .poa-mpick{border:0;border-left:1px solid var(--line);border-radius:999px;background:none;font:inherit;font-size:12.5px;font-weight:500;color:var(--ink2);padding:6px 10px;margin:0 0 0 2px;cursor:pointer;align-self:center;outline-offset:2px}
#qSeg .poa-mpick.on{background:var(--brand);color:var(--brandInk);border-left-color:transparent}
#qSeg .poa-mpick option{background:var(--panel);color:var(--ink)}
td.commauto{text-decoration:underline dotted var(--accent);text-underline-offset:3px;cursor:help}
.pocomm{display:inline;font-size:10.5px;line-height:1.2;color:var(--accent2,var(--accent));font-weight:600;cursor:help}
td .pocomm{display:block;margin-top:2px}
/* v1.81.1 — Letter request, "Addressed to": two choice cards with a radio dot,
   side by side at a desk and one under the other on a phone (Avin 25/09/2026:
   "addressed to looks so ugly" — the pill squeezed two lines into a blob). */
.seg.halfseg.ltto2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;
  background:none;border:0;border-radius:0;padding:0;overflow:visible;box-shadow:none}
.seg.halfseg.ltto2 button{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;
  text-align:left;white-space:normal;line-height:1.3;min-width:0;margin:0;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);
  padding:12px 14px 12px 42px;font-size:14px;font-weight:600;box-shadow:none}
.seg.halfseg.ltto2 button span{font-size:12.5px;font-weight:400;color:var(--ink3);opacity:1}
.seg.halfseg.ltto2 button::before{content:'';position:absolute;left:14px;top:13px;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--line);background:var(--panel);box-sizing:border-box}
.seg.halfseg.ltto2 button[aria-pressed="true"]{border-color:var(--accent);background:var(--accentSoft);color:var(--ink)}
.seg.halfseg.ltto2 button[aria-pressed="true"] span{color:var(--ink2);opacity:1}
.seg.halfseg.ltto2 button[aria-pressed="true"]::before{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--panel)}
@media(max-width:720px){ .seg.halfseg.ltto2{grid-template-columns:minmax(0,1fr)} }
/* v1.82 — payment approvals on the phone */
#apRemarks{display:block;width:100%;height:48px;resize:none;line-height:1.4;font:inherit}
.pq-panel{padding-bottom:4px}
.pq-list{display:flex;flex-direction:column;gap:12px;padding:12px}
.pq-none{margin:0;padding:22px 16px;text-align:center;color:var(--ink3)}
.pq-card{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.pq-card.pq-rj{border-color:var(--bad)}
.pq-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line2);background:var(--panel2)}
.pq-ord{display:block;font-size:15.5px}
.pq-by{display:block;font-size:12.5px;color:var(--ink3);margin-top:2px}
.pq-amt{font-size:18px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.pq-amt span{font-size:11px;font-weight:600;color:var(--ink3);margin-right:4px;letter-spacing:.04em}
.pq-b{padding:8px 14px 4px}
.pq-l{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;padding:5px 0;font-size:13.5px;line-height:1.35}
.pq-l span{color:var(--ink3)}
.pq-l b{font-weight:500;overflow-wrap:anywhere}
.pq-docs{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 4px}
.pq-doc{display:inline-flex;align-items:center;gap:6px;max-width:100%;border:1px solid var(--line);border-radius:99px;
  background:var(--panel2);padding:5px 11px;font-size:12.5px;color:var(--ink2)}
.pq-doc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.pq-doc svg{width:15px;height:15px;flex:none}
.pq-doc.off{opacity:.55}
.pq-act{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 14px 14px}
.pq-act .btn{width:100%;justify-content:center;margin:0}
.btn.ghost.pq-no{color:var(--bad)}
.btn.pq-no:not(.ghost){background:var(--bad);border-color:var(--bad);color:#fff}
.pq-rjbox{padding:10px 14px 0;border-top:1px solid var(--line2)}
.pq-rjbox label{display:block;font-size:12.5px;color:var(--ink2);margin-bottom:7px;text-transform:none;letter-spacing:0}
.pq-rjbox input{width:100%}
.pq-rjbox .pq-act{padding:12px 0 14px}
.pq-err{color:var(--bad);font-size:12.5px;margin:6px 0 0}
@media(max-width:720px){
  /* The approval steps on a phone: the accounts two to a row, the buttons full width. */
  .seg[style*="grid-template-columns:repeat("]{grid-template-columns:repeat(2,minmax(0,1fr))!important;border-radius:14px}
  .seg[style*="grid-template-columns:repeat("] button{border-radius:10px}
  #apWa,#apCopy,#apDone,#apCancel{flex:1 1 100%;width:100%;justify-content:center}
}
@media(max-width:720px){
  /* the two payment tabs side by side, the same width */
  .subtabs:has(> [data-paytab]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .subtabs:has(> [data-paytab]) > button{width:100%;justify-content:center;text-align:center;white-space:nowrap;padding-left:4px;padding-right:4px;font-size:13px;min-width:0}
  .subtabs:has(> [data-paytab]) > button .cnt{margin-left:3px}
  #apRemarks{height:auto;min-height:72px}
}
/* v1.83 — one compact row per request on the phone */
.pr-list{display:flex;flex-direction:column}
.pr-row{border-top:1px solid var(--line2)}
.pr-row:first-child{border-top:0}
.pr-row.open{background:var(--panel2)}
.pr-top{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:none;border:0;
  padding:11px 16px;text-align:left;color:var(--ink);font:inherit;cursor:pointer}
.pr-a,.pr-b{display:flex;flex-direction:column;gap:4px;min-width:0}
.pr-top{align-items:flex-start}
.pr-a{flex:1 1 auto}.pr-b{flex:none;align-items:flex-end}
.pr-a b{font-size:14.5px}
.pr-a i{font-style:normal;font-size:12.5px;color:var(--ink3);line-height:1.35}
.pr-b b{font-size:14.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-b i{font-style:normal}
.pr-b .pill{font-size:11px;padding:2px 8px;white-space:nowrap}
.pr-more{padding:2px 16px 12px}
.pr-older{margin:0;padding:10px 16px 14px;font-size:12.5px;color:var(--ink3);border-top:1px solid var(--line2)}
/* v2.42 — payment status inside an opened decided row */
.pr-pay{margin-top:8px;padding-top:10px;border-top:1px solid var(--line2)}
.pr-pay > span{display:block;font-size:12.5px;color:var(--ink3);margin-bottom:7px}
.pr-pay .seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
.pr-pay .seg button{justify-content:center;text-align:center;min-width:0;padding:9px 6px;font-size:13px}
/* v1.83.1 — My requests at a desk: seven columns, nothing cut */
.paytab.mine2 table{table-layout:fixed;width:100%}
.paytab.mine2 td,.paytab.mine2 th{white-space:normal;overflow:visible;text-overflow:clip;vertical-align:top;overflow-wrap:normal;word-break:normal}
.paytab.mine2 td.n{white-space:nowrap}
.paytab.mine2 .sub{font-size:12px;color:var(--ink3);margin-top:2px;line-height:1.4}
.paytab.mine2 .pill{white-space:nowrap}
.paytab.mine2 .doc{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
/* v1.84 / v2.17: the payment check above Step 1 — money in, from the statements */
.pchk{border:1px solid var(--line);border-left:4px solid var(--ink3);border-radius:10px;padding:12px 14px;background:var(--panel2);display:flex;flex-direction:column;gap:10px}
.pchk-good{border-left-color:var(--good)} .pchk-warn{border-left-color:var(--warn)} .pchk-bad{border-left-color:var(--bad)}
.pchk-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pchk-top .btn{white-space:nowrap;flex:none}
.pchk-v{font-weight:600;font-size:13.5px;color:var(--ink)}
.pchk-good .pchk-v{color:var(--good)} .pchk-bad .pchk-v{color:var(--bad)} .pchk-warn .pchk-v{color:var(--warn)}
.pchk-box{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:4px 12px;display:flex;flex-direction:column;min-width:0}
/* date | where | amount | PR | from — the same five columns on every line */
.pchk-l{display:grid;grid-template-columns:84px 96px 118px 128px minmax(0,1fr);gap:12px;font-size:12.5px;align-items:baseline;
  padding:7px 0;border-bottom:1px solid var(--line2, var(--line))}
.pchk-l:last-child{border-bottom:0}
.pchk-l .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.pchk-l .pl-a{text-align:right;font-weight:600;color:var(--ink)}
.pchk-l .pl-w,.pchk-l .pl-d{color:var(--ink2);white-space:nowrap}
.pchk-l .pl-p{color:var(--ink2);overflow-wrap:anywhere}
.pchk-l .pl-p i{font-style:normal;color:var(--ink3)}
.pchk-l .pl-f{color:var(--ink3);overflow-wrap:anywhere;line-height:1.4}
.pchk-none{font-size:12.5px;color:var(--ink3);line-height:1.45}
.pchk-none b{color:var(--ink2);font-weight:600}
.pchk-out{font-size:12.5px;color:var(--ink2)}
.pchk-over{color:var(--bad)}
.pchk-asof{font-size:11.5px;color:var(--ink3)}
.pchk-bad-t{color:var(--bad)}
@media (max-width:760px){
  .pchk-l{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'d a' 'w p' 'f f';row-gap:2px;column-gap:10px}
  .pchk-l .pl-d{grid-area:d} .pchk-l .pl-a{grid-area:a} .pchk-l .pl-w{grid-area:w} .pchk-l .pl-p{grid-area:p;text-align:right}
  .pchk-l .pl-f{grid-area:f}
  .pchk-top{align-items:flex-start}
}
/* v1.88 the payroll register: one line to a person, whole dirhams, Salary,
   Gross and Net in bold, a rule after the days and after the gross. */
.ptab{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.ptab th,.ptab td{white-space:nowrap}
.ptab th{height:auto;line-height:1.25;padding-top:10px;padding-bottom:10px;vertical-align:bottom}
.ptab td{border-bottom:1px solid var(--line2);vertical-align:middle;font-variant-numeric:tabular-nums;
  padding-top:8px;padding-bottom:8px}
.ptab th.r,.ptab td.r{text-align:right}
.ptab td.pb{font-weight:600;color:var(--ink)}
.ptab th.rule,.ptab td.rule{border-right:1px solid var(--line)}
.ptab th.rule,.ptab td.rule{padding-right:12px}
.ptab th.rule + th,.ptab td.rule + td{padding-left:12px}
.ptab tr.sub td{background:var(--panel2);font-weight:600;color:var(--ink2)}
.ptab tr.tot td{background:var(--sunk);font-weight:700;color:var(--ink);border-top:2px solid var(--line)}
.ptab tr.sub td.pb,.ptab tr.tot td.pb{font-weight:700;color:var(--ink)}
.ptab td.pnm{max-width:280px;overflow:hidden;text-overflow:ellipsis}
.ptab th.s1,.ptab td.s1{width:1%}
.ptab .wmark{margin-left:6px;padding:0 6px;font-size:10.5px}
.pnote{display:inline-grid;place-items:center;width:15px;height:15px;margin-left:6px;border-radius:50%;
  border:1px solid var(--line);font-size:10px;font-style:italic;font-weight:700;font-family:Georgia,serif;
  color:var(--ink3);vertical-align:1px;cursor:help}
.ptab .autoc{display:inline;margin-left:4px;font-size:10.5px}
.ptab .attday{display:inline;width:auto;padding:1px 6px;margin-right:6px;border-radius:9px;
  background:color-mix(in srgb,var(--warn) 13%,transparent);font-size:11px;vertical-align:1px}
.ptab td .pocomm{display:inline;margin:0 6px 0 0}
.ptab td.payc{padding:0 !important}
.ptab td.payc .edread{display:inline-block;padding:8px 8px}
.ptab td.payc .attday + .edread,.ptab td.payc .pocomm + .edread{padding-left:0}
.ptab td.payc .attday{margin-left:8px}
.ptab .payin{width:72px;padding:8px 6px;font-size:13px}
.ptab .payin.pdays{width:44px}
.pwrap .ptabs{border-top:0}
/* v1.89.1 — the headings stay put (Avin: "the table titles are not freezed").
   As on every other register: at a desk the tabs stick under the band, the
   headings under the tabs, the last total to the foot of the screen. While
   editing, the boxes can make the table wider than the panel, so it scrolls
   inside its own box and the headings stick to the top of that instead. */
.ptab thead th{background:var(--panel2);box-shadow:inset 0 -1px 0 var(--line)}
@media(min-width:1200px){
  .pwrap .tw{overflow:visible}
  .ptab thead th{position:sticky;top:calc(var(--underH,99px) - 1px);z-index:11;
    box-shadow:0 -4px 0 var(--panel2),inset 0 -1px 0 var(--line)}
  .ptab thead th.s1{z-index:11}
  .ptab tbody tr.tot:last-child td{position:sticky;bottom:0;z-index:10;box-shadow:inset 0 2px 0 var(--line)}
  .pwrap.ped .tw{overflow:auto;max-height:calc(100vh - var(--underH,160px) - 16px)}
  .pwrap.ped .ptab thead th{top:0}
}
@media(max-width:1199px){
  .pwrap .tw{overflow:auto;max-height:calc(100vh - 140px)}
  .ptab thead th{position:sticky;top:0;z-index:11}
  .ptab thead th.s1{z-index:13}
  .ptab tbody tr.tot:last-child td{position:sticky;bottom:0;z-index:10;box-shadow:inset 0 2px 0 var(--line)}
}
.st-find{width:380px;flex:0 0 380px}
.st-find svg{z-index:1}
.st-find .sclrw{display:block;width:100%}
.st-find input{border:1px solid var(--line)}
.st-pick input{border:1px solid var(--line)}
.st-revnote{margin:0}
.rv-edgrid{display:grid;grid-template-columns:180px 1fr 1fr 220px;gap:14px;align-items:end}
.rv-edgrid .field{margin:0}
.rv-edsum{display:flex;flex-direction:column;gap:2px;padding-bottom:4px}
.rv-edsum > span:first-child{font-size:12px;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em}
.rv-edsum b{font-size:18px}
.rv-edsum #rvEdCh{font-size:12.5px;color:var(--ink2)}
.rv-ederr{margin:10px 0 0!important;color:var(--bad)!important}
.rv-ed .drow{margin-top:14px;display:flex;align-items:center;gap:10px}
.rv-edhint{font-size:12.5px;color:var(--ink3);margin-left:6px}
/* ---- v1.99: Console → Sales → Zoho Books ---- */
.zs-panel{margin-bottom:16px}
.zs-body{padding:14px 18px 16px}
.zs-line{margin:0 0 12px;color:var(--ink2);font-size:14px;line-height:1.5}
.zs-strip{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:12px}
.zs-v{font-size:20px;white-space:nowrap}
.zs-body .upact{margin-top:4px}
.zs-filt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line2)}
.zs-filt .seg button{padding:6px 12px}
.zs-n{display:inline-block;min-width:18px;font-size:11px;font-weight:600;color:var(--ink3);margin-left:2px}
.zs-filt .zs-q{width:250px;flex:0 0 250px;margin-left:auto;padding:6px 11px;font-size:13px;height:32px}
/* the list scrolls inside itself, so its headings stay put */
.zs-tw{max-height:calc(100vh - var(--underH, 160px) - 150px);overflow:auto}
.zs-tw thead th{position:sticky;top:0;z-index:2;background:var(--panel2);box-shadow:0 1px 0 var(--line)}
table.zs-table{table-layout:fixed;width:100%}
table.zs-table td{vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.zs-table td.zs-cl{white-space:normal;overflow:hidden;overflow-wrap:anywhere;line-height:1.3;padding-top:8px;padding-bottom:8px}
.zs-more{font-size:11.5px;font-weight:600;color:var(--ink3)}
table.zs-table td.zs-cl .zs-1l{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zs-pr{display:block;font-size:11.5px;color:var(--ink3);margin-top:1px;overflow:hidden;text-overflow:ellipsis}
table.zs-table td.zs-fl{white-space:normal;overflow:visible;padding-top:7px;padding-bottom:7px}
.zs-flags{display:flex;flex-wrap:wrap;gap:4px}
.zs-flag,.zs-tag{display:inline-block;font-size:11.5px;line-height:1.35;border-radius:6px;padding:2px 7px;white-space:normal}
.zs-flag.warn{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--ink)}
.zs-flag.bad{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.zs-flag.info{background:var(--panel2);color:var(--ink2)}
.zs-tag{background:var(--accentSoft);color:var(--accent2,var(--accent));font-weight:600}
.zs-owe{color:var(--warn)}
.zs-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--warn);vertical-align:1px;margin-left:3px}
/* the pop-up */
.zs-pop{width:min(760px,100%)}
.zs-pop > header{display:flex;align-items:center;gap:12px}
.zs-pop > header h3{flex:0 0 auto;white-space:nowrap}
.zs-popsub{margin:0 0 12px;color:var(--ink2);font-size:13.5px;line-height:1.45}
.zs-popbody{padding:14px 20px 6px}
.zs-popflags{margin-bottom:12px}
.zs-ticks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}
.zs-tick{text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--ink);margin:0;display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;min-height:56px;box-sizing:border-box}
.zs-tick input{margin-top:2px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--accent)}
.zs-tick span{display:flex;flex-direction:column;gap:2px;min-width:0}
.zs-tick b{font-size:13.5px;font-weight:600}
.zs-tick em{font-style:normal;font-size:12px;color:var(--ink3)}
.zs-grid{margin-bottom:6px}
table.zs-table td.zs-cl .zs-more{white-space:nowrap}
.rq-grid.zs-grid .rq-f.zs-numf{flex:0 0 160px}
.rq-grid.zs-grid .rq-f.zs-numf input{width:100%;box-sizing:border-box;font-variant-numeric:tabular-nums}
.rq-grid.zs-grid .rq-f.zs-costf{flex:1 1 200px}
.zs-grid .rq-f label{white-space:nowrap}
.rq-grid.zs-grid .rq-f.zs-fixf{flex:0 0 200px}
.zs-inline{display:flex !important;align-items:center;gap:7px;height:38px;font-size:13.5px !important;color:var(--ink) !important;margin:0 !important;text-transform:none;letter-spacing:0}
.zs-inline input{width:16px;height:16px;accent-color:var(--accent)}
.zs-cost{display:flex;align-items:center;height:38px;color:var(--ink2);font-size:13.5px;white-space:nowrap}
.zs-note{margin:6px 0 10px;color:var(--ink3);font-size:12.5px}
.zs-h4{margin:14px 0 8px;font-size:13px;font-weight:600;color:var(--ink2);letter-spacing:.02em}
table.zs-split{width:100%;table-layout:fixed;border-collapse:collapse}
table.zs-split th{font-size:11.5px;color:var(--ink3);font-weight:600;text-align:left;padding:0 6px 5px}
table.zs-split th.r{text-align:right}
table.zs-split td{padding:3px 6px}
table.zs-split select,table.zs-split input{width:100%;height:34px;padding:5px 8px;font-size:13.5px;box-sizing:border-box}
table.zs-split input.r{text-align:right;font-variant-numeric:tabular-nums}
table.zs-split tfoot td{font-size:12.5px;color:var(--ink2);padding-top:8px}
.zs-del{border:0;background:none;color:var(--ink3);font-size:18px;cursor:pointer;width:28px;height:28px;border-radius:6px}
.zs-del:hover{background:var(--panel2);color:var(--bad)}
.zs-splitact{margin:8px 0 12px}
.zs-notef{margin:0 0 12px}
.zs-notef input{width:100%;box-sizing:border-box;height:38px;padding:8px 10px;font-size:14px}
.zs-notef label{display:block;font-size:12px;color:var(--ink3);margin-bottom:5px}
.zs-foot{padding:12px 20px 16px;margin-top:0}
.zs-qgrid .rq-f{flex:0 0 190px}
.zs-fz{display:flex;align-items:center;gap:8px;margin-top:7px;min-height:22px}
.zs-link{border:0;background:none;padding:0;color:var(--accent);font-size:13px;font-weight:600;cursor:pointer}
.zs-link:hover{text-decoration:underline}
.zs-link.zs-sure{color:var(--bad)}
.zs-fzsrc{display:block;margin-top:3px;font-size:11.5px;color:var(--ink3);white-space:normal;line-height:1.35}
/* v1.99.3: a paid invoice has nothing to tick */
.zs-tick.zs-auto{cursor:default;background:var(--panel2);border-style:dashed}
.zs-okdot{flex:0 0 auto;width:16px;height:16px;margin-top:2px;border-radius:50%;background:color-mix(in srgb,var(--good) 22%,transparent);box-shadow:inset 0 0 0 5px var(--good)}
/* v1.99.7 */
.zs-tick.zs-checkrow{margin-bottom:8px;border-color:color-mix(in srgb,var(--good) 45%,var(--line));min-height:0}
/* commission paid */
table.zs-paid{table-layout:fixed;width:100%}
table.zs-paid td{vertical-align:middle}
table.zs-paid input{width:100%;max-width:130px;height:32px;padding:4px 8px;font-size:13.5px;box-sizing:border-box;text-align:right;font-variant-numeric:tabular-nums}
.zs-savebar{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 18px;margin-top:0}
@media (max-width: 760px){
  .zs-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zs-filt .zs-q{flex:1 1 100%;width:auto;margin-left:0}
  .zs-ticks{grid-template-columns:1fr}
}
/* ---- v1.99.5: the Sales sheet ---- */
.zs-filt .btn#zsXlsx{flex:0 0 auto;padding:6px 14px;font-size:13px}
.zs-sheet{max-height:calc(100vh - var(--underH, 160px) - 170px)}
table.zs-sheettab{table-layout:fixed;border-collapse:separate;border-spacing:0}
table.zs-sheettab th,table.zs-sheettab td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;padding:7px 10px}
/* v1.99.6: headings centred, the filter button beside each */
table.zs-sheettab thead th{white-space:normal;text-overflow:clip;overflow:visible;line-height:1.25;vertical-align:middle;text-align:center;padding:7px 6px}
.zs-th{display:flex;align-items:center;justify-content:center;gap:4px}
.zs-thl{min-width:0}
.zs-fbtn{flex:0 0 auto;display:inline-grid;place-items:center;width:20px;height:20px;border:0;border-radius:5px;background:none;color:var(--ink3);cursor:pointer;padding:0}
.zs-fbtn:hover{background:var(--panel);color:var(--ink)}
.zs-fbtn.on{color:var(--accent);background:var(--accentSoft)}
table.zs-sheettab td.c{text-align:center}
table.zs-sheettab .zs-stk{position:sticky;z-index:1;background:var(--panel)}
table.zs-sheettab .zs-stkend{box-shadow:1px 0 0 var(--line)}
table.zs-sheettab thead th{position:sticky;top:0;z-index:2;background:var(--panel2)}
table.zs-sheettab thead th.zs-stk{z-index:4}
table.zs-sheettab tr.zs-frz td{background:color-mix(in srgb,var(--panel2) 70%,var(--panel))}
table.zs-sheettab tfoot td{position:sticky;bottom:0;z-index:2;background:var(--panel2);font-weight:600;box-shadow:0 -1px 0 var(--line)}
table.zs-sheettab tfoot td.zs-stk{z-index:4}
/* the filter drop-down */
.zs-fback{position:fixed;inset:0;z-index:60}
.zs-fpop{position:fixed;z-index:61;width:280px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 50px -18px rgba(0,0,0,.45);display:flex;flex-direction:column}
.zs-fhead{display:flex;align-items:center;gap:8px;padding:10px 12px 6px}
.zs-fhead b{flex:1;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zs-fq{margin:0 12px 6px;width:calc(100% - 24px);box-sizing:border-box;height:32px;padding:5px 9px;font-size:13px}
.zs-flist{max-height:260px;overflow:auto;padding:2px 6px 6px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.zs-fitem{display:flex !important;align-items:center;gap:8px;margin:0 !important;padding:5px 6px;border-radius:6px;cursor:pointer;
  text-transform:none !important;letter-spacing:0 !important;font-size:13px !important;color:var(--ink) !important}
.zs-fitem:hover{background:var(--panel2)}
.zs-fitem input{flex:0 0 auto;width:15px;height:15px;accent-color:var(--accent)}
.zs-fitem span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zs-fitem em{font-style:normal;font-size:11.5px;color:var(--ink3)}
.zs-fall{font-weight:600}
.zs-ffoot{display:flex;justify-content:flex-end;padding:8px 12px}
/* v1.99.8: Expected costs tab */
.zs-exptab .zs-left{font-weight:600}
.zs-toprow{margin:-4px 0 14px}
/* v2.5 — Console → Staff: the headings stay put (28/09/2026).
     'Console -> Staff -> Name, Role, headers are not freezed'        -- Avin
   Same answer as the payroll register: at a desk the table grows with the
   page, so its box stops clipping and the heading row sticks under the band
   (top bar + console bar + sub-tabs). Below desk width the box scrolls
   inside itself and the heading sticks to the top of that. The table is
   border-collapse, so the rule under the heading is an inset shadow. */
.st-dir thead th{background:var(--panel2);box-shadow:inset 0 -1px 0 var(--line)}
@media(min-width:1200px){
  .tw:has(> table.st-dir){overflow:visible}
  .st-dir thead th{position:sticky;top:calc(var(--bandH,56px) - 1px);z-index:11;
    box-shadow:0 -4px 0 var(--panel2),inset 0 -1px 0 var(--line)}
}
@media(max-width:1199px){
  .tw:has(> table.st-dir){overflow:auto;max-height:calc(100vh - 160px)}
  .st-dir thead th{position:sticky;top:0;z-index:11}
}
/* v2.6 — People: six cards in one row at a desk (28/09/2026). */
.strip.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.strip.six .stat{padding:15px 16px}
@media(max-width:1099px){
  .strip.six{grid-template-columns:repeat(3,minmax(0,1fr))}
  .strip.six .stat:nth-child(3n){border-right:0}
  .strip.six .stat:nth-child(-n+3){border-bottom:1px solid var(--line2)}
}
@media(max-width:720px){
  .strip.six{grid-template-columns:minmax(0,1fr)}
  .strip.six .stat{border-right:0}
}
/* v2.8 — POA commission approvals (28/09/2026). */
.papanel > header .papmon{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2)}
.papanel > header .papmon select{width:auto;padding:5px 9px;font-size:12.5px;border-radius:7px;background:var(--panel)}
.papt{table-layout:fixed;width:100%}
.papt td{vertical-align:top}
.papt .papq{display:block;margin-top:5px;font-size:12.5px;color:var(--ink2);white-space:normal;overflow-wrap:break-word;line-height:1.4}
.papt .papsub{display:block;margin-top:4px;font-size:11.5px;color:var(--ink3)}
.papt td.papacts{white-space:nowrap}
.papt td.papacts .btn + .btn{margin-left:6px}
.papfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line2)}
.papfoot .why{font-size:13px;color:var(--ink2)}
.papcard{border-left:3px solid var(--warn)}
.papcard .papfigs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;margin-bottom:12px}
.papcard .papfigs > div{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:var(--panel2);border-radius:10px}
.papcard .papfigs span:not(.cur){font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.papcard .papfigs b{font-size:20px;font-variant-numeric:tabular-nums}
.papcard .papfigs .cur{font-size:12px;color:var(--ink3);margin-right:4px;font-weight:500}
.papcard .papnote{margin:0 0 12px;color:var(--ink2);font-size:13.5px;line-height:1.5}
.papcard .papbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.papcard textarea{width:100%}
@media(max-width:720px){
  .papcard .papfigs{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:6px}
  .papcard .papfigs > div{flex-direction:row;justify-content:space-between;align-items:baseline;padding:10px 12px}
  .papcard .papfigs b{font-size:17px}
  .papcard .papbtns .btn{flex:1}
}
/* v2.10 deduction notes */
.hasnote{position:relative}
.hasnote::after{content:'';position:absolute;top:0;right:0;border-style:solid;border-width:0 7px 7px 0;
  border-color:transparent var(--accent) transparent transparent;pointer-events:none}
.dntab td{vertical-align:middle}
.dnin{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;padding:6px 9px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);color:var(--ink)}
.dnin:focus{outline:2px solid var(--accent);outline-offset:-1px}
.dnin:disabled{opacity:.6}
.dnnone{color:var(--ink3)}
.st-rvv{margin-left:8px;padding:0;border:0;background:none;box-shadow:none;height:auto;min-height:0;line-height:inherit;font:inherit;font-weight:600;color:var(--accent2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.st-rvv:hover{color:var(--accent)}
/* v2.10.2 People strip boxes are filters */
.pkstrip{overflow:hidden}
.pkstrip .pkt{appearance:none;-webkit-appearance:none;background:transparent;border:0;border-right:1px solid var(--line2);
  font:inherit;color:inherit;text-align:left;cursor:pointer;position:relative;border-radius:0}
.pkstrip .pkt:last-child{border-right:0}
.pkstrip .pkt:hover{background:var(--panel2)}
.pkstrip .pkt[aria-selected="true"]{background:var(--accentSoft)}
.pkstrip .pkt[aria-selected="true"]::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent)}
.pkstrip .pkt:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* v2.12 — Content: blogs and videos (desk only) */
.ctstrip{margin-bottom:18px}
.strip .stat.good .v{color:var(--good)}
.ctpanel{margin-bottom:18px;overflow:hidden}
.ctpanel > header{align-items:center}
.ctpanel > header .hint.ctl{margin-left:0}
.ctbar{margin-left:auto;display:flex;gap:8px;align-items:center}
.ctbar select.ff{padding:6px 10px;font-size:13.5px;width:auto}
.ctscroll{max-height:calc(100vh - 250px);overflow:auto}
.ctscroll thead th{position:sticky;top:0;z-index:2;box-shadow:inset 0 -1px 0 var(--line)}
table.cttab{table-layout:fixed}
table.cttab td{vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.cttab td.cttopic{white-space:normal;overflow:visible}
.cttopic .ctt{display:block;font-weight:500;line-height:1.35}
.ctsub{display:block;font-size:12px;color:var(--ink3);white-space:normal;line-height:1.4;margin-top:2px;font-weight:400}
table.cttab td.n .ctsub{font-variant-numeric:tabular-nums}
tr.ctgrp td{background:var(--sunk);font-weight:600;font-size:13px;color:var(--ink);padding:8px 12px}
tr.ctgrp td span{color:var(--ink3);font-weight:500;margin-left:10px}
tbody tr.ctgrp:hover td{background:var(--sunk)}
tr.ctgone td{color:var(--ink3)}
tr.ctgone .ctt{text-decoration:line-through;text-decoration-color:var(--line)}
tr.ctgone .pill{opacity:.75}
td.ctacts{white-space:nowrap}
td.ctacts .btn + .btn{margin-left:6px}
.ctnone{color:var(--ink3);padding:16px 18px;margin:0}
td.ctnone{padding:16px 12px}
a.ctlink{color:var(--c1);text-decoration:none;font-weight:500;white-space:nowrap}
a.ctlink:hover{text-decoration:underline}
/* v2.15.1: a link inside a brief or note */
a.ctlink.ctin{font-size:inherit}
.pill.ctfmt{font-weight:600}
.pill.ctfmt.blog{background:color-mix(in srgb,var(--c1) 13%,transparent);color:var(--c1)}
.pill.ctfmt.video{background:color-mix(in srgb,var(--c3) 15%,transparent);color:var(--c3)}

/* the year grid */
table.ctgrid td,table.ctgrid th{vertical-align:middle;padding:7px 8px}
table.ctgrid td:first-child,table.ctgrid th:first-child{padding-left:18px}
table.ctgrid td:last-child,table.ctgrid th:last-child{padding-right:18px}
table.ctgrid th.c,table.ctgrid td.c{text-align:center}
.ctcell{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:26px;border-radius:6px;
  font-size:12.5px;font-weight:600;border:0;font-variant-numeric:tabular-nums;cursor:pointer;font-family:inherit}
.ctcell.g{background:var(--goodBg);color:var(--good)}
.ctcell.a{background:var(--warnBg);color:var(--warn)}
.ctcell.b{background:var(--badBg);color:var(--bad)}
.ctcell.o{background:var(--sunk);color:var(--ink2)}
.ctcell.e{background:none;color:var(--ink3);font-weight:400;cursor:default}
.ctcell:not(.e):hover{outline:2px solid var(--line)}
.ctlegend{display:flex;gap:18px;flex-wrap:wrap;padding:10px 18px;border-top:1px solid var(--line2);font-size:12px;color:var(--ink3)}
.ctlegend span{display:inline-flex;align-items:center;gap:6px}
.ctlegend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.ctlegend i.g{background:var(--goodBg);box-shadow:inset 0 0 0 1px var(--good)}
.ctlegend i.a{background:var(--warnBg);box-shadow:inset 0 0 0 1px var(--warn)}
.ctlegend i.b{background:var(--badBg);box-shadow:inset 0 0 0 1px var(--bad)}
.ctlegend i.o{background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line)}

/* bank + given out: side by side, the same height */
.ctpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch;margin-bottom:18px}
.ctpair > .ctpanel{margin:0;display:flex;flex-direction:column}
.ctpair .ctlist{flex:1;max-height:340px;overflow:auto}
.ctadd{display:grid;grid-template-columns:minmax(0,1fr) 110px auto;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line2)}
.ctadd .ff{padding:7px 10px;font-size:13.5px;min-width:0}
.ctli{display:flex;align-items:center;gap:10px;padding:9px 18px;border-bottom:1px solid var(--line2);font-size:14px;min-height:44px}
.ctli:last-child{border-bottom:0}
.ctli .ctlt{flex:1;min-width:0;line-height:1.35}
.ctli .ctlx{color:var(--ink3);font-size:12.5px;white-space:nowrap}
.ctdrop{border:0;background:none;color:var(--ink3);font-size:18px;line-height:1;padding:2px 4px;cursor:pointer;border-radius:4px}
.ctdrop:hover{color:var(--bad);background:var(--sunk)}

/* the pop-ups */
.dpop.ctpop{width:min(560px,100%)}
.ctpop > header{align-items:center}
.ctpop .lookx{margin-left:auto}
.ctf{display:block;margin:0 0 14px;text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink)}
.ctf > span{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--ink2);margin-bottom:5px}
.ctf > span em{font-style:normal;font-weight:400;color:var(--ink3)}
.ctf > i{display:block;font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;font-size:12px;color:var(--ink3);margin-top:5px;line-height:1.45}
.ctf .ff{width:100%;font:inherit;font-size:14px}
.ctf textarea.ff{resize:vertical;min-height:64px;line-height:1.5}
.ctwarn{display:block;text-transform:none;letter-spacing:0;font-size:12px;color:var(--warn);font-weight:600;margin-top:5px}
.ctwarn:empty{display:none}
.ctrow3{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:12px}
.ctrow2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px}
.ctchips{display:flex;flex-wrap:wrap;gap:6px}
.ctchips button{border:1px solid var(--line);background:var(--panel);color:var(--ink2);border-radius:99px;padding:4px 12px;
  font:inherit;font-size:13px;cursor:pointer}
.ctchips button[aria-pressed="true"]{border-color:var(--accent);background:var(--accentSoft);color:var(--accent2);font-weight:600}
.ctseg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;height:42px}
.ctrow3 .ff,.ctrow2 .ff,.ctf input[type=date].ff{height:42px;padding-top:0;padding-bottom:0}
.ctseg button{border:0;background:var(--panel);color:var(--ink2);padding:0 16px;font:inherit;font-size:13.5px;cursor:pointer}
.ctseg button + button{border-left:1px solid var(--line)}
.ctseg button[aria-pressed="true"]{background:var(--brand);color:#fff}
/* v2.12.1: in dark the brand purple is nearly the panel's colour, so Blog and
   Video looked alike; the picked one takes the accent, as the Change pop-up's do. */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ctseg button[aria-pressed="true"]{background:var(--accent2);color:#1b1b1b;font-weight:600} }
:root[data-theme="dark"] .ctseg button[aria-pressed="true"]{background:var(--accent2);color:#1b1b1b;font-weight:600}
.ctacts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 14px}
.ctacts3 button{border:1px solid var(--line);background:var(--panel);color:var(--ink2);border-radius:8px;padding:8px 6px;
  font:inherit;font-size:13px;cursor:pointer}
.ctacts3 button[aria-pressed="true"]{border-color:var(--accent);background:var(--accentSoft);color:var(--accent2);font-weight:600}
.ctwhat{margin:0 0 14px;color:var(--ink2);font-size:14px;line-height:1.45}
.ctjudge{margin:4px 0 0;padding:10px 12px;background:var(--sunk);border-radius:8px;font-size:13px;color:var(--ink2)}
/* v2.12.1: the note under an extended topic's locked due date, and the lock itself */
.ctjudge.ctmid{margin:-4px 0 14px}
.ctf input[type=date].ff:disabled{color:var(--ink3);cursor:not-allowed;opacity:.75}
.cterr{margin:10px 0 0;color:var(--bad);font-size:13px;font-weight:600}
.ctfoot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line2);background:var(--panel2)}

/* My content */
.ctlede{margin:0 0 16px;color:var(--ink2);font-size:14px}
.ctcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch;margin-bottom:18px}
.ctcard{display:flex;flex-direction:column;gap:8px;padding:16px 18px}
.ctcard .cttop{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ctcard h3{font-size:18px;line-height:1.3;margin:2px 0 0}
.ctcard .ctbrief{margin:0;color:var(--ink2);font-size:13.5px;line-height:1.5}
.ctcard .ctmeta{margin-top:auto;padding-top:10px;border-top:1px solid var(--line2);display:flex;gap:18px;flex-wrap:wrap;
  font-size:13px;color:var(--ink2);align-items:center}
.ctcard .ctmeta b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
/* v2.15.4: the countdown — amber in the last three days, red once overdue */
.ctcard .ctmeta .ctleft.warn,.ctcard .ctmeta .ctleft.warn b{color:var(--warn)}
.ctcard .ctmeta .ctleft.bad,.ctcard .ctmeta .ctleft.bad b{color:var(--bad)}

/* v2.69 — the review steps */
table.cttab.ctsteps td.n{white-space:nowrap}
.cttopic .cttl{display:flex;gap:8px;align-items:center}
.cttopic .cttl .pill{flex:none}
.cttopic .cttl .ctt{min-width:0}
.cttopic .ctstat{display:block;margin-top:5px}
table.cttab.ctsteps{min-width:900px}
.cthsub{display:block;font-size:10px;letter-spacing:.03em;text-transform:none;font-weight:500;color:var(--ink3);line-height:1.1;margin-top:1px}
.ctna{color:var(--ink3);opacity:.6;font-size:12px}
.ctmu{color:var(--ink3)}
.ctnow{color:var(--accent2);font-weight:600}
.ctx{color:var(--bad);font-weight:600}
.ctw{color:var(--warn);font-weight:600}
.ctbad{color:var(--bad)} .ctgood{color:var(--good)}
.pill.you{background:var(--accentSoft);color:var(--accent2)}
.pill.with{background:color-mix(in srgb,var(--c1) 13%,transparent);color:var(--c1)}
.strip .stat.you .v{color:var(--accent2)}
table.cttab td.ctacts{overflow:visible}
.ctactw{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.ctactw .ctlink{margin-right:4px}
.btn.ctmore{padding-left:8px;padding-right:8px;font-weight:700;letter-spacing:.08em}
.ctmenubg{position:fixed;inset:0;z-index:60}
.ctmenu{position:fixed;z-index:61;width:210px;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.35);padding:5px;display:flex;flex-direction:column}
.ctmenu button{border:0;background:none;text-align:left;padding:8px 11px;border-radius:7px;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer}
.ctmenu button:hover{background:var(--sunk)}
.ctlinkbox{border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:14px;background:var(--panel2);min-height:42px;
  display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ctrevs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 14px}
.ctf .ctrevs{margin:0}
.ctrevs button{border:1px solid var(--line);background:var(--panel);color:var(--ink2);border-radius:8px;padding:9px 12px;
  font:inherit;font-size:14px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:1px}
.ctrevs button small{font-size:11.5px;color:var(--ink3);font-weight:400}
.ctrevs button[aria-pressed="true"]{border-color:var(--accent);background:var(--accentSoft);color:var(--accent2);font-weight:600}
.ctrevs button:disabled{opacity:.45;cursor:not-allowed}
.ctback{display:block;border-left:3px solid var(--warn);background:var(--warnBg);border-radius:0 8px 8px 0;padding:8px 12px;
  font-size:13px;color:var(--ink2);line-height:1.45;margin:0 0 14px}
.ctcard .ctbrief .ctback{margin:0}
.ctback b{color:var(--ink)}
.ctrounds{display:flex;flex-direction:column;gap:4px;margin:0 0 14px;font-size:12.5px;color:var(--ink3);line-height:1.45}
.cttog{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;font-size:14px;color:var(--ink);cursor:pointer;text-transform:none;letter-spacing:0;font-weight:500}
.cttog span{text-transform:none;letter-spacing:0}
.cttog input{margin-top:3px;width:16px;height:16px;accent-color:var(--accent)}
.cttog span i{display:block;font-style:normal;font-size:12px;color:var(--ink3);margin-top:2px;line-height:1.4;text-transform:none;letter-spacing:0;font-weight:400}
.ctdays{display:flex;gap:10px;align-items:center}
.ctdays .ff{width:90px !important;height:42px}
.ctdays span{font-size:13.5px;color:var(--ink2)}
.ctchips-s{max-height:180px;overflow:auto}
.ctrow2e{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ctrow2e .ff{height:42px;padding-top:0;padding-bottom:0}
/* the dots on a card */
.ctdots{display:grid;gap:0;padding:4px 0 2px}
.ctdots.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ctdots.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ctst{position:relative;padding:0 6px 0 16px;min-width:0}
.ctst::before{content:"";position:absolute;left:0;top:4px;width:9px;height:9px;border-radius:50%;border:2px solid var(--line);background:var(--panel)}
.ctst.ok::before{background:var(--good);border-color:var(--good)}
.ctst.now::before{background:var(--accent);border-color:var(--accent)}
.ctst.lt::before{background:var(--bad);border-color:var(--bad)}
.ctst .l{display:block;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctst .d{display:block;font-size:12.5px;color:var(--ink);line-height:1.35;white-space:nowrap;font-variant-numeric:tabular-nums}
.ctcard .ctmeta .ctmetab{margin-left:auto}
.ctcard .ctmeta .ctlink:last-child,.ctcard .ctmeta .ctleft:last-child{margin-left:auto}
.ctdots.c3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* v2.16 — Company and Console pinned at the foot of the rail (30/09/2026).
 *   'i want the console and select company to be at on the left rail bottom
 *    as static, only the other tabs on the left rail can scroll'   -- Avin
 * The rail no longer scrolls as a whole: the mark stays at the top, the foot
 * at the bottom, and only the tabs between them (#nav) scroll. */
@media(min-width:861px){
  #app .rail{overflow:hidden}
  #app .rail nav#nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    margin-right:-10px;padding-right:4px;scrollbar-gutter:stable}
  /* the gutter is always kept, so the tabs are the same 208px wide whether the list scrolls or not */
  #app .rail nav#nav::-webkit-scrollbar{width:6px}
  #app .rail nav#nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px}
  /* put away: no borrowed lane, and the gutter on both sides so the icons stay centred */
  #app.tucked .rail nav#nav{margin-right:0;padding-right:0;scrollbar-gutter:stable both-edges}
}
.railfoot{flex:none;display:flex;flex-direction:column;gap:10px;margin-top:-8px;
  border-top:1px solid rgba(255,255,255,.12);padding-top:14px}
.railfoot:not(:has(> :not(.hidden))){display:none}
.railco{display:flex;flex-direction:column;gap:6px}
.railco label{margin:0;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--railLabel);
  font-weight:600;padding:0 2px}
#app .railco select{width:100%;height:38px;padding:0 10px;font-size:13.5px;border-radius:8px;
  background:rgba(255,255,255,.07);color:var(--brandInk);border:1px solid rgba(255,255,255,.16);cursor:pointer}
#app .railco select:hover{background:rgba(255,255,255,.11)}
#app .railco select:focus{background:rgba(255,255,255,.11);border-color:var(--accent);box-shadow:none}
.railco select option{color:#1b1b1b;background:#fff}
.railcon{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:38px;
  border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);
  color:var(--brandInk);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.railcon:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34)}
.railcon svg{opacity:.85;flex:none}
.railcon.on{background:var(--accent);border-color:var(--accent);color:var(--accentInk,#fff)}
.railcon.on:hover{filter:brightness(1.08)}
/* the rail put away: icons only, so the company box goes and Console is its icon */
#app.tucked .rail .railfoot{width:100%;margin-top:0;padding-top:12px}
#app.tucked .rail .railco{display:none!important}
#app.tucked .rail .railcon span{display:none}
#app.tucked .rail .railcon{padding:0}
/* 721-860: the rail is a row across the top; the foot sits at its end */
@media(max-width:860px){
  .railfoot{flex-direction:row;align-items:center;border-top:0;margin:0;padding:0 0 0 12px;
    border-left:1px solid rgba(255,255,255,.12)}
  .railco{flex-direction:row;align-items:center}
  #app .railco select{width:auto;min-width:130px}
  .railcon{width:auto;padding:0 14px;white-space:nowrap}
}

/* v2.16.1 — the year and quarter buttons in the same place on every page
 * (30/09/2026).
 *   'While using the dashboard, commission or other pages where the quarters
 *    and years are seen for corplex and POA, all pages should be seen same,
 *    i could see its not places in the same position for each page' -- Avin
 * They floated in the space between the page name and the bell, so a longer
 * page name, the as-of stamp, a second year or POA's month picker moved
 * them. Now the page name takes the slack and everything after it packs to
 * the right, in one fixed order: as-of, POA month, years, quarters, then the
 * bell, theme and avatar. Years run oldest to newest, so 2026 always sits
 * against Q1 whether the company has one year or two. The bell keeps its
 * place when it has nothing to say, so the row does not jump either. */
@media(min-width:901px){
  .topbar .tbend{margin-left:0}
  .topbar #asOf{order:1}
  .topbar > .poa-mpick{order:2}
  .topbar #ySeg{order:3}
  .topbar #qSeg{order:4}
  .topbar .topsearch{order:5}
  .topbar .tbend{order:6}
  .topbar .tbend .bell.hidden{display:inline-flex!important;visibility:hidden}
  /* POA's month picker, on its own now: the same pill as the buttons beside it */
  .topbar > .poa-mpick{height:37px;border:0;border-radius:999px;background:var(--sunk);color:var(--ink2);
    font:inherit;font-size:12.5px;font-weight:500;padding:0 30px 0 15px;width:auto;cursor:pointer;flex:none}
  .topbar > .poa-mpick.on{background:var(--brand);color:var(--brandInk)}
  .topbar > .poa-mpick option{background:var(--panel);color:var(--ink)}
}
/* v2.16.2 — the year is a picker, not a row of buttons ('2027 is nearing').
 * The box around it goes, so the picker is the pill; same height and look as
 * POA's month picker when a month is chosen, because a year always is. */
.topbar #ySeg:has(> .ypick){background:none;border:0;padding:0;box-shadow:none}
.topbar .ypick{height:37px;border:0;border-radius:999px;background:var(--brand);color:var(--brandInk);
  font:inherit;font-size:12.5px;font-weight:600;padding:0 30px 0 15px;width:auto;cursor:pointer;flex:none}
.topbar .ypick:hover{filter:brightness(1.15)}
.topbar .ypick option{background:var(--panel);color:var(--ink)}
/* v2.17.1 — the same on a page that does not scroll (30/09/2026).
 *   'My dashboard, Team performance, Department and Commission % have those
 *    quarters, years etc in the same place. My commission and My invoice
 *    page - they are in different'                                  -- Avin
 * On Windows a page that scrolls gives up ~15px to the window's scrollbar; My
 * invoices never scrolls as a whole (its table does) and a short My
 * commission does not either, so the whole top bar was that much wider there
 * and everything pinned to its right edge moved. The scrollbar's lane is now
 * always kept, so every page is the same width, scrolling or not. */
@media(min-width:721px){ html{scrollbar-gutter:stable} }

/* ---------- v2.18 work from home schedule ---------- */
.wswho{align-items:flex-end}
.wsdays{display:flex;flex-direction:column;gap:6px}
.wsdays > span{font-size:11px;letter-spacing:.04em;color:var(--ink3);text-transform:uppercase}
.wsdays .seg button{min-width:52px}
.wsdays .seg button[disabled]{opacity:.45;cursor:default}
/* A heading that stays put while the list scrolls. */
.wsscroll{max-height:420px;overflow:auto;margin-bottom:12px;border:1px solid var(--line2);border-radius:10px}
.wfcscroll{max-height:560px}
.wsscroll .wfctab thead th{position:sticky;top:0;z-index:2;background:var(--panel2);box-shadow:inset 0 -1px 0 var(--line)}
.wsscroll .wfctab tr:last-child td{border-bottom:0}
table.wstab{table-layout:fixed}
table.wstab col.c-who{width:26%}
table.wstab col.c-co{width:14%}
table.wstab col.c-sum{width:20%}
table.wstab col.c-d{width:8%}
table.wstab th.c,table.wstab td.c{text-align:center}
.wstab .wsh,.wstab .wso{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600}
.wstab .wsh{background:color-mix(in srgb,var(--c3) 16%,transparent);color:var(--c3)}
.wstab .wso{color:var(--ink3)}
.wstab .wsnote{font-size:11.5px;color:var(--ink3);margin-left:6px}
@media(max-width:900px){ .wsdays{flex:1 1 100%} }
/* One line: the labels on one top; the boxes, the days and Save on one bottom
   (a label carries a 6px margin under it, so the two that are not labels do too). */
.wswho .wsdays{margin-bottom:6px}
.wswho .seg{height:40px;box-sizing:border-box;display:inline-flex;align-items:stretch}
.wswho .seg button{display:inline-flex;align-items:center;justify-content:center;height:auto}
.wswho #wsSave{height:40px;box-sizing:border-box;padding-top:0;padding-bottom:0;margin-bottom:6px}
/* Names and schedules on one line; the day list takes what is left. */
.wfctab td.nw,.wfctab th{white-space:nowrap}
/* A picked day reads in both themes: the same purple as the Home pills. */
.wsdays .seg button[aria-pressed="true"]{background:var(--c3);color:#fff}
/* v2.18.1: the heads-up after a home check-in off schedule -- a note, not an error. */
.cihead{font-size:12.5px;line-height:1.45;color:var(--warn)}

.srleft th.srck,.srleft td.srck{width:30px;padding-right:0}
.srleft .srck input{width:16px;height:16px;margin:0;vertical-align:middle;accent-color:var(--accent);cursor:pointer}
.srleft .srck input:disabled{cursor:default;opacity:.45}
/* v2.19.1: My invoices -- the whole heading row stays put while the rows scroll */
.invscroll > .invtable thead th{position:sticky;top:0;z-index:5;background:var(--panel2);box-shadow:inset 0 -1px 0 var(--line)}
.invscroll > .invtable thead th.s1,.invscroll > .invtable thead th.s2{z-index:7}
.invscroll > .invtable thead th.s2{box-shadow:inset 0 -1px 0 var(--line),8px 0 10px -10px rgba(0,0,0,.35)}
/* The date column is pinned with the invoice number beside it at a fixed 94px,
   but '20 Sep 2026' is wider than that, so the invoice number slid over the
   year once the table was scrolled sideways. Give the date column a set width
   and pin the invoice number exactly after it. */
.invscroll > .invtable th.s1,.invscroll > .invtable td.s1{width:112px;min-width:112px;max-width:112px;box-sizing:border-box}
.invscroll > .invtable th.s2,.invscroll > .invtable td.s2{left:112px}

/* v2.23 -- the birthday splash. One card, the same in light and dark: it is
   the brand's own colours, not the page's. */
.bdzwrap{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;
  background:rgba(26,16,32,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .35s ease;cursor:pointer;overflow:hidden;padding:18px}
.bdzwrap.on{opacity:1}
.bdzfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bdzcard{position:relative;width:460px;max-width:100%;border-radius:24px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#5B3A6E 0%,#41294F 45%,#2A1B33 100%);
  color:#F2ECF5;text-align:center;padding:34px 30px 30px;font-family:'IBM Plex Sans',system-ui,sans-serif;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06) inset;
  transform:scale(.86) translateY(14px);transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
.bdzwrap.on .bdzcard{transform:none}
.bdzkick{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#F2A25A}
.bdzfaces{display:flex;justify-content:center;gap:18px;margin:58px 0 14px}
.bdzface{position:relative;flex:none;width:86px;height:86px;border-radius:50%;background:#fff;color:#2A1B33;
  display:flex;align-items:center;justify-content:center;font:500 30px 'Newsreader',Georgia,serif;
  box-shadow:0 0 0 4px rgba(242,162,90,.55),0 10px 24px -8px rgba(0,0,0,.5)}
.bdzface img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.bdzfaces.n2 .bdzface{width:72px;height:72px;font-size:25px}
.bdzfaces.n3 .bdzface{width:64px;height:64px;font-size:22px}
.bdzfaces.n3{gap:14px}
.bdzhat{position:absolute;top:-30px;left:50%;transform:translateX(-30%) rotate(14deg);width:40px;height:44px}
.bdzfaces.n3 .bdzhat{top:-26px;width:34px;height:38px}
.bdzcard h2{margin:6px 0 6px;font:500 34px/1.12 'Newsreader',Georgia,serif;color:#fff;overflow-wrap:break-word}
.bdzcard p{margin:0 auto;max-width:34ch;font-size:14.5px;line-height:1.55;color:#B09CBB}
.bdzcard p b{color:#F2ECF5;font-weight:600}
.bdzcake{display:block;margin:16px auto 0;width:56px;height:56px}
.bdztap{margin-top:14px;font-size:12px;color:rgba(242,236,245,.55)}
.bdztimer{position:absolute;left:0;bottom:0;height:4px;width:100%;background:rgba(255,255,255,.08)}
.bdztimer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#F45F04,#F2A25A);transform-origin:left}
.bdzwrap.on .bdztimer i{animation:bdzshrink 5s linear forwards}
@keyframes bdzshrink{to{transform:scaleX(0)}}
.bdzball{position:absolute;bottom:-120px;width:52px;height:64px;border-radius:50% 50% 48% 48%;opacity:.95;
  pointer-events:none;scale:var(--s,1);animation:bdzrise 5.2s ease-in forwards}
.bdzball::after{content:'';position:absolute;left:50%;top:100%;width:1px;height:46px;background:rgba(255,255,255,.5)}
.bdzball::before{content:'';position:absolute;left:calc(50% - 5px);top:calc(100% - 3px);border:5px solid transparent;border-bottom-color:currentColor}
@keyframes bdzrise{to{transform:translateY(-1100px) rotate(var(--r,6deg))}}
@media (max-width:720px){
  .bdzcard{padding:30px 22px 26px}
  .bdzcard h2{font-size:29px}
}
@media (prefers-reduced-motion: reduce){ .bdzball{display:none} .bdzcard{transition:none} .bdzwrap{transition:none} }

.panel > header .edall{margin-left:14px;white-space:nowrap;font-size:13px}
/* v2.32 field visits */
.visbox{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}
.vistop{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
.vistop b{font-size:14px}
.vistop span{margin-left:auto;font-size:12.5px;color:var(--ink3);white-space:nowrap}
.visgo label{display:block;font-size:13px;font-weight:600;color:var(--ink2);margin:0 0 6px}
.visrow{display:flex;gap:8px}
.visrow input{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font:inherit;font-size:14.5px;
  background:var(--panel);color:var(--ink)}
.visrow input:focus{outline:2px solid var(--accentSoft);border-color:var(--accent)}
.visrow .btn{white-space:nowrap;padding:9px 16px;font-size:14px}
.visbad{margin:8px 0 0;color:var(--bad);font-size:13px}
.vison{border:1px solid var(--accent);border-radius:var(--r);padding:12px 14px;background:var(--panel)}
.vishd{display:flex;align-items:center;gap:8px;font-size:14px}
.vissince{margin-left:auto;font-size:12.5px;color:var(--ink3);white-space:nowrap}
.visdot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accentSoft);flex:none}
.visplace{margin:8px 0 2px;font-size:15.5px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.vislive{margin:0 0 12px;font-size:13px;color:var(--ink3)}
.vislive b{font-size:22px;color:var(--ink);font-weight:600;margin-right:4px}
.btn.visend{background:var(--brand,#2A1B33);border-color:var(--brand,#2A1B33);color:#fff}
.vislist{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line2)}
.vislist li{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:8px 0;
  border-bottom:1px solid var(--line2);font-size:13.5px}
.vislist li:last-child{border-bottom:0}
.vislist .vt{color:var(--ink3);font-size:12.5px;white-space:nowrap}
.vislist .vw{line-height:1.35;overflow-wrap:anywhere}
.vislist .vw i{display:block;font-style:normal;font-size:11.5px;color:var(--warn);font-weight:600}
.vislist .vd{white-space:nowrap;font-size:12.5px}
.vislist li.now .vd{color:var(--accent2)}
.vised{border:0;background:none;padding:0 0 0 4px;font:inherit;font-size:12px;color:var(--c1);cursor:pointer}
.vispanel > .pad{padding-bottom:12px}
.vispanel .vislist{margin:0;padding:0 18px}
.vispanel.live{border-color:var(--accent)}
.vispanel .vison{border:0;padding:0}
.vispage{display:flex;flex-direction:column;gap:18px}
.visbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.visel{border:1px solid var(--line);border-radius:8px;padding:7px 12px;font:inherit;font-size:14px;background:var(--panel);color:var(--ink)}
.visel.one{font-weight:600}
.visdate{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.visdate button{border:0;background:none;font:inherit;font-size:18px;line-height:1;padding:0 12px;color:var(--ink2);cursor:pointer}
.visdate button:disabled{color:var(--line);cursor:default}
.visdate label{position:relative;display:flex;align-items:center;padding:7px 12px;font-size:14px;white-space:nowrap;
  border-left:1px solid var(--line2);border-right:1px solid var(--line2);cursor:pointer}
.visdate input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;border:0}
.visbtn{padding:6px 12px;font-size:13px}
.visxl{margin-left:auto}
.visstrip .stat .v{font-size:24px}
table.vistab{table-layout:fixed;width:100%;font-size:14px;min-width:620px}
table.vistab th,table.vistab td{padding:10px 12px;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.vistab th:first-child,table.vistab td:first-child{padding-left:18px}
table.vistab td.w{white-space:normal;line-height:1.35;overflow-wrap:anywhere}
table.vistab .r{text-align:right}
table.vistab .n{color:var(--ink3)}
table.vistab thead th{position:sticky;top:0;z-index:1;background:var(--panel2,var(--panel));font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink3);font-weight:600}
table.vistab tr.vismark td{background:var(--sunk);color:var(--ink2);font-size:13px;font-weight:600}
table.vistab tfoot td{font-weight:600;background:var(--panel2,var(--panel));border-bottom:0}
table.vistab .visempty{color:var(--ink3)}
table.vistab tr.visrowclick{cursor:pointer}
table.vistab tr.visrowclick:hover td{background:var(--panel2,var(--sunk))}
table.vistab tr.visrowclick.on td:first-child{font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.pill.visp.done{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.pill.visp.auto{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.pill.visp.now{background:var(--accentSoft);color:var(--accent2)}
.visnone{margin:0;padding:18px;color:var(--ink3)}
@media(max-width:720px){
  .visxl{margin-left:0}
  .visrow{flex-direction:column}
  .visrow .btn{width:100%}
}
.hbody .visbox{margin-top:0}
.visgo label,.visdate label{text-transform:none;letter-spacing:0}
.visgo label{font-size:13px;font-weight:600;color:var(--ink2)}
.visdate label{margin:0;font-size:14px;font-weight:500;color:var(--ink)}
.vislist .vw[data-vis-edit]{cursor:pointer}
.vislist li.mark{background:var(--sunk);font-weight:600;color:var(--ink2);font-size:13px}
.vismob{display:none}
.vismob li{padding-left:18px;padding-right:18px}
.vismob .visempty{color:var(--ink3)}
@media(max-width:720px){
  .vismob{display:block;margin:0}
  .visdesk{display:none}
}
.vishint{margin:8px 0 0;font-size:12px;color:var(--ink3)}
.visset{align-items:stretch}
.visset > .panel{display:flex;flex-direction:column}
.visset > .panel > .pad{flex:1;display:flex;flex-direction:column}
.visset .cap{margin:auto 0 0;padding-top:12px}
.vislab{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--ink2);margin:0 0 6px}
.visatrow{align-items:center}
.visatrow .visel{flex:0 0 130px;width:130px;min-width:0}
.visatrow .btn{flex:0 0 auto}
.visnow{margin-left:auto;font-size:13px;color:var(--ink3);white-space:nowrap}
.vison-list{list-style:none;margin:0;padding:0}
.vison-list li{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line2);font-size:14px}
.vison-list li:last-child{border-bottom:0}
.vison-list li span{margin-left:auto;font-size:12.5px;color:var(--ink3);text-align:right}
.vison-list li em{font-style:normal;color:var(--warn);font-weight:600}
table.visppl{min-width:0}
table.visppl tr.on td:first-child{font-weight:600}
.vistog{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;background:var(--panel);
  padding:3px 12px 3px 4px;font:inherit;font-size:13px;font-weight:600;color:var(--ink3);cursor:pointer}
.vistog i{width:30px;height:18px;border-radius:999px;background:var(--sunk);position:relative;transition:background .15s}
.vistog i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.vistog.on{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,var(--line))}
.vistog.on i{background:var(--good)}
.vistog.on i::after{left:14px}
@media(max-width:900px){ .grid.g2.visset{grid-template-columns:minmax(0,1fr)} }
.visset .cap{padding-left:0;padding-right:0}

/* v2.35 field visits, round 2 */
.visnl{display:block;margin:4px 0 6px;font-size:13px;font-weight:600;color:var(--ink2);text-transform:none;letter-spacing:0}
.visnl span{font-weight:400;color:var(--ink3)}
textarea.vista{display:block;width:100%;box-sizing:border-box;resize:vertical;min-height:60px;border:1px solid var(--line);border-radius:8px;
  padding:8px 11px;font:inherit;font-size:14px;line-height:1.4;background:var(--panel);color:var(--ink)}
textarea.vista:focus{outline:2px solid var(--accentSoft);border-color:var(--accent)}
.vison .visend{margin-top:10px}
.vislist .vnote,.vislist .vrem,.vislist .vremc{grid-column:2 / 4;font-size:12.5px;line-height:1.4;overflow-wrap:anywhere;margin-top:-2px}
.vislist .vnote{color:var(--ink2)}
.vislist .vnote b{font-weight:600;color:var(--ink3)}
.vislist .vnote[data-vis-note]{cursor:pointer}
.vislist .vrem{background:color-mix(in srgb,var(--c1) 11%,transparent);border-radius:6px;padding:5px 8px;color:var(--ink)}
.vislist .vrem b{color:var(--c1);font-weight:600}
.visflag{display:block;margin-top:3px;font-size:11.5px;font-weight:600}
.visflag.now{color:var(--accent2)}
.visflag.auto{color:var(--warn)}
.cellnote{display:block;margin-top:3px;font-size:12.5px;color:var(--ink2);line-height:1.4}
.cellnote b{font-weight:600;color:var(--ink3)}
table.vistab col.rmcol{width:300px}
table.vistab td.rm{vertical-align:top}
table.visday td{vertical-align:top}
table.visday tr.vismark td,table.visday tfoot td{vertical-align:middle}
.visrm{display:flex;flex-direction:column;gap:2px}
.visrm-t{font-size:13.5px;line-height:1.4;white-space:normal}
.visrm-m{font-size:12px;color:var(--ink3)}
.visradd{padding:0;font-size:12.5px;font-weight:600}
.visred{display:flex;flex-direction:column;gap:6px}
.visred .vista{min-height:56px;font-size:13.5px}
.visred-acts{display:flex;gap:6px;flex-wrap:wrap}
.visred-acts .btn{padding:4px 12px;font-size:12.5px}
.visred-del{margin-left:auto;color:var(--bad)}
.vislivetag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--accent2);
  background:var(--accentSoft);border-radius:999px;padding:3px 10px;white-space:nowrap}
.vislivetag i{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;animation:vispulse 2s ease-in-out infinite}
.vislivetag span{font-weight:400;color:var(--ink2)}
@keyframes vispulse{50%{opacity:.35}}
.vispage .panel > header{flex-wrap:wrap}
.visseg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.visseg button{border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;padding:7px 14px;color:var(--ink2);cursor:pointer}
.visseg button + button{border-left:1px solid var(--line2)}
.visseg button.on{background:var(--brand,#2A1B33);color:#fff}
.visrange label + label{border-left:0}
.visrange label:first-child{border-left:0}
.visrange label:last-child{border-right:0}
.vischips{display:inline-flex;gap:6px;flex-wrap:wrap}
.vischip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;
  color:var(--ink2);cursor:pointer;white-space:nowrap}
.vischip.on{background:var(--brand,#2A1B33);border-color:var(--brand,#2A1B33);color:#fff}
table.vistab tr.vissub td{background:var(--panel2,var(--sunk));font-weight:600;font-size:13px}
table.vishist{min-width:860px}
.vislist li.visrowclick{cursor:pointer}
.visflags{display:flex;flex-direction:column;gap:0}
.visfl{display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--line2)}
.visfl:first-child{padding-top:0}
.visfl > div{flex:1;min-width:0}
.visfl b{display:block;font-size:14px}
.visfl span{display:block;font-size:12.5px;color:var(--ink3);line-height:1.35}
.visfl .vistog{flex:none}
.viswho{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.viswho em{font-style:normal;color:var(--warn);font-weight:600;font-size:13px}
.vischipw{display:inline-flex;align-items:center;gap:6px;background:var(--sunk);border-radius:999px;padding:3px 4px 3px 11px;
  font-size:13px;white-space:nowrap}
.vischipw i{font-style:normal;color:var(--ink3);font-size:12px}
.vischipw button{border:0;background:none;width:20px;height:20px;border-radius:50%;font-size:15px;line-height:1;color:var(--ink3);cursor:pointer}
.vischipw button:hover{background:var(--line);color:var(--ink)}
.visel.sm{padding:4px 8px;font-size:12.5px}
table.visppl td{vertical-align:middle}
table.visppl td.w{white-space:normal}
@media(max-width:720px){
  .visseg{order:0}
  .visrange{width:100%}
  .visrange label{flex:1;justify-content:center}
  .vislist .vremc{margin-top:2px}
}
.viswho .visel.sm{width:auto;max-width:240px;flex:0 0 auto}
@media(max-width:720px){
  .vispage .panel > header .hint{flex-basis:100%;margin-left:0;text-align:left}
}

/* v2.38 Access & duties */
.acctab td{vertical-align:middle}
.acctab .accwhat{display:block;margin-top:3px;color:var(--ink2);font-size:12.5px;font-weight:400;line-height:1.4}
.acctab .viswho{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.acctab .accpay{width:300px;max-width:100%}

/* v2.39 Pins & splits */
.sfxtab td{vertical-align:middle}
.sfxtab .sfxwhy{color:var(--ink2);font-size:12.5px;line-height:1.4}
.sfxadd{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--line)}
.sfxadd .visel{flex:0 0 200px;min-width:0}
.sfxadd .sfxgrow{flex:1 1 260px}
.sfxpart{display:inline-block;background:var(--sunk);border-radius:999px;padding:2px 10px;margin:2px 6px 2px 0;font-size:12.5px;white-space:nowrap}
.sfxed{border-top:1px solid var(--line)}
.sfxedhead{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.sfxedhead .visel{flex:1 1 auto;max-width:560px}
.sfxlines{margin-bottom:12px;width:auto;table-layout:fixed}
.sfxlines td.r,.sfxlines th.r{text-align:right}
.sfxamt{width:140px;text-align:right}
.sfxleft{font-size:13px;color:var(--good);font-weight:600}
.sfxleft.off{color:var(--bad)}
.sfxed .sfxadd{border-top:0;padding:0}

/* v2.40 settings screens */
.stsrow{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.stsmail{width:320px}
.ststab td{vertical-align:middle}
.stsseg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.stsseg button{border:0;background:var(--panel);color:var(--ink2);font:inherit;font-size:13px;padding:6px 14px;cursor:pointer}
.stsseg button + button{border-left:1px solid var(--line)}
.stsseg button.on{background:var(--ink);color:var(--panel);font-weight:600}
.stsnow{margin-left:10px;color:var(--ink2);font-size:13px}
.stsdate{width:180px}
.stsgrp{color:var(--ink2);font-size:13px}

/* v2.41 Leave -> Holidays */
.hol-tw{max-height:calc(100vh - var(--topH,62px) - 230px);min-height:200px;overflow:auto}
table.hol-tab{table-layout:fixed;width:100%;border-collapse:separate;border-spacing:0}
table.hol-tab col:nth-child(1){width:14%}
table.hol-tab col:nth-child(2){width:10%}
table.hol-tab col:nth-child(3){width:36%}
table.hol-tab col:nth-child(4){width:24%}
table.hol-tab col:nth-child(5){width:16%}
table.hol-tab thead th{position:sticky;top:0;z-index:2;background:var(--panel2);box-shadow:inset 0 -1px 0 var(--line)}
table.hol-tab td{vertical-align:middle;overflow:hidden;text-overflow:ellipsis}
table.hol-tab tr.gone td{color:var(--ink3)}
table.hol-tab tr.gone td b{font-weight:500}
table.hol-tab tr.gone .pill{opacity:.7}
.apx.hol-ph{padding:11px 16px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.apx.hol-ph b{display:block;font-size:14.5px}
.apx.hol-ph span{font-size:12.5px;color:var(--ink2)}

/* v2.43 — which card */
.pqcardf[hidden]{display:none!important}
.pqmc{display:block;font-size:11.5px;line-height:1.3;color:var(--ink3);white-space:nowrap}

/* v2.44 — vendor picked from Zoho Books, or + New vendor */
.pvrow{display:flex;gap:8px;align-items:stretch}
.pvrow .combo{flex:1;min-width:0}
.pvrow .combo input{width:100%}
.pvrow input[disabled]{opacity:.65;cursor:not-allowed}
#pqPayee.pverr{border-color:var(--bad)!important;box-shadow:0 0 0 1px var(--bad)}
.pvplus{flex:none;width:46px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);color:var(--accent);font-size:22px;font-weight:600;line-height:1;cursor:pointer;padding:0}
.pvplus[disabled]{color:var(--ink3);opacity:.5;cursor:not-allowed}
.pvplus[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.pvspin{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);
  animation:pvspin .8s linear infinite;vertical-align:-2px;margin-right:7px}
@keyframes pvspin{to{transform:rotate(360deg)}}
.combolist .pvnone{padding:10px 14px;color:var(--ink3);font-size:13px}
.combolist button.pvaddrow{display:block;background:var(--panel2)}
.combolist button.pvaddrow span{display:block;color:var(--accent);font-weight:600}
.combolist button.pvaddrow i{display:block;font-style:normal;font-size:12px;color:var(--ink3)}
.pvnew{margin-top:10px;border:1.5px solid var(--warn);background:var(--warnBg);border-radius:14px;padding:14px}
.pvnew p{margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--ink2);text-transform:none;letter-spacing:0}
.pvnew p b{color:var(--ink)}
.pvnew input#pvNewName{display:block;width:100%;background:var(--panel)}
.pvuse{border:1px solid var(--line);background:var(--panel);color:var(--ink2);border-radius:99px;padding:2px 10px;font:inherit;font-size:12px;cursor:pointer}
label.pvchk{display:flex;gap:9px;align-items:flex-start;margin:10px 0 12px;font-size:13px;color:var(--ink2);text-transform:none;letter-spacing:0;cursor:pointer}
label.pvchk input{margin-top:2px;padding:0;width:16px;height:16px;flex:none;accent-color:var(--accent)}
.pvbtns{display:flex;gap:8px;flex-wrap:wrap}
.pvbtns .btn{margin:0}
.pvchip{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--sunk, var(--panel2));border-radius:12px;padding:11px 14px;min-height:46px}
.pvchip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.pvchip button{flex:none;background:none;border:0;color:var(--ink3);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;padding:0}
.pill.pvnewp{background:var(--accentSoft);color:var(--accent2)}

/* v2.45 — Post to Books and Bigin from Past payments */
.paytab td.zkcell{overflow:visible;white-space:nowrap}
.zkbill{display:flex;justify-content:space-between;align-items:center;gap:6px;width:100%;margin-top:4px;border:1px dashed var(--line);
  background:var(--panel);border-radius:7px;padding:1px 7px;font:inherit;font-size:11.5px;color:var(--ink2);cursor:pointer;line-height:1.5}
.zkbill b{font-weight:600;color:var(--ink)}
.zkbill:hover{border-color:var(--accent)}
.zkbill.need{border-color:var(--bad);color:var(--bad)}
.zkpost{display:block;width:100%;border:0;border-radius:7px;padding:3px 6px;font:inherit;font-size:12px;font-weight:600;
  cursor:pointer;text-align:center;line-height:1.6;white-space:nowrap}
.zkpost.go{background:var(--accent);color:var(--accentInk)}
.zkpost.done{background:var(--goodBg);color:var(--good)}
.zkpost.err{background:var(--badBg);color:var(--bad)}
.zkpost.off{background:var(--sunk);color:var(--ink3);cursor:not-allowed}
.zkpost.busy{background:var(--sunk);color:var(--ink2);cursor:progress}
.zkchips{display:inline-flex;gap:6px;margin-right:4px}
.zkchips button{border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:4px 11px;font:inherit;font-size:12.5px;
  font-weight:500;color:var(--ink2);cursor:pointer;white-space:nowrap}
.zkchips button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brandInk)}
.zkchips button i{font-style:normal;background:var(--accent);color:var(--accentInk);border-radius:99px;padding:0 6px;margin-left:4px;font-size:11px}
.zkchips button[hidden]{display:none}
#zkPop .zkf{margin-bottom:12px}
#zkPop .zkf > label{display:block;margin-bottom:6px}
.seg.zkseg{display:grid;grid-template-columns:1fr 1fr;width:100%}
.seg.zkseg button{padding:8px;font-size:13px;font-weight:600}
.zktwo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.zktwo input{width:100%}
.zkdone{border:1px solid var(--good);background:var(--goodBg);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:13px;color:var(--ink2)}
.zkdone b{color:var(--good)}
.zkundo{border:1.5px solid var(--bad);background:var(--badBg);border-radius:10px;padding:10px 12px;margin-top:12px;font-size:13px;color:var(--ink2)}
.zkundo ul{margin:6px 0 8px;padding-left:18px}
.btn.zkred{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.ghost.zkundobtn{color:var(--bad);border-color:var(--bad)}
/* v2.57 — the dates over Post (Bill date for a Bill, Paid for both) */
.zkday{position:relative;margin-bottom:4px}
.zkday button{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%;border:1px solid var(--line);background:var(--panel);
  border-radius:7px;padding:1px 6px;font:inherit;font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink);cursor:pointer;line-height:1.5;white-space:nowrap}
.zkday button:hover{border-color:var(--accent)}
.zkday em{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.zkday input{position:absolute;left:0;bottom:0;width:100%;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
.zkday.lock{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink3);line-height:1.5;padding:1px 7px}

/* v2.47 announcements: edit, pin, remove, view all */
.anns .ab .caplink{font-size:11.5px;font-weight:600}
.anns .ab .annrm{color:var(--bad, #c0392b)}
.anns .ab .annq{color:var(--ink2);font-weight:600}
.anns li.annedit .field{margin-bottom:8px}
.anns li.annedit input,.anns li.annedit textarea{width:100%;box-sizing:border-box}
.anns li.annedit textarea{resize:vertical;min-height:64px;font:inherit}
.anns .annbtns{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.anns .annnote{margin-left:auto;font-size:11.5px;color:var(--ink3)}
.annpop .anns{padding:12px 0 4px}
.annpop .anns p{white-space:pre-line}
.anns .annhd{margin-left:auto;display:flex;align-items:center;gap:12px}

/* ---- v2.54: Console → Sales → Edit rules ---- */
.re-intro{margin:0}
.re-tw{max-height:calc(100vh - var(--underH, 160px) - 230px)}
table.re-t{table-layout:fixed;width:100%}
table.re-t td{vertical-align:middle;padding-top:6px;padding-bottom:6px}
table.re-t th.r,table.re-t td.r{text-align:right}
table.re-t td.c{text-align:center}
table.re-t td.re-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.re-t select{width:100%;height:32px;padding:4px 8px;font-size:13.5px;box-sizing:border-box}
table.re-t input{width:100%;max-width:130px;height:32px;padding:4px 8px;font-size:13.5px;box-sizing:border-box}
table.re-t input.r{text-align:right;font-variant-numeric:tabular-nums}
table.re-t input[readonly]{background:var(--panel2);color:var(--ink2)}
table.re-t td.n{font-variant-numeric:tabular-nums}
table.re-t td.re-to{color:var(--ink2);white-space:nowrap}
table.re-t td.re-what{white-space:normal;overflow-wrap:anywhere;line-height:1.4}
.re-add{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--line2);flex-wrap:wrap}
.re-add input{height:36px;padding:6px 10px;font-size:13.5px;box-sizing:border-box;flex:1 1 320px;max-width:420px}
.re-add input.re-rate{flex:0 0 110px;text-align:right}
.re-add select{height:36px;padding:5px 8px;font-size:13.5px;flex:0 0 230px}
.re-add .btn{flex:0 0 auto}
.re-add .why{color:var(--ink3);font-size:12.5px}
.re-miss{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 18px;border-bottom:1px solid var(--line2);background:color-mix(in srgb,var(--warn) 8%,transparent)}
.re-misst{font-size:12.5px;color:var(--ink2);margin-right:4px}
.re-chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:3px 10px;font-size:12.5px;cursor:pointer;color:var(--ink)}
.re-chip:hover{border-color:var(--accent);color:var(--accent)}
.re-save{margin-bottom:16px}
/* only floats while there is something to save */
.re-save.re-stick{position:sticky;bottom:12px;z-index:5;box-shadow:0 4px 18px rgba(0,0,0,.10)}
.re-save .rq-line{flex:1 1 auto;min-width:0;margin:0}
.re-bad{color:var(--bad)}
/* v2.56 POA transactions */
.ptxpage{gap:18px}
.ptxstrip{display:grid;background:var(--panel);border:1px solid var(--line);border-radius:var(--r,10px);overflow:hidden;
  box-shadow:var(--shadow)}
.ptxstat{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:14px 18px;
  border-right:1px solid var(--line2);min-width:0}
.ptxstat:last-child{border-right:0}
.ptxstat:hover{background:var(--panel2,var(--sunk))}
.ptxstat.on{background:var(--sunk);box-shadow:inset 0 -3px 0 var(--accent)}
.ptxstat .k{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptxstat .v{font-size:26px;font-weight:600;line-height:1.2;color:var(--ink)}
.ptxstat .n{font-size:12.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptxlate{color:var(--bad);font-weight:600}
.ptxbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 18px;border-bottom:1px solid var(--line2)}
.ptxbar select.visel,.ptxbar input.visel{width:auto;flex:none;height:36px;margin:0}
.ptxbar input.ptxq{width:300px}
.ptxbar [data-ptx-xl]{margin-left:auto}
.ptxbar .btn{height:36px;margin:0}
.ptxtw{max-height:calc(100vh - 300px);min-height:200px;overflow:auto}
table.ptxtab{min-width:1000px}
table.ptxtab td.w{white-space:normal}
.ptxsub{display:block;font-size:12.5px;color:var(--ink3);margin-top:2px;line-height:1.35}
.ptxord{color:var(--c1,#1668A5);font-weight:600;text-decoration:none}
.ptxord:hover{text-decoration:underline}
.ptxbad{color:var(--bad);font-weight:600}
.ptxnone{color:var(--ink3)}
.btn.ptxed{padding:4px 12px;font-size:12.5px}
.ptxfoot{display:flex;justify-content:space-between;gap:12px;padding:10px 18px;font-size:12.5px;color:var(--ink3);
  border-top:1px solid var(--line2);background:var(--panel2,var(--panel))}
.pill.ptxp{margin-left:0;font-weight:600}
.pill.ptxp.prog{background:color-mix(in srgb,var(--c1,#1668A5) 14%,transparent);color:var(--c1,#1668A5)}
.pill.ptxp.pend{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.pill.ptxp.hold{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad)}
.pill.ptxp.done{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
/* the pop-up */
.dpop.ptxpop{width:min(600px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column}
.ptxpop > header{align-items:center}
.ptxpop .lookx{margin-left:auto}
.ptxgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;overflow:auto}
.ptxwide{grid-column:1/-1}
.ptxf{position:relative;min-width:0}
.ptxf label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin:0 0 6px;text-transform:none;letter-spacing:0}
.ptxf label em{font-style:normal;font-weight:400;color:var(--ink3)}
.ptxin{box-sizing:border-box;width:100%;height:42px;border:1px solid var(--line);border-radius:8px;padding:0 12px;font:inherit;font-size:14.5px;
  background:var(--panel);color:var(--ink)}
.ptxpop textarea.ptxin{background:var(--panel);height:auto;min-height:72px;padding:9px 12px;resize:vertical;line-height:1.4}
.ptxin:focus{outline:2px solid var(--accentSoft);border-color:var(--accent)}
.ptxin[data-ok]{border-color:var(--good)}
.ptxin[data-bad]{border-color:var(--bad)}
.ptxauto{position:absolute;right:34px;bottom:12px;font-size:11px;font-weight:600;color:var(--good);
  background:color-mix(in srgb,var(--good) 14%,transparent);border-radius:99px;padding:0 7px;pointer-events:none}
.ptxdeal{border:1px solid var(--line);border-radius:9px;background:var(--panel2,var(--sunk));padding:10px 14px;font-size:13px;color:var(--ink2)}
.ptxdeal.ok{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 14px}
.ptxdeal.ok b{grid-column:1/-1;color:var(--good);font-size:13.5px}
.ptxdeal.ok span{overflow-wrap:anywhere;color:var(--ink)}
.ptxdeal.ok .k{color:var(--ink3)}
.ptxdeal.bad{border-color:transparent;background:color-mix(in srgb,var(--bad) 11%,transparent);color:var(--bad)}
.ptxdeal.warn{border-color:transparent;background:color-mix(in srgb,var(--warn) 13%,transparent);color:var(--warn)}
.ptxerr{margin:0;color:var(--bad);font-size:13px}
.ptxfoot2{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line2);
  background:var(--panel2,var(--panel))}
.ptxdel{border:0;background:none;padding:0;font:inherit;font-size:13px;color:var(--bad);cursor:pointer}
.ptxby{margin-right:auto;margin-left:12px;font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Console -> People -> POA transactions */
.ptxset{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;align-items:stretch}
.ptxset > .panel{margin:0;display:flex;flex-direction:column}
.ptxset .ptxsbody{flex:1}
.ptxcap{grid-column:1/-1;margin:0}
.ptxsrow{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--line2);flex-wrap:nowrap;min-height:56px}
.ptxsrow:last-child{border-bottom:0}
.ptxmv{display:inline-flex;flex-direction:column}
.ptxmv button{border:0;background:none;padding:0 4px;font-size:9px;line-height:1.3;color:var(--ink3);cursor:pointer}
.ptxmv button:disabled{color:var(--line);cursor:default}
.ptxtags{font-size:12.5px;color:var(--ink3)}
.ptxtag{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;color:var(--ink2);white-space:nowrap}
.ptxtag.on{color:var(--good);font-weight:600}
.ptxset label.ptxchk{cursor:pointer;margin:0;text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--ink2);justify-content:flex-start}
.ptxchk input{margin:0;width:15px;height:15px;accent-color:var(--accent)}
.ptxrmx{display:block}
.ptxacts{margin-left:auto;display:grid;grid-template-columns:88px 80px 116px 132px 76px;gap:8px;align-items:center}
.ptxacts select.visel{width:88px;height:34px;margin:0;padding:4px 10px;font-size:13px}
.ptxacts .btn{white-space:nowrap;width:100%;padding-left:0;padding-right:0;text-align:center}
.ptxconn{margin:0 0 12px;font-size:14px}
.ptxconn.ok{color:var(--good)}
.ptxconn.off{color:var(--warn)}
.ptxconn b{color:var(--bad)}
.ptxsteps{margin:0 0 14px;padding-left:20px;font-size:13.5px;color:var(--ink2);line-height:1.55}
.ptxsteps code{font-size:12.5px;background:var(--sunk);border-radius:5px;padding:1px 5px}
#ptxCode{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font:inherit;font-size:14px;background:var(--panel);color:var(--ink)}
/* v2.58 — Console -> People -> Missed check-ins */
.mckgrid{display:grid;grid-template-columns:400px minmax(0,1fr);gap:14px;align-items:stretch}
.mckgrid > .panel{margin:0}
.mckrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.mckset .mckrow:first-child{border-top:0;padding-top:0}
.mckset .mckrow:last-of-type{border-bottom:1px solid var(--line)}
.mckwho .cap{margin:12px 0 0}
.mckl{font-weight:500;font-size:13.5px;line-height:1.3}
.mckl small{display:block;color:var(--ink3);font-size:12px;font-weight:400;margin-top:2px}
.mckc{display:flex;align-items:center;gap:6px;flex:none}
.mcknum{width:52px;text-align:right;font:inherit;font-size:13px;border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:5px 8px;color:var(--ink);font-variant-numeric:tabular-nums}
.mckdate{width:104px;font:inherit;font-size:13px;border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:5px 8px;color:var(--ink);font-variant-numeric:tabular-nums}
.mcku{color:var(--ink3);font-size:12.5px}
.mcklink{border:0;background:none;padding:0;font:inherit;font-size:13px;color:var(--ink2);cursor:pointer}
.mcklink:hover{color:var(--accent)}
.mckbtns{display:flex;gap:8px;margin-top:16px}
.mckerr{margin:12px 0 0;color:var(--bad);font-size:13px}
.mckstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.mckstats > div{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.mckstats span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.mckstats b{font:500 22px/1.25 'Newsreader','Bodoni Moda',Georgia,serif}
table.mcktab{min-width:0}
table.mcktab th.r,table.mcktab td.r{text-align:right;font-variant-numeric:tabular-nums}
table.mcktab td.mckdays{font-variant-numeric:tabular-nums;color:var(--ink2);overflow-wrap:normal;word-break:keep-all}
table.mcktab td.w{white-space:normal}
table.mcktab tr.dim td{color:var(--ink3)}
.mckpill{display:inline-block;border-radius:99px;padding:1px 9px;font-size:11.5px;font-weight:600;background:var(--sunk);color:var(--ink3)}
.mckpill.go{background:var(--accentSoft);color:var(--accent)}

/* v2.59 advances: approved is not paid */
.dpop.advpop{width:min(520px,100%)}
.advpop .advgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.advpop textarea{width:100%;resize:vertical;font:inherit}
.advpop .btns{display:flex;gap:8px;align-items:center}
.advdate{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline dotted;text-underline-offset:3px;font-variant-numeric:tabular-nums;white-space:nowrap}
.advdate:hover{color:var(--accent,inherit)}
.advrem{display:block;font-size:12px;color:var(--ink3);margin-top:2px}
.advpaybtn{padding:2px 9px;font-size:11.5px;margin-left:6px}
@media (max-width:560px){.advpop .advgrid{grid-template-columns:1fr}}
/* the phone's stacked cards keep their labels on one line; the remark wraps */
.tscard > div span.advrem{white-space:normal;font-weight:400;font-size:12px}
.advpaidln{display:block;font-size:12.5px;color:var(--ink2);margin-top:3px;white-space:nowrap}
td.advnw, td.advst{white-space:nowrap}

/* v2.60: the provision line under the gratuity on a settlement */
tr.gheld td{font-size:12px;color:var(--ink3);padding-top:2px;padding-bottom:8px;border-top:0;white-space:normal}
tr.gheld td b{color:var(--ink2);font-weight:600}

/* v2.61: the Insurance cell on Monthly costs is Ledger Desk's, not typed */
.cmcell.ldins input{background:transparent;border-style:dashed;color:var(--ink2);cursor:default}
.cmcell.ldins input:focus{outline:none;box-shadow:none}
.cmcell.ldins small{color:var(--ink3)}

/* v2.64 advance rule */
.advplan{border-left:3px solid var(--accent,var(--good));background:var(--panel2,transparent);padding:10px 12px;margin:0 0 14px;border-radius:6px;font-size:14px;line-height:1.45}
.advplan .k{display:block;font-size:12px;color:var(--ink3);margin-bottom:2px}
.advplan .n{display:block;font-size:12.5px;color:var(--ink2);margin-top:3px}
.note.advstop{margin:0 0 14px;border-left-color:var(--bad)}
.advrules .advrgrid .rq-f.advrf{flex:1 1 170px}
.advrules .advrf input{width:100%}
.advrules .advrh{display:block;font-size:11.5px;color:var(--ink3);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.advrules .rq-foot .rq-line{flex:1 1 auto;margin:0;font-size:13px;color:var(--ink2)}
.advplan .n.advlow{color:var(--warn)}

/* v2.65 advances repaid until cleared */
.advplan.advhold{border-left-color:var(--warn)}
.advrepsum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 14px}
.advrepsum > div{border:1px solid var(--line2,var(--line));border-radius:8px;padding:8px 10px}
.advrepsum .k{display:block;font-size:12px;color:var(--ink3);margin-bottom:2px}
.advrepsum b{font-variant-numeric:tabular-nums}
.advreptw{max-height:220px;overflow:auto;margin:0 0 14px}
.advreptab thead th{position:sticky;top:0;background:var(--panel);z-index:1}
.advreptab td,.advreptab th{padding:6px 8px}
.advreptab th.r,.advreptab td.r{text-align:right}

/* v2.65.1 deduction table */
.advschedtw{max-height:340px}
.advreptab tr.advcoming td{color:var(--ink2)}
.advref{font-variant-numeric:tabular-nums}
.advschedplan{margin:-4px 0 12px;font-size:13px;color:var(--ink2)}
.advschedplan .k{color:var(--ink3);margin-right:6px}
.advrepsum b{white-space:nowrap}
@media (max-width:560px){
  .advrepsum{gap:6px}
  .advrepsum > div{padding:6px 8px}
  .advrepsum b{font-size:13.5px}
  .advschedtab .advhow{display:none}
  .advschedtab td,.advschedtab th{padding:6px 6px}
  .advschedtw{overflow-x:hidden}
  .advschedtw table.advschedtab{min-width:0 !important;width:100% !important;table-layout:auto}
  .advschedtab .pill{font-size:11px;padding:2px 7px;white-space:nowrap}
}
.advschedplan .advschednw{white-space:nowrap !important;display:inline-block}

/* v2.66 — Sales approvals: where the month stands between Ledger Desk and the employees (14/10/2026). */
.papstage{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.papstage .pill{flex:none}
.papstage .why{font-size:13px;color:var(--ink2);min-width:0;flex:1 1 320px}
/* v2.68 breaks (0286) */
.brkgo,.brkon{display:flex;flex-direction:column;gap:6px;margin-top:4px;padding-top:10px;border-top:1px dashed var(--line)}
.brkgo.ph,.brkon.ph{margin:10px 14px 0;padding-top:10px}
.brkuse{font-size:12px;color:var(--ink2)}
.brkuse.over{color:var(--warn);font-weight:600}
.brkon{border:1px solid color-mix(in srgb,var(--warn) 55%,var(--line));border-radius:var(--r);padding:10px 12px;
  background:color-mix(in srgb,var(--warn) 7%,var(--panel))}
.brkon.ph{margin:10px 14px 0}
.brkhd{display:flex;align-items:center;gap:8px;font-size:14px;min-width:0}
.brkdot{width:8px;height:8px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 18%,transparent);
  flex:none;animation:vispulse 2s ease-in-out infinite}
.brksince{color:var(--ink2);font-size:12.5px;white-space:nowrap}
.brklive{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:14px;white-space:nowrap}
.brkon .brkend{margin-top:2px}
.brkerr{margin:0}
.wbar i.wbrk{position:absolute;top:50%;height:13px;bottom:auto;transform:translateY(-50%);border-radius:3px;z-index:1;
  background:repeating-linear-gradient(135deg,var(--panel) 0 2px,var(--warn) 2px 4px);border:1px solid var(--warn);opacity:.9}
.wbar i.wbrk.over{border-color:var(--bad);background:repeating-linear-gradient(135deg,var(--panel) 0 2px,var(--bad) 2px 4px)}
.brkday{margin:0 16px 14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;gap:6px}
.brkdayhd{display:flex;align-items:baseline;gap:10px;font-size:13.5px}
.brkdayhd span{margin-left:auto;color:var(--ink2);font-size:12.5px}
.brkdayhd span.over{color:var(--warn);font-weight:600}
.brkday ul{list-style:none;margin:0;padding:0}
.brkday li{display:grid;grid-template-columns:110px 70px 1fr;gap:10px;align-items:baseline;padding:5px 0;border-top:1px solid var(--line2);font-size:13px}
.brkday li i{font-style:normal;color:var(--ink3);font-size:12px}
.brkover{color:var(--warn);font-weight:600}
.brkset .brkgrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:14px 22px;margin-bottom:14px}
.brkf{display:flex;flex-direction:column;gap:6px;min-width:0}
.brkf .k{font-size:12px;color:var(--ink2);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.brkf em{font-style:normal;font-size:12px;color:var(--ink3)}
.brkf .atin{max-width:150px}
.brkf .atin.brklab{max-width:220px}
.brkcos{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:32px}
.brkco{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;padding:5px 10px;border:1px solid var(--line);border-radius:99px;cursor:pointer}
.wseg.wbrkey{background:repeating-linear-gradient(135deg,var(--panel) 0 2px,var(--warn) 2px 4px);border:1px solid var(--warn);border-radius:3px}
.cibtns .brkgo,.cibtns .brkon{margin:0;padding-top:0;border-top:0;min-width:220px}
.cibtns .brkon{padding:10px 12px}
.brkco{text-transform:none;letter-spacing:0;white-space:nowrap;font-weight:500;color:var(--ink);margin:0}
.brkco input{margin:0}

/* v2.71 — the "Not approved yet" pill inside the Report as of box (same 37px box; the pill is shorter than it).
   It must not wrap the top bar any sooner than the box did without it (measured 20/10/2026 against the shipped bar):
   up to 1400 the box drops its "Report as of" words when the pill is there (the pill says more); up to 1240 the pill
   reads "Not approved"; up to 1140 it is a "!" with the words in its tooltip. The phone keeps the whole line. */
.asof .ldna{gap:0;margin-left:3px;padding:1px 8px;font-size:11px;font-weight:600;line-height:1.5}
@media screen and (min-width:901px) and (max-width:1400px){ .asof:has(.ldna) .k{display:none} }
@media screen and (min-width:901px) and (max-width:1240px){
  .asof .ldna .ldy{display:none} .asof .ldna{padding:1px 6px;margin-left:0} .asof:has(.ldna){gap:5px;padding:0 9px} }
@media screen and (min-width:901px) and (max-width:1140px){
  .asof .ldna .ldt{display:none} .asof .ldna::before{content:'!';font-weight:700} .asof .ldna{padding:1px 7px} }
@media screen and (max-width:900px){ .topbar .asof .ldna{margin-left:0;font-size:10.5px} }

/* v2.73 — My requests on its own tab */
.pmwrap{max-width:920px}
.pmform .formbody{overflow:visible;gap:16px;padding:20px 22px 22px}
.pmgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.pmgrid > .field{margin:0;min-width:0}
.pmgrid > .pmfull,.pmgrid > .pqcardf{grid-column:1 / -1}
.pmgrid > .pqcardf[hidden]{display:none}
.pmact{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line2)}
.pmact .filebtn{width:auto;flex:0 1 auto;padding:8px 14px}
.pmact .filebtn span{margin-left:8px}
.pmact #pqSubmit{margin-left:auto;min-width:180px;padding:9px 18px;justify-content:center}
.pqok.pmok{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.pmok .pmline{flex-basis:100%}
.pmgo{margin-left:auto;background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--good);cursor:pointer;white-space:nowrap}
.pmgo:hover{text-decoration:underline}
.pmpanel{display:flex;flex-direction:column}
.pmtools{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap;padding:11px 16px;border-bottom:1px solid var(--line2)}
.pmtools .zkchips{flex:1 1 auto;flex-wrap:wrap;margin:0}
.pmchips button b{font-weight:600;margin-left:5px}
.pmchips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.pmchips button[aria-pressed="true"] b{color:inherit}
.pmtools .pmfind{margin-left:auto;width:240px}
.pmtw{max-height:calc(100vh - var(--underH,160px) - 150px);overflow:auto}
.pmtw .dropdoc{background:none;border:0;color:var(--ink3);font-size:14px;line-height:1;padding:0 3px;font-family:inherit;cursor:pointer}
.pmtw .dropdoc:hover{color:var(--bad)}
.pmtw thead th{position:sticky;top:0;z-index:3;background:var(--panel2);box-shadow:inset 0 -1px 0 var(--line)}
@media(max-width:720px){
  .pmform .formbody{padding:16px}
  .pmgrid{grid-template-columns:minmax(0,1fr)}
  .pmact .filebtn,.pmact #pqSubmit{width:100%;margin-left:0}
  .pmgo{margin-left:0}
  .pmtools{padding:10px 12px}
  .pmtools .zkchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  .pmtools .zkchips::-webkit-scrollbar{display:none}
  .pmtools .zkchips button{flex:0 0 auto}
  .subtabs:has(> [data-paytab]){width:100%;box-sizing:border-box;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
}

/* v2.75 — medical certificates on sick leave */
.lvcert{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:5px;white-space:normal}
.lvcf{display:inline-flex;align-items:center;gap:1px;max-width:100%;min-width:0}
.lvcdoc{display:inline-flex;align-items:center;gap:5px;max-width:200px;min-width:0;border:1px solid var(--line);border-radius:99px;
  padding:2px 9px 2px 7px;background:var(--panel);color:var(--ink);font:inherit;font-size:12px;line-height:1.5}
button.lvcdoc{cursor:pointer}
button.lvcdoc:hover{border-color:var(--accent);color:var(--accent2)}
.lvcdoc svg{width:13px;height:13px;flex:none}
.lvcdoc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lvcdrop{background:none;border:0;color:var(--ink3);font:inherit;font-size:15px;line-height:1;padding:0 3px;cursor:pointer}
.lvcdrop:hover{color:var(--bad)}
.lvcadd{background:none;border:1px dashed var(--line);border-radius:6px;color:var(--ink3);font:inherit;font-size:12px;
  padding:1px 7px;cursor:pointer;white-space:nowrap}
.lvcadd:hover{border-color:var(--accent);color:var(--accent2)}
.lvcnone{font-size:12px;color:var(--warn);white-space:nowrap}

/* v2.76 POA credit notes section */
.panel.poa-cnp{margin-top:18px}
table.poa-cnt tr.poa-cnnet td{border-top:1px solid var(--line);font-weight:600}

/* v2.77 withdraw a pending WFH / leave request */
td .btn.wdbtn{display:block;margin-top:6px;padding:2px 9px;font-size:11.5px;min-height:0;height:auto;line-height:1.4}
.wdcol{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.apx .wdcol .btn.wdbtn{min-height:0;height:auto;line-height:1.3;padding:4px 12px;font-size:12.5px}

.ptab .attday.ok{background:color-mix(in srgb,var(--good) 13%,transparent);color:var(--good);cursor:default}
.ptab .attday.ok:hover{text-decoration:none}
/* v2.80 My attendance -> Team */
.tmhead header{flex-wrap:wrap;row-gap:8px}
.tmhead .tmpicks{margin-left:auto;display:flex;gap:8px}
.tmpick select{min-width:0}
.tmhead .tmpick:first-child select{width:260px}
.tmhead .tmpick:last-child select{width:170px}
.tmtab td{vertical-align:middle}
.tmtab .tmnone{color:var(--ink3);padding:14px 12px}
.tmmute{font-style:normal;color:var(--ink3);font-size:12px;margin-left:4px}
.tmseg{margin-bottom:12px}
.tmpicksM{display:grid;gap:8px;padding-top:0}
.tmpicksM .tmpick, .tmpicksM .tmpick select{width:100%;margin:0}
.tmnoneM{color:var(--ink3);margin:0;padding:6px 16px 16px;font-size:13.5px}