/*!
* PAT Test PWA
* v23 (June 2026)
* Copyright (c) 2026 Peter Birchley. All rights reserved.
* Unauthorised use, reproduction, or distribution prohibited.
* See LICENSE.txt for full terms.
*/
/* ===== Theme tokens =====
:root carries the LIGHT theme by default. The dark theme is applied either via
the prefers-color-scheme media query (state.theme === 'system') or via the
.theme-force-dark class on (state.theme === 'dark'). .theme-force-light
forces light regardless of device preference.
v8-2: switched from [data-theme] attribute to class. iOS Safari in PWA mode
appears to break form-input focus when a data-* attribute is set on ;
classes don't trigger the same quirk. */
:root, .theme-force-light {
--bg: #f3f4f6;
--text: #111827;
--text-muted: #6b7280;
--text-hint: #9ca3af;
--card-bg: #ffffff;
--input-bg: #ffffff;
--border: #e5e7eb;
--border-strong: #d1d5db;
--accent: #2563eb;
--accent-soft: #eff6ff;
--accent-text: #1e40af;
--accent-border: #bfdbfe;
--accent-hover: #dbeafe;
--pass: #16a34a;
--pass-shadow: #15803d;
--fail: #dc2626;
--fail-shadow: #b91c1c;
--fail-soft-bg: #fef2f2;
--fail-soft-text: #991b1b;
--fail-soft-border: #fecaca;
--fail-soft-hover: #fee2e2;
--row-active: #f9fafb;
--row-separator: #f3f4f6;
--quick-bg: #ffffff;
--quick-text: #374151;
--neutral-bg: #f3f4f6;
--neutral-bg-hover: #e5e7eb;
--neutral-text: #374151;
--shadow: rgba(0,0,0,0.08);
--backdrop: rgba(0,0,0,0.4);
--modal-shadow: rgba(0,0,0,0.15);
/* v12: warm-amber tokens for the calibration-due chip + search-jump flash.
Light theme uses Tailwind amber-100/800/300 + amber-200 for the flash so
the chip reads as a clearly warning-coloured pill against white cards. */
--warn-soft-bg: #fef3c7;
--warn-soft-text: #92400e;
--warn-soft-border: #fcd34d;
--highlight-flash: #fde68a;
/* v17: action-flash ring colours. Pass = translucent green, neutral = grey. */
--flash-pass-ring: rgba(22, 163, 74, 0.45);
--flash-neutral-ring: rgba(107, 114, 128, 0.40);
}
@media (prefers-color-scheme: dark) {
:root:not(.theme-force-light) {
--bg: #0f172a;
--text: #f1f5f9;
--text-muted: #94a3b8;
--text-hint: #64748b;
--card-bg: #1e293b;
--input-bg: #1e293b;
--border: #334155;
--border-strong: #475569;
--accent: #3b82f6;
--accent-soft: #1e3a8a;
--accent-text: #93c5fd;
--accent-border: #1e40af;
--accent-hover: #1e40af;
--pass: #22c55e;
--pass-shadow: #16a34a;
--fail: #ef4444;
--fail-shadow: #dc2626;
--fail-soft-bg: #2d0a0a;
--fail-soft-text: #fca5a5;
--fail-soft-border: #7f1d1d;
--fail-soft-hover: #450a0a;
--row-active: #0f172a;
--row-separator: #1e293b;
--quick-bg: #1e293b;
--quick-text: #e2e8f0;
--neutral-bg: #334155;
--neutral-bg-hover: #475569;
--neutral-text: #e2e8f0;
--shadow: rgba(0,0,0,0.4);
--backdrop: rgba(0,0,0,0.6);
--modal-shadow: rgba(0,0,0,0.5);
/* v12 dark equivalents — deep amber-900 for chip surface, amber-300
for text, amber-700 for the border. Flash uses amber-900. */
--warn-soft-bg: #422006;
--warn-soft-text: #fcd34d;
--warn-soft-border: #92400e;
--highlight-flash: #78350f;
/* v17: brighter rings for contrast on the dark background. */
--flash-pass-ring: rgba(34, 197, 94, 0.55);
--flash-neutral-ring: rgba(148, 163, 184, 0.45);
}
}
.theme-force-dark {
--bg: #0f172a;
--text: #f1f5f9;
--text-muted: #94a3b8;
--text-hint: #64748b;
--card-bg: #1e293b;
--input-bg: #1e293b;
--border: #334155;
--border-strong: #475569;
--accent: #3b82f6;
--accent-soft: #1e3a8a;
--accent-text: #93c5fd;
--accent-border: #1e40af;
--accent-hover: #1e40af;
--pass: #22c55e;
--pass-shadow: #16a34a;
--fail: #ef4444;
--fail-shadow: #dc2626;
--fail-soft-bg: #2d0a0a;
--fail-soft-text: #fca5a5;
--fail-soft-border: #7f1d1d;
--fail-soft-hover: #450a0a;
--row-active: #0f172a;
--row-separator: #1e293b;
--quick-bg: #1e293b;
--quick-text: #e2e8f0;
--neutral-bg: #334155;
--neutral-bg-hover: #475569;
--neutral-text: #e2e8f0;
--shadow: rgba(0,0,0,0.4);
--backdrop: rgba(0,0,0,0.6);
--modal-shadow: rgba(0,0,0,0.5);
/* v12 — see media-query block above for token meanings. */
--warn-soft-bg: #422006;
--warn-soft-text: #fcd34d;
--warn-soft-border: #92400e;
--highlight-flash: #78350f;
/* v17: brighter rings for contrast on the dark background. */
--flash-pass-ring: rgba(34, 197, 94, 0.55);
--flash-neutral-ring: rgba(148, 163, 184, 0.45);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
background: var(--bg);
color: var(--text);
overscroll-behavior: none;
/* v15: hide the page scrollbar visually but keep scrolling fully enabled.
This is a cosmetic hide only — no overflow:hidden / 100dvh (that combo was
tried in v12 and rolled back because it pushed the PASS/FAIL row off-screen
under the keyboard). Firefox uses scrollbar-width; WebKit uses the
::-webkit-scrollbar pseudo-element; old Edge uses -ms-overflow-style. */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* legacy Edge / IE */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
width: 0;
height: 0;
display: none; /* WebKit (iOS Safari, Chrome) */
}
body {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
input, textarea, button, select { font-family: inherit; color: var(--text); }
input, textarea, select { background: var(--input-bg); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
button { cursor: pointer; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
.screen { max-width: 560px; margin: 0 auto; padding: 12px 14px 32px; min-height: 100vh; }
.header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.h1 { font-size: 26px; font-weight: 800; margin: 0; letter-spacing: -0.02em; color: var(--text); }
.h2 { font-size: 18px; font-weight: 700; margin: 4px 0 12px; color: var(--text); }
.site-name { font-weight: 700; font-size: 16px; text-align: center; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px; color: var(--text); }
.icon-btn { width: 40px; height: 40px; border: none; background: var(--neutral-bg); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: var(--neutral-text); }
.icon-btn-sm { width: 44px; height: 44px; border: none; background: transparent; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 18px; }
.progress { font-size: 13px; color: var(--text-muted); margin: 8px 0 14px; }
.label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 14px 0 6px; }
.hint { text-transform: none; font-weight: 400; color: var(--text-hint); font-size: 11px; margin-left: 4px; }
.input { width: 100%; padding: 12px 14px; font-size: 16px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--input-bg); color: var(--text); }
.input-big { width: 100%; padding: 14px 16px; font-size: 18px; font-weight: 600; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--input-bg); color: var(--text); }
.textarea { width: 100%; padding: 12px 14px; font-size: 15px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--input-bg); color: var(--text); resize: vertical; min-height: 60px; }
/* v8: iOS Safari renders with native picker chrome that's
noticeably taller than text inputs. Strip the appearance and pin the height
to match the rest of .input. .input-date is also applied so we don't catch
any future date inputs that genuinely want their own sizing. */
.input[type="date"], .input-date {
-webkit-appearance: none;
appearance: none;
height: 44px;
line-height: 1.2;
font-family: inherit;
/* iOS sometimes shows a tiny inner spacer for the picker icon — strip it */
background-image: none;
}
.input[type="date"]::-webkit-date-and-time-value {
text-align: left;
/* Centre the value text vertically inside the fixed-height field */
min-height: 1.2em;
}
.input[type="date"]::-webkit-calendar-picker-indicator {
/* Keep the picker icon usable but stop it forcing extra width */
margin-left: 4px;
opacity: 0.6;
}
/* 3x3 grid for up to 9 quick-pick items */
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.quick-btn { padding: 14px 4px; font-size: 14px; font-weight: 600; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--quick-bg); color: var(--quick-text); }
.quick-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Custom type input + autocomplete suggestions */
.custom-type-wrap { position: relative; }
.suggestions {
position: absolute;
top: 100%; left: 0; right: 0;
background: var(--card-bg);
border: 1px solid var(--border-strong);
border-top: none;
border-radius: 0 0 8px 8px;
box-shadow: 0 4px 12px var(--shadow);
z-index: 20;
max-height: 220px;
overflow-y: auto;
}
.suggestion-item {
display: block;
width: 100%;
text-align: left;
padding: 12px 14px;
background: var(--card-bg);
border: none;
border-bottom: 1px solid var(--row-separator);
font-size: 15px;
color: var(--text);
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:active { background: var(--accent-soft); }
.notes-toggle { background: transparent; border: none; color: var(--accent); font-size: 13px; font-weight: 600; padding: 8px 0; margin-top: 4px; text-align: left; display: block; }
/* Pass/Fail 75/25 split, same height */
.pass-fail-row { display: grid; grid-template-columns: 3fr 1fr; gap: 10px; margin-top: 22px; }
.pass-btn { padding: 26px 0; font-size: 22px; font-weight: 800; letter-spacing: 0.05em; background: var(--pass); color: #fff; border: none; border-radius: 12px; box-shadow: 0 2px 0 var(--pass-shadow); }
.fail-btn { padding: 26px 0; font-size: 18px; font-weight: 800; letter-spacing: 0.05em; background: var(--fail); color: #fff; border: none; border-radius: 12px; box-shadow: 0 2px 0 var(--fail-shadow); }
.pass-btn:active, .fail-btn:active { transform: translateY(1px); }
.pass-btn .icon { display: block; font-size: 28px; margin-bottom: 4px; }
.fail-btn .icon { display: block; font-size: 22px; margin-bottom: 4px; }
/* Result-coloured text (used in entry header badge and overview table) */
.pass-text { color: var(--pass); }
.fail-text { color: var(--fail); }
.result-badge { margin-left: 8px; font-weight: 700; }
.result-badge.pass { color: var(--pass); }
.result-badge.fail { color: var(--fail); }
/* Copy-last button: full-width, secondary styling */
.copy-last-btn {
width: 100%;
margin-top: 10px;
padding: 14px 12px;
font-size: 15px;
font-weight: 600;
background: var(--accent-soft);
color: var(--accent-text);
border: 1px solid var(--accent-border);
border-radius: 10px;
}
.copy-last-btn:active { background: var(--accent-hover); }
.copy-last-btn:disabled { background: var(--neutral-bg); color: var(--text-hint); border-color: var(--border); }
.nav-row { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; gap: 8px; }
.nav-btn { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--neutral-text); }
.delete-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: transparent; border: none; color: var(--fail); font-size: 13px; font-weight: 600; }
.card { background: var(--card-bg); padding: 16px; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 16px; }
.session-card { display: flex; align-items: center; gap: 4px; background: var(--card-bg); padding: 12px 8px 12px 14px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 10px; }
.session-info { flex: 1; cursor: pointer; min-width: 0; }
.session-title { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.session-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.btn-primary { width: 100%; padding: 14px 16px; font-size: 16px; font-weight: 700; background: var(--accent); color: #fff; border: none; border-radius: 10px; }
/* v25.1: .btn-primary had no press state, so primary buttons (e.g. the prune
Save on Backup & Restore) didn't give tap feedback like the .backup-action-btn
buttons beside them. Add a subtle press, consistent with .pass-btn/.fail-btn. */
.btn-primary:active { background: var(--accent-hover); transform: translateY(1px); }
.btn-secondary { flex: 1; padding: 14px 16px; font-size: 16px; font-weight: 600; background: var(--card-bg); color: var(--neutral-text); border: 1px solid var(--border-strong); border-radius: 10px; }
/* v40: destructive confirm button for the in-app confirm sheet (Delete etc.). */
.btn-danger { padding: 14px 16px; font-size: 16px; font-weight: 700; background: var(--fail); color: #fff; border: none; border-radius: 10px; }
.btn-danger:active { background: var(--fail-shadow); transform: translateY(1px); }
.btn-row { display: flex; gap: 8px; margin-top: 16px; }
.muted { color: var(--text-muted); font-size: 14px; }
.table-wrap { background: var(--card-bg); border-radius: 10px; border: 1px solid var(--border); overflow: auto; margin-top: 8px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--text); }
.th { text-align: left; padding: 10px 8px; font-size: 11px; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); letter-spacing: 0.04em; font-weight: 600; }
.tr { cursor: pointer; }
.tr:active { background: var(--row-active); }
.tr.selected { background: var(--accent-soft); }
.td { padding: 10px 8px; border-bottom: 1px solid var(--row-separator); }
.td-result { font-weight: 700; }
.td-result.pass { color: var(--pass); }
.td-result.fail { color: var(--fail); }
.td-action { width: 36px; text-align: center; color: var(--text-hint); }
.td-check { width: 36px; text-align: center; }
.td-check input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: var(--accent);
margin: 0;
}
.sort-select {
padding: 8px 10px;
font-size: 14px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--card-bg);
color: var(--text);
flex: 1;
}
/* v15: Sessions-list controls row — Sort + Status + Lock, side by side. Each
field is a label stacking a small caption over its select. Wraps on narrow
screens so all three stay usable on a phone. */
.list-controls {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
margin-bottom: 12px;
padding: 0 2px;
}
.control-field {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 30%;
min-width: 96px;
}
.control-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
color: var(--text-muted);
letter-spacing: 0.05em;
}
.control-field .sort-select {
width: 100%;
flex: none;
}
/* Header actions cluster (overview right side) */
.header-actions {
display: flex;
gap: 4px;
}
/* Fails-only filter on overview */
.filter-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--neutral-text);
cursor: pointer;
user-select: none;
}
.filter-toggle input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--fail);
cursor: pointer;
margin: 0;
}
/* Modal sheets (used by fail-reason picker and bulk-location dialog) */
.modal-backdrop {
position: fixed;
inset: 0;
background: var(--backdrop);
z-index: 90;
animation: fade-in 0.15s ease-out;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* v57: the shell is capped at 85% of the viewport and lays its children out in a
column, so a long list inside can scroll instead of growing off the top of the
screen where it becomes unreachable (the V56 bug: with many presets, the ones
at the top of the list could not be reached). The shell itself never scrolls —
the handle/header stay pinned and only the designated body region scrolls (see
.sheet-scroll below). dvh with a vh fallback for older iOS. */
.fail-sheet, .bulk-sheet {
position: fixed;
left: 0; right: 0; bottom: 0;
background: var(--card-bg);
padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
border-radius: 16px 16px 0 0;
box-shadow: 0 -4px 20px var(--modal-shadow);
z-index: 100;
max-width: 560px;
margin: 0 auto;
animation: slide-up 0.22s ease-out;
display: flex;
flex-direction: column;
max-height: 85vh;
max-height: 85dvh;
overflow: hidden;
}
/* v57: the scrolling body region inside a bottom sheet. Applied to the list that
can grow long; the sheet's header and handle sit outside it and stay put.
min-height:0 is required — without it a flex child refuses to shrink below its
content height and the overflow never engages. -webkit-overflow-scrolling gives
iOS momentum scrolling; overscroll-behavior stops a scroll that reaches the end
of the list from chaining through to the page behind the sheet. */
.sheet-scroll {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
flex: 1 1 auto;
min-height: 0;
}
@keyframes slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* v57: flex-shrink:0 on both — the sheet is now a flex column, and without this
the handle and header would compress when the body is taller than the cap. */
.fail-sheet-handle, .bulk-sheet-handle {
width: 36px; height: 4px;
background: var(--border-strong);
border-radius: 2px;
margin: 0 auto 10px;
flex-shrink: 0;
}
.fail-sheet-header, .bulk-sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
flex-shrink: 0;
}
.fail-sheet-title, .bulk-sheet-title {
font-size: 17px;
font-weight: 700;
margin: 0;
flex: 1;
text-align: center;
color: var(--text);
}
.fail-close-btn {
width: 44px; height: 44px;
background: transparent;
border: none;
font-size: 22px;
color: var(--text-muted);
border-radius: 6px;
}
.fail-close-spacer { width: 44px; }
.fail-reasons-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 12px;
}
.fail-reason-btn {
padding: 18px 8px;
font-size: 14px;
font-weight: 600;
background: var(--fail-soft-bg);
color: var(--fail-soft-text);
border: 1px solid var(--fail-soft-border);
border-radius: 10px;
text-align: center;
line-height: 1.2;
}
.fail-reason-btn:active { background: var(--fail-soft-hover); }
/* ===== v16: Multi Pick ===== */
/* Entry-screen button — full width at the very bottom. Distinct from Copy last
(which is accent-soft); uses the neutral card surface with a strong border so
it reads as a secondary, occasional action. */
.multipick-btn {
width: 100%;
margin-top: 18px;
padding: 14px 12px;
font-size: 15px;
font-weight: 600;
background: var(--card-bg);
color: var(--neutral-text);
border: 1px solid var(--border-strong);
border-radius: 10px;
}
.multipick-btn:active { background: var(--neutral-bg-hover); }
.multipick-btn:disabled { background: var(--neutral-bg); color: var(--text-hint); border-color: var(--border); }
/* Sheet — reuses the .fail-sheet slide-up shell; these add the list + hint. */
.multipick-sheet-hint {
margin: 0 0 12px;
font-size: 13px;
line-height: 1.4;
color: var(--text-muted);
text-align: center;
}
.multipick-list { display: flex; flex-direction: column; gap: 8px; }
.multipick-option {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
width: 100%;
padding: 14px 16px;
background: var(--accent-soft);
color: var(--accent-text);
border: 1px solid var(--accent-border);
border-radius: 10px;
text-align: left;
}
.multipick-option:active { background: var(--accent-hover); }
.multipick-option-name { font-size: 16px; font-weight: 700; line-height: 1.2; }
.multipick-option-seq { font-size: 13px; color: var(--text-muted); line-height: 1.3; }
.multipick-empty {
margin: 4px 0 8px;
padding: 16px;
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
text-align: center;
background: var(--neutral-bg);
border-radius: 10px;
}
/* v47: quick-pick preset switcher sheet (long-press on the entry grid).
Modelled on the Multi Pick option rows, with a leading tick column so the
active preset reads at a glance, and an "Edit presets" footer link. */
.preset-switch-list { display: flex; flex-direction: column; gap: 8px; }
.preset-switch-option {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
width: 100%;
padding: 14px 16px;
background: var(--neutral-bg);
color: var(--text);
border: 1px solid var(--accent-border);
border-radius: 10px;
text-align: left;
flex-shrink: 0; /* v57: don't squash rows inside the scrolling list */
}
.preset-switch-option:active { background: var(--accent-hover); }
.preset-switch-option.active {
background: var(--accent-soft);
color: var(--accent-text);
border-color: var(--accent);
}
.preset-switch-tick {
flex: 0 0 18px;
font-size: 16px;
font-weight: 700;
color: var(--accent);
text-align: center;
line-height: 1.2;
}
.preset-switch-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0; /* let the sub line ellipsis-clip instead of overflowing */
}
.preset-switch-name { font-size: 16px; font-weight: 700; line-height: 1.2; }
.preset-switch-sub {
font-size: 13px;
color: var(--text-muted);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.preset-switch-edit {
margin-top: 12px;
width: 100%;
padding: 12px 16px;
font-size: 14px;
font-weight: 600;
color: var(--accent-text);
background: transparent;
border: 1px dashed var(--accent-border);
border-radius: 10px;
text-align: center;
flex-shrink: 0; /* v57: stays pinned below the scrolling list */
}
.preset-switch-edit:active { background: var(--accent-hover); }
/* v47: small info tip inside a settings section (used for the long-press
shortcut note on the Quick Pick Items page). */
.settings-tip {
margin: 14px 0 0;
padding: 12px 14px;
font-size: 13px;
line-height: 1.5;
color: var(--text);
background: var(--accent-soft);
border: 1px solid var(--accent-border);
border-radius: 10px;
}
/* Settings page — one card per slot, plus the worked example. */
.mp-example {
margin: 0 0 16px;
padding: 12px 14px;
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
background: var(--neutral-bg);
border: 1px solid var(--border);
border-radius: 10px;
}
.mp-slot {
padding: 14px;
margin-bottom: 12px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 10px;
}
.mp-slot-head {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
margin-bottom: 8px;
}
.mp-slot .mp-slot-name { margin-bottom: 8px; }
/* Transient toast — dark pill, fixed near the bottom, fades in/out. Lives on
outside #app so it survives a re-render. Dark in both themes by
design (a notification pill), so fixed colours rather than theme tokens. */
.toast {
position: fixed;
left: 50%;
bottom: calc(28px + env(safe-area-inset-bottom));
transform: translateX(-50%) translateY(8px);
max-width: 80%;
padding: 12px 18px;
background: rgba(17, 24, 39, 0.95);
color: #fff;
font-size: 14px;
font-weight: 600;
border-radius: 999px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
z-index: 400;
opacity: 0;
transition: opacity 0.22s ease-out, transform 0.22s ease-out;
pointer-events: none;
}
.toast.toast-show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Settings sections spacing (used inside individual settings sub-pages) */
.settings-section + .settings-section { margin-top: 28px; }
.settings-section h2 { margin-top: 0; }
/* v9: preset action row on Quick Pick Items page — three small buttons under
the preset dropdown for new / rename / delete. Visual style mirrors
.icon-btn-sm but with a label, and danger variant for delete. */
.preset-actions-row {
display: flex;
gap: 8px;
margin-top: 10px;
}
.preset-action-btn {
flex: 1;
padding: 10px 8px;
font-size: 13px;
font-weight: 600;
background: var(--card-bg);
color: var(--neutral-text);
border: 1px solid var(--border-strong);
border-radius: 8px;
white-space: nowrap;
}
.preset-action-btn:active { background: var(--row-active); }
.preset-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.preset-action-danger { color: var(--fail); border-color: var(--fail-soft-border); }
.preset-action-danger:active { background: var(--fail-soft-bg); }
/* v34: report signature — preview, draw pad, position segmented control. */
.report-sig-preview img { border: 1px solid var(--border-strong); }
.sig-position-row {
display: flex;
gap: 8px;
margin-top: 6px;
}
.sig-position-btn {
flex: 1;
padding: 12px;
font-size: 15px;
font-weight: 600;
background: var(--card-bg);
color: var(--neutral-text);
border: 1px solid var(--border-strong);
border-radius: 10px;
}
.sig-position-btn.active {
background: var(--accent, #2563eb);
color: #fff;
border-color: var(--accent, #2563eb);
}
.sig-pad-wrap {
position: relative;
margin-top: 4px;
}
.sig-pad-canvas {
display: block;
width: 100%;
height: 160px;
background: #fff;
border: 1px solid var(--border-strong);
border-radius: 10px;
/* critical iOS PWA fix: stop signing from scrolling the page */
touch-action: none;
cursor: crosshair;
}
.sig-pad-baseline {
position: absolute;
left: 16px;
right: 16px;
bottom: 42px;
border-bottom: 1px dashed #bbb;
pointer-events: none;
}
/* Progress row with inline delete bin (entry screen) */
.progress-row {
display: flex;
align-items: center;
justify-content: space-between;
margin: 8px 0 14px;
gap: 8px;
}
.progress-row .progress {
margin: 0;
flex: 1;
min-width: 0;
}
.del-icon-top {
background: transparent;
border: none;
color: var(--fail);
font-size: 18px;
padding: 6px 10px;
border-radius: 6px;
line-height: 1;
}
.del-icon-top:active { background: var(--fail-soft-bg); }
/* 3-button nav row (Prev / Skip-to-new / Next) — equal widths so it stays balanced */
.nav-row .nav-btn {
flex: 1;
justify-content: center;
}
/* Overview filter row: search box stacked above fails-only toggle */
.overview-filters {
margin: 12px 0 8px;
}
.search-input {
width: 100%;
padding: 10px 14px;
font-size: 15px;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--input-bg);
color: var(--text);
margin-bottom: 8px;
-webkit-appearance: none;
appearance: none;
}
.search-input::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
appearance: searchfield-cancel-button;
}
/* Fail modal stage 1: full-width "Other..." button replacing old Skip */
.fail-other-btn {
width: 100%;
padding: 14px;
font-size: 14px;
font-weight: 600;
background: var(--neutral-bg);
color: var(--neutral-text);
border: 1px solid var(--border);
border-radius: 10px;
margin-top: 4px;
}
.fail-other-btn:active { background: var(--neutral-bg-hover); }
/* Fail modal stage 2: "back" link, free-text reason input, save button */
.fail-other-back {
background: transparent;
border: none;
color: var(--accent);
font-size: 14px;
font-weight: 600;
padding: 4px 0 12px;
text-align: left;
display: block;
}
.fail-other-input {
width: 100%;
padding: 12px 14px;
font-size: 15px;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--input-bg);
color: var(--text);
resize: vertical;
min-height: 80px;
font-family: inherit;
margin-bottom: 12px;
}
.fail-other-save {
width: 100%;
padding: 14px;
font-size: 16px;
font-weight: 700;
background: var(--fail);
color: #fff;
border: none;
border-radius: 10px;
}
.fail-other-save:active { background: var(--fail-shadow); }
/* ===== v7 additions ===== */
/* Update banner — sticky bar at top of viewport */
.update-banner {
position: fixed;
top: env(safe-area-inset-top, 0);
left: 0;
right: 0;
background: var(--accent);
color: #fff;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
z-index: 200;
box-shadow: 0 2px 8px var(--shadow);
animation: slide-down 0.25s ease-out;
}
@keyframes slide-down {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
.update-banner-text {
font-size: 14px;
font-weight: 600;
}
.update-banner-actions {
display: flex;
gap: 8px;
align-items: center;
}
.update-refresh-btn {
padding: 8px 14px;
background: #fff;
color: var(--accent);
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 700;
}
.update-dismiss-btn {
background: transparent;
border: none;
color: #fff;
font-size: 20px;
/* v46: 44px tap target without changing the banner's height — the extra
padding is pulled back by an equal negative margin, so the glyph and row
stay put while the hittable area grows. */
padding: 12px 14px;
margin: -12px -14px;
line-height: 1;
}
/* Push the screen content down when banner is visible */
body.has-update-banner .screen { padding-top: 64px; }
/* v8: Lock-session banner — sits inline at the top of the entry screen when
the active session is locked. Uses neutral colours rather than fail-red to
make clear it's a guard, not an error. */
.lock-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 14px;
margin: 0 0 12px;
background: var(--neutral-bg);
border: 1px solid var(--border-strong);
border-radius: 8px;
color: var(--text);
}
.lock-banner-text {
font-size: 14px;
font-weight: 600;
}
.lock-banner-action {
background: var(--accent);
color: #fff;
border: none;
border-radius: 6px;
padding: 7px 14px;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
}
/* v8: lock toggle row inside the Edit Session card. Mirrors the iOS-style
toggle-switch already used in Display Settings. */
.lock-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 18px;
padding: 14px;
background: var(--neutral-bg);
border: 1px solid var(--border);
border-radius: 10px;
}
.lock-toggle-text { flex: 1; min-width: 0; }
.lock-toggle-title { font-size: 15px; font-weight: 600; color: var(--text); }
.lock-toggle-sub {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
line-height: 1.4;
}
/* v8: subtle 🔒 prefix in the sessions list for locked sessions */
.session-card.locked .session-title { color: var(--text-muted); }
.session-lock {
display: inline-block;
margin-right: 4px;
font-size: 13px;
opacity: 0.85;
}
/* v8: Resistance calculator result card */
.calc-result-card {
margin-top: 18px;
padding: 18px 16px;
background: var(--accent-soft);
border: 1px solid var(--accent-border);
border-radius: 10px;
text-align: center;
}
.calc-result-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent-text);
margin-bottom: 6px;
}
.calc-result-value {
font-size: 32px;
font-weight: 800;
color: var(--accent-text);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.calc-result-formula {
margin-top: 8px;
font-size: 12px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
/* Settings hub — list of sub-page rows, iOS-Settings style */
.settings-list {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
margin-top: 4px;
}
.settings-row {
display: flex;
align-items: center;
width: 100%;
padding: 14px 16px;
background: transparent;
border: none;
border-bottom: 1px solid var(--row-separator);
text-align: left;
gap: 14px;
color: var(--text);
}
.settings-row:last-child { border-bottom: none; }
.settings-row:active { background: var(--row-active); }
.settings-row-icon {
font-size: 22px;
width: 32px;
flex-shrink: 0;
text-align: center;
}
.settings-row-text { flex: 1; min-width: 0; }
.settings-row-title {
font-size: 16px;
font-weight: 600;
color: var(--text);
}
.settings-row-sub {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.settings-row-chevron {
color: var(--text-hint);
font-size: 22px;
font-weight: 300;
flex-shrink: 0;
}
.settings-footer {
margin-top: 24px;
text-align: center;
font-size: 12px;
color: var(--text-muted);
}
/* Display Settings — radio group for theme, toggle for haptics */
.theme-options {
display: flex;
flex-direction: column;
gap: 0;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
.theme-option {
display: flex;
align-items: center;
padding: 14px 16px;
border-bottom: 1px solid var(--row-separator);
gap: 12px;
cursor: pointer;
background: transparent;
border-left: none;
border-right: none;
border-top: none;
width: 100%;
text-align: left;
color: var(--text);
}
.theme-option:last-child { border-bottom: none; }
.theme-option-radio {
width: 22px;
height: 22px;
border: 2px solid var(--border-strong);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.theme-option-radio.checked {
border-color: var(--accent);
}
.theme-option-radio.checked::after {
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--accent);
}
.theme-option-label {
font-size: 16px;
flex: 1;
}
.theme-option-sub {
font-size: 12px;
color: var(--text-muted);
}
/* iOS-style toggle (used for haptics on/off) */
.toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 10px;
gap: 12px;
}
.toggle-row-text { flex: 1; min-width: 0; }
.toggle-row-title { font-size: 16px; color: var(--text); font-weight: 500; }
.toggle-row-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.toggle-switch {
position: relative;
width: 50px;
height: 30px;
flex-shrink: 0;
}
.toggle-switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
inset: 0;
background: var(--border-strong);
border-radius: 30px;
transition: background 0.2s;
cursor: pointer;
}
.toggle-slider::before {
content: '';
position: absolute;
width: 26px;
height: 26px;
left: 2px;
top: 2px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s;
box-shadow: 0 1px 3px var(--shadow);
}
.toggle-switch input:checked + .toggle-slider {
background: var(--accent);
}
.toggle-switch input:checked + .toggle-slider::before {
transform: translateX(20px);
}
/* Backup & Restore — action buttons */
.backup-action-btn {
width: 100%;
padding: 16px;
font-size: 15px;
font-weight: 600;
background: var(--card-bg);
color: var(--text);
border: 1px solid var(--border-strong);
border-radius: 10px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.backup-action-btn:active { background: var(--row-active); }
.backup-action-btn.primary {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.backup-action-btn.primary:active { background: var(--accent-text); }
.backup-action-btn.danger {
border-color: var(--fail-soft-border);
color: var(--fail);
}
/* Storage usage card */
.storage-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px;
margin-top: 16px;
}
.storage-stat {
display: flex;
justify-content: space-between;
padding: 6px 0;
font-size: 14px;
}
.storage-stat-label { color: var(--text-muted); }
.storage-stat-value { color: var(--text); font-weight: 600; }
.storage-bar-wrap {
margin-top: 12px;
height: 8px;
background: var(--neutral-bg);
border-radius: 4px;
overflow: hidden;
}
.storage-bar {
height: 100%;
background: var(--accent);
transition: width 0.3s;
}
.storage-bar.warn { background: #f59e0b; }
.storage-bar.danger { background: var(--fail); }
/* About / Contact / Calculator — readable static text pages */
.info-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 18px;
margin-bottom: 12px;
color: var(--text);
}
.info-card h2 {
margin: 0 0 10px;
font-size: 18px;
font-weight: 700;
}
.info-card h3 {
margin: 16px 0 6px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
}
.info-card p {
margin: 0 0 10px;
font-size: 15px;
line-height: 1.5;
}
.info-card p:last-child { margin-bottom: 0; }
.info-card .muted { color: var(--text-muted); font-size: 13px; }
.info-card a { color: var(--accent); text-decoration: none; }
/* Selection mode (overview bulk-edit) */
.selection-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: var(--card-bg);
border-top: 1px solid var(--border);
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
display: flex;
align-items: center;
gap: 10px;
z-index: 50;
box-shadow: 0 -2px 8px var(--shadow);
max-width: 560px;
margin: 0 auto;
}
.selection-bar-count {
flex: 1;
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.selection-bar-action {
padding: 10px 16px;
background: var(--accent);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
}
.selection-bar-action:disabled {
background: var(--border-strong);
}
.select-all-row {
display: flex;
gap: 12px;
margin: 8px 0;
font-size: 13px;
}
.select-all-row button {
background: transparent;
border: none;
color: var(--accent);
font-weight: 600;
padding: 4px 0;
font-size: 13px;
}
/* When selection bar is showing, give the table some bottom space so last rows aren't hidden */
body.has-selection-bar .screen { padding-bottom: 88px; }
/* ===== v10 additions ===== */
/* Inline SVG share-glyph (replaces the ⬇ unicode arrow on Export buttons).
Uses currentColor so it inherits whatever colour the surrounding button has
(--text-muted inside .icon-btn-sm on the sessions list, --neutral-text on
.icon-btn in the overview header). 18×18 hits the same optical weight as
the previous emoji glyph. */
.share-icon {
width: 18px;
height: 18px;
display: inline-block;
vertical-align: middle;
}
.icon-btn .share-icon { width: 20px; height: 20px; }
/* v10: Sessions list — sticky search bar above the sort row. Reuses .search-input
from the overview but sits in its own container so we can show the result
count next to it. */
.sessions-search-row {
margin-bottom: 10px;
}
.sessions-search-count {
display: block;
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
padding-left: 2px;
}
/* v10: small badge on a session card showing "3 matches in items" when the
query hit an item-level field. Tapping the session jumps straight to the
first matched item rather than the most recent. */
.session-match-badge {
display: inline-block;
margin-top: 4px;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
background: var(--accent-soft);
color: var(--accent-text);
border-radius: 10px;
border: 1px solid var(--accent-border);
}
/* v14: per-session export-status badge in the Sessions list. Green ✓ for a
clean export, amber ✓✎ when edited since the last export. */
.session-export-row { margin-top: 4px; }
.export-badge {
display: inline-block;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
border-radius: 10px;
border: 1px solid transparent;
}
.export-badge.exported {
background: var(--pass);
color: #fff;
border-color: var(--pass-shadow);
}
.export-badge.modified {
background: var(--warn-soft-bg);
color: var(--warn-soft-text);
border-color: var(--warn-soft-border);
}
/* v56: retest chase chips (Sessions rows + reminders view) and the reminders-row
client subline. Colours mirror the calibration banner palette so urgency reads
consistently: red = overdue, amber = due soon, neutral blue = upcoming. */
.retest-chip {
display: inline-block;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
border-radius: 10px;
border: 1px solid transparent;
}
.retest-chip-overdue {
background: #fef2f2;
color: #991b1b;
border-color: #fca5a5;
}
.retest-chip-soon {
background: #fffbeb;
color: #92400e;
border-color: #fcd34d;
}
.retest-chip-upcoming {
background: #eff6ff;
color: #1e40af;
border-color: #bfdbfe;
}
.retest-row-client {
font-size: 12px;
color: var(--muted);
margin-top: 1px;
}
/* v14: "N sessions not yet exported" nudge above the sessions list. */
/* v14/v15: the "N not yet exported" nudge is now a tappable button that
bulk-exports every not-yet-cleanly-exported session. Keeps the amber
informational look but reads as a control: full width, text on the left,
a share-style CTA on the right. */
.export-nudge {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
text-align: left;
font-size: 12px;
font-weight: 600;
color: var(--warn-soft-text);
background: var(--warn-soft-bg);
border: 1px solid var(--warn-soft-border);
border-radius: 8px;
padding: 8px 10px;
margin-bottom: 10px;
-webkit-appearance: none;
appearance: none;
}
.export-nudge:active { background: var(--warn-soft-border); }
.export-nudge-text { flex: 1; }
.export-nudge-cta {
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
font-weight: 700;
}
.export-nudge-cta .share-icon { width: 15px; height: 15px; }
/* v15: standalone tertiary button (used by the "Show all sessions" reset in the
filtered-empty state). A more specific rule inside .import-conflict-actions
still overrides this where that dialog uses the same class. */
.btn-tertiary {
display: inline-block;
padding: 8px 14px;
font-size: 14px;
font-weight: 600;
background: transparent;
color: var(--accent);
border: none;
border-radius: 8px;
margin-top: 4px;
}
.btn-tertiary:active { background: var(--accent-soft); }
/* v14: prune suggestion inside the storage-usage card on Backup & Restore. */
.prune-suggestion {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border, #e5e7eb);
}
.prune-suggestion-text {
font-size: 13px;
font-weight: 600;
color: var(--text);
margin: 0 0 8px;
}
.prune-suggestion .backup-action-btn { margin-bottom: 0; }
/* v10: Sessions list row of action buttons — currently New + Import. Stack as
a two-column row when both are visible; New full-width when alone. */
.sessions-actions-row {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
.sessions-actions-row .btn-primary,
.sessions-actions-row .btn-secondary {
flex: 1;
margin-bottom: 0;
}
/* v10: Location input autofill suggestions — mirrors .custom-type-wrap +
.suggestions but lives under the Location field on the entry screen. The
.suggestions block itself is already styled (used by item-type autocomplete);
we just need the relative wrapper. */
.location-input-wrap {
position: relative;
}
/* v20: New Session form Client / Site fields. Each input sits in a relative
wrapper so its tappable .suggestions list (which is position:absolute) anchors
to the field — same approach as .location-input-wrap on the entry screen. */
.nf-input-wrap {
position: relative;
}
/* v20: the explanatory line under the Client/Site fields. Replaces a v19 inline
style that used a negative top margin and pulled the text up against the Site
box. Sits comfortably below the field with normal spacing. */
.nf-hint {
margin: 8px 0 14px;
font-size: 12px;
}
/* v10: Import-summary modal body — narrow list of skipped rows with reason. */
.import-summary-list {
max-height: 160px;
overflow-y: auto;
margin: 8px 0 14px;
padding: 10px 12px;
background: var(--neutral-bg);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 13px;
color: var(--text);
line-height: 1.5;
}
.import-summary-list ul { margin: 0; padding-left: 18px; }
/* v10: Three-option conflict modal — vertical stack of action buttons.
First button is primary (duplicate as it's the safest default), second
is secondary (merge), third is cancel. */
.import-conflict-actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
}
.import-conflict-actions .btn-primary,
.import-conflict-actions .btn-secondary {
width: 100%;
margin: 0;
}
.import-conflict-actions .btn-tertiary {
width: 100%;
padding: 12px 16px;
font-size: 15px;
font-weight: 600;
background: transparent;
color: var(--text-muted);
border: none;
border-radius: 10px;
}
/* ===== v11 additions ===== */
/* v11: Backup-reminder banner on the Sessions list. Sits inline above the
sessions area when shouldShowBackupReminder() returns true. Uses neutral
warm tones (not accent blue, not fail red) — it's a nudge, not an alarm.
The banner takes the full content width and stacks its action buttons
below the message on narrow viewports. */
.backup-banner {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 12px 14px;
margin: 0 0 14px;
background: #fff8e6;
border: 1px solid #f5d68a;
border-radius: 10px;
color: #6b4f00;
}
.theme-force-dark .backup-banner,
:root[data-theme="dark"] .backup-banner {
background: #2a230f;
border-color: #5a4a1a;
color: #f5e9c2;
}
@media (prefers-color-scheme: dark) {
:root:not(.theme-force-light) .backup-banner {
background: #2a230f;
border-color: #5a4a1a;
color: #f5e9c2;
}
}
.backup-banner-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.backup-banner-text {
font-size: 14px;
font-weight: 600;
line-height: 1.4;
}
.backup-banner-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.backup-banner-action {
flex: 1;
min-width: 0;
padding: 8px 12px;
font-size: 13px;
font-weight: 600;
background: var(--card-bg);
color: var(--text);
border: 1px solid var(--border-strong);
border-radius: 8px;
cursor: pointer;
}
.backup-banner-action.primary {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.backup-banner-dismiss {
flex-shrink: 0;
background: transparent;
border: none;
color: inherit;
font-size: 20px;
line-height: 1;
/* v46: 44px tap target, pulled back by negative margin so the banner row
height and the glyph position are unchanged. */
padding: 12px 14px;
margin: -12px -14px -12px 0;
opacity: 0.6;
cursor: pointer;
}
.backup-banner-dismiss:hover { opacity: 1; }
/* v11: Welcome modal bullet list — shown inside the existing .bulk-sheet
bottom-sheet container. Keep it tight so it fits on a short viewport
without scrolling. */
.welcome-list {
margin: 4px 0 14px;
padding-left: 20px;
font-size: 14px;
line-height: 1.55;
color: var(--text);
}
.welcome-list li {
margin-bottom: 8px;
}
.welcome-list li:last-child {
margin-bottom: 0;
}
/* v33: first-run wizard — reuses the bottom-sheet shell; buttons stack full-width
with comfortable spacing, plus a step indicator and muted back/skip links.
v45: given a STABLE SHAPE so the action buttons no longer jump as you page
between steps of different heights. The sheet has a consistent min-height; the
content sits in a scrolling .wizard-body and the actions in a pinned .wizard-foot
that's always in the same place. */
/* v45.1: paging the wizard calls render() which rebuilds #app, so the backdrop is
a new node each step and replayed its `fade-in` — a visible flash on every
Next/Back. Suppress it (the wizard opens once then just swaps content; other
modals keep their fade). Pairs with `animation:none` on .wizard-sheet. */
.wizard-backdrop {
animation: none;
}
.wizard-sheet {
display: flex;
flex-direction: column;
min-height: 72vh;
max-height: 92vh;
/* v45.1: the wizard is a persistent multi-step flow, but paging calls render()
which rebuilds #app — so the sheet is a NEW node each step and the shared
.bulk-sheet `slide-up` entry animation replayed every time, making the sheet
look like it popped up again on each Next/Back. Suppress that entry animation
here so paging just swaps the content in place. (The welcome modal and all
other one-shot sheets keep their slide-up.) */
animation: none;
}
.wizard-body {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.wizard-foot {
flex: 0 0 auto;
padding-top: 10px;
}
.wizard-sheet .btn-primary,
.wizard-sheet .btn-secondary {
display: block;
width: 100%;
margin-top: 10px;
}
.wizard-foot .btn-primary:first-child,
.wizard-foot .btn-secondary:first-child {
margin-top: 0;
}
.wizard-steps {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--neutral-text);
text-align: center;
margin: 2px 0 12px;
}
/* v45: progress dots for the fresh-path steps (decision 1A/8A). Non-interactive
— setup is forward-only — and styled to match the tour's dot indicator. */
.wizard-dots {
display: flex;
justify-content: center;
gap: 8px;
margin: 2px 0 14px;
}
.wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--border-strong);
transition: background 0.15s ease, transform 0.15s ease;
}
.wizard-dot-on {
background: var(--accent);
transform: scale(1.25);
}
/* v45: a single large emoji header per step, for instant visual identity (3A). */
.wizard-icon {
font-size: 34px;
line-height: 1;
text-align: center;
margin: 4px 0 10px;
}
/* v49: PATGo logo in onboarding. The icon already has its own rounded white
tile baked in, so it just needs centring and a soft radius to match. */
.welcome-logo-wrap, .wizard-logo-wrap {
text-align: center;
margin: 2px 0 8px;
}
.welcome-logo {
width: 64px;
height: 64px;
border-radius: 14px;
}
.wizard-logo {
width: 72px;
height: 72px;
border-radius: 16px;
}
.wizard-lead {
font-size: 14px;
line-height: 1.55;
color: var(--text);
margin: 0 0 12px;
}
.wizard-back,
.wizard-skip {
display: block;
width: 100%;
margin-top: 6px;
padding: 10px;
font-size: 14px;
font-weight: 600;
background: none;
border: none;
color: var(--neutral-text);
text-align: center;
}
/* v45: the finish step's "you can replay this" reassurance line (decision 9B). */
.wizard-replay-note {
margin: 10px 0 0;
font-size: 12px;
line-height: 1.5;
color: var(--neutral-text);
text-align: center;
}
/* v42: first-run setup additions — branding step preview + the "show me around"
offer on the finish step. Reuse the wizard sheet shell. */
.wizard-logo-preview {
display: block;
max-width: 160px;
max-height: 70px;
margin: 8px auto 4px;
border-radius: 6px;
}
.wizard-theme-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 8px 0 4px;
}
.wizard-theme {
flex: 1 1 0;
min-width: 64px;
padding: 8px 4px;
border-radius: 8px;
border: 2px solid var(--border);
background: var(--card-bg);
color: var(--text);
font-size: 12px;
font-weight: 600;
}
.wizard-theme.is-on {
border-color: var(--accent);
}
.wizard-theme-swatch {
display: block;
height: 16px;
border-radius: 4px;
margin-bottom: 4px;
}
/* v45: finish-step tour offer restyled (decision 9A) — the walkthrough is the
clear primary action inside a soft accent card, with a title + one-line blurb. */
.wizard-finish-tour {
margin-top: 16px;
padding: 16px 14px;
border: 1px solid var(--accent-border);
border-radius: 12px;
background: var(--accent-soft);
text-align: center;
}
.wizard-finish-tour-title {
margin: 0 0 4px;
font-size: 15px;
font-weight: 700;
color: var(--accent-text);
}
.wizard-finish-tour-sub {
margin: 0 0 12px;
font-size: 13px;
line-height: 1.5;
color: var(--accent-text);
opacity: 0.85;
}
/* v42: full-screen feature walkthrough (decision 6-i). Its own view, NOT a modal
over the live app — it owns #app for its duration. Each slide shows a static
MOCK of a screen (the .tour-mock block) with one control highlighted, plus a
caption. The mocks reuse the app's colour variables so they read as the app. */
.tour-wrap {
display: flex;
flex-direction: column;
min-height: 100%;
padding: 12px 16px 24px;
box-sizing: border-box;
}
.tour-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.tour-counter {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text-muted);
}
.tour-x {
background: none;
border: none;
font-size: 18px;
line-height: 1;
color: var(--text-muted);
padding: 6px 8px;
}
.tour-stage {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 8px 0 4px;
/* v45.1: the v45 min-height (360px) was shorter than the tallest mock (Quick
Pick), so that slide grew the stage and shifted everything below it — the jump
persisted. Size the stage to the TALLEST mock and top-align the mock, so every
slide reserves the same space and the caption/dots/nav never move. */
min-height: 440px;
}
/* The mock "phone screen" — a soft framed card the mock content sits inside. */
.tour-mock {
width: 100%;
max-width: 320px;
background: var(--bg);
border: 1px solid var(--border-strong);
border-radius: 16px;
padding: 14px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.tour-screen { display: flex; flex-direction: column; gap: 10px; }
.tour-bar {
font-size: 13px;
font-weight: 700;
color: var(--text);
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.tour-cta {
width: 100%;
padding: 12px;
font-size: 14px;
font-weight: 700;
border: none;
border-radius: 10px;
background: var(--accent);
color: #fff;
}
.tour-cta-ghost {
background: var(--card-bg);
color: var(--neutral-text);
border: 1px solid var(--border-strong);
}
.tour-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
}
.tour-row-title { font-size: 13px; font-weight: 700; color: var(--text); }
.tour-row-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.tour-chip {
font-size: 11px;
font-weight: 700;
padding: 4px 8px;
border-radius: 999px;
white-space: nowrap;
}
.tour-chip-ok { background: var(--accent-soft); color: var(--pass-shadow); }
.tour-chip-warn { background: var(--fail-soft-bg); color: var(--fail-soft-text); }
.tour-input {
width: 100%;
padding: 10px 12px;
font-size: 14px;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--input-bg);
color: var(--text);
box-sizing: border-box;
}
.tour-input-strong { font-weight: 700; font-size: 15px; }
.tour-field-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 2px;
}
.tour-field-hint { font-weight: 600; text-transform: none; color: var(--text-hint); letter-spacing: 0; }
.tour-qp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
/* Real item-type tiles are plain white cards (not green) — matched here. */
.tour-qp {
padding: 14px 4px;
font-size: 12px;
font-weight: 700;
border-radius: 10px;
border: 1px solid var(--border-strong);
background: var(--card-bg);
color: var(--text);
}
/* The real PASS / FAIL bar at the bottom of the entry screen. */
.tour-passfail { display: flex; gap: 8px; margin-top: 2px; }
.tour-pf {
flex: 1;
padding: 16px 4px;
font-size: 15px;
font-weight: 800;
border: none;
border-radius: 12px;
color: #fff;
}
.tour-pf-pass { flex: 2; background: var(--pass); }
.tour-pf-fail { background: var(--fail); }
/* Overview slide — matches the real header line, button row, search and the
#/ITEM/RESULT table. */
.tour-ov-summary { font-size: 12px; color: var(--text); }
.tour-ov-pass { color: var(--pass-shadow); font-weight: 700; }
.tour-ov-fail { color: var(--fail); font-weight: 700; }
.tour-ov-btnrow { display: flex; gap: 8px; }
.tour-ov-btn {
flex: 1;
padding: 12px 4px;
font-size: 12px;
font-weight: 700;
border-radius: 10px;
border: 1px solid var(--border-strong);
background: var(--card-bg);
color: var(--text);
}
.tour-ov-table {
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
background: var(--card-bg);
}
.tour-ov-head, .tour-ov-trow {
display: grid;
grid-template-columns: 28px 1fr 56px;
gap: 8px;
align-items: center;
padding: 9px 12px;
font-size: 12px;
}
.tour-ov-head {
font-weight: 700;
font-size: 10px;
letter-spacing: 0.04em;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
}
.tour-ov-trow { border-bottom: 1px solid var(--border); color: var(--text); }
.tour-ov-trow:last-child { border-bottom: none; }
.tour-ov-rpass { color: var(--pass-shadow); font-weight: 700; }
.tour-ov-rfail { color: var(--fail); font-weight: 700; }
.tour-doc {
background: #fff;
border: 1px solid var(--border-strong);
border-radius: 8px;
padding: 14px;
}
.tour-doc-head { font-size: 12px; font-weight: 800; color: #1f3a5f; text-align: right; }
.tour-doc-title { font-size: 13px; font-weight: 700; color: #111; margin: 8px 0; }
.tour-doc-line { height: 8px; background: #e5e7eb; border-radius: 3px; margin: 6px 0; }
.tour-doc-line.short { width: 60%; }
.tour-note { font-size: 12px; color: var(--text-muted); text-align: center; }
/* The highlight — a glowing ring + gentle pulse on the one control each slide
teaches. Uses box-shadow (cheap, no layout) so it is safe on any node. */
.tour-hl {
position: relative;
box-shadow: 0 0 0 3px var(--accent), 0 0 0 7px var(--accent-hover);
animation: tourPulse 1.6s ease-in-out infinite;
}
@keyframes tourPulse {
0%, 100% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 7px var(--accent-hover); }
50% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 11px transparent; }
}
@media (prefers-reduced-motion: reduce) {
.tour-hl { animation: none; }
}
/* v45.1: reserve space for up to ~3 caption lines so a 1-line caption doesn't let
the dots/nav ride up while a 3-line one pushes them down. */
.tour-caption { padding: 16px 4px 4px; text-align: center; min-height: 92px; }
.tour-caption-title { font-size: 20px; font-weight: 800; color: var(--text); margin: 0 0 6px; }
.tour-caption-text { font-size: 15px; line-height: 1.5; color: var(--text-muted); margin: 0; }
.tour-dots {
display: flex;
justify-content: center;
gap: 8px;
margin: 16px 0 8px;
}
.tour-dot {
width: 9px;
height: 9px;
border-radius: 999px;
border: none;
padding: 0;
background: var(--border-strong);
}
.tour-dot-on { background: var(--accent); }
.tour-nav {
margin-top: auto;
display: flex;
align-items: center;
gap: 12px;
padding-top: 12px;
}
.tour-prev {
flex: 0 0 auto;
padding: 14px 16px;
font-size: 15px;
font-weight: 600;
background: none;
border: none;
color: var(--neutral-text);
}
.tour-next { flex: 1; }
/* v11: Bulk-edit menu sheet — vertical stack of options inside a bottom sheet,
plus a Delete option styled as destructive. Matches the import-conflict-actions
pattern from v10. */
.bulk-menu-actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
}
.bulk-menu-btn {
width: 100%;
padding: 14px 16px;
font-size: 15px;
font-weight: 600;
background: var(--card-bg);
color: var(--text);
border: 1px solid var(--border-strong);
border-radius: 10px;
cursor: pointer;
text-align: left;
}
.bulk-menu-btn:hover {
background: var(--row-active);
}
.bulk-menu-btn.danger {
color: var(--fail);
border-color: var(--fail-soft-border);
background: var(--fail-soft-bg);
}
.bulk-menu-btn.danger:hover {
background: var(--fail-soft-hover);
}
/* v11: Bulk Notes dialog — radio toggle for Replace vs Append. Stacks both
options vertically with clear hit areas. */
.bulk-notes-mode {
display: flex;
flex-direction: column;
gap: 6px;
margin: 4px 0 12px;
}
.bulk-notes-mode-opt {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 10px;
background: var(--neutral-bg);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 13px;
line-height: 1.4;
color: var(--text);
cursor: pointer;
}
.bulk-notes-mode-opt input[type="radio"] {
margin-top: 2px;
flex-shrink: 0;
}
.bulk-notes-mode-opt strong {
font-weight: 700;
}
/* v11: CSV Columns settings page. Each row is a self-contained card with
reorder arrows, a visibility checkbox, and a header-text input. */
.csv-cols-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 10px;
}
.csv-col-row {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px;
}
.csv-col-row-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.csv-col-arrows {
display: flex;
gap: 6px;
}
.csv-col-arrow {
width: 36px;
height: 36px;
background: var(--neutral-bg);
border: 1px solid var(--border-strong);
border-radius: 8px;
font-size: 14px;
font-weight: 700;
color: var(--text);
cursor: pointer;
}
.csv-col-arrow:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.csv-col-arrow:not(:disabled):hover {
background: var(--neutral-bg-hover);
}
.csv-col-vis-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: var(--text);
cursor: pointer;
}
.csv-col-vis-label input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}
.csv-col-header-label {
display: block;
margin-top: 4px;
}
.csv-col-default-hint {
display: block;
margin-top: 4px;
font-size: 12px;
color: var(--text-muted);
}
/* ============================================================
v12 additions
============================================================ */
/* Calibration-due chip — appears next to the "Next calibration due" field
on User Settings, and in the User Settings subtitle on the settings hub.
Two variants:
.overdue — red, matches the fail-soft palette already used for delete
confirms and similar destructive surfaces.
.soon — warm amber, matches the new --warn-soft-* tokens. Used when
cal date is within 30 days but not yet past. */
.cal-chip {
display: inline-block;
padding: 3px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.01em;
margin-left: 8px;
vertical-align: middle;
white-space: nowrap;
}
.cal-chip.overdue {
background: var(--fail-soft-bg);
color: var(--fail-soft-text);
border: 1px solid var(--fail-soft-border);
}
.cal-chip.soon {
background: var(--warn-soft-bg);
color: var(--warn-soft-text);
border: 1px solid var(--warn-soft-border);
}
/* Sessions-list search-jump highlight. When openSession() is called with an
explicit cursor (i.e. the user tapped an item-level search result), the
progress row on the entry screen gets data-search-jump="1" for the
single render that follows. The keyframes hold the warm-amber background
for the first 20% of the animation so the eye has time to register the
landing, then fade to transparent over the remainder. ~1.6s feels right
— long enough to notice, short enough not to nag. */
.progress-row[data-search-jump] {
animation: searchJumpFlash 1.6s ease-out;
border-radius: 8px;
}
@keyframes searchJumpFlash {
0% { background-color: var(--highlight-flash); }
20% { background-color: var(--highlight-flash); }
100% { background-color: transparent; }
}
/* No-scroll on the entry (test) screen was added in v12 (body.view-entry
class toggled in render(), .screen overrides with height:100dvh +
overflow:hidden) but rolled back in v12.1 — the dvh + overflow:hidden
combo caused content (PASS/FAIL row) to get pushed off-screen when the
notes textarea + on-screen keyboard were up, with no way to scroll to
recover. Reverted to v11 scroll behaviour. The body class strip in
render() is defensive cleanup only. */
/* ===== v17: action feedback flash (overlay) =====
Channel 2 of the v17 feedback engine (see app.js). On a Pass / Fail / Copy /
Multi Pick tap, JS reads the button's rectangle and spawns a .flash-overlay
on , fully positioned + tinted + transitioned via INLINE styles,
then flips opacity/transform on the next frame so it fades out over the
button. It lives outside #app (like the toast) so the immediate re-render
(saveItem/render) can't destroy it before it plays.
Everything visual is set inline in JS (v17.1b) — colour, geometry, and the
transition itself — because:
- the earlier box-shadow + CSS-variable @keyframes silently failed to start
on iOS Safari for a freshly inserted fixed node (no flash ever showed);
- an inline initial state (opacity:1) would beat any class-based end state,
so the end state must also be inline to actually transition.
This rule is just a documented fallback / non-inline safety net. */
.flash-overlay {
pointer-events: none;
}
/* ===== v17: item timestamp in the overview =====
When Item Timestamps is on, each overview row shows HH:MM beneath the item
type. Small, muted, tight line-height so it tucks under the type without
adding a visible row gap. Items logged before the feature have no ts, so the
line is simply omitted (no empty space). */
.item-time {
font-size: 11px;
color: var(--text-hint);
line-height: 1.2;
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
/* ============================================================
v19: Clients & Sites settings page
Reuses existing tokens (--card-bg, --border, --text, --accent,
--fail, --text-muted, --row-active). No new colour variables.
============================================================ */
.clients-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.client-card {
background: var(--card-bg);
border: 1px solid var(--border-strong);
border-radius: 10px;
overflow: hidden;
}
.client-card.expanded { border-color: var(--accent); }
.client-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 16px;
background: transparent;
border: none;
text-align: left;
cursor: pointer;
}
.client-head:active { background: var(--row-active); }
.client-head-text { display: flex; flex-direction: column; min-width: 0; }
.client-head-name {
font-size: 16px;
font-weight: 700;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.client-head-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.client-head-chevron { font-size: 18px; color: var(--text-muted); flex-shrink: 0; }
.client-head-actions {
display: flex;
gap: 16px;
padding: 0 16px 12px;
}
/* Text-style action buttons used for Rename / Delete on clients + sites. */
.link-btn {
background: none;
border: none;
padding: 4px 0;
font-size: 13px;
font-weight: 600;
color: var(--accent);
cursor: pointer;
}
.link-btn:active { opacity: 0.6; }
.link-btn.danger { color: var(--fail); }
/* v26: inline validation message on the New Session form (Q1 — neither client
nor site entered). */
.nf-error {
margin: 0 0 14px;
font-size: 13px;
font-weight: 600;
color: var(--fail);
}
/* v26: "Unassigned" group on the Clients page — sites with no client. A static
(non-tappable) header, visually distinguished with a dashed border. */
.unassigned-card { border-style: dashed; }
.client-head-static {
cursor: default;
background: transparent;
}
.client-head-static:active { background: transparent; }
.client-sites {
border-top: 1px solid var(--border);
padding: 12px 16px 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.client-site-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 4px 0;
}
.client-site-name {
font-size: 15px;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.client-site-actions { display: flex; gap: 14px; flex-shrink: 0; }
.client-add-site-btn { margin-top: 4px; width: 100%; }
/* ============== v30: PDF report preview + Report Settings ============== */
/* The report preview is a near-fullscreen sheet (a PDF iframe needs real
height, unlike the short bottom-sheets). Built directly in the DOM by
report.js, overlaid above everything via z-index 400. */
.report-preview-sheet {
position: fixed;
inset: 0;
background: var(--bg);
z-index: 401;
display: flex;
flex-direction: column;
animation: slide-up 0.22s ease-out;
}
.report-preview-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
background: var(--card-bg);
border-bottom: 1px solid var(--border);
}
.report-preview-title {
font-weight: 600;
color: var(--text);
font-size: 15px;
}
.report-preview-frame {
flex: 1 1 auto;
width: 100%;
border: 0;
background: #525659; /* neutral PDF-viewer grey behind the page */
}
.report-preview-fallback {
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
background: var(--card-bg);
border-top: 1px solid var(--border);
text-align: center;
}
.report-preview-fallback .btn-secondary { width: 100%; }
/* v38: multi-page canvas preview view area. Replaces the single iframe; holds
either the stacked page canvases (success) or the iframe fallback. */
.report-preview-view {
flex: 1 1 auto;
min-height: 0;
width: 100%;
background: #525659; /* same neutral PDF-viewer grey */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
}
.report-preview-view .report-preview-frame { flex: 1 1 auto; }
.report-preview-loading {
margin: auto;
padding: 24px;
color: #fff;
font-size: 14px;
opacity: 0.85;
}
.report-preview-pages {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 14px;
}
.pdf-page-canvas {
display: block;
max-width: 100%;
background: #fff;
box-shadow: 0 1px 6px rgba(0,0,0,0.45);
border-radius: 2px;
}
/* v35: multi-page note banner in the preview */
.report-page-note {
padding: 10px 14px;
background: var(--accent-soft, #eef2ff);
color: var(--text);
font-size: 13px;
line-height: 1.4;
border-bottom: 1px solid var(--border);
text-align: center;
}
/* v35: preview quick-adjust chips */
.report-qa-label,
.report-color-field span {
font-size: 12px;
font-weight: 600;
color: var(--neutral-text);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.report-qa-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 6px 0 10px;
}
.qa-chip {
padding: 8px 12px;
font-size: 13px;
font-weight: 600;
background: var(--card-bg);
color: var(--neutral-text);
border: 1px solid var(--border-strong);
border-radius: 16px;
}
.qa-chip.on {
background: var(--accent, #2563eb);
color: #fff;
border-color: var(--accent, #2563eb);
}
.report-edit-settings-btn { width: 100%; margin-bottom: 4px; }
/* v35: report colour theme chips + custom pickers (Report Settings page) */
.report-theme-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 6px 0 14px;
}
.report-theme-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px 6px 8px;
background: var(--card-bg);
border: 1px solid var(--border-strong);
border-radius: 18px;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.report-theme-chip.active {
border-color: var(--accent, #2563eb);
box-shadow: 0 0 0 1px var(--accent, #2563eb) inset;
}
.report-theme-swatch {
width: 14px;
height: 14px;
border-radius: 50%;
display: inline-block;
border: 1px solid rgba(0,0,0,0.15);
}
.report-theme-label { margin-left: 2px; }
.report-color-pickers {
display: flex;
gap: 16px;
}
.report-color-field {
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start;
}
.report-color-field input[type="color"] {
width: 56px;
height: 38px;
padding: 0;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: none;
}
/* v36: certificate-number two-field row */
.cert-number-row {
display: flex;
gap: 12px;
margin-top: 10px;
}
.cert-number-row > div { flex: 1; }
/* v36: report templates list */
.template-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 6px;
}
.template-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 10px;
flex-wrap: wrap;
}
.template-name { font-weight: 600; font-size: 14px; }
.template-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.template-actions .preset-action-btn { padding: 6px 10px; font-size: 13px; }
/* v36: job notes + cert field block on the Overview */
.overview-jobdetails {
padding: 0 16px 8px;
}
/* v37: Select items + Session settings as two text buttons side by side,
replacing the cramped ☑/✎ header icons. */
.overview-action-row {
display: flex;
gap: 10px;
padding: 4px 16px 10px;
}
.overview-action-btn {
flex: 1;
padding: 12px;
font-size: 15px;
font-weight: 600;
background: var(--card-bg);
color: var(--text);
border: 1px solid var(--border-strong);
border-radius: 10px;
}
.overview-action-btn:active { background: var(--row-active); }
/* Report Settings — logo preview frame */
.report-logo-preview img {
border: 1px solid var(--border);
background: #fff;
}
/* ============== v31: Export/Import Setup + filename tokens ============== */
/* "Choose what to include" disclosure button on the Backup page. */
.setup-disclose {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
color: var(--accent);
font-size: 14px;
font-weight: 500;
padding: 10px 2px;
margin-top: 4px;
cursor: pointer;
}
/* The grouped include list (revealed when the disclosure is open). */
.setup-include-list {
margin-top: 4px;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
.setup-include-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--border);
cursor: pointer;
}
.setup-include-row:last-child { border-bottom: none; }
.setup-include-row input[type="checkbox"] {
margin-top: 2px;
width: 18px;
height: 18px;
flex: 0 0 auto;
}
.setup-include-text { display: flex; flex-direction: column; gap: 2px; }
.setup-include-name { font-size: 14px; font-weight: 500; color: var(--text); }
.setup-include-hint { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
/* Report filename token chips on the Report Settings page. */
.filename-token-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.filename-token-chip {
border: 1px solid var(--accent-border);
background: var(--accent-soft);
color: var(--accent-text);
border-radius: 999px;
padding: 6px 12px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
.filename-token-chip:active { background: var(--accent-hover); }
/* Editable filename field in the report preview. */
.report-filename-label { margin-top: 4px; }
.report-filename-row { display: flex; align-items: center; gap: 6px; }
.report-filename-row .report-filename-input { flex: 1 1 auto; }
.report-filename-ext { font-size: 14px; color: var(--text-muted); flex: 0 0 auto; }
/* ===================== v32: settings restructure + search ===================== */
/* Settings hub search box */
.settings-search { padding: 8px 0 4px; }
.settings-search-input {
width: 100%;
-webkit-appearance: none;
appearance: none;
}
.settings-empty-search { padding: 24px 4px; text-align: center; }
/* Category sub-list helper blurb under the header */
.settings-category-blurb {
margin: 4px 4px 12px;
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
}
/* Category name shown as muted context on a search-result row */
.settings-row-context {
display: block;
font-size: 12px;
font-weight: 400;
color: var(--text-muted);
margin-top: 1px;
}
/* ===================== v32: empty states ===================== */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 40px 24px;
gap: 6px;
}
.empty-state-icon {
font-size: 44px;
line-height: 1;
opacity: 0.85;
margin-bottom: 4px;
}
.empty-state-title {
font-size: 17px;
font-weight: 600;
color: var(--text);
}
.empty-state-body {
margin: 0;
max-width: 320px;
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
}
.empty-state-action { margin-top: 14px; }
/* v43: Calibration due banner — sits on entry screen below lock banner.
Visual indicator of calibration status (green = ok, yellow = due soon, red = overdue). */
.cal-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 14px;
margin: 0 0 12px;
border: 1px solid var(--border-strong);
border-radius: 8px;
font-size: 14px;
font-weight: 600;
}
.cal-banner.cal-due-soon {
background: #fffbeb;
border-color: #fcd34d;
color: #92400e;
}
.cal-banner.cal-overdue {
background: #fef2f2;
border-color: #fca5a5;
color: #991b1b;
}
.cal-banner-text { font-size: 14px; font-weight: 600; }
.cal-banner-action {
background: var(--accent);
color: #fff;
border: none;
border-radius: 6px;
padding: 7px 14px;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
}
/* v43: Cloud pages menu (hidden by default, revealed via long-press). */
.cloud-pages-menu {
margin-top: 12px;
background: #f8fafc;
border: 1px dashed #cbd5e1;
border-radius: 8px;
}
.cloud-pages-menu h3 {
color: #1e293b;
font-size: 14px;
margin-bottom: 4px;
}
/* ===== v53: Test Readings ===== */
/* The readings sheet reuses the .fail-sheet slide-up shell; these styles add the
class selector row, the labelled measurement inputs, and the commit button.
All colours come from theme vars so dark mode is automatic. */
.readings-sheet .reading-field-label {
display: block;
margin: 14px 0 6px;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.readings-sheet .reading-unit {
font-weight: 500;
color: var(--text-muted);
}
.reading-class-row {
display: flex;
gap: 8px;
margin-bottom: 4px;
}
.reading-class-btn {
flex: 1;
padding: 12px 6px;
font-size: 14px;
font-weight: 600;
background: var(--card-bg);
color: var(--neutral-text);
border: 1px solid var(--border-strong);
border-radius: 10px;
text-align: center;
}
.reading-class-btn.active {
background: var(--accent-soft);
color: var(--accent-text);
border-color: var(--accent-border);
}
.reading-class-btn:active { background: var(--accent-hover); }
.reading-input { margin-bottom: 2px; }
.reading-ok-btn {
width: 100%;
margin-top: 20px;
padding: 16px 0;
font-size: 17px;
font-weight: 700;
letter-spacing: 0.03em;
background: var(--accent);
color: #fff;
border: none;
border-radius: 12px;
}
.reading-ok-btn:active { transform: translateY(1px); }
/* v54: Class I polarity checkbox row. A full-width tappable row (whole label is
the hit target) styled to match the class buttons' language — neutral when
unticked, accent when ticked. */
.reading-polarity-row {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
margin-top: 10px;
padding: 12px 14px;
background: var(--card-bg);
border: 1px solid var(--border-strong);
border-radius: 10px;
text-align: left;
}
.reading-polarity-row.checked {
background: var(--accent-soft);
border-color: var(--accent-border);
}
.reading-polarity-row:active { background: var(--accent-hover); }
.reading-polarity-box {
flex: 0 0 auto;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
line-height: 1;
color: var(--accent-text);
background: var(--card-bg);
border: 1px solid var(--border-strong);
border-radius: 6px;
}
.reading-polarity-row.checked .reading-polarity-box {
border-color: var(--accent-border);
}
.reading-polarity-label {
font-size: 15px;
font-weight: 600;
color: var(--neutral-text);
}
/* v54: the readings sheet appears on EVERY pass, so the slide-up animation that
the shared .fail-sheet shell carries becomes fatiguing across a long list.
Remove it for this sheet ONLY — it appears instantly, no movement. Its
backdrop fade is dropped too so the whole thing lands in one frame. All other
bottom sheets keep their slide-up. (Override must beat .fail-sheet's
`animation: slide-up …`, so it sits after that rule in source order.) */
.readings-sheet { animation: none; }
#readings-backdrop { animation: none; }
/* Settings → Quick Pick Fail: per-reason tag rows (shown only when readings on). */
.reason-tag-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.reason-tag-row:last-child { border-bottom: none; }
.reason-tag-name {
flex: 1;
font-size: 14px;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.reason-tag-select { flex: 0 0 auto; max-width: 52%; }