/* Layout: brand bar, tab strip, two-column workspace. Hairline borders, no card shadows. */
:root{
  --maroon:#621C2B; --red:#FF1E2D; --cta:#E12322;
  --bg:#F4F2F2; --surface:#FFFFFF; --sunken:#FAF8F8;
  --fg:#1C1416; --muted:#6F5C61; --line:#DFD6D7; --line2:#EDE6E7;
  --ok:#186B43; --ok-bg:#E8F2EC; --warn:#8A5605; --warn-bg:#FAF0DD; --bad:#AF201B; --bad-bg:#FAE8E7;
  --display:'Archivo',system-ui,sans-serif; --body:'Source Sans 3',system-ui,sans-serif;
  --r:3px;
  color-scheme:light; /* payroll screen stays light in every viewer theme */
}

*{box-sizing:border-box}
/* The hidden attribute must beat any display rule below, or an element the app
   hides stays on screen: .stack and .signin-wrap both set display themselves. */
[hidden]{display:none !important}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.5;margin:0}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.01em}
button,input,select,textarea{font:inherit;color:inherit}
.tnum{font-variant-numeric:tabular-nums}

.topbar{background:var(--maroon);color:#fff;padding:0 16px}
.topbar-in{max-width:1220px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-block:11px}
.logo{height:24px;width:auto;background:#fff;padding:3px 6px;border-radius:2px}
.appname{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.01em}
.appname span{display:block;font-family:var(--body);font-weight:400;font-size:11px;letter-spacing:.09em;text-transform:uppercase;opacity:.72}
.sp{flex:1 1 auto;min-width:0}
.whoami{display:flex;align-items:center;gap:7px;font-size:13px}
.whoami select{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.32);color:#fff;border-radius:var(--r);padding:5px 8px;font-size:13px}
.whoami select option{color:#1C1416}
.build{border:1px solid rgba(255,255,255,.4);border-radius:var(--r);padding:2px 8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase}

.tabbar{background:var(--surface);border-bottom:1px solid var(--line);padding:0 16px;position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.tabbar-in{max-width:1220px;margin:0 auto;display:flex;gap:0;overflow-x:auto}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:11px 15px;cursor:pointer;color:var(--muted);font-family:var(--display);font-weight:600;font-size:14px;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--red)}
.tab:focus-visible{outline:2px solid var(--red);outline-offset:-3px}

.wrap{max-width:1220px;margin:0 auto;padding:16px;padding-block:20px}
.page-head{margin-bottom:16px}
.page-head h1{font-size:21px}
.page-head p{color:var(--muted);margin:4px 0 0;max-width:64ch;font-size:14px}

.panel{background:var(--surface);border:1px solid var(--line)}
.panel+.panel{margin-top:14px}
.panel-h{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--sunken)}
.panel-h h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.panel-b{padding:14px}
.cols{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:860px){.cols{grid-template-columns:1fr}}

label.f{display:block;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.inp{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 9px}
.inp:focus{outline:2px solid var(--red);outline-offset:0;border-color:var(--red)}
.row{display:flex;gap:11px;flex-wrap:wrap}
.row>*{flex:1 1 130px;min-width:0}
.stack{display:flex;flex-direction:column;gap:13px}

.btn{background:var(--cta);color:#fff;border:1px solid var(--cta);border-radius:var(--r);padding:8px 14px;font-family:var(--display);font-weight:600;font-size:14px;cursor:pointer}
.btn:hover{background:var(--red);border-color:var(--red)}
.btn:disabled{background:var(--line2);border-color:var(--line);color:var(--muted);cursor:not-allowed}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--fg)}
.btn.ghost:hover{background:var(--sunken);border-color:var(--muted)}
.btn.sm{padding:5px 10px;font-size:13px}

.emplist{max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:var(--r);margin-top:9px}
.emprow{display:flex;gap:9px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line2);padding:8px 10px;cursor:pointer}
.emprow:last-child{border-bottom:0}
.emprow:hover{background:var(--sunken)}
.emprow[aria-current="true"]{background:var(--sunken);border-left:3px solid var(--red);padding-left:7px}
.emprow b{font-weight:600;display:block;font-size:14px}
.emprow small{color:var(--muted);font-size:12px}
.chip{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:2px 6px;border-radius:2px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip.ok{color:var(--ok);background:var(--ok-bg);border-color:transparent}
.chip.bad{color:var(--bad);background:var(--bad-bg);border-color:transparent}
.chip.warn{color:var(--warn);background:var(--warn-bg);border-color:transparent}

.meters{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:860px){.meters{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.meters{grid-template-columns:1fr}}
.meter{background:var(--surface);padding:13px}
.meter h4{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.meter .big{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.15;margin-top:3px}
.meter .big em{font-style:normal;font-size:13px;font-weight:600;color:var(--muted)}
.bar{height:8px;background:var(--line2);margin:9px 0 6px;overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.bar i.used{background:var(--maroon)} .bar i.held{background:var(--warn)} .bar i.pend{background:var(--red)}
.meter small{color:var(--muted);font-size:12.5px;display:block}

.verdict{padding:13px;border:1px solid var(--line);background:var(--sunken)}
.verdict.pass{background:var(--ok-bg);border-color:transparent}
.verdict.fail{background:var(--bad-bg);border-color:transparent}
.verdict.part{background:var(--warn-bg);border-color:transparent}
.verdict h4{font-size:15.5px}
.checks{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.checks li{display:flex;gap:9px;align-items:flex-start}
.mark{flex:0 0 auto;width:16px;height:16px;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:#fff;margin-top:3px;border-radius:2px}
.mark.y{background:var(--ok)} .mark.n{background:var(--bad)}
.after{margin-top:11px;padding-top:10px;border-top:1px solid rgba(128,100,105,.3);font-size:13.5px;display:grid;gap:3px}

.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:680px}
th{text-align:left;font-family:var(--display);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;background:var(--sunken)}
td{padding:8px 10px;border-bottom:1px solid var(--line2);vertical-align:top}
tbody tr:hover{background:var(--sunken)}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.neg{color:var(--bad);font-weight:600} .pos{color:var(--ok);font-weight:600}
.void td{opacity:.52;text-decoration:line-through}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--muted)}
tr.grouphead td{background:var(--sunken);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;padding:7px 10px}
tr.grouphead:hover td{background:var(--sunken)}

.filters{display:flex;gap:11px;flex-wrap:wrap;align-items:flex-end}
.filters>div{flex:0 1 190px;min-width:150px}
.summary{display:flex;gap:20px;flex-wrap:wrap;padding:11px 14px;background:var(--sunken);border-bottom:1px solid var(--line);font-size:13px}
.summary b{display:block;font-family:var(--display);font-size:18px}
.summary span{color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase}

.note{font-size:13px;color:var(--muted)}
.strip{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:10px 14px;border:1px solid var(--line);background:var(--surface);font-size:13.5px;margin-bottom:14px}
.strip b{font-family:var(--display)}
pre.csv{background:var(--sunken);border:1px solid var(--line);padding:11px;overflow:auto;font-size:11.5px;max-height:240px;margin:0}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));background:var(--maroon);color:#fff;padding:10px 17px;border-radius:2px;font-size:14px;z-index:30}
.hint{font-size:12.5px;color:var(--muted);margin-top:4px}
.scrim{position:fixed;inset:0;background:rgba(20,12,14,.55);display:grid;place-items:center;padding:16px;z-index:25}
.modal{background:var(--surface);border:1px solid var(--line);width:min(480px,100%);max-height:88vh;overflow:auto}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13.5px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-variant-numeric:tabular-nums}

/* ---- added for the live app ---- */
.signin-wrap{min-height:100vh;display:grid;place-items:center;padding:16px;background:var(--bg)}
.signin{width:min(420px,100%);background:var(--surface);border:1px solid var(--line)}
.signin .brandbar{background:var(--maroon);padding:16px;display:flex;align-items:center;gap:12px}
.signin .brandbar img{height:26px;background:#fff;padding:4px 7px;border-radius:2px}
.signin .brandbar div{color:#fff;font-family:var(--display);font-weight:700;font-size:16px}
.signin .brandbar span{display:block;font-family:var(--body);font-weight:400;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;opacity:.72}
.err{background:var(--bad-bg);color:var(--bad);padding:9px 11px;font-size:13.5px;border:1px solid transparent}
.ok-msg{background:var(--ok-bg);color:var(--ok);padding:9px 11px;font-size:13.5px;border:1px solid transparent}
.busy{opacity:.55;pointer-events:none}
.spinner{display:inline-block;width:13px;height:13px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}
.linkbtn{background:none;border:0;color:var(--cta);text-decoration:underline;cursor:pointer;
  font-size:13.5px;padding:0}

/* ================================================================== long tables
   Search box, count and pager above a table that would otherwise run for pages. */
.tabletools{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  padding:11px 14px;border-bottom:1px solid var(--line);background:var(--sunken)}
.tabletools:empty{display:none}
.tt-search{flex:1 1 280px;min-width:0}
.tt-count{flex:0 0 auto;font-size:13px;color:var(--muted);padding-bottom:9px;
  font-variant-numeric:tabular-nums}
.tt-pager{flex:0 0 auto;display:flex;gap:8px;align-items:center;padding-bottom:1px}
.tt-page{font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ============================================================ phones and tablets

   Schedulers do this job standing in a hallway with one hand on a phone, so the
   screen has to work at 390px, not merely survive there.

   A table is the wrong shape at that width: thirteen columns of payroll figures
   either scroll sideways out of reach or shrink past reading. Below 760px each
   row becomes a card and each cell carries its own heading, which is what the
   data-label attributes are for. Nothing is hidden, so the phone shows the same
   figures as the desk. */

@media (max-width:760px){
  .tablewrap{overflow-x:visible}
  table{min-width:0;display:block;font-size:14px}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  tbody{display:block}

  tbody tr{display:block;border:1px solid var(--line);border-radius:var(--r);
    background:var(--surface);margin:10px 12px;padding:3px 0}
  tbody tr:first-child{margin-top:12px}
  tbody tr:hover{background:var(--surface)}

  td{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;justify-content:space-between;
    border:0;border-bottom:1px solid var(--line2);padding:7px 12px;text-align:right}
  /* A cell whose value carries a note under it, such as the accrual rate and its
     annual total, must keep the figure on the value side and drop the note below
     it. Left inline the note pushes the number out of the column of figures. */
  td br{display:none}
  td small,td .chip+.chip{flex:1 0 100%;text-align:right}
  td:last-child{border-bottom:0}
  td::before{content:attr(data-label);flex:0 0 auto;text-align:left;
    font-family:var(--display);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);padding-top:2px}
  /* The action column has no heading, so it gets the full width for its buttons
     instead of an empty label and a cramped half. */
  td:not([data-label]){display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;
    background:var(--sunken)}
  td:not([data-label]):empty{display:none}
  td:not([data-label])::before{content:none}
  td:not([data-label]) .btn{flex:1 1 auto;min-height:40px}

  /* The ledger's pay period headings separate cards rather than sitting in one. */
  tr.grouphead{display:block;margin:16px 12px 6px;border:0;background:none;padding:0}
  tr.grouphead td{display:block;background:none;border:0;border-bottom:1px solid var(--line);
    text-align:left;padding:0 0 5px}
  tr.grouphead td::before{content:none}
  /* A reversed entry is struck through on a wide screen. Struck through here it
     would score out the column headings too, which are part of each cell, so the
     card is dimmed instead and the type still reads "reversed". */
  .void td{text-decoration:none}
  .void{opacity:.62}

  /* Touch targets. 15px fields make iOS zoom the page on focus, which then has
     to be pinched back; 16px leaves it alone. */
  .inp{font-size:16px;padding:10px 11px}
  .btn{min-height:42px}
  .btn.sm{min-height:38px;padding:8px 12px}
  .tab{padding:13px 14px}

  .wrap{padding:12px;padding-block:14px}
  .panel-b,.panel-h{padding-left:12px;padding-right:12px}
  .page-head h1{font-size:19px}
  .meter .big{font-size:24px}
  .summary{gap:14px}
  .emplist{max-height:none}

  .tabletools{gap:10px;padding:11px 12px}
  .tt-search{flex:1 1 100%}
  .tt-count{flex:1 1 auto;padding-bottom:0}
  .tt-pager{flex:0 0 auto;padding-bottom:0}
  .tt-pager .btn{min-width:46px}

  /* A dialog on a phone belongs against the bottom edge, within thumb reach,
     not floating in the middle of the screen. */
  .scrim{place-items:end stretch;padding:0}
  .modal{width:100%;max-height:92vh;border-radius:var(--r) var(--r) 0 0;
    padding-bottom:env(safe-area-inset-bottom,0px)}
}

/* Tablets in portrait: the two column workspace is already one column by 860px.
   The roster list beside it does not need its own scroller at that width. */
@media (max-width:860px){
  .emplist{max-height:300px}
  .filters>div{flex:1 1 200px}
}