/* WGTK Ops Tool — shared design system (office app + locksmith portal).
   Palette taken from wevegotthekey.co.uk: deep green as the structural/
   brand colour, orange reserved for calls to action, white cards on a
   pale green-grey page background. */

:root {
  --wgtk-green: #0f5c3e;
  --wgtk-green-dark: #0a4530;
  --wgtk-green-light: #1c8a5b;
  --wgtk-green-pale: #e3f5ec;
  --wgtk-orange: #f5801e;
  --wgtk-orange-dark: #d96a10;
  --ink: #16241d;
  --ink-soft: #5b6a62;
  --ink-faint: #8b978f;
  --bg: #f3f7f5;
  --card-bg: #ffffff;
  --border: #e2e8e4;
  --danger: #c0392b;
  --danger-bg: #fdecea;
  --warning-bg: #fff6e0;
  --warning-border: #f0d060;
  --shadow-sm: 0 1px 2px rgba(15, 92, 62, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 92, 62, 0.08);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font);
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--wgtk-green); }

h1, h2, h3 { color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }

p { color: var(--ink-soft); }

/* ---------- Office app: sidebar layout ---------- */

.layout { display: flex; align-items: flex-start; min-height: 100vh; }

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--wgtk-green-dark);
  color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.sidebar .brand {
  padding: 1.25rem 1.25rem 1rem;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sidebar .brand a { color: #fff; text-decoration: none; }
.sidebar nav { flex: 1; padding: 0.9rem 0.75rem; }
.sidebar .section { margin-bottom: 0.35rem; }
.sidebar .section-title {
  display: block;
  padding: 0.55rem 0.75rem;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: var(--radius-sm);
}
.sidebar .section-title:hover { background: rgba(255, 255, 255, 0.08); }
.sidebar .sub-link {
  display: block;
  padding: 0.45rem 0.75rem 0.45rem 1.6rem;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.88rem;
  border-radius: var(--radius-sm);
  margin: 0.05rem 0;
}
.sidebar .sub-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.sidebar .sub-link.active { color: #fff; background: var(--wgtk-green-light); }
.badge {
  display: inline-block;
  min-width: 1.15rem;
  padding: 0 0.4rem;
  margin-left: 0.4rem;
  background: var(--danger);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  line-height: 1.4rem;
  text-align: center;
  font-weight: 700;
}
.sidebar .user-box {
  padding: 0.9rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.7);
}
.sidebar .user-box a { color: rgba(255, 255, 255, 0.85); }

.content { flex: 1; padding: 1.75rem; max-width: 1800px; }

.nav-toggle { display: none; }
/* Phones: the sidebar becomes a bar across the top, menu folded away. */
@media (max-width: 800px) {
  .layout { flex-direction: column; align-items: stretch; }
  .sidebar { width: auto; min-height: 0; }
  .sidebar .brand { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
  .sidebar nav, .sidebar .user-box { display: none; }
  .sidebar.open nav, .sidebar.open .user-box { display: block; }
  .nav-toggle { display: inline-block; background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; padding: 0.35rem 0.8rem; font: 600 0.85rem var(--font); }
  .content { padding: 0.75rem; min-width: 0; width: 100%; }
}

/* ---------- Shared components ---------- */

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

table { border-collapse: collapse; width: 100%; }
th, td {
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 0.8rem;
  text-align: left;
  font-size: 0.9rem;
}
th { color: var(--ink-soft); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; }
tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; border-radius: var(--radius); }

.flag { color: var(--danger); font-weight: 700; }

/* £ impact of a flagged line: red for a shortage (actual < expected —
   stock missing), green for a surplus (actual > expected). */
.impact-negative { color: var(--danger); font-weight: 700; }
.impact-positive { color: var(--wgtk-green); font-weight: 700; }

.row-warn td { background: var(--warning-bg); }
.warn-tag {
  display: inline-block;
  background: var(--warning-border);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.5rem;
  margin: 0 0.3rem 0.3rem 0;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.trend-bar-track { background: var(--border); border-radius: var(--radius-pill); height: 0.5rem; width: 100%; min-width: 80px; overflow: hidden; }
.trend-bar { background: var(--wgtk-orange); border-radius: var(--radius-pill); height: 100%; }

/* Logs Engine "Nearest locksmiths" drive-time pill — 0-45 min green,
   46-60 amber, 61-90 pale red, over 90 red. See
   apps.logs_engine.templatetags.logs_engine_extras.drive_time_class. */
.drive-time-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.drive-time-green { background: var(--wgtk-green-pale); color: var(--wgtk-green-dark); }
.drive-time-amber { background: var(--warning-bg); color: #8a6d00; border: 1px solid var(--warning-border); }
.drive-time-pale-red { background: var(--danger-bg); color: var(--danger); }
.drive-time-red { background: var(--danger); color: #fff; }

/* Logs Engine "Jobs booked" hover preview — a small Static Maps image
   (this job in blue, the locksmith's other booked jobs in red), shown
   on hover with no JavaScript needed. */
.map-preview-trigger {
  position: relative;
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.map-preview-trigger .map-preview {
  display: none;
  position: absolute;
  z-index: 20;
  top: 1.3rem;
  left: 0;
}
.map-preview-trigger:hover .map-preview { display: block; }
.map-preview img {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  background: var(--card-bg);
}

/* Logs Engine "Nearest locksmiths" Teams shift badge — shown, never
   filters the list (shift data can be wrong or stale). */
.shift-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: middle;
}
.shift-badge.on { background: var(--wgtk-green-pale); color: var(--wgtk-green-dark); }
.shift-badge.off { background: var(--bg); color: var(--ink-faint); border: 1px solid var(--border); }

.btn {
  display: inline-block;
  background: var(--wgtk-orange);
  color: #fff;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  transition: background-color 0.15s, transform 0.05s;
}
.btn:hover { background: var(--wgtk-orange-dark); }
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-secondary {
  display: inline-block;
  background: #fff;
  color: var(--wgtk-green-dark);
  border: 1.5px solid var(--wgtk-green);
  padding: 0.6rem 1.3rem;
  border-radius: var(--radius-pill);
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}
.btn-secondary:hover { background: var(--wgtk-green-pale); }

/* Compact buttons inside a table cell or list row. */
.btn-small { padding: 0.25rem 0.75rem; font-size: 0.8rem; }
.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--wgtk-green-dark);
  text-decoration: underline;
  font-size: 0.8rem;
  cursor: pointer;
}
.inline-form { display: inline; margin: 0; }

.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.tabs li { flex: none; }
.tabs a {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 600;
}
.tabs a.tab-active { background: var(--wgtk-green); color: #fff; border-color: var(--wgtk-green); }

.jobs-by-day-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.jobs-by-day-heading h2 { margin-bottom: 0; }
.jobs-by-day-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.stat-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.25rem; }
.stat-row[hidden] { display: none; }
.stat-period-range { flex: 1 0 100%; margin: -0.35rem 0 0; }
.stat-tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  min-width: 150px;
  flex: 1;
  box-shadow: var(--shadow-sm);
}
.stat-tile .stat-label { color: var(--ink-soft); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
.stat-tile .stat-value { font-size: 1.5rem; font-weight: 800; color: var(--wgtk-green-dark); }
.stat-tile .stat-value.stat-value-maintenance { font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); }

.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.stats-header h2 { margin: 0; }
.stats-toggle { display: flex; gap: 0.4rem; }
.stats-toggle-btn {
  background: #fff;
  border: 1.5px solid var(--wgtk-green);
  color: var(--wgtk-green-dark);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.stats-toggle-btn.active { background: var(--wgtk-green); color: #fff; }

.toggle-row { display: flex; align-items: center; gap: 0.75rem; }
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: #ccc; transition: 0.15s; border-radius: var(--radius-pill); cursor: pointer; }
.toggle-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; transition: 0.15s; border-radius: 50%; box-shadow: var(--shadow-sm); }
.toggle-switch input:checked + .toggle-slider { background: var(--wgtk-green); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--wgtk-green-dark); outline-offset: 2px; }

.msg {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.92rem;
}

.empty { color: var(--ink-faint); font-style: italic; }
.back-link { display: inline-block; margin-bottom: 0.75rem; color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.back-link:hover { color: var(--wgtk-green); }
.sub { color: var(--ink-faint); font-size: 0.8rem; }

input[type=number], input[type=text] {
  font-family: inherit;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  font-size: 0.95rem;
  color: var(--ink);
}
input[type=number]:focus, input[type=text]:focus {
  outline: none;
  border-color: var(--wgtk-green);
  box-shadow: 0 0 0 3px var(--wgtk-green-pale);
}
input[type=number] { width: 5rem; }

/* ---------- Locksmith portal ---------- */

.portal-header {
  background: var(--wgtk-green-dark);
  color: #fff;
  padding: 0.9rem 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--shadow-md);
}
.portal-header a.brand {
  color: #fff; text-decoration: none; font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.portal-header .header-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.portal-header .signout a { color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.portal-header .signout a:hover { color: #fff; }
.header-search-link { color: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.header-search-link:hover { color: #fff; }
.panic-button {
  background: var(--danger); color: #fff; border: none;
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem; font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.panic-button:active { transform: scale(0.97); }

.portal-main { padding: 1.1rem; max-width: 600px; margin: 0 auto; padding-bottom: 3rem; }

.preview-banner {
  background: var(--wgtk-green-pale);
  border: 1px solid var(--wgtk-green-light);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-bottom: 1.1rem;
  font-size: 0.9rem;
  color: var(--wgtk-green-dark);
}
.preview-banner a { color: var(--wgtk-green-dark); font-weight: 700; }

.job {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.65rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s;
}
.job:hover { box-shadow: var(--shadow-md); }
.job-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.05s;
}
.job-link:active { transform: scale(0.99); }
.job-link strong { display: block; font-size: 1rem; }
.job-link span { color: var(--ink-soft); font-size: 0.85rem; }
.job-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.job-meta { font-size: 0.8rem; }
.job-location { font-size: 0.8rem; }
.job-stop {
  display: inline-block;
  color: var(--wgtk-orange-dark);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.job-link::after {
  content: "→";
  color: var(--wgtk-orange);
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.job-search-form { display: flex; gap: 0.5rem; }
.job-search-form input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
}
/* .portal-main .btn (mobile stepper buttons, further down this file)
   forces width:100% at equal specificity — the extra element selector
   here (button.btn, not just .btn) breaks the tie in our favour
   regardless of source order, so Search sits beside the input instead
   of hogging the row and squashing it down to nothing. */
.job-search-form button.btn { width: auto; flex-shrink: 0; }

.job-done { border-color: var(--wgtk-green-light); }
.job-tick { color: var(--wgtk-green-dark); font-weight: 700; }

/* Solid colour so a completed/failed job reads at a glance in the list,
   not just from the small tick/label text — requested after jobs added
   without a call/message got missed among a day's other jobs. */
.job-completed { background: var(--wgtk-green-pale); border-color: var(--wgtk-green-light); }
.job-failed { background: var(--danger-bg); border-color: var(--danger); }
.job-failed .job-tick { color: var(--danger); }

.job-extra-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.1rem 0.85rem;
  flex-wrap: wrap;
}
.job-call {
  color: var(--wgtk-green-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
}
.job-call:active { opacity: 0.7; }
.job-nav-link {
  display: inline-flex;
  align-items: center;
  color: var(--wgtk-green-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
}
.job-nav-link:active { opacity: 0.7; }
.job-detail-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}
.job-detail-btn:active { background: var(--wgtk-green-pale); }

dialog#detail-of-loss-dialog,
dialog#previous-visits-dialog,
dialog#fob-knows-dialog {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1.25rem;
  max-width: 90vw;
  width: 480px;
  max-height: 80vh;
  overflow-y: auto;
}
dialog#detail-of-loss-dialog::backdrop,
dialog#previous-visits-dialog::backdrop,
dialog#fob-knows-dialog::backdrop { background: rgba(22, 36, 29, 0.5); }
dialog#detail-of-loss-dialog h3,
dialog#previous-visits-dialog h3,
dialog#fob-knows-dialog h3 { margin-top: 0; }
dialog#detail-of-loss-dialog p {
  white-space: pre-wrap;
  color: var(--ink);
  line-height: 1.5;
}
#fob-knows-image { display: block; width: 100%; border-radius: var(--radius); margin-bottom: 0.5rem; }
#fob-knows-status { text-align: center; }
.previous-visit {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.previous-visit:last-child { border-bottom: none; }
.previous-visit-notes p { font-size: 0.9rem; color: var(--ink-soft); white-space: normal; }
.previous-visit p { margin: 0 0 0.3rem; color: var(--ink); }
.previous-visit ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: 0.9rem; }
.previous-visit-photos { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.previous-visit-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 4.5rem;
  text-decoration: none;
}
.previous-visit-photo img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.previous-visit-photo .sub {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  text-align: center;
  line-height: 1.2;
}

.nav-icon { vertical-align: -3px; margin-right: 0.3rem; }

.history-timeline { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; margin: 0.5rem 0; }
.history-timeline dt { color: var(--ink-soft); font-size: 0.85rem; font-weight: 600; }
.history-timeline dd { margin: 0; font-size: 0.85rem; }
.history-photo-group-label { margin-bottom: 0.3rem; font-weight: 600; }

.day-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.9rem; }
.day-nav h2 { margin: 0; font-size: 1rem; text-align: center; }
.day-nav-link { color: var(--wgtk-orange); text-decoration: none; font-weight: 700; font-size: 0.85rem; white-space: nowrap; flex-shrink: 0; }
.day-nav-right { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.day-nav-calendar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  font-size: 1.05rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.day-nav-calendar input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.disposal-list { list-style: none; padding: 0; margin: 0; }
.disposal-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-weight: 600; }
.disposal-list li:last-child { border-bottom: none; }
.disposal-list .sub { font-weight: 400; }

.stage-list { display: flex; flex-direction: column; gap: 0.9rem; }
.stage-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.85rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.stage-row:last-child { padding-bottom: 0; border-bottom: none; }
.stage-num {
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}
.stage-row.stage-done .stage-num {
  background: var(--wgtk-green);
  border-color: var(--wgtk-green);
  color: #fff;
}
.stage-body { flex: 1 1 140px; min-width: 0; }
.stage-body strong { display: block; font-size: 0.95rem; }
.stage-row form, .stage-row a.btn { flex-shrink: 0; width: auto; margin-left: auto; }
.stage-row .btn { padding: 0.5rem 0.9rem; font-size: 0.85rem; }

.job-address {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.job-address-text { flex: 1 1 200px; font-weight: 600; }
.job-address-copy { flex-shrink: 0; width: auto; padding: 0.5rem 0.9rem; font-size: 0.85rem; }

.fob-knows-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.fob-knows-btn { width: auto; padding: 0.35rem 0.7rem; font-size: 0.78rem; }
.fob-knows-btn .sub { font-size: inherit; color: inherit; opacity: 0.75; }

/* "The Fob Knows — full lookup": a full-screen, dark, swipeable card
   carousel (templates/locksmith_portal/_fob_knows_kb.html). Deliberately
   its own dark look, scoped under .fk so nothing leaks into the rest of
   the portal: glowing part numbers read in a dark footwell or in sun. */
.kb-modal[hidden] { display: none; }
.kb-modal { position: fixed; inset: 0; z-index: 1000; background: #050d0a; display: flex; flex-direction: column; }
.kb-modal-body { flex: 1; min-height: 0; display: flex; }

.fk {
  --fk-void: #050d0a; --fk-panel: #0b1a14; --fk-panel-2: #0f2219; --fk-line: #1d3a2d;
  --fk-mint: #3ff0a8; --fk-mint-dim: #1f8a5e; --fk-amber: #ff9a3c; --fk-ice: #7cc4ff; --fk-violet: #b99bff;
  --fk-text: #e4f3ec; --fk-text-2: #9dbcad; --fk-text-3: #6d8b7d; --fk-warn: #ffcf4a;
  --fk-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --fk-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; overflow: hidden;
  width: 100%; max-width: 560px; margin: 0 auto;
  background: var(--fk-void); color: var(--fk-text); font-family: var(--font);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.fk::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--fk-line) 1px, transparent 1px), linear-gradient(90deg, var(--fk-line) 1px, transparent 1px);
  background-size: 28px 28px; opacity: 0.35; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); }
.fk button:focus-visible, .fk a:focus-visible, .fk [tabindex]:focus-visible { outline: 2px solid var(--fk-amber); outline-offset: 2px; }
.fk a { color: var(--fk-ice); }

.fk-hud { position: relative; z-index: 2; padding: 14px 16px 10px; display: grid; gap: 10px; flex-shrink: 0; }
.fk-hud-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--fk-display); font-size: 0.74rem; letter-spacing: 0.2em; }
.fk-live { display: inline-flex; align-items: center; gap: 7px; color: var(--fk-mint); }
.fk-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--fk-mint); box-shadow: 0 0 10px var(--fk-mint); animation: fk-blink 1.6s infinite; }
@keyframes fk-blink { 50% { opacity: 0.3; } }
.fk-close { border: 1px solid var(--fk-line); background: transparent; color: var(--fk-text-2); border-radius: 8px; padding: 8px 12px; font: 600 0.74rem var(--fk-display); letter-spacing: 0.12em; }
.fk-segs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.fk-segs button { height: 18px; border: 0; background: none; padding: 0; display: grid; align-items: center; }
.fk-segs button::before { content: ""; height: 3px; border-radius: 3px; background: var(--fk-line); transition: background 0.25s, box-shadow 0.25s; }
.fk-segs button.done::before { background: var(--fk-mint-dim); }
.fk-segs button.on::before { background: var(--fk-mint); box-shadow: 0 0 8px var(--fk-mint); }
.fk-seg-label { display: flex; justify-content: space-between; font-family: var(--fk-display); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--fk-text-3); text-transform: uppercase; }
.fk-seg-label b { color: var(--fk-mint); font-weight: 600; }

.fk-track { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; outline: none; }
.fk-track::-webkit-scrollbar { display: none; }
.fk-card { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; overflow-y: auto; overflow-x: hidden; padding: 4px 16px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; -webkit-overflow-scrolling: touch; }
.fk-card > *, .fk-panel > * { min-width: 0; }
.fk-nav { position: relative; z-index: 2; display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 10px; padding: 10px 16px 14px; border-top: 1px solid var(--fk-line); flex-shrink: 0; }
.fk-nav button { height: 46px; border-radius: 12px; border: 1px solid var(--fk-line); background: var(--fk-panel); color: var(--fk-mint); font-size: 1.2rem; }
.fk-nav button:disabled { color: var(--fk-text-3); }
.fk-hint { text-align: center; font-family: var(--fk-display); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--fk-text-3); }
.fk-empty { position: relative; z-index: 1; flex: 1; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--fk-text-2); font-family: var(--fk-display); letter-spacing: 0.06em; }
.fk-empty p { color: inherit; }
.fk-error { color: #ff8f80 !important; }

.fk-k { font-family: var(--fk-display); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fk-text-3); }
.fk-panel { position: relative; background: linear-gradient(180deg, var(--fk-panel-2), var(--fk-panel)); border: 1px solid var(--fk-line); border-radius: 16px; padding: 14px; display: grid; gap: 10px; }
.fk-corner::after { content: ""; position: absolute; inset: 6px; border-radius: 12px; pointer-events: none; opacity: 0.7;
  background: linear-gradient(var(--fk-mint), var(--fk-mint)) top left / 14px 1.5px no-repeat, linear-gradient(var(--fk-mint), var(--fk-mint)) top left / 1.5px 14px no-repeat,
    linear-gradient(var(--fk-mint), var(--fk-mint)) bottom right / 14px 1.5px no-repeat, linear-gradient(var(--fk-mint), var(--fk-mint)) bottom right / 1.5px 14px no-repeat; }
.fk-giant { font-family: var(--fk-mono); font-weight: 800; font-size: clamp(2.4rem, 13vw, 3.4rem); line-height: 1.05; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.fk-glow-mint { color: var(--fk-mint); text-shadow: 0 0 24px rgba(63,240,168,0.45); }
.fk-glow-amber { color: var(--fk-amber); text-shadow: 0 0 24px rgba(255,154,60,0.45); }
.fk-glow-ice { color: var(--fk-ice); text-shadow: 0 0 24px rgba(124,196,255,0.45); }
.fk-glow-violet { color: var(--fk-violet); text-shadow: 0 0 24px rgba(185,155,255,0.4); }
.fk-center { text-align: center; }
.fk-sub { color: var(--fk-text-2); font-size: 0.92rem; line-height: 1.45; overflow-wrap: anywhere; }
.fk-meta { font-family: var(--fk-mono); font-size: 0.72rem; color: var(--fk-text-3); overflow-wrap: anywhere; }
.fk-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fk-code { font-family: var(--fk-mono); font-weight: 800; font-size: 1.05rem; }
.fk-bar-row { display: grid; gap: 5px; }
.fk-bar { height: 6px; border-radius: 6px; background: var(--fk-line); overflow: hidden; }
.fk-bar i { display: block; height: 100%; border-radius: 6px; background: var(--fk-mint); box-shadow: 0 0 10px var(--fk-mint); }
.fk-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fk-tag { display: inline-flex; align-items: center; font-family: var(--fk-display); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--fk-line); color: var(--fk-text-2); }
.fk-tag-ok { border-color: rgba(63,240,168,0.4); color: var(--fk-mint); background: rgba(63,240,168,0.07); }
.fk-center-tags { justify-content: center; }
.fk-tag-warn { border-color: rgba(255,207,74,0.45); color: var(--fk-warn); background: rgba(255,207,74,0.07); }
.fk-vote { display: flex; gap: 8px; }
.fk-vote button { min-height: 40px; min-width: 64px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--fk-line); background: var(--fk-panel); color: var(--fk-text-2); font: 600 0.9rem var(--fk-mono); }
.fk-vote button.on[data-v="1"] { border-color: rgba(63,240,168,0.55); color: var(--fk-mint); background: rgba(63,240,168,0.1); }
.fk-vote button.on[data-v="-1"] { border-color: rgba(255,143,128,0.55); color: #ff8f80; background: rgba(255,143,128,0.1); }
.fk-vote button:disabled { opacity: 0.6; }
.fk-reason { display: grid; gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid rgba(255,143,128,0.4); border-radius: 10px; background: var(--fk-panel); }
.fk-reason select, .fk-reason textarea { width: 100%; min-height: 40px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--fk-line); background: transparent; color: var(--fk-text-2); font: inherit; }
.fk-reason select option { color: #000; }
.fk-reason-actions { display: flex; gap: 8px; }
.fk-reason-actions button { min-height: 40px; padding: 6px 14px; border-radius: 10px; border: 1px solid var(--fk-line); background: var(--fk-panel); color: var(--fk-text-2); font: 600 0.9rem var(--fk-mono); }
.fk-reason-actions [data-fk-reason-send] { border-color: rgba(255,143,128,0.55); color: #ff8f80; }
.fk-gap { margin: 0; }
.fk-gap textarea { width: 100%; min-height: 64px; padding: 10px; border-radius: 10px; border: 1px solid var(--fk-line); background: var(--fk-void); color: var(--fk-text); font: 0.95rem var(--font); resize: vertical; }
.fk-gap select { width: 100%; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--fk-line); background: var(--fk-void); color: var(--fk-text); font: 0.95rem var(--font); }
.fk-gap textarea::placeholder { color: var(--fk-text-3); }
.fk-gap input[type=file] { color: var(--fk-text-2); font-size: 0.85rem; }
.fk-gap button { min-height: 44px; border-radius: 10px; border: 1px solid rgba(255,154,60,0.5); background: rgba(255,154,60,0.1); color: var(--fk-amber); font: 600 0.8rem var(--fk-display); letter-spacing: 0.12em; text-transform: uppercase; }
.fk-gap button:disabled { opacity: 0.6; }
.fk-gap-done { color: var(--fk-text-2); font-size: 0.9rem; overflow-wrap: anywhere; }
.fk-gap-done b { color: var(--fk-mint); }

.fk-veh-img { display: block; width: 100%; max-height: 180px; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(63,240,168,0.12)); }
.fk-plate { justify-self: start; background: #f7d117; color: #111; font-family: var(--fk-mono); font-weight: 800; font-size: 1.9rem; letter-spacing: 0.08em; padding: 6px 16px; border-radius: 8px; border: 3px solid #111; box-shadow: 0 0 30px rgba(247,209,23,0.18); }
.fk-veh { font-family: var(--fk-display); font-weight: 700; font-size: 1.35rem; line-height: 1.15; display: grid; gap: 2px; }
.fk-veh span { font-family: var(--font); font-weight: 500; font-size: 0.88rem; color: var(--fk-text-2); }
.fk-spec { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--fk-line); border: 1px solid var(--fk-line); border-radius: 12px; overflow: hidden; }
.fk-spec div { background: var(--fk-panel); padding: 9px 11px; display: grid; gap: 2px; }
.fk-spec b { font-family: var(--fk-mono); font-size: 0.86rem; }
.fk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fk-stats div { border: 1px solid var(--fk-line); border-radius: 12px; padding: 10px; display: grid; gap: 2px; background: var(--fk-panel); }
.fk-stats b { font-family: var(--fk-mono); font-size: 1.3rem; }
.fk-swipe { text-align: center; font-family: var(--fk-display); letter-spacing: 0.2em; font-size: 0.74rem; color: var(--fk-mint); }
.fk-swipe span { display: inline-block; animation: fk-nudge 1.4s ease-in-out infinite; }
@keyframes fk-nudge { 50% { transform: translateX(6px); } }
.fk-big-line { font-family: var(--fk-display); font-weight: 700; font-size: 1.15rem; }

.fk-art { width: 100%; max-width: 330px; height: auto; justify-self: center; overflow: hidden; }
.fk-a-dim { fill: none; stroke: var(--fk-line); stroke-width: 1; }
.fk-a-blade { fill: rgba(255,154,60,0.08); stroke: var(--fk-amber); stroke-width: 1.6; filter: drop-shadow(0 0 6px rgba(255,154,60,0.6)); }
.fk-a-chip { fill: rgba(63,240,168,0.08); stroke: var(--fk-mint); stroke-width: 1.6; filter: drop-shadow(0 0 6px rgba(63,240,168,0.6)); }
.fk-a-fob { fill: rgba(124,196,255,0.06); stroke: var(--fk-ice); stroke-width: 1.6; filter: drop-shadow(0 0 6px rgba(124,196,255,0.55)); }
.fk-a-wave { fill: none; stroke: var(--fk-mint); stroke-width: 1.2; opacity: 0; animation: fk-wave 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.fk-w2 { animation-delay: 0.8s; } .fk-w3 { animation-delay: 1.6s; }
@keyframes fk-wave { 0% { opacity: 0.8; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.5); } }

.fk-tool { font-family: var(--fk-display); font-weight: 700; font-size: 1.2rem; }
.fk-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fk-job { border: 1px solid rgba(63,240,168,0.45); background: rgba(63,240,168,0.06); border-radius: 10px; padding: 9px 10px; display: flex; gap: 8px; align-items: center; font-size: 0.86rem; }
.fk-job b { font-family: var(--fk-mono); color: var(--fk-mint); }
.fk-fallback { border: 1px dashed rgba(255,207,74,0.55); background: rgba(255,207,74,0.07); color: var(--fk-warn); border-radius: 12px; padding: 9px 12px; font: 600 0.74rem var(--fk-display); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; }
.fk-alert { border: 1px solid rgba(255,207,74,0.5); background: rgba(255,207,74,0.06); border-radius: 16px; padding: 14px; display: grid; gap: 8px; }
.fk-alert .fk-k { color: var(--fk-warn); }

.fk-msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
.fk-av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 700 0.8rem var(--fk-display); border: 1px solid var(--fk-mint-dim); color: var(--fk-mint); }
.fk-msg-body { border: 1px solid var(--fk-line); background: var(--fk-panel); border-radius: 4px 14px 14px 14px; padding: 10px 12px; display: grid; gap: 5px; }
.fk-msg-title { font-family: var(--fk-mono); font-size: 0.95rem; }
.fk-txt { font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; }
.fk-dashed { border-style: dashed; }
.fk-dashed .fk-txt, .fk-dashed .fk-msg-title { color: var(--fk-text-2); }
.fk-photo { display: block; max-width: 100%; border-radius: 10px; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .fk-track { scroll-behavior: auto; }
  .fk-live i, .fk-swipe span, .fk-a-wave { animation: none; }
  .fk-a-wave { opacity: 0.35; }
}

.stage-row.stage-multi-vehicle { border-bottom: none; padding-bottom: 0.3rem; }
.vehicle-list { display: flex; flex-direction: column; gap: 0.7rem; margin: 0 0 0.9rem; }
.vehicle-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
}
.vehicle-card-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.vehicle-card-head .plate,
.needs-disposal-list .plate,
.linked-job-card .plate {
  background: #ffd200;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: #17241a;
}
.vehicle-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.55rem; }
.vehicle-card-foot .btn-secondary, .vehicle-card-foot .btn { width: auto; padding: 0.45rem 0.8rem; font-size: 0.85rem; }
.vehicle-outcome-completed { color: var(--wgtk-green); font-weight: 600; }
.vehicle-outcome-failed { color: #c0392b; font-weight: 600; }

.vehicle-checkbox-list { display: flex; flex-direction: column; gap: 0.5rem; }
.vehicle-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
}
.vehicle-checkbox-row input[type=checkbox] { width: auto; flex-shrink: 0; }

form input[type=file] { display: block; width: 100%; margin-bottom: 0.5rem; }
textarea { width: 100%; padding: 0.6rem 0.7rem; font-size: 1rem; font-family: var(--font); border: 1px solid var(--border); border-radius: var(--radius-sm); resize: vertical; }

.notes-input-row { position: relative; }
.notes-input-row textarea { padding-right: 3rem; }
.mic-button {
  position: absolute; top: 0.5rem; right: 0.5rem;
  width: 2.2rem; height: 2.2rem;
  border: 1.5px solid var(--border); border-radius: 50%;
  background: #fff; font-size: 1.1rem; line-height: 1;
  cursor: pointer;
}
.mic-button.mic-listening { background: var(--danger-bg); border-color: var(--danger); }
.outcome-choice { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.outcome-choice label { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }

.field-group { margin-bottom: 1.1rem; }
.field-group > label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.4rem; }
.field-group input[type=text] { width: 100%; }
.disclaimer-text {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  font-size: 0.88rem;
  color: var(--ink);
}
.signature-pad {
  display: block;
  width: 100%;
  height: auto;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  touch-action: none;
  /* touch-action:none stops the page panning/zooming under a drag, but
     iOS Safari separately still offers its text-selection callout
     (the magnifying-glass/"Copy" popup) on a touch-and-hold over a
     canvas unless these are also set — without them, a signature drawn
     slowly/deliberately (exactly how someone signs their name) can get
     interrupted partway through on an iPhone. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Signature pop-out: the inline canvas above is too small to sign
   legibly on a phone, so signing itself happens in a full-screen
   overlay instead — these rules are for that overlay. */
.signature-preview {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  min-height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  background: #fafafa;
}
.signature-preview-done { color: var(--wgtk-green-dark); font-weight: 700; }
.signature-preview-done { flex-direction: column; gap: 0.25rem; padding: 0.4rem; }
.signature-preview-image { max-width: 100%; max-height: 8rem; background: #fff; }

.signature-modal[hidden] { display: none; }
.signature-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.signature-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  flex-shrink: 0;
}
.signature-modal-close {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink-soft);
  padding: 0.1rem 0.5rem;
}
.signature-pad-fullscreen {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  background: #fff;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.signature-modal-actions {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.signature-modal-actions .btn, .signature-modal-actions .btn-secondary { flex: 1; width: auto; }

.dispose-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.part-search { position: relative; flex: 1; min-width: 0; }
.part-search input[type=text] { width: 100%; padding: 0.55rem 0.7rem; font-size: 1rem; }
.dispose-row input[type=number] { width: 4.5rem; flex-shrink: 0; }
.client-supplied-label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--ink-soft); white-space: nowrap; flex-basis: 100%; }

.part-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 15;
  margin-top: 0.2rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  max-height: 220px;
  overflow-y: auto;
}
.part-suggestion { padding: 0.55rem 0.7rem; font-size: 0.9rem; cursor: pointer; border-bottom: 1px solid var(--border); }
.part-suggestion:last-child { border-bottom: none; }
.part-suggestion:active { background: var(--bg); }

.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 20, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 20;
  padding: 1rem;
}
.confirm-overlay[hidden] { display: none; }
.confirm-box {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 1.25rem 1.1rem;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-md);
}
.confirm-box h2 { margin-top: 0; }
.confirm-box ul { margin: 0.75rem 0; padding-left: 1.1rem; }
.confirm-box li { margin-bottom: 0.35rem; font-weight: 600; }
.confirm-box .btn, .confirm-box .btn-secondary { width: 100%; margin-top: 0.5rem; }

/* Portal buttons go full-width — easier to hit on a phone. */
.portal-main .btn, .portal-main .btn-secondary { width: 100%; padding: 0.85rem; font-size: 1rem; }

.photo-source-buttons { display: flex; gap: 0.5rem; margin-bottom: 0.35rem; }
/* Extra class + element beats .portal-main .btn-secondary above at
   equal specificity regardless of source order (see the same fix on
   .job-search-form button.btn) — these two sit side by side, not
   stacked full-width. */
.photo-source-buttons button.btn-secondary { width: auto; flex: 1; padding: 0.55rem 0.5rem; font-size: 0.85rem; }
.photo-input-summary { margin: 0.3rem 0 0; }
/* "Add more photos" (see base.html) swaps in for the camera/gallery row
   once a slot has its usual 3 — hidden needs restating over display:flex. */
.photo-source-buttons[hidden], .photo-add-more[hidden] { display: none; }
.photo-add-more { width: auto; padding: 0.55rem 0.9rem; font-size: 0.85rem; margin-top: 0.35rem; }
/* Visually hidden, NOT display:none — some mobile browsers (confirmed
   live: both iOS Safari and Android Chrome) silently refuse to open
   the camera/gallery picker on a programmatic .click() when the file
   input itself is display:none. Keeping it in the layout (off-screen,
   zero-size, clipped) instead of hiding it outright is the standard
   fix and works everywhere. */
.photo-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.fk-photo-name { font-size: 0.85rem; color: var(--wgtk-green); overflow-wrap: anywhere; }
.fk-photo-name:empty { display: none; }
.photo-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.photo-thumbs:empty { margin-top: 0; }
.photo-thumb { display: block; width: 3.6rem; height: 3.6rem; flex-shrink: 0; }
.photo-thumb-wrap { position: relative; display: block; flex-shrink: 0; }
.photo-remove {
  position: absolute; top: -0.45rem; right: -0.45rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  background: var(--danger); color: #fff; border: 2px solid var(--card-bg);
  font-size: 0.8rem; font-weight: 800; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.photo-remove:disabled { opacity: 0.5; }
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* Panel > Instruction letters map tab */
.letters-map { height: 70vh; min-height: 420px; border-radius: 8px; }

/* Panel > Insights: a compact desktop dashboard (the office side isn't
   used on phones) — a slim figures strip, then a 3x3 grid of
   equal-height cards that fits on about one screen at 1920px. One
   measure per chart, so one hue (brand green #1c8a5b, validated >= 3:1
   on white) on a pale same-hue track; numbers and labels in text
   colours, never the bar colour. */
.sidebar .sub-link-nested { padding-left: 2.5rem; font-size: 0.84rem; }
.ins h1 { margin: 0; font-size: 1.35rem; }
.ins-dates { font-size: 0.95rem; font-weight: 400; color: var(--ink-soft); margin-left: 0.5rem; }
.ins-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 1.5rem; margin-bottom: 1rem; }
.ins-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.82rem; }
.ins-chip { padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); border: 1px solid var(--border); background: #fff; color: var(--ink-soft); text-decoration: none; }
.ins-chip:hover { border-color: var(--wgtk-green-light); color: var(--wgtk-green); }
.ins-chip.is-active { background: var(--wgtk-green); border-color: var(--wgtk-green); color: #fff; }
.ins-filters input[type=date] { margin-left: 0.4rem; padding: 0.28rem 0.45rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; color: var(--ink); background: #fff; }
.ins-filters .ins-to { color: var(--ink-faint); }
.ins-filters input[type=date] + .ins-to + input[type=date] { margin-left: 0; }
.ins-apply { padding: 0.3rem 0.9rem; font-size: 0.82rem; }
.ins-kpis { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; align-items: baseline; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 0.8rem 1.25rem; margin-bottom: 1rem; }
.ins-kpi { display: flex; align-items: baseline; gap: 0.45rem; }
.ins-kpi-value { font-size: 1.35rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ins-kpi-label { color: var(--ink-soft); font-size: 0.85rem; }
.ins-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.ins-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.15rem; min-width: 0; min-height: 250px; }
.ins-card h2 { margin: 0 0 0.85rem; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.ins-card h2 span { font-size: 0.78rem; font-weight: 400; color: var(--ink-faint); margin-left: 0.35rem; }
.ins-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.ins-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label nums" "track track"; column-gap: 0.75rem; row-gap: 0.25rem; font-size: 0.84rem; outline: none; }
.ins-bar-label { grid-area: label; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-bar-nums { grid-area: nums; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ins-bar-value { color: var(--ink); font-weight: 600; }
.ins-bar-detail { color: var(--ink-faint); font-size: 0.78rem; margin-left: 0.45rem; }
.ins-bar-track { grid-area: track; height: 5px; border-radius: 3px; background: var(--wgtk-green-pale); }
.ins-bar-fill { display: block; height: 100%; min-width: 3px; border-radius: 3px; background: #1c8a5b; }
.ins-bar:hover .ins-bar-fill, .ins-bar:focus .ins-bar-fill { background: var(--wgtk-green); }
.ins-bar:focus-visible { box-shadow: 0 0 0 3px var(--wgtk-green-pale); border-radius: 4px; }
.ins-more { margin-top: 0.7rem; font-size: 0.8rem; }
.ins-more summary { cursor: pointer; color: var(--wgtk-green); }
.ins-more .ins-bars { margin-top: 0.6rem; }
.ins-cols { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 3px; height: 170px; }
.ins-col { display: flex; flex-direction: column; outline: none; min-width: 0; }
.ins-col-slot { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-bottom: 1px solid var(--border); }
.ins-col-bar { width: 100%; max-width: 24px; background: #1c8a5b; border-radius: 4px 4px 0 0; }
.ins-col:hover .ins-col-bar, .ins-col:focus .ins-col-bar { background: var(--wgtk-green); }
.ins-col-value { font-size: 0.68rem; color: var(--ink-soft); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.ins-col-label { font-size: 0.7rem; color: var(--ink-faint); text-align: center; min-height: 1rem; padding-top: 3px; }
.ins-table { margin-top: 0.5rem; font-size: 0.8rem; }
.ins-highlights dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 0.9rem; font-size: 0.84rem; }
.ins-highlights dt { color: var(--ink-faint); white-space: nowrap; }
.ins-highlights dd { margin: 0; color: var(--ink); }
.ins-footnote { color: var(--ink-faint); font-size: 0.76rem; margin: 1rem 0 0; }
@media (max-width: 1300px) { .ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .ins-grid { grid-template-columns: 1fr; } }

.totals-row td { font-weight: 700; border-top: 2px solid var(--border); }
.stat-value.impact-negative { color: var(--danger); }
.stat-value.impact-positive { color: var(--wgtk-green); }

/* "Coming to a phone near you" — the Fob Knows full lookup before it's
   switched on for a locksmith (Locksmith.fob_knows_kb_access): the
   button greyed out under a cinema marquee sign with chasing bulbs. */
.fk-soon { position: relative; display: inline-block; }
.fk-soon > button { opacity: 0.4; filter: grayscale(1); cursor: not-allowed; }
.fk-soon-banner {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg);
  display: grid; justify-items: center; gap: 1px; white-space: nowrap; pointer-events: none;
  padding: 4px 10px 5px; border-radius: 5px;
  background: #1a0f06; color: #ffd76a;
  font: 800 0.62rem/1.1 "Chakra Petch", "Segoe UI", system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255,190,70,0.7);
  box-shadow: 0 0 0 2px #1a0f06, 0 4px 14px rgba(0,0,0,0.25);
  border: 2px dotted #ffcf4a;
  animation: fk-bulbs 1.2s steps(2) infinite;
}
.fk-soon-banner small { font-size: 0.5rem; letter-spacing: 0.28em; color: #f5a623; text-shadow: none; }
@keyframes fk-bulbs { 50% { border-color: #f5801e; } }
@media (prefers-reduced-motion: reduce) { .fk-soon-banner { animation: none; } }

/* Poor/no signal (static/js/portal-offline.js): the status bar at the
   bottom, the "saved on your phone" screen after queuing a step, the
   "carry on" links on a job page, and a photo waiting to upload. */
.offline-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--wgtk-green-dark); color: #fff; font-size: 0.86rem; line-height: 1.4;
  display: grid; gap: 0.35rem; box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
}
.offline-banner[hidden] { display: none; }
.offline-banner-warn { background: #3a2a06; }
.offline-banner a { color: #ffd76a; font-weight: 700; }
.offline-banner button { margin-left: 0.4rem; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.4); background: transparent; color: #fff; font: inherit; font-weight: 700; }
.offline-saved { position: fixed; inset: 0; z-index: 950; background: rgba(10,20,15,0.55); display: grid; place-items: center; padding: 16px; }
.offline-saved-card { background: var(--card-bg); border-radius: var(--radius); padding: 1.5rem 1.25rem; max-width: 380px; width: 100%; display: grid; gap: 0.75rem; text-align: center; box-shadow: var(--shadow-md); }
.offline-saved-card h2 { margin: 0; }
.offline-saved-card p { margin: 0; line-height: 1.5; }
.offline-saved-icon { font-size: 2.4rem; }
.offline-saved-card .btn, .offline-saved-card .btn-secondary { display: block; text-align: center; text-decoration: none; }
.offline-steps { background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: var(--radius-sm); padding: 0.8rem 0.9rem; margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.45; }
.offline-steps[hidden] { display: none; }
.offline-steps-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.offline-steps-links a { text-decoration: none; width: auto; }
.photo-thumb-pending .photo-thumb img { opacity: 0.55; border-style: dashed; border-color: var(--wgtk-orange); }
.photo-thumb-pending::after { content: "⏳"; position: absolute; right: -0.35rem; bottom: -0.35rem; font-size: 0.95rem; background: var(--card-bg); border-radius: 50%; line-height: 1; padding: 0.1rem; }
body { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Reasons a Finish job save was refused, shown right above the button
   (the page-top message is off-screen by the time they've scrolled). */
.form-errors {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 2px solid #d64545;
  border-radius: 10px;
  background: #fdecec;
  color: #7a1c1c;
}
.form-errors ul { margin: 0.35rem 0 0; padding-left: 1.2rem; }

/* A stock-check part saved without a count (see stock_check_entry). */
tr.row-missing td { background: #fdecec; }
tr.row-missing input { border-color: #d64545; }

/* MET Police vehicle form (locksmith_portal/met_vehicle_form.html). */
.met-form select,
.met-form input[type=time] {
  width: 100%; padding: 0.55rem 0.7rem; font-size: 1rem; font-family: var(--font);
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--ink);
}
.met-form .met-pair { display: flex; gap: 0.8rem; }
.met-time-row { display: flex; gap: 0.5rem; align-items: center; }
.met-form .met-time-row input[type=time] { flex: 1 1 auto; width: auto; min-width: 8rem; }
.met-form .met-time-row .met-now { flex: 0 0 auto; width: auto; padding: 0.45rem 1rem; }
.met-form .met-pair > .field-group { flex: 1; min-width: 0; }
.met-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.4rem 1rem; }
.met-checks label { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.9rem; }
.met-checks input[type=checkbox] { flex-shrink: 0; }
.met-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
.met-vehicle { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.met-vehicle:last-child { border-bottom: none; }
.met-vehicle form { margin: 0; }
.met-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); background: var(--wgtk-green-pale); color: var(--wgtk-green-dark); }

/* "The Fob Knows" office page (templates/fob_knows/lookup.html): a dark
   desktop console, graphite + violet so it reads as its own tool next
   to the drivers' green version. Scoped under .fko. Desktop only. */
.fko {
  --fko-bg: #0d0f16; --fko-panel: #151824; --fko-panel-2: #1b1f2e; --fko-line: #272c3f;
  --fko-ink: #e9ecf6; --fko-mut: #8b93ab; --fko-violet: #8b7bff; --fko-ice: #4cc9f0; --fko-warn: #ffb547;
  --fko-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --fko-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: calc(100vh - 3.5rem);
  background: var(--fko-bg); color: var(--fko-ink); border-radius: var(--radius); overflow: hidden;
  font-size: 0.9rem; line-height: 1.45;
}
.fko a { color: var(--fko-ice); }
.fko button:focus-visible, .fko a:focus-visible, .fko input:focus-visible { outline: 2px solid var(--fko-violet); outline-offset: 2px; }
.fko-k { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fko-mut); }
.fko-mono { font-family: var(--fko-mono); }
.fko-muted { color: var(--fko-mut); margin: 0; }
.fko-violet { color: var(--fko-violet) !important; }

.fko-rail { background: var(--fko-panel); border-right: 1px solid var(--fko-line); padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.fko-search { display: grid; gap: 8px; }
.fko-search-row { display: flex; gap: 8px; align-items: stretch; }
.fko-plate { display: inline-flex; align-items: stretch; border-radius: 6px; overflow: hidden; background: #f7d117; color: #111; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.75); }
.fko-plate-gb { background: #0b3d91; color: #fff; font: 700 10px/1 Arial, sans-serif; display: flex; align-items: flex-end; padding: 5px; }
.fko-plate input, .fko-plate-txt { border: 0; background: transparent; width: 170px; padding: 6px 12px; font: 900 1.35rem "Arial Black", Arial, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #111; }
.fko-plate input::placeholder { color: rgba(0,0,0,0.3); }
.fko-plate input:focus { outline: none; }
.fko-plate:focus-within { box-shadow: inset 0 0 0 2px rgba(0,0,0,0.75), 0 0 0 3px var(--fko-violet); }
.fko-plate-static .fko-plate-txt { width: auto; font-size: 1.1rem; padding: 3px 12px; }
.fko-go { border: 0; border-radius: 8px; padding: 0 18px; background: linear-gradient(135deg, var(--fko-violet), #6a5cff); color: #fff; font: 600 0.95rem var(--fko-display); cursor: pointer; }
.fko-go:hover { filter: brightness(1.1); }
.fko-imgbox { position: relative; border-radius: 14px; border: 1px solid var(--fko-line); background: radial-gradient(90% 80% at 50% 35%, #2a2f48 0, var(--fko-panel) 75%); padding: 16px; min-height: 150px; display: flex; align-items: center; justify-content: center; }
.fko-imgbox img { position: relative; z-index: 1; display: block; width: 100%; height: auto; max-height: 220px; object-fit: contain; }
.fko-imgbox-empty::after { content: "No photo for this vehicle"; color: var(--fko-mut); font-size: 0.8rem; }
.fko-glow { position: absolute; left: 14%; right: 14%; bottom: 16px; height: 14px; border-radius: 50%; background: rgba(139,123,255,0.35); filter: blur(10px); }
.fko-name { font: 700 1.35rem/1.2 var(--fko-display); }
.fko-name small { display: block; margin-top: 4px; font: 500 0.82rem var(--font); color: var(--fko-mut); }
.fko-spec { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 0.8rem; }
.fko-spec dt { color: var(--fko-mut); }
.fko-spec dd { margin: 0; font-family: var(--fko-mono); overflow-wrap: anywhere; }
.fko-chips, .fko-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.fko-meta { color: var(--fko-mut); font-size: 0.78rem; }
.fko-meta-inline { opacity: 0.7; margin-left: 6px; }
.fko-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 9px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.fko-chip-ice { background: rgba(76,201,240,0.12); color: var(--fko-ice); }
.fko-chip-warn { background: rgba(255,181,71,0.12); color: var(--fko-warn); }
.fko-chip-exact { background: rgba(94,234,160,0.14); color: #5eeaa0; box-shadow: inset 0 0 0 1px rgba(94,234,160,0.4); }
.fko-chip-similar { background: transparent; color: var(--fko-mut); border: 1px dashed rgba(139,147,171,0.6); }
.fko-kpi .fko-chips { margin-top: 4px; }
.fko-kpi .fko-chip { white-space: normal; }
.fko-key { display: grid; gap: 8px; font-size: 0.78rem; color: var(--fko-mut); border: 1px solid var(--fko-line); border-radius: 10px; padding: 10px 12px; }
.fko-key div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fko-recent { display: grid; gap: 6px; }
.fko-recent a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--fko-panel-2); color: var(--fko-ink); text-decoration: none; font-size: 0.8rem; border: 1px solid transparent; }
.fko-recent a span:last-child { color: var(--fko-mut); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fko-recent a:hover, .fko-recent a.on { border-color: var(--fko-violet); }
.fko-mode { margin-top: auto; font-size: 0.75rem; color: var(--fko-mut); border-top: 1px solid var(--fko-line); padding-top: 12px; }

.fko-main { padding: 22px 28px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fko-empty { margin: auto; max-width: 52ch; text-align: center; display: grid; gap: 10px; padding: 60px 0; }
.fko-empty h1 { margin: 0; font: 700 1.6rem/1.2 var(--fko-display); text-wrap: balance; }
.fko-empty p { margin: 0; color: var(--fko-mut); }
.fko-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--fko-line); }
.fko-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 12px; color: var(--fko-mut); font: 500 0.88rem var(--font); cursor: pointer; }
.fko-tabs button:hover { color: var(--fko-ink); }
.fko-tabs button.on { color: var(--fko-ink); border-bottom-color: var(--fko-violet); }
.fko-tabs em { font-style: normal; font-size: 0.7rem; background: var(--fko-panel-2); border-radius: 999px; padding: 1px 7px; margin-left: 6px; color: var(--fko-mut); }
.fko-pane { display: flex; flex-direction: column; gap: 16px; }
.fko-pane[hidden] { display: none; }
.fko-fallback { border: 1px dashed rgba(139,123,255,0.5); color: var(--fko-violet); border-radius: 10px; padding: 9px 14px; font-size: 0.82rem; }
.fko-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fko-kpi { background: var(--fko-panel); border: 1px solid var(--fko-line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.fko-kpi b { font: 700 1.45rem/1.15 var(--fko-mono); color: var(--fko-ice); overflow-wrap: anywhere; }
.fko-kpi small { color: var(--fko-mut); font-size: 0.75rem; }
.fko-warn { border: 1px solid rgba(255,181,71,0.35); background: rgba(255,181,71,0.08); color: var(--fko-warn); border-radius: 10px; padding: 11px 14px; }
.fko-warn-block { display: grid; gap: 6px; }
.fko-warn-block .fko-k, .fko-warn-block .fko-meta { color: rgba(255,181,71,0.75); }
.fko-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }
.fko-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.fko-box { background: var(--fko-panel); border: 1px solid var(--fko-line); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fko-box h2 { margin: 0; font: 600 0.72rem var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fko-mut); }
.fko-box h2:not(:first-child) { margin-top: 8px; }
.fko-row { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--fko-line); padding-top: 8px; }
.fko-bar-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.fko-bar-meta { padding-left: 76px; margin-top: -4px; }
.fko-bar { height: 8px; border-radius: 9px; background: var(--fko-panel-2); overflow: hidden; }
.fko-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--fko-violet), var(--fko-ice)); }
.fko-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.fko-giant { font: 700 2.4rem/1 var(--fko-mono); color: var(--fko-ice); text-shadow: 0 0 22px rgba(76,201,240,0.25); }
.fko-giant.fko-violet { text-shadow: 0 0 22px rgba(139,123,255,0.3); }
.fko-giant-sm { font-size: 1.5rem; min-width: 90px; }
.fko-trow { display: flex; gap: 18px; align-items: flex-start; border-top: 1px solid var(--fko-line); padding-top: 12px; }
.fko-trow:first-of-type { border-top: 0; padding-top: 0; }
.fko-trow-body { flex: 1; min-width: 0; display: grid; gap: 6px; padding-top: 6px; }
.fko-tool { font: 700 1.25rem var(--fko-display); color: var(--fko-violet); }
.fko-tick { color: var(--fko-ice); }
.fko-entry { display: flex; gap: 12px; border-top: 1px solid var(--fko-line); padding-top: 10px; }
.fko-box > .fko-entry:first-child, .fko-box > h2 + .fko-entry, .fko-box > p + .fko-entry { border-top: 0; padding-top: 0; }
.fko-av { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--fko-panel-2); border: 1px solid var(--fko-line); display: grid; place-items: center; font: 600 0.7rem var(--fko-mono); color: var(--fko-mut); }
.fko-entry-body { flex: 1; min-width: 0; display: grid; gap: 4px; overflow-wrap: anywhere; }
.fko-entry-similar .fko-entry-body { border-left: 2px dashed rgba(139,123,255,0.45); padding-left: 10px; }
.fko-photo { display: block; max-width: 100%; max-height: 260px; border-radius: 10px; border: 1px solid var(--fko-line); margin-top: 4px; }
.fko-votes { font-family: var(--fko-mono); color: var(--fko-mut); }
.fko-votes span { margin-left: 6px; }
.fko-vote { display: inline-flex; gap: 6px; }
.fko-vote button { border: 1px solid var(--fko-line); background: var(--fko-panel-2); color: var(--fko-mut); border-radius: 8px; padding: 3px 10px; font: 600 0.78rem var(--fko-mono); cursor: pointer; }
.fko-vote button:hover { color: var(--fko-ink); }
.fko-vote button.on[data-v="1"] { border-color: rgba(76,201,240,0.6); color: var(--fko-ice); background: rgba(76,201,240,0.1); }
.fko-vote button.on[data-v="-1"] { border-color: rgba(255,143,128,0.6); color: #ff8f80; background: rgba(255,143,128,0.1); }
.fko-vote button:disabled { opacity: 0.6; }
/* The Fob Knows office page on a phone: one column — search, the
   vehicle, the topics, then adding and recent lookups. The rail's
   pieces join the page's own column (display: contents) so they can
   be put in that order. */
@media (max-width: 800px) {
  .fko { display: flex; flex-direction: column; gap: 14px; padding: 14px; min-height: 0; }
  .fko-rail { display: contents; }
  .fko-main { order: 2; padding: 0; gap: 14px; }
  .fko-key, .fko-add { order: 3; }
  .fko-recent-k, .fko-recent { order: 4; }
  .fko-mode { order: 5; margin-top: 0; }
  .fko-search-row .fko-plate { flex: 1; min-width: 0; }
  .fko-plate input { width: 100%; min-width: 0; }
  .fko-go { padding: 0 16px; min-height: 44px; }
  .fko-imgbox { min-height: 0; padding: 10px; }
  .fko-imgbox img { max-height: 150px; }
  .fko-imgbox-empty, .fko-plate-static { display: none; }
  .fko-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .fko-tabs button { white-space: nowrap; padding: 12px 10px; }
  .fko-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fko-two, .fko-grid { grid-template-columns: minmax(0, 1fr); }
  .fko-box { padding: 14px; }
  .fko-empty { padding: 30px 0; }
  .fko-empty h1 { font-size: 1.3rem; }
  .fko-add select, .fko-add input, .fko-add textarea { font-size: 16px; } /* no zoom-in on iPhone */
  .fko-time-head b { min-width: 0; flex-basis: 100%; }
}
.fko-time { border-top: 1px solid var(--fko-line); padding-top: 10px; }
.fko-box > h2 + .fko-time { border-top: 0; padding-top: 0; }
.fko-time-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.fko-time-head b { min-width: 110px; }
.fko-time-people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 0.82rem; color: var(--fko-mut); }
.fko-time-people span { border: 1px solid var(--fko-line); border-radius: 999px; padding: 2px 10px; }
.fko-time-people b { color: inherit; font-weight: 600; }
.fko-time-more summary { margin-top: 6px; cursor: pointer; font-size: 0.82rem; color: var(--fko-ice); }
.fko-time-more[open] summary { color: var(--fko-mut); }
.fko-time-people i { font-style: normal; opacity: 0.7; }
.fko-add { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--fko-line); border-radius: 12px; background: var(--fko-panel); }
.fko-add select, .fko-add input, .fko-add textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--fko-line); border-radius: 8px; padding: 8px 10px; background: rgba(255,255,255,0.04); color: inherit; font: inherit; }
.fko-add select option { color: #111; }
.fko-add input[hidden], .fko-add select[hidden] { display: none; }
.fko-add input[type=file] { padding: 6px; }
.fko-add textarea { resize: vertical; }
.fko-add .fko-go { padding: 9px 18px; align-self: flex-start; }
.fko-add .fko-go:disabled { opacity: 0.6; cursor: default; }
.fko-add > small { font-size: 0.75rem; }
.fko-added { display: flex; flex-direction: column; gap: 6px; }
.fko-added:empty { display: none; }
.fko-added-row { font-size: 0.82rem; border-top: 1px solid var(--fko-line); padding-top: 6px; overflow-wrap: anywhere; }
.fko-added-row small { display: block; color: var(--fko-mut); }
.fko-reason { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 6px; }
.fko-reason select, .fko-reason input, .fko-reason button { border: 1px solid var(--fko-line); background: var(--fko-panel-2); color: var(--fko-ink); border-radius: 8px; padding: 3px 8px; font: 0.78rem var(--fko-mono); }
.fko-reason select option { color: #000; }
.fko-reason button { cursor: pointer; font-weight: 600; }
.fko-reason [data-fko-reason-send] { border-color: rgba(255,143,128,0.6); color: #ff8f80; }

/* ---------- Driving Scores (day-by-day cards) ---------- */

.ds-filters { display: flex; flex-direction: column; gap: 0.75rem; }
.ds-filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; }
.ds-dates { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.ds-dates label { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--ink-soft); gap: 0.2rem; }
.ds-dates input[type="date"] { padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.ds-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ds-quick-btn { padding: 0.35rem 0.75rem; font-size: 0.8rem; }
.ds-locksmith-picker summary { cursor: pointer; color: var(--ink-soft); }
.ds-all { display: block; margin: 0.6rem 0 0.4rem; font-weight: 600; }
.ds-locksmith-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.3rem 1rem;
  max-height: 220px; overflow-y: auto; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.ds-locksmith-list label { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-update { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0 0 1rem; }

.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1rem; align-items: start; }
.ds-card { margin: 0; }
.ds-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; }
.ds-name { font-weight: 700; font-size: 1rem; text-decoration: none; color: var(--ink); }
.ds-name:hover { text-decoration: underline; }
.ds-score {
  min-width: 3.2rem; padding: 0.35rem 0.5rem; border-radius: var(--radius-sm);
  font-size: 1.4rem; font-weight: 800; text-align: center; line-height: 1.1;
}

.ds-good { background: var(--wgtk-green-pale); color: var(--wgtk-green); }
.ds-bad { background: var(--danger-bg); color: var(--danger); }
.ds-none { background: #eef1ef; color: var(--ink-faint); }

.ds-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; }
.ds-day {
  display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0.25rem 0;
  border: 1px solid transparent; border-radius: 8px; font: inherit; line-height: 1.15;
}
button.ds-day { cursor: pointer; }
button.ds-day:hover { border-color: currentColor; }
.ds-day.ds-selected { border-color: currentColor; box-shadow: 0 0 0 2px currentColor inset; }
.ds-dow { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; }
.ds-date { font-size: 0.7rem; opacity: 0.8; }
.ds-val { font-size: 0.9rem; font-weight: 700; }

.ds-detail { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.ds-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.ds-pill { padding: 0.1rem 0.55rem; border-radius: var(--radius-pill); font-weight: 700; }
.ds-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 0.5rem; }
.ds-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 8px; background: var(--bg); }
.ds-stats .ds-warn { background: var(--warning-bg); }
.ds-events { width: 100%; font-size: 0.85rem; }
.ds-stats strong { white-space: nowrap; }
.ds-key { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; font-size: 0.8rem; color: var(--ink-soft); margin: -0.25rem 0 1rem; }
.ds-key span.ds-swatch { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 4px; vertical-align: middle; margin-right: 0.3rem; }

/* ---------- Fleet KPIs scorecard ---------- */
.kpi-table th .sub { font-weight: 400; text-transform: none; letter-spacing: 0; }
.kpi-cell { font-weight: 700; }
.kpi-cell a { color: inherit; }
.kpi-pass { background: var(--wgtk-green-pale); color: var(--wgtk-green); }
.kpi-miss { background: var(--danger-bg); color: var(--danger); }
.kpi-provisional { background: var(--warning-bg); color: #8a6d00; }
.kpi-none { color: var(--ink-faint); }
.kpi-misses { font-weight: 800; text-align: center; }

/* ---------- Complaints, damage & warranty log ---------- */
.inc-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.inc-filters label { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--ink-soft); gap: 0.2rem; }
.inc-filters select, .inc-filters input[type="date"],
.inc-form select, .inc-form input[type="date"] {
  padding: 0.45rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; background: #fff;
}
.inc-form { max-width: 640px; }
.inc-form .field-group { margin-bottom: 0.9rem; }
.inc-form .field-group > label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.inc-form select, .inc-form input[type="date"] { min-width: 260px; }
.tk-table td { white-space: nowrap; }
.tk-table td.sub { white-space: normal; min-width: 220px; }
.kpi-head { cursor: help; white-space: nowrap; }
.kpi-target { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.kpi-table td.kpi-cell { white-space: nowrap; }
.kpi-table td.kpi-cell .sub { font-weight: 500; }

/* Panelled Jobs Overall — Samsara van distance columns. */
.van-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-start; justify-content: space-between; }
.van-toolbar .tabs { margin-bottom: 0.75rem; }
.van-cell { white-space: nowrap; }
.van-cell .van-who, .van-cell .sub { display: block; }
.van-cell .van-who { font-size: 0.82rem; margin-top: 0.2rem; }
.van-cell summary { cursor: pointer; list-style: none; }
.van-cell summary::-webkit-details-marker { display: none; }
.van-runners { margin: 0.4rem 0 0; padding-left: 1.3rem; font-size: 0.82rem; }
.van-runners li { margin-bottom: 0.2rem; }

/* Locksmith dashboard: completed jobs still needing parts disposed. */
.needs-disposal-card { border-left: 4px solid var(--wgtk-orange); }
.needs-disposal-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.needs-disposal-list li { border-top: 1px solid var(--border); }
.needs-disposal-list li:first-child { border-top: none; }
.needs-disposal-list a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0;
  color: var(--ink);
  text-decoration: none;
}

/* Job overview: another of today's jobs on the same vehicle to copy from. */
.linked-job-card { border-left: 4px solid var(--wgtk-green); }

/* The Fob Knows flip card on the job overview (_exact_trim.html):
   one line on the front, the full exact-trim detail on the back; it
   turns over like a playing card. */
.xt { perspective: 1400px; margin-bottom: 1.25rem; }
.xt-inner { position: relative; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(.3,.7,.3,1), height 0.3s ease; }
.xt.flipped .xt-inner { transform: rotateY(180deg); }
.xt-face { position: absolute; top: 0; left: 0; right: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.xt-back { transform: rotateY(180deg); padding: 1.1rem 1.1rem 0.9rem; }
@media (prefers-reduced-motion: reduce) { .xt-inner { transition: none; } }

.xt-front-btn { display: grid; gap: 0.6rem; width: 100%; padding: 0.85rem 1rem; text-align: left; background: none; border: 0; border-radius: var(--radius); color: inherit; font: inherit; cursor: pointer; }
.xt-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.xt-brand { font-weight: 700; }
.xt-badge { background: var(--wgtk-green-pale); color: var(--wgtk-green); border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.xt-badge-none { background: var(--bg); color: var(--ink-soft); }
.xt-stats { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.xt-stat { flex: 1 1 5.5rem; min-width: 0; background: var(--bg); border-radius: var(--radius-sm); padding: 0.4rem 0.55rem; }
.xt-stat-wide { flex-basis: 100%; }
.xt-stat small { display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.xt-stat b { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xt-stat-ok { background: var(--wgtk-green-pale); }
.xt-stat-ok b { color: var(--wgtk-green); }
.xt-stat-bad { background: var(--danger-bg); }
.xt-stat-bad b { color: var(--danger); }
.xt-empty { font-size: 0.88rem; color: var(--ink-soft); }
.xt-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.xt-missing { font-size: 0.78rem; font-weight: 600; color: #9a6b00; background: var(--warning-bg); border-radius: 999px; padding: 0.1rem 0.55rem; }
.xt-hint { font-size: 0.8rem; color: var(--wgtk-green); font-weight: 600; white-space: nowrap; }
.xt-hint-icon { display: inline-block; transition: transform 0.3s; }
.xt-front-btn:hover .xt-hint-icon, .xt-front-btn:focus-visible .xt-hint-icon { transform: rotate(180deg); }

/* While the card loads. */
.xt-loading { display: grid; gap: 0.45rem; margin-bottom: 1.25rem; padding: 0.85rem 1rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.xt-loading-text { font-size: 0.85rem; color: var(--ink-soft); }
.xt-bar { position: relative; height: 4px; border-radius: 999px; background: var(--wgtk-green-pale); overflow: hidden; }
.xt-bar i { position: absolute; top: 0; bottom: 0; width: 35%; border-radius: inherit; background: var(--wgtk-green); animation: xt-slide 1.2s ease-in-out infinite; }
@keyframes xt-slide { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .xt-bar i { animation: none; left: 0; width: 100%; opacity: 0.5; } }

.xt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.xt-head h3 { margin: 0; font-size: 1rem; }
.xt-flipback { background: none; border: 0; color: var(--wgtk-green); font: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer; padding: 0.2rem 0; }
.xt-sub { color: var(--ink-soft); font-size: 0.8rem; margin: 0.15rem 0 0.75rem; }
.xt-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; margin-bottom: 0.75rem; }
.xt-fact { background: var(--bg); border-radius: var(--radius-sm); padding: 0.45rem 0.55rem; min-width: 0; }
.xt-fact span { display: block; font-size: 0.66rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.xt-fact b { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 0.95rem; overflow-wrap: anywhere; }
.xt-fact small { display: block; color: var(--ink-soft); font-size: 0.7rem; overflow-wrap: anywhere; }
.xt-fact-missing b, .xt-fact-missing small { color: var(--ink-faint); }
.xt-similar { font-size: 0.88rem; color: var(--ink-soft); background: var(--bg); border-radius: var(--radius-sm); padding: 0.55rem 0.7rem; }
.xt-alert { background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: var(--radius-sm); padding: 0.5rem 0.65rem; margin-bottom: 0.6rem; font-size: 0.9rem; }
.xt-sec { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin: 0.85rem 0 0.25rem; }
.xt-sec span { color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.xt-time { padding: 0.35rem 0; border-top: 1px solid var(--border); font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; align-items: baseline; }
.xt-time b { flex-basis: 100%; }
.xt-time span { color: var(--ink-soft); }
.xt-time strong { color: var(--ink); font-weight: 600; }
.xt-time-this b { color: var(--wgtk-green); }
.xt-this { font-style: normal; background: var(--wgtk-green-pale); color: var(--wgtk-green); border-radius: 999px; padding: 0 0.45rem; font-size: 0.68rem; font-weight: 600; }
.xt-note { padding: 0.35rem 0; border-top: 1px solid var(--border); font-size: 0.9rem; }
.xt-note small { display: block; color: var(--ink-faint); font-size: 0.72rem; }
.xt-part { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.45rem 0; border-top: 1px solid var(--border); }
.xt-part b { font-family: ui-monospace, Menlo, monospace; }
.xt-part small { display: block; color: var(--ink-soft); font-size: 0.75rem; }
.xt-part-similar small { color: #9a6b00; }
.xt-gap { padding: 0.45rem 0; border-top: 1px dashed var(--border); }
.xt-gap-row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.xt-gap-row b { font-size: 0.92rem; }
.xt-gap-row small { display: block; color: var(--ink-soft); font-size: 0.75rem; }
.xt-add { border: 1px solid var(--wgtk-green); color: var(--wgtk-green); background: var(--card-bg); border-radius: 999px; padding: 0.3rem 0.85rem; font-weight: 600; font-size: 0.85rem; white-space: nowrap; cursor: pointer; }
.xt-form { display: grid; gap: 0.4rem; margin-top: 0.45rem; }
.xt-addform { display: grid; gap: 0.4rem; margin-top: 0.3rem; }
.xt-addform select, .xt-addform input[type=text], .xt-addform textarea { width: 100%; box-sizing: border-box; min-height: 2.4rem; padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 16px; background: #fff; color: inherit; }
.xt-addform [hidden] { display: none !important; }
.xt-addform .xt-save { justify-self: start; }
.xt-added:empty { display: none; }
.xt-form[hidden] { display: none; }
.xt-optional { margin: 0.6rem 0 0.2rem; }
.xt-reveal { background: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.75rem; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.xt-reveal[aria-expanded="true"] span { display: inline-block; transform: rotate(90deg); }
.xt-reveal-body { margin-top: 0.45rem; }
.xt-form select { width: 100%; box-sizing: border-box; min-height: 2.4rem; padding: 0.35rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; background: #fff; color: inherit; }
.xt-form textarea { width: 100%; box-sizing: border-box; padding: 0.45rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.xt-save { justify-self: start; background: var(--wgtk-green); color: #fff; border: 0; border-radius: 999px; padding: 0.4rem 1rem; font-weight: 600; cursor: pointer; }
.xt-done { margin-top: 0.3rem; color: var(--wgtk-green); font-size: 0.85rem; font-weight: 600; }
.xt-open-fk { display: block; width: 100%; margin-top: 0.8rem; background: none; border: 0; color: var(--wgtk-green); font: inherit; font-weight: 600; cursor: pointer; }
.sp-stock { display: inline-block; padding: 0.2rem 0.55rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.sp-stock-ok { background: var(--wgtk-green-pale); color: var(--wgtk-green); }
.sp-stock-none { background: var(--danger-bg); color: var(--danger); }
.sp-stock-unknown { color: var(--ink-faint); font-weight: 400; }

/* Office MET export (job_completion/met_export.html). */
.met-export-form { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: flex-end; }
.met-export-form label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 600; font-size: 0.9rem; }
.met-export-form input[type=date], .met-export-form select { padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; background: #fff; }

/* The Fob Knows' sign-in and set-password pages (templates/fob_knows/login.html etc.). */
.fk-signin { max-width: 380px; margin: 3rem auto; }
.fk-signin h1 { text-align: center; }
.fk-signin-form { display: grid; gap: 0.45rem; }
.fk-signin-form input { width: 100%; box-sizing: border-box; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 16px; }
.fk-signin-form .btn { margin-top: 0.4rem; }
.fk-signin-form small { color: var(--ink-faint); font-size: 0.78rem; }
.fk-signin-error { color: var(--danger); margin: 0; }
.fk-signin-staff { text-align: center; margin-top: 1.25rem; font-size: 0.9rem; }