/* Attendance Register: "ledger" design (Design Handoff, October 2026).
   Square, ruled, flat. Every number in mono. Green only for "now" and the main action.
   Absences show a register code next to its word. Weekends are left clear. */

/* ============ Fonts (self-hosted; the security policy only allows fonts from this site) ============ */
@font-face{font-family:"Archivo";src:url("fonts/archivo-variable.woff2") format("woff2-variations"),url("fonts/archivo-variable.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}

/* ============ Tokens ============ */
:root,
:root[data-theme="light"]{
  --green:#0A6638; --green-press:#08542E; --green-tint:#E3EEE5; --on-green:#FFFFFF;
  --ink:#161B18; --paper:#FBFAF6; --rule:#D3D1C7; --ground:#EEEDE6; --shade:#E6E4DC;
  --muted:#3F4541; --muted-2:#545A55;
  --amber:#F5E6BF; --amber-ink:#6B4400; --danger:#8A1F17;
  --pad-bg:#FFFFFF;
  /* register codes: background / text */
  --s-bg:#F3DDC7;   --s-ink:#6E3500;
  --a-bg:#F2D3D0;   --a-ink:#7F1D15;
  --l-bg:#E2DAF0;   --l-ink:#4B2E83;
  --h-bg:#F0EBC4;   --h-ink:#5A4D00;
  --iod-bg:#EBD0DA; --iod-ink:#6E1F3E;
  --t-bg:#D3ECEA;   --t-ink:#0E5753;
  --ph-bg:#DCE4F2;  --ph-ink:#1F3F78;
  color-scheme:light;
}
/* Dark mode is not in the handoff yet: same rules, inverted ground. */
:root[data-theme="dark"]{
  --green:#0A6638; --green-press:#0C7741; --green-tint:#16291D; --on-green:#FFFFFF;
  --ink:#ECEAE2; --paper:#1A1E1B; --rule:#353B37; --ground:#121513; --shade:#232824;
  --muted:#C3C6BE; --muted-2:#A9ADA6;
  --amber:#4A3910; --amber-ink:#F2D488; --danger:#E5857B;
  --pad-bg:#FBFAF6;
  --s-bg:#4A2E14;   --s-ink:#F5C79A;
  --a-bg:#4D1F1B;   --a-ink:#F4AAA3;
  --l-bg:#33284D;   --l-ink:#CDBBF2;
  --h-bg:#3F3A12;   --h-ink:#E8DA84;
  --iod-bg:#47202F; --iod-ink:#F0B2C9;
  --t-bg:#143936;   --t-ink:#93DAD3;
  --ph-bg:#1E2C47;  --ph-ink:#AFC4EE;
  color-scheme:dark;
}
:root{
  --radius:2px;
  --gutter:1.5rem;
  --tap:2.75rem;
  --sans:"Archivo",system-ui,sans-serif;
  /* Numbers use Archivo too: its digits are all one width, so times still line up like a timesheet,
     and its zero is plain (the old mono font's zero had a dot inside). */
  --mono:"Archivo",system-ui,sans-serif;
}

/* ============ Base ============ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:100%} /* follows the phone's text-size setting */
html,body{margin:0;height:100%;background:var(--ground);color:var(--ink);overflow:hidden;
  font-family:var(--sans);font-size:0.9375rem;line-height:1.4;-webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none}
input{user-select:text;-webkit-user-select:text}
/* No browser magnifying (pinch or double-tap): zoom.js resizes the layout instead, so it always fits */
html,body{touch-action:pan-x pan-y}
.zoom-badge{position:fixed;left:50%;top:40%;transform:translateX(-50%);z-index:50;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:1.25rem;font-weight:600;padding:.5rem 1rem;border-radius:var(--radius);pointer-events:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:default}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
[hidden]{display:none !important}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
html{font-variant-numeric:tabular-nums} /* every number lines up in columns */
.display{font-family:var(--sans);font-stretch:75%;font-weight:700;letter-spacing:-.005em;line-height:1.05;margin:0}
.section{font-stretch:75%;font-weight:700;font-size:1.375rem;margin:0;line-height:1.15}
.kicker{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.field-label{display:block;font-size:.9375rem;font-weight:600;margin:0 0 .4rem}
.note,.help{margin:0;font-size:.875rem;color:var(--muted)}
.rule-ink{border:0;border-top:1px solid var(--ink);margin:1.5rem 0}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

input{font:inherit;font-size:1.125rem;width:100%;min-height:3.5rem;padding:0 1rem;background:var(--paper);color:var(--ink);
  border:1px solid var(--muted-2);border-radius:var(--radius)}
input:focus{outline:none;border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
input::placeholder{color:var(--muted-2)}

.screen{position:fixed;inset:0;display:none;flex-direction:column;background:var(--ground);overflow-x:hidden;overflow-y:auto}
.screen.active{display:flex}

/* ============ Buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--tap);padding:0 1.25rem;
  border-radius:var(--radius);font-size:.9375rem;font-weight:500;white-space:normal;text-align:center;line-height:1.2;padding-top:.35rem;padding-bottom:.35rem;transition:background-color .12s}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn-primary{background:var(--green);color:var(--on-green);font-weight:650;min-height:3.75rem;font-size:1.0625rem}
.btn-primary:hover:not(:disabled){background:var(--green-press)}
.btn-primary:disabled{background:var(--shade);color:var(--muted-2)}
.btn-line{background:var(--paper);border:1px solid var(--ink)}
.btn-ink{background:var(--ink);color:var(--paper);font-weight:600}
.btn-danger{background:var(--paper);border:1px solid var(--danger);color:var(--danger);font-weight:650;min-height:3.75rem;font-size:1.0625rem}
.btn-danger:disabled{border-color:var(--rule);color:var(--muted-2)}
.btn-small{min-height:var(--tap);padding:0 1rem}
.btn-square{width:var(--tap);padding:0;font-size:1.5rem;line-height:1}
.btn-square:disabled{border-color:var(--rule);color:var(--rule)}
.btn-big{width:100%;min-height:3.75rem}
.btn-arrow,.btn-tick{justify-content:space-between;padding:0 1.5rem}
.btn-arrow::after{content:"→";font-size:1.25rem}
.btn-tick::after{content:"✓";font-size:1.125rem}
.btn-onbar{border:1px solid rgba(255,255,255,.6);color:#fff;min-height:var(--tap);padding:0 1.1rem;font-weight:600}
.actions{display:flex;gap:1rem}
.actions .btn-line,.actions .btn-danger{flex:1;min-height:3.75rem;font-size:1.0625rem}
.actions .btn-primary{flex:2}

/* Segmented control: ink frame, the chosen option filled ink. Used for mode and rate. */
.seg{display:inline-flex;border:1px solid var(--ink);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.seg>button{min-height:var(--tap);padding:.3rem 1.1rem;font-size:.9375rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-align:center;line-height:1.15;min-width:0}
.seg>button+button{border-left:1px solid var(--ink)}
.seg>button.on{background:var(--ink);color:var(--paper);font-weight:650}
.seg-wrap{flex-wrap:wrap}
.seg-rate{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:34rem}
.seg-rate>button{justify-content:space-between;min-height:3.5rem;padding:0 1.1rem}
.seg-rate b{font-family:var(--mono);font-size:1.125rem;font-weight:600}
.seg-rate small{font-size:.8125rem}

/* Register codes and tags: mono chips, always next to a word */
.code{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 .35rem;border-radius:var(--radius);
  font-family:var(--mono);font-size:.75rem;font-weight:600;line-height:1}
.code-s{background:var(--s-bg);color:var(--s-ink)}
.code-a{background:var(--a-bg);color:var(--a-ink)}
.code-l{background:var(--l-bg);color:var(--l-ink)}
.code-h{background:var(--h-bg);color:var(--h-ink)}
.code-iod{background:var(--iod-bg);color:var(--iod-ink)}
.code-t{background:var(--t-bg);color:var(--t-ink)}
.code-ph{background:var(--ph-bg);color:var(--ph-ink)}
.code-ot{background:var(--amber);color:var(--amber-ink)}
.ot-tag{display:inline-block;font-family:var(--mono);font-size:.75rem;font-weight:600;padding:.15rem .4rem;border-radius:var(--radius);background:var(--amber);color:var(--amber-ink);white-space:nowrap}
.ot-tag.ot-approved{background:none;padding:0;color:var(--green)}
:root[data-theme="dark"] .ot-tag.ot-approved{color:#7FD4A2}
.ot-tag.ot-approved::after{content:" ✓"}
.ot-tag.ot-rejected{background:none;padding:0;color:var(--muted-2);text-decoration:line-through}

.msg{display:flex;flex-direction:column;gap:.4rem}
.msg:empty{display:none}
.msg p{margin:0;font-size:.875rem;line-height:1.4;padding:.55rem .75rem;border-left:3px solid var(--muted-2);background:var(--paper)}
.msg .m-err{border-left-color:var(--danger);color:var(--danger)}
.msg .m-warn{border-left-color:var(--amber-ink);color:var(--amber-ink);background:var(--amber)}
.msg .m-info{color:var(--muted)}

/* ============ Green header bar ============ */
.bar{background:var(--green);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem var(--gutter);min-height:4rem;flex:none}
.bar-brand{display:flex;align-items:center;gap:1.1rem;min-width:0}
.bar-logo,.login-logo{display:block;height:auto} /* sanco-logo-white.png: solid white copy of the logo, made from sanco-logo.png */
.bar-logo{width:7.5rem}
.bar-title{display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.35);padding-left:1.1rem;min-width:0}
.bar-title b{font-stretch:75%;font-weight:650;font-size:1.125rem;line-height:1.2}
.bar-title span{font-size:.875rem;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-right{display:flex;align-items:baseline;gap:1rem;white-space:nowrap}
.bar-date{font-size:.9375rem}
.clock{font-size:1.75rem;font-weight:500;letter-spacing:.02em}
.bar-actions{display:none}
.btn-icon{width:var(--tap);padding:0;font-size:1.25rem}
.bar-sub{display:grid;grid-template-columns:1fr auto 1fr}
.bar-sub .bar-right{justify-self:end}
.bar-sub .btn-onbar{justify-self:start}
.bar-center{font-weight:650;font-size:1.0625rem}

/* ============ Manager sign-in ============ */
.login-screen{flex-direction:row}
.login-side{background:var(--green);color:#fff;flex:0 0 40%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:2rem}
.login-logo{width:min(20rem,80%)}
.login-clock{font-size:clamp(4rem,9vw,7rem);font-weight:500;line-height:1;letter-spacing:.02em;margin-top:2rem}
.login-date{font-stretch:75%;font-weight:700;font-size:1.75rem;text-align:center}
.login-device{font-family:var(--mono);font-size:.875rem;text-align:center;opacity:.85;margin-top:.5rem}
.login-main{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem var(--gutter);overflow-y:auto}
.login-form{width:100%;max-width:29rem;display:flex;flex-direction:column}
.login-form .display{font-size:2.75rem;margin-top:.4rem}
.lede{margin:.9rem 0 0;font-size:1.0625rem;color:var(--muted);line-height:1.5}
.login-form input{margin-bottom:1.5rem}
.login-form .msg{margin:-.5rem 0 1rem}
.login-form .help{margin-top:1.1rem}
.login-foot{display:flex;justify-content:flex-end;align-items:center;gap:1rem;margin-top:2rem;font-size:.875rem;color:var(--muted)}

/* ============ Register ============ */
.toolbar{display:flex;align-items:center;gap:1.5rem;padding:.75rem var(--gutter);border-bottom:1px solid var(--rule);flex:none;min-width:0}
.week-nav{display:flex;align-items:center;gap:.75rem;flex:none}
.week-label{display:flex;flex-direction:column;min-width:7.5rem}
.week-label b{font-stretch:75%;font-weight:700;font-size:1.375rem;line-height:1.1}
.week-label span{font-size:.875rem;color:var(--muted)}
.tabs{display:flex;gap:.25rem;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{min-height:var(--tap);padding:0 .9rem;font-size:.9375rem;color:var(--muted);white-space:nowrap;box-shadow:inset 0 -3px 0 transparent}
.tab.on{color:var(--ink);font-weight:650;box-shadow:inset 0 -3px 0 var(--green)}
.search{position:relative;flex:0 1 16rem;min-width:12rem}
.search svg{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);width:1.1rem;height:1.1rem;color:var(--muted)}
.search input{min-height:var(--tap);font-size:1rem;padding-left:2.6rem;border-color:var(--rule)}

.reg-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:1rem;padding:1rem var(--gutter) .75rem;overflow:hidden}
.device-note{margin:0;padding:.6rem .85rem;border-left:4px solid var(--amber-ink);background:var(--amber);color:var(--amber-ink);font-size:.9375rem}
.counts-line{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.counts{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:baseline}
.count{display:inline-flex;align-items:baseline;gap:.45rem;font-size:.9375rem;color:var(--muted)}
.count b{font-family:var(--mono);font-size:1.375rem;font-weight:600;color:var(--ink)}
.count.c-in b{color:var(--green)}
:root[data-theme="dark"] .count.c-in b{color:#7FD4A2}
.count.c-ot b{color:var(--amber-ink)}
button.count{min-height:var(--tap)}
/* Counts you can tap to filter the list. 44px finger size in px, not rem, so large phone text does not push the list off screen. */
button.c-filter{min-height:44px;padding:0 .35rem;margin:0 -.35rem;border-bottom:3px solid transparent;border-radius:var(--radius) var(--radius) 0 0}
button.c-filter:hover span{text-decoration:underline}
button.c-filter[aria-pressed="true"]{background:var(--green-tint);border-bottom-color:var(--green);color:var(--ink)}
button.c-filter[aria-pressed="true"] span{font-weight:600}
.count-clear{min-height:44px;font-size:.9375rem;font-weight:600;color:var(--green);text-decoration:underline;text-underline-offset:3px}
:root[data-theme="dark"] .count-clear{color:#7FD4A2}



.board-scroll{flex:1;min-height:0;overflow:auto;border:1px solid var(--ink);background:var(--paper)}
.board{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:calc(13rem + 7 * 6.75rem + 4rem)}
.board col.c-name{width:13rem}
.board th,.board td{border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);padding:0;vertical-align:middle}
.board tr>*:last-child{border-right:0}
.board tbody tr:last-child>*{border-bottom:0}
.board thead th{position:sticky;top:0;z-index:2;background:var(--paper);border-bottom:1px solid var(--ink);height:3.25rem;padding:0 .75rem;
  font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;text-align:left;color:var(--muted)}
.board thead th .dh{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem}
.board thead th .dd{font-family:var(--mono);font-size:.875rem;letter-spacing:0;color:var(--ink)}
.board thead th.is-today{background:var(--green);color:#fff}
.board thead th.is-today .dd{color:#fff}
.board thead th.is-off{background:var(--shade)}
.board thead th.c-name{left:0;z-index:3;width:auto}
.board thead th.c-week{text-align:right}
.board tbody th.c-name{position:sticky;left:0;z-index:1;background:var(--paper);text-align:left;padding:.55rem .75rem .55rem 1rem;font-weight:600}
.board td.c-day{padding:.4rem .6rem;height:3.5rem}
.board td.c-day.is-today{background:var(--green-tint)}
.board td.c-week{text-align:right;padding:0 1rem;font-family:var(--mono);font-size:1.125rem;font-weight:500}
.nm{display:block;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nm-sub{display:block;font-size:.8125rem;color:var(--muted);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nm-sub .mono{font-size:.75rem}

/* Day cells */
.cell{width:100%;min-height:2.75rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.25rem;text-align:left;color:var(--ink)}
.cell .times{font-family:var(--mono);font-size:.8125rem}
.cell .word{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem}
.cell .dash{color:var(--muted-2);font-family:var(--mono)}
.cell.k-todo{align-items:center;border:1.5px solid var(--green);background:var(--paper);color:var(--green);font-weight:650;font-size:1rem;min-height:2.75rem;border-radius:var(--radius)}
:root[data-theme="dark"] .cell.k-todo{color:#7FD4A2}
.cell.k-in{background:var(--green);color:#fff;padding:.3rem .6rem;border-radius:var(--radius);gap:0}
.cell.k-in .times{font-size:.8125rem;opacity:.95}
.cell.k-in b{font-weight:650}
.cell.k-blank{color:var(--muted-2)}
.cell:disabled{cursor:default}
.cell.k-todo:disabled{opacity:.55}
/* Manager modes: show which cells a tap acts on */
.board.manager .cell:not(:disabled),.reg-list.manager .cell:not(:disabled){border:1.5px solid var(--ink);border-radius:var(--radius);padding:.3rem .5rem;color:var(--ink);align-items:center}

/* Portrait list (860px and below): name, today's button, Mon–Sun strip, overtime note */
.reg-list{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;border:1px solid var(--ink);background:var(--paper)}
.li{display:grid;grid-template-columns:minmax(0,1fr) minmax(9rem,40%);gap:.6rem 1rem;align-items:center;padding:.8rem 1rem;border-bottom:1px solid var(--rule)}
.li:last-child{border-bottom:0}
/* Long names wrap onto a second line instead of pushing today's button sideways */
.li .nm{white-space:normal;overflow-wrap:anywhere;line-height:1.2}
.li .today-slot .cell{min-height:3rem}
.li .week-strip{grid-column:1 / -1}
.li .li-ot{grid-column:1 / -1;font-size:.875rem;color:var(--muted);display:flex;gap:.5rem;align-items:center}

/* Week strip: used on the slip and in the portrait list */
.week-strip{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--ink)}
.ws{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.35rem 0;border-right:1px solid var(--rule);background:var(--paper)}
.ws:last-child{border-right:0}
.ws small{font-size:.75rem;font-weight:600}
.ws b{font-family:var(--mono);font-size:.875rem;font-weight:500;min-height:1.2em}
.ws.present{background:var(--green-tint)}
.ws.is-today{background:var(--green);color:#fff}

.legend{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.25rem;font-size:.875rem;color:var(--muted);flex:none}
.legend .kicker{margin-right:.25rem}
.legend span{display:inline-flex;align-items:center;gap:.45rem}
.empty{padding:1.5rem;color:var(--muted);border:1px solid var(--ink);background:var(--paper)}

.foot{display:flex;align-items:center;gap:1rem;background:var(--shade);border-top:1px solid var(--rule);padding:.6rem var(--gutter);min-height:4rem;flex:none;font-size:.875rem}
.sync{display:flex;align-items:center;gap:.6rem;margin-right:auto;color:var(--muted)}
.sync::before{content:"";width:.6rem;height:.6rem;background:var(--muted-2);flex:none}
.sync.pending{color:var(--amber-ink)}
.sync.pending::before{background:#B5801A}
.who{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============ Panels (slip, signature, overtime) ============ */
.split{flex:1;min-height:0;display:grid;grid-template-columns:minmax(18rem,1fr) 1.6fr;gap:1.5rem;padding:1.5rem var(--gutter);overflow:auto}
.panel{background:var(--paper);border:1px solid var(--ink);border-radius:var(--radius);padding:1.75rem;display:flex;flex-direction:column;gap:1rem;min-height:0}
.emp{font-size:.875rem;color:var(--muted)}
.person{font-size:2.75rem}
.slip{overflow:auto}
.slip .person{margin-top:-.4rem}

/* Ruled facts: label left, mono value right */
.facts{margin:0;border-top:2px solid var(--ink)}
.facts .row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--rule)}
.facts dt{font-size:.9375rem}
.facts dd{margin:0;font-family:var(--mono);font-size:1.125rem;white-space:nowrap}
.facts .row.now dt{font-weight:700}
.facts .row.now dd{color:var(--green);font-weight:600;font-size:1.375rem}
:root[data-theme="dark"] .facts .row.now dd{color:#7FD4A2}
.facts .row.ot{flex-wrap:wrap;border-bottom:0}
.facts .row.ot dt{font-weight:700;color:var(--amber-ink)}
.facts .row.ot dd{color:var(--amber-ink);font-weight:600;font-size:1.375rem}
.facts .row.ot p{flex-basis:100%;margin:.2rem 0 0;font-size:.875rem;color:var(--muted);line-height:1.45}
.facts-narrow{max-width:34rem;border-top:0}
.kicker.small{margin-top:.5rem}

.pad-panel{gap:.9rem}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.panel-head span{font-size:.875rem;color:var(--muted)}
/* The pad stays light in both themes: signatures are saved as dark ink on white. */
.pad{position:relative;flex:1;min-height:14rem;background:var(--pad-bg);border:1px solid var(--rule)}
.pad canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.pad-line{position:absolute;left:1.5rem;right:1.5rem;bottom:3.6rem;border-bottom:1px solid #161B18;pointer-events:none}
.pad-x{position:absolute;left:0;bottom:.3rem;color:#161B18;font-size:1.1rem}
.pad-name{position:absolute;left:1.5rem;bottom:1.4rem;font-size:.875rem;color:#3F4541;pointer-events:none}
.sig-hint{position:absolute;inset:0 0 4rem;display:flex;align-items:center;justify-content:center;color:#545A55;font-size:1rem;pointer-events:none}
.consent{margin:0;font-size:.875rem;color:var(--muted)}

/* ============ Done ============ */
.done{align-items:center;justify-content:center;padding:var(--gutter)}
.done-panel{max-width:32rem;width:100%;align-items:flex-start;gap:.9rem}
.done-mark{width:3.5rem;height:3.5rem;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.75rem;border-radius:var(--radius)}
.done-panel .display{font-size:2.25rem}
.done-panel p{margin:0;font-size:1.0625rem;color:var(--muted);line-height:1.5}
.done-panel .done-count{font-size:.9375rem}

/* ============ Overtime to approve ============ */
.split-ot{grid-template-columns:minmax(17rem,1fr) 1.9fr}
.ot-list-panel{padding:0;gap:0;overflow:hidden}
.ot-list-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--ink);font-size:.875rem}
.ot-list-head .kicker{margin:0;color:var(--ink)}
.ot-list{overflow:auto;flex:1}
.ot-item{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.25rem;border-bottom:1px solid var(--rule);text-align:left;min-height:4.5rem}
.ot-item b{display:block;font-size:1rem;font-weight:600}
.ot-item small{display:block;font-size:.875rem;color:var(--muted)}
.ot-item .mono{font-size:1rem;font-weight:600}
.ot-item.on{background:var(--ink);color:var(--paper)}
.ot-item.on small{color:inherit;opacity:.85}
.ot-detail{overflow:auto}
.ot-detail .person{margin-top:-.4rem}
.ot-when{margin:-.4rem 0 .5rem;font-size:1rem;color:var(--muted)}
.total-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;max-width:34rem;border-top:3px double var(--ink);padding-top:.8rem;margin-top:-.4rem}
.total-row b{font-size:1rem}
.total-row .mono{font-size:1.75rem;font-weight:600}
.ot-detail .msg{max-width:34rem}
.ot-detail .msg p{background:none;border-left:0;padding:0}
.ot-detail .msg .m-warn{background:var(--amber);padding:.5rem .75rem}
.ot-detail .actions{max-width:47rem;margin-top:.25rem}
.ot-empty{justify-content:center;align-items:flex-start}
.ot-empty p{margin:0;color:var(--muted)}

/* ============ Sheets (manager check, mark a day) ============ */
.sheet-backdrop{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(22,27,24,.55)}
.sheet{width:100%;max-width:36rem;max-height:100%;overflow:auto;background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.sheet-narrow{max-width:26rem}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.sheet-sub{margin:.2rem 0 0;color:var(--muted)}
.status-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink)}
.status-btn{display:flex;align-items:center;gap:.7rem;min-height:3.5rem;padding:0 1rem;font-size:1rem;border-bottom:1px solid var(--rule);text-align:left}
.status-btn:nth-child(odd){border-right:1px solid var(--rule)}
.status-btn.on{background:var(--ink);color:var(--paper);font-weight:650}
.status-btn.k-clear{color:var(--danger)}

/* ============ Portrait tablet: 860px and below ============ */
@media (max-width:860px){
  .bar-date{display:none}
  .toolbar{flex-wrap:wrap;gap:.75rem 1rem}
  .tabs{order:3;flex-basis:100%}
  .search{flex:1 1 12rem}
  .counts-line .seg{width:100%}
  .counts-line .seg>button{flex:1;justify-content:center}
  .split,.split-ot{display:flex;flex-direction:column}
  .split>.panel{flex:none}
  /* Sign in / out: no scrolling; the slip takes what it needs and the pad fills the rest */
  #s-sign .split{overflow:hidden}
  #s-sign .pad-panel{flex:1 1 auto;min-height:0}
  #s-sign .pad{min-height:10rem}
  .slip,.ot-list-panel{overflow:visible}
  .ot-list{max-height:16rem}
  .pad{min-height:16rem}
  .login-screen{flex-direction:column}
  .login-side{flex:none;flex-direction:row;justify-content:space-between;padding:1.25rem var(--gutter);gap:1rem}
  .login-logo{width:10rem}
  .login-clock{font-size:2.5rem;margin:0}
  .login-date{display:none}
}
/* ============ Phone: 640px and below ============ */
@media (max-width:640px){
  :root{--gutter:1rem}
  .bar-logo{width:5.5rem}
  .bar-title{border-left:0;padding-left:0}
  .bar-title span{display:none}
  .clock{font-size:1.375rem}
  .bar-sub .bar-right .bar-date{display:none}
  .person{font-size:2.25rem}
  .panel{padding:1.25rem}
  /* Register: footer goes, its buttons sit in the header, so more people fit */
  #s-home .foot{display:none}
  .bar-actions{display:inline-flex;gap:.5rem;align-self:center}
  .bar-right{align-items:center;gap:.6rem}
  .bar-title{display:none}
  .bar{padding:.5rem var(--gutter);min-height:3.5rem}
  .toolbar{padding:.5rem var(--gutter);gap:.5rem}
  .week-nav{gap:.4rem}
  .week-label b{font-size:1.125rem}
  .week-label span{font-size:.75rem}
  .search{min-width:0;flex:1 1 7rem}
  .reg-body{padding:.6rem var(--gutter) .6rem;gap:.6rem}
  .counts{gap:.2rem .9rem}
  .count{font-size:.8125rem;gap:.3rem}
  .count b{font-size:1.0625rem}
  .counts-line{gap:.5rem}
  /* One line per person: name on the left, today's button on the right. The week strip is on the slip. */
  .li{grid-template-columns:minmax(0,1fr) 8.5rem;padding:.55rem .85rem;gap:.3rem .75rem}
  .li .week-strip{display:none}
  .li .li-ot{font-size:.75rem}
  .li .today-slot .cell{min-height:2.75rem}
  .li .nm{font-size:.9375rem}
  .li .nm-sub{font-size:.75rem}
  .login-form .display{font-size:2.25rem}
  .week-label{min-width:6rem}
  .split-ot .actions{flex-wrap:wrap}
  .split-ot .actions .btn{flex:1 1 100%}
  .status-grid{grid-template-columns:1fr}
  .status-btn:nth-child(odd){border-right:0}
  .legend{display:none} /* every code already shows its word */
}

/* Sign in / out on phones: everything on one screen, no scrolling. The pad takes the space left. */
@media (max-width:640px){
  #s-sign .split{overflow:hidden;gap:.6rem;padding:.6rem var(--gutter)}
  #s-sign .slip{padding:.85rem 1rem;gap:.4rem}
  #s-sign .slip .emp{font-size:.8125rem}
  #s-sign .person{font-size:1.75rem;margin:0}
  #s-sign .facts .row{padding:.35rem 0}
  #s-sign .facts dd{font-size:1rem}
  #s-sign .facts .row.now dd,#s-sign .facts .row.ot dd{font-size:1.125rem}
  #s-sign .facts .row.ot p{font-size:.75rem}
  #s-sign .msg p{font-size:.8125rem;padding:.35rem .6rem}
  #s-sign .slip .kicker.small,#s-sign #weekMini{display:none}
  #s-sign .pad-panel{flex:1 1 auto;min-height:0;padding:.85rem 1rem;gap:.55rem}
  #s-sign .panel-head span{display:none}
  #s-sign .section{font-size:1.125rem}
  #s-sign .pad{min-height:9rem}
  #s-sign .pad-line{bottom:2.6rem}
  #s-sign .pad-name{bottom:.8rem}
  #s-sign .consent{font-size:.75rem}
  #s-sign .actions{gap:.6rem}
  #s-sign .actions .btn{min-height:3.25rem;font-size:.9375rem}
  #s-sign .actions .btn-line{flex:1}
  #s-sign .actions .btn-primary{flex:2.4;padding:0 .9rem}
  #s-sign .bar-sub .btn-onbar{padding:0 .8rem}
}


/* ============ Zoom and large text ============
   Whatever the zoom (browser zoom, Samsung screen zoom, Android text size), every screen fits
   the width: nothing is cut off and nothing drags sideways. Only the department tabs and the
   weekly table scroll sideways, by design. When a screen is taller than the display, it scrolls. */

/* Header bars wrap instead of overflowing */
.bar{flex-wrap:wrap;row-gap:.4rem}
.bar-actions{flex-wrap:wrap;justify-content:flex-end;max-width:100%;row-gap:.4rem}
.bar-right{flex-wrap:wrap;justify-content:flex-end;margin-left:auto;row-gap:.4rem}
.clock{white-space:nowrap}

/* Register: the list keeps a usable height; if the screen is shorter, the whole screen scrolls */
/* Fills the space left and the list scrolls inside it, so the header and bottom bar stay on screen
   with any number of staff. When zoomed in too far, it keeps at least 22rem and the screen scrolls. */
.reg-body{flex:1 1 0;min-height:min(22rem,100%)}
#s-home{min-height:0}
.toolbar{flex-wrap:wrap;row-gap:.6rem}
.search{flex:1 1 11rem;min-width:min(11rem,100%)}
.foot{flex-wrap:wrap;row-gap:.5rem}
.login-foot{flex-wrap:wrap}
.login-screen{overflow-y:auto}
.login-side{flex-wrap:wrap}

/* List rows: when the row gets too narrow for name and button side by side, the button goes underneath */
.reg-list{container-type:inline-size}
@container (max-width:21rem){
  .li{grid-template-columns:minmax(0,1fr)}
}

/* Slips and panels: rows and buttons wrap; the panel area scrolls if it can't fit */
.facts .row{flex-wrap:wrap;column-gap:1rem;row-gap:.15rem}
.panel-head,.sheet-head,.ot-list-head,.total-row,.ot-item{flex-wrap:wrap}
.person,.ot-when,.emp{overflow-wrap:anywhere}
.actions{flex-wrap:wrap}
.actions .btn-line,.actions .btn-danger{flex:1 1 6rem}
.actions .btn-primary{flex:2 1 11rem}
.seg-rate{grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));gap:1px;background:var(--ink)}
.seg-rate>button+button{border-left:0}
.seg-rate>button{background:var(--paper)}
.seg-rate>button.on{background:var(--ink)}
.status-grid{grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr));gap:1px;background:var(--rule)}
.status-btn{background:var(--paper);border:0}
.status-btn:nth-child(odd){border-right:0}
.status-btn.on{background:var(--ink)}

/* Mode buttons: side by side when they fit, otherwise they wrap onto more lines (never cut off) */
.counts-line .seg{display:flex;flex-wrap:wrap;gap:1px;background:var(--ink)}
.counts-line .seg>button{flex:1 1 auto;white-space:nowrap;background:var(--paper)} /* labels stay on one line; whole buttons wrap if space runs out */
.counts-line .seg>button.on{background:var(--ink)}
.counts-line .seg>button+button{border-left:0}
/* Name under the signature line stays on one line, so it never covers the line */
.pad-name{right:1.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Thank-you screen: centred when it fits, scrolls from the top when it doesn't */
.done{justify-content:flex-start}
.done-panel{margin:auto}

.week-nav{flex:0 1 auto;min-width:0;flex-wrap:wrap;row-gap:.4rem}
.week-label{min-width:0;flex:0 1 auto}
.week-label b,.week-label span{overflow-wrap:anywhere}
@media (max-width:860px){
  #s-sign .split{overflow-y:auto}
}
@media (max-width:640px){
  .bar-logo{width:min(5.5rem,30vw)}
  #s-sign .split{overflow-y:auto}
  #s-sign .actions .btn-line{flex:1 1 6rem}
  #s-sign .actions .btn-primary{flex:2.4 1 11rem}
  .bar-sub{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem}
  .bar-center{flex:1 1 auto;text-align:center}
}
/* Very narrow (zoomed in): the time is on the phone's status bar, so the header clocks go */
@media (max-width:480px){
  #clock2,#clock3,#clock4,#signSub,#otWho,#stmtWho{display:none}
}
@media (max-width:360px){
  #clock{display:none}
  .week-label{min-width:0}
}

/* ============ Attendance statement (HR) ============ */
select{font:inherit;font-size:1rem;width:100%;min-height:var(--tap);padding:0 .8rem;background:var(--paper);color:var(--ink);
  border:1px solid var(--muted-2);border-radius:var(--radius)}
select:focus{outline:none;border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.stmt-body{flex:1 0 auto;display:flex;flex-direction:column;gap:1rem;padding:1.25rem var(--gutter)}
.stmt-filters{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:1rem;padding:1.25rem}
.stmt-field{flex:1 1 10rem;min-width:min(10rem,100%)}
.stmt-field input{min-height:var(--tap);font-size:1rem}
.stmt-go{flex:1 1 12rem;min-height:var(--tap)}
.stmt-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.stmt-summary{margin-right:auto;color:var(--muted)}
.stmt-doc{display:flex;flex-direction:column;gap:1.5rem}
.stmt-doc:empty{display:none}
.stmt-head{background:var(--paper);border:1px solid var(--ink);padding:1.25rem 1.5rem}
.stmt-title{font-size:2rem;margin:.3rem 0 .4rem}
.stmt-period{margin:0;font-weight:600}
.stmt-made{margin:.4rem 0 0;font-size:.875rem;color:var(--muted)}
.stmt-person{background:var(--paper);border:1px solid var(--ink);padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:.5rem}
.stmt-meta,.stmt-none{margin:0;font-size:.875rem;color:var(--muted)}
.stmt-table-wrap{overflow-x:auto}
.stmt-table{width:100%;border-collapse:collapse;font-size:.875rem}
.stmt-table th{text-align:left;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  border-bottom:1px solid var(--ink);padding:.4rem .5rem}
.stmt-table td{border-bottom:1px solid var(--rule);padding:.35rem .5rem;vertical-align:middle}
.stmt-table td.mono{font-family:var(--mono);white-space:nowrap}
.stmt-table td.nowrap{white-space:nowrap}
.stmt-table tr.is-missing td{color:var(--muted-2)}
.stmt-table .word{display:inline-flex;align-items:center;gap:.4rem}
.stmt-by{display:block;font-size:.75rem;color:var(--muted)}
.stmt-corr{font-size:.75rem;color:var(--amber-ink)}
.stmt-sigs{white-space:nowrap}
.stmt-sig{height:2.2rem;width:auto;max-width:6rem;background:#fff;border:1px solid var(--rule);margin-right:.3rem;vertical-align:middle}
.stmt-totals{margin:.3rem 0 0;padding-top:.5rem;border-top:3px double var(--ink);font-weight:600;font-size:.9375rem}

/* Printing (or saving as PDF) shows only the statement, on white paper, signatures included */
@media print{
  @page{margin:12mm}
  html,body{height:auto;overflow:visible;background:#fff;color:#000}
  .screen:not(#s-stmt),.sheet-backdrop,.zoom-badge{display:none !important}
  #s-stmt{position:static;display:block !important;overflow:visible;background:#fff}
  #s-stmt .bar,.stmt-filters,.stmt-actions,#stmtMsg{display:none !important}
  .stmt-body{padding:0}
  .stmt-head,.stmt-person{border:0;padding:0;background:#fff}
  .stmt-person{break-inside:auto;margin-top:6mm}
  .stmt-person h3{break-after:avoid}
  .stmt-table tr{break-inside:avoid}
  .stmt-table-wrap{overflow:visible}
  .stmt-table{font-size:9pt}
  .stmt-sig{height:9mm;border-color:#999}
  :root{--ink:#000;--muted:#333;--muted-2:#555;--rule:#bbb;--paper:#fff}
}