/* Opistry — stylesheet.
Bump BUILD in app.js AND the cache name in sw.js together on ANY change
to a file in public/ (they are versioned as a pair).
============================================================================
DESIGN LANGUAGE (wave 1)
---------------------------------------------------------------------------
STRUCTURE is a port of Fleetistry: light-paper information architecture —
sticky topbar + bottom tab bar on mobile, a 225px left rail from 900px,
cards, stat tiles, uppercase section headers, badges, seg controls, the
vehicle-profile grid/rail/group-pill, the dot-gradient brand motif.
SKIN is modernized and DARK BY DEFAULT:
- Both palettes are token sets. Dark is the bare :root default; light is
swapped in by `[data-theme="light"]` on (and `body.theme-light`
as a belt-and-braces alias). app.js applies the stored choice at the
very top of boot, so there is no flash.
- Radii are squared off (4-6px), shadows are flat, type is tighter.
- Nav/tab icons are inline ghost SVG (stroke: currentColor) — they follow
the theme and the active state for free. No emoji.
Layout is in two halves, deliberately:
PART A — the Fleetistry design system, ported.
PART B — the Opistry platform classes the rest of the SPA already emits
(forms builder, master dashboard, admin, modals, banners,
toasts). They are NOT renamed — they are re-expressed in PART A's
tokens so ~9,000 lines of existing views keep working, restyled.
The Opistry variable names (--bg, --surface, --text, --muted, --border…)
are kept as ALIASES so both vocabularies resolve to one set of colors.
========================================================================== */
/* ==========================================================================
PART A — tokens
========================================================================== */
/* ---- DARK (default) ---- */
:root {
/* brand */
--accent: #2F7BF6; /* solid fill blue — white text sits on this */
--accent-hover: #4A8DFF;
--accent-ink: #7FB3FF; /* accent as TEXT/icon on the page background */
--dotgrad: linear-gradient(90deg, #2F7BF6 0%, #6E6BE8 35%, #A855C8 65%, #E23A75 100%);
/* surfaces & text */
--paper: #0E1622; /* page */
--card: #16202F; /* elevated surface */
--card-2: #1C283A; /* second elevation (table heads, inputs) */
--ink: #E6EDF5; /* primary text */
--steel: #94A6BC; /* secondary text */
--line: #25344A; /* borders */
--line-strong: #33465F;
/* status */
--green: #4FD198; --pass-bg: rgba(31, 158, 104, .20); --pass-fg: #5FD8A4;
--crimson: #FF7FA8; --fail-bg: rgba(226, 58, 117, .20); --fail-fg: #FF8FB4;
--amber: #F0B45E; --warn-bg: rgba(201, 123, 18, .22); --warn-fg: #F5C176;
--gray-bg: #212E40; --gray-fg: #94A6BC;
--blue-bg: rgba(47, 123, 246, .20); --blue-fg: #8CBBFF;
--violet: #A79DF5;
/* geometry & motion */
--radius: 6px;
--radius-sm: 4px;
--radius-lg: 8px;
--shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .28);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
--sidenav-w: 225px;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
--logo-filter: invert(1) hue-rotate(180deg) saturate(1.1) brightness(1.05);
/* map/tile plate */
--plate: #101A28;
--hover: rgba(255, 255, 255, .04);
--active-bg: rgba(47, 123, 246, .16);
--scrim: rgba(4, 9, 16, .66);
color-scheme: dark;
}
/* ---- LIGHT (toggle) ---- */
[data-theme="light"], body.theme-light {
/* Solid-fill blue carries WHITE text (.btn-primary, badges, the progress
fill). At #2F7BF6 that pair measured 3.97:1 — under AA. Darkened to
5.74:1; --accent-ink stays the darker "accent as text" value. */
--accent: #1D5CE0;
--accent-hover: #1548BE;
--accent-ink: #1450E0;
--dotgrad: linear-gradient(90deg, #2F7BF6 0%, #4A63AE 35%, #8A4392 65%, #C8175D 100%);
--paper: #F4F7F9;
--card: #FFFFFF;
--card-2: #EDF2F6;
--ink: #16293B;
--steel: #5B6B78;
--line: #DCE4EA;
--line-strong: #C7D3DC;
/* Status colours serve two jobs and needed different values for each:
--green/--amber are TEXT on a white card (were 4.14 / 3.32 → now 5.71 /
5.08), while --pass-fg/--warn-fg are text on their own tinted badge
background (were 3.60 / 2.90 → now 5.67 / 5.58). Crimson already passed
on both and is unchanged. */
--green: #17754A; --pass-bg: #E2F3EA; --pass-fg: #166B43;
--crimson: #C8175D; --fail-bg: #FAE3EC; --fail-fg: #C8175D;
--amber: #A05F0D; --warn-bg: #FBEEDC; --warn-fg: #8A5209;
--gray-bg: #EAEFF3; --gray-fg: #5B6B78;
--blue-bg: #E0EFF8; --blue-fg: #1450E0;
--violet: #5A56C4;
--shadow: 0 1px 2px rgba(22, 41, 59, .06), 0 4px 14px rgba(22, 41, 59, .07);
--shadow-sm: 0 1px 2px rgba(22, 41, 59, .06);
--logo-filter: none;
--plate: #EEF2F6;
--hover: rgba(22, 41, 59, .04);
--active-bg: #E8F2FA;
--scrim: rgba(22, 41, 59, .45);
color-scheme: light;
}
/* ---- Opistry vocabulary, aliased onto the palette above ---- */
:root {
--brand-blue: var(--accent);
--brand-blue-dark: var(--accent-hover);
--accent-dark: var(--accent-hover);
--bg: var(--paper);
--surface: var(--card);
--surface-2: var(--card-2);
--surface-3: var(--gray-bg);
--text: var(--ink);
--muted: var(--steel);
--border: var(--line);
--border-strong: var(--line-strong);
--accent-2: var(--accent-ink);
--accent-soft: var(--blue-bg);
--on-accent: #ffffff;
--ok: var(--green);
--ok-soft: var(--pass-bg);
--warn: var(--amber);
--warn-soft: var(--warn-bg);
--danger: var(--crimson);
--danger-soft: var(--fail-bg);
--info-soft: var(--blue-bg);
}
/* ==========================================================================
PART A — base
========================================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
margin: 0; background: var(--paper); color: var(--ink);
font: 15px/1.45 var(--font);
letter-spacing: -.005em;
padding-bottom: calc(64px + env(safe-area-inset-bottom));
-webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
/* ---------- header (mobile) ---------- */
#topbar {
position: sticky; top: 0; z-index: 20; background: var(--card);
display: flex; align-items: center; gap: 12px; padding: 10px 16px 0;
border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; text-decoration: none; }
.brand-mark {
font-weight: 800; font-size: 24px; letter-spacing: -1.2px; color: var(--accent-ink);
}
.brand-name { font-weight: 700; font-size: 15px; color: var(--steel); letter-spacing: .1em; text-transform: uppercase; }
.icon-btn {
margin-bottom: 8px; background: none; border: 1px solid var(--line);
border-radius: var(--radius); width: 36px; height: 36px; color: var(--steel); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn.right { margin-left: auto; }
.dotstrip { order: 3; flex-basis: 100%; height: 3px; background: var(--dotgrad); border-radius: 2px 2px 0 0; }
/* ---------- layout ---------- */
.container { max-width: 960px; margin: 0 auto; padding: 16px; }
h1 { font-size: 21px; margin: 8px 0 14px; letter-spacing: -.02em; font-weight: 700; }
h2 {
font-size: 11.5px; margin: 22px 0 10px; color: var(--steel);
text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
}
h3 { font-size: 13px; margin: 14px 0 8px; font-weight: 700; }
.sub { color: var(--steel); font-size: 13px; }
.card {
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
padding: 14px 16px; margin-bottom: 10px;
}
.card.tappable { cursor: pointer; transition: border-color .12s, background .12s; }
.card.tappable:hover { border-color: var(--line-strong); background: var(--hover); }
.card.tappable:active { border-color: var(--accent); }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.right { margin-left: auto; }
/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 6px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.tile .n { font-size: 27px; font-weight: 700; letter-spacing: -.03em; }
.tile .l { font-size: 11px; color: var(--steel); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-top: 2px; }
.tile.warn .n { color: var(--amber); } .tile.bad .n { color: var(--crimson); } .tile.ok .n { color: var(--accent-ink); }
a.tile { text-decoration: none; color: inherit; cursor: pointer; }
a.tile:hover { border-color: var(--line-strong); background: var(--hover); }
/* ---------- forms ---------- */
label.f { display: block; margin: 12px 0 4px; font-size: 12px; font-weight: 600; color: var(--steel); }
input[type=text], input[type=number], input[type=email], input[type=password], input[type=date],
input[type=datetime-local], input[type=search], input[type=tel], input[type=url], input[type=time],
input:not([type]), select, textarea {
width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
font-size: 15px; background: var(--card-2); color: var(--ink); font-family: inherit;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
outline: 2px solid var(--accent); outline-offset: 1px;
}
textarea { min-height: 80px; resize: vertical; }
::placeholder { color: var(--steel); opacity: .8; }
/* Buttons. Fleetistry's default action button is the blue-OUTLINE one; the
filled blue is reserved for the single primary action. Opistry's markup
vocabulary is `.btn` (default) + `.btn-primary` (filled), so the two map
straight onto each other. Fleetistry's own names are kept as aliases so
ported markup works verbatim. */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
border-radius: var(--radius); padding: 10px 16px;
font: inherit; font-size: 14px; font-weight: 600; line-height: 1.1; cursor: pointer;
background: transparent; color: var(--accent-ink); border: 1px solid var(--accent-ink);
text-decoration: none; text-align: center; white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--active-bg); }
.btn:disabled { opacity: .45; cursor: default; }
/* The filled button takes DARK ink on the dark theme's vivid accent and
white on the light theme's deeper one. White on the dark accent measured
3.97:1 — under AA — and dark ink on it is 4.79:1, which is also the
convention the wizard's selected choice buttons already use. */
.btn-primary, .btn.primary {
background: var(--accent); color: #041022; border-color: var(--accent);
}
[data-theme="light"] .btn-primary, [data-theme="light"] .btn.primary,
body.theme-light .btn-primary, body.theme-light .btn.primary { color: #fff; }
.btn-primary:hover:not(:disabled), .btn.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.secondary { background: transparent; color: var(--accent-ink); border: 1px solid var(--accent-ink); }
.btn-ghost { border-color: var(--line); color: var(--steel); background: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.btn.danger, .btn-danger { background: transparent; color: var(--crimson); border-color: var(--crimson); }
.btn.danger:hover:not(:disabled), .btn-danger:hover:not(:disabled) { background: var(--fail-bg); }
.btn.small, .btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn.block, .btn-block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* Base size for an icon used OUTSIDE a sized context (inline in a sentence,
say). Every scoped rule below is (0,2,0) and still wins; without this a bare
icon() call renders as a full-width SVG. */
.ico { width: 16px; height: 16px; vertical-align: -3px; }
.btn .ico { width: 16px; height: 16px; flex: 0 0 auto; }
/* pass/fail segmented control */
.seg { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.seg button {
flex: 1; border: none; background: var(--card); padding: 10px 0; font-size: 14px; font-weight: 600;
color: var(--steel); cursor: pointer; font-family: inherit;
}
.seg button:hover { background: var(--hover); }
.seg button.sel-pass { background: var(--green); color: #06231A; }
.seg button.sel-fail { background: var(--crimson); color: #2A0715; }
.seg button.sel-na { background: var(--steel); color: var(--paper); }
[data-theme="light"] .seg button.sel-pass, [data-theme="light"] .seg button.sel-fail, [data-theme="light"] .seg button.sel-na { color: #fff; }
/* photo capture */
.photo-field { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 14px; text-align: center; }
.photo-field.has-photo { border-style: solid; border-color: var(--green); }
.photo-thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.photo-thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
/* inspection progress dots (signature motif) */
.progress-dots { display: flex; gap: 6px; margin: 10px 0 4px; }
.progress-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.progress-dots span.done { background: #2F7BF6; }
.progress-dots span.done:nth-child(4n+2) { background: #6E6BE8; }
.progress-dots span.done:nth-child(4n+3) { background: #A855C8; }
.progress-dots span.done:nth-child(4n) { background: #E23A75; }
/* ---------- badges ---------- */
a.badge { text-decoration: none; }
a.badge:hover { filter: brightness(1.12); }
.badge {
display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm);
font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
background: var(--gray-bg); color: var(--gray-fg); white-space: nowrap;
}
.badge.pass, .badge-ok { background: var(--pass-bg); color: var(--pass-fg); }
.badge.fail, .badge-danger { background: var(--fail-bg); color: var(--fail-fg); }
.badge.attention, .badge-warn { background: var(--warn-bg); color: var(--warn-fg); }
.badge.gray { background: var(--gray-bg); color: var(--gray-fg); }
.badge.blue, .badge-accent { background: var(--blue-bg); color: var(--blue-fg); }
/* ---------- tables ---------- */
.tbl, table.table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--card); }
.tbl th, table.table th {
text-align: left; padding: 9px 10px; background: var(--card-2); color: var(--steel);
font-size: 11px; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; font-weight: 700;
}
.tbl td, table.table td { padding: 9px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.tbl-wrap, .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
table.table tbody tr:hover { background: var(--hover); }
table.table td.actions { white-space: nowrap; text-align: right; }
/* ---------- tab bar (mobile) ---------- */
#tabbar {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
display: flex; background: var(--card); border-top: 1px solid var(--line);
padding-bottom: env(safe-area-inset-bottom); overflow-x: auto;
}
#tabbar a {
flex: 1 0 auto; min-width: 62px; display: flex; flex-direction: column; align-items: center; gap: 2px;
text-align: center; padding: 8px 4px 6px; font-size: 9.5px; font-weight: 700;
color: var(--steel); text-decoration: none; text-transform: uppercase; letter-spacing: .05em;
}
#tabbar a .ico { width: 19px; height: 19px; }
#tabbar a.active { color: var(--accent-ink); }
/* nav extras: hidden on mobile (bottom tab bar), shown in the desktop sidebar */
.side-brand, .side-account { display: none; }
/* ---------- desktop left rail ----------
Opistry renders navigation into BOTH #sidenav (desktop) and #tabbar
(mobile); Fleetistry uses one element that changes shape. Same result —
#sidenav below IS the Fleetistry rail. */
#sidenav {
display: none; flex-direction: column; gap: 1px;
width: var(--sidenav-w); flex: 0 0 var(--sidenav-w);
background: var(--card); border-right: 1px solid var(--line);
padding: 14px 10px calc(14px + env(safe-area-inset-bottom));
overflow-y: auto;
}
#sidenav .side-brand { display: block; padding: 2px 8px 14px; }
#sidenav .side-brand .brand-chip img { height: 26px; }
#sidenav .side-brand-name {
display: block; margin-top: 6px; font-weight: 700; font-size: 11px;
color: var(--steel); text-transform: uppercase; letter-spacing: .16em;
}
#sidenav .side-dots { height: 3px; background: var(--dotgrad); border-radius: 2px; margin-top: 10px; }
#sidenav .nav-group {
margin-top: 14px; padding: 0 10px 4px; font-size: 10px; letter-spacing: .12em;
text-transform: uppercase; color: var(--steel); font-weight: 700; opacity: .75;
}
.nav-item {
flex: 0 0 auto; display: flex; align-items: center; gap: 11px; text-align: left;
padding: 9px 11px; font-size: 11.5px; border-radius: var(--radius); letter-spacing: .07em;
color: var(--steel); text-decoration: none; font-weight: 700; text-transform: uppercase;
}
.nav-item .ico { display: inline-flex; width: 18px; height: 18px; flex: 0 0 auto; }
.nav-item.active { background: var(--active-bg); color: var(--accent-ink); }
.nav-item:hover { background: var(--hover); color: var(--ink); }
.nav-item.active:hover { background: var(--active-bg); color: var(--accent-ink); }
#sidenav .side-account { display: flex; margin-top: auto; border-top: 1px solid var(--line); border-radius: 0; padding-top: 14px; }
/* theme toggle — sidebar footer + account page */
.theme-toggle {
display: flex; align-items: center; gap: 6px; margin-top: 8px;
padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card-2);
}
.theme-toggle button {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 6px 8px; font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; cursor: pointer; color: var(--steel);
background: transparent; border: 0; border-radius: var(--radius-sm);
}
.theme-toggle button .ico { width: 15px; height: 15px; }
.theme-toggle button:hover { color: var(--ink); }
.theme-toggle button.on { background: var(--card); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
/* ---------- login ---------- */
.login-wrap { max-width: 380px; margin: 8vh auto 0; }
.login-logo { text-align: center; margin-bottom: 8px; }
.login-logo .brand-mark { font-size: 52px; }
.login-logo img { max-width: 260px; width: 78%; display: block; margin: 0 auto 6px; }
.login-dots { height: 4px; background: var(--dotgrad); border-radius: 2px; margin: 4px 0 22px; }
/* ---------- toast ---------- */
#toast {
position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
background: var(--card); color: var(--ink); border: 1px solid var(--line-strong);
padding: 11px 18px; border-radius: var(--radius); box-shadow: var(--shadow);
font-size: 13.5px; z-index: 50; max-width: 90vw;
}
#toast.err { background: var(--crimson); color: #fff; border-color: transparent; }
/* form builder (Fleetistry naming) */
.fb-field { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin: 8px 0; background: var(--card-2); }
.fb-field .row { gap: 6px; }
.fb-field input, .fb-field select { padding: 8px 10px; font-size: 13.5px; }
/* ---------- maps & search ---------- */
.map-box { height: 280px; border-radius: var(--radius); margin-top: 10px; background: var(--plate); border: 1px solid var(--line); }
.map-tall { height: 62vh; min-height: 380px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; background: var(--steel); }
.dot-ok { background: var(--green); }
.dot-bad { background: var(--crimson); }
/* brand logo */
.brand-chip { display: inline-flex; align-items: center; }
.brand-chip img { height: 22px; display: block; filter: var(--logo-filter); }
/* vehicle profile photos */
.v-hero { width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--radius-lg); display: block; margin-bottom: 12px; border: 1px solid var(--line); }
.v-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); flex: 0 0 auto; }
/* driver-only mode: navigation reduced to My Vehicle + Account */
body.driver-mode #tabbar a[data-tab="vehicles"],
body.driver-mode #tabbar a[data-tab="work"],
body.driver-mode #tabbar a[data-tab="issues"],
body.driver-mode #tabbar a[data-tab="inspections"],
body.driver-mode #tabbar a[data-tab="exports"],
body.driver-mode #sidenav .nav-item[data-tab="vehicles"],
body.driver-mode #sidenav .nav-item[data-tab="work"],
body.driver-mode #sidenav .nav-item[data-tab="issues"],
body.driver-mode #sidenav .nav-item[data-tab="inspections"],
body.driver-mode #sidenav .nav-item[data-tab="exports"] { display: none !important; }
/* ---------- footer ---------- */
#app-footer {
text-align: center; color: var(--steel); font-size: 12px;
padding: 22px 16px calc(84px + env(safe-area-inset-bottom));
opacity: .75;
}
#app-footer strong { color: var(--accent-ink); letter-spacing: .02em; }
/* ---------- vehicle profile: consolidated sections + photo rail ---------- */
.vp-expand {
display: block; width: 100%; border: 1px dashed var(--line-strong); background: none;
color: var(--accent-ink); font-size: 12.5px; font-weight: 600; padding: 8px;
border-radius: var(--radius); margin: 2px 0 10px; cursor: pointer; font-family: inherit;
}
.vp-expand:hover { background: var(--hover); }
.vp-rail { display: none; }
@media (min-width: 1100px) {
.vp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.vp-rail { display: block; position: sticky; top: 22px; }
}
.vp-rail-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vp-rail-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); display: block; }
/* vehicle group pill — the project it lives in, front and center */
.vp-group {
display: inline-flex; align-items: center; gap: 6px;
background: var(--blue-bg); color: var(--blue-fg); text-decoration: none;
font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: var(--radius);
border: 1px solid transparent;
}
.vp-group .ico { width: 14px; height: 14px; }
.vp-group:hover { border-color: var(--accent-ink); }
/* vehicle profile expanded details grid */
.vp-details { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; margin-top: 8px; }
.vp-dt { color: var(--steel); font-size: 12.5px; padding-top: 1px; }
.vp-dd { font-size: 13.5px; font-weight: 500; word-break: break-word; }
@media (max-width: 560px) { .vp-details { grid-template-columns: 108px 1fr; } }
/* upload progress */
.up-bar { height: 8px; background: var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.up-fill { height: 100%; width: 0%; background: var(--accent); border-radius: var(--radius-sm); transition: width .25s ease; }
/* ---------- desktop ---------- */
@media (min-width: 900px) {
#topbar { display: none !important; }
#sidenav { display: flex; position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; }
#tabbar { display: none !important; }
.only-narrow { display: none; }
body { padding-bottom: 24px; }
main.container { max-width: 1200px; padding: 22px 28px; margin-left: auto; margin-right: auto; }
body.signed-in main.container { margin-left: var(--sidenav-w); margin-right: 0; }
body.signed-in #app-footer { margin-left: var(--sidenav-w); }
h1 { font-size: 25px; }
#toast { bottom: 32px; }
#app-footer { padding-bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: .01ms !important; } }
/* ==========================================================================
PART B — Opistry platform classes, re-expressed in the tokens above.
Same class names the existing views already emit; new look.
========================================================================== */
html, body { min-height: 100%; }
a { color: var(--accent-ink); }
.muted { color: var(--steel); }
.mono { font-family: var(--mono); font-size: .85em; word-break: break-all; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.pre-wrap { white-space: pre-wrap; }
.text-danger { color: var(--crimson); }
.logo { filter: var(--logo-filter); }
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--card); color: var(--ink); padding: 10px 16px; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }
/* boot / spinner */
.boot {
position: fixed; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 24px; background: var(--paper);
}
.boot-logo { width: min(220px, 56vw); height: auto; }
.spinner {
width: 24px; height: 24px; border-radius: 50%;
border: 2px solid var(--line); border-top-color: var(--accent);
animation: spin .8s linear infinite;
}
.spinner.sm { width: 15px; height: 15px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }
/* app shell wrappers */
.app { min-height: 100%; display: flex; flex-direction: column; }
.shell { flex: 1; display: flex; align-items: stretch; min-height: 0; }
/* The view is the flex CHILD that must absorb the remaining width — without
this it shrinks to fit its content and the whole page reads as a narrow
column stuck against the rail. */
.shell > main { flex: 1 1 auto; min-width: 0; }
.topbar-context { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: hidden; padding-bottom: 8px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-left: auto; }
.tenant-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--steel); font-size: 13px; }
.burger, .burger::before, .burger::after {
display: block; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; content: "";
}
.burger { position: relative; }
.burger::before { position: absolute; top: -5px; }
.burger::after { position: absolute; top: 5px; }
/* Narrow screens: the burger opens the rail as a drawer. */
@media (max-width: 899px) {
#sidenav.open {
display: flex; position: fixed; z-index: 40; top: 0; bottom: 0; left: 0;
width: 262px; box-shadow: var(--shadow); padding-top: 20px; overflow-y: auto;
}
}
/* banners */
.banners { position: sticky; top: 0; z-index: 25; }
.banner {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
padding: 8px 14px; font-size: 13px; font-weight: 600;
border-bottom: 1px solid var(--line);
}
.banner .banner-text { flex: 1; min-width: 200px; }
.banner-amber { background: var(--warn-bg); color: var(--warn-fg); }
.banner-red { background: var(--fail-bg); color: var(--fail-fg); }
.banner-blue { background: var(--blue-bg); color: var(--blue-fg); }
/* page primitives */
.page { max-width: 100%; margin: 0 auto; }
.page.wide { max-width: 100%; }
.page-head {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
justify-content: space-between; margin-bottom: 6px;
}
.page-head h1 { margin: 4px 0; }
.page-head .sub { color: var(--steel); font-size: 13px; margin: 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.card-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.card-head h2, .card-head h3 { margin: 0; font-size: 14px; text-transform: none; letter-spacing: -.01em; color: var(--ink); }
.grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.row > .field { flex: 1 1 180px; margin-bottom: 0; align-self: flex-end; }
.stack > * + * { margin-top: 10px; }
/* `.metric` is the Opistry name for a stat tile — same object as `.tile`. */
.metric { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.metric .label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); font-weight: 600; }
.metric .value { font-size: 27px; font-weight: 700; letter-spacing: -.03em; }
.metric .sub { font-size: 12px; color: var(--steel); }
.module-card {
display: block; text-decoration: none; color: inherit;
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
}
.module-card:hover { border-color: var(--accent-ink); }
.module-card .m-title { font-weight: 700; font-size: 15px; }
.module-card .m-desc { color: var(--steel); font-size: 13px; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; font-size: 13.5px; margin: 8px 0 0; }
.kv dt { color: var(--steel); font-size: 12.5px; }
.kv dd { margin: 0; word-break: break-word; font-weight: 500; }
@media (max-width: 560px) { .kv { grid-template-columns: 108px 1fr; } }
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 9px; border-radius: var(--radius-sm); font-size: 11.5px; font-weight: 700;
background: var(--gray-bg); border: 1px solid var(--line); color: var(--steel);
}
.chip-amber { background: var(--warn-bg); border-color: transparent; color: var(--warn-fg); }
/* forms */
.field { margin-bottom: 12px; }
.field > label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--steel); }
.input {
width: 100%; padding: 10px 12px; font: inherit; font-size: 15px;
color: var(--ink); background: var(--card-2);
border: 1px solid var(--line); border-radius: var(--radius);
}
textarea.input { min-height: 80px; resize: vertical; }
.hint { margin: 4px 0 0; font-size: 12px; color: var(--steel); }
.check { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13.5px; }
.check input { width: 17px; height: 17px; accent-color: var(--accent); }
.form-error {
margin-bottom: 12px; padding: 9px 12px; border-radius: var(--radius);
background: var(--fail-bg); color: var(--fail-fg); font-size: 13px; font-weight: 600;
}
.form-note {
margin-bottom: 12px; padding: 9px 12px; border-radius: var(--radius);
background: var(--blue-bg); color: var(--blue-fg); font-size: 13px;
}
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin: 0 0 12px; }
legend { padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--steel); }
details.advanced { margin-bottom: 12px; }
details.advanced > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--steel); padding: 6px 0; }
/* lists */
.list { display: flex; flex-direction: column; gap: 8px; }
.list-item {
display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between;
padding: 12px 14px; background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius); text-decoration: none; color: inherit;
}
.list-item:hover { border-color: var(--line-strong); background: var(--hover); }
.list-item .li-main { min-width: 0; flex: 1 1 240px; }
.li-title { font-weight: 700; }
.li-sub { font-size: 12.5px; color: var(--steel); }
.li-side { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.empty, .loading-block, .error-block {
padding: 26px 16px; text-align: center; color: var(--steel);
background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--radius);
margin-bottom: 10px; font-size: 13.5px;
}
.error-block { border-style: solid; border-color: var(--crimson); color: var(--crimson); }
.loading-block { display: flex; align-items: center; justify-content: center; gap: 10px; }
.progress { height: 8px; border-radius: var(--radius-sm); background: var(--line); overflow: hidden; margin-top: 6px; }
.progress > span { display: block; height: 100%; background: var(--accent); }
/* CSP-safe progress widths: style-src 'self' forbids element.style writes, so
[data-width] is quantised to 5% utility classes by applyProgress(). */
/* The :not() matters. `.progress > span` is specificity (0,1,1) and the w-*
utilities are (0,1,0), so a plain `width: 0` here BEAT every quantised
width and every progress bar rendered empty. Scoping the default to spans
that carry no w-* class yet lets the utility win once applyProgress runs. */
.progress > span:not([class*="w-"]) { width: 0; }
.progress > span { transition: width .25s ease; }
.w-0{width:0%}.w-5{width:5%}.w-10{width:10%}.w-15{width:15%}.w-20{width:20%}
.w-25{width:25%}.w-30{width:30%}.w-35{width:35%}.w-40{width:40%}.w-45{width:45%}
.w-50{width:50%}.w-55{width:55%}.w-60{width:60%}.w-65{width:65%}.w-70{width:70%}
.w-75{width:75%}.w-80{width:80%}.w-85{width:85%}.w-90{width:90%}.w-95{width:95%}
.w-100{width:100%}
/* classes formerly carried by literal style="" attributes (also CSP-dropped) */
.td-progress { min-width: 80px; }
.field.field-inline { margin: 0; }
.progress.warn > span { background: var(--amber); }
/* auth screens */
.auth-wrap {
min-height: 100vh; display: flex; align-items: flex-start; justify-content: center;
padding: 8vh 16px 24px; background: var(--paper);
}
.auth-card { width: 100%; max-width: 380px; }
.auth-card .auth-logo { display: block; width: 230px; max-width: 78%; height: auto; margin: 0 auto 6px; filter: var(--logo-filter); }
.auth-card .tagline { text-align: center; color: var(--steel); font-size: 13px; margin-bottom: 4px; }
.auth-alt { margin-top: 16px; text-align: center; font-size: 13px; }
.company-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
/* toasts & modals */
.toasts {
position: fixed; z-index: 80; left: 50%; transform: translateX(-50%);
bottom: calc(78px + env(safe-area-inset-bottom));
display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 24px));
}
@media (min-width: 900px) { .toasts { bottom: 24px; left: auto; right: 24px; transform: none; } }
.toast {
padding: 11px 16px; border-radius: var(--radius); box-shadow: var(--shadow);
background: var(--card); border: 1px solid var(--line-strong);
color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.toast-ok { background: var(--pass-bg); border-color: transparent; color: var(--pass-fg); }
.toast-error { background: var(--fail-bg); border-color: transparent; color: var(--fail-fg); }
.toast-info { background: var(--blue-bg); border-color: transparent; color: var(--blue-fg); }
.modal-root {
position: fixed; inset: 0; z-index: 70;
display: flex; align-items: flex-end; justify-content: center;
background: var(--scrim); padding: 0;
}
@media (min-width: 700px) { .modal-root { align-items: center; padding: 24px; } }
.modal {
width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow); padding: 18px;
padding-bottom: max(18px, env(safe-area-inset-bottom));
}
@media (min-width: 700px) { .modal { border-radius: var(--radius-lg); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.modal-head h2 { margin: 0; font-size: 17px; text-transform: none; letter-spacing: -.01em; color: var(--ink); }
.modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
/* misc */
.secret-box {
padding: 10px 12px; border-radius: var(--radius); background: var(--card-2);
border: 1px dashed var(--line-strong); font-family: var(--mono);
font-size: 13.5px; word-break: break-all; user-select: all;
}
.seatgrid { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.seatgrid label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.seatgrid input { width: 16px; height: 16px; accent-color: var(--accent); }
.countdown { font-variant-numeric: tabular-nums; font-weight: 700; }
.countdown.late { color: var(--crimson); }
/* forms builder */
.fb-layout { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .fb-layout { grid-template-columns: 200px 1fr; } }
@media (min-width: 1200px) { .fb-layout { grid-template-columns: 200px 1fr 320px; } }
.fb-palette-group { margin-bottom: 10px; }
.fb-palette-label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); font-weight: 700; margin-bottom: 6px; }
.fb-palette-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-page { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin-bottom: 12px; }
.fb-page.active { border-color: var(--accent); }
.fb-page-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.fb-page-title { flex: 1; }
.fb-fields { display: flex; flex-direction: column; gap: 6px; }
.fb-field-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius);
background: var(--card-2); cursor: grab;
}
.fb-field-row.sel { border-color: var(--accent); background: var(--active-bg); }
.fb-drag { color: var(--steel); }
.fb-field-main { flex: 1 1 auto; min-width: 0; }
.fb-field-actions { display: flex; gap: 4px; }
.fb-children { flex-basis: 100%; margin: 6px 0 0 22px; display: flex; flex-direction: column; gap: 6px; }
/* ==========================================================================
PART C — wave-1 page furniture (vehicles list + vehicle profile)
========================================================================== */
/* Section headers carry their own action button on the right, the way
Fleetistry's `` does. */
h2 { display: flex; align-items: center; gap: 8px; }
h2 .badge { text-transform: none; letter-spacing: 0; }
h2 .btn { text-transform: none; letter-spacing: 0; }
/* vehicles list */
.veh-filters { margin-bottom: 10px; gap: 8px; }
.veh-filters select, .veh-filters input { min-width: 0; }
.veh-count { margin: 2px 0 8px; }
.veh-pager { justify-content: center; gap: 14px; margin: 14px 0 4px; }
.btn.is-off { opacity: .45; pointer-events: none; }
.veh-form .modal-body { padding: 0; }
.veh-form .modal-foot { justify-content: flex-start; margin-top: 8px; }
/* vehicle profile */
.vp-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.vp-main > .sub { margin: 0 0 12px; }
.vp-main > h1 { margin-bottom: 6px; }
.vp-main > div:has(> .vp-group) { margin: 0 0 10px; }
.v-odo { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 2px 0; }
.v-big { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.v-big-2 { font-size: 18px; font-weight: 600; color: var(--steel); }
.vp-notes { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); white-space: pre-wrap; }
.v-driver-ico { width: 26px; height: 26px; color: var(--steel); flex: 0 0 auto; }
.more-ico { display: inline-flex; color: var(--accent-ink); }
.more-ico .ico { width: 18px; height: 18px; }
/* fleet extras */
.fl-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fl-thumb-link { display: block; width: 92px; height: 92px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.fl-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-photo { display: block; max-width: 100%; max-height: 280px; border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: 12px; object-fit: cover; }
.fl-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
/* ==========================================================================
PART D — wave-2 page furniture
========================================================================== */
/* ---------- the inspection wizard ----------
One question per screen. Everything here is sized for a thumb on a phone in
a yard: 56px choice buttons, a nav bar pinned to the bottom of the viewport,
and type big enough to read in sunlight. Colour comes from tone classes
rather than per-button inline styles — style-src 'self' forbids the latter. */
.wiz-head { margin: 0 0 14px; }
.wiz-head .progress { margin-top: 8px; }
.wiz-head .progress-dots { margin: 8px 0 0; }
.wiz-body { min-height: 40vh; }
.wiz-q { display: block; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; margin: 4px 0 8px; text-transform: none; color: var(--ink); }
.wiz-optional { font-weight: 400; font-size: 14px; color: var(--steel); }
.wiz-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
@media (min-width: 620px) { .wiz-choices { flex-direction: row; flex-wrap: wrap; }
.wiz-choices .wiz-choice { flex: 1 1 160px; } }
.wiz-choice {
min-height: 56px; padding: 14px 18px; border-radius: var(--radius);
border: 2px solid var(--line-strong); background: var(--card);
color: var(--ink); font-family: inherit; font-size: 17px; font-weight: 700;
cursor: pointer; text-align: center;
}
.wiz-choice:hover { background: var(--hover); }
.wiz-choice.tone-pass { border-color: var(--green); color: var(--green); }
.wiz-choice.tone-fail { border-color: var(--crimson); color: var(--crimson); }
.wiz-choice.tone-na { border-color: var(--steel); color: var(--steel); }
.wiz-choice.tone-neutral { border-color: var(--accent); color: var(--accent-ink); }
.wiz-choice.tone-warn { border-color: var(--amber); color: var(--amber); }
.wiz-choice.tone-violet { border-color: var(--violet); color: var(--violet); }
.wiz-choice.sel.tone-pass { background: var(--green); border-color: var(--green); color: #06231A; }
.wiz-choice.sel.tone-fail { background: var(--crimson); border-color: var(--crimson); color: #2A0715; }
.wiz-choice.sel.tone-na { background: var(--steel); border-color: var(--steel); color: var(--paper); }
.wiz-choice.sel.tone-neutral { background: var(--accent); border-color: var(--accent); color: #041022; }
.wiz-choice.sel.tone-warn { background: var(--amber); border-color: var(--amber); color: #2A1A02; }
.wiz-choice.sel.tone-violet { background: var(--violet); border-color: var(--violet); color: #0F0B2E; }
[data-theme="light"] .wiz-choice.sel { color: #fff; }
.wiz-photo { margin-top: 14px; }
.wiz-photo-btn { min-height: 52px; font-size: 16px; gap: 8px; }
.wiz-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wiz-thumb { position: relative; display: block; width: 84px; height: 84px; }
.wiz-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); display: block; }
.wiz-thumb button {
position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
border: 1px solid var(--line-strong); background: var(--card); color: var(--ink);
font-size: 13px; line-height: 1; cursor: pointer; font-family: inherit; padding: 0;
}
.wiz-input { font-size: 17px; padding: 12px; }
.wiz-number { font-size: 22px; text-align: center; padding: 14px; }
.wiz-center { text-align: center; }
.wiz-example { display: inline-block; margin: 4px 0 12px; text-decoration: none; }
.wiz-example img { display: block; max-width: 180px; max-height: 140px; border-radius: var(--radius); border: 1px solid var(--line); }
.wiz-example .hint { margin: 4px 0 0; }
.wiz-flagged { border-left: 3px solid var(--crimson); }
.wiz-gps-ok { border-left: 3px solid var(--green); }
.wiz-review-row { width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
.wiz-start { min-height: 52px; font-size: 17px; margin-top: 4px; }
/* The nav bar sticks to the bottom so Next is always under the thumb, and
clears the mobile tab bar (and its safe-area inset) when signed in. */
.wiz-nav {
position: sticky; z-index: 15; gap: 10px; margin: 18px 0 0;
padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
bottom: calc(56px + env(safe-area-inset-bottom));
background: var(--paper);
}
@media (min-width: 900px) { .wiz-nav { bottom: 0; padding-bottom: 10px; } }
.wiz-nav .btn { min-height: 50px; font-size: 16px; }
.wiz-nav .wiz-back { flex: 1 1 0; }
.wiz-nav .wiz-skip { flex: 1 1 0; }
.wiz-nav .wiz-next { flex: 2 1 0; }
/* ---------- wave-2 page bits ---------- */
.checklist { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.issue-acts { margin-top: 8px; }
.wo-desc { white-space: pre-wrap; margin-top: 6px; }
.wo-total .v-big { font-size: 22px; }
.wo-part-qty { width: 76px; padding: 6px 8px; }
/* ---- inspection form builder (#/admin/form-edit) -------------------------
The builder is a page of cards; a question is one .fb-field block. Controls
sit on one line at desktop and stack on a phone. No inline styles anywhere
(CSP style-src 'self') — the colour SWATCHES paint from token classes, and
the hex the picker stores is mapped onto one of them at render time. */
.tpl-card-acts { margin-top: 10px; }
.tpl-sections-head { margin: 18px 0 8px; }
.tpl-sec-title { font-weight: 700; }
.fb-field > .row { align-items: flex-end; }
.fb-field .field-inline + .field-inline { margin-top: 10px; }
.fb-field > .field-inline, .fb-field > .row { margin-bottom: 10px; }
.fb-field > .row:last-child, .fb-field > .field-inline:last-child { margin-bottom: 0; }
.tpl-type { flex: 0 1 190px; }
.tpl-photo-sel { flex: 0 1 190px; }
.tpl-hint { font-size: 13px; }
.tpl-key input { font-size: 12.5px; }
.tpl-field-foot { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.tpl-field-foot .check { margin-bottom: 0; }
.tpl-foot { margin: 16px 0 24px; align-items: center; }
.tpl-colors { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; }
.tpl-color { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.tpl-color-label {
font-weight: 600; color: var(--steel); max-width: 130px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tpl-color-sel { width: auto; padding: 5px 8px; font-size: 12.5px; }
.sw {
display: inline-block; width: 15px; height: 15px; border-radius: 4px;
border: 1px solid var(--line-strong); flex: 0 0 auto;
}
.sw-pass { background: var(--green); }
.sw-fail { background: var(--crimson); }
.sw-warn { background: var(--amber); }
.sw-na { background: var(--steel); }
.sw-neutral { background: var(--accent); }
.sw-violet { background: var(--violet); }
.tpl-example { gap: 8px; }
.tpl-example-img {
height: 46px; width: 46px; object-fit: cover;
border-radius: var(--radius-sm); border: 1px solid var(--line);
}
.tpl-example-input { font-size: 12.5px; padding: 6px 8px; }
/* The two settings an author touches once (if ever) fold away, so a 40-item
form stays scannable. Native — no JS, nothing for the CSP. */
.tpl-adv { margin-bottom: 10px; }
.tpl-adv > summary {
cursor: pointer; font-size: 12px; font-weight: 600; color: var(--steel);
padding: 4px 0; list-style: none;
}
.tpl-adv > summary::-webkit-details-marker { display: none; }
.tpl-adv > summary::before { content: '▸ '; }
.tpl-adv[open] > summary::before { content: '▾ '; }
.tpl-adv > summary:hover { color: var(--ink); }
.tpl-adv-body { padding: 6px 0 0 14px; border-left: 1px solid var(--line); margin-left: 3px; }
.tpl-adv-body .field:last-child { margin-bottom: 0; }
.tpl-window .field { flex: 1 1 170px; }
/* ---- CSV import cards ----------------------------------------------------
File picker + Import button on one line, report underneath. The report is
painted in place (not a dialog) so the counts stay readable while the list
behind the card refreshes. */
.csv-pick { align-items: center; gap: 8px; }
.csv-file { padding: 7px 10px; font-size: 13px; min-width: 0; }
.csv-file::file-selector-button {
font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
margin: -3px 10px -3px -4px; padding: 5px 10px;
color: var(--ink); background: var(--card-2);
border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.csv-file::file-selector-button:hover { background: var(--hover); }
.csv-result:empty { display: none; }
.csv-result { margin-top: 10px; }
.csv-summary { margin: 0; font-size: 13.5px; }
.csv-tiles { margin-bottom: 10px; }
.csv-errors {
margin-top: 8px; padding: 8px 10px; font-size: 12.5px;
border-left: 3px solid var(--crimson); background: var(--fail-bg);
color: var(--fail-fg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.csv-errors ul { margin: 4px 0 0; padding-left: 18px; }
.csv-errors li { margin: 2px 0; }
.csv-errors .hint { color: inherit; opacity: .85; }
@media (max-width: 560px) { .csv-pick > .btn { width: 100%; } }
@media (max-width: 560px) {
.tpl-type, .tpl-photo-sel { flex: 1 1 100%; }
.tpl-color-label { max-width: 90px; }
}
/* ---- offline upload outbox ----------------------------------------------
Two badge holders, because the topbar is display:none from 900px: a count
chip in the topbar on phones, a nav row in the side rail on desktop. Both
stay hidden until something is actually queued — an outbox nobody is
waiting on is noise. */
.outbox-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 22px; padding: 0 7px;
border-radius: 11px; background: var(--accent); color: #041022;
font-size: 12px; font-weight: 700; text-decoration: none;
}
.outbox-badge.has-error { background: var(--crimson); color: #2A0715; }
[data-theme="light"] .outbox-badge { color: #fff; }
.outbox-nav .outbox-count {
margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px; background: var(--accent); color: #041022;
font-size: 11.5px; font-weight: 700;
}
.outbox-nav.has-error .outbox-count { background: var(--crimson); color: #2A0715; }
[data-theme="light"] .outbox-nav .outbox-count { color: #fff; }
.outbox-intro { margin: 0 0 12px; }
.outbox-item.has-error { border-left: 3px solid var(--crimson); }
/* A photo captured with no signal: its bytes are on the device, so there is
no URL to render (img-src is 'self' data:). It shows as a held tile. */
.wiz-thumb.held .wiz-thumb-held {
width: 100%; height: 100%; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 2px;
border: 1px dashed var(--line-strong); border-radius: var(--radius);
background: var(--card-2); color: var(--steel); font-size: 10.5px;
font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
}
.wiz-thumb.held .wiz-thumb-held .ico { width: 20px; height: 20px; }