/* job-pages.css
*
* Shared editorial / utilitarian system for the job + customer detail pages.
* Tokens align with employee-profile.css (OKLCH, tinted-toward-navy neutrals,
* single amber accent) per .impeccable.md. Light is default; dark mirrors via
* [data-theme="dark"]. Use --tokens — never reach for hex inside components.
*
* Audience: office managers, dispatchers, superintendents at S&W (65-person
* roofing crew). Read many times per day, edited rarely. The page is the data;
* chrome is minimum-viable.
*/
/* ──────────────────────────────────────────────────────────────────────
TOKENS
────────────────────────────────────────────────────────────────────── */
:root {
--brand-navy: oklch(28% 0.04 244);
--brand-amber: oklch(72% 0.12 70);
--bg: oklch(98.5% 0.004 244);
--surface: oklch(100% 0 0);
--surface-2: oklch(96.2% 0.008 244);
--surface-3: oklch(93% 0.012 244);
--border: oklch(89% 0.014 244);
--border-2: oklch(80% 0.018 244);
--text: oklch(22% 0.028 244);
--text-2: oklch(45% 0.020 244);
--muted: oklch(58% 0.015 244);
--ok: oklch(52% 0.16 145);
--warn: oklch(56% 0.16 70);
--risk: oklch(54% 0.20 25);
--info: oklch(50% 0.15 230);
--ok-bg: oklch(96.5% 0.04 145);
--warn-bg: oklch(96.5% 0.05 70);
--risk-bg: oklch(96.5% 0.05 25);
--info-bg: oklch(96.5% 0.04 230);
--accent: var(--brand-amber);
--accent-bg: oklch(96.5% 0.05 70);
--accent-fg: oklch(22% 0.028 244);
--font-sans: 'Inter Tight', 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--fs-2xs: clamp(0.625rem, 0.605rem + 0.06vw, 0.6875rem);
--fs-xs: clamp(0.6875rem, 0.665rem + 0.07vw, 0.75rem);
--fs-sm: clamp(0.8125rem, 0.785rem + 0.10vw, 0.875rem);
--fs-md: clamp(0.9375rem, 0.91rem + 0.11vw, 1rem);
--fs-lg: clamp(1.125rem, 1.08rem + 0.18vw, 1.25rem);
--fs-xl: clamp(1.5rem, 1.4rem + 0.42vw, 1.875rem);
--fs-2xl: clamp(2rem, 1.83rem + 0.71vw, 2.625rem);
--fs-3xl: clamp(2.75rem, 2.45rem + 1.25vw, 3.75rem);
--sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem;
--sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem;
--sp-8: 2rem; --sp-9: 2.25rem; --sp-12: 3rem;
--sp-14: 3.5rem; --sp-16: 4rem; --sp-22: 5.5rem;
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
--dur-fast: 120ms;
--dur-mid: 220ms;
--dur-slow: 360ms;
--topbar-h: 44px;
--subnav-h: 40px;
--map-tile-filter: hue-rotate(-6deg) saturate(0.78) brightness(1.02);
}
[data-theme="dark"] {
--bg: oklch(15% 0.020 244);
--surface: oklch(18% 0.022 244);
--surface-2: oklch(22% 0.024 244);
--surface-3: oklch(26% 0.026 244);
--border: oklch(28% 0.026 244);
--border-2: oklch(35% 0.028 244);
--text: oklch(94% 0.012 244);
--text-2: oklch(76% 0.015 244);
--muted: oklch(58% 0.018 244);
--ok: oklch(72% 0.16 145);
--warn: oklch(78% 0.14 70);
--risk: oklch(72% 0.18 25);
--info: oklch(70% 0.14 230);
--ok-bg: oklch(22% 0.05 145);
--warn-bg: oklch(24% 0.06 70);
--risk-bg: oklch(22% 0.07 25);
--info-bg: oklch(22% 0.05 230);
--accent-bg: oklch(24% 0.06 70);
--accent-fg: oklch(15% 0.020 244);
--map-tile-filter: hue-rotate(-6deg) saturate(0.7) brightness(0.92);
}
/* ──────────────────────────────────────────────────────────────────────
RESET + BASE
────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
background: var(--bg);
color-scheme: light dark;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--topbar-h) + var(--subnav-h) + var(--sp-3));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
font-family: var(--font-sans);
font-size: var(--fs-sm);
line-height: 1.5;
/* Atmospheric wash — amber radial glow top-right + a warm vertical fade.
Mirrors the field-intel treatment: present but quiet (≤8% amber), fixed
so it stays put on scroll. Navy + amber world per .impeccable.md. */
background:
radial-gradient(110% 80% at 100% 0%, color-mix(in oklch, var(--accent) 8%, transparent), transparent 55%) fixed,
linear-gradient(180deg, color-mix(in oklch, var(--bg) 96%, var(--accent)) 0%, var(--bg) 55%) fixed,
var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'ss01', 'cv02', 'cv11';
font-variant-numeric: lining-nums;
min-height: 100vh;
text-rendering: optimizeLegibility;
}
/* Dark mirror — slightly hotter amber so the glow survives the dark --bg. */
[data-theme="dark"] body {
background:
radial-gradient(110% 80% at 100% 0%, color-mix(in oklch, var(--accent) 12%, transparent), transparent 55%) fixed,
linear-gradient(180deg, color-mix(in oklch, var(--bg) 92%, var(--accent)) 0%, var(--bg) 55%) fixed,
var(--bg);
}
a {
color: inherit;
text-decoration: underline;
text-decoration-color: color-mix(in oklch, currentColor 22%, transparent);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: text-decoration-color var(--dur-fast);
}
a:hover { text-decoration-color: var(--accent); }
a.unstyled { text-decoration: none; }
a.unstyled:hover { color: var(--accent); }
button { font: inherit; color: inherit; background: transparent; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
.num,
.spec-val,
.kpi-val,
.act-time,
.t-num,
td.num {
font-variant-numeric: tabular-nums lining-nums;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 2px;
}
.skip-link {
position: absolute;
top: -48px;
left: var(--sp-4);
padding: var(--sp-2) var(--sp-3);
background: var(--accent);
color: var(--accent-fg);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.04em;
border-radius: 2px;
z-index: 100;
text-decoration: none;
transition: top var(--dur-fast);
}
.skip-link:focus { top: var(--sp-2); }
/* Section labels — small-caps; they label, they don't announce. */
.sec-lbl {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-2);
display: inline-flex;
align-items: center;
gap: 6px;
}
.sec-lbl-row {
display: flex;
align-items: baseline;
gap: var(--sp-3);
margin-bottom: var(--sp-3);
}
.sec-lbl-row .sec-lbl-meta {
font-size: 11px;
color: var(--muted);
font-variant-numeric: tabular-nums;
margin-left: auto;
}
/* Tabular hint dots (separator between meta items) */
.dot {
color: var(--border-2);
user-select: none;
margin: 0 4px;
}
/* ──────────────────────────────────────────────────────────────────────
TICKER (sticky top, 44px) — Bloomberg-style tape
────────────────────────────────────────────────────────────────────── */
.ticker {
position: sticky;
top: 0;
z-index: 30;
height: var(--topbar-h);
display: flex;
align-items: center;
gap: var(--sp-2);
padding: 0 var(--sp-3) 0 var(--sp-2);
background: var(--surface);
border-bottom: 1px solid var(--border);
font-size: var(--fs-xs);
white-space: nowrap;
}
/* Back button — boxed, looks like a real control. Hover slides arrow left. */
.tk-back {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
color: var(--text-2);
text-decoration: none;
padding: 5px 10px 5px 8px;
border: 1px solid var(--border);
border-radius: 4px;
transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.tk-back:hover {
color: var(--text);
border-color: var(--border-2);
background: var(--surface-2);
text-decoration: none;
}
.tk-back-arrow {
display: inline-block;
font-size: 12px;
line-height: 1;
color: var(--muted);
transition: transform var(--dur-fast), color var(--dur-fast);
}
.tk-back:hover .tk-back-arrow { transform: translateX(-2px); color: var(--text); }
.tk-back-lbl {
letter-spacing: 0.04em;
font-variant-numeric: lining-nums;
}
/* Breadcrumb path — Operations / Customer / #HCP-123 */
.tk-crumbs {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--muted);
font-weight: 600;
min-width: 0;
overflow: hidden;
}
.tk-crumb,
.tk-crumb-cust > a,
.tk-crumb-cust > span {
color: var(--muted);
text-decoration: none;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 22ch;
transition: color var(--dur-fast);
}
.tk-crumb:hover,
.tk-crumb-cust > a:hover { color: var(--text); }
.tk-crumb-cust { display: inline-flex; align-items: center; gap: 5px; }
.tk-crumb-sep { color: var(--border-2); user-select: none; font-weight: 400; }
.tk-crumb-num {
color: var(--text-2);
font-weight: 700;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
}
.tk-name {
font-size: var(--fs-sm);
font-weight: 700;
letter-spacing: -0.005em;
color: var(--text);
max-width: 32ch;
overflow: hidden;
text-overflow: ellipsis;
}
.tk-sep {
display: inline-block;
width: 1px;
height: 18px;
background: var(--border);
user-select: none;
}
.tk-spacer { flex: 1; }
.tk-actions { display: inline-flex; align-items: center; gap: 4px; }
.tk-actions-sep {
display: inline-block;
width: 1px;
height: 18px;
background: var(--border);
margin: 0 4px;
}
/* Compact icon-only header buttons (Share, Print, Theme) */
.icon-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 4px;
border: 1px solid transparent;
color: var(--text-2);
font-size: 12px;
transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.icon-action:hover {
color: var(--text);
border-color: var(--border);
background: var(--surface-2);
}
.icon-action svg { display: block; }
.tk-status {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.tk-status::before {
content: '';
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
}
.tk-status.ok { color: var(--ok); }
.tk-status.warn { color: var(--warn); }
.tk-status.risk { color: var(--risk); }
.tk-status.info { color: var(--info); }
.tk-status.muted { color: var(--muted); }
/* Theme toggle button (mirrors employee-profile theme-btn) */
.theme-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 4px;
border: 1px solid var(--border);
color: var(--text-2);
font-size: 12px;
transition: color var(--dur-fast), border-color var(--dur-fast);
}
.theme-btn:hover { color: var(--accent); border-color: var(--accent); }
/* Live presence chip in the ticker */
.tk-presence {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
color: var(--text-2);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.tk-presence strong { color: var(--text); font-weight: 800; }
.tk-presence .live-dot { margin-right: 1px; }
/* ──────────────────────────────────────────────────────────────────────
BUTTONS
────────────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.01em;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface);
color: var(--text);
cursor: pointer;
transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
white-space: nowrap;
font-family: inherit;
}
.btn:hover { border-color: var(--border-2); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
.btn-sm { padding: 4px 9px; font-size: 11px; }
.btn-lg { padding: 9px 16px; font-size: 13px; }
.btn-ghost {
border-color: transparent;
background: transparent;
color: var(--text-2);
}
.btn-ghost:hover { color: var(--text); background: var(--surface-2); border-color: transparent; }
/* AI Edit Job Assistant button — special ghost-with-amber-tint treatment so
the AI affordance reads as distinct from the plain Edit/Invoice buttons
without becoming a primary CTA. Sparkle icon gets amber color + subtle
shimmer animation. The whole button gets an amber-tinted hover that
announces "this opens something different." */
.btn-ai-assistant {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
border-color: color-mix(in oklch, var(--accent) 28%, transparent) !important;
background: color-mix(in oklch, var(--accent) 6%, transparent) !important;
color: var(--text) !important;
}
.btn-ai-assistant:hover {
border-color: var(--accent) !important;
background: color-mix(in oklch, var(--accent) 12%, transparent) !important;
}
.btn-ai-assistant .btn-ai-spark {
color: var(--accent);
flex-shrink: 0;
animation: btn-ai-spark-shimmer 4s ease-in-out infinite;
}
@keyframes btn-ai-spark-shimmer {
0%, 70%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
80% { opacity: 0.85; transform: scale(1.08) rotate(8deg); }
90% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
.btn-ai-assistant .btn-ai-spark { animation: none; }
}
.btn-primary {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-fg);
font-weight: 700;
letter-spacing: 0.02em;
}
.btn-primary:hover { background: color-mix(in oklch, var(--accent) 90%, var(--text)); border-color: color-mix(in oklch, var(--accent) 90%, var(--text)); }
.btn-quiet {
background: var(--surface-2);
border-color: var(--surface-2);
color: var(--text-2);
}
.btn-quiet:hover { background: var(--surface-3); border-color: var(--surface-3); color: var(--text); }
/* ──────────────────────────────────────────────────────────────────────
PAGE SHELL — vertical: ticker / hero / sub-nav / body
────────────────────────────────────────────────────────────────────── */
.page {
display: grid;
grid-template-rows: var(--topbar-h) auto auto 1fr;
min-height: 100dvh;
}
/* ──────────────────────────────────────────────────────────────────────
HERO MAP — full-bleed, fluid height, geofence circle in --accent
────────────────────────────────────────────────────────────────────── */
.hero-map {
position: relative;
width: 100%;
height: clamp(220px, 32vw, 320px);
background: var(--surface-2);
border-bottom: 1px solid var(--border);
overflow: hidden;
}
/* Leaflet-specific overrides removed in the GMaps migration. GMaps renders
its own attribution + zoom controls; theming them requires touching the
.gm-style-cc / .gm-bundled-control selectors and is best done via a
custom Map ID style in GCP Console rather than CSS overrides. */
.hero-map-overlay {
position: absolute;
left: var(--sp-4);
bottom: var(--sp-3);
z-index: 600;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: color-mix(in oklch, var(--surface) 92%, transparent);
border: 1px solid var(--border);
border-radius: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-2);
font-variant-numeric: tabular-nums;
backdrop-filter: none;
}
/* ──────────────────────────────────────────────────────────────────────
SUB-NAV — sticky section tabs below ticker
────────────────────────────────────────────────────────────────────── */
.subnav {
position: sticky;
top: var(--topbar-h);
z-index: 20;
height: var(--subnav-h);
display: flex;
align-items: stretch;
gap: 2px;
padding: 0 var(--sp-4);
background:
linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
border-bottom: 1px solid var(--border);
overflow-x: auto;
scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 14px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
transition: color var(--dur-fast);
white-space: nowrap;
}
.subnav a::after {
content: '';
position: absolute;
left: 12px; right: 12px; bottom: 0;
height: 3px;
background: var(--accent);
transform: scaleX(0);
transform-origin: center;
transition: transform var(--dur-fast) var(--ease-out-quart);
border-radius: 2px 2px 0 0;
}
.subnav a:hover { color: var(--text-2); }
.subnav a:hover::after { transform: scaleX(0.4); opacity: 0.5; }
.subnav a.active {
color: var(--text);
}
.subnav a.active::after {
transform: scaleX(1);
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.subnav a::after { transition: none; }
}
.subnav-count {
font-size: 9.5px;
font-weight: 800;
color: var(--muted);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
padding: 1px 5px;
border-radius: 2px;
background: var(--surface);
border: 1px solid var(--border);
min-width: 16px;
text-align: center;
line-height: 1.4;
}
.subnav-count--zero { opacity: 0.45; }
.subnav a:hover .subnav-count { color: var(--text-2); border-color: var(--border-2); }
.subnav a.active .subnav-count {
background: var(--accent-bg);
color: var(--accent);
border-color: color-mix(in oklch, var(--accent) 30%, transparent);
}
/* ──────────────────────────────────────────────────────────────────────
BODY GRID — left content + right rail (sticky)
Container query: collapse to single column at narrow widths
────────────────────────────────────────────────────────────────────── */
.body-wrap {
container-type: inline-size;
container-name: page;
padding: var(--sp-6) var(--sp-4) var(--sp-12);
}
.body-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: var(--sp-6) var(--sp-8);
max-width: 1280px;
margin: 0 auto;
}
.body-main { min-width: 0; }
.body-rail {
position: sticky;
top: calc(var(--topbar-h) + var(--subnav-h) + var(--sp-3));
align-self: start;
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
@container page (max-width: 880px) {
.body-grid { grid-template-columns: minmax(0, 1fr); }
.body-rail { position: static; order: -1; }
}
/* ──────────────────────────────────────────────────────────────────────
TITLE CLUSTER (top of body-main)
────────────────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────────────
HERO COMPOSITE — the consolidated identity block for the job. Folds
title (status/id/tags/name/description/address), customer mini, KPI
strip, and overview facts into ONE bordered composite card. This is
the page's command center — everything an operator needs at a glance.
Layout: 2-column top (title | customer) + full-width KPI strip +
full-width overview facts. Container query collapses to single column
under 720px.
────────────────────────────────────────────────────────────────────── */
.hero-composite {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(240px, 0.85fr);
margin-bottom: var(--sp-5);
border: 1px solid var(--border);
border-radius: 8px;
/* Three-layer atmosphere — amber bloom from the upper-left, navy bloom
from the lower-right, and a top-to-bottom warmth fade. Each layer is
subtle on its own; together they read as paper-with-light, not a UI
gradient. Navy + amber per .impeccable.md; nothing else allowed. */
background:
radial-gradient(ellipse 520px 220px at 6% 14%, color-mix(in oklch, var(--accent) 14%, transparent), transparent 68%),
radial-gradient(ellipse 680px 280px at 96% 92%, color-mix(in oklch, var(--brand-navy) 7%, transparent), transparent 62%),
linear-gradient(180deg, color-mix(in oklch, var(--surface-2) 96%, var(--accent)) 0%, var(--surface-2) 35%, color-mix(in oklch, var(--surface-2) 96%, var(--brand-navy)) 100%);
overflow: hidden;
}
/* Top-left amber accent bar — the visual signature of the hero block.
Slightly longer + slightly thicker than before so it reads from across
the desk; still narrow enough to feel like a mark, not a stripe. */
.hero-composite::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 96px; height: 3px;
background: linear-gradient(90deg, var(--accent) 0%, color-mix(in oklch, var(--accent) 50%, transparent) 100%);
z-index: 2;
pointer-events: none; /* never intercept clicks on the hero content */
}
[data-theme="dark"] .hero-composite {
background:
radial-gradient(ellipse 520px 220px at 6% 14%, color-mix(in oklch, var(--accent) 20%, transparent), transparent 68%),
radial-gradient(ellipse 680px 280px at 96% 92%, color-mix(in oklch, var(--brand-navy) 36%, transparent), transparent 62%),
linear-gradient(180deg, color-mix(in oklch, var(--surface-2) 92%, var(--accent)) 0%, var(--surface-2) 35%, color-mix(in oklch, var(--surface-2) 88%, var(--brand-navy)) 100%);
}
@container page (max-width: 720px) {
.hero-composite { grid-template-columns: 1fr; }
.hero-customer { border-left: 0 !important; border-top: 1px solid var(--border); }
}
/* LEFT column — title cluster contents (no outer box; the hero owns it). */
.hero-main {
padding: 18px 22px 16px;
min-width: 0;
}
/* RIGHT column — customer mini. Reads as PART of the same hero block,
not a separate card: no internal border, same transparent background
so the parent's amber radial bleeds through. Cohesion > separation. */
.hero-customer {
padding: 22px 22px 16px;
border-left: 0;
background: transparent;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.hero-customer-head {
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text);
}
.hero-customer-head::before {
content: '';
display: inline-block;
width: 11px; height: 11px;
background: var(--text-2);
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.hero-customer-head .grow { flex: 1; }
.hero-customer-tile {
position: relative;
display: grid;
grid-template-columns: 40px 1fr 26px;
align-items: center;
gap: 12px;
padding: 10px 12px;
border: 1px solid var(--border);
border-left: 2px solid color-mix(in oklch, var(--accent) 60%, var(--border));
border-radius: 5px;
background:
radial-gradient(ellipse 240px 100px at 0% 0%, color-mix(in oklch, var(--accent) 4%, transparent), transparent 70%),
var(--surface);
text-decoration: none;
color: var(--text);
transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.hero-customer-tile:hover {
border-color: color-mix(in oklch, var(--accent) 50%, var(--border));
border-left-color: var(--accent);
background:
radial-gradient(ellipse 280px 120px at 0% 0%, color-mix(in oklch, var(--accent) 8%, transparent), transparent 70%),
var(--surface);
}
.hero-customer-tile:active { transform: scale(0.99); }
@media (prefers-reduced-motion: reduce) {
.hero-customer-tile:active { transform: none; }
}
.hero-customer-avatar {
width: 40px; height: 40px;
border-radius: 5px;
display: inline-flex; align-items: center; justify-content: center;
background: color-mix(in oklch, var(--accent) 14%, var(--surface-2));
color: var(--accent);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.02em;
flex-shrink: 0;
border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
}
.hero-customer-body { min-width: 0; }
.hero-customer-name {
font-size: 13px;
font-weight: 700;
color: var(--text);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-customer-sub {
font-size: 11px;
color: var(--muted);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Redirect arrow — a circular chip that reads as a real button, not a
decorative glyph. Hover bumps the background to amber so the arrow
announces itself as the actionable element of the tile. */
.hero-customer-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
border-radius: 50%;
background: color-mix(in oklch, var(--accent) 8%, var(--surface-2));
color: var(--accent);
border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
font-size: 14px;
font-weight: 700;
line-height: 1;
transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
flex-shrink: 0;
}
.hero-customer-tile:hover .hero-customer-arrow {
background: var(--accent);
color: var(--accent-fg);
border-color: var(--accent);
transform: translateX(3px);
}
.hero-customer-contact {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 11.5px;
color: var(--text-2);
}
.hero-customer-contact a {
color: var(--text-2);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-customer-contact a:hover { color: var(--accent); }
.hero-customer-contact svg { flex-shrink: 0; opacity: 0.7; }
.hero-customer-empty {
font-size: 12px;
color: var(--muted);
line-height: 1.4;
}
/* ── EMPTY-STATE CUSTOMER TILE ─────────────────────────────────────────────
When the job has no linked customer record, render a tile-shaped
placeholder that mirrors the loaded tile's structure (avatar slot +
body + CTA) so the hero stays balanced left/right. Dashed border on
the avatar and the whole tile signals "ready to fill" without shouting. */
.hero-customer-empty-tile {
display: grid;
grid-template-columns: 40px 1fr;
align-items: center;
gap: 12px;
padding: 12px 12px;
border: 1px dashed color-mix(in oklch, var(--accent) 40%, var(--border));
border-radius: 5px;
background: color-mix(in oklch, var(--accent) 3%, var(--surface));
transition: background var(--dur-fast), border-color var(--dur-fast);
}
.hero-customer-empty-tile:hover {
background: color-mix(in oklch, var(--accent) 6%, var(--surface));
border-color: var(--accent);
}
.hero-customer-empty-avatar {
width: 40px; height: 40px;
border-radius: 5px;
border: 1px dashed color-mix(in oklch, var(--accent) 55%, var(--border));
background: color-mix(in oklch, var(--accent) 5%, var(--surface));
color: var(--muted);
display: inline-flex; align-items: center; justify-content: center;
}
.hero-customer-empty-avatar svg { width: 18px; height: 18px; opacity: 0.8; }
.hero-customer-empty-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.hero-customer-empty-title {
font-size: 12.5px;
font-weight: 700;
color: var(--text);
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-customer-empty-sub {
font-size: 11px;
color: var(--muted);
line-height: 1.35;
}
.hero-customer-empty-cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
padding: 7px 12px;
border: 1px solid var(--accent);
border-radius: 4px;
background: var(--accent);
color: var(--accent-fg);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
text-decoration: none;
align-self: flex-start;
transition: background var(--dur-fast), transform var(--dur-fast);
}
.hero-customer-empty-cta:hover {
background: color-mix(in oklch, var(--accent) 88%, black);
}
.hero-customer-empty-cta:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
.hero-customer-empty-cta:active { transform: none; }
}
.hero-customer-empty-cta svg { width: 11px; height: 11px; }
/* BOTTOM rows — KPI strip and Overview facts. Both span full width
(grid-column: 1 / -1). Hairline border-top is the only divider; the
background stays transparent so the parent's amber radial bleeds
through and the whole composite reads as ONE block, not four. */
.hero-kpi {
grid-column: 1 / -1;
border-top: 1px solid var(--border);
background: transparent;
}
.hero-kpi .spec-strip {
border: 0;
border-radius: 0;
margin: 0;
background: transparent;
}
.hero-kpi .spec-cell {
background: transparent;
}
.hero-kpi .spec-cell-warn {
background: color-mix(in oklch, var(--accent) 6%, transparent);
}
.hero-overview {
grid-column: 1 / -1;
padding: 14px 22px 18px;
border-top: 1px solid var(--border);
background: transparent;
}
.hero-overview .ov-addr {
background: var(--surface);
}
.hero-overview-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.hero-overview-head h3 {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text);
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
flex: 1;
}
.hero-overview-head h3::before {
content: '';
display: inline-block;
width: 11px; height: 11px;
background: var(--text-2);
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.hero-overview-meta { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hero-overview .ov-addr { margin-bottom: 14px; }
.hero-overview .ov-grid { margin-bottom: 0; }
/* ──────────────────────────────────────────────────────────────────────
TITLE CLUSTER (legacy — kept for the inner content used by hero-main)
────────────────────────────────────────────────────────────────────── */
.title-cluster {
position: relative;
}
.title-meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.title-meta .sep {
color: var(--border-2);
font-weight: 300;
padding: 0 2px;
}
.title-num {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--muted);
font-variant-numeric: tabular-nums;
font-family: 'Inter Tight', monospace;
}
/* Job ID badge — monospace, sharp 3px corners, copy-on-hover affordance.
Cursor switches to text when hovering the value so the user knows they
can select it. */
.title-jobid {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px 2px 6px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 3px;
font-family: 'Inter Tight', monospace;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--text-2);
cursor: pointer;
transition: border-color var(--dur-fast), color var(--dur-fast);
}
.title-jobid:hover { border-color: var(--accent); color: var(--text); }
.title-jobid:hover .title-jobid-copy { opacity: 1; }
.title-jobid-prefix { color: var(--muted); }
.title-jobid-copy {
width: 11px; height: 11px; opacity: 0.55;
transition: opacity var(--dur-fast);
flex-shrink: 0;
}
/* Empty-tags chip — "+ Add tags" with a dashed border so the operator
reads it as a placeholder, not a value. */
.title-tags-empty {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
border: 1px dashed var(--border-2);
border-radius: 3px;
background: transparent;
cursor: pointer;
transition: color var(--dur-fast), border-color var(--dur-fast);
}
.title-tags-empty:hover { color: var(--accent); border-color: var(--accent); }
/* Hero name — the page anchor. Larger than .impeccable.md suggests on
purpose: read across the desk on a 9am roof-glare laptop. */
.title-h1 {
font-size: clamp(1.75rem, 1.55rem + 0.7vw, 2.125rem);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.05;
color: var(--text);
margin-bottom: 4px;
}
.title-scope {
font-size: 13px;
color: var(--text-2);
font-weight: 500;
margin-top: 0;
margin-bottom: 12px;
letter-spacing: 0.005em;
line-height: 1.3;
}
/* Address row — chip-like, with SVG pin + copy button on the right. Reads
as a tappable target without screaming "I am a button." */
.title-addr {
font-size: 12.5px;
color: var(--text);
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 8px 6px 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
font-variant-numeric: tabular-nums;
transition: border-color var(--dur-fast);
}
.title-addr:hover { border-color: var(--border-2); }
.title-addr .pin { color: var(--accent); flex-shrink: 0; line-height: 1; display: inline-flex; }
.title-addr .pin svg { display: block; }
.title-addr-text {
font-weight: 600;
letter-spacing: 0.005em;
max-width: 50ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.title-addr .icon-btn {
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
border: 0;
background: transparent;
color: var(--muted);
cursor: pointer;
border-radius: 3px;
transition: color var(--dur-fast), background var(--dur-fast);
}
.title-addr .icon-btn:hover { color: var(--accent); background: var(--accent-bg); }
.title-addr .icon-btn:active { transform: scale(0.92); }
.title-addr .icon-btn svg { display: block; }
/* ──────────────────────────────────────────────────────────────────────
SPEC STRIP — asymmetric grid with tabular numerics
────────────────────────────────────────────────────────────────────── */
.spec-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
margin-bottom: var(--sp-6);
background: var(--surface);
}
.spec-cell {
position: relative;
padding: 14px 18px 13px;
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 5px;
}
.spec-cell:first-child { border-left: 0; }
/* Subtle bottom accent — appears only on cells with hierarchy modifiers so
the eye snaps to the value that matters this read. */
.spec-cell::after {
content: '';
position: absolute;
left: 0; bottom: 0;
height: 2px;
width: 0;
background: var(--accent);
transition: width var(--dur-fast, 120ms);
}
.spec-lbl {
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
line-height: 1.1;
}
.spec-val {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text);
font-variant-numeric: tabular-nums lining-nums;
line-height: 1.15;
}
.spec-val small {
font-size: 11px;
font-weight: 600;
color: var(--muted);
margin-left: 3px;
letter-spacing: 0.04em;
}
/* Hierarchy modifiers — applied to specific cells in renderSpecStrip().
Type weight + color do the work; the auto-fit grid stays uniform so the
strip doesn't re-flow when the cell set changes between jobs. */
.spec-cell-primary .spec-val {
font-size: 26px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text);
}
.spec-cell-primary::after { width: 28px; }
.spec-cell-warn .spec-val {
color: var(--accent);
font-weight: 800;
}
.spec-cell-warn .spec-lbl {
color: color-mix(in oklch, var(--accent) 55%, var(--muted));
}
.spec-cell-warn::after {
width: 100%;
background: var(--accent);
opacity: 0.35;
}
/* Faint accent tint behind warning cell so the news is impossible to miss
without screaming. Color is news; tint level is news weight. */
.spec-cell-warn { background: color-mix(in oklch, var(--accent) 5%, transparent); }
/* ──────────────────────────────────────────────────────────────────────
OVERVIEW BLOCK — address row + two-column facts + notes
────────────────────────────────────────────────────────────────────── */
.ov-addr {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px 10px 14px;
border: 1px solid var(--border);
border-left: 2px solid var(--accent);
border-radius: 4px;
background: var(--surface);
margin-bottom: var(--sp-4);
font-size: var(--fs-sm);
color: var(--text);
font-variant-numeric: tabular-nums;
}
.ov-addr-pin {
color: var(--accent);
font-size: 13px;
flex-shrink: 0;
line-height: 1;
}
.ov-addr-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
letter-spacing: 0.005em;
}
.ov-addr-actions {
display: inline-flex;
align-items: center;
gap: 2px;
flex-shrink: 0;
}
.ov-mini {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-2);
padding: 4px 9px;
border-radius: 3px;
border: 1px solid transparent;
transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.ov-mini:hover {
color: var(--accent);
background: var(--accent-bg);
border-color: color-mix(in oklch, var(--accent) 30%, transparent);
}
.ov-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: var(--sp-4) var(--sp-8);
margin-bottom: var(--sp-5);
}
@container page (max-width: 640px) {
.ov-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
}
/* Overview facts — cleaner row rhythm, no dotted lines (those look default
and the page should feel engineered). Hairline solid between rows
instead, with a left padding to give the eye a column anchor. */
.ov-facts dt {
padding: 8px 0 8px 4px;
border-bottom: 1px solid var(--border);
position: relative;
display: flex;
align-items: center;
gap: 7px;
}
.ov-facts dd {
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-variant-numeric: tabular-nums lining-nums;
}
.ov-facts dt:last-of-type, .ov-facts dd:last-of-type {
border-bottom: 0;
padding-bottom: 0;
}
.ov-facts dt:first-of-type, .ov-facts dd:first-of-type {
padding-top: 0;
}
.ov-facts dd .dim { color: var(--muted); font-weight: 500; }
/* Fact category micro-icons — mask-image driven by --f-ico custom property
that we set per-label below. Tiny 10px icons that subordinate to the
label, never compete. */
.ov-facts dt::before {
content: '';
display: inline-block;
width: 10px; height: 10px;
flex-shrink: 0;
background: var(--muted);
-webkit-mask-image: var(--f-ico, none);
mask-image: var(--f-ico, none);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.ov-facts dt[data-cat="date"] { --f-ico: url('data:image/svg+xml;utf8,'); }
.ov-facts dt[data-cat="link"] { --f-ico: url('data:image/svg+xml;utf8,'); }
.ov-facts dt[data-cat="money"] { --f-ico: url('data:image/svg+xml;utf8,'); }
.ov-facts dt[data-cat="hash"] { --f-ico: url('data:image/svg+xml;utf8,'); }
.ov-facts dt[data-cat="tag"] { --f-ico: url('data:image/svg+xml;utf8,'); }
.ov-facts dt[data-cat="recurring"] { --f-ico: url('data:image/svg+xml;utf8,'); }
.ov-facts dt[data-cat="segment"] { --f-ico: url('data:image/svg+xml;utf8,'); }
/* ──────────────────────────────────────────────────────────────────────
WORK TIMELINE — the 5-step Created/Scheduled/On-my-way/Started/Completed
ribbon from HCP. Used to be 5 emoji circles separated by gray bars;
now: SVG icons, a single connector line behind the row, and per-step
filled/empty treatment that telegraphs progress at a glance.
────────────────────────────────────────────────────────────────────── */
.wt-rail {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
padding: 18px 16px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
}
.wt-line {
position: absolute;
left: 12%; right: 12%;
top: 30px;
height: 2px;
background:
linear-gradient(90deg, var(--accent) 0%, color-mix(in oklch, var(--accent) 30%, var(--border)) 60%, var(--border) 100%);
border-radius: 1px;
z-index: 0;
}
.wt-step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
z-index: 1;
}
.wt-dot {
width: 32px; height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--surface);
border: 1.5px solid var(--border);
color: var(--muted);
transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.wt-step.is-filled .wt-dot {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-fg);
}
.wt-step.is-empty .wt-dot {
background: var(--surface);
border-style: dashed;
}
.wt-lbl {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--text-2);
margin-top: 3px;
}
.wt-step.is-filled .wt-lbl { color: var(--text); }
.wt-time {
font-size: 9.5px;
font-family: 'Inter Tight', monospace;
color: var(--muted);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
/* Site notes — structured note block. The pinned-from-HCP variant carries
the amber accent (these are "watch the skylight" reminders foremen act
on); the plain variant is a quiet beige note panel. */
.ov-notes {
margin-top: var(--sp-4);
padding: 12px 14px 12px 14px;
border: 1px solid var(--border);
border-left: 2px solid var(--accent);
background: var(--surface);
border-radius: 4px;
}
.ov-notes-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--border);
}
.ov-notes-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
border-radius: 3px;
background: var(--accent-bg);
color: var(--accent);
flex-shrink: 0;
}
.ov-notes-lbl {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text);
}
.ov-notes-meta {
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
margin-left: auto;
}
.ov-notes-body {
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--text);
max-width: 70ch;
white-space: pre-wrap;
display: flex;
flex-direction: column;
gap: 6px;
}
.ov-notes-item {
font-size: 12.5px;
line-height: 1.5;
position: relative;
padding-left: 12px;
}
.ov-notes-item::before {
content: '';
position: absolute;
left: 0; top: 0.55em;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--accent);
}
.ov-notes-pinned {
background: color-mix(in oklch, var(--accent) 4%, var(--surface));
}
.ov-notes-pinned .ov-notes-ico {
background: var(--accent-bg);
color: var(--accent);
}
/* Plain Site Notes variant — quiet treatment (neutral left rule + muted
icon bubble). The pinned-from-HCP variant keeps the amber spotlight. */
.ov-notes-site {
border-left-color: var(--border-2);
}
.ov-notes-site .ov-notes-ico {
background: var(--surface-2);
color: var(--text-2);
}
.ov-notes-site .ov-notes-item::before {
background: var(--text-2);
}
.ov-notes-empty {
border-left-color: var(--border);
background: var(--surface-2);
}
.ov-notes-empty .ov-notes-msg {
font-size: var(--fs-sm);
color: var(--text-2);
max-width: 60ch;
margin-bottom: var(--sp-2);
line-height: 1.55;
}
/* Logged notes — attributed, timestamped note timeline (field app + office
web). Amber spotlight like the pinned variant; each item carries a byline. */
.ov-notes-field { border-left-color: var(--accent); }
.ov-notes-field .ov-notes-ico { background: var(--accent-bg); color: var(--accent); }
.ov-notes-byline {
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 3px;
}
.ov-notes-author { color: var(--text); font-weight: 700; }
.ov-notes-dot { color: var(--muted); }
.ov-notes-field .ov-notes-body { gap: 12px; }
/* Bylined items carry their own marker (the author), so drop the bullet +
indent the plain notes use. */
.ov-notes-field .ov-notes-item { padding-left: 0; }
.ov-notes-field .ov-notes-item::before { display: none; }
.ov-notes-text { white-space: pre-wrap; }
.ov-note-x {
margin-left: auto;
background: none;
border: 0;
padding: 0 2px;
font: inherit;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--muted);
cursor: pointer;
}
.ov-note-x:hover { color: var(--risk); }
.ov-add-note { margin-left: 8px; }
/* ──────────────────────────────────────────────────────────────────────
STATUS PILLS
────────────────────────────────────────────────────────────────────── */
.pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px;
border-radius: 3px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
}
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-risk { background: var(--risk-bg); color: var(--risk); }
.pill-info { background: var(--info-bg); color: var(--info); }
.pill-muted { background: var(--surface-2); color: var(--muted); }
.pill-accent { background: var(--accent-bg); color: var(--accent); }
.pill-quiet {
background: var(--surface);
color: var(--text-2);
border: 1px solid var(--border);
padding: 1px 6px;
}
.pill .dot {
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* ──────────────────────────────────────────────────────────────────────
CARDS — borders only, no drop shadows. Sharper 6px radius (was 8px) for
the Bloomberg-Terminal sensibility per .impeccable.md. Each card head
gets an icon glyph driven by a CSS variable so we can theme per card.
────────────────────────────────────────────────────────────────────── */
.card {
position: relative;
background:
radial-gradient(ellipse 280px 120px at 4% 8%, color-mix(in oklch, var(--accent) 5%, transparent), transparent 70%),
radial-gradient(ellipse 380px 160px at 96% 96%, color-mix(in oklch, var(--brand-navy) 4%, transparent), transparent 60%),
var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
[data-theme="dark"] .card {
background:
radial-gradient(ellipse 280px 120px at 4% 8%, color-mix(in oklch, var(--accent) 9%, transparent), transparent 70%),
radial-gradient(ellipse 380px 160px at 96% 96%, color-mix(in oklch, var(--brand-navy) 18%, transparent), transparent 60%),
var(--surface);
}
/* Amber corner mark — same visual signature as the hero, but smaller so
subordinate cards don't compete with it. */
.card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 56px; height: 2px;
background: linear-gradient(90deg, var(--accent) 0%, color-mix(in oklch, var(--accent) 45%, transparent) 100%);
z-index: 1;
pointer-events: none;
}
.card-pad { padding: var(--sp-4); }
.card-hdr {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: 10px var(--sp-4);
border-bottom: 1px solid var(--border);
background: color-mix(in oklch, var(--surface-2) 92%, transparent);
position: relative;
z-index: 2;
}
.card-hdr h3 {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text);
flex: 1;
display: inline-flex;
align-items: center;
gap: 6px;
}
.card-hdr h3::before {
content: '';
display: inline-block;
width: 12px; height: 12px;
flex-shrink: 0;
background: var(--text-2);
-webkit-mask-image: var(--c-ico, none);
mask-image: var(--c-ico, none);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.card.cust-card .card-hdr h3 { --c-ico: url('data:image/svg+xml;utf8,'); }
.card.rail-map-card .card-hdr h3 { --c-ico: url('data:image/svg+xml;utf8,'); }
.card.qa-card .card-hdr h3 { --c-ico: url('data:image/svg+xml;utf8,'); }
/* Generic rail cards (Schedule, On site now) — they share the calendar/dot icon
set defined inline in the renderRail() function. Default to a clock icon. */
.card:not(.cust-card):not(.rail-map-card):not(.qa-card) .card-hdr h3 {
--c-ico: url('data:image/svg+xml;utf8,');
}
.card-hdr .meta {
font-size: 11px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.card-body { padding: var(--sp-4); }
/* Rail card variant — slightly tighter */
.rail-card { padding: var(--sp-4); }
.rail-card + .rail-card { /* gap handled by .body-rail */ }
/* Site map widget — bigger preview with corner expand + legend pill */
.rail-map-card { display: flex; flex-direction: column; }
.rail-map-frame {
position: relative;
border-bottom: 1px solid var(--border);
}
.rail-map-canvas {
height: 220px;
width: 100%;
background: var(--surface-2);
filter: var(--map-tile-filter);
}
.rail-map-expand {
position: absolute;
top: 8px;
right: 8px;
z-index: 600;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface);
color: var(--text-2);
transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.rail-map-expand:hover {
color: var(--accent);
border-color: var(--accent);
background: var(--surface);
}
.rail-map-legend {
position: absolute;
left: 8px;
bottom: 8px;
z-index: 600;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
background: color-mix(in oklch, var(--surface) 92%, transparent);
border: 1px solid var(--border);
border-radius: 3px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-2);
font-variant-numeric: tabular-nums;
}
.rail-map-legend-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: transparent;
border: 1.5px solid var(--accent);
flex-shrink: 0;
}
/* Body: coords button, then 3-action grid */
.rail-map-body {
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-3) var(--sp-3);
}
.rail-coords {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 9px;
font-size: 11px;
font-weight: 600;
color: var(--text-2);
font-variant-numeric: tabular-nums;
background: var(--surface-2);
border: 1px solid transparent;
border-radius: 4px;
width: 100%;
transition: border-color var(--dur-fast), color var(--dur-fast);
}
.rail-coords:hover {
color: var(--text);
border-color: var(--border-2);
}
.rail-coords-icon { color: var(--muted); font-size: 12px; }
.rail-coords:hover .rail-coords-icon { color: var(--accent); }
.rail-map-actions {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 4px;
}
.rail-map-actions .btn { padding: 5px 10px; }
.rail-map-primary { justify-content: center; }
.rail-map-primary svg { margin-right: 2px; }
/* ── Rail Site Map: address row ────────────────────────────────────────────
Sits above the coords + Directions/Google/Apple buttons. Reads the same
street address shown in the hero so the operator never has to scroll
back up to know which site this map is showing. Click to copy. */
.rail-map-addr {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 10px;
border: 1px solid var(--border);
border-left: 2px solid var(--accent);
border-radius: 4px;
background: color-mix(in oklch, var(--accent) 4%, var(--surface));
color: var(--text);
font-size: 11.5px;
line-height: 1.3;
text-align: left;
cursor: pointer;
transition: border-color var(--dur-fast), background var(--dur-fast);
font-family: inherit;
}
.rail-map-addr:hover {
background: color-mix(in oklch, var(--accent) 7%, var(--surface));
border-color: color-mix(in oklch, var(--accent) 50%, var(--border));
border-left-color: var(--accent);
}
.rail-map-addr-pin {
color: var(--accent);
flex-shrink: 0;
}
.rail-map-addr-text {
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
word-break: break-word;
min-width: 0;
}
.rail-map-addr-copy {
color: var(--muted);
font-size: 11px;
opacity: 0.6;
transition: opacity var(--dur-fast), color var(--dur-fast);
flex-shrink: 0;
}
.rail-map-addr:hover .rail-map-addr-copy { opacity: 1; color: var(--accent); }
.rail-map-addr:active { transform: scale(0.99); }
@media (prefers-reduced-motion: reduce) {
.rail-map-addr:active { transform: none; }
}
/* "No coordinates" empty state */
.map-noloc {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.map-noloc-msg {
font-size: 11.5px;
color: var(--muted);
line-height: 1.5;
}
/* Presence rows — one per worker in the "On site now" rail card. The
"stacked" variant pushes a second line below the worker name to surface
the "↗ on Job · #JOB · Customer" link when they're on a different site. */
.presence-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px;
border-radius: 4px;
font-size: 12px;
transition: background var(--dur-fast);
}
.presence-row.stacked { align-items: flex-start; }
.presence-row.stacked .live-dot { margin-top: 5px; }
.presence-row.stacked .presence-dur { margin-top: 3px; }
.presence-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.presence-row:hover { background: var(--surface-2); }
.presence-row.out .presence-name { color: var(--text-2); }
.presence-name {
font-weight: 600;
color: var(--text);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.presence-name:hover { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent); }
.presence-dur {
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--ok);
flex-shrink: 0;
}
.presence-dur.dim { color: var(--muted); font-weight: 600; }
/* Two-line "on JOB · CUSTOMER" link in the rail "On site now" rows */
.presence-other-line {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
font-size: 10.5px;
font-weight: 600;
color: var(--warn);
text-decoration: none;
line-height: 1.3;
transition: color var(--dur-fast);
}
a.presence-other-line:hover { color: color-mix(in oklch, var(--warn) 60%, var(--text)); text-decoration: underline; text-decoration-color: var(--warn); }
.presence-other-prefix {
font-weight: 800;
letter-spacing: 0.04em;
font-size: 9.5px;
text-transform: uppercase;
color: var(--warn);
}
.presence-other-sep { opacity: 0.45; user-select: none; }
/* Compact two-line variant for the workers table cell */
.presence-cell { display: flex; flex-direction: column; gap: 2px; }
.presence-other-caption {
font-size: 10.5px;
font-weight: 600;
color: var(--warn);
text-decoration: none;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 32ch;
}
a.presence-other-caption:hover { text-decoration: underline; text-decoration-color: var(--warn); }
/* "On other job" pill — clickable when we resolved the other job's name */
.presence-other {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
color: var(--warn);
background: var(--warn-bg);
border: 1px solid color-mix(in oklch, var(--warn) 22%, transparent);
padding: 1px 6px;
border-radius: 3px;
text-decoration: none;
white-space: nowrap;
transition: background var(--dur-fast);
}
a.presence-other:hover { background: color-mix(in oklch, var(--warn-bg) 70%, var(--warn)); text-decoration: none; }
/* Inline presence chip used next to a worker name in tables/tiles */
.presence-inline {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.presence-inline.in { color: var(--ok); }
.presence-inline.out { color: var(--text-2); }
.presence-inline.never { color: var(--muted); font-weight: 500; font-style: italic; }
/* Definition-list pattern for rail facts */
dl.facts {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px var(--sp-3);
font-size: var(--fs-sm);
margin: 0;
}
dl.facts dt {
color: var(--muted);
font-size: 11px;
font-weight: 600;
}
dl.facts dd {
text-align: right;
font-weight: 600;
color: var(--text);
font-variant-numeric: tabular-nums lining-nums;
}
dl.facts dd.dim { font-weight: 500; color: var(--text-2); }
/* ──────────────────────────────────────────────────────────────────────
CUSTOMER CARD (rail) — clickable tile + contact lines
────────────────────────────────────────────────────────────────────── */
.cust-tile {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3);
margin: 0 0 var(--sp-3);
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
text-decoration: none;
color: inherit;
transition: border-color var(--dur-fast), background var(--dur-fast);
}
.cust-tile:hover {
border-color: var(--accent);
background: color-mix(in oklch, var(--accent-bg) 30%, var(--surface));
text-decoration: none;
}
.cust-tile-body { flex: 1; min-width: 0; }
.cust-tile-name {
font-size: var(--fs-sm);
font-weight: 700;
color: var(--text);
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cust-tile-meta {
font-size: 11px;
color: var(--muted);
margin-top: 2px;
}
.cust-tile-arrow {
color: var(--muted);
font-size: 14px;
font-weight: 600;
transition: color var(--dur-fast), transform var(--dur-fast);
}
.cust-tile:hover .cust-tile-arrow {
color: var(--accent);
transform: translateX(3px);
}
.cust-contact {
display: flex;
flex-direction: column;
gap: 1px;
border-top: 1px dashed var(--border);
padding-top: var(--sp-2);
}
.cust-line {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 4px;
margin: 0 -4px;
border-radius: 4px;
font-size: var(--fs-sm);
color: var(--text);
text-decoration: none;
transition: background var(--dur-fast);
min-width: 0;
}
.cust-line:not(.cust-line-static):hover { background: var(--surface-2); text-decoration: none; }
.cust-line-icon {
width: 18px;
text-align: center;
color: var(--muted);
font-size: 11px;
flex-shrink: 0;
}
.cust-line-val {
flex: 1;
min-width: 0;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cust-line-val.dim { color: var(--text-2); font-weight: 500; }
.cust-line-act {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
opacity: 0;
transition: opacity var(--dur-fast), color var(--dur-fast);
flex-shrink: 0;
}
.cust-line:hover .cust-line-act {
opacity: 1;
color: var(--accent);
}
.cust-empty {
font-size: 12px;
color: var(--text-2);
margin-bottom: var(--sp-2);
line-height: 1.5;
}
/* "Open profile" link button — used on crew tiles + worker rows.
Reads as a control, not a generic link. Arrow slides on hover. */
/* "Open link" — the standard redirect button used for PROFILE → and
Foreman → affordances throughout the page. Two-part button: text label
on the left, isolated arrow chip on the right. The arrow chip
announces itself as the actionable element on hover (amber fill +
2px slide). Inspired by Linear's row-action style. */
.open-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 4px 4px 11px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-2);
border: 1px solid var(--border);
border-radius: 4px;
background:
radial-gradient(ellipse 120px 60px at 100% 50%, color-mix(in oklch, var(--accent) 5%, transparent), transparent 70%),
var(--surface);
text-decoration: none;
white-space: nowrap;
transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.open-link:hover {
color: var(--text);
border-color: color-mix(in oklch, var(--accent) 55%, var(--border));
background:
radial-gradient(ellipse 160px 80px at 100% 50%, color-mix(in oklch, var(--accent) 10%, transparent), transparent 70%),
var(--surface);
text-decoration: none;
}
.open-link:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
.open-link:active { transform: none; }
}
.open-link-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
border-radius: 3px;
background: color-mix(in oklch, var(--accent) 10%, var(--surface-2));
color: var(--accent);
font-weight: 700;
font-size: 11px;
line-height: 1;
letter-spacing: 0;
transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.open-link:hover .open-link-arrow {
background: var(--accent);
color: var(--accent-fg);
transform: translateX(2px);
}
.open-link-sm { padding: 3px 3px 3px 9px; font-size: 10px; gap: 6px; }
.open-link-sm .open-link-arrow { width: 18px; height: 18px; font-size: 10px; }
/* ──────────────────────────────────────────────────────────────────────
CUSTOMER + EMPLOYEE TILES (right rail + crew lists)
────────────────────────────────────────────────────────────────────── */
.entity-tile {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3);
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
}
.entity-tile + .entity-tile { margin-top: 6px; }
.entity-avatar {
width: 38px;
height: 38px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
background: var(--info-bg);
color: var(--info);
flex-shrink: 0;
}
.entity-avatar.crew { background: var(--ok-bg); color: var(--ok); }
.entity-avatar.warn { background: var(--warn-bg); color: var(--warn); }
.entity-name {
font-size: var(--fs-sm);
font-weight: 700;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.entity-meta {
font-size: 11px;
color: var(--muted);
margin-top: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.entity-tile .grow { flex: 1; min-width: 0; }
.entity-tile .num-badge {
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text);
}
.entity-tile .num-badge small { color: var(--muted); font-weight: 500; }
/* ──────────────────────────────────────────────────────────────────────
CREW STRIP — compact one-line replacement for the old entity-tile crew
cards. Lives above the Workers table inside Crew & Schedule. Each row is
~32px tall so 4 crews fit in ~130px instead of ~280px of stacked tiles.
────────────────────────────────────────────────────────────────────── */
.crew-strip {
position: relative;
display: flex;
flex-direction: column;
gap: 4px;
border: 1px solid var(--border);
border-radius: 8px;
background:
radial-gradient(ellipse 320px 140px at 3% 8%, color-mix(in oklch, var(--accent) 5%, transparent), transparent 65%),
radial-gradient(ellipse 420px 180px at 97% 96%, color-mix(in oklch, var(--brand-navy) 4%, transparent), transparent 60%),
var(--surface);
overflow: hidden;
}
[data-theme="dark"] .crew-strip {
background:
radial-gradient(ellipse 320px 140px at 3% 8%, color-mix(in oklch, var(--accent) 9%, transparent), transparent 65%),
radial-gradient(ellipse 420px 180px at 97% 96%, color-mix(in oklch, var(--brand-navy) 18%, transparent), transparent 60%),
var(--surface);
}
.crew-strip::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 56px; height: 2px;
background: linear-gradient(90deg, var(--accent) 0%, color-mix(in oklch, var(--accent) 45%, transparent) 100%);
z-index: 1;
pointer-events: none;
}
.crew-strip-row {
display: grid;
grid-template-columns: 28px max-content 1fr max-content 22px;
align-items: center;
gap: 10px;
padding: 7px 12px;
font-size: var(--fs-sm);
line-height: 1.25;
border-bottom: 1px solid var(--border);
}
.crew-strip-row:last-child { border-bottom: 0; }
.crew-strip-avatar {
width: 28px; height: 28px;
border-radius: 4px;
background: var(--ok-bg); color: var(--ok);
display: flex; align-items: center; justify-content: center;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
}
.crew-strip-name {
font-weight: 700;
color: var(--text);
white-space: nowrap;
font-variant-numeric: tabular-nums lining-nums;
}
.crew-strip-meta {
font-size: 11px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-variant-numeric: tabular-nums;
}
.crew-strip-meta .dot { margin: 0 4px; color: var(--border-2); }
.crew-strip-role {
display: inline-block;
font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
padding: 1px 5px;
border-radius: 2px;
background: var(--accent-bg);
color: var(--accent);
vertical-align: 1px;
}
.crew-strip-role.sub {
background: var(--surface-2);
color: var(--text-2);
}
.crew-strip-link {
font-size: 11px;
font-weight: 600;
color: var(--text-2);
text-decoration: none;
white-space: nowrap;
letter-spacing: 0.02em;
transition: color var(--dur-fast);
}
.crew-strip-link:hover { color: var(--accent); }
/* Crew remove "×" — destructive affordance. Quiet by default (no border,
muted glyph) so the row stays scannable; hover reveals a soft red ring
+ tinted background so the operator knows the click will remove the
crew. Same circular shape language as the customer redirect chip. */
.crew-strip-x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
border: 1px solid transparent;
border-radius: 50%;
background: transparent;
color: var(--muted);
font-size: 16px; line-height: 1;
cursor: pointer;
transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.crew-strip-x:hover {
color: var(--risk);
border-color: color-mix(in oklch, var(--risk) 45%, transparent);
background: color-mix(in oklch, var(--risk) 10%, var(--surface));
}
.crew-strip-x:active { transform: scale(0.92); }
@media (prefers-reduced-motion: reduce) {
.crew-strip-x:active { transform: none; }
}
/* ──────────────────────────────────────────────────────────────────────
JOB SEGMENTS — empty-state row collapses three former callouts (header
meta, Quick Templates, Break button) into one single-line CTA group.
────────────────────────────────────────────────────────────────────── */
.seg-empty-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 10px 12px;
margin-top: 10px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 6px;
}
.seg-empty-or {
font-size: 11px;
color: var(--muted);
letter-spacing: 0.02em;
margin: 0 2px;
}
/* ──────────────────────────────────────────────────────────────────────
TABLES (jobs / invoices / scope)
────────────────────────────────────────────────────────────────────── */
.tbl {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.tbl thead th {
text-align: left;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
padding: 9px var(--sp-3);
border-bottom: 1px solid var(--border);
background: var(--surface-2);
white-space: nowrap;
}
.tbl tbody td {
padding: 10px var(--sp-3);
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl td.num,
.tbl th.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.tbl td.dim { color: var(--muted); }
.tbl tbody td strong { font-weight: 700; }
.tbl-wrap {
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
background: var(--surface);
}
.tbl tbody td { padding: 9px var(--sp-3); }
.tbl tbody tr:hover { background: color-mix(in oklch, var(--accent) 4%, var(--surface-2)); }
/* ──────────────────────────────────────────────────────────────────────
MINI-STAT STRIP — small horizontal KPI rail used inside section bodies
(HCP work scope billed/COGS/profit, segment budget, etc). Borders only,
tabular numerics, single accent column when one number is "the news".
────────────────────────────────────────────────────────────────────── */
.mini-stats {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
padding: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
margin-bottom: 10px;
overflow: hidden;
}
.mini-stat {
display: flex;
flex-direction: column;
gap: 3px;
padding: 10px 16px;
border-left: 1px solid var(--border);
flex: 0 0 auto;
}
.mini-stat:first-child { border-left: 0; }
.mini-stat-lbl {
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
line-height: 1;
}
.mini-stat-val {
font-size: 14px;
font-weight: 700;
font-variant-numeric: tabular-nums lining-nums;
color: var(--text);
letter-spacing: -0.005em;
line-height: 1.15;
}
.mini-stat-val small {
font-size: 11px;
font-weight: 600;
color: var(--muted);
margin-left: 4px;
}
.mini-stat.is-positive .mini-stat-val { color: var(--ok); }
.mini-stat.is-warn .mini-stat-val { color: var(--accent); }
.mini-stat.is-risk .mini-stat-val { color: var(--risk); }
.mini-stats .mini-stat-meta {
margin-left: auto;
padding: 10px 16px;
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.02em;
border-left: 1px solid var(--border);
}
/* ──────────────────────────────────────────────────────────────────────
ACTIVITY TIMELINE — filter chips, day groups, icon column
────────────────────────────────────────────────────────────────────── */
.t-filters {
display: inline-flex;
align-items: stretch;
gap: 0;
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
margin-bottom: var(--sp-4);
background: var(--surface);
}
.t-filter {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-2);
border-right: 1px solid var(--border);
background: transparent;
cursor: pointer;
transition: color var(--dur-fast), background var(--dur-fast);
font-family: inherit;
}
.t-filter:last-child { border-right: 0; }
.t-filter:hover { color: var(--text); background: var(--surface-2); }
.t-filter.active { color: var(--accent); background: var(--accent-bg); }
.t-filter-n {
font-size: 9.5px;
font-weight: 700;
color: var(--muted);
background: var(--surface-2);
padding: 1px 5px;
border-radius: 8px;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
.t-filter.active .t-filter-n { background: var(--surface); color: var(--accent); }
.timeline-wrap { display: flex; flex-direction: column; gap: var(--sp-5); }
.t-day-head {
display: flex;
align-items: baseline;
gap: var(--sp-2);
padding-bottom: 6px;
margin-bottom: var(--sp-2);
border-bottom: 1px solid var(--border);
}
.t-day-lbl {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text);
}
.t-day-n {
font-size: 10px;
font-weight: 700;
color: var(--muted);
font-variant-numeric: tabular-nums;
padding: 1px 6px;
border-radius: 8px;
background: var(--surface-2);
}
.t-day-rows { display: flex; flex-direction: column; }
.t-row {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
gap: var(--sp-3);
align-items: flex-start;
padding: 9px 0;
border-bottom: 1px dashed var(--border);
position: relative;
}
.t-row:last-child { border-bottom: 0; }
.t-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
background: var(--surface-2);
color: var(--muted);
margin-top: 1px;
flex-shrink: 0;
}
.t-row.ok .t-icon { background: var(--ok-bg); color: var(--ok); }
.t-row.warn .t-icon { background: var(--warn-bg); color: var(--warn); }
.t-row.risk .t-icon { background: var(--risk-bg); color: var(--risk); }
.t-row.info .t-icon { background: var(--info-bg); color: var(--info); }
.t-row.accent .t-icon { background: var(--accent-bg); color: var(--accent); }
.t-row-body { min-width: 0; }
.t-msg {
font-size: var(--fs-sm);
color: var(--text);
line-height: 1.45;
}
.t-msg strong { font-weight: 700; }
.t-msg .num { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.t-msg .t-geo {
display: inline-block;
width: 14px; height: 14px;
border-radius: 3px;
background: var(--ok-bg);
color: var(--ok);
text-align: center;
font-size: 10px;
font-weight: 700;
line-height: 14px;
margin-left: 4px;
vertical-align: -1px;
}
.t-foot {
display: flex;
align-items: baseline;
gap: var(--sp-2);
margin-top: 3px;
}
.t-kind {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.t-time {
font-size: 11px;
color: var(--muted);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
/* ──────────────────────────────────────────────────────────────────────
BLOCK HEADERS — used for "Active now", "Upcoming", inline section titles.
Editorial label + count + right-aligned meta.
────────────────────────────────────────────────────────────────────── */
.block-head {
display: flex;
align-items: baseline;
gap: var(--sp-3);
padding-bottom: var(--sp-2);
margin-bottom: var(--sp-3);
border-bottom: 1px solid var(--border);
}
.block-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text);
}
.block-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--muted);
}
.block-dot.ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ok) 18%, transparent); }
.block-dot.info { background: var(--info); box-shadow: 0 0 0 3px color-mix(in oklch, var(--info) 18%, transparent); }
.block-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklch, var(--warn) 18%, transparent); }
.block-dot.risk { background: var(--risk); box-shadow: 0 0 0 3px color-mix(in oklch, var(--risk) 18%, transparent); }
.block-count {
font-size: 11px;
font-weight: 700;
color: var(--muted);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
text-transform: none;
padding: 1px 7px;
border-radius: 8px;
background: var(--surface-2);
margin-left: 4px;
}
.block-meta {
margin-left: auto;
font-size: 11px;
color: var(--muted);
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
gap: 4px;
}
.block-meta .num { font-weight: 600; color: var(--text-2); }
.block-meta strong { color: var(--text); font-weight: 700; }
.block-meta .dim { color: var(--muted); }
/* Live grid — same as jobs-grid but with a slightly tighter card style */
.live-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--sp-3);
}
/* Live presence chip on a job card */
.jc-live {
display: flex;
align-items: center;
}
.live-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
color: var(--text-2);
background: var(--ok-bg);
border: 1px solid color-mix(in oklch, var(--ok) 22%, transparent);
padding: 3px 8px;
border-radius: 4px;
font-variant-numeric: tabular-nums;
}
.live-chip strong { color: var(--ok); font-weight: 800; }
.live-chip .live-dur { color: var(--muted); font-weight: 600; }
.live-chip.muted {
background: var(--surface-2);
color: var(--muted);
border-color: var(--border);
}
.live-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ok);
flex-shrink: 0;
position: relative;
animation: live-pulse 1.8s var(--ease-out-quart) infinite;
}
@media (prefers-reduced-motion: reduce) {
.live-dot { animation: none; }
}
.live-dot.muted { background: var(--muted); animation: none; }
@keyframes live-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--ok) 60%, transparent); }
70% { box-shadow: 0 0 0 6px color-mix(in oklch, var(--ok) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--ok) 0%, transparent); }
}
/* ──────────────────────────────────────────────────────────────────────
JOB CARDS GRID (used on customer-detail.html jobs tab)
────────────────────────────────────────────────────────────────────── */
.jobs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--sp-3);
}
.job-card {
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
transition: border-color var(--dur-fast);
text-decoration: none;
color: inherit;
}
.job-card:hover { border-color: var(--border-2); text-decoration: none; }
.job-card .jc-top {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.job-card .jc-num { font-weight: 700; color: var(--text); letter-spacing: 0.02em; }
.job-card .jc-name {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--text);
line-height: 1.3;
}
.job-card .jc-addr {
font-size: 11px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.job-card .jc-foot {
display: flex;
align-items: baseline;
gap: var(--sp-2);
margin-top: auto;
padding-top: var(--sp-2);
border-top: 1px dashed var(--border);
font-size: 11px;
color: var(--muted);
}
.job-card .jc-price {
margin-left: auto;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text);
font-size: 12px;
}
/* ──────────────────────────────────────────────────────────────────────
KPI STRIP (4-up cards, used on customer-detail header)
────────────────────────────────────────────────────────────────────── */
.kpi-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.kpi-cell {
padding: var(--sp-4);
border-left: 1px solid var(--border);
background: var(--surface);
}
.kpi-cell:first-child { border-left: 0; }
.kpi-lbl {
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 5px;
}
.kpi-val {
font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.875rem);
font-weight: 700;
letter-spacing: -0.015em;
color: var(--text);
font-variant-numeric: tabular-nums lining-nums;
line-height: 1.05;
}
.kpi-sub {
font-size: 11px;
color: var(--muted);
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
/* ──────────────────────────────────────────────────────────────────────
PROFILE HEADER (customer page) — tight, no wasted space.
Single-row layout: identity + KPI tape side-by-side; contact line
below. No banner, no avatar bloat. Borrowed from a Bloomberg-terminal
cap row, not a SaaS hero card.
────────────────────────────────────────────────────────────────────── */
.profile-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--sp-3) var(--sp-6);
align-items: center;
padding: var(--sp-4) 0 var(--sp-3);
border-bottom: 1px solid var(--border);
margin-bottom: var(--sp-5);
}
.profile-id { display: flex; gap: var(--sp-3); align-items: center; min-width: 0; }
.profile-avatar {
width: 40px; height: 40px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.04em;
background: var(--info-bg);
color: var(--info);
border: 1px solid color-mix(in oklch, var(--info) 22%, var(--border));
flex-shrink: 0;
}
.profile-name {
font-size: var(--fs-xl);
font-weight: 700;
letter-spacing: -0.018em;
line-height: 1.1;
color: var(--text);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 38ch;
}
.profile-tags { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Contact line — sits as a second tight row below the identity, all on one line */
.profile-meta {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: var(--sp-3);
flex-wrap: wrap;
font-size: var(--fs-xs);
color: var(--text-2);
font-weight: 500;
}
.profile-meta a { color: var(--text-2); text-decoration: none; }
.profile-meta a:hover { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent); }
.profile-meta .pcl { font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.profile-meta .sep { color: var(--border-2); user-select: none; }
.profile-meta .icon-btn { width: 18px; height: 18px; font-size: 10px; }
/* KPI tape — small, dense, fits on one row with the name. Carries the same
amber top-hairline signature as the cards so the hero reads as one system. */
.kpi-tape {
position: relative;
display: inline-flex;
align-items: stretch;
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
background: var(--surface);
}
.kpi-tape::before {
content: '';
position: absolute; top: 0; left: 0;
width: 100%; height: 2px;
background: linear-gradient(90deg, var(--accent) 0%, color-mix(in oklch, var(--accent) 30%, transparent) 45%, transparent 100%);
pointer-events: none; z-index: 1;
}
.kpi-tape-cell {
padding: 6px 12px 7px;
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 2px;
min-width: 90px;
}
.kpi-tape-cell:first-child { border-left: 0; }
.kpi-tape-lbl {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.kpi-tape-val {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text);
font-variant-numeric: tabular-nums lining-nums;
line-height: 1.1;
}
.kpi-tape-cell .kpi-tape-val.risk { color: var(--risk); }
.kpi-tape-cell .kpi-tape-val.muted { color: var(--muted); }
@container page (max-width: 880px) {
.profile-head { grid-template-columns: 1fr; }
.kpi-tape { width: 100%; }
}
@container page (max-width: 560px) {
.kpi-tape { flex-wrap: wrap; }
.kpi-tape-cell { min-width: 50%; flex: 1 1 50%; }
.kpi-tape-cell:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
.kpi-tape-cell:nth-child(4) { border-top: 1px solid var(--border); }
}
/* ──────────────────────────────────────────────────────────────────────
EMPTY STATES — teach, not announce
────────────────────────────────────────────────────────────────────── */
.empty {
padding: var(--sp-8) var(--sp-6);
text-align: left;
border: 1px dashed var(--border);
border-radius: 8px;
background: var(--surface);
}
.empty-msg {
font-size: var(--fs-sm);
color: var(--text-2);
margin-bottom: 6px;
max-width: 56ch;
}
.empty-cta {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--accent);
text-decoration: none;
cursor: pointer;
padding: 4px 0;
}
.empty-cta:hover { text-decoration: underline; text-decoration-color: var(--accent); color: color-mix(in oklch, var(--accent) 80%, var(--text)); }
/* ──────────────────────────────────────────────────────────────────────
QUICK ACTIONS (rail) — primary CTA + 2x2 secondary tile grid
────────────────────────────────────────────────────────────────────── */
.qa-card .card-hdr { padding-right: var(--sp-3); }
.qa-hint {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.qa-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.qa-primary {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-start;
padding: 10px var(--sp-3);
font-size: 12px;
}
.qa-primary > span {
flex: 1;
text-align: left;
letter-spacing: 0.02em;
}
.qa-primary svg { color: currentColor; flex-shrink: 0; }
.qa-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 4px;
}
.qa-tile {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 8px;
padding: 9px 10px;
font-size: 11px;
font-weight: 600;
color: var(--text-2);
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface);
text-decoration: none;
text-align: left;
transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
cursor: pointer;
font-family: inherit;
}
.qa-tile:hover {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-bg);
text-decoration: none;
}
.qa-tile-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--muted);
width: 18px;
}
.qa-tile:hover .qa-tile-icon { color: var(--accent); }
.qa-tile-lbl {
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.qa-kbd {
font-family: var(--font-sans);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--muted);
background: var(--surface-2);
padding: 1px 5px;
border-radius: 2px;
border: 1px solid var(--border);
font-variant-numeric: tabular-nums;
}
.qa-primary .qa-kbd {
background: color-mix(in oklch, var(--accent-fg) 12%, transparent);
border-color: color-mix(in oklch, var(--accent-fg) 18%, transparent);
color: var(--accent-fg);
margin-left: auto;
}
.qa-tile:hover .qa-kbd { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 30%, transparent); }
/* Backwards compat for any other surfaces using qa-list */
.qa-list { display: flex; flex-direction: column; gap: 6px; }
.qa-list .btn { justify-content: flex-start; }
/* ──────────────────────────────────────────────────────────────────────
SCOPE — line items grouped by category, with per-row hover actions
────────────────────────────────────────────────────────────────────── */
.scope-cat-hdr {
display: flex;
align-items: baseline;
gap: var(--sp-3);
padding: 9px var(--sp-3);
background: var(--surface-2);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-2);
border-bottom: 1px solid var(--border);
}
.scope-cat-hdr .scope-cat-count {
font-size: 10px;
font-weight: 700;
color: var(--muted);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
padding: 1px 6px;
border-radius: 8px;
background: var(--surface);
text-transform: none;
}
.scope-cat-hdr .total {
margin-left: auto;
font-size: 12px;
font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
text-transform: none;
}
.scope-desc {
font-weight: 600;
color: var(--text);
line-height: 1.35;
}
.scope-notes {
font-size: 11px;
color: var(--muted);
margin-top: 3px;
line-height: 1.4;
}
.scope-unit { color: var(--muted); font-weight: 500; margin-left: 2px; }
.scope-tbl .scope-act-col { width: 56px; }
.scope-row-actions {
display: inline-flex;
align-items: center;
gap: 2px;
opacity: 0;
transition: opacity var(--dur-fast);
}
.scope-row:hover .scope-row-actions,
.scope-row:focus-within .scope-row-actions { opacity: 1; }
.scope-row-act {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: 1px solid transparent;
border-radius: 3px;
color: var(--muted);
text-decoration: none;
transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.scope-row-act:hover {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-bg);
}
.scope-empty { padding: var(--sp-6) var(--sp-6); }
.scope-empty-actions {
display: flex;
gap: 6px;
margin-top: var(--sp-3);
flex-wrap: wrap;
}
/* ──────────────────────────────────────────────────────────────────────
SEGMENTS — progress bar + expandable cards
────────────────────────────────────────────────────────────────────── */
/* Progress bar — main job aggregate */
.seg-progress-wrap { margin-bottom: var(--sp-3); }
.seg-progress-bar {
height: 6px; border-radius: 3px;
background: var(--surface2);
overflow: hidden;
}
.seg-progress-fill {
height: 100%; border-radius: 3px;
background: var(--accent);
transition: width .3s ease-out;
}
.seg-progress-label {
display: flex; justify-content: space-between; align-items: baseline;
margin-top: 6px; font-size: 11px; color: var(--muted);
font-variant-numeric: tabular-nums;
}
/* Scope allocation bar */
.seg-scope-bar-wrap { margin: 0 0 var(--sp-3); }
.seg-scope-bar {
height: 8px; border-radius: 4px; display: flex;
overflow: hidden; background: var(--surface-2);
}
.seg-scope-fill { height: 100%; transition: width var(--dur-mid) var(--ease-out-quart); min-width: 2px; }
.seg-scope-labels {
display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4);
margin-top: var(--sp-2);
}
.seg-scope-chip {
font-size: var(--fs-2xs); font-variant-numeric: tabular-nums;
color: var(--text-2);
}
.seg-scope-total {
font-size: 11px; font-weight: 700; margin-top: var(--sp-1);
font-variant-numeric: tabular-nums;
}
/* 3-column segment details grid */
.seg-details-3col { grid-template-columns: 1fr 1fr 1fr; }
/* Segment edit head button */
.seg-edit-head-btn {
background: none; border: 1px solid transparent; cursor: pointer;
font-size: 14px; color: var(--muted); padding: 2px 6px;
border-radius: 4px; transition: all var(--dur-fast);
line-height: 1;
}
.seg-edit-head-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
/* Segment edit mode */
.seg-card-body.seg-edit-mode { padding: 12px; }
.seg-card-body.seg-edit-mode .seg-add-form { border: none; padding: 0; margin: 0; }
/* ── Page edit bar (floating save bar in edit mode) ─────────────────── */
.page-edit-bar {
display: flex; align-items: center; gap: var(--sp-3);
padding: 8px 16px; background: var(--accent-bg); border-bottom: 1px solid var(--accent);
position: sticky; top: var(--topbar-h); z-index: 90;
}
/* ── Inline page-edit fields ──────────────────────────────────────── */
.pe-field {
display: inline-flex; align-items: center; gap: var(--sp-2);
}
.pe-input {
font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500;
border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px;
background: var(--surface); color: var(--text);
font-variant-numeric: tabular-nums;
transition: border-color var(--dur-fast);
}
.pe-input:focus { outline: none; border-color: var(--accent); }
.pe-input[type="number"] { width: 90px; text-align: right; }
.pe-input[type="date"] { width: 140px; }
.pe-select {
font-family: var(--font-sans); font-size: var(--fs-sm);
border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px;
background: var(--surface); color: var(--text);
}
/* ── Smart Crew Picker ────────────────────────────────────────────── */
.crew-pick-wrap { position: relative; }
.crew-pick-display {
min-height: 36px; padding: 4px 8px; border: 1px solid var(--border);
border-radius: 6px; cursor: pointer; display: flex; flex-wrap: wrap;
gap: 4px; align-items: center; background: var(--surface);
transition: border-color var(--dur-fast);
}
.crew-pick-display:hover { border-color: var(--accent); }
.crew-pick-chip {
font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
background: var(--surface-2); color: var(--text); cursor: pointer;
display: inline-flex; align-items: center; gap: 3px;
transition: all var(--dur-fast);
}
.crew-pick-chip:hover { background: var(--risk-bg); text-decoration: line-through; }
.crew-pick-chip.is-foreman { background: var(--accent-bg); border: 1px solid var(--accent); }
.crew-pick-fman-badge {
font-size: 8px; font-weight: 800; padding: 0 3px; border-radius: 2px;
background: var(--accent); color: var(--accent-fg); letter-spacing: .04em;
}
.crew-pick-dropdown {
display: none; position: absolute; top: 100%; left: 0; right: 0;
z-index: 100; margin-top: 4px; border: 1px solid var(--border);
border-radius: 8px; background: var(--surface); overflow: hidden;
box-shadow: 0 4px 12px oklch(0% 0 0 / .08);
}
.crew-pick-dropdown.open { display: block; }
.crew-pick-tabs {
display: flex; border-bottom: 1px solid var(--border);
}
.crew-pick-tab {
flex: 1; padding: 7px 0; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em; text-align: center;
border: none; background: var(--bg); color: var(--muted); cursor: pointer;
transition: all var(--dur-fast);
}
.crew-pick-tab:first-child { border-right: 1px solid var(--border); }
.crew-pick-tab.active { background: var(--surface); color: var(--accent); }
.crew-pick-tab:hover:not(.active) { color: var(--text); }
.crew-pick-search {
width: 100%; padding: 8px 12px; border: none; border-bottom: 1px solid var(--border);
font-family: var(--font-sans); font-size: 12px; background: var(--bg);
color: var(--text); outline: none;
}
.crew-pick-list {
max-height: 200px; overflow-y: auto; padding: 4px 0;
}
.crew-pick-row {
display: flex; align-items: center; gap: 8px; padding: 6px 12px;
cursor: pointer; font-size: 12px; transition: background var(--dur-fast);
}
.crew-pick-row:hover { background: var(--surface-2); }
.crew-pick-row.is-selected { background: var(--accent-bg); }
.crew-pick-name { flex: 1; font-weight: 600; color: var(--text); }
.crew-pick-role { font-size: 10px; color: var(--muted); }
.crew-pick-fman-btn {
font-size: 9px; font-weight: 800; width: 20px; height: 20px;
border: 1px solid var(--border); border-radius: 3px; background: var(--surface);
color: var(--muted); cursor: pointer; display: flex; align-items: center;
justify-content: center; transition: all var(--dur-fast);
}
.crew-pick-fman-btn:hover { border-color: var(--accent); color: var(--accent); }
.crew-pick-fman-btn.active {
background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
}
.crew-pick-footer {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 12px; border-top: 1px solid var(--border); background: var(--bg);
}
/* Job Crew Assignment (jca) — direct toggle cards */
.jca-form {
border: 1px solid var(--border); border-radius: 8px; padding: 16px;
background: var(--surface);
}
.jca-section-lbl {
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; color: var(--muted); margin-bottom: 10px;
}
.jca-crew-list {
display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px;
}
.jca-crew-card {
display: block; border: 1px solid var(--border);
border-radius: 6px; transition: all var(--dur-fast);
background: var(--bg); overflow: hidden;
}
.jca-crew-card:hover { border-color: oklch(72% 0.08 70); }
.jca-crew-card:has(.jca-crew-chk:checked) {
border-color: var(--accent); background: oklch(72% 0.06 70 / .06);
}
.jca-crew-head {
display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer;
}
.jca-crew-name {
font-size: 13px; font-weight: 600; color: var(--text); flex: 1;
}
.jca-crew-meta {
font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.jca-crew-chevron {
font-size: 11px; color: var(--muted); transition: transform var(--dur-fast);
}
.jca-crew-members {
padding: 0 12px 10px; display: flex; flex-direction: column; gap: 2px;
}
.jca-member-row {
display: flex; align-items: center; gap: 6px; padding: 3px 4px;
border-radius: 4px; cursor: pointer; font-size: 12px;
transition: background var(--dur-fast);
}
.jca-member-row:hover { background: var(--surface-2); }
.jca-member-row.already { opacity: 0.5; cursor: default; }
.jca-member-name { flex: 1; font-weight: 500; color: var(--text); }
.jca-member-name.is-fman { color: var(--accent); font-weight: 600; }
.jca-member-role { font-size: 10px; color: var(--muted); }
.jca-member-tag {
font-size: 9px; padding: 1px 5px; border-radius: 3px;
background: var(--surface-2); color: var(--muted); white-space: nowrap;
}
.jca-summary {
font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 12px;
font-variant-numeric: tabular-nums;
}
.jca-summary.has-selection { color: var(--ok); }
.jca-fields {
display: grid; grid-template-columns: 1fr 1fr 90px; gap: 8px; margin-bottom: 12px;
}
.jca-actions {
display: flex; gap: 8px; justify-content: flex-end;
}
/* Segment card — expandable */
.seg-card {
border: 1px solid var(--border); border-radius: 8px;
margin-top: 6px; overflow: hidden;
transition: border-color .15s;
}
.seg-card:hover { border-color: rgba(var(--accent-rgb, 212,165,116), .35); }
.seg-card-head {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto auto auto;
gap: var(--sp-2);
padding: 10px 12px;
align-items: center;
cursor: pointer;
user-select: none;
}
.seg-card-head:hover { background: var(--hover); }
.seg-num {
font-size: 11px; font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--muted); letter-spacing: 0.04em;
}
.seg-name {
font-size: var(--fs-sm, 13px); font-weight: 600;
color: var(--text); line-height: 1.3;
}
.seg-meta {
font-size: 11px; color: var(--muted);
margin-top: 2px; font-variant-numeric: tabular-nums;
}
.seg-chevron {
font-size: 12px; color: var(--muted);
transition: transform .15s;
}
.seg-card.expanded .seg-chevron { transform: rotate(180deg); }
/* Segment body — hidden by default */
.seg-card-body {
display: none; padding: 0 12px 12px;
border-top: 1px solid var(--border);
}
.seg-card.expanded .seg-card-body { display: block; padding-top: 10px; }
/* Segment body grid */
.seg-details {
display: grid; grid-template-columns: 1fr 1fr;
gap: 8px 16px; margin-bottom: 10px;
}
.seg-detail-lbl {
font-size: 10px; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: .04em;
}
.seg-detail-val {
font-size: 13px; font-weight: 500; color: var(--text);
font-variant-numeric: tabular-nums;
}
/* Segment crew chips */
.seg-crew-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.seg-crew-chip {
font-size: 11px; font-weight: 600; padding: 3px 8px;
border-radius: 4px; background: var(--surface2); color: var(--text);
}
/* Segment notes */
.seg-notes {
font-size: 12px; color: var(--text); line-height: 1.45;
margin-top: 8px; padding: 8px 10px;
background: var(--surface2); border-radius: 6px;
white-space: pre-wrap;
}
/* Segment status actions */
.seg-actions {
display: flex; gap: 6px; margin-top: 10px;
flex-wrap: wrap;
}
.seg-action-btn {
padding: 5px 12px; border-radius: 5px; font-size: 11px; font-weight: 600;
cursor: pointer; border: 1px solid var(--border); background: var(--surface);
color: var(--text); font-family: inherit; transition: all .12s;
}
.seg-action-btn:hover { border-color: var(--accent); background: rgba(var(--accent-rgb, 212,165,116), .08); }
.seg-action-btn.primary {
background: var(--accent); color: var(--on-primary, #fff);
border-color: var(--accent);
}
.seg-action-btn.primary:hover { background: var(--accent-hover, #C4925E); }
/* Add segment inline form */
.seg-add-form {
margin-top: 10px; padding: 12px;
border: 1px dashed var(--border); border-radius: 8px;
display: grid; gap: 10px;
}
.seg-add-form .ed-row { display: grid; gap: 6px; }
.seg-add-form .ed-row.two-col { grid-template-columns: 1fr 1fr; gap: 10px; }
.seg-add-form .ed-row.three-col { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.seg-add-form .ed-row.two-col > div,
.seg-add-form .ed-row.three-col > div { display: grid; gap: 4px; }
/* Legacy compat — remove old .seg-row if any remain */
.seg-row {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
gap: var(--sp-3);
padding: var(--sp-3);
border-top: 1px solid var(--border);
align-items: center;
}
.seg-row:first-child { border-top: 0; }
/* ──────────────────────────────────────────────────────────────────────
SECTION SHELL — gives anchor target + breathing room
────────────────────────────────────────────────────────────────────── */
section.s {
scroll-margin-top: calc(var(--topbar-h) + var(--subnav-h) + var(--sp-4));
padding-top: var(--sp-6);
margin-top: var(--sp-6);
border-top: 1px solid var(--border);
}
section.s:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
section.s > h2 {
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text);
margin-bottom: var(--sp-4);
display: flex;
align-items: center;
gap: var(--sp-2);
padding-left: 10px;
position: relative;
min-height: 18px;
line-height: 1.1;
}
section.s > h2::after {
content: '';
position: absolute;
left: 0; top: 50%;
width: 2px; height: 12px;
background: var(--accent);
border-radius: 1px;
transform: translateY(-50%);
}
section.s > h2::before {
content: '';
display: inline-block;
width: 14px; height: 14px;
flex-shrink: 0;
background: var(--text-2);
-webkit-mask-image: var(--s-ico, none);
mask-image: var(--s-ico, none);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
margin-right: 4px;
opacity: var(--s-ico-vis, 1);
}
section.s[id="sec-overview"] > h2 { --s-ico: url('data:image/svg+xml;utf8,'); }
section.s[id="sec-timeline"] > h2 { --s-ico: url('data:image/svg+xml;utf8,'); }
section.s[id="sec-appointments"] > h2 { --s-ico: url('data:image/svg+xml;utf8,'); }
section.s[id="sec-custom-fields"] > h2 { --s-ico: url('data:image/svg+xml;utf8,'); }
section.s[id="sec-crew"] > h2 { --s-ico: url('data:image/svg+xml;utf8,'); }
section.s[id="sec-scope"] > h2 { --s-ico: url('data:image/svg+xml;utf8,'); }
section.s[id="sec-invoices"] > h2 { --s-ico: url('data:image/svg+xml;utf8,'); }
section.s[id="sec-bounty"] > h2 { --s-ico: url('data:image/svg+xml;utf8,'); }
section.s[id="sec-captures"] > h2 { --s-ico: url('data:image/svg+xml;utf8,'); }
section.s[id="sec-activity"] > h2 { --s-ico: url('data:image/svg+xml;utf8,'); }
section.s > h2 .meta {
font-size: 11px;
color: var(--muted);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
text-transform: none;
font-weight: 600;
}
section.s > h2 .grow { flex: 1; }
section.s > h2 .open-link,
section.s > h2 button { letter-spacing: 0.02em; }
/* ──────────────────────────────────────────────────────────────────────
TAGS
────────────────────────────────────────────────────────────────────── */
.tag {
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
padding: 2px 6px;
border-radius: 3px;
background: var(--surface-2);
color: var(--text-2);
border: 1px solid var(--border);
}
.tag-list { display: inline-flex; flex-wrap: wrap; gap: 4px; }
/* ──────────────────────────────────────────────────────────────────────
COPY-LINK INLINE BUTTON
────────────────────────────────────────────────────────────────────── */
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 3px;
color: var(--muted);
font-size: 11px;
transition: color var(--dur-fast), background var(--dur-fast);
}
.icon-btn:hover { color: var(--accent); background: var(--accent-bg); }
/* ──────────────────────────────────────────────────────────────────────
LOADING / SPINNER (static; no skeleton animations per .impeccable.md)
────────────────────────────────────────────────────────────────────── */
.spinner-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-12) var(--sp-4);
color: var(--muted);
font-size: 12px;
}
.spinner {
display: inline-block;
width: 14px; height: 14px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.7s linear infinite;
margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ──────────────────────────────────────────────────────────────────────
TABS (within sections, e.g. customer Jobs/Invoices)
────────────────────────────────────────────────────────────────────── */
.tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border);
margin-top: var(--sp-6);
margin-bottom: var(--sp-4);
}
.tabs:first-child { margin-top: 0; }
.tab-btn {
padding: 9px var(--sp-4);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-2);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color var(--dur-fast), border-color var(--dur-fast);
background: transparent;
border-top: none;
border-left: none;
border-right: none;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-count {
font-size: 10px;
font-weight: 700;
color: var(--muted);
margin-left: 6px;
font-variant-numeric: tabular-nums;
}
/* ──────────────────────────────────────────────────────────────────────
REDUCED MOTION
────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 120ms !important;
}
}
/* ──────────────────────────────────────────────────────────────────────
FIELD CAPTURES — photos / notes / PDFs uploaded by foremen + crew
────────────────────────────────────────────────────────────────────── */
.cap-list {
display: flex;
flex-direction: column;
gap: var(--sp-2);
margin-top: var(--sp-3);
}
.cap-row {
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: var(--sp-3);
align-items: flex-start;
padding: var(--sp-3);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--rad-2);
transition: border-color 120ms ease;
}
.cap-row:hover { border-color: var(--border-strong, var(--border)); }
.cap-row--note { grid-template-columns: 36px minmax(0, 1fr); }
.cap-row--pdf { grid-template-columns: 44px minmax(0, 1fr); }
.cap-thumb {
display: block;
width: 86px;
height: 86px;
overflow: hidden;
border-radius: var(--rad-1);
background: var(--surface-2);
}
.cap-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap-noteIcon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--rad-1);
background: var(--accent-bg);
color: var(--accent);
font-size: 18px;
font-weight: 800;
}
.cap-pdfBtn {
width: 44px;
height: 44px;
border: 1px solid var(--border);
background: var(--surface-2);
border-radius: var(--rad-1);
font-size: 22px;
cursor: pointer;
}
.cap-pdfBtn:hover { background: var(--accent-bg); }
.cap-body { min-width: 0; }
.cap-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--muted);
font-weight: 600;
letter-spacing: .02em;
text-transform: uppercase;
margin-bottom: 4px;
}
.cap-author { color: var(--text); font-weight: 700; }
.cap-dot { color: var(--muted); }
.cap-caption {
font-size: var(--fs-sm);
color: var(--text);
line-height: 1.45;
word-wrap: break-word;
}
.cap-caption--note {
border-left: 3px solid var(--accent);
padding-left: 10px;
white-space: pre-wrap;
}
.cap-pdfLink {
background: none;
border: 0;
padding: 0;
color: var(--accent);
font-weight: 700;
font-size: var(--fs-sm);
cursor: pointer;
text-align: left;
}
.cap-pdfLink:hover { text-decoration: underline; }
.cap-pdfCap {
margin-top: 3px;
color: var(--muted);
font-size: 12px;
}
.cap-badge {
display: inline-block;
padding: 1px 7px;
border-radius: 10px;
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
.cap-badge--on { background: var(--ok-bg); color: var(--ok); }
.cap-mods {
display: flex;
gap: 6px;
margin-top: 8px;
}
.cap-mod {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 4px;
padding: 4px 9px;
font-size: 11px;
font-weight: 700;
color: var(--muted);
cursor: pointer;
transition: all 120ms ease;
}
.cap-mod:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.cap-mod--danger { color: var(--risk); }
.cap-mod--danger:hover { background: var(--risk-bg); color: var(--risk); border-color: var(--risk); }
/* office add bar — web uploads into the same captures feed */
.cap-addbar { display: inline-flex; gap: 6px; margin-left: 10px; }
.cap-add {
color: var(--accent);
background: var(--surface);
border-color: color-mix(in oklch, var(--accent) 45%, transparent);
}
.cap-add:hover { background: var(--accent-bg); border-color: var(--accent); }
/* capture composer — photo grid / note / pdf modals */
.cap-comp-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.cap-comp-item { display: flex; flex-direction: column; gap: 6px; }
.cap-comp-thumbwrap {
position: relative;
border: 1px solid var(--border);
border-radius: var(--rad-1);
overflow: hidden;
background: var(--surface-2);
}
.cap-comp-thumb { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.cap-comp-x {
position: absolute; top: 4px; right: 4px;
width: 22px; height: 22px;
border: 1px solid var(--border); border-radius: 4px;
background: var(--surface); color: var(--muted);
font-size: 11px; line-height: 1; cursor: pointer;
}
.cap-comp-x:hover { color: var(--risk); border-color: var(--risk); }
.cap-comp-cap {
width: 100%;
border: 1px solid var(--border); border-radius: 4px;
background: var(--surface); color: var(--text);
font: inherit; font-size: 12px; padding: 5px 8px;
}
.cap-comp-cap:focus { outline: none; border-color: var(--accent); }
.cap-comp-note {
width: 100%; min-height: 110px; resize: vertical;
border: 1px solid var(--border); border-radius: 5px;
background: var(--surface); color: var(--text);
font: inherit; font-size: 13px; line-height: 1.5; padding: 9px 11px;
}
.cap-comp-note:focus { outline: none; border-color: var(--accent); }
.cap-comp-err {
margin-top: 10px;
font-size: 12px; color: var(--risk);
border-left: 3px solid var(--risk);
padding: 5px 10px;
background: var(--risk-bg);
border-radius: 0 4px 4px 0;
}
.cap-comp-file {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; margin-bottom: 10px;
border: 1px solid var(--border); border-radius: var(--rad-1);
background: var(--surface-2);
font-size: 12.5px;
}
.cap-comp-file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cap-comp-file .meta { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ──────────────────────────────────────────────────────────────────────
PRINT — keep only the bones
────────────────────────────────────────────────────────────────────── */
@media print {
.ticker, .subnav, .body-rail { display: none !important; }
.body-grid { grid-template-columns: 1fr; }
.hero-map { height: 200px; }
body { background: white; color: black; }
.cap-mods { display: none; }
}
/* ──────────────────────────────────────────────────────────────────────
INTERACTION POLISH — Emil Kowalski-style scale-on-press for every
interactive surface. 0.97 scale at 120ms is the sweet spot: the user
sees the press registered but the duration stays under the perceptual
delay threshold. Reduced motion strips the transform.
────────────────────────────────────────────────────────────────────── */
.qa-primary, .qa-tile, .ov-mini, .seg-action-btn, .empty-cta,
.open-link, .scope-row-act, .crew-strip-x, .rail-coords, .rail-map-expand,
.rail-map-primary, .theme-btn, .ed-btn, .pe-input, .ed-close {
transition: border-color var(--dur-fast, 120ms),
background var(--dur-fast, 120ms),
color var(--dur-fast, 120ms),
transform var(--dur-fast, 120ms);
}
.qa-primary:active, .qa-tile:active, .ov-mini:active, .seg-action-btn:active,
.empty-cta:active, .scope-row-act:active, .rail-map-primary:active,
.theme-btn:active {
transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
.qa-primary:active, .qa-tile:active, .ov-mini:active, .seg-action-btn:active,
.empty-cta:active, .scope-row-act:active, .rail-map-primary:active,
.theme-btn:active, .btn:active, .ed-btn:active { transform: none; }
}
/* Primary CTA gets a subtle inner highlight so it reads as a "lifted"
element without using shadow. Hairline 1px inset on the top edge. */
.btn-primary, .qa-primary, .seg-action-btn.primary, .ed-btn-primary {
box-shadow: inset 0 1px 0 color-mix(in oklch, white 18%, transparent);
}
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .qa-primary,
[data-theme="dark"] .seg-action-btn.primary,
[data-theme="dark"] .ed-btn-primary {
box-shadow: inset 0 1px 0 color-mix(in oklch, white 14%, transparent);
}
/* ──────────────────────────────────────────────────────────────────────
PILL POLISH — sharper corners, more compact, tighter type. Existing
.pill is good; tweaks below tighten letter-spacing and corner radius
to align with the .impeccable.md operational sensibility.
────────────────────────────────────────────────────────────────────── */
.pill {
border-radius: 3px;
letter-spacing: 0.06em;
padding: 2px 7px;
font-size: 9.5px;
line-height: 1.4;
}
.pill .dot {
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* ──────────────────────────────────────────────────────────────────────
ON-SITE-NOW + RECENTLY-CLOCKED-OUT — denser, tabular, status-aware
────────────────────────────────────────────────────────────────────── */
.presence-other-line {
font-size: 11px;
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 4px;
text-decoration: none;
}
.presence-other-prefix {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
background: var(--surface-2);
padding: 1px 5px;
border-radius: 2px;
margin-right: 2px;
}
.presence-other-sep { color: var(--border-2); margin: 0 4px; }
/* ──────────────────────────────────────────────────────────────────────
FACTS LIST polish — used in Overview + rail Schedule. Two-column dl
with right-aligned values and tabular numerics.
────────────────────────────────────────────────────────────────────── */
dl.facts {
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 14px;
font-size: var(--fs-sm);
margin: 0;
}
dl.facts dt {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
align-self: center;
line-height: 1.2;
}
dl.facts dd {
margin: 0;
text-align: right;
font-weight: 600;
font-variant-numeric: tabular-nums lining-nums;
color: var(--text);
letter-spacing: 0.005em;
}
dl.facts dd .pill { font-variant-numeric: normal; }
.ov-facts dt { font-size: 9.5px; letter-spacing: 0.08em; }
.ov-facts dd { font-size: 12.5px; font-weight: 600; }
.ov-grid { gap: var(--sp-6) var(--sp-9); }
.ov-grid dl.facts dd { text-align: left; }