/* bikes.hosted.cy — workshop console.
   Signature: the registration plate rendered as an amber-edged monospace chip,
   the one bright thing on an otherwise graphite instrument panel. */

:root{
  --bg:#0d1013;         /* graphite */
  --panel:#161a1f;
  --panel-2:#1d232a;
  --line:#2a323b;
  --ink:#e8edf1;
  --muted:#8b98a5;
  --amber:#f4b942;      /* sodium work-light — the only bright accent */
  --amber-dim:#7a5f1f;
  --steel:#5b8aa6;
  --ok:#6fcf7f;
  --warn:#e8a33d;
  --danger:#e5675f;
  --r:12px;
  --tap:56px;           /* min touch target for gloved hands */
  font-synthesis:none;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.45;
  -webkit-tap-highlight-color:transparent;
  padding-bottom:env(safe-area-inset-bottom);
}
h1{font-size:1.4rem;margin:.2rem 0}
h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:1.6rem 0 .6rem;font-weight:700}
h3{margin:.2rem 0 1rem;font-size:1.1rem}
.muted{color:var(--muted)}
.pad{padding:1rem 1rem 4rem;max-width:640px;margin:0 auto}
.grow{flex:1}

/* top bar */
#topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.5rem;
  padding:.5rem .8rem;background:rgba(13,16,19,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{color:var(--ink);text-decoration:none;font-weight:700;letter-spacing:.02em;font-size:1.02rem}
.brand::first-letter{color:var(--amber)}
.tb{min-width:44px;height:44px;display:grid;place-items:center;background:transparent;border:0;color:var(--muted);
  font-size:1.25rem;text-decoration:none;border-radius:10px;cursor:pointer}
.tb:active{background:var(--panel-2)}
.pending{background:var(--amber);color:#111;font-weight:700;min-width:24px;height:24px;border-radius:12px;
  display:grid;place-items:center;font-size:.8rem;padding:0 .4rem}
body.offline #topbar{border-bottom-color:var(--amber-dim)}
body.offline .brand::after{content:" · offline";color:var(--warn);font-weight:600;font-size:.8rem}

/* buttons */
button{font:inherit}
.primary,.ghost{border-radius:var(--r);border:1px solid var(--line);min-height:var(--tap);
  padding:.7rem 1rem;font-weight:600;cursor:pointer}
.primary{background:var(--amber);color:#141414;border-color:var(--amber)}
.primary:active{filter:brightness(.92)}
.ghost{background:var(--panel);color:var(--ink)}
.ghost:active{background:var(--panel-2)}
.ghost:disabled{opacity:.4}
.big{min-height:64px;font-size:1.08rem}
.block{display:block;width:100%}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.6rem 0}
.mini{background:var(--panel-2);border:1px solid var(--line);color:var(--amber);border-radius:8px;
  padding:.1rem .5rem;font-size:.72rem;min-height:auto;cursor:pointer}

/* plate chip — the signature element */
.plate{font-family:ui-monospace,"SF Mono","Cascadia Mono",Menlo,monospace;font-weight:700;
  letter-spacing:.08em;background:#0a0c0e;border:1px solid var(--amber);color:var(--amber);
  padding:.12em .5em;border-radius:6px;display:inline-block;box-shadow:0 0 0 1px #000 inset}
.plate.xl{font-size:1.7rem;padding:.14em .5em}
.plate-field{font-family:ui-monospace,monospace;font-size:1.9rem;text-align:center;letter-spacing:.14em;
  text-transform:uppercase;background:#0a0c0e;border:1px solid var(--amber);color:var(--amber);
  border-radius:10px;padding:.5rem;width:100%}

/* capture zones */
.capzone{border:1.5px dashed var(--line);border-radius:var(--r);background:var(--panel);
  display:grid;place-items:center;gap:.15rem;padding:1.6rem 1rem;text-align:center;cursor:pointer;margin:.4rem 0 1rem}
.capzone.sm{padding:1.1rem}
.capzone span{font-size:2rem}
.capzone b{font-weight:600}
.capzone small{color:var(--muted)}
.capzone:active{background:var(--panel-2);border-color:var(--amber-dim)}
.spin{display:inline-block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* fields */
.fld{display:block;margin:.55rem 0}
.fld>span{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.28rem}
input,textarea,select{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:.7rem .8rem;font:inherit;min-height:var(--tap)}
textarea{min-height:auto;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--amber);outline-offset:0;border-color:var(--amber)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem}
.plate-in{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:stretch}
.plate-in .primary{min-height:auto}
.or{text-align:center;margin:1rem 0}

/* cards / lists */
.list{display:grid;gap:.5rem}
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:.7rem .85rem;text-decoration:none;color:var(--ink);width:100%;text-align:left;cursor:pointer}
.card:active{background:var(--panel-2)}
.card .sub,.sub{color:var(--muted);font-size:.86rem}
.bikehead{margin:.4rem 0 1rem}
.back{display:inline-block;color:var(--muted);text-decoration:none;margin-bottom:.6rem;font-size:.95rem}

/* status tags */
.tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;padding:.1em .5em;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);vertical-align:middle}
.tag.open{color:var(--amber);border-color:var(--amber-dim)}
.tag.ready{color:var(--ok);border-color:#2f5b38}
.tag.closed{color:var(--muted)}
.tag.cancelled{color:var(--danger);border-color:#5b2f2d}

/* service lines + totals */
.lines{display:grid;gap:.4rem}
.line{display:flex;justify-content:space-between;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem}
.line small{display:block;color:var(--muted);font-size:.74rem}
.lineamt{display:flex;align-items:center;gap:.5rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.del{background:transparent;border:0;color:var(--danger);font-size:1rem;cursor:pointer;padding:.2rem .3rem}
.totals{display:flex;justify-content:space-between;padding:.35rem 0;border-top:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.totals.grand{font-size:1.15rem;border-top:2px solid var(--amber-dim);margin-top:.2rem;padding-top:.6rem}
.totals.grand b{color:var(--amber)}

/* thumbnails */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.5rem}
.thumb{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);text-decoration:none}
.thumb img{width:100%;height:90px;object-fit:cover;display:block}
.thumb small{position:absolute;left:0;bottom:0;right:0;background:rgba(0,0,0,.6);color:#fff;
  font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;padding:.1rem .3rem}

/* signature */
.sig{width:100%;background:#0a0c0e;border:1px solid var(--line);border-radius:10px;touch-action:none;display:block}
.actions{margin-top:1.5rem;display:grid;gap:.6rem}

/* login */
.login{max-width:360px;margin:14vh auto 0;padding:0 1.2rem;text-align:center}
.login .mark{font-size:3rem;color:var(--amber);line-height:1}
.login form{display:grid;gap:.7rem;margin-top:1.4rem;text-align:left}

/* modal sheet */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;
  width:100%;max-width:640px;padding:1.2rem 1rem 1.6rem;animation:up .18s ease-out}
@keyframes up{from{transform:translateY(20px);opacity:.6}to{transform:none;opacity:1}}
.tpl{display:flex;justify-content:space-between;align-items:center}

/* live scanner overlay */
.scan{position:fixed;inset:0;z-index:60;background:#000;display:grid;place-items:center}
.scan video{width:100%;height:100%;object-fit:cover}
.scan-frame{position:absolute;width:74vw;max-width:340px;aspect-ratio:1.6;border:2px solid var(--amber);
  border-radius:12px;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
.scan-x{position:absolute;bottom:2rem;background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:999px;padding:.7rem 1.6rem;font-weight:600}
.scan-hint{position:absolute;top:2rem;color:#fff;background:rgba(0,0,0,.5);padding:.3rem .8rem;border-radius:999px;font-size:.85rem}

/* toast */
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,140%);z-index:80;
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink);padding:.7rem 1.1rem;border-radius:999px;
  transition:transform .24s ease;max-width:90vw;font-size:.92rem}
.toast.in{transform:translate(-50%,0)}
.toast.ok{border-color:#2f5b38}
.toast.warn{border-color:var(--warn);color:var(--warn)}

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