/* Mechanic Portal — iPad-first, glove-friendly. Layered ON TOP of steel.css (the shared brand); this file
   only adds what the shop context needs and never redefines a brand token.

   THE ONE RULE THAT SHAPES EVERYTHING HERE: this is used standing up, in gloves, on a greasy iPad, often in
   bad light. Every interactive target is >= 56px tall (Apple's 44 is a phone-with-a-finger number; a glove
   is bigger and a mechanic is not looking closely). Nothing important is conveyed by color alone. */

:root {
  --tap: 56px;              /* the floor for anything tappable */
  --tap-lg: 72px;           /* primary actions — clock in/out, the thing they hit most */
  --gap: 12px;
  --radius: 14px;
}

* { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  /* Safe areas: the iPad in a case, and a standalone install with no browser chrome. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.boot { padding: 40px 20px; color: var(--muted); font-size: 18px; }

/* ── chrome ─────────────────────────────────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: var(--gap);
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 17px; margin: 0; font-weight: 800; letter-spacing: .01em; }
.topbar .who { margin-left: auto; font-size: 13px; color: var(--muted); text-align: right; line-height: 1.25; }

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 19; }
.tabs button {
  flex: 1; min-height: var(--tap); font: inherit; font-weight: 700; font-size: 15px;
  background: transparent; color: var(--muted); border: 0; border-bottom: 3px solid transparent; cursor: pointer;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--maroon); }

main { padding: var(--gap) var(--gap) 96px; max-width: 900px; margin: 0 auto; }

/* ── the running-clock banner: the single most important piece of state in the app ───────────────── */
/* Deliberately loud and always visible when live — a clock left running is a real payroll error, so it is
   never a subtle indicator. Carries a LABEL as well as color (color alone fails in sun and for ~8% of men). */
.clockbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--gap);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--green, #1f7a3f); color: #fff;
  box-shadow: 0 -3px 14px rgba(0,0,0,.28);
}
.clockbar .lbl { font-weight: 800; font-size: 15px; }
.clockbar .sub { font-size: 13px; opacity: .92; }
.clockbar .elapsed { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 20px; }
.clockbar button {
  min-height: var(--tap); padding: 0 18px; border-radius: 12px; border: 2px solid rgba(255,255,255,.85);
  background: transparent; color: #fff; font: inherit; font-weight: 800; cursor: pointer;
}

/* ── cards ──────────────────────────────────────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  padding: 14px; margin-bottom: var(--gap);
}
.card.tappable { cursor: pointer; }
.card .unit { font-size: 22px; font-weight: 800; letter-spacing: .01em; }
.card .desc { color: var(--muted); font-size: 14px; margin-top: 2px; }
.card .issue { margin-top: 8px; font-size: 15px; }
.card .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Chips carry a WORD, never just a hue — see the color-alone note above. */
.chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.chip.oos { color: var(--red, #b3261e); border-color: var(--red, #b3261e); }
.chip.parked { color: var(--amber, #a8791d); border-color: var(--amber, #a8791d); }
.chip.vendor { color: var(--muted); border-style: dashed; }

/* ── buttons ────────────────────────────────────────────────────────────────────────────────────── */
.btn {
  min-height: var(--tap); padding: 0 18px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel2, var(--panel)); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer;
}
.btn.lg { min-height: var(--tap-lg); font-size: 18px; width: 100%; }
.btn.primary { border-color: var(--maroon); color: var(--maroon); }
.btn.go { border-color: var(--green, #1f7a3f); color: var(--green, #1f7a3f); }
.btn.warn { border-color: var(--amber, #a8791d); color: var(--amber, #a8791d); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btnrow { display: flex; gap: var(--gap); flex-wrap: wrap; margin-top: var(--gap); }
.btnrow .btn { flex: 1; min-width: 140px; }

/* ── forms ──────────────────────────────────────────────────────────────────────────────────────── */
label { display: block; font-weight: 700; font-size: 14px; margin: var(--gap) 0 6px; }
input, textarea, select {
  width: 100%; box-sizing: border-box; min-height: var(--tap); padding: 12px 14px;
  font: inherit; font-size: 17px;      /* >=16px: iOS zooms the whole page on focus below that */
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel2, var(--panel)); color: var(--ink);
}
textarea { min-height: 96px; resize: vertical; }
/* The OTP field: big, spaced, numeric — read off a phone screen with one hand. */
input.code { font-size: 30px; letter-spacing: 10px; text-align: center; font-variant-numeric: tabular-nums; }

/* ── states ─────────────────────────────────────────────────────────────────────────────────────── */
.empty { padding: 32px 16px; text-align: center; color: var(--muted); }
.empty b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.err {
  border: 1px solid var(--red, #b3261e); color: var(--red, #b3261e);
  border-radius: 12px; padding: 12px 14px; margin-bottom: var(--gap); font-weight: 600;
}
.note { color: var(--muted); font-size: 13px; margin-top: 6px; }
.sectionhd { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 20px 0 8px; }

/* ── photos ─────────────────────────────────────────────────────────────────────────────────────── */
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }

/* ── sign-in ────────────────────────────────────────────────────────────────────────────────────── */
.signin { max-width: 420px; margin: 8vh auto; padding: 0 20px; }
.signin img { display: block; height: 44px; margin: 0 auto 22px; }
.signin h2 { font-size: 21px; margin: 0 0 4px; }
.signin p { color: var(--muted); margin: 0 0 18px; font-size: 15px; }

/* ── update lever ───────────────────────────────────────────────────────────────────────────────── */
/* Below the floor the app is UNUSABLE, not merely nagged — a mechanic on a shell too old to speak the
   current API would otherwise hit confusing failures mid-job. */
.updatewall { padding: 12vh 24px; text-align: center; }
.updatewall b { display: block; font-size: 20px; margin-bottom: 10px; }
.updatebar {
  position: sticky; top: 0; z-index: 25; padding: 10px 14px;
  background: var(--amber, #a8791d); color: #161616; font-weight: 700; text-align: center; cursor: pointer;
}