/* =======================================================================
   Palette taken from the Geospatial AI wordmark:
   slate navy for the type, orange for the [EO] brackets and the Uzma swoosh.
   ======================================================================= */
:root{
  --navy:#2c3e50;
  --navy-deep:#223140;
  --navy-soft:#3d5468;
  --orange:#f1662a;
  --orange-soft:#fdeee7;
  --ink:#1e2a35;
  --muted:#6d7d8c;
  --line:#dde5ec;
  --bg:#f4f7fa;
  --card:#ffffff;
  --ok:#1f8a5b;
  --danger:#c0392b;
  /* document ink — kept close to the official templates */
  --doc-navy:#1f3864;
  --doc-bar:#2f5597;
  --doc-lbl:#2e5c99;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45;
  display:flex;flex-direction:column;min-height:100vh;
}

/* ---------- brand wordmark ---------- */
.brand-logo{display:inline-flex;align-items:center}
.brand-img{height:38px;width:auto;display:block}
.gwordmark{display:flex;flex-direction:column;line-height:1;color:#fff}
.gw-main{font-family:Georgia,"Times New Roman",serif;font-size:21px;letter-spacing:.5px;white-space:nowrap}
.gw-eo{color:var(--orange)}
.gw-ai{font-size:9px;letter-spacing:.5px;vertical-align:super;margin-left:1px}
.gw-sub{font-family:Georgia,"Times New Roman",serif;font-size:9.5px;color:#b7c6d4;margin-top:3px;letter-spacing:.3px}

/* ---------- top bar ---------- */
.topbar{
  background:var(--navy);color:#fff;padding:13px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:14px}
.brand-rule{width:1px;height:36px;background:rgba(255,255,255,.22);flex:none}
.brand-text h1{margin:0;font-size:16px;letter-spacing:.2px}
.brand-text p{margin:2px 0 0;font-size:11.5px;color:#b7c6d4}
.topbar-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.topbar-actions select{
  background:#37506a;color:#fff;border:1px solid #4d6a86;border-radius:6px;
  padding:6px 8px;font-size:12.5px;min-width:150px;
}

/* --- saved profiles: a row each, with its own rename and delete --- */
.profiles{position:relative}
.profiles-toggle{display:flex;align-items:center;gap:8px;max-width:250px}
.profiles-toggle #profileCurrent{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profiles-toggle .caret{font-size:10px;color:var(--muted);flex:none}
.profilemenu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:290px;max-width:380px;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px;
  box-shadow:0 12px 34px rgba(16,24,40,.22);max-height:62vh;overflow-y:auto;
}
.profilemenu .empty{padding:10px 8px;font-size:12.5px;color:var(--muted);line-height:1.5}
.prow{display:flex;align-items:center;gap:2px;border-radius:6px}
.prow:hover{background:#eef2f6}
.prow .pload{
  flex:1;min-width:0;text-align:left;font-family:inherit;font-size:13px;color:var(--ink);
  background:none;border:none;padding:9px 8px;cursor:pointer;border-radius:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.prow.on .pload{font-weight:700;color:var(--navy)}
.prow .picon{
  border:none;background:none;cursor:pointer;padding:7px 8px;border-radius:6px;flex:none;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--muted);
}
.prow .picon:hover{background:#dde5ec;color:var(--navy)}
.prow .pdel:hover{background:#fdeaea;color:var(--danger)}
.profilemenu .padd{
  display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--navy);
  padding:9px 8px;border-radius:6px;
}
.profilemenu .padd.sep{border-top:1px solid var(--line);border-radius:0 0 6px 6px;margin-top:5px;padding-top:11px}
.profilemenu .padd:hover{background:#eef2f6}

/* ---------- stepper ---------- */
.stepper{
  display:flex;background:#fff;border-bottom:1px solid var(--line);
  padding:0 14px;overflow-x:auto;position:sticky;top:0;z-index:20;
}
.step{
  display:flex;align-items:center;gap:9px;padding:13px 6px;background:none;border:none;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);
  cursor:pointer;white-space:nowrap;
}
/* the joining line belongs inside the run of numbered steps; the places you
   go to look are not on the way to anything */
.stepgroup{display:flex;align-items:center}
.stepgroup .step:not(:last-child)::after{content:"";width:22px;height:1px;background:var(--line);margin:0 4px 0 10px;flex:none}
.stepviews{display:flex;align-items:center;gap:4px;margin-left:auto;padding-left:16px;position:relative}
.stepviews::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:1px;background:var(--line)}
.step.view{padding-left:12px;padding-right:12px;border-radius:7px}
.step.view:hover{background:#eef2f6}
.step.view.active{background:var(--orange-soft);color:var(--orange)}
.step-num{
  width:23px;height:23px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11.5px;
  background:#eef2f6;color:var(--muted);border:1px solid var(--line);
}
.step:hover{color:var(--navy)}
.step.done .step-num{background:var(--navy);color:#fff;border-color:var(--navy)}
.step.done{color:var(--navy-soft)}
.step.active{color:var(--navy)}
.step.active .step-num{background:var(--orange);color:#fff;border-color:var(--orange)}

/* ---------- layout ---------- */
main{max-width:1240px;margin:0 auto;padding:22px 18px 40px;width:100%;flex:1}
.panel{
  display:none;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px;box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.panel.active{display:block}
h2{margin:0 0 6px;font-size:19px;color:var(--navy)}
h3{margin:26px 0 12px;font-size:13.5px;color:var(--navy);text-transform:uppercase;letter-spacing:.5px}
.lead{margin:0 0 20px;color:var(--muted);font-size:13.5px;max-width:80ch}
.hint{color:var(--muted);font-size:12.5px;font-weight:400;text-transform:none;letter-spacing:0}
p.hint{margin:10px 0 14px}
.req{
  background:var(--orange-soft);color:var(--orange);font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:20px;text-transform:uppercase;letter-spacing:.4px;margin-left:6px;
}
.warn{margin:12px 0 0;font-size:12.5px;color:#9a5a12;background:#fff6e8;border:1px solid #f2d3a3;border-radius:7px;padding:9px 12px}

.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px}
@media(max-width:840px){.grid2,.grid3{grid-template-columns:1fr}}
label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:#42525f}
input,select,textarea{
  font-family:inherit;font-size:13.5px;padding:8px 10px;border:1px solid var(--line);
  border-radius:7px;background:#fff;color:var(--ink);font-weight:400;width:100%;
}
input:focus,select:focus{outline:2px solid #bcd6ea;outline-offset:0;border-color:var(--navy-soft)}
label.check{flex-direction:row;align-items:center;gap:8px;margin-top:14px}
label.check input{width:auto}

/* ---------- buttons ---------- */
.btn{
  font-family:inherit;font-size:13px;font-weight:600;padding:9px 16px;border-radius:7px;
  border:1px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer;
}
.btn:hover{background:var(--navy-deep)}
.btn.ghost{background:#fff;color:var(--navy);border-color:#c6d2dd}
.btn.ghost:hover{background:#eef2f6}
.btn.small{padding:7px 12px;font-size:12.5px}
.btn.danger{background:#fff;color:var(--danger);border-color:#e2a9a2}
.btn.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn.primary{background:var(--orange);border-color:var(--orange)}
.btn.primary:hover{background:#d9541c}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* ---------- wizard navigation ---------- */
.navrow{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.navrow .spacerflex{flex:1}
.navrow .stepnote{font-size:12.5px;color:var(--muted)}

/* ---------- choice cards ---------- */
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.choices{grid-template-columns:1fr}}
.choice{
  text-align:left;font-family:inherit;cursor:pointer;background:#fff;
  border:1.5px solid var(--line);border-radius:12px;padding:22px 20px 20px;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.choice:hover{border-color:var(--navy-soft);transform:translateY(-2px);box-shadow:0 6px 18px rgba(16,24,40,.08)}
.choice.selected{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.choice-tag{display:inline-block;background:var(--navy);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.6px}
.choice.selected .choice-tag{background:var(--orange)}
.choice h3{margin:12px 0 6px;font-size:16px;text-transform:none;letter-spacing:0}
.choice p{margin:0 0 14px;font-size:13px;color:var(--muted)}
.choice-out{display:inline-block;font-size:11.5px;font-weight:700;color:var(--navy);background:#eef2f6;border-radius:6px;padding:4px 10px}
.choice.selected .choice-out{background:var(--orange-soft);color:var(--orange)}

/* =======================================================================
   Document replicas — the form laid out like the paper it produces
   ======================================================================= */
.sheetwrap{background:#eef2f6;border:1px solid var(--line);border-radius:10px;padding:22px;overflow-x:auto}
.doc{
  background:#fff;margin:0 auto;box-shadow:0 2px 14px rgba(16,24,40,.12);
  font-size:12px;color:#20272e;
}
.doc-invoice{max-width:820px;padding:0 0 26px}
.doc-claim{min-width:1120px;padding:16px 20px 20px}

/* fillable blanks */
.dinput{
  border:none;border-bottom:1px dashed #b9c6d3;border-radius:0;background:transparent;
  padding:2px 3px;font-size:12px;font-family:inherit;color:#20272e;width:100%;min-width:0;
}
.dinput::placeholder{color:#b3c0cc;font-style:italic}
.dinput:hover{background:#f6fafd;border-bottom-color:var(--navy-soft)}
.dinput:focus{outline:none;background:#eaf3fb;border-bottom:1px solid var(--navy-soft)}
.dinput.up{text-transform:uppercase}
.dinput.mini{width:44px;display:inline-block;text-align:right;padding:0 2px;font-size:11px}
.ta-r{text-align:right}
.ta-c{text-align:center}
.dpair{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.dpair b{color:var(--muted);font-weight:400}

/* --- invoice --- */
.doc-band{
  background:var(--doc-navy);height:74px;margin:26px 26px 0;display:flex;align-items:center;justify-content:flex-end;
}
.doc-band span{color:#fff;font-size:30px;font-weight:800;letter-spacing:.5px;padding-right:20px}
.doc-head{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;padding:16px 26px 4px}
.doc-head.one{grid-template-columns:1fr}
.drow{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
.dlabel{color:var(--doc-lbl);font-weight:700;font-size:11.5px;flex:0 0 92px}
.doc-bar{
  background:var(--doc-bar);color:#fff;font-weight:700;font-size:11.5px;
  padding:5px 10px;margin:12px 26px 8px;
}
.doc-table{width:100%;border-collapse:collapse;margin:14px 0 0;font-size:11.5px}
.doc-table th{background:var(--doc-bar);color:#fff;font-weight:700;padding:6px 8px;border:1px solid #9fb2cd;text-align:center}
.doc-table td{border:1px solid #cfd8e4;padding:3px 6px;height:26px}
.doc-table tbody tr:nth-child(even) td{background:#f4f6f9}
.doc-table .idx{text-align:center;color:var(--muted)}
.doc-table .dinput{border-bottom-style:solid;border-bottom-color:transparent}
.doc-table .dinput:hover{border-bottom-color:var(--navy-soft)}
.doc-table{margin-left:26px;width:calc(100% - 52px)}
.doc-underbar{padding:8px 26px 0;display:flex;gap:10px;flex-wrap:wrap}
.doc-totals{width:300px;margin:14px 26px 0 auto}
.doc-totals div{display:flex;justify-content:space-between;gap:12px;padding:4px 10px;border:1px solid #cfd8e4;border-top:none;font-size:11.5px;background:#f4f6f9;color:var(--doc-lbl)}
.doc-totals div:first-child{border-top:1px solid #cfd8e4}
.doc-totals .grand{background:var(--doc-navy);color:#fff;border-color:var(--doc-navy);font-weight:700}
.doc-sigline{padding:16px 26px 0}
.doc-note{padding:14px 26px 0}
.doc-note .dinput{font-style:italic;color:#6c7783;font-size:11px;border-bottom-color:transparent}
.doc-note .dinput:hover,.doc-note .dinput:focus{border-bottom-color:var(--navy-soft)}
.sidenote{margin-top:22px;background:#f7fafc;border:1px solid var(--line);border-radius:8px;padding:18px}
.sidenote h3{margin-top:0}
.formula{margin:12px 0 0;font-size:12.5px;color:var(--navy-soft);font-family:Consolas,monospace}
.hidden{display:none !important}

/* --- claim: header --- */
.uz-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.uz-title{display:flex;gap:8px;align-items:flex-start}
.uz-tri{width:0;height:0;border-left:9px solid var(--orange);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-top:3px}
.uz-title h4{margin:0;font-size:13px;letter-spacing:.3px}
.uz-title p{margin:2px 0 0;font-size:9px;color:#6b7680;letter-spacing:.5px}
/* 93px is 8.583% of the 1080px content width of .doc-claim — the same share
   of the sheet the wordmark takes on the printed form. */
.uz-logo{display:inline-flex;align-items:center;min-height:17px;margin-top:1px}
.uz-logo img{width:93px;height:auto;display:block}
.uz-fallback{font-size:15px;font-weight:800;color:#58595b;letter-spacing:-.5px}
.uz-fallback i{color:var(--orange);font-style:normal}

/* --- claim: section A/B boxes --- */
.uz-sections{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.uz-box{border:1px solid #545454}
.uz-boxhead{border-bottom:1px solid #545454;font-weight:700;font-size:10px;padding:4px 8px;background:#f4f6f8}
.uz-fields{padding:9px 10px 11px}
.ufield{display:flex;align-items:baseline;gap:6px;margin-bottom:5px;font-size:9.5px}
.ufield>span{flex:0 0 178px;font-weight:700;line-height:1.25}
.ufield>span i{font-weight:400;font-style:italic}
.ufield>b{font-weight:700;flex:none}
.ufield.indent>span{padding-left:16px;flex-basis:178px}
.ufield .dinput{font-size:10px}
.ufield .dpair{gap:4px}
.ufield .dpair select.dinput{flex:1 1 auto}
.ufield .dpair input.dinput{flex:0 0 62px}

/* --- claim: section B grid --- */
.uz-blabel{font-weight:700;font-size:11px;margin:16px 0 4px}
.uz-tip{margin:0 0 8px;font-size:11px;color:var(--muted)}
/* 3.7% of the sheet's width — four empty rows — stands between the grid and
   section (C) on the printed form. */
.uz-tip.mt{margin-top:40px}
.uz-gridwrap{overflow-x:auto}
.uz-grid{border-collapse:collapse;font-size:9px;width:100%;table-layout:fixed}
.uz-grid th{border:1px solid #545454;font-size:6.8px;font-weight:700;padding:3px 1px;line-height:1.15;vertical-align:middle;text-align:center}
.uz-grid td{border:1px solid #545454;padding:0;height:24px;text-align:center;vertical-align:middle}
.uz-grid .c-act{width:180px}
.uz-grid .c-job{width:46px}
.uz-grid .c-day{width:20px}
.uz-grid .c-tot{width:52px}
.uz-grid .c-del{width:26px;border:none}
.uz-grid td.c-act .dinput,.uz-grid td.c-job .dinput,.uz-grid td.c-tot .dinput{
  font-size:9px;border-bottom-color:transparent;text-align:center;padding:2px;
}
.uz-grid td.c-act .dinput{text-align:left;padding-left:4px}
.uz-grid td .dinput:hover{border-bottom-color:var(--navy-soft)}
.dcell{cursor:pointer;font-weight:700;font-size:9px;color:#20272e;user-select:none}
.dcell:hover{outline:2px solid var(--navy-soft);outline-offset:-2px}
.dcell.we{background:#eef1f4;color:#8b98a4;font-size:7px}
.dcell.work{background:#e6f5ec;color:var(--ok)}
.dcell.ph{background:var(--orange-soft);color:var(--orange);font-size:7.5px}
/* leave is not a day worked, so each kind reads apart from the ticks, from
   PH, and from each other — the three come out of separate allowances */
.dcell.pto{background:#e9f0fa;color:#2f6fd0;font-size:7px}
.dcell.mc{background:#fdeced;color:#c0392b;font-size:7.5px}
.dcell.ul{background:#f1ecf9;color:#7048c4;font-size:7.5px}
.uz-grid tr.totalrow td{font-weight:700;background:#f4f6f8}
.rowdel{border:none;background:#fdeaea;color:var(--danger);border-radius:5px;width:20px;height:20px;cursor:pointer;font-size:13px;line-height:1;font-family:inherit}

.summary{
  margin-top:14px;background:var(--navy);color:#fff;border-radius:8px;padding:12px 16px;
  display:flex;gap:24px;flex-wrap:wrap;font-size:12px;
}
.summary b{display:block;font-size:17px;margin-top:2px}

/* --- claim: the year's leave --- */
.leavebox{margin-top:14px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.leavehead{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:10px 14px;background:#f7fafc;border-bottom:1px solid var(--line);font-size:13px;
}
.leavehead span{color:var(--muted);font-size:12px}
.leavetable{width:100%;border-collapse:collapse;font-size:12.5px}
.leavetable th{
  text-align:left;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.3px;padding:8px 14px;border-bottom:1px solid var(--line);
}
.leavetable td{padding:6px 14px;border-bottom:1px solid #eef2f6;vertical-align:middle}
.leavetable tr:last-child td{border-bottom:none}
.leavetable td:first-child{white-space:nowrap}
.leavetable .daylist{color:var(--muted);font-size:12px}
.leavetable .low{color:var(--orange);font-weight:700}
.leavetable .bad{color:var(--danger);font-weight:700}
.leavetable tr.over{background:#fdf3f2}
/* the same badge the day cells wear, so the row and the grid read as one */
.lmark{
  display:inline-block;min-width:30px;text-align:center;padding:1px 5px;border-radius:4px;
  font-size:10.5px;font-weight:700;margin-right:4px;
}
.lmark.pto{background:#e9f0fa;color:#2f6fd0}
.lmark.mc{background:#fdeced;color:#c0392b}
.lmark.ul{background:#f1ecf9;color:#7048c4}

/* --- claim: section C --- */
.uz-sign{border-collapse:collapse;width:100%;margin-top:4px;font-size:10px}
.uz-sign th,.uz-sign td{border:1px solid #545454;padding:4px 6px;text-align:center}
.uz-sign thead th{background:#ebebeb;font-size:10px;font-weight:700}
.uz-sign thead tr.sub th{font-size:9px}
/* 15.2% is the share of the sheet the label column takes on the printed
   form, where it runs from the left margin to the PREPARED BY column. */
.uz-sign .rl{width:15.2%;text-align:left;font-weight:700;background:#fff}
.uz-sign thead .rl.mark{background:#fff;border:none;font-size:11px;padding-left:0}
.uz-sign .sigrow td{height:86px;padding:4px;vertical-align:middle}
.uz-notes{margin-top:16px;font-size:8.5px;line-height:1.5}
.uz-notes b{font-size:9px}
.uz-notes p{margin:3px 0 0}
.uz-foot{display:flex;gap:26px;margin-top:20px;padding-top:10px;font-size:7.5px;color:#5a6570;line-height:1.5}
.uz-foot b{font-size:8px;color:#20272e}

/* --- signature pads inside the form --- */
.sigslot{display:flex;flex-direction:column;gap:5px;align-items:center}
.sigslot canvas{
  width:100%;height:62px;border:1px dashed #bcc9d5;border-radius:5px;background:#fff;
  touch-action:none;display:block;cursor:crosshair;
}
.sigslot .sigbtns{display:flex;gap:5px}
.sigslot .sigbtns button{
  font-family:inherit;font-size:9.5px;padding:2px 8px;border-radius:5px;
  border:1px solid #c6d2dd;background:#fff;color:var(--navy);cursor:pointer;
}
.sigslot .sigbtns button:hover{background:#eef2f6}
.sigslot .sighint{font-size:8.5px;color:var(--muted)}
.doc-sigline .sigslot{align-items:flex-start;max-width:230px}
.doc-sigline .sigslot canvas{height:56px}
.doc-sigline .signame{font-size:11px;font-weight:700;border-top:1px solid #8a95a0;padding-top:3px;width:100%}
.doc-sigline .signame small{display:block;font-weight:400;color:var(--muted);font-size:9.5px}

/* ---------- step 1: the profile cards ---------- */
.profilecards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px;margin:18px 0 22px;
}
.pcard{
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;
  padding:14px;border:1px solid var(--line);border-radius:9px;background:#fff;
  font-family:inherit;cursor:pointer;
}
.pcard:hover{border-color:var(--navy-soft);background:#f7fafd}
.pcard.on{border-color:var(--orange);background:#fffaf6;box-shadow:0 0 0 1px var(--orange) inset}
.pcard b{font-size:14px;color:var(--ink)}
.pcard.new{border-style:dashed;color:var(--navy-soft)}
.pcardsub{font-size:12px;color:var(--muted)}
.pchips{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
/* the balance, so it is readable without opening anything */
.pchip{
  font-style:normal;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;
  background:#eef2f6;color:var(--navy-soft);
}
.pchip.pto{background:#e9f0fa;color:#2f6fd0}
.pchip.mc{background:#fdeced;color:#c0392b}
.pchip.ul{background:#f1ecf9;color:#7048c4}
.pchip.over{outline:1px solid var(--danger)}
.overridenote{
  margin:8px 0 0;font-size:12.5px;color:var(--orange);display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;
}

/* ---------- approvals ---------- */
.approvals{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.emptynote{
  margin:0;padding:18px;border:1px dashed var(--line);border-radius:8px;
  color:var(--muted);font-size:13px;line-height:1.6;background:#fbfdfe;
}
.subgrouphead{
  margin:10px 0 0;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--muted);
}
.subrow{border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:#fff}
/* what is waiting on the person reading it comes first, and looks it */
.subrow.urgent{border-color:var(--orange);box-shadow:0 1px 0 var(--orange-soft) inset}
.subrow.done{background:#fbfdfb}
.subtop{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.subwho{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px}
.subwho b{font-size:14px}
.subwho span{font-size:12px;color:var(--muted)}
.subacts{display:flex;gap:6px;flex-wrap:wrap}
.pill{
  font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap;
  background:#eef2f6;color:var(--navy-soft);
}
.pill.pending_manager{background:#fff4ec;color:#b4531d}
.pill.pending_boss{background:#eaf1fb;color:#2f6fd0}
.pill.pending_signature{background:#f1ecf9;color:#7048c4}
.pill.returned{background:#fdeaea;color:var(--danger)}
.pill.complete{background:#e6f5ec;color:var(--ok)}
.subnote{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink)}
.subnote b{color:var(--muted);font-weight:700}
.subtrail{margin-top:8px;font-size:11px;color:var(--muted);word-break:break-word}
.decidebox{
  margin-top:12px;padding:12px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;
}
.decidehead{margin:0;font-weight:700;font-size:13px}
.decidepad{max-width:300px}
.decidepad .sigslot canvas{height:70px}
.decidenote{
  width:100%;font-family:inherit;font-size:13px;padding:8px 10px;
  border:1px solid var(--line);border-radius:7px;resize:vertical;
}
.decidenote:focus{outline:none;border-color:var(--navy-soft)}
.decidebox .btnrow{margin-top:0}
/* the admin can end up with a pile; this clears it in one decision */
.bulkbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 12px;border:1px solid var(--orange);border-radius:8px;background:#fffaf6;
  font-size:12.5px;
}
.bulkbar .dinput{flex:1;min-width:160px}
.btn.ghost.danger{color:var(--danger);border-color:#e2a9a2;background:#fff}
.btn.ghost.danger:hover{background:#fdeaea}

/* ---------- generate ---------- */
.gencards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:840px){.gencards{grid-template-columns:1fr}}
.gencard{border:1px solid var(--line);border-radius:8px;padding:18px;background:#fcfdfe}
.gencard.wide{grid-column:1/-1}
.gencard h3{margin:0 0 8px;text-transform:none;letter-spacing:0;font-size:15px}
.gsum{margin:0;font-size:12.5px;color:var(--muted);min-height:34px}
.genlog{
  margin-top:20px;font-family:Consolas,monospace;font-size:12px;color:#4a5a68;
  background:#f7fafc;border:1px solid var(--line);border-radius:8px;padding:12px;
  max-height:200px;overflow:auto;display:none;
}
.genlog.on{display:block}
.genlog .err{color:var(--danger)}
.genlog .ok{color:var(--ok)}

/* ---------- site footer ---------- */
.sitefoot{background:var(--navy-deep);color:#c3d0dc;margin-top:auto}
.foot-inner{max-width:1240px;margin:0 auto;padding:20px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.foot-logo{display:inline-flex;align-items:center}
.foot-logo .brand-img{height:30px}
.foot-logo .gw-main{font-size:16px}
.foot-logo .gw-ai{font-size:7.5px}
.foot-logo .gw-sub{font-size:8.5px}
.foot-copy{margin:0;font-size:12.5px;color:#93a6b6}
.foot-copy b{color:#dce6ee;font-weight:600}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,80px);
  background:var(--ink);color:#fff;padding:11px 20px;border-radius:8px;font-size:13px;
  opacity:0;transition:.25s;pointer-events:none;z-index:99;max-width:90vw;
}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast.bad{background:var(--danger)}

/* ---------- sign-in gate ---------- */
/* While locked the app is not merely covered, it is not laid out at all —
   no flash of the form behind the card on a slow connection. */
body.locked > .topbar,
body.locked > .stepper,
body.locked > main,
body.locked > .sitefoot{display:none}

.authgate{
  position:fixed;inset:0;z-index:200;overflow:auto;
  display:flex;align-items:center;justify-content:center;padding:28px 18px;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 55%,#16222d 100%);
}
/* `display:flex` above is an author rule, so it beats the browser's own
   [hidden]{display:none} and el.hidden = true would do nothing at all. The
   gate would then sit over the unlocked app forever. Say it explicitly. */
.authgate[hidden]{display:none}
.auth-card{
  width:100%;max-width:380px;background:var(--card);border-radius:14px;
  padding:30px 30px 24px;box-shadow:0 18px 50px rgba(0,0,0,.35);
  display:flex;flex-direction:column;gap:14px;
}
.auth-mark{display:flex;justify-content:center;margin-bottom:2px}
.auth-mark .gw-main{
  font-family:Georgia,"Times New Roman",serif;font-size:21px;letter-spacing:.5px;
  color:var(--navy);white-space:nowrap;
}
.auth-card h1{margin:0;font-size:19px;text-align:center;color:var(--navy)}
.auth-lead{margin:-8px 0 4px;font-size:13px;color:var(--muted);text-align:center}
.auth-submit{margin-top:4px;padding:11px 16px;font-size:14px}
.auth-error{
  margin:0;background:#fdecea;border:1px solid #e2a9a2;color:var(--danger);
  border-radius:7px;padding:9px 11px;font-size:12.5px;
}
.auth-note{
  margin:6px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.55;color:var(--muted);
}

/* who is signed in, in the top bar */
.whoami{
  font-size:12.5px;color:#cfdae4;padding-left:10px;margin-left:2px;
  border-left:1px solid rgba(255,255,255,.22);white-space:nowrap;
}

/* ---------- PDF viewer ---------- */
.pdfview{
  position:fixed;inset:0;z-index:150;background:rgba(20,28,36,.82);
  display:flex;flex-direction:column;padding:22px 22px 26px;gap:12px;
}
/* Same trap as the sign-in gate: display above is an author rule and would
   beat [hidden]{display:none}, leaving the viewer stuck over the app. */
.pdfview[hidden]{display:none}
.pdfview-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;color:#fff;max-width:1100px;width:100%;margin:0 auto;
}
.pdfview-bar b{font-size:14.5px}
.pdfview-actions{display:flex;gap:8px;align-items:center}
.pdfview-actions .btn{text-decoration:none;display:inline-flex;align-items:center}
#pdfViewFrame{
  flex:1;width:100%;max-width:1100px;margin:0 auto;border:none;
  border-radius:10px;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.4);
}
@media(max-width:840px){
  .pdfview{padding:14px 12px 18px}
  .pdfview-bar{font-size:13px}
}

/* =======================================================================
   The unique ID, and the number that comes from it
   ======================================================================= */
.keyfield input{border-color:var(--orange);background:#fffaf6}
.keyfield input:focus{outline:2px solid var(--orange-soft)}
.keynote{
  margin:10px 0 0;font-size:12.5px;color:var(--navy-soft);
  background:#f7fafd;border:1px solid var(--line);border-radius:7px;padding:9px 12px;
}
.keynote.warn{color:#9a5a12;background:#fff6e8;border-color:#f2d3a3}
.pcardid{
  font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--orange);
  text-transform:uppercase;
}
.pcardid.missing{color:var(--muted);font-weight:400;text-transform:none}

/* ---------- what the calendar decided ---------- */
/* The public holidays are not a warning and not an instruction — they are
   the calendar saying which days of this month are which kind of day. So
   they are drawn as the days themselves, in the orange the PH cells in the
   grid use, and look like nothing else on the page. */
.holidays{
  margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;
  gap:8px 12px;border:none;background:none;font-size:12.5px;
}
.holidays > b{
  font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--orange);
  white-space:nowrap;
}
.holchips{display:flex;flex-wrap:wrap;gap:8px}
.holchip{
  display:inline-flex;align-items:baseline;gap:7px;font-style:normal;font-size:12px;
  padding:4px 11px 4px 5px;border-radius:20px;
  background:var(--orange-soft);color:#b3480f;border:1px solid #f6d3bf;
}
.holchip b{
  font-size:11px;font-weight:700;letter-spacing:.2px;white-space:nowrap;
  background:#fff;border-radius:14px;padding:2px 8px;color:var(--orange);
}
.holwarn{
  flex:1 1 100%;font-size:12px;color:#9a5a12;background:#fff6e8;
  border:1px solid #f2d3a3;border-radius:7px;padding:8px 11px;
}
@media(max-width:700px){
  .holidays > b{flex:1 1 100%}
  .holchip{font-size:11.5px}
}
.leavefoot{margin:8px 14px 12px;font-size:12px;color:var(--muted)}

/* =======================================================================
   Step 6 — sending it
   ======================================================================= */
.submitcard{border:1px solid var(--line);border-radius:8px;padding:18px;background:#fcfdfe}
.submitcard[hidden]{display:none}
.submitfacts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin-bottom:14px;
}
@media(max-width:640px){.submitfacts{grid-template-columns:1fr}}
.submitfacts>div{
  display:flex;justify-content:space-between;gap:12px;
  padding:6px 0;border-bottom:1px solid #eef2f6;
}
.submitfacts span{color:var(--muted);font-size:12.5px}
.submitfacts b{text-align:right}
.submitwarn{
  margin:0 0 14px;font-size:12.5px;color:#9a5a12;
  background:#fff6e8;border:1px solid #f2d3a3;border-radius:7px;padding:9px 12px;
}
.submitnote{display:block;font-size:12.5px;color:var(--muted);margin-bottom:12px}
.submitnote textarea{margin-top:6px}

/* =======================================================================
   The archive — signed copies on file
   ======================================================================= */
.archivehead{margin:32px 0 6px}
/* ---------- the History toolbar ----------

   Everything on one line, sitting on one baseline: the two buttons and the
   three pickers are all 38px tall, so nothing floats above or below
   anything else. Each picker's word is over its own control and left-
   aligned with it — centred over a box of a different width is what made
   the row look thrown together.

   `label` is a column everywhere in this app, which is why these needed
   saying rather than inheriting: the shared rule already stacks them, and
   only the alignment was ever wrong. */
.archivebar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:14px}
.archivebar .btn{height:38px;min-height:38px;padding:0 16px;display:inline-flex;align-items:center}
/* the one thing that acts on everything listed, at the far end of the row */
.archivebar #btnDownloadAll{margin-left:auto}
.archivefilter{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--navy-soft);
}
.archivefilter select{
  height:38px;padding:0 30px 0 10px;font-size:13px;font-weight:400;
  min-width:150px;max-width:230px;width:auto;
}
.archive{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.archiveperson{
  margin:16px 0 2px;font-size:12px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--navy-soft);
}
.archrow{border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:#fff}
.archhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.archhead b{font-size:14px}
.archhead span{color:var(--muted);font-size:12px}
.archfiles{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.archnone{color:var(--muted);font-size:12px;font-style:italic}
.archupload{
  border:1px dashed var(--navy-soft);border-radius:8px;padding:16px 18px;background:#f7fafd;
}
.archupload h4{margin:0 0 4px;font-size:14px}
.archlead{margin:0 0 12px;font-size:12.5px;color:var(--muted)}
.archpickers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:640px){.archpickers{grid-template-columns:1fr}}
.archslot{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--navy-soft)}
.archslot span{font-weight:600}
.archslot input[type=file]{font-size:12.5px}
.archnote{margin-top:12px;width:100%}
/* the PA's upload card: the file box and its buttons, side by side */
.signrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.signrow input[type=file]{font-size:12.5px;flex:1 1 220px;min-width:0}
.signhint{color:var(--muted);font-size:12px}
/* a scan put on a card and not yet sent: named, so it can be checked */
.signready{
  flex:1 1 220px;min-width:0;font-size:12.5px;font-weight:600;color:var(--navy);
  background:#eef6ec;border:1px solid #bfdcb8;border-radius:7px;padding:7px 10px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.signcard{border-color:var(--navy-soft)}
/* the one thing on the page that sends anything, by itself at the bottom */
.signsubmit{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;
}
.signsaid{margin:0;font-size:12.5px;color:var(--muted);max-width:80ch}

/* ---------- Save Profile, where the details it saves end ---------- */
.saverow{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
}
.savehint{color:var(--muted);font-size:12.5px}

/* =======================================================================
   Step 6 — which documents go
   ======================================================================= */
.submitpick{border:1px solid var(--line);border-radius:8px;padding:12px 16px 14px;margin:0 0 18px}
.submitpick legend{
  font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--navy-soft);font-weight:700;padding:0 6px;
}
.pickone{
  display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline;
  padding:7px 0;cursor:pointer;
}
.pickone+.pickone{border-top:1px solid #eef2f6}
.pickone input{grid-row:span 2;align-self:center;width:16px;height:16px}
.pickone b{font-size:13.5px}
.pickone span{font-size:12.5px;color:var(--muted)}
.pickonly{margin:8px 0 0;font-size:12.5px;color:var(--muted)}

/* =======================================================================
   The status table — one row per document, a light per stage
   ======================================================================= */
.statusbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  margin-bottom:12px;font-size:12.5px;
}
.statuscount{color:var(--navy-soft);font-weight:600}

.statuswrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
.statustable{width:100%;border-collapse:collapse;font-size:12.5px;min-width:760px}
.statustable th{
  text-align:left;padding:9px 12px;background:#f7fafd;border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--navy-soft);
  white-space:nowrap;
}
.statustable th.stagecol{text-align:center}
.statustable td{padding:9px 12px;border-bottom:1px solid #eef2f6;vertical-align:middle}
.statustable tr:last-child td{border-bottom:none}
.statustable .who{font-weight:600;white-space:nowrap}
.statustable .when,.statustable .invno{white-space:nowrap;color:var(--muted)}
.statusrow.urgent{background:#fffaf6}
.statusrow.done{color:var(--muted)}
.statusrow.back{background:#fdf3f2}

.doctag{
  display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;
  letter-spacing:.3px;white-space:nowrap;
}
.doctag.invoice{background:#e8eef8;color:var(--doc-bar)}
.doctag.claim{background:var(--orange-soft);color:#b3480f}

.stagecell{text-align:center}
.lamp{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:700;
  border:1px solid var(--line);background:#f0f3f7;color:transparent;
}
.lamp.done{background:#e3f4ec;border-color:#9ed3ba;color:var(--ok)}
.lamp.waiting{background:#fff0e4;border-color:#f3b183;color:var(--orange)}
.lamp.returned{background:#fbe4e1;border-color:#e5a79f;color:var(--danger)}
.lamp.todo{color:transparent}

.statusacts{white-space:nowrap;text-align:right}
.statusacts .btn{margin-left:6px}
.decidetr td{background:#f7fafd;padding:0}
.decidetr .decidebox{margin:0;border-radius:0;border-left:none;border-right:none}

.statuslegend{
  display:flex;flex-wrap:wrap;gap:18px;padding:10px 12px;
  border-top:1px solid var(--line);background:#fcfdfe;font-size:12px;color:var(--muted);
}
.statuslegend span{display:inline-flex;align-items:center;gap:7px}

.decidefile{
  display:flex;flex-direction:column;gap:5px;margin:0 0 12px;
  padding:12px;border:1px dashed var(--navy-soft);border-radius:7px;background:#fff;
}
.decidefile span{font-size:12.5px;font-weight:600;color:var(--navy-soft)}
.decidefile small{font-size:11.5px;color:var(--muted)}

/* the month picker that decides what the status table is showing */
.statuspick{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.statuspick select{min-width:150px}
.statustable .who small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.statusrow.firstof td{border-top:1px solid var(--line)}
.statusrow.unsent{color:var(--muted)}
.statusrow.unsent .doctag{opacity:.55}
.statusnone{color:var(--muted);font-size:12px;font-style:italic}
.statusempty{padding:22px 14px;text-align:center;color:var(--muted)}

/* the History step's counts and the document tag on a filed record */
.historycount{margin:0 0 4px;font-size:12.5px;color:var(--muted)}
.archivebar+.historycount,.archivebar+.keynote{margin-top:14px}
.archhead .doctag{margin-left:2px}

/* the stage headings carry the person who does that stage */
.statustable th.stagecol{text-align:center;line-height:1.3}
.statustable th.stagecol small{
  display:block;margin-top:3px;font-size:10.5px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--muted);max-width:130px;margin-inline:auto;
}

/* =======================================================================
   On a phone

   The four people who approve a claim read it on whatever is in their hand,
   which is usually a phone — so the parts they touch have to work at 360px
   before anything else does. The parts nobody sensibly fills in on a phone
   (the two document replicas, which are the printed page at its printed
   size) keep their geometry and scroll sideways instead: shrinking those
   would mean the thing on screen was no longer the thing that prints.
   ======================================================================= */

/* Anything that scrolls sideways should do it the way the platform does. */
.sheetwrap,.uz-gridwrap,.statuswrap,.stepper{-webkit-overflow-scrolling:touch}

/* The notch, and the rounded corners under it. */
.topbar,.sitefoot{
  padding-left:max(22px,env(safe-area-inset-left));
  padding-right:max(22px,env(safe-area-inset-right));
}

@media(max-width:700px){
  /* iOS zooms the page in when a field smaller than 16px takes focus, and
     never zooms back out. Every ordinary control is therefore 16px here. The
     document replicas keep theirs — .dinput is a class and outranks this —
     because their sizes are the printed sizes. */
  input,select,textarea{font-size:16px}

  .topbar{padding-top:11px;padding-bottom:11px;gap:12px}
  .brand{gap:10px}
  .brand-text h1{font-size:14.5px}
  .brand-text p{display:none}
  .brand-rule{height:28px}
  .brand-img{height:30px}
  .topbar-actions{width:100%;gap:6px}
  .topbar-actions .btn{flex:1 1 auto;min-height:40px}
  .profiles{flex:1 1 100%}
  .profiles-toggle{max-width:none;width:100%;min-height:40px}
  .profilemenu{min-width:0;width:100%;max-width:none}
  .whoami{padding-left:0;margin-left:0;border-left:none;flex:1 1 100%;order:9}

  .stepper{padding:0 8px}
  .step{padding:11px 5px;font-size:12.5px}
  .step:not(:last-child)::after{width:10px;margin:0 2px 0 6px}

  main{padding:14px 10px 30px}
  .panel{padding:16px 14px;border-radius:9px}
  h2{font-size:17px}
  .lead{font-size:13px;margin-bottom:16px}

  /* a finger is not a mouse pointer */
  .btn{min-height:40px;padding:10px 14px}
  .btn.small{min-height:36px;padding:8px 12px}
  .navrow{flex-wrap:wrap}
  .navrow .stepnote{order:3;width:100%;text-align:center}

  .sheetwrap{padding:10px;border-radius:8px}
  /* the day grid is tapped, one cell at a time, so the cells grow */
  .uz-grid td{height:30px}
  .uz-grid .c-day{width:26px}
  .uz-grid .c-act{width:150px}

  /* ---- the status table becomes a card each ---- */
  .statuswrap{overflow:visible;border:none;background:none;border-radius:0}
  .statustable{display:block;min-width:0}
  .statustable thead{display:none}
  .statustable tbody{display:block}
  .statustable tr.statusrow{
    display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;
    border:1px solid var(--line);border-radius:9px;background:#fff;
    padding:12px 14px;margin-bottom:10px;
  }
  .statustable tr.statusrow.firstof td{border-top:none}
  .statustable tr.statusrow td{display:block;border:none;padding:0}
  .statustable td.who{width:100%;order:1}
  .statustable td.who:empty{display:none}
  .statustable td.doc{width:100%;order:2;margin-bottom:6px}
  .statustable td.stagecell{
    order:3;display:flex;flex-direction:column-reverse;align-items:center;gap:4px;
    flex:1 1 auto;min-width:56px;padding:6px 0;
  }
  .statustable td.stagecell::before{
    content:attr(data-col);font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;
    color:var(--muted);white-space:nowrap;
  }
  .statustable td.statusacts{
    order:4;width:100%;text-align:left;white-space:normal;
    display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;
  }
  .statustable td.statusacts .btn{margin-left:0;flex:1 1 auto}
  .statustable tr.decidetr{display:block;margin:-6px 0 12px}
  .statustable tr.decidetr td{display:block;padding:0}
  .decidetr .decidebox{border-radius:9px;border:1px solid var(--line)}
  .statuslegend{padding:10px 2px;gap:12px;font-size:11.5px}
  .statusbar{gap:10px}
  .statuspick,.statuspick select{width:100%}
  .statuscount{width:100%}

  .bulkbar{flex-direction:column;align-items:stretch}
  .bulkbar .dinput{min-width:0}

  .archupload{padding:14px}
  .archfiles .btn{flex:1 1 auto}
  .archivebar{gap:10px}
  .archivebar .btn{flex:1 1 auto;justify-content:center}
  .archivebar #btnDownloadAll{margin-left:0}
  .archivefilter{width:100%}
  .archivefilter select{max-width:none;width:100%}

  /* iOS Safari cannot show a PDF in an iframe, so point at the way out */
  .pdfview-mobile{display:block;color:#cfdae4;font-size:12px;width:100%}
  .pdfview-actions{width:100%}
  .pdfview-actions .btn{flex:1 1 auto;justify-content:center}

  .auth-card{padding:24px 20px 20px}
}

/* the PDF hint is for small screens only */
.pdfview-mobile{display:none}

@media(max-width:400px){
  .statustable td.stagecell{min-width:48px}
  .statustable td.stagecell::before{font-size:9px}
  .brand-text h1{font-size:13.5px}
}

/* unpaid leave has no allowance, so its "left" cell has nothing to count down */
.leavetable .nolimit{color:var(--muted);font-style:italic}

/* a copy signed on the way through, rather than the finished article */
.stagetag{
  font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  color:var(--muted);background:#eef2f6;border-radius:20px;padding:2px 8px;
}
.decidefile.required{border-color:var(--orange);background:#fffaf6}

/* =======================================================================
   The signature on the profile

   Drawn once or scanned once, then printed every month. A scan is a whole
   page and the signature is a small part of it, so the page is shown with
   a box over what the app thinks is the ink, and a preview of exactly what
   will be kept — nothing is stored until somebody has looked at it.
   ======================================================================= */
.sigprofile{margin:6px 0 4px}
.sigshow{
  display:flex;align-items:center;justify-content:center;
  min-height:96px;padding:10px;background:#fff;
  border:1px dashed var(--line);border-radius:9px;
}
.sigprofile.has .sigshow{border-style:solid;border-color:#9ed3ba;background:#fbfefc}
.sigshow img{max-height:110px;max-width:100%;object-fit:contain}
.signone{color:var(--muted);font-size:12.5px}
.sigactions{margin-top:10px}
.sigdraw{margin-top:12px;max-width:420px}
.sigdraw[hidden]{display:none}

.sigcrop{
  margin-top:14px;padding:14px;background:#f7fafd;
  border:1px solid var(--line);border-radius:9px;
}
.sigcrop[hidden]{display:none}
.croplead{margin:0 0 10px;font-size:12.5px;color:var(--navy-soft)}
.cropwrap{
  position:relative;display:inline-block;max-width:100%;
  border:1px solid var(--line);background:#fff;line-height:0;
  cursor:crosshair;touch-action:none;
}
.cropcanvas{max-width:100%;height:auto;display:block}
.cropbox{
  position:absolute;border:2px solid var(--orange);background:rgba(241,102,42,.12);
  pointer-events:none;
}
.croppreview{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:12px;padding:10px 12px;background:#fff;
  border:1px solid var(--line);border-radius:8px;
}
.croppreview span{font-size:12px;color:var(--muted)}
.croppreview img{max-height:80px;max-width:100%;object-fit:contain}

/* what the administrator alone sets */
input.locked,select.locked{background:#f3f6f9;color:var(--navy-soft);cursor:not-allowed}
.keyfield input.locked,.keyfield select.locked{border-color:var(--line);background:#f3f6f9}

/* =======================================================================
   Sent back — the Re-submit step

   A rejection is a job, not a status. The reason somebody gave is the
   biggest thing on the card, because it is the only thing on it that says
   what to do next.
   ======================================================================= */
.stepbadge{
  font-style:normal;font-size:10.5px;font-weight:700;line-height:1;
  background:var(--danger);color:#fff;border-radius:20px;padding:3px 7px;margin-left:2px;
}
.backcard{
  border:1px solid #e5a79f;border-left:4px solid var(--danger);border-radius:9px;
  padding:14px 16px;background:#fffbfa;
}
.backcard.fixing{border-color:var(--orange);border-left-color:var(--orange);background:#fffaf6}
.backhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.backhead b{font-size:14.5px}
.backhead span{color:var(--muted);font-size:12px}
.backwho{margin:10px 0 0;font-size:12px;color:var(--muted)}
.backwhy{
  margin:6px 0 0;padding:10px 14px;border-left:3px solid #e5a79f;background:#fff;
  border-radius:0 7px 7px 0;font-size:13.5px;color:var(--ink);
}
.backnow{
  margin:10px 0 0;font-size:12.5px;color:#9a5a12;background:#fff6e8;
  border:1px solid #f2d3a3;border-radius:7px;padding:8px 11px;
}
.backcard .decidenote{margin-top:12px}
@media(max-width:700px){
  .backcard .btnrow .btn{flex:1 1 auto}
}

/* a stage a document does not have, rather than one it is waiting for */
.lamp.na{background:#fff;border-style:dashed;color:var(--muted)}

/* the document itself, opened inside the card that is about it */
.edithost{
  margin-top:14px;padding:14px 0;border-top:1px dashed #e5a79f;border-bottom:1px dashed #e5a79f;
}
.edithost[hidden]{display:none}
.edithost .sheetwrap{margin-top:0}
.edithost .lead{margin-bottom:12px}
.backcard.fixing .edithost{border-color:var(--orange)}
/* ---------- Shared application usability ---------- */
:root{--muted:#566879;--radius:14px}
body{min-height:100dvh;line-height:1.55}
.skip-link{position:fixed;top:10px;left:12px;z-index:300;padding:12px 18px;background:#fff;color:var(--navy);border:2px solid var(--navy);border-radius:8px;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
body.locked>.skip-link{display:none}
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #236baf;outline-offset:3px}
main{padding-top:30px;padding-bottom:48px}
.panel{padding:30px;box-shadow:0 4px 20px rgba(34,49,64,.035)}
.panel>h2{font-size:24px;letter-spacing:-.4px;line-height:1.3;margin-bottom:10px}
.panel>.lead{font-size:15px;line-height:1.65;max-width:72ch;margin-bottom:26px}
.panel>h3,#detailsBox>h3{font-size:15px;text-transform:none;letter-spacing:0;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.grid2,.grid3{gap:20px 24px}
.grid2>label,.grid3>label,.auth-card>label{font-size:14px;gap:7px}
.grid2 input,.grid2 select,.grid3 input,.grid3 select,.auth-card input{min-height:46px;border-color:#bdcbd6;font-size:15px}
input:disabled,select:disabled{background:#f0f3f6;color:#566879;cursor:not-allowed}
textarea:focus{outline:2px solid #bcd6ea;border-color:var(--navy-soft)}
.req{color:#a33b13}
.btn{min-height:44px;transition:background .15s,border-color .15s;line-height:1.4}
.btn.primary{background:#b94216;border-color:#b94216}
.btn.primary:hover{background:#963410;border-color:#963410}
.topbar{padding-top:17px;padding-bottom:17px}
.topbar-actions #btnReset{background:transparent;border-color:#81909c;color:#fff}
.topbar-actions #btnReset:hover{background:#713329;border-color:#c98b80}
.stepper{padding-inline:max(18px,calc((100vw - 1204px)/2));scroll-padding-inline:16px}
.step{min-height:62px;padding:14px 10px;border-bottom:3px solid transparent}
.step.active{border-bottom-color:var(--orange);background:#fff6f0}
.step.active .step-num{background:#b94216;border-color:#b94216}
.step-num{width:27px;height:27px;font-size:12px}
.navrow{padding-top:22px;margin-top:32px}
.navrow>.btn:last-child:not(:first-child){background:var(--navy);color:#fff;border-color:var(--navy)}
.choice{padding:26px;min-width:0}
.choice p{font-size:14px;line-height:1.65}
.choice.selected{background:#fff9f5}
.choice.selected .choice-out{color:#a33b13}
.auth-card{max-width:440px;padding:36px;gap:20px;border-top:4px solid var(--orange)}
.auth-card h1{font-size:24px;line-height:1.3}
.auth-lead{font-size:15px;line-height:1.6;margin:0}
.auth-note{font-size:13px}
.auth-mark{margin-bottom:6px}
.toast{max-width:min(560px,calc(100vw - 28px));white-space:normal;text-align:center;line-height:1.5}
.sheetwrap,.uz-gridwrap{overscroll-behavior-x:contain}
@media(max-width:700px){
  main{padding:18px 12px 32px}
  .panel{padding:22px 16px}
  .panel>h2{font-size:21px}
  .panel>.lead{font-size:14px}
  .stepper{padding-inline:8px}
  .step{min-height:56px;padding:12px 8px}
  .btn,.btn.small{min-height:44px}
  .grid2 input,.grid2 select,.grid3 input,.grid3 select,.auth-card input{font-size:16px}
  .topbar-actions .btn{min-height:44px}
  .navrow{gap:10px}
  .navrow>.btn{flex:1;white-space:normal}
  .navrow .spacerflex{display:none}
  .auth-card{padding:28px 22px}
  .authgate{align-items:flex-start;padding-top:max(28px,8dvh)}
  .profilemenu{min-width:min(290px,calc(100vw - 48px));max-width:calc(100vw - 48px)}
  .pdfview-mobile{display:block}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .choice:hover{transform:none}
}

/* History: one person with their two documents side by side. */
.history-table-wrap{overflow-x:auto;margin:22px 0;overscroll-behavior-x:contain}
.history-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;table-layout:fixed}
.history-table caption{text-align:left;font-size:16px;font-weight:700;color:var(--navy);padding:0 0 12px}
.history-table th,.history-table td{padding:16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.history-table thead th{background:#eef3f7;font-size:13px;color:var(--navy)}
.history-table th:first-child{width:34%}
/* four columns of their own widths: the month is short, the copy is not */
.filedtable th:first-child{width:16%}
.filedtable th:nth-child(2){width:28%}
.filedtable th:nth-child(3){width:18%}
.filedtable td:nth-child(3){white-space:nowrap}
.history-table tbody th{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.history-table tbody tr:last-child>*{border-bottom:0}
.history-table tbody tr:hover{background:#fafcfd}
.history-document{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.history-document+.history-document{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
/* the name of the file, then the reference under it */
.history-document-words{display:block;max-width:100%;min-width:0}
.history-document-name{
  display:block;font-size:13px;font-weight:600;color:var(--navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.history-document-meta{display:block;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.history-document-actions{display:flex;gap:8px}
.history-missing{font-size:13px;color:var(--muted);font-style:italic}

/* A button that is a drawing rather than a word. Square, big enough for a
   thumb, and the drawing inside takes the colour of the button's text — so
   it darkens on hover with everything else rather than staying flat. */
.iconbtn{
  width:38px;height:38px;min-height:38px;padding:0;
  display:inline-grid;place-items:center;
}
.iconbtn svg{display:block;width:17px;height:17px}
.iconbtn[disabled]{opacity:.5;cursor:progress}
.history-icon{width:38px;height:38px}
@media(max-width:700px){
  .history-table{min-width:520px}
  .history-table th,.history-table td{padding:12px}
  .history-table th:first-child{width:32%}
}