/* Dark, mobile-first. Hand-written on purpose: this app pulls in no build
   step and no design system — it must stay thin enough to ship in a day and
   keep running untouched for two months of baseline capture. */
:root{
  --bg:#0a0a12; --card:#12121c; --line:#242433; --ink:#f2f2f5; --muted:#9a9aae;
  --accent:#10b981; --accent-ink:#04120c; --warn:#fbbf24; --danger:#f87171;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding:0 0 env(safe-area-inset-bottom);
  -webkit-text-size-adjust:100%;
}
main{padding:16px; max-width:720px; margin:0 auto}

.top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--line); background:#0d0d16;
  position:sticky; top:0; z-index:5;
}
.cust{font-weight:700; font-size:17px; letter-spacing:-.01em}
.site{font-size:12px; color:var(--muted)}
.back{color:var(--muted); text-decoration:none; font-size:14px; padding:8px}

.h2{font-size:15px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--muted); margin:22px 0 10px; font-weight:700}

/* Buttons — 44px+ targets throughout (thumb use at end of shift). */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:0 16px; border-radius:var(--radius);
  border:1px solid var(--line); background:#1b1b28; color:var(--ink);
  font-size:15px; font-weight:600; text-decoration:none; cursor:pointer;
}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.danger{background:transparent; border-color:#5b2b2b; color:var(--danger)}
.btn.big{width:100%; min-height:54px; font-size:16px}
.btn.small{min-height:40px; font-size:14px; flex:1}
.actions{display:flex; gap:10px; margin:18px 0 8px}
.actions .btn{flex:1}
.exports{display:flex; gap:10px; margin:18px 0}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin:12px 0;
}
.card h3{margin:0 0 10px; font-size:15px}
label{display:block; margin:10px 0; font-size:13px; color:var(--muted)}
input,select,textarea{
  display:block; width:100%; margin-top:5px; padding:12px;
  min-height:46px; border-radius:10px; border:1px solid var(--line);
  background:#0e0e18; color:var(--ink); font-size:16px; /* 16px = no iOS zoom */
  font-family:inherit;
}
textarea{min-height:auto}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 10px}
.hidden{display:none}

.pp{width:100%; border-collapse:collapse}
.pp th{font-size:12px; color:var(--muted); font-weight:600; text-align:left; padding:4px}
.pp td{padding:2px}
.pp tbody th{width:78px}

.dpblock{border-top:1px dashed var(--line); padding-top:10px; margin-top:10px}
.dpblock:first-of-type{border-top:0; padding-top:0; margin-top:0}
.fam{font-size:13px; font-weight:700; color:var(--ink); margin-bottom:2px}

.hint{font-size:12.5px; color:var(--muted); margin:8px 0 0; line-height:1.45}
.note{border-radius:10px; padding:11px 13px; margin:12px 0; font-size:13.5px; line-height:1.5}
.note.ok{background:rgba(16,185,129,.10); border:1px solid rgba(16,185,129,.35); color:#8ff0cd}
.note.warn{background:rgba(251,191,36,.10); border:1px solid rgba(251,191,36,.35); color:#fbe08a}

.loglist{list-style:none; margin:0; padding:0}
.loglist li{margin:8px 0}
.loglist a{
  display:block; text-decoration:none; color:inherit; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px;
}
.row1{display:flex; align-items:center; gap:10px}
.date{font-weight:700; font-variant-numeric:tabular-nums}
.row2{margin-top:3px; font-size:12.5px; color:var(--muted)}
.row3{margin-top:5px; font-size:12.5px; color:#fbe08a}
.sep{margin:0 6px; opacity:.5}
.corr{color:var(--warn)}
.chip{
  margin-left:auto; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; padding:3px 9px; border-radius:999px; border:1px solid;
}
.chip.draft{color:var(--warn); border-color:rgba(251,191,36,.45); background:rgba(251,191,36,.10)}
.chip.submitted{color:var(--accent); border-color:rgba(16,185,129,.45); background:rgba(16,185,129,.10)}
.chip.missed{color:var(--muted); border-color:var(--line); background:#1b1b28}

.missed{margin:18px 0 6px; border:1px solid var(--line); border-radius:var(--radius); padding:12px}
.missed summary{cursor:pointer; font-size:14px; color:var(--muted)}
.empty{color:var(--muted); font-size:14px}
.login{max-width:420px; margin:24px auto}

.foot{
  text-align:center; color:var(--muted); font-size:11.5px;
  padding:22px 16px 28px; opacity:.75;
}
@media (min-width:640px){ .actions{max-width:420px} }