/* ===========================================================================
   MUSTER — the theme.

   This is the only application in the suite designed against a physical
   constraint rather than a person's taste: it is used outdoors, at eleven in
   the morning, on a worksite, by somebody holding a phone in one hand.

   Everything follows from that.

   - MAXIMUM CONTRAST, not fashionable contrast. Near-black ground and a
     saturated amber, which is the pair that survives direct sun on a cheap
     LCD at half brightness. Mid-greys are avoided entirely: in sunlight a
     mid-grey label simply is not there.
   - NOTHING SMALLER THAN 17px, and the numbers are much larger. A 13px label
     is unreadable at arm's length in bright light even for someone with
     perfect sight.
   - TARGETS ARE 64px, not 44. A supervisor's thumb, sometimes through a work
     glove, sometimes wet. The standard minimum is for a person sitting down
     indoors.
   - NO HOVER STATES AND NO FINE HAIRLINES. There is no cursor, and a 1px
     line at arm's length in sun is a smudge. Separation is done with space
     and with 3px rules.
   - THE ACTION IS AT THE BOTTOM. The top of a 6" phone cannot be reached
     with the hand that is holding it.
   =========================================================================== */
:root{
  --bg:#0B0C0E;
  --card:#17191D;
  --card-2:#20242A;
  --line:#33383F;
  --ink:#FFFFFF;
  --ink-2:#C9D0D8;
  --amber:#FFB300;
  --amber-d:#C98A00;
  --green:#22C55E;
  --red:#FF4A4A;
  --blue:#38BDF8;
  --ui:var(--f-text);
  --mono:var(--f-data);
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;background:#05060700;color:var(--ink);
  font:17px/1.5 var(--ui);-webkit-font-smoothing:antialiased;
  background:radial-gradient(90% 70% at 50% 0%,#1A1D22,#0A0B0D 70%);
  display:flex;flex-direction:column;align-items:center;
}
button{font:inherit;color:inherit}

/* ------------------------------------------------------------- the handset
   A device frame, because the whole argument of this application is about
   the conditions it is used in, and a full-width browser window makes that
   argument impossible to see. */
.stage{
  flex:1;display:flex;gap:44px;align-items:flex-start;justify-content:center;
  padding:28px 22px 44px;flex-wrap:wrap;width:100%;max-width:1200px;
}
.device{
  width:392px;flex:none;border-radius:38px;padding:11px;background:#25282D;
  box-shadow:0 0 0 1.5px #3A3E45,0 30px 70px rgba(0,0,0,.6);
}
.screen{
  border-radius:29px;overflow:hidden;background:var(--bg);height:742px;
  display:flex;flex-direction:column;position:relative;
}
.statusbar{
  flex:none;display:flex;align-items:center;gap:8px;padding:11px 20px 7px;
  font:600 13px var(--ui);color:var(--ink-2);
}
.statusbar .r{margin-left:auto;display:flex;gap:7px;align-items:center}
.statusbar svg{width:15px;height:15px;fill:currentColor}

/* ------------------------------------------------------------------- head */
.top{flex:none;padding:5px 20px 14px;border-bottom:3px solid var(--line)}
.top h1{margin:0;font-size:25px;font-weight:700;letter-spacing:-.025em}
.top p{margin:4px 0 0;font-size:15px;color:var(--ink-2)}
.top .row2{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.tag{
  font:700 13px var(--ui);padding:6px 11px;border-radius:6px;
  background:var(--card-2);color:var(--ink-2);
}
.tag.ok{background:rgba(34,197,94,.18);color:var(--green)}
.tag.off{background:rgba(255,179,0,.18);color:var(--amber)}

/* ------------------------------------------------------------------- body */
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pad{padding:14px 16px 20px}

/* a worker row: nothing but a big name, a big state and a 64px target */
.w{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--card);border:0;border-left:5px solid transparent;
  border-radius:12px;padding:13px 15px;margin-bottom:10px;min-height:76px;
  cursor:pointer;
}
.w:active{background:var(--card-2)}
.w.in{border-left-color:var(--green)}
.w.out{border-left-color:var(--line)}
.w.flag{border-left-color:var(--red)}
.w .nm{flex:1;min-width:0}
.w .nm b{display:block;font-size:19px;font-weight:650;letter-spacing:-.01em}
.w .nm span{display:block;font-size:14.5px;color:var(--ink-2);margin-top:2px}
.w .st{
  flex:none;width:64px;height:64px;border-radius:14px;display:grid;
  place-items:center;background:var(--card-2);
}
.w .st svg{width:30px;height:30px;fill:none;stroke:var(--ink-2);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.w.in .st{background:rgba(34,197,94,.2)}
.w.in .st svg{stroke:var(--green)}
.w.flag .st{background:rgba(255,74,74,.2)}
.w.flag .st svg{stroke:var(--red)}
.w .warn{
  display:block;font-size:14px;color:var(--red);font-weight:600;margin-top:4px;
  line-height:1.4;
}

/* --------------------------------------------------------------- the sheet
   The mark-attendance panel. Slides from the bottom because that is where
   the thumb is. */
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:20}
.sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:21;background:var(--card);
  border-radius:22px 22px 0 0;padding:20px 18px 18px;max-height:90%;
  overflow-y:auto;animation:up .22s cubic-bezier(.2,0,.2,1);
}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* The sheet covers most of a 392px screen, so there is barely any scrim left
   to tap. On a phone the handle is what the thumb goes for, so it is a real
   control: 44px of hit area around a 5px bar. */
.sheet .grab{
  display:block;width:96px;height:34px;padding:0;border:0;background:none;
  margin:-8px auto 10px;cursor:pointer;position:relative;
}
.sheet .grab::after{
  content:"";position:absolute;left:50%;top:50%;width:46px;height:5px;
  margin:-2.5px 0 0 -23px;border-radius:3px;background:var(--line);
}
.sheet .grab:active::after{background:var(--ink-2)}
.sheet h2{margin:0 0 3px;font-size:23px;font-weight:700;letter-spacing:-.02em}
.sheet .sub{margin:0 0 16px;font-size:15px;color:var(--ink-2)}
.shot{
  height:150px;border-radius:12px;background:linear-gradient(160deg,#2B3138,#171A1E);
  display:grid;place-items:center;margin-bottom:14px;position:relative;
  overflow:hidden;border:2px solid var(--line);
}
.shot .ph{font-size:15px;color:var(--ink-2);text-align:center;line-height:1.5;
  padding:0 20px}
.shot svg{width:34px;height:34px;stroke:var(--ink-2);fill:none;stroke-width:2;
  margin-bottom:8px}
.shot.has{background:linear-gradient(160deg,#3D4A34,#22281E)}
.shot .stamp{
  position:absolute;left:0;right:0;bottom:0;padding:8px 11px;
  background:rgba(0,0,0,.72);font:600 13px var(--mono);color:var(--amber);
  line-height:1.45;
}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:15.5px;
  margin-bottom:16px}
.kv dt{color:var(--ink-2)}
.kv dd{margin:0;font-weight:600}
.kv dd.mono{font-family:var(--mono);font-size:14.5px}
.big{
  width:100%;min-height:64px;border:0;border-radius:14px;font:700 19px var(--ui);
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:11px;
  margin-bottom:10px;letter-spacing:-.01em;
}
.big svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.big.go{background:var(--amber);color:#111}
.big.go:active{background:var(--amber-d)}
.big.gh{background:var(--card-2);color:var(--ink)}
.big.dang{background:rgba(255,74,74,.16);color:var(--red)}
.big:disabled{background:var(--card-2);color:#6B737C;cursor:default}

.alert{
  display:flex;gap:12px;padding:14px;border-radius:12px;margin-bottom:14px;
  background:rgba(255,74,74,.13);border-left:5px solid var(--red);
}
.alert svg{width:26px;height:26px;flex:none;stroke:var(--red);fill:none;stroke-width:2.4}
.alert b{display:block;font-size:16.5px;margin-bottom:3px}
.alert span{font-size:14.5px;color:var(--ink-2);line-height:1.45;display:block}

/* ------------------------------------------------------------- bottom bar */
.bottom{
  flex:none;border-top:3px solid var(--line);padding:12px 16px 18px;
  background:var(--card);
}
.bottom .sum{display:flex;gap:14px;margin-bottom:11px}
.bottom .sum div{flex:1;text-align:center}
.bottom .sum b{display:block;font:700 27px/1 var(--mono);letter-spacing:-.03em}
.bottom .sum span{font-size:13px;color:var(--ink-2);display:block;margin-top:4px}
.bottom .sum .g b{color:var(--green)}
.bottom .sum .a b{color:var(--amber)}

/* ------------------------------------------------------------- the aside */
.notes{flex:1;min-width:290px;max-width:430px;padding-top:12px}
.notes h2{margin:0 0 6px;font-size:23px;font-weight:700;letter-spacing:-.025em}
.notes .lede{margin:0 0 20px;font-size:16px;color:var(--ink-2);line-height:1.6}
.nb{border-left:3px solid var(--amber);padding:2px 0 2px 15px;margin-bottom:19px}
.nb h3{margin:0 0 5px;font-size:16.5px;font-weight:650}
.nb p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.nb code{font-family:var(--mono);font-size:13.5px;background:var(--card);
  padding:1px 5px;border-radius:4px;color:var(--amber)}

@media(max-width:900px){
  .stage{gap:26px;padding:18px 14px 36px}
  .device{width:min(392px,100%)}
  .notes{max-width:none;min-width:0}
}
@media(max-width:430px){
  .device{padding:0;border-radius:0;box-shadow:none;background:none;width:100%}
  .screen{border-radius:0;height:auto;min-height:calc(100vh - 44px)}
}
@media(prefers-reduced-motion:reduce){.sheet{animation:none}}