/* Piryte Med Field Attendance — built for one hand, in sunlight, with gloves.
   Ink navy on paper white, pyrite-brass brand mark, unambiguous IN/OUT color pair.
   System type stack on purpose: the app must render identically offline. */

:root{
  --ink:#10222E;          /* deep navy — text */
  --paper:#F7F8F5;        /* warm off-white background */
  --line:#C9CFC9;
  --pyrite:#B8891F;       /* brass — brand accent only */
  --in:#176B43;           /* check-in green */
  --in-press:#0F5232;
  --out:#A03A22;          /* check-out rust */
  --out-press:#7E2C18;
  --flag:#8A5A00;
  --err:#9B1C1C;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.view{max-width:520px;margin:0 auto;padding:16px;min-height:100dvh;display:flex;flex-direction:column;gap:14px}
h1{font-size:1.35rem;letter-spacing:.01em}
button{font:inherit;cursor:pointer;touch-action:manipulation}
:focus-visible{outline:3px solid var(--pyrite);outline-offset:2px}

/* ---- brand ---- */
.brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.brand-mark{
  width:46px;height:46px;border-radius:10px;display:grid;place-items:center;
  background:var(--ink);color:var(--pyrite);font-weight:800;font-size:1.5rem;
}
.brand-sub{font-size:.8rem;text-transform:uppercase;letter-spacing:.18em;color:#5A6A72}

/* ---- login ---- */
#view-login{justify-content:center}
.login-card{display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.9rem}
.opt{font-weight:400;color:#5A6A72}
input{
  padding:14px;border:2px solid var(--line);border-radius:10px;background:#fff;
  font-size:1rem;color:var(--ink);
}
input:focus{border-color:var(--ink);outline:none}

/* ---- buttons ---- */
.btn{border:none;border-radius:10px;padding:14px 18px;font-weight:700;font-size:1rem}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:active{background:#000}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn.small{padding:8px 12px;font-size:.85rem}
.btn.big{padding:18px 22px;font-size:1.05rem;flex:1}

/* ---- topbar / chips / banners ---- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:8px}
.chip{
  display:inline-block;margin-left:8px;padding:2px 10px;border-radius:99px;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  background:var(--ink);color:var(--pyrite);
}
.banner{border-radius:10px;padding:12px 14px;font-size:.9rem;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.banner.offline{background:#EFE3C8;color:var(--flag);border:2px solid var(--flag)}
.banner.queue{background:#E2E9E4;color:var(--ink);border:2px solid var(--in)}

/* ---- site panel ---- */
.site-panel{background:#fff;border:2px solid var(--line);border-radius:14px;padding:16px}
.panel-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:#5A6A72;margin-bottom:6px}
.site-panel h2{font-size:1.25rem;line-height:1.25}
.site-dist{margin-top:4px;color:#3C4F59;font-size:.95rem}
.fence-note{margin-top:8px;color:var(--flag);font-size:.88rem;font-weight:600}

.tag-panel{display:flex;flex-direction:column;gap:12px}

/* ---- punch buttons: the whole point of the screen ---- */
.punch-zone{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:auto}
.punch{
  border:none;border-radius:18px;color:#fff;font-weight:800;font-size:1.5rem;
  line-height:1.2;padding:30px 10px;min-height:120px;letter-spacing:.03em;
  box-shadow:0 4px 0 rgba(0,0,0,.25);
}
.punch:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.punch.in{background:var(--in)}   .punch.in:active{background:var(--in-press)}
.punch.out{background:var(--out)} .punch.out:active{background:var(--out-press)}
.punch[disabled]{opacity:.45;box-shadow:none}
.status-line{text-align:center;font-size:.9rem;color:#3C4F59;min-height:1.2em}
.punch-msg{
  background:var(--ink);color:#fff;border-radius:12px;padding:14px;text-align:center;
  font-weight:700;
}
.punch-msg.flagged{background:var(--flag)}
.err{color:var(--err);font-weight:600}

/* ---- selfie ---- */
.cam-wrap{
  position:relative;border-radius:16px;overflow:hidden;background:#000;
  aspect-ratio:3/4;border:3px solid var(--ink);
}
#cam{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cam-hint{text-align:center;color:#3C4F59;font-size:.9rem}
.cam-actions{display:flex;gap:12px}
.cam-fallback{font-size:.85rem;color:#5A6A72}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}