/* Performance 4x4 payroll — mobile first, workshop first.

   Design constraints:
   - The kiosk is used standing up, in a hurry, sometimes with gloves on.
     Nothing interactive is smaller than 56px tall.
   - A workshop is bright. High contrast, heavy weights, no thin grey text.
   - Numbers are tabular-figure aligned so a column of hours reads as a column. */

:root {
  --ink: #10151c;
  --ink-soft: #4a5666;
  --line: #dfe4ea;
  --paper: #f4f6f8;
  --card: #ffffff;

  --brand: #c8102e;      /* Performance 4x4 red */
  --brand-dark: #96001f;
  --go: #147d3f;
  --go-dark: #0d5c2d;
  --warn: #b45309;
  --warn-bg: #fef3c7;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 21, 28, .08), 0 4px 16px rgba(16, 21, 28, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 900px; margin: 0 auto; padding: 16px; }
.wrap--narrow { max-width: 520px; }

/* ── Header ──────────────────────────────────────────────────────────── */

.topbar {
  background: var(--ink);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.topbar h1 { font-size: 17px; margin: 0; letter-spacing: .01em; }
.topbar .clock { font-variant-numeric: tabular-nums; opacity: .85; font-size: 15px; }
.topbar a { color: #fff; text-decoration: none; opacity: .85; font-size: 15px; }

/* ── Cards ───────────────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 14px;
}
.card h2 { margin: 0 0 12px; font-size: 15px; text-transform: uppercase;
           letter-spacing: .06em; color: var(--ink-soft); }

/* ── Kiosk: the name grid ────────────────────────────────────────────── */

.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 128px;
  padding: 16px 10px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.person__name { font-size: 19px; font-weight: 700; text-align: center; }
.person__state { font-size: 13px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; }
.person--on { border-color: var(--go); }
.person--on .person__state { color: var(--go); }
.person--off .person__state { color: var(--ink-soft); }

.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block;
       margin-right: 6px; vertical-align: 1px; }
.dot--on { background: var(--go); }
.dot--off { background: #b6bec9; }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: block;
  width: 100%;
  min-height: 64px;
  border: 0;
  border-radius: var(--radius);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  padding: 18px;
}
.btn--go { background: var(--go); }
.btn--go:active { background: var(--go-dark); }
.btn--stop { background: var(--brand); }
.btn--stop:active { background: var(--brand-dark); }
.btn--quiet { background: transparent; color: var(--ink-soft); min-height: 52px;
              font-size: 16px; font-weight: 600; }
.btn[disabled] { background: #b6bec9; cursor: not-allowed; }

/* ── PIN pad ─────────────────────────────────────────────────────────── */

.pin-display {
  font-size: 40px; letter-spacing: .35em; text-align: center;
  min-height: 56px; font-variant-numeric: tabular-nums;
}
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.key {
  min-height: 72px; font-size: 26px; font-weight: 600;
  background: var(--card); border: 2px solid var(--line);
  border-radius: var(--radius); cursor: pointer; color: var(--ink);
}
.key:active { background: var(--paper); }

/* ── Numbers ─────────────────────────────────────────────────────────── */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { background: var(--card); border-radius: var(--radius); padding: 16px;
        box-shadow: var(--shadow); text-decoration: none; color: inherit; display: block; }
.stat__label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
               color: var(--ink-soft); font-weight: 700; }
.stat__value { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums;
               margin-top: 4px; line-height: 1.15; }
.stat__note { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.stat__value--go { color: var(--go); }
.stat__value--warn { color: var(--brand); }

/* ── Tables ──────────────────────────────────────────────────────────── */

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 11px 10px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
     color: var(--ink-soft); font-weight: 700; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.is-today td { background: #fffbeb; }
tfoot td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; }

/* nowrap matters: a pill with a 999px radius that wraps onto three lines
   renders as an unreadable blob rather than a tag. */
.tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
       text-transform: uppercase; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.tag--warn { background: var(--warn-bg); color: var(--warn); }
.tag--off  { background: var(--paper); color: var(--ink-soft); }

.notice { background: var(--warn-bg); color: var(--warn); border-radius: var(--radius);
          padding: 14px; font-weight: 600; margin-bottom: 14px; }
.error  { background: #fee2e2; color: #991b1b; border-radius: var(--radius);
          padding: 14px; font-weight: 600; margin-bottom: 14px; }

/* ── Terms ───────────────────────────────────────────────────────────── */

.terms-body {
  max-height: 46vh; overflow-y: auto; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; font-size: 15px; line-height: 1.65;
  /* Terms are stored and shown as plain text, so the paragraph breaks and
     numbered clauses the author typed have to survive. Without this the whole
     agreement renders as one unreadable block — and an unreadable agreement is
     a worthless acknowledgement. */
  white-space: pre-wrap;
}
.terms-body h1, .terms-body h2, .terms-body h3 { font-size: 16px; margin: 16px 0 6px; }
.terms-body h1:first-child { margin-top: 0; }

.check {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px; margin: 14px 0; background: var(--card);
  border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer;
  font-weight: 600;
}
.check input { width: 26px; height: 26px; margin: 0; flex: 0 0 auto; }

/* ── Misc ────────────────────────────────────────────────────────────── */

.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 13px; font-weight: 700; color: var(--ink-soft);
              text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.field input {
  width: 100%; min-height: 56px; padding: 12px 14px; font-size: 17px;
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--card);
  color: var(--ink);
}
.field input:focus { outline: 3px solid rgba(200, 16, 46, .25); border-color: var(--brand); }

.nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.nav a { flex: 1 1 auto; text-align: center; padding: 12px 14px; min-height: 48px;
         background: var(--card); border-radius: var(--radius); text-decoration: none;
         color: var(--ink); font-weight: 600; box-shadow: var(--shadow); font-size: 15px; }
.nav a.is-active { background: var(--ink); color: #fff; }

/* On a phone the table has to give something up, and it must not be the Paid
   column — that is the number the whole screen exists to show. The unpaid-break
   column is the least important, so it goes first. */
@media (max-width: 520px) {
  .hide-narrow { display: none; }
}

.week-nav { display: flex; justify-content: space-between; align-items: center;
            gap: 8px; margin-bottom: 10px; }
.week-nav strong { text-align: center; font-size: 15px; }
.week-nav a { width: auto; min-height: 44px; padding: 10px 12px; white-space: nowrap;
              font-size: 15px; }

.muted { color: var(--ink-soft); }
.small { font-size: 13px; }
.center { text-align: center; }
.big-name { font-size: 30px; font-weight: 700; text-align: center; margin: 8px 0 4px; }
.big-time { font-size: 56px; font-weight: 700; text-align: center;
            font-variant-numeric: tabular-nums; line-height: 1.1; }
.foot { text-align: center; padding: 20px 0 32px; }


/* ── Dashboard hero ───────────────────────────────────────────────────
   The headline figure people open the app to see. Big enough to read at
   arm's length, with the money directly under it so the hours and the
   dollars are never on separate screens. */

.hero { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 2px; }
.hero__value { font-size: 52px; font-weight: 700; line-height: 1;
               font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hero__unit { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.hero__money { font-size: 21px; font-weight: 700; color: var(--go);
               font-variant-numeric: tabular-nums; margin-bottom: 14px; }

.stat__suffix { font-size: 16px; font-weight: 600; color: var(--ink-soft); }

/* ── Breakdown tables ─────────────────────────────────────────────────
   Deliberately not the same as data tables: no header row, lighter rules,
   because these are read as a sentence rather than scanned as a grid. */

table.breakdown { width: 100%; border-collapse: collapse; font-size: 15px; }
table.breakdown td { padding: 9px 0; border-bottom: 1px solid var(--line);
                     vertical-align: baseline; }
table.breakdown tr:last-child td { border-bottom: 0; }
table.breakdown td.num { text-align: right; font-variant-numeric: tabular-nums;
                         white-space: nowrap; font-weight: 600; }
table.breakdown tr.breakdown__total td { border-top: 2px solid var(--ink);
                                         border-bottom: 0; padding-top: 11px; }

/* ── Fortnight bars ───────────────────────────────────────────────────
   Two weeks side by side. The whole arrangement exists to make these two
   bars the same length, so showing them is the clearest proof it works. */

.fortnight-bars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.fbar { display: grid; grid-template-columns: 84px 1fr 72px; align-items: center; gap: 10px; }
.fbar__label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.fbar__track { height: 22px; background: var(--paper); border: 1px solid var(--line);
               border-radius: 6px; overflow: hidden; }
.fbar__fill { height: 100%; background: #b6bec9; }
.fbar--now .fbar__fill { background: var(--go); }
.fbar__value { text-align: right; font-variant-numeric: tabular-nums;
               font-weight: 700; font-size: 15px; }

.tag--now { background: var(--go); color: #fff; margin-left: 4px; }

@media (max-width: 400px) {
  .fbar { grid-template-columns: 68px 1fr 64px; gap: 8px; }
  .hero__value { font-size: 44px; }
}

/* -- The hours balance ------------------------------------------------
   The mechanics have to see this clearly and understand it, so it gets its
   own card, a plain-English sentence rather than a bare number, and the
   whole cycle drawn as bars so they can see it returning to zero rather
   than having to take our word for it.

   Red for negative and green for positive, but NOT as bad/good: a negative
   balance just means the roster has given them days off in advance. The
   wording carries the meaning; the colour only separates direction. */

.bankcard { border-left: 5px solid var(--line); }
.bankcard--neg { border-left-color: var(--brand); }
.bankcard--pos { border-left-color: var(--go); }

.bank { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 6px; }
.bank__value {
  font-size: 42px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.bankcard--neg .bank__value { color: var(--brand); }
.bankcard--pos .bank__value { color: var(--go); }
.bank__unit { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.bank__plain { font-size: 15px; line-height: 1.55; margin: 0 0 14px; }

.banktrail { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.banktrail__week {
  display: grid; grid-template-columns: 96px 1fr 62px;
  align-items: center; gap: 9px;
}
.banktrail__label { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.banktrail__label .tag { font-size: 9px; padding: 1px 5px; margin-left: 3px; }
.banktrail__bar {
  height: 16px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 5px; overflow: hidden;
}
.banktrail__fill { height: 100%; background: var(--go); }
.banktrail__fill.is-neg { background: var(--brand); }
.banktrail__week.is-now .banktrail__label { color: var(--ink); }
.banktrail__week.is-now .banktrail__bar { border-color: var(--ink); }
.banktrail__value {
  text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 13px;
}

td.bank-neg { color: var(--brand); font-weight: 700; }
td.bank-pos { color: var(--go); font-weight: 700; }

@media (max-width: 400px) {
  .banktrail__week { grid-template-columns: 78px 1fr 56px; gap: 7px; }
  .bank__value { font-size: 36px; }
}

/* -- Nav badges -------------------------------------------------------
   Shown only when something is genuinely waiting, so an unbadged nav is a
   reliable signal that there is nothing to do. A badge that is always
   there is a badge nobody looks at. */

.badge {
  display: inline-block; min-width: 18px; padding: 1px 5px; margin-left: 4px;
  background: var(--brand); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
  vertical-align: 1px;
}
.badge--go { background: var(--go); }
.nav a.is-active .badge { background: #fff; color: var(--ink); }

/* ── Classes the newer screens use ───────────────────────────────────────
   Added after finding a checkbox rendered as a full-width red-outlined box:
   it had been given `.field`, which is sized for text inputs, because the
   class it actually wanted did not exist. Anything referenced from a template
   needs to be defined here, or the browser silently falls back to something
   that looks broken. */

/* The counterpart to .error, for "that worked". */
.ok { background: #dcfce7; color: #14532d; border-radius: var(--radius);
      padding: 14px; font-weight: 600; margin-bottom: 14px; }

/* A borderless label/value table, for facts rather than data. */
.plain { width: 100%; border-collapse: collapse; }
.plain td { padding: 6px 0; vertical-align: top; border: 0; }
.plain td:first-child { width: 40%; padding-right: 14px; }

/* A number that has come off a balance. Not colour alone -- the minus sign
   carries the same information for anyone who cannot separate red from black. */
.num { text-align: right; font-variant-numeric: tabular-nums; }
.neg { color: var(--brand); }

/* Destructive actions. Deliberately not the brand red used for primary
   buttons: outlined, so it does not read as the obvious thing to press. */
.btn--danger {
  background: transparent; color: var(--brand);
  border: 2px solid var(--brand); box-shadow: none;
}
.btn--danger:hover { background: var(--brand); color: #fff; }

/* A card that needs attention without being an error. */
.card--warn { border-left: 4px solid var(--warn); background: var(--warn-bg); }