:root{
  /* Layout: one phone-width column. Big-title header, a soft green "this month" card, a calendar card, then the day's work as time cards.
     Look: green-tinted page, white cards with a hairline edge, green only on main buttons, picked choices and icons. Status = coloured dot + word. */
  --bg:#EAF0EC;
  --card:#FFFFFF;
  --card-2:#EFF4F1;
  --ink:#13201B;
  --muted:#5F6C67;
  --hair:#DCE4DF;
  --line:#D9DFDB;
  --accent:#0B6E4F;
  --accent-ink:#FFFFFF;
  --accent-soft:#DDF0E7;
  --warn:#9A5405;
  --warn-soft:#FBEBD5;
  --bad:#B42318;
  --bad-ink:#FFFFFF;
  --bad-soft:#FCE4E0;
  --scrim:rgb(10 20 16 / .45);
  --shadow:0 0 0 1px var(--hair),0 1px 3px rgb(16 32 26 / .05);
  --display:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang HK","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang HK","Noto Sans TC","Microsoft JhengHei",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1311; --card:#161E1B; --card-2:#1D2723; --ink:#E5ECE8; --muted:#98A6A0; --hair:#27322E; --line:#34413B;
    --accent:#3DBE95; --accent-ink:#04241A; --accent-soft:#143A2E;
    --warn:#EDA54F; --warn-soft:#3A2A12; --bad:#F1877C; --bad-ink:#2A0D0A; --bad-soft:#3D1D1A;
    --scrim:rgb(0 0 0 / .62);
    --shadow:0 0 0 1px var(--hair); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1311; --card:#161E1B; --card-2:#1D2723; --ink:#E5ECE8; --muted:#98A6A0; --hair:#27322E; --line:#34413B;
  --accent:#3DBE95; --accent-ink:#04241A; --accent-soft:#143A2E;
  --warn:#EDA54F; --warn-soft:#3A2A12; --bad:#F1877C; --bad-ink:#2A0D0A; --bad-soft:#3D1D1A;
  --scrim:rgb(0 0 0 / .62);
  --shadow:0 0 0 1px var(--hair); color-scheme:dark;
}
/* Design kit: every text size, weight, corner and gap on the page comes from here.
   Text: xs 12 (caps, tags, tab names) / sm 14 (grey lines, labels, small buttons) / md 16 (body, buttons, inputs)
         lg 20 (card and pop-up titles) / xl 28 (page titles, medium numbers) / num 48 (the one big number on a screen).
   Weight: 400 or 700 only. Corners: sm 8 (inside a group) / md 12 (buttons, boxes, choices) / lg 20 (cards, pop-ups) / round.
   Gaps and padding: 0 1 2 4 8 12 16 20 24 32 40 48 56 only. Colours: the tokens above only.
   Need something new? Ask Ariel first, then add it here. */
:root{
  --fs-xs:12px;--fs-sm:14px;--fs-md:16px;--fs-lg:20px;--fs-xl:28px;--fs-num:48px;
  --r-sm:8px;--r-md:12px;--r-lg:20px;--r-round:999px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--fs-md);line-height:1.45;-webkit-tap-highlight-color:transparent}
body.locked{overflow:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
/* One edge: --g is the space beside cards, --cp the padding inside them. Page titles start on the cards' outer edge. */
:root{--g:16px;--cp:16px}
@media (max-width:359px){:root{--g:12px;--cp:12px}}
.wrap{max-width:560px;margin-inline:auto;padding-left:max(var(--g),env(safe-area-inset-left,0px));padding-right:max(var(--g),env(safe-area-inset-right,0px))}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
h1,h2,h3{font-family:var(--display);font-weight:700;text-wrap:balance;margin:0;line-height:1.15}
p{margin:0}
.i{flex:none;display:block}
.label{font-size:var(--fs-sm);font-weight:400;color:var(--muted)}
/* Section label above each block: small capitals on the left, a number or buttons on the right */
.blk{display:flex;flex-direction:column;gap:8px;min-width:0}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg)}
.top .wrap{display:flex;align-items:center;gap:12px;padding-block:16px 12px}
.ttl{flex:1;min-width:0}
.mebtn{margin-right:calc(var(--cp) - 6px)}
.ttl small{display:block;font-size:var(--fs-sm);color:var(--muted);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttl h1{font-size:var(--fs-xl);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mebtn{border:0;background:none;padding:0;cursor:pointer;border-radius:50%;flex:none}
main.wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding-block:8px 40px}
main.wrap.withbar{padding-bottom:calc(116px + env(safe-area-inset-bottom,0px))}

.av{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:var(--fs-sm);background:var(--accent-soft);color:var(--accent)}
.av.lg{width:56px;height:56px;font-size:var(--fs-md)}

/* Buttons and chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-md);border:0;background:var(--card-2);color:var(--ink);font-weight:700;font-size:var(--fs-md);padding:12px 16px;min-height:48px;cursor:pointer}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.danger{background:var(--bad);color:var(--bad-ink)}
.btn.quiet{background:transparent;color:var(--bad);min-height:48px}
.btn.line{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--hair)}
.btn.sm{min-height:40px;padding:8px 16px;font-size:var(--fs-sm);border-radius:var(--r-md)}
.btn.full{width:100%}
.btn.big{min-height:56px;font-size:var(--fs-md);border-radius:var(--r-md)}
.btn:disabled{opacity:.4;cursor:not-allowed}
/* A main button that can't be pressed yet stays outlined, so it doesn't look broken. */
.btn.primary:disabled{opacity:1;background:var(--hair);color:color-mix(in srgb,var(--muted) 70%,transparent);box-shadow:none}
.iconbtn{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--card);box-shadow:var(--shadow);color:var(--ink);display:grid;place-items:center;cursor:pointer}
/* Calendar */
.card{background:var(--card);border-radius:var(--r-lg);padding:16px calc(var(--cp) - 8px) 12px;box-shadow:var(--shadow)}
.wd{font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:center;padding:0 0 8px}
/* Month name and arrows inside the calendar card */
.mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 0 12px 8px}
.mhead b{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em}
.mhead .arr{display:flex;gap:2px}
.mbtn{width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--accent);display:grid;place-items:center;cursor:pointer}
.mbtn:hover{background:var(--card-2)}
.mbtn:disabled{color:var(--hair);background:none;cursor:default}
.cd{border:0;background:transparent;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:var(--ink);padding:0}
.cd span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:400;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.cd:disabled{color:color-mix(in srgb,var(--muted) 35%,transparent);cursor:default}
.cd.today span{color:var(--accent);font-weight:700}
.cd.sel span{background:var(--accent);color:var(--accent-ink);font-weight:700}
/* Week grid (Calendar tab): ‹ week › on a top line the same height as the day card's title, so both cards line up;
   then weekdays and dates, then one row per person with a box of time worked per day. */
.card.wk{padding:0 0 calc(var(--cp) - 8px)}
.wkhd{display:flex;align-items:center;justify-content:center;gap:4px;padding:16px var(--cp) 12px;border-bottom:1px solid var(--hair)}
.wkhd b{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;text-align:center}
.wkhd .mbtn{flex:none;margin-block:-8px}
.wkg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:12px calc(var(--cp) - 8px) 0}
.wkg.team{grid-template-columns:auto repeat(7,minmax(0,1fr))}
.wkr{display:contents}
.wkr+.wkr>*{border-top:1px solid var(--hair)}
.wkwho{display:grid;place-items:center;padding-right:4px}
.wkc{border:0;background:none;color:var(--ink);font:inherit;padding:8px 4px;min-height:56px;display:grid;place-items:center;cursor:pointer;min-width:0}
span.wkc{cursor:default}
.wkc b{width:100%;max-width:56px;min-height:40px;border-radius:var(--r-sm);background:var(--accent-soft);padding:4px 0;display:grid;align-content:center;justify-items:center;font-size:var(--fs-xs);font-weight:400;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap}
.wkc b.w{background:var(--warn-soft);color:var(--warn);font-weight:700}
.wkc.sel b{box-shadow:inset 0 0 0 1.5px var(--accent)}
@media (hover:hover){.wkc:hover b{box-shadow:inset 0 0 0 1.5px var(--accent)}}
@media (max-width:359px){.wkc{padding-inline:2px}.wkwho{padding-right:2px}}
.wkg .emptyday{grid-column:1/-1;background:none;box-shadow:none;border-radius:0;padding:12px 8px}
.backnote{display:flex;gap:8px;align-items:center;background:var(--bad-soft);color:var(--bad);border-radius:var(--r-md);padding:8px 12px;font-size:var(--fs-sm);overflow-wrap:anywhere}
.emptyday{display:flex;align-items:center;gap:12px;color:var(--muted);background:var(--card);border-radius:var(--r-lg);padding:16px var(--cp);box-shadow:var(--shadow);font-size:var(--fs-sm)}
.list .emptyday{background:none;box-shadow:none;border-radius:0}
.alert{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:var(--bad-soft);color:var(--bad);border-radius:var(--r-md);padding:16px 16px;cursor:pointer;font-size:var(--fs-md)}
.alert span{flex:1}
.addhand{display:flex;align-items:center;gap:8px;width:100%;min-height:52px;margin-top:auto;border:0;border-top:1px solid var(--hair);background:transparent;color:var(--accent);font:inherit;font-weight:700;font-size:var(--fs-md);border-radius:0 0 var(--r-lg) var(--r-lg);padding:0 var(--cp);cursor:pointer;text-align:left}
.addhand:hover{background:var(--card-2)}
/* Only the last button in a card gets the card's round bottom corners. */
.list .addhand:not(:last-child){border-radius:0}
/* Show more and Show less side by side at the bottom of a long list. */
.morebar{display:flex;margin-top:auto}.morebar .addhand{flex:1;margin-top:0;border-radius:0}.morebar .addhand+.addhand{border-left:1px solid var(--hair)}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--card);border-top:1px solid var(--hair);padding-bottom:env(safe-area-inset-bottom,0px)}
/* While typing on a phone the keyboard is up: hide the tab bar so it doesn't ride on top of the keyboard. */
@media (pointer:coarse){.typing .tabbar{display:none}}
.tabbar .wrap{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.tabbar button{border:0;background:none;padding:8px 0 12px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:700;color:var(--muted);position:relative;cursor:pointer}
.tabbar button[aria-current="page"]{color:var(--accent)}

/* Pop-up: a sheet from the bottom on phones, a centred box on wider screens */
.modal{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center}
/* Animations only on .enter (the first draw), so redraws while it is open don't replay them. */
.scrim{position:absolute;inset:0;background:var(--scrim)}
.modal.enter .scrim{animation:fade .2s ease-out}
.modal.enter .panel{animation:rise .26s cubic-bezier(.2,.8,.2,1)}
.panel.grow{transition:height .26s cubic-bezier(.2,.8,.2,1)}
.panel{position:relative;width:100%;max-width:560px;max-height:calc(100% - 44px - env(safe-area-inset-top,0px));display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -10px 40px -10px var(--scrim)}
.panel.tall{height:calc(100% - 44px - env(safe-area-inset-top,0px))}
.grab{width:40px;height:5px;border-radius:var(--r-round);background:var(--hair);margin:8px auto 0;flex:none}
.panel-head{display:flex;align-items:center;gap:12px;padding:12px max(16px,env(safe-area-inset-right,0px)) 4px max(16px,env(safe-area-inset-left,0px))}
.panel-head h2{flex:1;min-width:0;font-size:var(--fs-xl);letter-spacing:-.01em;line-height:1.2}
.panel-head h2 small{display:block;margin-top:4px;font-size:var(--fs-sm);font-weight:400;letter-spacing:0;color:var(--muted)}
.panel-head .iconbtn{width:40px;height:40px;box-shadow:none;background:var(--card-2)}
.panel-body{flex:1;overflow-y:auto;overscroll-behavior:contain;display:grid;align-content:start;gap:12px;padding:4px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
.panel-foot{display:grid;gap:8px;padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));border-top:1px solid var(--hair)}
@media (min-width:640px){
  .modal{align-items:center;padding:24px}
  .panel,.panel.tall{border-radius:var(--r-lg);height:auto;max-height:min(780px,100%);box-shadow:0 30px 80px -20px var(--scrim)}
  .modal.enter .panel{animation:pop .2s ease-out}
  .grab{display:none}
  /* Computer: more room around and between the parts of a pop-up */
  .panel-head{padding:24px 24px 8px}
  .panel-body{padding:16px 24px 24px}
  .panel-foot{padding:24px}
  .panel .fsheet .label{margin-top:24px}
  .panel .fsheet>.label:first-child{margin-top:0}
}
@keyframes rise{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes pop{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Work form */
.segc{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));background:var(--card-2);border-radius:var(--r-md);padding:4px;gap:4px}
.segc button{border:0;background:transparent;border-radius:var(--r-sm);padding:0 4px;font-weight:700;font-size:var(--fs-sm);color:var(--ink);cursor:pointer;min-height:44px}
/* A picked choice looks the same everywhere: white, green text, green edge. */
.segc button[aria-pressed="true"]{background:var(--card);color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
/* Team switch sits on the page: a grey track with the picked side in white, kept quiet so the list below leads. */
.tsw{background:var(--hair)}
.tsw button[aria-pressed="true"]{color:var(--ink);box-shadow:var(--shadow)}
@media (max-width:399px){.places{grid-template-columns:1fr}}
.fsheet{display:flex;flex-direction:column;min-width:0}
.fsheet .label{display:block;margin:16px 0 8px}
.fsheet>.label:first-child{margin-top:0}
/* Start and Finish: two boxes side by side, tap either to change it. */
.tpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fsheet .tpair:not(:first-child){margin-top:16px}
.tbox{display:flex;flex-direction:column;gap:2px;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line);background:var(--card);padding:12px 16px;cursor:pointer;min-width:0}
.tbox span{font-size:var(--fs-sm);color:var(--muted)}
.tbox input{border:0;background:transparent;color:var(--ink);font:700 var(--fs-xl) var(--body);padding:0;min-height:34px;width:100%;min-width:0;font-variant-numeric:tabular-nums;text-align:left}
.tbox input:focus{outline:none;color:var(--accent)}
.tbox:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.tbox b{font:700 var(--fs-xl) var(--body);color:var(--muted);min-height:34px;line-height:34px}
.fsheet .hint{margin:12px 0 0;text-align:left}
.fsheet textarea.fin{margin-top:8px;resize:none}
.fsheet .fin+.fin{margin-top:8px}
.sites+.fin,.fin.ro+.fin{margin-top:8px}
.fin.ro{display:flex;align-items:center;gap:8px;background:var(--card-2);box-shadow:none}
.fin.ro.mute{color:var(--muted)}
.phere{margin-top:8px}
.srow{display:flex;gap:8px}.srow .fin{flex:1;min-width:0}.srow .btn:disabled{opacity:1;color:color-mix(in srgb,var(--muted) 70%,transparent)}
/* Safari puts a contact-card button inside name and address boxes; this app never fills them from Contacts */
input::-webkit-contacts-auto-fill-button{visibility:hidden;display:none!important;pointer-events:none}
.pfind,.pmap{margin-top:8px}
.pmap{margin-bottom:0;margin-left:0;margin-right:0;border-radius:var(--r-md);overflow:hidden;background:var(--card-2)}
.pmap img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover}
@media (min-width:640px){.pmap img{aspect-ratio:3/1}}   /* the wide pop-up gets a short map from Google, so "Is this the right place?" stays in view */
.pmap figcaption{display:grid;gap:2px;padding:12px 16px}
.pmap b{font-size:var(--fs-md);overflow-wrap:anywhere}
.pmap small{font-size:var(--fs-sm);color:var(--muted)}
.brkoth{display:grid;place-items:center;min-height:44px;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1.5px var(--accent);background:var(--card);min-width:0;color:var(--accent);cursor:text}
/* Typed minutes keep their unit: "40m", centred, on one baseline. The text is md so iPhone doesn't zoom in when typing,
   drawn at sm size (14/16) to match the other break choices. The box is exactly as wide as the digits typed (--d). */
.brkv{display:flex;align-items:baseline;transform:scale(.875);font:700 var(--fs-md)/1.2 var(--body)}
.brkoth input{width:calc(var(--d,1)*1ch);flex:none;min-width:1ch;padding:0;border:0;background:transparent;color:var(--accent);font:inherit;text-align:center;outline:none;box-shadow:none;border-radius:0}
.brkoth input:placeholder-shown{width:4ch}
.brkoth input:placeholder-shown+span{display:none}
.brkoth input::placeholder{color:var(--muted);font-weight:400;opacity:.7}
.brkoth:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.fin{width:100%;border:0;background:var(--card);color:var(--ink);border-radius:var(--r-md);padding:12px 16px;font:inherit;font-size:var(--fs-md);min-height:48px;box-shadow:inset 0 0 0 1px var(--line)}
.fin:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.fin.bad{box-shadow:inset 0 0 0 2px var(--bad)}
.fin::placeholder{color:var(--muted)}
textarea.fin{resize:vertical;min-height:72px}
.ferr{display:flex;gap:8px;align-items:center;color:var(--bad);background:var(--bad-soft);border-radius:var(--r-md);padding:12px 12px;font-size:var(--fs-sm);font-weight:700}
/* Pop-up warnings: one red line, under the wrong box (which turns red) or above the button; the pop-up never changes size */
.tbox.bad,.fsheet .fin.bad,.segc.bad,.sites.bad,.payfield.bad{box-shadow:inset 0 0 0 2px var(--bad)}
.tbox.bad span{color:var(--bad)}
.ferr-at{display:flex;gap:8px;align-items:center;margin:8px 0 0;color:var(--bad);font-size:var(--fs-sm);font-weight:700}
.ferr-at .i{flex:none}
.samebtn{justify-self:start;display:inline-flex;align-items:center;gap:8px;border:0;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:var(--fs-sm);border-radius:var(--r-md);min-height:40px;padding:8px 16px;cursor:pointer}
.payfield{display:flex;align-items:center;gap:8px;border-radius:var(--r-md);padding:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);cursor:text}
.payfield:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.payfield span{font:700 var(--fs-xl) var(--display);color:var(--muted)}
.payfield input{flex:1;width:0;min-width:0;border:0;background:transparent;font:700 var(--fs-xl) var(--display);color:var(--ink);padding:0;text-indent:.25px;min-height:34px;font-variant-numeric:tabular-nums}
/* Safari: after the HK$ label the first digit's left edge lands exactly on a screen pixel and draws flat; a quarter-pixel nudge keeps the 0 round on both sides. */
/* Safari on a computer at normal zoom drops the top hairline of bold 20px text (00:32 looks flat on top); a .375px nudge down keeps it whole. New bold 20px text goes in this list (the screen check flags it). */
.mhead b,.wkhd b,.lhead b,.dnum b,.delbox b,.list.nb .pn b,.list.nb .amt,.reqbox>b{transform:translateY(.375px)}
.payfield input:focus{outline:none}
.payfield input::placeholder{color:var(--muted);opacity:.4}
.cc-act{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cc-act .btn{white-space:nowrap}

/* Lists */
.list{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;width:100%;padding:16px var(--cp);border:0;background:none;text-align:left;cursor:pointer;color:var(--ink)}
.row+.row{border-top:1px solid var(--hair)}
/* Title row on top of every list card: same size as the calendar card title */
.lhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px var(--cp) 12px;border-bottom:1px solid var(--hair)}
.lhead b{min-width:0;font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em}
.lhead span{flex:none;font-weight:700;font-variant-numeric:tabular-nums}
.pn{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;line-height:1.3}
@media (max-width:359px){.list .row>.av{display:none}}
.pn small{font-size:var(--fs-sm);color:var(--muted)}
/* Long names stay on one line and end in "…" instead of wrapping. */
.pn b,.pn small,.lhead b,.pickline span,.sites b,.sites small,.segc button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amt{font-family:var(--display);font-weight:700;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.row > .i:last-child{color:var(--muted)}
div.row{cursor:default}
.row>.amt{flex:none}
@media (max-width:639px){.tm{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.2}.tm .tmd{display:none}}
.amt.g,.stats b.g{color:var(--accent)}
.pn small.w{color:var(--warn)}
/* Date on the left of a work row: day number over the weekday */
.dnum{flex:none;width:42px;display:grid;justify-items:center;line-height:1.2}
.dnum b{font:700 var(--fs-lg)/1.2 var(--display);font-variant-numeric:tabular-nums}
.dnum small{font-size:var(--fs-xs);color:var(--muted)}
/* Big numbers on top of a screen: 2 or 3 tiles, the number over a grey word */
.stats{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px;padding:0 8px 4px}
.stats>div{display:grid;gap:8px;min-width:0}
.stats b{font:700 var(--fs-xl)/1.1 var(--display);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stats span{font-size:var(--fs-sm);color:var(--muted)}
.mpaid{display:flex;align-items:center;gap:4px;min-height:48px;padding:0 0 0 8px}

.login{display:grid;align-content:center;min-height:100vh;min-height:100dvh;max-width:440px;padding-block:24px}
.lg-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:8px}
.lg-top h1{flex:1 1 auto;min-width:0;font-size:var(--fs-xl);letter-spacing:-.01em}
.login .logo{width:44px;height:44px;border-radius:var(--r-md);box-shadow:none}
@media (max-width:439px){.login .logo{display:none}}
.logo{width:60px;height:60px;border-radius:var(--r-md);background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;box-shadow:0 12px 24px -12px var(--accent)}
.login .intro{color:var(--muted);margin:8px 0 8px}
.langseg{display:inline-grid;background:var(--card-2);border-radius:var(--r-md);padding:4px;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.langseg button{border:0;background:transparent;border-radius:var(--r-sm);min-height:44px;padding:0 12px;font-weight:700;font-size:var(--fs-sm);color:var(--ink);cursor:pointer}
.langseg button[aria-pressed="true"]{background:var(--card);color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.me-card{display:flex;align-items:center;gap:12px;background:var(--card-2);border-radius:var(--r-md);padding:16px}
.me-card div{display:grid;line-height:1.3}
.me-card small{color:var(--muted);font-size:var(--fs-sm)}
.hint{font-size:var(--fs-sm);color:var(--muted);text-align:center}

/* Floating banner at the top for a few seconds: soft green when done, soft red for a problem that isn't about one box. */
.toast{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:30;pointer-events:none;display:flex;align-items:center;gap:8px;width:min(520px,calc(100% - 32px));background:var(--accent-soft);color:var(--accent);padding:12px 16px;border-radius:var(--r-md);font-size:var(--fs-md);font-weight:700;box-shadow:0 14px 30px -12px var(--scrim);animation:drop .22s ease-out}
.toast .i{flex:none}
.toast.bad{background:var(--bad-soft);color:var(--bad)}
.toast.warn{background:var(--warn-soft);color:var(--warn)}
@keyframes drop{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
/* Computer: sidebar on the left; at 1100px and wider, two columns. Same rows and buttons as the phone. */
.sgrid{display:grid;gap:24px;min-width:0}
.stack{display:grid;gap:24px;align-content:start;min-width:0}
/* Person page: on phone the left column opens up so Profile can sit under the work list. */
@media (max-width:1099px){.stack.pleft{display:contents}.pleft>.blk+.blk{order:1}}
@media (min-width:720px) and (min-height:500px){
  /* Sign-in on a computer: as wide as the pop-ups, with more room inside */
  .login{max-width:560px}
  .lgbox{gap:16px;padding:40px}
  .login .logo{width:56px;height:56px}
  .desk{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
  .side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;padding:24px 16px 16px;background:var(--card);border-right:1px solid var(--hair)}
  .brand{display:flex;align-items:center;gap:12px;padding:0 8px 20px;font-family:var(--display);font-weight:700;font-size:var(--fs-md);line-height:1.2}
  .logo.sm{flex:none;width:38px;height:38px;border-radius:var(--r-md);box-shadow:none}
  .side nav{display:grid;gap:4px}
  .nitem{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;border-radius:var(--r-md);padding:12px 12px;font-weight:700;font-size:var(--fs-md);color:var(--muted);cursor:pointer;text-align:left}
  .nitem:hover{background:var(--card-2);color:var(--ink)}
  .nitem[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
  .side-foot{margin-top:auto;display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--hair)}
  .me-row{display:flex;align-items:center;gap:12px;min-width:0;width:100%;border:0;background:none;border-radius:var(--r-md);padding:8px;cursor:pointer;text-align:left;color:var(--ink)}
  .me-row:hover{background:var(--card-2)}
  .me-row>.i{margin-left:auto;color:var(--muted)}
  .me-row div{display:grid;line-height:1.3;min-width:0}
  .me-row b{overflow-wrap:anywhere;line-height:1.25}
  .me-row small{color:var(--muted);font-size:var(--fs-sm)}
  .desk{--g:0px;--cp:20px}
  .dmain{width:100%;max-width:1080px;margin-inline:auto;padding:24px 56px 56px;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-content:start}
  .dhead{position:relative;display:flex;align-items:center;gap:16px;min-height:60px}
  /* Back arrow hangs left of the title, so the title still lines up with the cards */
  .dhead>.iconbtn{position:absolute;right:calc(100% + 12px)}
  .dhead .ttl h1{font-size:var(--fs-xl)}
  /* Team: one centred column, People | Places switch beside the title */
  .dmain.one{max-width:720px}
  .dhead .tsw{margin-left:auto;display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .dhead .tsw button{padding:0 24px}
}
@media (min-width:720px) and (min-height:500px) and (max-width:1099px){
  .desk{grid-template-columns:208px minmax(0,1fr)}
  .dmain{max-width:720px;padding:24px 56px 48px}
}
@media (min-width:1100px){
  /* Two equal columns (Clock: now | today, Calendar: month | day); each card ends after its last row */
  .sgrid,.ckgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
  .card.mon{display:flex;flex-direction:column}
  .r{text-align:right;justify-self:end}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
/* Clock tab: one centred card (status, big time, place · work line, Clock in or out), then today's work. */
.ckgrid{display:grid;gap:24px}
.ck{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px var(--cp) var(--cp);display:flex;flex-direction:column;gap:12px;min-width:0}
.pill{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--fs-sm);font-weight:700}
.pill i{width:8px;height:8px;border-radius:50%;background:currentColor}
.pill.on{color:var(--accent)}
.ck-big{padding:0 0 4px;display:grid;gap:8px}
.ck-big b{font:700 var(--fs-num)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;transform:translateY(.375px);clip-path:inset(-.25em .8em);margin-inline:-1.25em}
/* the bars bigNum() puts around the clock digits are trimmed off here; the negative side margins give the space back, so the digits sit where they did */
.ck-big small{color:var(--muted);font-size:var(--fs-md)}
.ck label.label{margin-top:8px}
.ck.ctr{align-items:center;text-align:center;padding-block:24px var(--cp)}
.ck.ctr .btn{align-self:stretch}
/* Place · work under the big time; tap to change it */
.pickline{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-height:44px;border:0;background:none;border-radius:var(--r-md);padding:8px 12px;color:var(--accent);font-weight:700;font-size:var(--fs-md);cursor:pointer}
.pickline span{min-width:0}
.pk{display:inline-flex}
@media (max-width:639px){.pk{flex-direction:column;align-items:center}.pk .pkd{display:none}.pk span+span{font-weight:400}}
.pickline:hover{background:var(--card-2)}
.sites{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:4px;background:var(--card-2);border-radius:var(--r-md);padding:4px}
.sites button{border:0;border-radius:var(--r-sm);background:transparent;padding:8px 4px;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;min-width:0}
.sites b{max-width:100%;font-size:var(--fs-sm);line-height:1.2;text-align:center}
.sites small{max-width:100%;font-size:var(--fs-xs);color:var(--muted);line-height:1.2;text-align:center}
.sites button[aria-pressed="true"]{background:var(--card);color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.btn.wide{width:100%;min-height:56px;font-size:var(--fs-md);font-weight:700;margin-top:8px}
.linkbtn{border:0;background:none;color:var(--accent);font-weight:700;font-size:var(--fs-sm);padding:12px 4px;cursor:pointer;text-align:center}
.linkbtn:hover{text-decoration:underline}
.linkbtn.danger{color:var(--bad)}
/* Delete check: a small centred box over the edit pop-up */
.delpop{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px}
.delpop .scrim{animation:fade .15s ease-out}
.delbox{position:relative;width:min(340px,100%);display:grid;gap:8px;text-align:center;background:var(--card);border-radius:var(--r-lg);padding:24px 16px 16px;box-shadow:0 30px 80px -20px var(--scrim);animation:pop .18s ease-out}
.delbox b{font-size:var(--fs-lg)}
.delbox span{font-size:var(--fs-sm);color:var(--muted)}
.delbox .cc-act{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
/* Someone else's work (boss): rows straight on the pop-up, no card and no lines, bigger text */
.list.nb{background:none;box-shadow:none;border-radius:0;overflow:visible;display:grid;gap:20px;margin-top:12px}
.list.nb .row{padding:0;border-top:0}
.list.nb .pn{gap:4px}
.list.nb .pn b{font-size:var(--fs-lg)}
.list.nb .pn small{font-size:var(--fs-md)}
.list.nb .amt{font-size:var(--fs-lg)}
.list.nb+.fsheet{margin-top:24px}
/* A request: one green box says what is asked and why, like the "Change start time" button */
.reqbox{background:var(--accent-soft);border-radius:var(--r-md);padding:16px;display:grid;gap:8px;margin-top:12px}
.reqbox>b{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:var(--fs-lg)}
.reqbox>b .i{flex:none}
.reqbox>p{margin:0;font-size:var(--fs-md);overflow-wrap:anywhere}
.reqbox>small{color:var(--muted);font-size:var(--fs-sm)}
.reqbox+.list.nb{margin-top:24px}
/* Pay rate row: the HK$ box and the / hour | / job buttons are both 56px, as tall as the Save button, and line up top and bottom */
.tpair .payfield{padding:0 16px;align-self:center}
.tpair .payfield input{min-height:56px}
.tpair:has(.payfield) .segc button{min-height:56px}
/* "Pay rate" sits as close to its row as every other label sits to its box (8px, not 8 + 16) */
.fsheet .label+.tpair{margin-top:0}
/* The line under the pay rate row sits as close as a label sits to its box */
.fsheet .tpair:has(.payfield)+.hint{margin-top:8px}
/* A box to type in gets the same room from the title as from the buttons, so it doesn't crowd the title */
.delbox .fin{margin-top:12px}
/* Login */
.lgbox{display:grid;gap:12px;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px}
.lg-sent{color:var(--muted);overflow-wrap:anywhere}
.lg-sent b{color:var(--ink)}
.fin.code{font:700 var(--fs-xl) var(--display);letter-spacing:.3em;text-align:center}
.lg-alt{display:flex;justify-content:space-between;flex-wrap:wrap}
/* Waiting for the Google Sheet: a thin moving bar at the top. */
.ld{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:3px;z-index:40;overflow:hidden;pointer-events:none}
.ld::after{content:"";position:absolute;inset:0 auto 0 0;width:40%;background:var(--accent);animation:ld 1s ease-in-out infinite}
@keyframes ld{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
body.busy [data-act]{cursor:progress}
/* Small phones or big text: long names wrap. */
@media (max-width:359px){
  .ttl h1{white-space:normal;overflow-wrap:anywhere}
}
/* Waiting for a supervisor or the boss: the same note in orange. */
.backnote.w{background:var(--warn-soft);color:var(--warn)}
/* Clock times staff can't change on the spot: the same big boxes, filled grey, nothing to type in. "Change times" sits under them. */
.tbox.ro{background:var(--card-2);box-shadow:none;cursor:default}
.tbox.ro b{color:var(--ink)}
.fsheet .samebtn{align-self:flex-start;margin-top:8px}
.segc button:disabled{cursor:default}
.segc button:disabled:not([aria-pressed="true"]){color:var(--muted)}