:root {
  --navy-900: #061829;
  --navy-800: #0a2540;
  --navy-700: #0e3157;
  --navy-600: #144072;
  --navy-500: #1b56a4;
  --blue-400: #3d82d8;
  --yellow: #ffc72c;
  --yellow-hi: #ffdd6b;
  --yellow-dim: #b08a12;
  --ink: #eef4fc;
  --ink-dim: #a9c1de;
  --ok: #35c26a;
  --warn: #ffb020;
  --bad: #ff5a5f;
  --line: rgba(255, 199, 44, .22);
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  /* The gradient sits on its own fixed layer (below) instead of background-attachment: fixed,
     which makes browsers repaint the whole page on every scroll and glitch. */
  background: var(--navy-900);
  color: var(--ink);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
}

body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 600px at 12% -8%, #16437a 0%, transparent 60%),
    radial-gradient(900px 500px at 92% 0%, #0f3e73 0%, transparent 55%),
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
}

a { color: var(--yellow); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- top bar ---------- */
.topbar {
  background: linear-gradient(180deg, #0c2c4e, #0a2540);
  border-bottom: 3px solid var(--yellow);
  /* Scrolls away with the page. A sticky bar made some browsers (including the one built
     into the Claude app) draw the page in the wrong place while scrolling. */
  position: relative; z-index: 40;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
}
.topbar-inner {
  max-width: 1240px; margin: 0 auto; padding: 10px 18px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark { display: flex; }
.brand-text { font-weight: 800; letter-spacing: .4px; font-size: 18px; line-height: 1.1; display: flex; flex-direction: column; }
.brand-text small { font-weight: 500; font-size: 11px; color: var(--yellow); letter-spacing: .6px; text-transform: uppercase; }

.mainnav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.mainnav a {
  color: var(--ink-dim); padding: 7px 12px; border-radius: 8px; font-weight: 600; font-size: 14px;
}
.mainnav a:hover { background: rgba(255, 199, 44, .12); color: var(--yellow); text-decoration: none; }
.mainnav a.on { background: var(--yellow); color: var(--navy-900); }

.userbox { display: flex; align-items: center; gap: 10px; margin-left: 6px; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .16); }
.who { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
.who small { color: var(--yellow); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.userbox form { margin: 0; }

/* ---------- layout ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 22px 18px 60px; }
.wrap.wide { max-width: 1500px; }
.foot { text-align: center; color: var(--ink-dim); font-size: 12px; padding: 0 0 26px; opacity: .6; }

h1 { font-size: 26px; margin: 0 0 4px; letter-spacing: .2px; }
h2 { font-size: 17px; margin: 0; }
h3 { font-size: 15px; margin: 0 0 8px; color: var(--yellow); text-transform: uppercase; letter-spacing: .8px; }
.sub { color: var(--ink-dim); margin: 0 0 18px; }

.pagehead { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pagehead .grow { flex: 1 1 320px; }
.pagehead .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.card {
  background: linear-gradient(180deg, rgba(20, 64, 114, .75), rgba(10, 37, 64, .85));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; background: rgba(255, 199, 44, .08);
  border-bottom: 1px solid var(--line);
}
.card-head h2 { color: var(--yellow); text-transform: uppercase; letter-spacing: .8px; font-size: 13px; }
.card-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.card-body { padding: 16px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid-6 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 1250px) { .grid-6 { grid-template-columns: repeat(6, 1fr); } }

/* ---------- stat tiles ---------- */
.stat {
  background: linear-gradient(180deg, rgba(27, 86, 164, .55), rgba(10, 37, 64, .8));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
}
.stat .n { font-size: 30px; font-weight: 800; color: var(--yellow); line-height: 1.1; }
.stat .l { color: var(--ink-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .7px; }
.stat.bad .n { color: var(--bad); }
.stat.warn .n { color: var(--warn); }
.stat.ok .n { color: var(--ok); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .07); vertical-align: middle; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--yellow); background: rgba(0, 0, 0, .18); white-space: nowrap; }
tbody tr:hover { background: rgba(255, 199, 44, .06); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.reg {
  display: inline-block; background: var(--yellow); color: #111;
  font-weight: 800; letter-spacing: 1.2px; padding: 3px 9px; border-radius: 5px;
  font-family: "Segoe UI", system-ui, sans-serif; border: 1px solid #d9a70f; white-space: nowrap;
}
.reg.lg { font-size: 20px; padding: 5px 12px; }
.muted-txt { color: var(--ink-dim); font-size: 13px; }

/* ---------- pills / badges ---------- */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .4px; white-space: nowrap;
  border: 1px solid transparent;
}
.pill-ok { background: rgba(53, 194, 106, .16); color: #7ce8a4; border-color: rgba(53, 194, 106, .45); }
.pill-warn { background: rgba(255, 176, 32, .16); color: #ffcf72; border-color: rgba(255, 176, 32, .5); }
.pill-bad { background: rgba(255, 90, 95, .16); color: #ff9b9e; border-color: rgba(255, 90, 95, .5); }
.pill-muted { background: rgba(255, 255, 255, .08); color: var(--ink-dim); border-color: rgba(255, 255, 255, .16); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border-radius: 9px; border: 1px solid transparent;
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; line-height: 1.2;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--yellow); color: #10233b; border-color: #e0ab10; }
.btn-primary:hover { background: var(--yellow-hi); }
.btn-secondary { background: var(--navy-500); color: #fff; border-color: var(--blue-400); }
.btn-secondary:hover { background: #2266c4; }
.btn-ghost { background: rgba(255, 255, 255, .06); color: var(--ink); border-color: rgba(255, 255, 255, .45); }
.btn-ghost:hover { background: rgba(255, 199, 44, .14); border-color: var(--yellow); color: var(--yellow); }
.btn-danger { background: transparent; color: #ff9b9e; border-color: rgba(255, 90, 95, .5); }
.btn-danger:hover { background: rgba(255, 90, 95, .14); }
.btn-sm { padding: 6px 11px; font-size: 13px; }
.btn-lg { padding: 13px 22px; font-size: 16px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- forms ---------- */
.stack { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13px; color: var(--ink-dim); }
label.inline { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); }
input, select, textarea {
  font: inherit; color: var(--ink); background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 9px; padding: 10px 12px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--yellow); outline-offset: 1px; border-color: var(--yellow); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--yellow); transform: scale(1.15); }
.torque-choice label.inline { font-size: 14px; }
select option { background: var(--navy-800); color: var(--ink); }
textarea { min-height: 76px; resize: vertical; }
.field-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: end; }
.field-row label { justify-content: flex-end; }
.hint { font-weight: 400; font-size: 12px; color: var(--ink-dim); }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

.flash { padding: 11px 15px; border-radius: 10px; margin-bottom: 16px; font-weight: 600; border: 1px solid; }
.flash-success { background: rgba(53, 194, 106, .14); border-color: rgba(53, 194, 106, .5); color: #9df0bd; }
.flash-error { background: rgba(255, 90, 95, .14); border-color: rgba(255, 90, 95, .5); color: #ffb1b3; }
.flash-info { background: rgba(255, 199, 44, .12); border-color: var(--line); color: var(--yellow-hi); }

.empty { color: var(--ink-dim); padding: 22px 16px; text-align: center; font-style: italic; }

/* ---------- axle builder ---------- */
.axle-list { display: flex; flex-direction: column; gap: 10px; }
.axle-row {
  display: grid; grid-template-columns: 42px minmax(110px, 1fr) 170px minmax(150px, 210px) 44px; gap: 10px; align-items: center;
  background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; padding: 9px 11px;
}
.axle-no { font-weight: 800; color: var(--yellow); text-align: center; }
.axle-row .rm { background: transparent; border: 1px solid rgba(255, 90, 95, .45); color: #ff9b9e; border-radius: 8px; padding: 7px 0; cursor: pointer; font-weight: 800; }
@media (max-width: 620px) {
  .axle-row { grid-template-columns: 34px 1fr 44px; }
  .axle-row select, .axle-row input[name="axle_size"] { grid-column: 2 / 3; }
}

/* ---------- check sheet ---------- */
.axle-block { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.axle-head {
  background: rgba(255, 199, 44, .1); padding: 9px 14px; font-weight: 800;
  color: var(--yellow); text-transform: uppercase; letter-spacing: .8px; font-size: 12.5px;
  display: flex; justify-content: space-between; gap: 10px;
}
.axle-head .type { color: var(--ink-dim); font-weight: 600; letter-spacing: .4px; text-transform: none; }
.wheels { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 290px)); justify-content: start; gap: 12px; padding: 12px; }
.wheel {
  background: rgba(0, 0, 0, .25); border: 2px solid rgba(255, 255, 255, .12);
  border-radius: 10px; padding: 11px 12px;
}
.wheel.is-pass { border-color: rgba(53, 194, 106, .6); }
.wheel.is-advisory { border-color: rgba(255, 176, 32, .7); background: rgba(255, 176, 32, .07); }
.wheel.is-fail { border-color: var(--bad); background: rgba(255, 90, 95, .1); }
.wheel-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.wheel-pos { font-weight: 800; letter-spacing: .5px; }
.wheel-side { font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .6px; }
.tread-input { display: flex; align-items: center; gap: 8px; }
.tread-input input { font-size: 22px; font-weight: 800; text-align: center; padding: 9px; }
.tread-input .unit { color: var(--yellow); font-weight: 800; }
.flagbox { margin-top: 9px; }
.flagbox summary { cursor: pointer; color: var(--ink-dim); font-size: 12.5px; font-weight: 600; }
.flagbox summary:hover { color: var(--yellow); }
.flag-grid { display: grid; grid-template-columns: 1fr; gap: 5px; margin-top: 8px; }
.flag-grid label { font-size: 12.5px; }
.wheel .status-line { margin-top: 8px; font-size: 12px; font-weight: 700; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; color: var(--ink-dim); font-size: 12.5px; align-items: center; }
.legend span.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

.tread-cell { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; font-weight: 700; }
.tread-cell .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-pass { background: var(--ok); } .dot-advisory { background: var(--warn); } .dot-fail { background: var(--bad); } .dot-na { background: #667; }

.minitread { display: flex; gap: 3px; flex-wrap: wrap; }
.minitread i {
  width: 22px; height: 20px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-style: normal; font-weight: 800; color: #06121f;
}
.mt-pass { background: var(--ok); } .mt-advisory { background: var(--warn); } .mt-fail { background: var(--bad); } .mt-na { background: #5a6b7d; color: #cfd8e3; }

.runner-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.runner-row .grow { flex: 1 1 200px; }

.crumbs { color: var(--ink-dim); font-size: 13px; margin-bottom: 10px; }
.crumbs a { color: var(--ink-dim); }
.crumbs a:hover { color: var(--yellow); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; }
.kv dt { color: var(--ink-dim); }
.kv dd { margin: 0; font-weight: 600; }

.creds { background: rgba(0,0,0,.35); border: 1px dashed var(--yellow); border-radius: 10px; padding: 12px 14px; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ---------- login ---------- */
.login-body { display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 100vh; }
.login-card {
  width: 100%; max-width: 400px; background: linear-gradient(180deg, rgba(20, 64, 114, .85), rgba(8, 30, 53, .95));
  border: 1px solid var(--line); border-top: 4px solid var(--yellow);
  border-radius: 16px; padding: 30px 26px; box-shadow: var(--shadow); text-align: center;
}
.login-card h1 { color: var(--yellow); letter-spacing: 1px; margin-bottom: 2px; }
.login-sub { color: var(--ink-dim); margin: 0 0 20px; font-size: 13.5px; }
.login-card form { text-align: left; }
.login-mark { display: flex; justify-content: center; margin-bottom: 10px; }

/* ---------- menu count badge ---------- */
.nav-badge {
  display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 4px; border-radius: 999px;
  background: var(--bad); color: #fff; font-size: 11.5px; font-weight: 800; text-align: center; line-height: 18px;
}

/* ---------- simple dashboard ---------- */
.attention-banner {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin-bottom: 22px;
  border-radius: var(--radius); border: 2px solid; color: var(--ink); text-decoration: none;
}
a.attention-banner:hover { text-decoration: none; filter: brightness(1.12); }
.attention-banner.is-bad { background: rgba(255, 90, 95, .14); border-color: var(--bad); }
.attention-banner.is-ok { background: rgba(53, 194, 106, .12); border-color: var(--ok); }
.ab-n { font-size: 40px; font-weight: 800; line-height: 1; min-width: 44px; text-align: center; }
.is-bad .ab-n { color: var(--bad); }
.is-ok .ab-n { color: var(--ok); }
.ab-t { display: flex; flex-direction: column; flex: 1; }
.ab-t strong { font-size: 18px; }
.ab-t small { color: var(--ink-dim); font-size: 13px; }
.ab-go { font-weight: 800; color: var(--bad); white-space: nowrap; }

.section-title { color: var(--yellow); text-transform: uppercase; letter-spacing: .8px; font-size: 13px; margin: 0 0 10px; }
.fleet-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.fleet-tile {
  display: flex; flex-direction: column; gap: 10px; padding: 16px;
  background: linear-gradient(180deg, rgba(20, 64, 114, .75), rgba(10, 37, 64, .85));
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.fleet-tile.is-bad { border-color: rgba(255, 90, 95, .55); }
.ft-name { font-size: 18px; font-weight: 800; color: var(--ink); }
.ft-meta { color: var(--ink-dim); font-size: 13.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fleet-tile .btn { margin-top: auto; padding: 12px; }
.banner-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 22px; }
.banner-pair .attention-banner { margin-bottom: 0; }
.attention-banner.is-warn { background: rgba(255, 176, 32, .12); border-color: var(--warn); }
.is-warn .ab-n, .is-warn .ab-go { color: var(--warn); }

.subtabs { display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 2px solid var(--line); flex-wrap: wrap; }
.subtabs a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; margin-bottom: -2px;
  color: var(--ink-dim); font-weight: 700; border-bottom: 3px solid transparent; text-decoration: none;
}
.subtabs a:hover { color: var(--yellow); text-decoration: none; }
.subtabs a.on { color: var(--yellow); border-bottom-color: var(--yellow); }

/* Needs attention: one clearly separated block per fleet */
.fleet-jump { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.fleet-jump a {
  padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--ink);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .25);
}
.fleet-jump a.is-bad { border-color: rgba(255, 90, 95, .6); }
.fleet-jump a span { color: var(--yellow); margin-left: 4px; }
.fleet-jump a:hover { text-decoration: none; border-color: var(--yellow); }
.fleet-block {
  margin-bottom: 26px; border-radius: var(--radius); overflow: hidden; scroll-margin-top: 90px;
  border: 2px solid var(--line); border-left: 8px solid var(--yellow); background: rgba(6, 24, 41, .55); box-shadow: var(--shadow);
}
.fleet-block.is-bad { border-left-color: var(--bad); }
.fb-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px;
  background: linear-gradient(180deg, rgba(27, 86, 164, .55), rgba(10, 37, 64, .8)); border-bottom: 1px solid var(--line);
}
.fb-title { flex: 1 1 240px; }
.fb-title h2 { font-size: 21px; color: var(--ink); margin: 0 0 4px; }
.fb-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* folded fleet boxes: name + count; tap to open */
.fold-hint { margin: -6px 0 12px; }
.fleet-block { margin-bottom: 14px; }
summary.fb-head { cursor: pointer; list-style: none; }
summary.fb-head::-webkit-details-marker { display: none; }
summary.fb-head:hover { filter: brightness(1.1); }
.fleet-block:not([open]) summary.fb-head { border-bottom: 0; }
.fb-count {
  min-width: 52px; height: 52px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; color: #10233b; background: var(--yellow); flex: 0 0 auto;
}
.fleet-block.is-bad .fb-count { background: var(--bad); color: #fff; }
.fb-toggle { margin-left: auto; font-weight: 800; color: var(--yellow); white-space: nowrap; }
.fb-toggle::after { content: ' \25BE'; }
.fleet-block[open] .fb-toggle::after { content: ' \25B4'; }
.fleet-block .fb-hide, .fleet-block[open] .fb-show { display: none; }
.fleet-block[open] .fb-hide { display: inline; }
.fb-actions { padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, .15); }
.fb-part h3 { margin: 0; padding: 10px 16px; font-size: 12.5px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.fb-part h3 .muted-txt { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.fb-part.card-alert h3 { color: #ff9b9e; background: rgba(255, 90, 95, .08); }
.fb-part.card-amber h3 { color: #ffcf72; background: rgba(255, 176, 32, .08); }
.fb-part + .fb-part { border-top: 1px solid var(--line); }

.card-amber { border-color: rgba(255, 176, 32, .5); }
.card-amber .card-head { background: rgba(255, 176, 32, .1); }
.card-amber .card-head h2 { color: #ffcf72; }
.card-alert { border-color: rgba(255, 90, 95, .5); }
.card-alert .card-head { background: rgba(255, 90, 95, .1); }
.card-alert .card-head h2 { color: #ff9b9e; }

/* ---------- clickable number boxes + "what needs doing" (fleet dashboard) ---------- */
a.stat-link { display: block; color: var(--ink); text-decoration: none; cursor: pointer; transition: transform .08s; }
a.stat-link:hover { text-decoration: none; border-color: var(--yellow); transform: translateY(-1px); }
a.stat-link.is-on { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(255, 199, 44, .5); }
.stat-go { font-size: 12px; font-weight: 800; color: var(--yellow); margin-top: 4px; min-height: 1em; }
.todo-list { display: flex; flex-direction: column; }
.todo-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.todo-row:last-child { border-bottom: 0; }
.todo-reg { flex: 0 0 200px; }
.todo-what { flex: 1 1 280px; }
.todo-tyres { margin: 0; padding-left: 18px; }
.todo-tyres li { margin: 2px 0; }
@media (max-width: 700px) { .todo-reg { flex-basis: 100%; } .todo-go .btn { width: 100%; } .todo-go { flex-basis: 100%; } }

/* ---------- torque tags (fleet side) ---------- */
.tt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.tt-card {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: linear-gradient(180deg, rgba(20, 64, 114, .75), rgba(10, 37, 64, .85));
  border: 1px solid var(--line); border-left: 6px solid var(--ok); border-radius: var(--radius);
}
/* Re-torque due: amber. Overdue (below): red. Re-torqued: green. */
.tt-card.is-due { border-left-color: var(--warn); box-shadow: 0 0 0 1px rgba(255, 176, 32, .35), var(--shadow); }
.add-torque summary.card-head { cursor: pointer; list-style: none; }
.add-torque summary.card-head::-webkit-details-marker { display: none; }
.add-torque:not([open]) summary.card-head { border-bottom: 0; }
.add-torque .torque-row { display: flex; align-items: center; flex-wrap: wrap; }
.who-did, .new-tyre { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; background: rgba(0, 0, 0, .18); }
.who-did[hidden], .new-tyre[hidden], .outside-name[hidden] { display: none; }
.pdf-tile { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #b3261e; color: #fff; font-weight: 800; cursor: pointer; }
.tt-card.is-overdue { border-left-color: var(--bad); box-shadow: 0 0 0 2px rgba(255, 90, 95, .45), var(--shadow); }
.retorque-alert { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; border-width: 2px; }
.retorque-alert span { flex: 1 1 300px; }
a.retorque-alert { text-decoration: none; }
.retorque-alert span.btn { flex: 0 0 auto; }

/* ---------- tap-a-wheel vehicle picture (top-down, front at the top, nearside left) ---------- */
.wheel-pick-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; background: rgba(0, 0, 0, .18); }
.wp-title { align-self: flex-start; font-weight: 700; font-size: 13px; color: var(--ink-dim); }
.wheel-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wp-front { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--yellow); text-transform: uppercase; }
.wp-veh { display: flex; flex-direction: column; align-items: center; }
.wp-body {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 14px 0;
  width: 120px; background: linear-gradient(180deg, #2a5a92, #1b3f6b); border: 2px solid #5b86bd; border-radius: 8px;
}
.wp-cab { width: 112px; height: 48px; border-radius: 18px 18px 6px 6px; background: linear-gradient(180deg, #ffd65a, #e0a90f); border: 2px solid #b58508; margin-bottom: 4px; position: relative; }
.wp-cab::after { content: ''; position: absolute; left: 12px; right: 12px; top: 8px; height: 12px; border-radius: 6px; background: #1a2f4a; }
.wp-kingpin { width: 14px; height: 14px; border-radius: 50%; background: #c9d6e6; border: 2px solid #5b86bd; margin-bottom: 6px; }
.wp-trailer { min-height: 300px; justify-content: flex-end; }
.wp-tractor { min-height: 170px; }
.wp-rigid { min-height: 230px; }
.wp-van { width: 104px; border-radius: 22px 22px 8px 8px; min-height: 190px; }
.wp-car { width: 96px; border-radius: 30px 30px 18px 18px; min-height: 170px; }
.wp-screen { height: 14px; margin: 4px 14px 0; border-radius: 8px; background: #1a2f4a; }
.wp-load { flex: 1; min-height: 20px; margin: 0 14px; border-radius: 4px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 6px, rgba(255, 255, 255, .1) 6px 12px); }
.wp-fifth { width: 52px; height: 30px; margin: 0 auto; border-radius: 50% 50% 6px 6px; background: #c9d6e6; border: 2px solid #8fa7c4; }
.wp-axle { display: flex; align-items: center; justify-content: center; margin: 0 -40px; }
.wp-side { display: flex; gap: 3px; }
.wp-bar { flex: 0 0 auto; width: 80px; height: 6px; background: #c9d6e6; border-radius: 3px; position: relative; }
.wp-bar span { position: absolute; left: 50%; top: -17px; transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-weight: 700; color: var(--ink-dim); }
.wp-wheel { display: block; cursor: pointer; margin: 0; }
.wp-wheel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wp-wheel span {
  display: block; width: 22px; height: 46px; border-radius: 7px; background: #111820; border: 2px solid #4d5d70;
  background-image: repeating-linear-gradient(0deg, #111820 0 5px, #1e2a36 5px 8px); transition: transform .08s;
}
.wp-wheel:hover span { border-color: var(--yellow); }
.wp-wheel input:checked + span { background: var(--yellow); border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 199, 44, .45); transform: scale(1.08); }
.wp-wheel input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 2px; }
.wp-gap { display: block; width: 22px; }
.wp-spare { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.wp-spare .wp-wheel span { width: 40px; height: 40px; border-radius: 50%; }
.wp-sides { display: flex; justify-content: space-between; width: 230px; font-size: 11px; font-weight: 800; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .6px; }
.wp-chosen { font-weight: 800; color: var(--yellow); min-height: 1.3em; }

/* the same picture on the tyre check sheet and report: each tyre coloured, with its lowest reading on it */
.vehicle-pic-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; margin-bottom: 14px; border: 1px dashed var(--line); border-radius: 12px; background: rgba(0, 0, 0, .18); }
.vehicle-pic { zoom: 1.25; }
.wp-tyre { background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.wp-tyre span { display: flex; align-items: center; justify-content: center; width: 27px; }
.vehicle-pic .wp-gap { width: 27px; }
.vehicle-pic .wp-axle { margin: 0 -46px; }
.vehicle-pic .wp-sides { width: 250px; }
.wp-tyre b { font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: -.3px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
.wp-tyre.st-pass span { background: #35c26a; border-color: #a7f0c3; }
.wp-tyre.st-advisory span { background: #ffb020; border-color: #ffe0a0; }
.wp-tyre.st-advisory b { color: #1a1300; text-shadow: none; }
.wp-tyre.st-fail span { background: #ff5a5f; border-color: #ffc2c4; }
.wp-tyre.is-current span { box-shadow: 0 0 0 3px var(--yellow); transform: scale(1.1); }
.vp-legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: var(--ink-dim); }
.vp-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: #111820; border: 1px solid #4d5d70; }
.vp-legend .st-pass::before { background: #35c26a; }
.vp-legend .st-advisory::before { background: #ffb020; }
.vp-legend .st-fail::before { background: #ff5a5f; }
/* job requests: fleet → tyre garage */
.request-alert { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; text-decoration: none; border-width: 2px; animation: rq-pulse 2s ease-in-out 3; }
.request-alert span:first-child { flex: 1 1 300px; }
@keyframes rq-pulse { 50% { box-shadow: 0 0 0 4px rgba(255, 90, 95, .35); } }
.rq-list { display: flex; flex-direction: column; gap: 10px; }
.pc-row { display: flex; gap: 6px; align-items: center; }
.pc-row input { text-transform: uppercase; max-width: 160px; }
.pin-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pin-head .btn { margin-left: auto; }
.req-map { height: 300px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; background: #dfe7ef; color: #222; }
.req-map .muted-txt { padding: 14px; color: #333; }
.where-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.rq-card { border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: 0; padding: 10px 14px; background: rgba(0, 0, 0, .15); display: flex; flex-direction: column; gap: 4px; }
.rq-card.st-new { border-left-color: var(--bad); }
.rq-card.st-accepted { border-left-color: var(--warn); }
.rq-card.st-done { border-left-color: var(--ok); }
.rq-card.is-urgent { box-shadow: 0 0 0 2px rgba(255, 90, 95, .35); }
/* The whole box opens the job (the phone number and map links still work on their own). */
.rq-card { position: relative; cursor: pointer; transition: background .15s; }
.rq-card:hover { background: rgba(255, 255, 255, .05); }
.rq-card .rq-open::after { content: ''; position: absolute; inset: 0; }
.rq-card a:not(.rq-open) { position: relative; z-index: 1; }
.rq-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.urgent-txt { color: #ff9b9e; }
.rq-steps { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.rq-accept input { max-width: 200px; }
.rq-toast { position: fixed; right: 16px; bottom: 16px; z-index: 50; max-width: 340px; padding: 14px 16px; border-radius: 12px; background: #b3261e; color: #fff; text-decoration: none;
  box-shadow: var(--shadow); border: 2px solid #ffc2c4; transition: opacity .4s, transform .4s; }
.rq-toast.is-gone { opacity: 0; transform: translateY(20px); pointer-events: none; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* logins: pick a login's access level */
.level-pick { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.level-pick legend { font-weight: 700; font-size: 13px; color: var(--ink-dim); margin-bottom: 6px; padding: 0; }
.level-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: rgba(0, 0, 0, .15); }
.level-opt input { margin-top: 3px; width: 20px; height: 20px; flex: 0 0 auto; }
.level-opt span { display: flex; flex-direction: column; gap: 2px; }
.level-opt small { color: var(--ink-dim); font-size: 13px; font-weight: 400; }
.level-opt:has(input:checked) { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(255, 199, 44, .35); }
.removed-logins { padding: 10px 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.removed-logins summary { cursor: pointer; color: var(--ink-dim); font-weight: 700; }

/* tyre check, one tyre at a time: only the tyre picked on the picture is shown */
.sheet-nav { display: flex; align-items: center; justify-content: center; gap: 8px 10px; flex-wrap: wrap; margin: -4px 0 14px; }
.sheet-nav[hidden], .sheet-nav [hidden] { display: none; }
.sheet-pos { flex: 1 1 100%; order: -1; text-align: center; font-weight: 800; color: var(--yellow); }
.sheet-mode { flex-basis: 100%; }
.one-tyre .axle-block:not(.has-open), .one-tyre .wheel:not(.is-open) { display: none; }
.one-tyre .wheels { grid-template-columns: minmax(0, 520px); justify-content: center; }
.wheel.is-flash, tr.is-flash { animation: tc-flash 1.6s ease-out; }
@keyframes tc-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--yellow); background-color: rgba(255, 199, 44, .14); } 100% { box-shadow: 0 0 0 0 transparent; } }
.tt-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tt-wheel { flex-basis: 100%; }
.tt-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.tt-info { flex: 1 1 140px; font-size: 13px; line-height: 1.5; }
.tt-card .retorque-row { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 10px; padding-bottom: 0; }

/* ---------- driver walkaround checks (fleet bolt-on) ---------- */
.walk-items { display: flex; flex-direction: column; }
.walk-item { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); border-left: 5px solid transparent; }
.walk-item:last-child { border-bottom: 0; }
.walk-item.is-ok { border-left-color: var(--ok); }
.walk-item.is-defect { border-left-color: var(--bad); background: rgba(255, 90, 95, .08); }
.walk-item.is-na { border-left-color: #5a6b7d; }
.wi-label { font-weight: 600; }
.wi-choice { display: inline-flex; border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; overflow: hidden; }
.wc { display: block; cursor: pointer; margin: 0; }
.wc input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wc span { display: block; padding: 10px 14px; font-weight: 800; font-size: 14px; color: var(--ink-dim); min-width: 64px; text-align: center; }
.wc + .wc span { border-left: 1px solid rgba(255, 255, 255, .2); }
.wc-ok input:checked + span { background: var(--ok); color: #06121f; }
.wc-defect input:checked + span { background: var(--bad); color: #fff; }
.wc-na input:checked + span { background: #5a6b7d; color: #fff; }
.wc input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: -2px; }
.wi-defect { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.wi-defect[hidden] { display: none; }
.wi-big .wc span { padding: 14px 20px; font-size: 16px; }
.walk-actions { justify-content: flex-end; align-items: center; }
.defect-list { display: flex; flex-direction: column; }
.defect-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.defect-row:last-child { border-bottom: 0; }
.dr-main { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; }
.fix-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 0 1 420px; }
.fix-form input { flex: 1 1 140px; padding: 8px 10px; }
.bolton-card.is-on { border-color: rgba(53, 194, 106, .55); }
.walk-offer form { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; }
.offer-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; font-size: 15px; }
.offer-list li { padding-left: 2px; }
.trial-banner { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; }
.trial-banner span { flex: 1 1 320px; }
.bolton-body p { margin: 0 0 10px; }
.inline-form { display: flex; gap: 8px; align-items: center; margin: 0; }

/* ---------- billing (tyre businesses) ---------- */
.billing-card { border-color: rgba(255, 199, 44, .45); }
.bill-summary { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.bill-total { display: flex; flex-direction: column; align-items: center; padding: 10px 18px; border-radius: 12px; background: rgba(255, 199, 44, .12); border: 1px solid var(--line); }
.bill-total .bt-n { font-size: 32px; font-weight: 800; color: var(--yellow); line-height: 1.1; }
.bill-total .bt-l { color: var(--ink-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.bill-how { flex: 1 1 320px; color: var(--ink-dim); }
.bill-how strong { color: var(--ink); }
.price-in { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.price-in input { width: 110px; padding: 7px 9px; }
.margin-up { color: #7ce8a4; font-weight: 700; }
.margin-down { color: #ff9b9e; font-weight: 700; }
.bill-table tfoot td { border-top: 2px solid var(--line); background: rgba(0, 0, 0, .15); }
.pay-how { background: rgba(0, 0, 0, .25); border: 1px dashed var(--yellow); border-radius: 10px; padding: 12px 14px; line-height: 1.6; }

/* ---------- tyre sizes ---------- */
.tyre-size {
  display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .3px; text-transform: none; color: var(--ink); background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25); font-variant-numeric: tabular-nums;
}
.axle-head .tyre-size { margin-left: 8px; }
.card-head .tyre-size { margin-left: auto; }

/* ---------- tyre work & torque tags ---------- */
.work-tyre.is-red { border-left: 6px solid var(--bad); }
.work-tyre.is-amber { border-left: 6px solid var(--warn); }
.work-tyre.is-replacing { border-color: var(--ok); box-shadow: 0 0 0 2px rgba(53, 194, 106, .35), var(--shadow); }
.replace-toggle { font-size: 16px; padding: 4px 0 10px; }
.replace-toggle input { transform: scale(1.4); margin-right: 6px; }
.torque-box { margin-top: 12px; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; background: rgba(0, 0, 0, .18); }
.torque-choice { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-bottom: 10px; }
.torque-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.torque-row label { max-width: 160px; }
.torque-other { font-weight: 700; padding-bottom: 10px; }
.torque-tag {
  display: inline-flex; flex-direction: column; gap: 2px; padding: 7px 11px; border-radius: 8px;
  background: #fff7d6; color: #1a1300; border: 2px solid #e0ab10; font-size: 12.5px; line-height: 1.25; min-width: 170px;
}
.torque-tag .tt-head { font-weight: 800; letter-spacing: 1px; font-size: 10.5px; }
.torque-tag .tt-val { font-weight: 800; font-size: 15px; }
.torque-tag .tt-re.is-done { color: #0a6b33; font-weight: 700; }
.torque-tag .tt-re.is-due { color: #9a5b00; font-weight: 800; }
.tt-card.is-overdue .torque-tag .tt-re.is-due { color: #a11016; }
.torque-tag.is-none { background: rgba(255, 255, 255, .08); color: var(--ink-dim); border-color: rgba(255, 255, 255, .2); font-weight: 600; }
.replaced-note { color: #7ce8a4; font-size: 12px; font-weight: 700; margin-top: 4px; }
.replaced-note a { color: #7ce8a4; text-decoration: underline; }
.work-pill { vertical-align: middle; font-size: 13px; }
.card-work { border-color: rgba(53, 194, 106, .5); }
.card-work .card-head h2 { color: #7ce8a4; }
.retorque-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.retorque-row:last-child { border-bottom: 0; padding-bottom: 0; }
.retorque-row .rt-what { flex: 1 1 260px; }
.retorque-row label { max-width: 170px; }
@media print { .torque-tag { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ---------- working with no signal ---------- */
#offline-bar { display: none; }
#offline-bar.is-offline, #offline-bar.is-warn, #offline-bar.is-ok {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 11px 15px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; border: 2px solid;
}
#offline-bar.is-offline { background: rgba(61, 130, 216, .16); border-color: var(--blue-400); }
#offline-bar.is-warn { background: rgba(255, 176, 32, .12); border-color: var(--warn); }
#offline-bar.is-ok { background: rgba(53, 194, 106, .12); border-color: var(--ok); }
#offline-bar .ob-sub { color: var(--ink-dim); font-size: 12.5px; flex-basis: 100%; }
.run-item.on-phone .ri-go { color: #8fbcf0; }

/* ---------- check sheet: carried over from last check ---------- */
.prefill-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(61, 130, 216, .14); border: 1px solid rgba(61, 130, 216, .5); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px;
}
.prefill-note > span { flex: 1 1 320px; }
.prefill-note .btn { margin-left: auto; }
.tread-input input.is-prefilled,
.tread-three input.is-prefilled { border-style: dashed; color: var(--ink-dim); font-style: italic; background: rgba(0, 0, 0, .15); }

/* three depths per tyre: outer edge, middle, inner edge */
.tread-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tread-spot { gap: 3px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; text-align: center; }
.tread-spot input { font-size: 20px; font-weight: 800; text-align: center; padding: 8px 2px; min-width: 0; font-variant-numeric: tabular-nums; }
.tread-low { margin-top: 5px; font-weight: 700; min-height: 1.2em; }
.wheel .last-line { margin-top: 2px; }

/* ---------- tyre photos ---------- */
.photo-box { margin-top: 9px; }
.photo-add {
  display: inline-flex; flex-direction: row; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 11px; border-radius: 9px; font-size: 13px; font-weight: 700;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .45); color: var(--ink);
}
.photo-add:hover { border-color: var(--yellow); color: var(--yellow); }
.photo-add input { display: none; }
.photos { display: flex; gap: 7px; flex-wrap: wrap; }
.photo-box .photos:not(:empty) { margin-top: 8px; }
.photo-thumb { position: relative; display: block; width: 62px; height: 62px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.photo-thumb .drop {
  position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; padding: 0;
  border: 0; background: rgba(0, 0, 0, .75); color: #ff9b9e; font-weight: 800; cursor: pointer; line-height: 1;
}
.photo-busy { font-size: 12.5px; color: var(--yellow); margin-top: 7px; }
.photo-busy.is-error { color: #ff9b9e; }

/* ---------- simple fleet check list ---------- */
.run-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--ink-dim); font-weight: 600; }
.run-bar { flex: 1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; max-width: 320px; }
.run-bar span { display: block; height: 100%; background: var(--ok); }
.run-list { display: flex; flex-direction: column; gap: 8px; }
.run-item {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: linear-gradient(180deg, rgba(20, 64, 114, .75), rgba(10, 37, 64, .85));
  border: 1px solid var(--line); border-left: 5px solid var(--ink-dim); border-radius: 10px;
  color: var(--ink); text-decoration: none;
}
a.run-item:hover { text-decoration: none; border-color: var(--yellow); }
.run-item.st-fail { border-left-color: var(--bad); }
.run-item.st-advisory { border-left-color: var(--warn); }
.run-item.st-pass { border-left-color: var(--ok); }
.run-item .ri-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.run-item .ri-type { color: var(--ink-dim); font-size: 13px; }
.run-item .ri-go { font-weight: 800; color: var(--yellow); white-space: nowrap; }
.run-item.is-done { opacity: .7; }
.run-item.just-saved { opacity: 1; border-color: var(--ok); box-shadow: 0 0 0 2px rgba(53, 194, 106, .45); }
.saved-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.saved-banner a { color: #9df0bd; text-decoration: underline; font-weight: 700; }
.run-item.is-done .ri-go { color: var(--ok); }

/* ---------- check history boxes ---------- */
.history-picker select { font-weight: 600; }
.history-go { display: flex; gap: 8px; align-items: flex-end; }
.history-go:empty { display: none; }
.history-counts { gap: 6px; }

/* ---------- installed app: keep clear of the phone's notch / status bar ---------- */
.topbar { padding-top: env(safe-area-inset-top, 0px); }
.login-body { padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
.login-card #install-app { width: 100%; margin-top: 12px; }

/* ---------- phones ---------- */
@media (max-width: 700px) {
  body { font-size: 15px; }
  input, select, textarea { font-size: 16px; } /* stops iPhone zooming in on every box */

  /* compact header: logo + log out on one line, menu as one swipeable row */
  .topbar { position: static; }
  .topbar-inner { padding: 8px 12px 0; gap: 8px 10px; }
  .brand { order: 1; }
  .brand-text { font-size: 17px; }
  .userbox { order: 2; margin-left: auto; padding-left: 0; border-left: 0; }
  .who { display: none; }
  #install-app { order: 3; }
  .mainnav {
    order: 4; flex: 1 0 100%; margin: 0 -12px; padding: 4px 12px 8px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav a { white-space: nowrap; padding: 9px 13px; }

  .wrap { padding: 14px 12px 40px; }
  h1 { font-size: 22px; }
  .sub { margin-bottom: 12px; }
  .pagehead { gap: 10px; margin-bottom: 14px; }
  .pagehead .grow { flex-basis: 100%; }
  .pagehead .actions { width: 100%; }
  .pagehead .actions .btn, .pagehead .actions input { flex: 1 1 auto; }
  .card { margin-bottom: 14px; }
  .card-head { padding: 11px 12px; }
  .card-body { padding: 12px; }
  .card-actions { margin-left: 0; width: 100%; }
  .card-actions input { width: 100% !important; }

  .grid-4, .grid-6 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .stat { padding: 11px 12px; }
  .stat .n { font-size: 26px; }
  .stat .l { font-size: 11px; }

  .btn { min-height: 42px; }
  .btn-sm { min-height: 36px; }

  /* tables turn into one card per row, each value labelled */
  .table-wrap { overflow: visible; }
  table.stackable thead { display: none; }
  table.stackable, table.stackable tbody, table.stackable tr, table.stackable td { display: block; width: 100%; }
  table.stackable tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  table.stackable td {
    position: relative; border: 0; padding: 4px 0 4px 38%; min-height: 26px; text-align: left;
  }
  table.stackable td::before {
    content: attr(data-label); position: absolute; left: 0; top: 6px; width: 35%;
    color: var(--yellow); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  }
  table.stackable td.num { text-align: left; }
  table.stackable td.cell-action { padding: 8px 0 2px; display: flex; gap: 8px; flex-wrap: wrap; }
  table.stackable td.cell-action:empty { display: none; }
  table.stackable td.cell-action .btn, table.stackable td.cell-action form { flex: 1 1 auto; }
  table.stackable td.cell-action form .btn { width: 100%; }

  /* check sheet: tyres two across, like looking at the axle */
  .axle-head { padding: 8px 12px; }
  .wheels { grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
  .wheel { padding: 9px; min-width: 0; }
  .wheel-top { flex-wrap: wrap; gap: 2px 6px; margin-bottom: 6px; }
  .wheel-pos { font-size: 13.5px; }
  .tread-input { gap: 4px; }
  .tread-input input { font-size: 22px; padding: 10px 4px; min-width: 0; }
  .tread-input .unit { font-size: 12px; }
  .tread-three { gap: 4px; }
  .tread-spot { font-size: 9.5px; letter-spacing: .2px; }
  .tread-spot input { font-size: 18px; padding: 9px 0; }
  .flagbox summary { padding: 6px 0; font-size: 13px; }
  .flag-grid label { font-size: 13px; padding: 5px 0; }
  .flag-grid input[type=checkbox] { transform: scale(1.35); }

  /* save buttons stay at the bottom of the screen while you work down the sheet */
  #check-sheet .form-actions {
    position: sticky; bottom: 0; z-index: 30; margin: 0 -12px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(6, 24, 41, .97); border-top: 2px solid var(--yellow);
  }
  #check-sheet .form-actions { flex-wrap: nowrap; gap: 8px; }
  #check-sheet .form-actions .btn { flex: 1 1 0; padding: 12px 8px; font-size: 15px; }
  #check-sheet .form-actions .btn-ghost { display: none; }

  .kv { gap: 4px 12px; }
  .login-card { padding: 24px 18px; }

  .attention-banner { padding: 14px; gap: 12px; margin-bottom: 18px; }
  .ab-n { font-size: 32px; min-width: 36px; }
  .ab-t strong { font-size: 16px; }
  .fleet-tiles { grid-template-columns: 1fr; gap: 10px; }
  .banner-pair { grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
  .fleet-block { margin-left: -4px; margin-right: -4px; border-left-width: 6px; }
  .walk-item { grid-template-columns: 1fr; padding: 10px 12px; }
  .wi-choice { display: flex; width: 100%; }
  .wc { flex: 1; }
  .wc span { min-width: 0; padding: 12px 6px; }
  .walk-actions .btn { width: 100%; }
  .fb-actions .btn { width: 100%; }
  .fb-count { min-width: 44px; height: 44px; font-size: 22px; }
  .fb-toggle { flex-basis: 100%; text-align: right; font-size: 13px; }
  .fb-title h2 { font-size: 19px; }
  .prefill-note .btn { margin-left: 0; width: 100%; }
  .photo-add { width: 100%; justify-content: center; padding: 9px; }
  .photo-thumb { width: 56px; height: 56px; }
  .run-item { flex-wrap: wrap; gap: 6px 10px; }
  .run-item .ri-main { flex-basis: 60%; }
  .subtabs { flex-wrap: nowrap; gap: 0; }
  .subtabs a { flex: 1; justify-content: center; padding: 10px 6px; font-size: 14px; }
}

/* ---------- print ---------- */
@media print {
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .topbar, .foot, .no-print, .card-actions { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .card { border: 1px solid #999; box-shadow: none; background: #fff; break-inside: avoid; }
  .card-head { background: #eee; border-bottom: 1px solid #999; }
  .card-head h2, h3, a { color: #000; }
  th { background: #eee; color: #000; }
  th, td { border-bottom: 1px solid #ccc; }
  .reg { background: #ffc72c; color: #000; }
  .pill { border: 1px solid #666; color: #000 !important; }
  .kv dt { color: #444; }
  .muted-txt, .crumbs { color: #444; }
  .flash { display: none; }
  .job-card { border: 1px solid #999; background: #fff; color: #000; box-shadow: none; padding: 14px; }
  .jc-head { border-bottom-color: #000; }
  .jc-l, .jc-contact { color: #444; }
  .jc-sec h2 { color: #000; }
  .jc-sig { background: #fff; border-color: #999; }
}

/* ---------- job cards ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt { display: inline-flex; margin: 0; cursor: pointer; }
.chip-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-opt span { display: inline-block; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; font-weight: 700; font-size: 14px; background: rgba(0, 0, 0, .15); min-height: 44px; line-height: 22px; }
.chip-opt input:checked + span { background: var(--yellow); color: #1a1300; border-color: var(--yellow); }
.chip-opt input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 2px; }
.chip-clear input:checked + span { background: transparent; color: var(--ink-dim); border-color: var(--line); }
.job-wheels { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.job-wheel { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: rgba(0, 0, 0, .15); display: flex; flex-direction: column; gap: 10px; }
.job-wheel[hidden] { display: none; }
.job-wheel.is-open { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(255, 199, 44, .3); }
.job-wheel:not(.is-open) { cursor: pointer; }
.job-wheel:not(.is-open) .jw-actions, .job-wheel:not(.is-open) .jw-fields, .job-wheel:not(.is-open) [data-jw-close] { display: none; }
.jw-retorque { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line); }
.jw-retorque [hidden] { display: none; }
.jw-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jw-head .jw-sum { flex: 1; }
.jw-head [data-jw-close] { margin-left: auto; }
.jw-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.jw-fields { display: flex; flex-direction: column; gap: 10px; }
.jw-fields[hidden], .jw-group[hidden] { display: none; }
.wp-tyre.is-job span { box-shadow: 0 0 0 3px #3d82d8; }
.jc-removed-to { font-size: 12px; font-weight: 700; }
/* Job requests: from the office | requested by fleets, side by side on a wide screen. */
.rq-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }
.rq-box-office .card-head h2 { color: #7cc4ff; }
.rq-card.is-mine { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow) inset; }
.rq-mine { font-size: 12px; font-weight: 800; color: var(--yellow); margin-bottom: 4px; }
/* Booked in by the office for a fitter: only what the office knows. The fitter fills in the rest on the job. */
#job-form[data-send-mode] .fit-only { display: none !important; }
/* Job card "where": our workshop / their depot just say where; only roadside asks. */
[data-where-road][hidden], .where-auto[hidden] { display: none; }
.where-auto { margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); font-weight: 700; }
.jc-scrap-total { margin: 8px 0 0; }
.jw-scrap { padding-top: 8px; border-top: 1px dashed var(--line); }
/* Red / amber on the last check: suggested work, not chosen until the fitter taps it. */
.jw-suggest { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor; }
.jw-suggest.is-red { color: var(--bad, #e5484d); }
.jw-suggest.is-amber { color: var(--warn, #f5a524); }
.jw-suggest.is-req { color: var(--yellow); }
.unknown-setup { color: var(--warn); }
/* The fleet's own checks: their own colour (teal) on both sides, so it's clear who did each check. */
.pill-fleet { background: rgba(32, 201, 201, .16); color: #4fe0d6; border: 1px solid rgba(79, 224, 214, .55); }
tr.by-fleet td { background: rgba(32, 201, 201, .06); }
tr.by-fleet td:first-child { box-shadow: inset 4px 0 0 #2ec9c2; }
/* PMI safety inspection (DVSA Annex 4A layout). */
.pmi-codes { font-size: 13px; color: var(--ink-dim); padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.pmi-no { display: inline-block; min-width: 26px; font-weight: 800; color: var(--yellow); }
.pmi-choice .wc span { min-width: 44px; text-align: center; }
.wc-mon input:checked + span { background: var(--warn); color: #1a1300; border-color: var(--warn); }
.pmi-tyres input { max-width: 110px; }
.pmi-risk { border-left: 4px solid var(--warn); padding-left: 12px; }
[data-bt-risk][hidden] { display: none; }
.pmi-record { display: flex; flex-direction: column; gap: 10px; }
.pmi-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pmi-title { font-size: 20px; font-weight: 800; }
.pmi-ref { font-weight: 800; color: var(--yellow); }
.pmi-part { margin: 14px 0 4px; font-size: 16px; color: var(--yellow); }
.pmi-table tr.is-fault td { background: rgba(255, 90, 95, .08); }
.pmi-sig img { display: block; max-width: 280px; background: #fff; border-radius: 6px; margin: 4px 0; }
.pmi-action-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pmi-declared { border: 1px solid var(--ok, #3ccf7a); border-radius: 10px; padding: 12px; }
.pmi-audit ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.bad-txt { color: var(--bad); }
.small { font-size: 12px; }
@media print { .pmi-record { color: #000; } .pmi-part { color: #000; } }
/* Account › Features: a switch per feature. */
.feature-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.feature-row .grow { flex: 1; min-width: 220px; }
/* PMI: the 6-weekly inspection planner and the tyre part of each PMI. */
.pill-pmi { background: rgba(155, 125, 255, .18); color: #c3b1ff; border: 1px solid rgba(195, 177, 255, .5); }
.pmi-planner { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.pmi-week { border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 90px; }
.pmi-week.is-now { border-color: var(--yellow); }
.pmi-wk { font-size: 12px; font-weight: 800; color: var(--ink-dim); }
.pmi-due { display: block; text-align: center; font-weight: 800; font-size: 12px; padding: 4px 6px; border-radius: 6px; background: rgba(155, 125, 255, .18); color: #e3d9ff; text-decoration: none; }
.pmi-due.is-over { background: rgba(255, 90, 95, .25); color: #ffd0d1; }
.pmi-edit summary { cursor: pointer; color: var(--yellow); font-weight: 700; font-size: 13px; }
.pmi-edit .inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 6px; }
.pmi-wheel { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.pmi-wheel label { font-size: 12px; }
.pmi-ticks { display: flex; flex-direction: column; gap: 8px; }
.pmi-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pmi-ok { color: var(--ok, #3ccf7a); } .pmi-no { color: var(--bad); }
/* Rows you can tap to open (vehicles, checks). */
tr[data-href] { cursor: pointer; }
tr[data-href]:hover td { background: rgba(255, 255, 255, .05); }
/* Plan a route */
.route-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.route-drops { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.route-drop { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.route-drop .n, .route-stop .n, .route-pin { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; background: var(--yellow); color: #1a1300; flex: none; }
.route-stop .n.base, .route-pin.base { background: #3d82d8; color: #fff; }
.route-list { display: flex; flex-direction: column; gap: 10px; }
.route-stop { display: flex; gap: 10px; align-items: center; }
.route-map { height: 360px; }
.route-pin { border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
/* "Are you sure?" and messages, on the page (browser pop-ups can be blocked). */
.tc-ask { margin: 10px 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--yellow); background: rgba(255, 199, 44, .1); }
.tc-ask p { margin: 0 0 8px; font-weight: 700; }
.tc-ask .form-actions { margin: 0; }
.tc-say { transition: opacity .5s; }
.tc-say.is-gone { opacity: 0; }
[data-us-misc][hidden] { display: none; }
.job-wheel.is-suggested:not(.has-work) { border-style: dashed; }
.jw-actions span.is-tip { border-style: dashed; border-color: var(--yellow); }
.jw-actions span.is-tip::after { content: ' ★'; color: var(--yellow); }
.wp-tyre.is-suggest span { box-shadow: 0 0 0 3px var(--warn, #f5a524); }
.wp-tyre.is-picked span { box-shadow: 0 0 0 4px var(--yellow); transform: scale(1.12); outline: 2px solid #fff; outline-offset: -4px; }
.multi-hint { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 199, 44, .12); border: 1px solid var(--line); font-weight: 700; }
.job-bulk { margin-top: 12px; border-color: var(--yellow); }
.bulk-rows { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 8px; }
.bulk-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, .18); }
.bulk-wheel { font-weight: 800; font-size: 15px; color: var(--yellow); }
.br-acts .chip-opt span { padding: 8px 12px; min-height: 40px; font-size: 13px; }
.bulk-row.no-act { border-color: var(--warn); }
.br-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.br-line[hidden] { display: none; }
.br-depth .tread-three { max-width: 360px; }
.br-l { display: block; font-size: 13px; font-weight: 700; color: var(--ink-dim); margin-bottom: 4px; }
.job-bulk[hidden] { display: none; }
.wp-tyre.is-job.is-current span { box-shadow: 0 0 0 3px var(--yellow); }
.stock-rows { display: flex; flex-direction: column; gap: 8px; }
.stock-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 150px) 40px; gap: 8px; align-items: center; }
.stock-row .rm { height: 40px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 20px; cursor: pointer; }
.sig-pad { width: 100%; max-width: 600px; height: 160px; background: #fff; border: 2px dashed #8fa7c4; border-radius: 12px; touch-action: none; display: block; }
.sig-wrap.is-off { opacity: .4; pointer-events: none; }
.retorque-due-txt { color: var(--warn); font-weight: 700; }
.job-card { background: linear-gradient(180deg, rgba(20, 64, 114, .75), rgba(10, 37, 64, .85)); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.jc-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-bottom: 2px solid var(--line); padding-bottom: 12px; }
.jc-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: #fff; }
.jc-initials { display: flex; align-items: center; justify-content: center; background: var(--yellow); color: #1a1300; font-weight: 800; font-size: 22px; }
.jc-biz { flex: 1 1 240px; }
.jc-name { font-size: 20px; font-weight: 800; }
.jc-contact { color: var(--ink-dim); font-size: 13px; }
.jc-ref { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.jc-no { font-size: 17px; font-weight: 800; }
.jc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; }
.jc-l { display: block; font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.jc-sec h2 { font-size: 15px; margin: 0 0 8px; }
.jc-notes { margin: 0 0 8px; }
.jc-sign { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.jc-signame { font-family: Georgia, 'Times New Roman', serif; font-size: 20px; font-style: italic; }
.jc-sig { display: block; max-width: 260px; height: 80px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--line); }
.jc-foot { font-size: 12px; color: var(--ink-dim); border-top: 1px solid var(--line); padding-top: 8px; }
.job-customer { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .18); border: 1px solid var(--line); }
/* job sheet preview: the sheet as it prints / saves — white A4 paper, dark ink */
.sheet-paper { max-width: 210mm; margin: 0 auto 24px; padding: 14mm 12mm; background: #fff; color: #111; border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.sheet-paper .job-card { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; color: #111; }
.sheet-paper .jc-head { border-bottom: 2px solid #111; }
.sheet-paper .jc-name, .sheet-paper h2, .sheet-paper strong, .sheet-paper td, .sheet-paper th { color: #111; }
.sheet-paper .jc-contact, .sheet-paper .jc-l, .sheet-paper .muted-txt, .sheet-paper .jc-foot { color: #555; }
.sheet-paper .table-wrap { background: none; border: 0; }
.sheet-paper table { background: none; }
.sheet-paper th { background: #eee; border-bottom: 1px solid #bbb; }
.sheet-paper td { border-bottom: 1px solid #ddd; }
.sheet-paper .jc-sign, .sheet-paper .jc-foot { border-top-color: #bbb; }
.sheet-paper .retorque-due-txt { color: #b45309; }
.sheet-paper .pill { background: #f2f2f2; color: #333; border: 1px solid #bbb; }
.sheet-paper a { color: #1b56a4; }
.sheet-paper .jc-sig { border-color: #ccc; }
@media (max-width: 640px) { .sheet-paper { padding: 16px 12px; border-radius: 0; margin: 0 -16px 18px; } }
@media print { .sheet-paper { box-shadow: none; padding: 0; max-width: none; } }
.job-done { border: 2px solid var(--ok); background: linear-gradient(180deg, rgba(53, 194, 106, .18), rgba(10, 37, 64, .85)); }
.jd-title { font-size: 20px; font-weight: 800; color: #7ce8a4; }
.js-links { white-space: nowrap; }
.js-links .btn + .btn { margin-left: 4px; }
.job-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 560px) { .stock-row { grid-template-columns: 56px minmax(0, 1fr) 40px; } .stock-row [name="stock_code"] { grid-column: 2; } .jc-ref { align-items: flex-start; text-align: left; } }

/* packages: Tyre Checker / Full system */
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pkg-opt { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.pkg-opt.is-on { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); }
.pkg-name { font-weight: 700; margin-bottom: 4px; }
.notice-row { display: flex; gap: 10px 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }