/* Reverb screen styles — composed of brand chrome + screen-specific layout.
*
* Pattern: each screen sets `.screen` as the flex column inside #screen.
* A hero / header / body / footer slot pattern keeps primary CTAs anchored.
*/
/* ------------------------------------------------------------------ */
/* Screen mount + base */
/* ------------------------------------------------------------------ */
#screen {
position: absolute;
inset: 0;
overflow: hidden;
}
.screen {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
background: var(--paper);
}
.screen__body {
flex: 1 1 auto;
overflow-y: auto;
padding: var(--s5);
}
.screen__footer {
flex: 0 0 auto;
padding: var(--s4) var(--s5) var(--s6);
background: var(--paper);
}
/* ------------------------------------------------------------------ */
/* Brand-header component styles (Web Component slots into here) */
/* ------------------------------------------------------------------ */
.brand-header {
background: var(--brand-primary);
color: var(--header-fg);
padding: var(--s7) var(--s5) var(--s4);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--s3);
}
.brand-header__title {
display: flex;
flex-direction: column;
gap: 2px;
}
.brand-wordmark {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.01em;
position: relative;
padding-right: var(--s3);
display: inline-block;
}
/* Persistent gold dot signature — never remove */
.brand-wordmark::after {
content: '';
position: absolute;
top: 4px;
right: 4px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--gold);
}
.brand-subline {
color: var(--header-sub-fg);
font-size: var(--type-caption);
font-weight: 500;
}
.brand-header__gear {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: var(--gold);
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
align-self: flex-start;
}
/* Freshness chip — sits below the subline. Persistent location across
* any screen that has live-data refresh (trip-begin, map, list, ...).
*/
.brand-fresh {
display: flex;
align-items: center;
gap: var(--s2);
margin-top: 4px;
font-size: var(--type-microcopy);
font-weight: 500;
color: var(--header-sub-fg);
}
.brand-fresh__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
flex: 0 0 auto;
}
.brand-fresh__dot--pulse {
animation: pulse-gold 0.8s var(--ease-snap);
}
.brand-fresh__text {
flex: 0 0 auto;
}
.brand-fresh__refresh {
margin-left: auto;
background: rgba(255, 205, 0, 0.14);
color: var(--gold);
font-size: 18px;
font-weight: 700;
line-height: 1;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
transition: background var(--t-instant) var(--ease-snap),
transform var(--t-quick) var(--ease-snap);
}
.brand-fresh__refresh:active {
background: rgba(255, 205, 0, 0.32);
transform: scale(0.92);
}
@media (hover: hover) {
.brand-fresh__refresh:hover {
background: rgba(255, 205, 0, 0.22);
}
}
/* ------------------------------------------------------------------ */
/* Login — welcome screen */
/* ------------------------------------------------------------------ */
.login-hero {
background: var(--brand-primary);
color: var(--paper);
padding: var(--s7) var(--s5) var(--s6);
text-align: center;
flex: 0 0 auto;
}
.login-hero__wordmark {
font-size: 56px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: var(--gold);
position: relative;
display: inline-block;
}
.login-hero__wordmark::after {
content: '';
position: absolute;
top: 8px;
right: -16px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--gold);
}
.login-hero__tagline {
color: var(--header-sub-fg);
font-size: var(--type-caption);
font-weight: 500;
margin-top: var(--s3);
}
.login-hero__divider {
width: 60px;
height: 3px;
background: var(--header-sub-fg);
margin: var(--s4) auto var(--s4);
border-radius: 1.5px;
}
.login-hero__greeting {
color: var(--header-sub-fg);
font-size: var(--type-body);
font-weight: 500;
}
.login__label {
display: block;
margin-top: var(--s4);
margin-bottom: var(--s2);
}
.login__phone {
display: flex;
align-items: stretch;
border: 2px solid var(--ink);
border-radius: var(--r-input);
overflow: hidden;
background: var(--paper);
}
.login__phone-prefix {
flex: 0 0 auto;
padding: 0 var(--s4);
background: var(--paper-2);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--type-button);
font-weight: 700;
border-right: 2px solid var(--ink);
}
.login__phone-input {
flex: 1 1 auto;
border: none;
padding: 0 var(--s4);
font-family: var(--font-mono);
font-size: var(--type-button);
font-weight: 600;
background: transparent;
outline: none;
height: var(--tap-primary);
}
.login__helper {
font-size: var(--type-microcopy);
font-weight: 500;
color: var(--ink-2);
margin-top: var(--s3);
}
.login__first-time {
margin-top: var(--s4);
padding: var(--s4);
background: var(--paper-2);
border-radius: var(--r-input);
}
.login__first-time-title {
font-size: var(--type-caption);
font-weight: 700;
margin-bottom: 4px;
}
.login__first-time-body {
font-size: var(--type-microcopy);
font-weight: 500;
color: var(--ink-2);
}
.login__send {
width: 100%;
height: var(--tap-commit);
background: var(--brand-primary);
color: var(--paper);
border-radius: var(--r-button-commit);
font-size: var(--type-button-big);
font-weight: 700;
transition: transform var(--t-instant) var(--ease-snap);
}
.login__send:active {
transform: scale(0.98);
}
/* ------------------------------------------------------------------ */
/* Login — code-entry screen */
/* ------------------------------------------------------------------ */
.code-hero {
background: var(--brand-primary);
color: var(--paper);
padding: var(--s7) var(--s5) var(--s5);
text-align: center;
flex: 0 0 auto;
}
.code-hero__wordmark {
font-size: 36px;
font-weight: 700;
color: var(--gold);
position: relative;
display: inline-block;
letter-spacing: -0.02em;
}
.code-hero__wordmark::after {
content: '';
position: absolute;
top: 5px;
right: -10px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold);
}
.code-hero__title {
font-size: var(--type-section);
font-weight: 700;
margin-top: var(--s5);
}
.code-hero__sublabel {
color: var(--header-sub-fg);
font-size: var(--type-caption);
font-weight: 500;
margin-top: var(--s2);
}
.code-hero__edit {
display: inline-block;
margin-top: var(--s3);
color: var(--header-sub-fg);
font-size: var(--type-microcopy);
font-weight: 700;
text-decoration: underline;
}
.code-boxes {
display: flex;
justify-content: center;
gap: var(--s2);
margin-top: var(--s7);
}
.code-box {
width: 44px;
height: 60px;
border: 1px solid var(--paper-3);
border-radius: var(--r-input);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 700;
color: var(--ink);
background: var(--paper);
transition: border-color var(--t-quick) var(--ease-snap),
background var(--t-quick) var(--ease-snap);
}
.code-box--empty {
background: var(--paper-2);
border-color: var(--paper-3);
}
.code-box--active {
background: var(--paper-2);
border: 2px solid var(--ink);
}
.code-box--filled {
background: var(--paper);
border-color: var(--paper-3);
}
.code-helper {
font-size: var(--type-microcopy);
font-weight: 500;
color: var(--ink-3);
text-align: center;
margin-top: var(--s5);
}
.code-resend {
font-size: var(--type-caption);
font-weight: 600;
color: var(--ink-2);
text-align: center;
margin-top: var(--s4);
}
.code-resend--active {
color: var(--ink);
text-decoration: underline;
cursor: pointer;
}
.code__verify {
width: 100%;
height: var(--tap-commit);
background: var(--brand-primary);
color: var(--paper);
border-radius: var(--r-button-commit);
font-size: var(--type-button);
font-weight: 700;
opacity: 0.4;
transition: opacity var(--t-quick) var(--ease-snap), transform var(--t-instant) var(--ease-snap);
}
.code__verify--ready {
opacity: 1;
background: var(--green);
}
.code__verify:active {
transform: scale(0.98);
}
/* ------------------------------------------------------------------ */
/* Login — landing (after-login: today's stores) */
/* ------------------------------------------------------------------ */
.landing__date-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--s3);
}
.landing__date {
font-size: var(--type-caption);
font-weight: 600;
color: var(--ink-3);
}
.store-list {
display: flex;
flex-direction: column;
gap: var(--s3);
list-style: none;
}
.store-card {
background: var(--paper);
border: 1px solid var(--paper-3);
border-radius: var(--r-card);
padding: var(--s3) var(--s4);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
text-align: left;
width: 100%;
cursor: pointer;
transition: transform var(--t-instant) var(--ease-snap),
border-color var(--t-quick) var(--ease-snap);
min-height: var(--tap-primary);
}
.store-card:active {
transform: scale(0.99);
border-color: var(--ink-3);
}
.store-card__main {
display: flex;
flex-direction: column;
gap: 2px;
}
.store-card__name {
font-size: 15px;
font-weight: 700;
color: var(--ink);
}
.store-card__loc {
font-size: var(--type-microcopy);
font-weight: 500;
color: var(--ink-2);
}
.store-card__stat {
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.store-card__count {
font-size: var(--type-kpi);
font-weight: 700;
color: var(--ink);
line-height: 1;
}
.store-card__label {
font-size: 10px;
font-weight: 600;
color: var(--ink-3);
margin-top: 2px;
}
.marketplace-teaser {
margin-top: var(--s5);
padding: var(--s3) var(--s4);
background: var(--green-soft);
border-left: 4px solid var(--green);
border-radius: var(--r-input);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
cursor: pointer;
width: 100%;
text-align: left;
}
.marketplace-teaser__label {
font-size: var(--type-microcopy);
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--green-deep);
}
.marketplace-teaser__body {
font-size: var(--type-caption);
font-weight: 600;
color: var(--ink);
margin-top: 2px;
}
.marketplace-teaser__arrow {
color: var(--green-deep);
font-size: 18px;
}
/* ------------------------------------------------------------------ */
/* Trip Begin */
/* Single screen: permissions + vehicle picker + route picker + Begin */
/* ------------------------------------------------------------------ */
.trip-begin__body {
padding-top: var(--s4);
}
.trip-begin__back {
display: inline-flex;
align-items: center;
background: none;
border: none;
padding: 0;
margin-bottom: var(--s2);
font-family: var(--font-family);
font-size: var(--type-caption);
font-weight: 600;
color: var(--ink-3);
cursor: pointer;
}
.trip-begin__back:active { color: var(--ink); }
.trip-begin__title {
font-size: var(--type-page-title);
font-weight: 700;
color: var(--ink);
line-height: var(--lh-heading);
}
.trip-begin__lead {
font-size: var(--type-caption);
color: var(--ink-2);
margin-top: 4px;
}
.trip-begin__section-label {
margin-top: var(--s5);
margin-bottom: var(--s2);
}
.trip-begin__field-hint {
font-size: var(--type-microcopy);
color: var(--ink-2);
margin-top: -2px;
margin-bottom: var(--s2);
}
/* Permission rows (granted state) */
.perm-row {
display: flex;
align-items: center;
gap: var(--s3);
padding: var(--s3) var(--s4);
border-radius: var(--r-input);
margin-bottom: var(--s2);
background: var(--paper-2);
min-height: var(--tap-primary);
}
.perm-row--granted {
background: var(--green-soft);
}
.perm-row__icon {
font-size: 20px;
line-height: 1;
flex: 0 0 auto;
color: var(--green-deep);
}
.perm-row__main {
flex: 1 1 auto;
}
.perm-row__title {
font-size: var(--type-body);
font-weight: 700;
color: var(--ink);
}
.perm-row__sub {
font-size: var(--type-microcopy);
color: var(--ink-2);
margin-top: 2px;
}
.perm-row__badge {
flex: 0 0 auto;
background: var(--green);
color: var(--paper);
font-size: var(--type-microcopy);
font-weight: 700;
padding: 4px var(--s3);
border-radius: var(--r-chip);
}
/* Picker (radio cards — vehicle 2x2 + route stacked) */
.picker {
display: grid;
gap: var(--s2);
}
.picker--grid {
grid-template-columns: 1fr 1fr;
}
.picker--stack {
grid-template-columns: 1fr;
}
.picker__card {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
padding: var(--s3) var(--s4);
background: var(--paper);
border: 1px solid var(--paper-3);
border-radius: var(--r-input);
min-height: 56px;
text-align: left;
transition: background var(--t-quick) var(--ease-snap),
border-color var(--t-quick) var(--ease-snap),
transform var(--t-instant) var(--ease-snap);
}
.picker__card:active {
transform: scale(0.99);
}
/* SELECTED state — House persistent-gold rules:
* gold-soft fill, black 2px border, gold-on-black checkmark.
* Sub-label text shifts to gold-dark-text for the warm-on-warm look. */
.picker__card[aria-checked="true"] {
background: var(--gold-soft);
border: 2px solid var(--ink);
padding: calc(var(--s3) - 1px) calc(var(--s4) - 1px);
}
.picker__card[aria-checked="true"] .picker__sub {
color: var(--gold-dark-text);
}
.picker__text {
display: flex;
flex-direction: column;
gap: 2px;
}
.picker__title {
font-size: var(--type-body);
font-weight: 600;
color: var(--ink);
}
.picker__card[aria-checked="true"] .picker__title {
font-weight: 700;
}
.picker__sub {
font-size: var(--type-microcopy);
color: var(--ink-2);
}
.picker__radio {
flex: 0 0 auto;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid var(--paper-3);
display: flex;
align-items: center;
justify-content: center;
}
.picker__card[aria-checked="true"] .picker__radio {
background: var(--ink);
border-color: var(--ink);
}
.picker__check {
font-size: 12px;
font-weight: 700;
color: var(--gold); /* persistent gold checkmark — House signature */
line-height: 1;
opacity: 0;
}
.picker__card[aria-checked="true"] .picker__check {
opacity: 1;
}
/* Pulse animation used by the brand-header freshness dot and (later)
* by the map's "you are here" indicator. */
@keyframes pulse-gold {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.6; }
}
/* Vehicle select — native dropdown styled to match picker cards.
* iOS gets the wheel picker; Android gets the bottom drawer. */
.vehicle-select {
width: 100%;
height: var(--tap-primary);
padding: 0 calc(var(--s4) * 2 + 16px) 0 var(--s4);
background-color: var(--paper);
border: 1px solid var(--paper-3);
border-radius: var(--r-input);
appearance: none;
-webkit-appearance: none;
font-family: var(--font-family);
font-size: var(--type-body);
font-weight: 600;
color: var(--ink);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--s4) center;
background-size: 16px;
cursor: pointer;
}
.vehicle-select:focus {
outline: none;
border-color: var(--ink);
}
/* ------------------------------------------------------------------ */
/* Trip strip */
/* Slim status bar below the brand header on every in-trip screen. */
/* ------------------------------------------------------------------ */
.trip-strip {
background: var(--brand-surface);
color: var(--paper);
padding: var(--s2) var(--s4);
display: flex;
align-items: center;
gap: var(--s3);
min-height: 56px;
}
.trip-strip__pulse {
position: relative;
width: 12px;
height: 12px;
flex: 0 0 auto;
}
.trip-strip__pulse-dot {
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--green);
}
.trip-strip__pulse-halo {
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--green);
opacity: 0.25;
animation: pulse-halo 1.6s var(--ease-snap) infinite;
}
[data-status="paused"] .trip-strip__pulse-dot { background: var(--amber); }
[data-status="paused"] .trip-strip__pulse-halo { background: var(--amber); animation: none; }
@keyframes pulse-halo {
0% { transform: scale(1); opacity: 0.45; }
100% { transform: scale(2.4); opacity: 0; }
}
.trip-strip__text {
flex: 1 1 auto;
min-width: 0;
}
.trip-strip__label {
font-size: var(--type-microcopy);
font-weight: 500;
color: var(--gold-soft);
letter-spacing: 0.3px;
}
.trip-strip__stats {
font-size: var(--type-caption);
font-weight: 600;
color: var(--paper);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trip-strip__actions {
display: flex;
gap: var(--s2);
flex: 0 0 auto;
}
.trip-strip__pause {
background: transparent;
color: var(--gold);
border: 1.5px solid var(--gold);
border-radius: var(--r-chip);
padding: 6px var(--s3);
font-size: var(--type-microcopy);
font-weight: 700;
min-height: 32px;
}
.trip-strip__end {
background: var(--gold);
color: var(--ink);
border-radius: var(--r-chip);
padding: 6px var(--s3);
font-size: var(--type-microcopy);
font-weight: 700;
min-height: 32px;
}
.trip-strip__pause:active,
.trip-strip__end:active { transform: scale(0.97); }
/* ------------------------------------------------------------------ */
/* Cockpit bar — slim top strip on /map and /list */
/* Replaces the full brand header + trip strip stack. Surfaces just */
/* Map|List + a tiny store/elapsed anchor + a ⋯ menu that opens the */
/* full gauges panel on demand. */
/* ------------------------------------------------------------------ */
reverb-cockpit-bar {
display: block;
position: relative;
background: var(--brand-primary);
color: var(--gold);
flex: 0 0 auto;
z-index: 40;
}
.cockpit {
display: flex;
align-items: center;
gap: var(--s3);
padding: var(--s3) var(--s4);
min-height: 52px;
}
/* Ambient context anchor — sits between the brand wordmark and the
* Trip button. Reads as quiet microcopy; reps glance for store +
* elapsed without opening the Trip panel. */
.cockpit__anchor {
flex: 1 1 auto;
text-align: center;
min-width: 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2px;
color: var(--header-sub-fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Brand wordmark on the left — same dot-after-Reverb signature as the
* old brand-header. Visible at all times in cockpit mode. */
reverb-cockpit-bar .brand-wordmark {
font-size: 22px;
font-weight: 700;
color: var(--gold);
letter-spacing: -0.01em;
padding-right: var(--s3);
position: relative;
display: inline-block;
}
reverb-cockpit-bar .brand-wordmark::after {
content: '';
position: absolute;
top: 4px;
right: 4px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--gold);
}
/* Trip menu button on the right — replaces the ambiguous ⋯ icon with
* an explicit verbal anchor + chevron. Gold-tinted pill that reads as
* tappable at a glance. */
.cockpit__trip {
display: flex;
align-items: center;
gap: var(--s2);
padding: 0 var(--s3) 0 var(--s4);
height: 36px;
border-radius: var(--r-chip);
background: rgba(255, 205, 0, 0.14);
color: var(--gold);
font-size: 13px;
font-weight: 700;
transition: background var(--t-instant) var(--ease-snap),
transform var(--t-instant) var(--ease-snap);
}
.cockpit__trip:active {
background: rgba(255, 205, 0, 0.28);
transform: scale(0.97);
}
.cockpit__trip[aria-expanded="true"] {
background: var(--gold);
color: var(--ink);
}
.cockpit__chevron {
font-size: 11px;
display: inline-block;
transition: transform var(--t-quick) var(--ease-snap);
}
.cockpit__trip[aria-expanded="true"] .cockpit__chevron {
transform: rotate(180deg);
}
/* ------------------------------------------------------------------ */
/* View switcher (Map | List) — TOP strip, below cockpit bar */
/* Moved here from the bottom-bar so the sheet can claim the bottom */
/* without colliding with nav controls. Lets the rep keep the sheet */
/* open and switch views. */
/* ------------------------------------------------------------------ */
.view-switcher-top {
flex: 0 0 auto;
display: flex;
justify-content: center;
padding: var(--s3) var(--s5);
background: var(--paper);
z-index: 30;
}
.view-switcher-top .cockpit-nav {
width: 100%;
max-width: 280px;
}
/* ------------------------------------------------------------------ */
/* Floating bottom — just the + FAB now */
/* Map|List moved to top; Last-3 is a floating chip on the map area. */
/* ------------------------------------------------------------------ */
.bottom-bar {
position: absolute;
bottom: var(--s5);
right: var(--s5);
display: flex;
align-items: flex-end;
gap: var(--s3);
pointer-events: none;
z-index: 25;
}
.bottom-bar > * { pointer-events: auto; }
/* ------------------------------------------------------------------ */
/* Cart FAB — omnipresent on screens where the trip is "in the air" */
/* (/map and /list). Tap → /scan today; eventually the same trigger */
/* fires a method picker (QR scan, DevID entry, RFID harvest, manual */
/* add). Generic + icon intentionally — the action is "identify the */
/* cart in front of me," not specifically "scan QR." */
/* ------------------------------------------------------------------ */
.cart-fab {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--gold);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
transition: transform var(--t-instant) var(--ease-snap),
box-shadow var(--t-instant) var(--ease-snap);
flex: 0 0 auto;
}
.cart-fab:active {
transform: scale(0.93);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
}
.cart-fab svg {
width: 34px;
height: 34px;
}
/* Labeled "Log" pill (Hondo 2026-06-11) — the Act button is the one path
to a disposition, so on /map + /list it carries its name at commit size
and balances the truck chip on the left. Sonar keeps the bare circle. */
.cart-fab--log {
width: auto;
height: 60px;
border-radius: 30px;
gap: 8px;
padding: 0 24px 0 20px;
}
.cart-fab--log svg { width: 24px; height: 24px; }
.cart-fab__label {
font-size: var(--type-button, 18px);
font-weight: 800;
letter-spacing: 0.01em;
}
/* Segmented Map | List nav pill — rendered inside .view-switcher-top */
.cockpit-nav {
display: flex;
background: var(--brand-primary);
border-radius: 25px;
padding: 4px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.cockpit-nav__tab {
padding: 0 var(--s4);
height: 36px;
min-width: 96px;
flex: 1 1 auto;
border-radius: 18px;
background: transparent;
color: var(--header-sub-fg);
font-size: 13px;
font-weight: 600;
transition: background var(--t-instant) var(--ease-snap),
color var(--t-instant) var(--ease-snap);
}
.cockpit-nav__tab[aria-selected="true"] {
background: var(--gold);
color: var(--ink);
font-weight: 700;
}
/* Gauges panel — drops down from below the cockpit bar */
.gauges {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--paper);
border-bottom-left-radius: var(--r-card);
border-bottom-right-radius: var(--r-card);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
transform: translateY(-100%);
opacity: 0;
transition: transform var(--t-quick) var(--ease-snap),
opacity var(--t-quick) var(--ease-snap);
z-index: 50;
}
.gauges--open {
transform: translateY(0);
opacity: 1;
}
.gauges__panel {
padding: var(--s4) var(--s5) var(--s5);
}
.gauges__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--s3);
}
.gauges__header .brand-wordmark {
font-size: 20px;
font-weight: 700;
color: var(--ink);
position: relative;
padding-right: var(--s3);
display: inline-block;
}
.gauges__header .brand-wordmark::after {
content: '';
position: absolute;
top: 4px;
right: 4px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--gold);
}
.gauges__close {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--paper-2);
color: var(--ink-2);
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.gauges__store {
font-size: var(--type-caption);
color: var(--ink-2);
margin-bottom: var(--s4);
}
.gauges__freshness {
display: flex;
align-items: center;
gap: var(--s2);
padding: var(--s2) var(--s3);
background: var(--paper-2);
border-radius: var(--r-input);
margin-bottom: var(--s4);
font-size: var(--type-microcopy);
color: var(--ink-2);
}
.gauges__freshness-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
flex: 0 0 auto;
}
.gauges__freshness-dot--pulse {
animation: pulse-gold 0.8s var(--ease-snap);
}
.gauges__freshness-text {
flex: 1 1 auto;
font-weight: 500;
}
.gauges__refresh {
background: rgba(255, 205, 0, 0.14);
color: var(--gold-deep);
width: 30px;
height: 30px;
border-radius: 50%;
font-size: 16px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.gauges__stats {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--s2);
margin-bottom: var(--s4);
}
.gauges__stat {
background: var(--paper-2);
border-radius: var(--r-input);
padding: var(--s3);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.gauges__stat-num {
font-size: var(--type-kpi);
font-weight: 700;
color: var(--ink);
line-height: 1;
}
.gauges__stat-of {
font-size: 14px;
font-weight: 500;
color: var(--ink-3);
}
.gauges__stat-label {
font-size: var(--type-microcopy);
font-weight: 600;
color: var(--ink-3);
letter-spacing: 0.5px;
text-transform: uppercase;
}
/* On-board sub-line inside the "returned" tile. Lives between the
* headline number (3/14) and the uppercase label (RETURNED), with
* tighter type so it reads as supporting detail, not a peer number.
* Hidden by the component when on-board is zero. */
.gauges__stat-sub {
font-size: 12px;
font-weight: 700;
color: var(--gold-deep);
margin-top: 2px;
letter-spacing: 0.01em;
}
.gauges__trip-controls {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s2);
margin-bottom: var(--s3);
}
.gauges__pause,
.gauges__end {
height: 48px;
border-radius: var(--r-button);
font-size: var(--type-body);
font-weight: 700;
transition: transform var(--t-instant) var(--ease-snap);
}
.gauges__pause:active,
.gauges__end:active { transform: scale(0.98); }
.gauges__pause {
background: var(--paper-2);
color: var(--ink);
border: 1.5px solid var(--paper-3);
}
.gauges__end {
background: var(--ink);
color: var(--gold);
}
.gauges__settings {
width: 100%;
height: 40px;
border-radius: var(--r-input);
background: transparent;
color: var(--ink-2);
font-size: var(--type-caption);
font-weight: 600;
border: 1px solid var(--paper-3);
}
/* Trip notes entry on the gauges panel - anywhere-anytime field intel
* surface. Blue accent ties to Investigate (flag/info family). */
/* Return to store — the prominent truck/RTS action in the Trip menu,
shown only when carts are on board. Gold = the load is ready to go. */
.gauges__rts {
width: 100%;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
gap: var(--s2);
border-radius: var(--r-button);
background: var(--gold);
color: var(--ink);
border: none;
font-size: var(--type-body);
font-weight: 800;
margin-bottom: var(--s3);
cursor: pointer;
transition: transform var(--t-instant) var(--ease-snap);
}
.gauges__rts:active { transform: scale(0.98); }
.gauges__rts-count {
min-width: 22px;
height: 22px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--ink);
color: var(--gold);
font-size: var(--type-microcopy);
font-weight: 800;
}
.gauges__notes {
width: 100%;
height: 44px;
border-radius: var(--r-input);
background: var(--blue-soft);
color: var(--blue-deep);
border: 1px solid var(--blue);
font-size: 14px;
font-weight: 700;
margin-bottom: var(--s3);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.gauges__notes:active { background: var(--blue); color: var(--paper); }
.gauges__notes-badge {
color: var(--green);
font-size: 14px;
}
/* Standalone investigate entry — blue outline so it sits beside Trip
* notes without being mistaken for it. */
.gauges__investigate {
width: 100%;
height: 44px;
border-radius: var(--r-input);
background: var(--paper);
color: var(--blue-deep);
border: 1px solid var(--blue);
font-size: 14px;
font-weight: 700;
margin-bottom: var(--s4);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s2);
}
.gauges__investigate:active { background: var(--blue-soft); }
.gauges__investigate .gauges__notes-badge { color: var(--blue-deep); }
/* ------------------------------------------------------------------ */
/* List screen */
/* ------------------------------------------------------------------ */
.screen--list .screen__body { display: none; }
.list-controls {
background: var(--paper);
padding: var(--s3) var(--s5) var(--s2);
flex: 0 0 auto;
}
.chip-row {
display: flex;
align-items: center;
gap: var(--s2);
margin-bottom: var(--s2);
flex-wrap: wrap;
}
.chip-row__label {
font-size: var(--type-microcopy);
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--ink-3);
margin-right: var(--s2);
}
.chip-filter {
height: 28px;
padding: 0 var(--s3);
border-radius: var(--r-chip);
background: var(--paper-2);
color: var(--ink-2);
font-size: var(--type-caption);
font-weight: 500;
transition: transform var(--t-instant) var(--ease-snap);
}
.chip-filter:active { transform: scale(0.98); }
.chip-filter--active {
background: var(--gold);
color: var(--ink);
font-weight: 700;
}
.chip-filter--reentered {
background: var(--amber-soft);
color: var(--amber-deep);
}
.chip-filter--reentered.chip-filter--active {
background: var(--amber);
color: var(--amber-deep);
font-weight: 700;
}
.list-meta {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--s2) var(--s5) var(--s3);
background: var(--paper);
flex: 0 0 auto;
font-size: var(--type-microcopy);
}
.list-meta__live {
display: flex;
align-items: center;
gap: var(--s2);
color: var(--ink-2);
font-weight: 500;
}
.list-meta__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green);
position: relative;
}
.list-meta__dot::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
background: var(--green);
opacity: 0.3;
animation: pulse-halo 1.8s var(--ease-snap) infinite;
}
.list-meta__count {
color: var(--ink-2);
font-weight: 700;
}
.list-rows {
flex: 1 1 auto;
overflow-y: auto;
padding: 0 var(--s5) calc(var(--s7) + 60px); /* room for floating bottom bar */
display: flex;
flex-direction: column;
gap: var(--s2);
background: var(--paper-2);
scroll-behavior: smooth;
transition: padding-bottom var(--t-quick) var(--ease-snap);
}
/* When the sheet is open, expand the bottom padding so even the last
* row can scrollIntoView({block:'start'}) and end up well above the
* peek. Without this, scrollHeight - clientHeight caps scrollTop and
* the last 1-2 rows get stuck behind the peek. */
.screen--list:has(.sheet--open) .list-rows {
padding-bottom: calc(var(--s7) + 60px + 280px);
}
.list-row {
position: relative;
background: var(--paper);
border: none;
border-radius: var(--r-card);
padding: var(--s3) var(--s4) var(--s3) calc(var(--s4) + 4px);
display: flex;
align-items: flex-start;
gap: var(--s3);
text-align: left;
min-height: 92px;
width: 100%;
cursor: pointer;
transition: transform var(--t-instant) var(--ease-snap);
overflow: hidden;
}
.list-row::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: transparent;
}
.list-row {
transition:
transform var(--t-instant) var(--ease-snap),
box-shadow var(--t-quick) var(--ease-snap);
}
.list-row:active { transform: scale(0.99); }
.list-row--new::before {
background: var(--gold);
}
/* Focused row — DEPTH instead of color. The row lifts off the list
* surface with a 1.5px ink frame + strong drop shadow + scale + upward
* translate. No background change, so re-entered amber rows keep their
* own identity while showing "this is the selected one" via elevation
* and the dark frame. Composes cleanly with the existing left-edge
* states (gold for new-session, amber-deep for re-entered). */
.list-row--focused {
transform: scale(1.025) translateY(-2px);
z-index: 2;
box-shadow:
0 0 0 1.5px var(--ink),
0 10px 24px rgba(0, 0, 0, 0.18),
0 2px 4px rgba(0, 0, 0, 0.12);
}
.list-row--reentered {
background: var(--gold-soft);
}
.list-row--reentered::before {
background: var(--amber-deep);
}
.list-row--reentered .list-row__name {
color: var(--amber-deep);
}
.list-row__main {
flex: 1 1 auto;
min-width: 0;
}
.list-row__name {
font-size: 18px;
font-weight: 700;
color: var(--ink);
display: flex;
align-items: center;
gap: var(--s2);
}
.list-row__reicon {
font-size: 18px;
color: var(--amber-deep);
}
.list-row__device {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
color: var(--ink-3);
margin-top: 2px;
}
.list-row__dist {
font-size: var(--type-caption);
font-weight: 600;
color: var(--ink-2);
margin-top: var(--s2);
}
.list-row__right {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--s2);
}
.list-row__tag {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 var(--s3);
border-radius: var(--r-chip);
background: var(--paper-2);
color: var(--ink-2);
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.list-row--reentered .list-row__tag {
background: var(--paper);
color: var(--amber-deep);
}
/* + FAB on /list — lives inside .bottom-bar */
.list-bottom__fab {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--gold);
color: var(--ink);
font-size: 26px;
font-weight: 700;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--t-instant) var(--ease-snap);
}
.list-bottom__fab:active { transform: scale(0.95); }
/* ------------------------------------------------------------------ */
/* Map screen */
/* ------------------------------------------------------------------ */
.screen--map .screen__body {
display: none; /* map screen owns its own body composition */
}
.map {
flex: 1 1 auto;
position: relative;
background: #E3E5EA;
overflow: hidden;
}
/* Pan wrapper — translates to keep the selected pin visible above
* the sheet on view-flip restore. Smooth transition makes the shift
* feel like a deliberate re-center, not a layout glitch. */
.map__pan {
position: absolute;
inset: 0;
transition: transform var(--t-deliberate) var(--ease-snap);
}
.map__canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.map__grid line {
stroke: #D0D3D9;
stroke-width: 0.3;
}
.map__geofence {
fill: var(--gold);
fill-opacity: 0.18;
stroke: var(--gold-deep);
stroke-width: 0.4;
}
.map__geofence-label {
font-size: 1.6px;
font-weight: 700;
fill: var(--gold-dark-text);
letter-spacing: 0.2px;
}
.map__store {
/* Building inside the zone — a deeper shade of the geofence's gold
* (not white), with a faint outline (Hondo 2026-06-10). */
fill: var(--gold-soft);
stroke: var(--gold-deep);
stroke-width: 0.2;
stroke-opacity: 0.5;
}
/* Service-location nameplate — a gold folder-tab integrated with the
* geofence (sits on its top-left edge), not a floating text block. */
.map__svc-tab {
fill: var(--gold);
stroke: var(--gold-deep);
stroke-width: 0.3;
}
.map__svc-label {
font-size: 2px;
font-weight: 700;
fill: var(--gold-dark-text);
text-anchor: middle;
letter-spacing: 0.05px;
}
.map__store-label {
font-size: 2.4px;
font-weight: 700;
fill: var(--gold);
text-anchor: middle;
}
.map__breadcrumb {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
transition: opacity var(--t-quick) var(--ease-snap);
}
/* Trail dots layer — HTML in the pins' %-space (aligns + never clips).
* Counter-scales with --map-zoom like the pins so dots stay constant. */
.map__breadcrumb-dots {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity var(--t-quick) var(--ease-snap);
z-index: 6;
}
.map__breadcrumb-dots--on { opacity: 1; }
.bc-html-dot {
position: absolute;
transform: translate(-50%, -50%) scale(calc(1 / var(--map-zoom, 1)));
transform-origin: center;
border-radius: 50%;
background: var(--paper);
border: 2px solid var(--red);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
padding: 0;
margin: 0;
cursor: pointer;
pointer-events: auto;
}
.bc-html-dot--shared { border-color: var(--blue); }
.bc-html-label {
position: absolute;
left: calc(100% + 3px);
top: 50%;
transform: translateY(-50%);
font-size: 11px;
font-weight: 700;
color: var(--ink-2);
white-space: nowrap;
pointer-events: none;
}
.map__breadcrumb--on {
opacity: 1;
/* Trail in the foreground while inspecting (Hondo react): dots must
* never hide behind the enlarged selected pin (z 5). Callouts (z 12+)
* still float above. */
z-index: 6;
}
.map__breadcrumb .bc-line {
stroke: var(--red);
stroke-width: 0.4;
stroke-dasharray: 1 1;
opacity: 0.7;
}
.map__breadcrumb .bc-dot {
fill: var(--paper);
stroke: var(--red);
stroke-width: 0.4;
}
.map__breadcrumb .bc-fix {
pointer-events: auto;
cursor: pointer;
}
.map__breadcrumb .bc-label {
font-size: 1.5px;
font-weight: 700;
fill: var(--red-deep);
text-anchor: middle;
dominant-baseline: middle;
}
/* You are here */
.map__you {
position: absolute;
width: 32px;
height: 32px;
transform: translate(-50%, -50%) scale(calc(1 / var(--map-zoom, 1)));
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.map__you-halo {
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--blue);
opacity: 0.18;
animation: pulse-halo 2.4s var(--ease-snap) infinite;
}
.map__you-dot {
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--blue);
border: 3px solid var(--paper);
box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
/* Pins */
.map__pin {
position: absolute;
width: 28px;
height: 38px;
/* Counter-scale against fit-to-trail zoom: geography scales, markers don't. */
transform: translate(-50%, -100%) scale(calc(1 / var(--map-zoom, 1)));
transform-origin: 50% 100%;
background: transparent;
transition: transform var(--t-quick) var(--ease-snap);
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.18));
}
.map__pin svg { width: 100%; height: 100%; display: block; }
.map__pin--red svg path { fill: var(--red); }
.map__pin--amber svg path { fill: var(--amber); }
.map__pin--blue svg path { fill: var(--blue); }
.map__pin svg path { stroke: var(--paper); stroke-width: 2; }
.map__pin--selected {
/* Calmer selection (Hondo 2026-06-10): a modest lift + a gold ring
* (::after) instead of a 1.8× balloon that dominated the board and
* its own Last-3. The ring is the Ready authorship cue. */
transform: translate(-50%, -100%) scale(1.22);
z-index: 6;
filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.4));
}
/* Gold selection ring around the pin head. */
.map__pin--selected::after {
content: '';
display: block;
position: absolute;
left: 50%;
top: 14px;
width: 32px;
height: 32px;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 2.5px solid var(--gold);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
pointer-events: none;
}
/* Ground shadow under the selected pin — flat ellipse that suggests
* the pin is hovering above the map surface. Same depth language as
* the focused list row, in the map's visual idiom. */
.map__pin--selected::before {
content: '';
position: absolute;
width: 32px;
height: 10px;
left: 50%;
bottom: -2px;
transform: translateX(-50%);
background: radial-gradient(ellipse at center,
rgba(0, 0, 0, 0.32) 0%,
rgba(0, 0, 0, 0) 70%);
border-radius: 50%;
z-index: -1;
animation: pin-shadow-pulse 2.4s var(--ease-snap) infinite;
pointer-events: none;
}
/* (Gold selection ring via ::after is defined above — 2026-06-10.) */
@keyframes pin-shadow-pulse {
0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
50% { transform: translateX(-50%) scaleX(1.18); opacity: 0.7; }
}
/* Respect motion preference — static ground shadow for reps who've opted out. */
@media (prefers-reduced-motion: reduce) {
.map__pin--selected::before {
animation: none;
}
}
/* In-cluster pins — hidden by default; revealed when the .map gets
* the .map--cluster-expanded class (set when a member is selected).
* Subtle fade-in animation so the expansion reads as deliberate. */
.map__pin--in-cluster {
display: none;
}
.map.map--cluster-expanded .map__pin--in-cluster {
display: block;
animation: in-cluster-reveal 320ms cubic-bezier(0.2, 0.85, 0.25, 1);
}
@keyframes in-cluster-reveal {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* When the cluster is expanded, the aggregate pin fades so the
* individual in-cluster pins (and the selected highlight) win the
* visual hierarchy. Tapping the faded cluster still works. */
.map.map--cluster-expanded .map__cluster {
opacity: 0.4;
transform: translate(-50%, -50%) scale(calc(0.85 / var(--map-zoom, 1)));
transition: opacity var(--t-quick) var(--ease-snap),
transform var(--t-quick) var(--ease-snap);
}
@media (prefers-reduced-motion: reduce) {
.map.map--cluster-expanded .map__pin--in-cluster { animation: none; }
}
/* Dispo'd pins stay on the map - faded with a status icon overlay.
* Universal rule per Hondo 2026-05-30: every confirm leaves the pin
* live with its status so the rep can see "where I've been." Saturated
* pins = work to do; faded + icon = work done or in-flight. */
.map__pin--dispod {
opacity: 0.45;
filter: saturate(0.5);
transition: opacity var(--t-quick) var(--ease-snap),
filter var(--t-quick) var(--ease-snap);
}
.map__pin--dispod.map__pin--selected {
opacity: 0.95;
filter: none;
}
/* Status icon overlay - small disc centered on the pin body. Gold ring
* + dark inner so it reads on light or dark backgrounds. */
/* Balloon pin (Hondo 2026-06-10): the state glyph sits IN the head's
* white inset "porthole" — centered on the head, not a corner badge. */
.map__pin-status {
position: absolute;
top: 14px;
left: 50%;
transform: translate(-50%, -50%);
width: 17px;
height: 17px;
border-radius: 50%;
background: var(--brand-primary);
border: 2px solid var(--gold);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--gold);
pointer-events: none;
z-index: 2;
}
.map__pin-status svg {
width: 11px;
height: 11px;
}
/* Status color by disposition kind. Truck (gold) is FOUND; the rest
* are colored checks per the disposition's semantic palette. */
.map__pin[data-dispo="rts"] .map__pin-status,
.map__pin[data-dispo="ranf"] .map__pin-status,
.map__pin[data-dispo="rna"] .map__pin-status {
background: var(--green);
border-color: var(--paper);
color: var(--paper);
}
.map__pin[data-dispo="utr"] .map__pin-status {
background: var(--amber);
border-color: var(--paper);
color: var(--amber-deep);
}
.map__pin[data-dispo="notag"] .map__pin-status {
background: var(--blue);
border-color: var(--paper);
color: var(--paper);
}
.map__pin[data-dispo="unreadable"] .map__pin-status {
background: var(--amber);
border-color: var(--paper);
color: var(--amber-deep);
}
.map__pin[data-dispo="tagnocart"] .map__pin-status {
background: var(--red);
border-color: var(--paper);
color: var(--paper);
}
/* Investigate pin status - BLUE per brand standards §3.3 */
.map__pin[data-dispo="investigate"] .map__pin-status {
background: var(--blue);
border-color: var(--paper);
color: var(--paper);
}
/* List row: same fade + status semantics. The right column swaps the
* age chip for a status pill that mirrors the pin's icon system. */
.list-row--dispod {
opacity: 0.55;
filter: saturate(0.6);
}
.list-row--dispod.list-row--focused {
opacity: 1;
filter: none;
}
.list-row__status {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 19px;
background: var(--brand-primary);
color: var(--gold);
}
.list-row__status svg {
width: 20px;
height: 20px;
}
.list-row--on-truck .list-row__status {
background: var(--brand-primary);
color: var(--gold);
}
.list-row--terminal .list-row__status {
background: var(--green);
color: var(--paper);
}
/* Per-kind status pill overrides (after the generic terminal styling) */
.list-row[data-dispo="utr"] .list-row__status { background: var(--amber); color: var(--amber-deep); }
.list-row[data-dispo="notag"] .list-row__status { background: var(--blue); color: var(--paper); }
.list-row[data-dispo="unreadable"] .list-row__status { background: var(--amber); color: var(--amber-deep); }
.list-row[data-dispo="tagnocart"] .list-row__status { background: var(--red); color: var(--paper); }
.list-row[data-dispo="investigate"] .list-row__status { background: var(--blue); color: var(--paper); }
/* Dispo reminder banner on /list. Slides into the meta area when a
* dispo'd row is tapped; auto-dismisses on next non-dispo'd row tap
* or via the × button. */
.dispo-banner {
display: flex;
align-items: center;
gap: var(--s3);
margin: 0 var(--s4) var(--s3);
padding: var(--s2) var(--s3);
background: var(--ink);
color: var(--paper);
border-radius: 12px;
}
.dispo-banner__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 18px;
background: var(--brand-surface);
color: var(--gold);
flex: 0 0 auto;
}
.dispo-banner__icon[data-kind="rts"],
.dispo-banner__icon[data-kind="ranf"],
.dispo-banner__icon[data-kind="rna"] { color: var(--green); }
.dispo-banner__icon[data-kind="utr"] { color: var(--amber); }
.dispo-banner__icon[data-kind="investigate"] { color: var(--blue); }
.dispo-banner__icon svg { width: 20px; height: 20px; }
.dispo-banner__text {
flex: 1 1 auto;
min-width: 0;
}
.dispo-banner__cart {
font-size: 14px;
font-weight: 700;
margin: 0;
}
.dispo-banner__meta {
font-size: 12px;
color: var(--header-sub-fg);
margin: 0;
}
.dispo-banner__close {
width: 28px;
height: 28px;
border-radius: 14px;
background: transparent;
color: var(--paper);
border: 0;
font-size: 18px;
cursor: pointer;
}
/* Cluster pin */
.map__cluster {
position: absolute;
transform: translate(-50%, -50%) scale(calc(1 / var(--map-zoom, 1)));
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--amber);
border: 3px solid var(--paper);
color: var(--paper);
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.22));
}
.map__cluster-badge {
position: absolute;
top: -4px;
right: -4px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--red);
color: var(--paper);
font-size: 11px;
font-weight: 700;
border: 2px solid var(--paper);
display: flex;
align-items: center;
justify-content: center;
}
/* ------------------------------------------------------------------ */
/* Selected-pin callout label + arrival ripple */
/* ------------------------------------------------------------------ */
/* Floating label above the selected pin. Black pill with gold cart ID
* (line 1) + warm-white "freshness · distance" meta (line 2). Downward
* chevron tail points at the pin. Modern map-UX pattern (Google/Apple
* Maps "selected place" card). Wins the visual contest against the
* cluster pin permanently — cluster is an unlabeled colored disc, the
* selected pin now has a TAGGED marker. */
.map__label {
position: absolute;
background: var(--brand-primary);
color: var(--paper);
padding: 8px 12px;
border-radius: 10px;
font-size: 13px;
line-height: 1.25;
font-weight: 600;
white-space: nowrap;
transform: translate(-50%, calc(-100% - 78px)) scale(calc(1 / var(--map-zoom, 1)));
transform-origin: 50% 100%;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
pointer-events: none;
z-index: 12;
animation: map-label-enter 280ms cubic-bezier(0.2, 0.85, 0.25, 1);
}
.map__label__id {
color: var(--gold);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.1px;
}
.map__label__meta {
color: var(--header-sub-fg);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.3px;
margin-top: 2px;
}
.map__label__tail {
position: absolute;
left: 50%;
bottom: -8px;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 9px solid var(--brand-primary);
}
@keyframes map-label-enter {
0% { opacity: 0; transform: translate(-50%, calc(-100% - 64px)) scale(0.94); }
100% { opacity: 1; transform: translate(-50%, calc(-100% - 78px)) scale(1); }
}
/* Arrival ripple — one-shot expanding gold ring centered on the
* selected pin, fired when /map mounts via view-flip from /list.
* Plain pin taps don't fire it (those have sheet-slide as feedback). */
.map__ripple {
position: absolute;
width: 80px;
height: 80px;
margin-left: -40px;
margin-top: -40px;
border-radius: 50%;
border: 3px solid var(--gold);
opacity: 0;
pointer-events: none;
z-index: 6;
animation: map-ripple 800ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
box-shadow: 0 0 14px rgba(255, 205, 0, 0.45);
}
@keyframes map-ripple {
0% { transform: scale(0.5); opacity: 1; }
60% { opacity: 0.85; }
100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.map__label { animation: none; }
.map__ripple { animation: none; opacity: 0; }
}
/* Top-right map controls stack — Last-3 + Street/Sat view toggle.
* Grouped so the two map-tools read as a cluster vs. the FAB/sheet
* action surfaces. Children share the chip aesthetic. */
.map__controls {
position: absolute;
top: var(--s4);
right: var(--s4);
z-index: 24;
display: flex;
flex-direction: column;
gap: var(--s2);
align-items: flex-end;
}
/* Icon-led, matching the Street/Sat toggle family so it reads as a
* view control, not a label (UAT: Adam took it for a label). */
.map__last3 {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 var(--s3);
background: var(--paper);
color: var(--ink);
border-radius: 18px;
font-size: var(--type-microcopy);
font-weight: 700;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
border: 1px solid var(--paper-3);
transition: background var(--t-instant) var(--ease-snap),
transform var(--t-instant) var(--ease-snap);
}
.map__last3:active { transform: scale(0.97); }
.map__last3__icon { display: inline-flex; width: 16px; height: 16px; color: var(--ink-2); }
.map__last3__icon svg { width: 100%; height: 100%; }
.map__last3[aria-pressed="true"] {
background: var(--gold);
color: var(--ink);
border-color: var(--gold-deep);
}
.map__last3[aria-pressed="true"] .map__last3__icon { color: var(--ink); }
/* Street/Sat view toggle - same chip family as Last-3 but icon-led.
* Visual stub only in prototype; tile-swap is pinned for production. */
.map__view-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 var(--s3);
background: var(--paper);
color: var(--ink);
border-radius: 18px;
font-size: var(--type-microcopy);
font-weight: 700;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
border: 1px solid var(--paper-3);
transition: background var(--t-instant) var(--ease-snap),
transform var(--t-instant) var(--ease-snap);
}
.map__view-toggle:active { transform: scale(0.97); }
.map__view-toggle__icon {
display: inline-flex;
width: 18px;
height: 18px;
color: var(--ink-2);
}
.map__view-toggle__icon svg { width: 100%; height: 100%; }
.map__view-toggle[aria-pressed="true"] {
background: var(--ink);
color: var(--gold);
border-color: var(--ink);
}
.map__view-toggle[aria-pressed="true"] .map__view-toggle__icon { color: var(--gold); }
/* "You" callout — small blue pill above the pulsing dot. Helps the eye
* find self on busy maps. Default-visible on load; tap to dismiss,
* tap the dot to bring it back. Same downward-notch pattern as the
* pin label callout so the visual language stays unified. */
.map__you-label {
position: absolute;
transform: translate(-50%, calc(-100% - 18px)) scale(calc(1 / var(--map-zoom, 1)));
transform-origin: 50% 100%;
z-index: 9;
background: var(--blue);
color: var(--paper);
border: 0;
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.03em;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
cursor: pointer;
white-space: nowrap;
animation: you-label-in 320ms var(--ease-snap);
}
.map__you-label::after {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 8px;
height: 8px;
background: var(--blue);
}
.map__you-label[hidden] { display: none; }
@keyframes you-label-in {
from { opacity: 0; transform: translate(-50%, calc(-100% - 12px)); }
to { opacity: 1; transform: translate(-50%, calc(-100% - 18px)); }
}
/* ------------------------------------------------------------------ */
/* Bottom sheet — cart detail */
/* ------------------------------------------------------------------ */
.sheet-scrim {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.45);
z-index: 20;
animation: scrim-in var(--t-quick) var(--ease-snap);
}
@keyframes scrim-in {
from { opacity: 0; }
to { opacity: 1; }
}
.sheet {
position: absolute;
left: 0;
right: 0;
bottom: 84px; /* reserve space for the FAB and its breathing room */
z-index: 21;
background: var(--paper);
border-radius: var(--r-sheet) var(--r-sheet) var(--r-sheet) var(--r-sheet);
padding: var(--s3) var(--s5) var(--s5);
transform: translateY(calc(100% + 84px));
transition: transform var(--t-deliberate) var(--ease-snap);
max-height: calc(75% - 84px);
overflow-y: auto;
box-shadow: 0 -8px 32px rgba(0,0,0,0.22);
margin: 0 var(--s4);
}
.sheet--open { transform: translateY(0); }
/* Peek mode — sheet collapses to handle + header + chips, exposing the
* map for studying a Last-3 trail. Tap to expand back to full. */
.sheet__expand {
max-height: 800px;
opacity: 1;
overflow: hidden;
transition:
max-height var(--t-deliberate) var(--ease-snap),
opacity var(--t-quick) var(--ease-snap);
}
.sheet--peek {
cursor: pointer;
padding-bottom: var(--s3);
}
.sheet--peek .sheet__expand {
max-height: 0;
opacity: 0;
transition:
max-height var(--t-quick) var(--ease-soft),
opacity 120ms ease;
}
/* Old "Tap to expand" microcopy hint is retired — the explicit
* Actions → CTA replaces it. Keeping the selector here as no-op
* in case any cached partial still renders the element. */
.sheet__peek-hint { display: none; }
.sheet__handle {
width: 44px;
height: 5px;
border-radius: 2.5px;
background: var(--paper-3);
margin: 0 auto var(--s3);
}
.sheet__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--s3);
}
.sheet__title {
font-size: var(--type-page-title);
font-weight: 700;
color: var(--ink);
line-height: 1.1;
}
.sheet__sub {
font-family: var(--font-mono);
font-size: var(--type-caption);
font-weight: 500;
color: var(--ink-3);
margin-top: 4px;
}
.sheet__close {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--paper-2);
color: var(--ink-2);
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.sheet__chips {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin-top: var(--s3);
}
/* Peek Actions CTA — explicit affordance to expand the peek into the
* full disposition sheet. Black pill with gold text, brand-canonical. */
.sheet__actions-cta,
.sheet__view-list {
width: 100%;
height: 52px;
border-radius: var(--r-button-commit);
font-size: var(--type-button);
font-weight: 700;
margin-top: var(--s4);
transition: transform var(--t-instant) var(--ease-snap);
background: var(--brand-primary);
color: var(--gold);
}
.sheet__view-list {
background: var(--paper-2);
color: var(--ink);
border: 1.5px solid var(--paper-3);
}
.sheet__actions-cta:active,
.sheet__view-list:active { transform: scale(0.99); }
/* In FULL mode, Actions CTA is hidden — the dispositions ARE the action. */
.sheet:not(.sheet--peek) .sheet__actions-cta { display: none; }
/* View-list CTA stays visible in both states for clusters. */
.chip {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 var(--s3);
border-radius: var(--r-chip);
font-size: var(--type-caption);
font-weight: 500;
white-space: nowrap;
}
.chip--amber { background: var(--amber-soft); color: var(--amber-deep); }
.chip--blue { background: var(--blue-soft); color: var(--blue-deep); }
.chip--neutral { background: var(--paper-2); color: var(--ink-2); }
.chip--gold { background: var(--gold); color: var(--ink); font-weight: 700; }
.chip--gold[aria-pressed="false"] {
background: var(--paper-2);
color: var(--ink-2);
font-weight: 500;
}
.sheet__nav {
width: 100%;
height: var(--tap-primary);
background: var(--brand-primary);
color: var(--gold);
border-radius: var(--r-button);
font-size: var(--type-button);
font-weight: 700;
margin-top: var(--s4);
}
.sheet__nav:active { transform: scale(0.99); }
/* Scan-arrived sheets hide Navigate — the rep is already physically
* at the cart and "navigate to it" is dead weight. The rest of the
* sheet (dispositions + more link) stays as the action-first layout. */
.sheet--scan-arrived .sheet__nav,
.sheet.sheet--scan-arrived .sheet__nav {
display: none !important;
}
/* Bottom-bar (just the FAB now) stays visible when sheet is open —
* the sheet floats above the FAB's reserved 84pt band. View-switching
* happens from the top strip; Last-3 chip floats on the map area. No
* collisions because all bottom controls live in dedicated bands. */
/* Disposition grid */
.disposition-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s2);
margin-top: var(--s3);
}
/* Calmed disposition grid (2026-06-09): the selection buttons are now
* monochrome cards — paper surface, ink label — with a small semantic
* color DOT instead of a full fill. The bold word already carries the
* meaning; the dot reinforces it without a five-hue rainbow on the
* sheet. Color still does its real work where it's glanceable across
* geography — the map pins — and where it's protected — the green
* commit button on found-confirm. (Selection ≠ commit.) */
.disposition {
height: var(--tap-disposition);
border-radius: var(--r-button);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
background: var(--paper);
color: var(--ink);
border: 2px solid var(--ink);
transition: transform var(--t-instant) var(--ease-snap),
border-color var(--t-instant) var(--ease-snap);
}
.disposition:active { transform: scale(0.98); }
/* Semantic dot — the quiet color cue. */
.disposition::before {
content: '';
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--dispo-dot, var(--ink-3));
}
.disposition__label {
font-size: var(--type-button);
font-weight: 700;
}
.disposition__sub {
font-size: var(--type-microcopy);
font-weight: 500;
color: var(--ink-3);
}
.disposition--found { --dispo-dot: var(--green); }
.disposition--rts { --dispo-dot: var(--gold-deep); }
.disposition--ranf { --dispo-dot: var(--ink-3); }
.disposition--utr { --dispo-dot: var(--amber); }
/* Investigate — full-width blue peer below the 2×2 grid. Blue per brand
* §3.3 (Investigate chrome always blue, every skin). Reads as "flag for
* a look," distinct from the retrieval outcomes above. */
.disposition--investigate {
width: 100%;
height: var(--tap-primary);
margin-top: var(--s2);
background: var(--paper);
color: var(--blue-deep);
border: 2px solid var(--blue);
--dispo-dot: var(--blue);
flex-direction: row;
gap: var(--s2);
}
.disposition--investigate .disposition__label { font-size: var(--type-body); }
.disposition--investigate .disposition__sub { color: var(--blue-deep); opacity: 0.7; }
.sheet__more {
margin-top: var(--s4);
font-size: var(--type-caption);
color: var(--ink-2);
text-align: center;
}
.sheet__more a {
color: var(--ink);
text-decoration: underline;
font-weight: 500;
}
/* Secondary actions below the disposition grid: per-cart Flag chip +
* direct "Found just the tag?" link. Replaced the old "More:" text link
* with two explicit affordances so reps don't have to think about
* which picker to open. */
.sheet__secondary {
margin-top: var(--s4);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s2);
}
/* Flag this cart for review - BLUE per brand standards §3.3 */
.sheet__flag {
background: transparent;
color: var(--blue-deep);
border: 2px solid var(--blue);
border-radius: 22px;
padding: 8px 16px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
transition: background var(--t-instant) var(--ease-snap),
transform var(--t-instant) var(--ease-snap);
}
.sheet__flag:active {
background: var(--blue-soft);
transform: scale(0.98);
}
.sheet__tag-only {
color: var(--ink-3);
text-decoration: underline;
text-underline-offset: 3px;
font-size: 12px;
font-weight: 500;
}
.sheet__tag-only:active { color: var(--ink-2); }
/* ------------------------------------------------------------------ */
/* Commit button — reusable for Begin trip / Confirm FOUND / etc. */
/* ------------------------------------------------------------------ */
.commit-button {
width: 100%;
height: var(--tap-commit);
border-radius: var(--r-button-commit);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
transition: transform var(--t-instant) var(--ease-snap),
filter var(--t-instant) var(--ease-snap);
}
.commit-button:active {
transform: scale(0.99);
filter: brightness(0.95);
}
.commit-button--green {
background: var(--green);
color: var(--paper);
}
/* Neutral terminal commit (RA NOT FOUND — not a retrieval outcome). */
.commit-button--neutral {
background: var(--brand-primary);
color: var(--paper);
}
.commit-button--amber {
background: var(--amber);
color: var(--amber-deep);
}
.commit-button--blue {
background: var(--blue);
color: var(--paper);
}
.commit-button__label {
font-size: var(--type-button-big);
font-weight: 700;
}
.commit-button__sub {
font-size: var(--type-microcopy);
font-weight: 500;
opacity: 0.85;
}
/* ------------------------------------------------------------------ */
/* Scan screen */
/* Full-screen camera feed with a gold-bracketed reticle window. On */
/* mobile uses real getUserMedia + BarcodeDetector if available; on */
/* desktop or older browsers falls back to a Simulate button. */
/* ------------------------------------------------------------------ */
.screen--scan {
background: #000;
color: var(--paper);
}
.screen--scan .screen__body { display: none; }
.scan-top {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--s3) var(--s4);
color: var(--paper);
z-index: 5;
}
.scan-back {
background: rgba(255, 255, 255, 0.12);
color: var(--paper);
height: 36px;
padding: 0 var(--s3);
border-radius: var(--r-chip);
font-size: var(--type-caption);
font-weight: 600;
}
.scan-titles {
flex: 1 1 auto;
text-align: center;
min-width: 0;
}
.scan-title {
font-size: var(--type-body);
font-weight: 700;
text-align: center;
}
.scan-sub {
font-size: var(--type-microcopy);
font-weight: 500;
color: var(--gold);
margin-top: 2px;
letter-spacing: 0.3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.scan-top__spacer {
width: 80px; /* balance the back button for centered title */
flex: 0 0 auto;
}
.scan-stage {
/* Sized to the reticle instead of ballooning to fill — kills the dead
bands above/below the scanner window (Hondo 2026-06-11). The stance
headline sits above it, the can't-scan helpers pack up right below. */
position: relative;
flex: 0 0 auto;
height: 300px;
overflow: hidden;
background: #000;
}
.scan-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.scan-fallback {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--s5);
text-align: center;
color: var(--paper);
background:
repeating-linear-gradient(45deg,
rgba(255, 255, 255, 0.04) 0 12px,
rgba(255, 255, 255, 0) 12px 24px),
#1A1A20;
}
.scan-fallback__title {
font-size: var(--type-section);
font-weight: 700;
margin-bottom: var(--s2);
}
.scan-fallback__body {
font-size: var(--type-caption);
color: var(--header-sub-fg);
max-width: 280px;
line-height: 1.5;
}
/* Reticle — the clear-square window over the dimmed surround. Brackets
* are gold per the persistent camera-reticle rule (brand standards §3.1). */
.scan-reticle {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 72vw;
max-width: 280px;
aspect-ratio: 1 / 1;
/* Box-shadow trick dims everything OUTSIDE the reticle */
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
border-radius: 12px;
pointer-events: none;
}
.scan-bracket {
position: absolute;
width: 32px;
height: 32px;
border-color: var(--gold);
border-style: solid;
border-width: 0;
pointer-events: none;
}
.scan-bracket--tl { top: -3px; left: -3px; border-top-width: 4px; border-left-width: 4px; border-top-left-radius: 8px; }
.scan-bracket--tr { top: -3px; right: -3px; border-top-width: 4px; border-right-width: 4px; border-top-right-radius: 8px; }
.scan-bracket--bl { bottom: -3px; left: -3px; border-bottom-width: 4px; border-left-width: 4px; border-bottom-left-radius: 8px; }
.scan-bracket--br { bottom: -3px; right: -3px; border-bottom-width: 4px; border-right-width: 4px; border-bottom-right-radius: 8px; }
/* Sweeping scan line — classic QR-scanner motion. Catches the eye,
* tells the rep "the app IS looking right now." */
.scan-line {
position: absolute;
left: 8px;
right: 8px;
height: 2px;
background: var(--gold);
box-shadow: 0 0 10px rgba(255, 205, 0, 0.7);
animation: scan-sweep 2.4s var(--ease-soft) infinite;
}
@keyframes scan-sweep {
0% { top: 8%; opacity: 0.4; }
10% { opacity: 1; }
50% { top: 92%; opacity: 1; }
60% { opacity: 0.4; }
100% { top: 8%; opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
.scan-line { animation: none; top: 50%; opacity: 1; }
}
.scan-hint {
position: absolute;
left: 50%;
bottom: var(--s5);
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.6);
color: var(--paper);
padding: var(--s2) var(--s4);
border-radius: var(--r-chip);
font-size: var(--type-microcopy);
font-weight: 500;
white-space: nowrap;
z-index: 6;
}
.scan-bottom {
flex: 0 0 auto;
background: #000;
padding: var(--s4) var(--s5) calc(var(--s4) + env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
gap: var(--s3);
}
/* Two equal escape-hatch CTAs on the scan footer. Outlined containers,
* not filled pills - visible from across the room under sunlight, but
* deliberately not "press me" loud. 2px solid gold border defines the
* boundary; white text reads as a label, not a CTA. Filled visual
* weight is reserved for commit buttons elsewhere - this is a
* "here if you need it" affordance. */
.scan-cta {
width: 100%;
height: 56px;
background: rgba(255, 255, 255, 0.05);
color: var(--paper);
border: 2px solid var(--gold);
border-radius: 28px;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
transition: background var(--t-instant) var(--ease-snap),
transform var(--t-instant) var(--ease-snap);
}
.scan-cta:active {
background: rgba(255, 205, 0, 0.18);
transform: scale(0.98);
}
/* Demo / stress-test helper - styled as a debug bug badge so it can't
* be mistaken for a real action. Off-brand magenta against the dark
* scan footer screams "developer artifact." Small pill so it doesn't
* compete with the real CTAs above; the bug emoji prefix reinforces
* "this is here for testing." */
.scan-simulate-bug {
align-self: center;
margin-top: var(--s2);
background: #C026D3;
color: #FFFFFF;
border: 0;
border-radius: 14px;
padding: 6px 12px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: lowercase;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow: 0 2px 6px rgba(192, 38, 211, 0.35);
transition: transform var(--t-instant) var(--ease-snap),
background var(--t-instant) var(--ease-snap);
}
.scan-simulate-bug:active {
transform: scale(0.96);
background: #A21CAF;
}
/* ------------------------------------------------------------------ */
/* Scan options — recovery picker after a failed QR scan */
/* Three big touch-friendly options: Scan again (primary gold), */
/* Enter DevID manually (secondary, expands inline), Unreadable tag */
/* (amber). Tag-no-cart and No-tag are deliberately NOT here — they */
/* live as standalone dispositions reached via the cart-sheet "More" */
/* link (a rep who tried to scan saw a tag). */
/* ------------------------------------------------------------------ */
.screen--scan-options {
background: #000;
color: var(--paper);
}
.screen--scan-options .screen__body { display: none; }
.screen--scan-options .capture-top { background: #000; }
.screen--scan-options .capture-titles__primary { color: var(--paper); }
.screen--scan-options .capture-titles__sub { color: var(--header-sub-fg); }
.scan-options {
flex: 1 1 auto;
overflow-y: auto;
padding: var(--s5);
display: flex;
flex-direction: column;
gap: var(--s3);
}
.scan-option {
display: flex;
align-items: center;
gap: var(--s3);
padding: var(--s4);
background: var(--paper);
color: var(--ink);
border: none;
border-radius: var(--r-card);
text-align: left;
width: 100%;
cursor: pointer;
transition: transform var(--t-instant) var(--ease-snap);
min-height: 76px;
}
.scan-option:active { transform: scale(0.99); }
.scan-option__icon {
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--paper-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink);
}
.scan-option__icon svg {
width: 24px;
height: 24px;
}
.scan-option__text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.scan-option__title {
font-size: var(--type-body);
font-weight: 700;
color: var(--ink);
}
.scan-option__sub {
font-size: var(--type-microcopy);
font-weight: 500;
color: var(--ink-2);
line-height: 1.35;
}
.scan-option__arrow {
flex: 0 0 auto;
font-size: 20px;
font-weight: 700;
color: var(--ink-3);
}
/* Primary (Scan again) — gold pill */
.scan-option--primary {
background: var(--gold);
}
.scan-option--primary .scan-option__icon {
background: rgba(0, 0, 0, 0.12);
color: var(--ink);
}
.scan-option--primary .scan-option__title,
.scan-option--primary .scan-option__arrow { color: var(--ink); }
.scan-option--primary .scan-option__sub { color: var(--gold-dark-text); }
/* Amber (Unreadable tag) */
.scan-option--amber {
background: var(--amber-soft);
}
.scan-option--amber .scan-option__icon {
background: var(--amber);
color: var(--paper);
}
.scan-option--amber .scan-option__title { color: var(--amber-deep); }
.scan-option--amber .scan-option__sub { color: var(--amber-deep); opacity: 0.85; }
.scan-option--amber .scan-option__arrow { color: var(--amber-deep); }
/* Manual entry — collapsed-by-default card that expands inline */
.scan-option--manual {
background: var(--paper);
border-radius: var(--r-card);
display: block;
padding: 0;
overflow: hidden;
}
.scan-option--manual .scan-option__head {
display: flex;
align-items: center;
gap: var(--s3);
padding: var(--s4);
background: transparent;
width: 100%;
text-align: left;
cursor: pointer;
transition: transform var(--t-instant) var(--ease-snap);
min-height: 76px;
color: var(--ink);
}
.scan-option--manual .scan-option__head:active { transform: scale(0.99); }
.scan-option--manual .scan-option__arrow {
transition: transform var(--t-quick) var(--ease-snap);
}
.scan-option--manual[data-state="expanded"] .scan-option__arrow {
transform: rotate(90deg);
}
.scan-option__expand {
max-height: 0;
overflow: hidden;
opacity: 0;
padding: 0 var(--s4);
transition: max-height var(--t-deliberate) var(--ease-snap),
opacity var(--t-quick) var(--ease-snap),
padding-bottom var(--t-deliberate) var(--ease-snap);
}
.scan-option--manual[data-state="expanded"] .scan-option__expand {
max-height: 220px;
opacity: 1;
padding-bottom: var(--s4);
}
.scan-option__label {
display: block;
font-size: var(--type-microcopy);
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: var(--s2);
}
.scan-option__input {
width: 100%;
height: 52px;
padding: 0 var(--s4);
border: 2px solid var(--paper-3);
border-radius: var(--r-input);
font-family: var(--font-mono);
font-size: var(--type-section);
font-weight: 600;
color: var(--ink);
background: var(--paper-2);
text-transform: uppercase;
letter-spacing: 1.5px;
outline: none;
transition: border-color var(--t-quick) var(--ease-snap);
}
.scan-option__input:focus {
border-color: var(--ink);
background: var(--paper);
}
.scan-option__hint {
font-size: var(--type-microcopy);
color: var(--ink-3);
margin-top: var(--s2);
}
.scan-option__submit {
width: 100%;
height: 48px;
margin-top: var(--s3);
background: var(--green);
color: var(--paper);
border-radius: var(--r-button);
font-size: var(--type-body);
font-weight: 700;
transition: opacity var(--t-quick) var(--ease-snap), transform var(--t-instant) var(--ease-snap);
}
.scan-option__submit:active { transform: scale(0.98); }
.scan-option__submit:disabled {
background: var(--neutral);
color: var(--ink-3);
opacity: 1;
cursor: not-allowed;
}
/* ------------------------------------------------------------------ */
/* Scan = the two-stance recovery screen (Hondo 2026-06-11) */
/* The whole screen forks on a first-person stance: "I'm recovering a */
/* cart" (header + scanner + can't-scan helpers) vs "I'm not */
/* recovering a cart" (Log a report). Recovery owns the body so the */
/* main path dominates; the report stance is a clear footer band. */
/* ------------------------------------------------------------------ */
/* On-board chip — right side of the header, balances the back button.
Same truck glyph as the map peek's on-truck pin; gold so it reads as
"your truck," ticking up as recoveries land. */
.scan-onboard {
flex: 0 0 auto;
min-width: 80px;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
color: var(--gold);
}
.scan-onboard[hidden] { display: none; }
.scan-onboard__truck { width: 26px; height: 18px; display: inline-block; }
.scan-onboard__truck svg { width: 100%; height: 100%; }
.scan-onboard__n { font-size: var(--type-body); font-weight: 800; }
/* Stance-1 headline block — the assumption, big, in the body (not the
cramped header bar where the notch was clipping it). */
.scan-headline {
flex: 0 0 auto;
text-align: center;
padding: var(--s3) var(--s5) var(--s2);
display: flex;
flex-direction: column;
gap: 4px;
color: var(--paper);
}
.scan-stance1 {
font-size: var(--type-page-title);
font-weight: 800;
line-height: 1.1;
margin: 0;
}
.scan-instruction {
font-size: var(--type-caption);
font-weight: 600;
color: var(--gold);
letter-spacing: 0.2px;
margin: 0;
}
/* Tag-only path — promoted from a tiny top link to a prominent full-width
pill in the footer (Brian UAT #4): the loose-tag case is common and
casual drivers missed the old underline. Sits just under the can't-scan
helpers as a peer affordance, bold and tappable, not a buried caveat. */
.scan-tagonly {
display: block;
width: 100%;
margin: var(--s3) 0 0;
height: 52px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 205, 0, 0.55);
border-radius: 28px;
text-align: center;
font-family: var(--font-family);
font-size: 15px;
font-weight: 700;
color: var(--paper);
cursor: pointer;
transition: background var(--t-instant) var(--ease-snap),
transform var(--t-instant) var(--ease-snap);
}
.scan-tagonly:active { background: rgba(255, 255, 255, 0.10); transform: scale(0.98); }
/* "Can't scan the tag?" lead + the two stance-1 fallbacks, side by side
(both are still "recovering this cart"). Helpers are secondary — quiet
outlined pills, lighter than a commit. */
.scan-help-lead {
text-align: center;
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: 0.3px;
color: var(--paper);
margin: 0;
}
.scan-help-row { display: flex; gap: var(--s3); }
.scan-cta--help {
flex: 1 1 0;
height: 52px;
font-size: 15px;
border-color: rgba(255, 205, 0, 0.55);
}
/* Stance 2 — the other fork. A delineated band (hairline top rule +
breathing room) so it's an unmissable peer, not a buried link. Macro
line states the stance; the button is the move. Gold-matched to the
recovery family (no blue), differentiated by position, the map-pin
icon, and the first-person macro line above it. */
.scan-stance2 {
/* Extra breathing room above the rule so the fork between the two
stances reads as a real section break, not a tight divider. */
margin-top: var(--s5);
padding-top: var(--s5);
border-top: 1px solid rgba(255, 255, 255, 0.14);
display: flex;
flex-direction: column;
gap: var(--s2);
}
.scan-stance2__macro {
/* Matches the stance-1 headline size — the two forks read as equals. */
text-align: center;
font-size: var(--type-page-title);
font-weight: 800;
line-height: 1.1;
color: var(--paper);
margin: 0;
}
.scan-stance2__btn {
width: 100%;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: rgba(255, 255, 255, 0.05);
color: var(--paper);
border: 2px solid var(--gold);
border-radius: 28px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background var(--t-instant) var(--ease-snap),
transform var(--t-instant) var(--ease-snap);
}
.scan-stance2__btn:active { background: rgba(255, 205, 0, 0.18); transform: scale(0.98); }
.scan-stance2__icon { width: 20px; height: 20px; color: var(--gold); }
.scan-stance2__icon svg { width: 100%; height: 100%; }
.scan-stance2__arrow { color: var(--gold); font-weight: 800; }
/* ------------------------------------------------------------------ */
/* Field report (location-anchored) — /field-report */
/* The "I was at a spot but captured no cart" branch. Everything here */
/* is tied to WHERE the rep is, not a cart's identity, so the screen */
/* states plainly that nothing is marked retrieved. Candidates show as */
/* informational (blue), never as a committed outcome. */
/* ------------------------------------------------------------------ */
.screen--field-report { background: var(--paper); color: var(--ink); }
.field-report { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s4); overflow-y: auto; }
.fr-explain {
font-size: var(--type-body);
line-height: 1.4;
color: var(--ink-2, #4A463E);
background: var(--paper-2);
border-left: 3px solid var(--blue, #2F6BFF);
border-radius: var(--r-input, 10px);
padding: var(--s3) var(--s4);
margin: 0;
}
/* Photo evidence carried from the capture step. */
.fr-photo { position: relative; border-radius: var(--r-input, 10px); overflow: hidden; }
.fr-photo img { width: 100%; max-height: 180px; object-fit: cover; display: block; }
.fr-photo__tag {
position: absolute;
left: var(--s2);
bottom: var(--s2);
font-size: var(--type-microcopy);
font-weight: 700;
color: var(--paper);
background: rgba(0, 0, 0, 0.6);
padding: 3px var(--s2);
border-radius: 999px;
}
/* No-photo consequence — amber, surfaced not blocked (escape hatch
honored: cameras break, safety first; a photo is just stronger). */
.fr-nophoto {
font-size: var(--type-caption);
line-height: 1.45;
color: var(--amber-deep, #9A6B00);
background: var(--amber-soft, #FFF4D6);
border: 1px solid var(--amber, #E6A700);
border-radius: var(--r-input, 10px);
padding: var(--s3) var(--s4);
}
.fr-nophoto__add {
display: inline;
margin-left: 4px;
font: inherit;
font-weight: 700;
color: var(--amber-deep, #9A6B00);
text-decoration: underline;
cursor: pointer;
}
/* Why the commit is locked — shown until a note/flag is present. */
.fr-commit-hint {
text-align: center;
font-size: var(--type-microcopy);
color: var(--ink-3);
margin: 0 0 var(--s2) 0;
}
.fr-commit-hint[hidden] { display: none; }
/* Pulse fired by a premature tap — flashes amber + lifts, drawing the eye
to what's missing while the note is scrolled into view + focused. */
.fr-commit-hint--pulse { animation: fr-hint-pulse 0.5s var(--ease-snap, ease) 2; }
@keyframes fr-hint-pulse {
0%, 100% { color: var(--ink-3); transform: translateY(0); }
50% { color: var(--amber-deep, #7A4E00); transform: translateY(-2px); font-weight: 700; }
}
/* Locked commit — muted, clearly not the live green, but still tappable so
a premature press triggers the nudge instead of reading as broken. */
.commit-button.commit-button--locked {
background: var(--paper-3, #DAD5C8);
color: var(--ink-3);
cursor: pointer;
box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
.fr-commit-hint--pulse { animation: none; }
}
.fr-loc {
display: flex;
align-items: center;
gap: var(--s2);
font-size: var(--type-body);
font-weight: 600;
color: var(--ink);
}
.fr-loc__sub { font-weight: 400; color: var(--ink-3); font-size: var(--type-microcopy); }
.fr-kinds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.fr-kind {
width: 100%;
text-align: left;
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--s3) var(--s4);
min-height: 64px;
background: var(--paper-2);
border: 2px solid var(--paper-3);
border-radius: var(--r-button, 14px);
cursor: pointer;
transition: border-color var(--t-quick) var(--ease-snap), transform var(--t-instant) var(--ease-snap);
}
.fr-kind:active { transform: scale(0.99); }
.fr-kind[aria-pressed="true"] { border-color: var(--ink); background: var(--paper); }
.fr-kind__title { font-size: var(--type-section); font-weight: 700; color: var(--ink); }
.fr-kind__sub { font-size: var(--type-microcopy); color: var(--ink-3); }
/* Revealed lower section after a kind is chosen. */
.fr-section { display: flex; flex-direction: column; gap: var(--s4); }
.fr-section[hidden] { display: none; }
.fr-reasons { display: flex; flex-wrap: wrap; gap: var(--s2); }
.fr-reason {
padding: var(--s2) var(--s3);
border-radius: 999px;
border: 1.5px solid var(--paper-3);
background: var(--paper-2);
font-size: var(--type-microcopy);
font-weight: 600;
color: var(--ink-2, #4A463E);
cursor: pointer;
}
.fr-reason[aria-pressed="true"] { border-color: var(--amber-deep, #9A6B00); color: var(--amber-deep, #9A6B00); background: var(--paper); }
.fr-candidates { display: flex; flex-direction: column; gap: var(--s2); }
.fr-candidates__head {
font-size: var(--type-microcopy);
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--ink-3);
margin: 0;
}
.fr-candidates__note { font-size: var(--type-microcopy); color: var(--blue, #2F6BFF); margin: 0 0 var(--s1) 0; }
.fr-candidate {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s2);
padding: var(--s2) var(--s3);
background: var(--paper-2);
border: 1px dashed var(--paper-3);
border-radius: var(--r-input, 10px);
}
.fr-candidate__id { font-family: var(--font-mono); font-weight: 600; font-size: var(--type-body); color: var(--ink); }
.fr-candidate__meta { font-size: var(--type-microcopy); color: var(--ink-3); }
.fr-candidate__tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
color: var(--blue, #2F6BFF);
border: 1px solid var(--blue, #2F6BFF);
border-radius: 999px;
padding: 2px var(--s2);
white-space: nowrap;
}
/* ------------------------------------------------------------------ */
/* Capture screen (Found / RTS — both flows share this layout) */
/* Full-screen camera feed with a tall gold photo-framing rectangle */
/* and 4 corner dots per brand standards §3.1. Shutter ring is gold */
/* — one of the most-tapped UI elements, brand has a moment here. */
/* ------------------------------------------------------------------ */
.screen--capture {
background: #000;
color: var(--paper);
}
.screen--capture .screen__body { display: none; }
.capture-top {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--s3) var(--s4);
background: rgba(0, 0, 0, 0.82);
z-index: 5;
gap: var(--s2);
}
/* Instruct variant — used on /found-capture (and later RTS / unreadable).
* Browse-first FOUND is the rep's photo-capture moment; the instruction
* needs to be unmistakable in field conditions. Big gold heading,
* monospace cart-id subline, generous real estate, gold rule below. */
.capture-top--instruct {
flex-direction: column;
align-items: stretch;
padding: var(--s6) var(--s5) var(--s4);
background: var(--brand-primary);
min-height: 180px;
position: relative;
justify-content: center;
}
.capture-back {
background: rgba(255, 255, 255, 0.12);
color: var(--paper);
height: 36px;
padding: 0 var(--s3);
border-radius: var(--r-chip);
font-size: var(--type-caption);
font-weight: 600;
flex: 0 0 auto;
}
/* Icon-only back button — absolute-positioned on instruct variant so
* the title content can claim full center stage. */
.capture-back--icon {
position: absolute;
top: var(--s3);
left: var(--s4);
width: 44px; /* 44pt tap floor — matches .screen-back */
height: 44px;
padding: 0;
font-size: 22px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* ------------------------------------------------------------------ */
/* Standardized back control (Option A, Hondo 2026-06-23): ONE ← in the
* upper-left on every flow + confirm screen, replacing the bespoke
* capture-back / scan-back / batch-back / payload-back / trip-notes-back /
* confirm-header__close zoo. Icon-only so there's no label drift; the
* aria-label carries "Cancel" (uncommitted flow) vs "Back" (navigation).
* On confirm screens it also replaces the top-RIGHT × and gains a
* discard-guard (see back-guard.js) so leaving an uncommitted photo+note
* still asks first — the safety the × "Cancel and discard" used to imply. */
.screen-back {
flex: 0 0 auto;
width: 44px;
height: 44px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: var(--paper);
font-family: var(--font-family);
font-size: 22px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background var(--t-instant) var(--ease-snap),
transform var(--t-instant) var(--ease-snap);
}
.screen-back:active { background: rgba(255, 255, 255, 0.22); transform: scale(0.92); }
/* Light header (utr-reason is amber) needs a dark glyph for contrast. */
.utr-top .screen-back { background: rgba(0, 0, 0, 0.14); color: var(--amber-deep); }
/* On confirm screens the back sits LEFT of the titles (was a right-side ×).
Mirror the per-disposition close-button chrome it replaces so contrast
holds on every colored header. */
.confirm-header { justify-content: flex-start; }
.confirm-header .screen-back { background: rgba(255, 205, 0, 0.15); color: var(--gold); }
.confirm-header--rts .screen-back { background: rgba(0, 0, 0, 0.14); color: var(--ink); }
.confirm-header--utr .screen-back,
.confirm-header--unrdbl .screen-back { background: rgba(0, 0, 0, 0.14); color: var(--amber-deep); }
.confirm-header--notag .screen-back,
.confirm-header--tagnocart .screen-back,
.confirm-header--investigate .screen-back { background: rgba(0, 0, 0, 0.18); color: var(--paper); }
/* Discard-guard sheet — shown only when leaving a confirm screen that has
* unsaved work (a captured photo, a note, or an added photo). */
.discard-sheet__scrim {
position: fixed; inset: 0; z-index: 70;
background: rgba(10, 10, 10, 0.55);
}
.discard-sheet {
position: fixed; left: var(--s4); right: var(--s4); bottom: var(--s5);
z-index: 71;
background: var(--paper);
border-radius: var(--r-input, 14px);
padding: var(--s5);
box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.discard-sheet__title { font-size: var(--type-section); font-weight: 800; color: var(--ink); margin: 0 0 var(--s2); }
.discard-sheet__sub { font-size: var(--type-body); color: var(--ink-2); margin: 0 0 var(--s4); line-height: 1.4; }
.discard-sheet__actions { display: flex; flex-direction: column; gap: var(--s2); }
.discard-sheet__discard {
width: 100%; min-height: var(--tap-primary);
background: var(--paper); color: var(--red, #C0392B);
border: 2px solid var(--red, #C0392B); border-radius: var(--r-button);
font-family: var(--font-family); font-size: var(--type-body); font-weight: 800; cursor: pointer;
}
.discard-sheet__keep {
width: 100%; min-height: var(--tap-primary);
background: var(--ink); color: var(--paper);
border: none; border-radius: var(--r-button);
font-family: var(--font-family); font-size: var(--type-body); font-weight: 700; cursor: pointer;
}
/* PHOTO badge retired per Hondo — the big heading carries the signal
* on its own. CSS class kept here as a dead rule placeholder in case
* a future iteration wants to revisit; remove if it's still unused
* after RTS / unreadable land. */
.capture-mode-badge { display: none; }
.capture-titles {
flex: 1 1 auto;
text-align: center;
min-width: 0;
}
.capture-titles__primary {
font-size: var(--type-caption);
font-weight: 700;
color: var(--gold);
}
.capture-titles__sub {
font-size: var(--type-microcopy);
font-weight: 500;
color: var(--header-sub-fg);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* On the instruct variant the primary heading reads as a clear
* instruction, not a screen label — 40px gold weight 700 so it
* unmistakably dominates the strip. Wraps onto two lines on phones,
* which adds visual weight without crowding. Subline 16px warm-white. */
.capture-top--instruct .capture-titles__primary {
font-size: 44px;
font-weight: 700;
color: var(--gold);
line-height: 1.08;
letter-spacing: -0.015em;
white-space: normal;
}
.capture-top--instruct .capture-titles__sub {
font-size: 16px;
font-weight: 500;
color: var(--header-sub-fg);
margin-top: var(--s3);
letter-spacing: 0.3px;
white-space: normal;
}
.capture-top__spacer { width: 80px; flex: 0 0 auto; }
.capture-stage {
position: relative;
flex: 1 1 auto;
overflow: hidden;
background: #000;
}
.capture-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.capture-fallback {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--s5);
text-align: center;
color: var(--paper);
background:
repeating-linear-gradient(45deg,
rgba(255, 255, 255, 0.04) 0 12px,
rgba(255, 255, 255, 0) 12px 24px),
#1A1A20;
}
/* Photo framing rectangle — thin gold outline w/ 4 corner dots */
.capture-frame {
position: absolute;
top: 6%;
bottom: 6%;
left: 8%;
right: 8%;
border: 1.5px solid var(--gold);
border-radius: 8px;
opacity: 0.7;
pointer-events: none;
}
.capture-dot {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--gold);
}
.capture-dot--tl { top: -5px; left: -5px; }
.capture-dot--tr { top: -5px; right: -5px; }
.capture-dot--bl { bottom: -5px; left: -5px; }
.capture-dot--br { bottom: -5px; right: -5px; }
.capture-bottom {
flex: 0 0 auto;
background: rgba(0, 0, 0, 0.95);
padding: var(--s4) var(--s5) var(--s2);
display: flex;
align-items: center;
justify-content: center;
gap: var(--s5);
}
.capture-bottom__spacer { flex: 1 1 0; }
/* Shutter — gold ring (persistent §3.1) + dark inner button */
.capture-shutter {
width: 76px;
height: 76px;
border-radius: 50%;
background: var(--paper);
border: 5px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--t-instant) var(--ease-snap);
flex: 0 0 auto;
}
.capture-shutter__inner {
width: 56px;
height: 56px;
border-radius: 50%;
background: transparent;
border: 3px solid var(--ink);
}
.capture-shutter:active,
.capture-shutter--fired {
transform: scale(0.92);
}
.capture-shutter--fired { background: var(--gold); }
.capture-hint {
flex: 0 0 auto;
background: rgba(0, 0, 0, 0.95);
text-align: center;
color: var(--gold);
font-size: var(--type-microcopy);
font-weight: 600;
padding: 0 0 var(--s4);
}
/* ------------------------------------------------------------------ */
/* Confirm screen (Found / RTS / no-tag — shared layout) */
/* ------------------------------------------------------------------ */
.screen--confirm {
background: var(--paper);
}
.screen--confirm .screen__body { display: none; }
.confirm-header {
background: var(--brand-primary);
color: var(--paper);
padding: var(--s4) var(--s5) var(--s3);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s3);
flex: 0 0 auto;
}
.confirm-header__titles {
flex: 1 1 auto;
min-width: 0;
}
.confirm-header__label {
font-size: var(--type-caption);
font-weight: 700;
color: var(--gold);
}
.confirm-header__cart {
font-size: var(--type-section);
font-weight: 700;
color: var(--paper);
margin-top: 2px;
}
.confirm-header__close {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 205, 0, 0.15);
color: var(--gold);
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
/* RTS confirm header — gold background, ink text. Brand-color
* distinction (RTS vs Found) lives in the HEADER per brand standards
* §3.3; the COMMIT button stays green-semantic. */
.confirm-header--rts {
background: var(--gold);
color: var(--ink);
}
.confirm-header--rts .confirm-header__label {
color: var(--ink);
opacity: 0.75;
}
.confirm-header--rts .confirm-header__cart {
color: var(--ink);
}
.confirm-header--rts .confirm-header__close {
background: rgba(0, 0, 0, 0.14);
color: var(--ink);
}
/* Linked-Found-event strip — green-soft band beneath the metadata,
* shown only on /rts-confirm. Tells the rep this RTS pairs with their
* earlier Found event from the same trip; backend computes Found→RTS
* delta as an SLA metric. */
.confirm-linked {
margin-top: var(--s2);
padding: var(--s2) var(--s3);
background: var(--green-soft);
border-radius: var(--r-input);
font-size: var(--type-microcopy);
font-weight: 600;
color: var(--green-deep);
display: flex;
align-items: center;
gap: var(--s2);
}
.confirm-linked strong {
font-weight: 700;
}
.confirm-meta__delta {
font-size: var(--type-microcopy);
color: var(--ink-3);
margin-left: var(--s2);
}
.confirm-body {
flex: 1 1 auto;
overflow-y: auto;
padding: var(--s5);
}
.confirm-photo {
width: 100%;
aspect-ratio: 1 / 1;
background: #1A1A20;
border-radius: var(--r-card);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.confirm-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.confirm-photo__img--empty {
width: auto;
height: auto;
opacity: 0.4;
}
.confirm-meta {
position: relative;
margin-top: var(--s4);
}
.confirm-meta__label {
margin-bottom: var(--s2);
}
.confirm-meta__line {
font-family: var(--font-mono);
font-size: var(--type-caption);
font-weight: 500;
color: var(--ink-2);
margin-top: 2px;
}
/* Retake — bumped from a small underlined link to a clearly tappable
* gold-tinted pill. Sits in the upper-right of the metadata block so
* it's visually separate from the primary commit button below, but
* loud enough that a rep who got a bad scan-frame photo can find it. */
/* Retake + Add another photo are twin pills (Hondo 2026-06-23): same
size/style, stacked (Add directly below Retake). NEUTRAL monochrome —
utility actions don't need a brand color competing with the green commit;
color is reserved for what earns it (commit, semantic header, flag). */
.confirm-retake,
.photo-add__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
min-height: 48px;
margin: 0;
padding: 0 var(--s4);
background: var(--paper-2);
color: var(--ink);
border: 1px solid var(--paper-3);
border-radius: var(--r-button);
font-family: var(--font-family);
font-size: 15px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: background var(--t-instant) var(--ease-snap),
transform var(--t-instant) var(--ease-snap);
}
.confirm-retake { margin-top: var(--s3); }
.confirm-retake:active,
.photo-add__btn:active { background: var(--paper-3); transform: scale(0.99); }
@media (hover: hover) {
.confirm-retake:hover,
.photo-add__btn:hover { background: var(--paper-3); }
}
.confirm-note {
width: 100%;
height: 48px;
margin-top: var(--s4);
padding: 0 var(--s4);
background: var(--paper-2);
border-radius: var(--r-input);
display: flex;
align-items: center;
justify-content: space-between;
font-size: var(--type-caption);
font-weight: 500;
color: var(--ink-2);
}
.confirm-note__chevron {
font-size: 18px;
color: var(--ink-3);
transition: transform var(--t-instant) var(--ease-snap);
}
.confirm-note--open .confirm-note__chevron { transform: rotate(90deg); }
/* Expanded note panel (reverb-note-field). Event note + escalate-flag. */
.confirm-note__panel {
margin-top: var(--s2);
display: flex;
flex-direction: column;
gap: var(--s2);
}
.confirm-note__input {
width: 100%;
font-family: var(--font-family);
font-size: var(--type-body);
color: var(--ink);
background: var(--paper-2);
border: 1px solid var(--paper-3);
border-radius: var(--r-input);
padding: var(--s3);
resize: vertical;
}
.confirm-note__input:focus { outline: none; border-color: var(--blue); }
.confirm-note__flag {
display: flex;
align-items: center;
gap: var(--s2);
font-size: var(--type-caption);
font-weight: 700;
color: var(--blue-deep);
cursor: pointer;
}
.confirm-note__flag input { width: 18px; height: 18px; accent-color: var(--blue); }
/* Flag glyph — a touch larger wherever ⚑ appears so "flagged" pops out
* of a line without dominating (Hondo 2026-06-09). Size only; color
* inherits, except the flag-for-review checkbox brightens to blue. */
.flag-glyph { font-size: 1.25em; line-height: 1; }
.confirm-note__flag .flag-glyph { color: var(--blue); }
/* Flag = blue (attention), consistent with Investigate + list marker.
* A plain note stays neutral; only escalation goes blue. */
.confirm-note__flagged { color: var(--blue-deep); font-weight: 700; }
.reverb-note--flagged .confirm-note { border-left: 3px solid var(--blue); }
/* Auto-flag notice (unreadable tags) — blue attention line, matches the
* flag-for-review color rule. Brian UAT #4. */
.confirm-autoflag {
display: flex;
align-items: center;
gap: var(--s2);
margin: var(--s2) 0 0;
padding: var(--s2) var(--s3);
background: rgba(40, 110, 220, 0.10);
border-radius: var(--r-input, 10px);
color: var(--blue-deep);
font-size: var(--type-caption);
font-weight: 600;
}
.confirm-autoflag .flag-glyph { color: var(--blue); }
/* ------------------------------------------------------------------ */
/* — "add another photo" control + inline capture */
/* overlay (Brian UAT #4). A prominent gold-dashed button, a thumbnail */
/* strip of extra photos, and a full-screen camera overlay so the */
/* round trip never loses the note/disposition state on the screen. */
/* .photo-add__btn look is defined alongside .confirm-retake (twin pills).
Sits tight below the Retake pill. */
.photo-add { margin: var(--s2) 0 0; }
.photo-add__plus { font-size: 1.2em; line-height: 1; }
.photo-add__strip {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin-bottom: var(--s2);
}
.photo-add__strip[hidden] { display: none; }
.photo-add__thumb {
position: relative;
width: 64px;
height: 64px;
border-radius: 10px;
overflow: hidden;
}
.photo-add__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-add__remove {
position: absolute;
top: 2px;
right: 2px;
width: 20px;
height: 20px;
border: none;
border-radius: 50%;
background: rgba(10, 10, 10, 0.72);
color: var(--paper);
font-size: 14px;
line-height: 1;
cursor: pointer;
}
.photo-add__overlay {
/* Default hidden. A class selector's `display` would otherwise beat the
UA `[hidden]` rule and the overlay would render full-screen on top of
everything — so gate the flex layout behind :not([hidden]). */
display: none;
position: fixed;
inset: 0;
z-index: 60;
background: #0A0A0A;
flex-direction: column;
align-items: center;
justify-content: center;
}
.photo-add__overlay:not([hidden]) { display: flex; }
.photo-add__video {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
inset: 0;
}
.photo-add__fallback {
position: relative;
z-index: 1;
color: var(--paper);
text-align: center;
padding: var(--s5);
font-size: var(--type-caption);
}
.photo-add__frame { z-index: 1; }
.photo-add__bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--s4) var(--s5) var(--s6);
background: linear-gradient(to top, rgba(10,10,10,0.85), rgba(10,10,10,0));
}
.photo-add__cancel {
background: none;
border: none;
color: var(--paper);
font-family: var(--font-family);
font-size: 15px;
font-weight: 600;
cursor: pointer;
flex: 1 1 0;
text-align: left;
}
.photo-add__bar-spacer { flex: 1 1 0; }
/* UAT mode: the batch picker is part of the demo path, so strip its
* deliberate off-brand magenta (debug treatment) to a neutral read. */
.uat .batch-pick-sheet__row--unknown { background: var(--paper-2); }
.uat .batch-pick-sheet__row--unknown span { color: var(--ink-3); }
/* UAT mode: hide the Marketplace teaser on the store list. It's a future
* (crowd-retrieval) surface, not part of the field-rep MVP flow, and it
* pulled focus twice in Brian's UAT ("what is that marketplace thing?").
* Gated out of the clean demo so the intuition test stays on the rep app. */
.uat .marketplace-teaser { display: none; }
.uat .batch-pick-sheet__row--unknown:active { background: var(--paper-3); }
.confirm-footer {
flex: 0 0 auto;
padding: var(--s4) var(--s5) var(--s6);
background: var(--paper);
}
.commit-button--fired { filter: saturate(0.85); }
/* ------------------------------------------------------------------ */
/* Missing-screen fallback */
/* ------------------------------------------------------------------ */
.screen-missing {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--s5);
background: var(--paper-2);
text-align: center;
}
.screen-missing__label {
font-size: var(--type-microcopy);
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--amber-deep);
background: var(--amber-soft);
padding: 4px var(--s3);
border-radius: var(--r-chip);
margin-bottom: var(--s4);
}
.screen-missing__route {
font-family: var(--font-mono);
font-size: var(--type-section);
color: var(--ink);
margin-bottom: var(--s3);
}
.screen-missing__hint {
font-size: var(--type-caption);
color: var(--ink-2);
margin-bottom: var(--s6);
}
.screen-missing__back {
padding: var(--s2) var(--s5);
background: var(--ink);
color: var(--paper);
border-radius: var(--r-button);
font-size: var(--type-body);
font-weight: 700;
}
/* ------------------------------------------------------------------ */
/* Payload chip — bottom-left peer of the bottom-right + FAB. */
/* Surfaces "you have N carts on board" on /map and /list. Hidden */
/* when payload = 0 or off-route. Tap → /payload. */
/* ------------------------------------------------------------------ */
reverb-payload-chip {
position: absolute;
bottom: var(--s5);
left: var(--s5);
z-index: 26;
display: block;
}
reverb-payload-chip[hidden] { display: none; }
.payload-chip {
display: inline-flex;
align-items: center;
gap: var(--s2);
padding: 10px 16px 10px 12px;
height: 56px;
border-radius: 28px;
background: var(--brand-primary);
color: var(--gold);
border: 2px solid var(--gold);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
letter-spacing: 0.01em;
transition: transform var(--t-instant) var(--ease-snap),
box-shadow var(--t-instant) var(--ease-snap);
animation: payload-chip-in var(--t-snap) var(--ease-snap);
}
.payload-chip:active {
transform: scale(0.96);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
}
.payload-chip__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 22px;
color: var(--gold);
}
.payload-chip__icon svg { width: 100%; height: 100%; display: block; }
.payload-chip__count {
font-size: 18px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.payload-chip__label {
font-size: 13px;
font-weight: 600;
color: var(--header-sub-fg);
letter-spacing: 0.02em;
text-transform: lowercase;
}
@keyframes payload-chip-in {
from { transform: translateY(8px) scale(0.92); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
/* ------------------------------------------------------------------ */
/* /payload — list of carts currently on the truck. Reached from the */
/* payload chip. Returns to whatever view the rep was on (history). */
/* ------------------------------------------------------------------ */
.screen--payload {
display: flex;
flex-direction: column;
height: 100%;
background: var(--paper);
}
.payload-top {
display: grid;
grid-template-columns: 44px 1fr 44px;
align-items: center;
padding: var(--s3) var(--s4);
background: var(--brand-primary);
color: var(--gold);
}
.payload-back {
width: 36px;
height: 36px;
border-radius: 18px;
background: transparent;
color: var(--gold);
font-size: 22px;
font-weight: 700;
border: 0;
cursor: pointer;
}
.payload-back:active { background: rgba(255, 205, 0, 0.12); }
.payload-titles {
text-align: center;
}
.payload-titles__label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--header-sub-fg);
margin: 0;
}
.payload-titles__count {
font-size: 22px;
font-weight: 800;
margin: 2px 0 0;
color: var(--gold);
}
.payload-top__spacer { display: block; }
.payload-body {
flex: 1 1 auto;
overflow-y: auto;
padding: var(--s4) var(--s4) var(--s5);
}
.payload-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--s2);
}
.payload-row {
display: grid;
grid-template-columns: 14px 1fr 36px;
align-items: center;
gap: var(--s3);
padding: var(--s3) var(--s3);
background: var(--paper);
border: 1px solid var(--paper-3);
border-radius: 14px;
}
.payload-row__bullet {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 3px rgba(255, 205, 0, 0.22);
}
/* Tag-only entry: a loose tag, not a cart. Neutral bullet so it reads as
distinct from the gold cart bullets at a glance. */
.payload-row--tag .payload-row__bullet {
background: var(--ink-3);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}
.payload-row--tag .payload-row__sub { color: var(--ink-3); }
/* Unreadable tag, reading via OCR — amber bullet + sub while the backend
resolves the DevID; flips to a normal cart row once it lands. */
.payload-row--reading .payload-row__bullet { background: var(--amber, #FFB300); box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.22); }
.payload-row--reading .payload-row__sub { color: var(--amber-deep, #7A4E00); }
.payload-row__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.payload-row__cart {
font-size: 16px;
font-weight: 700;
color: var(--ink);
margin: 0;
letter-spacing: 0.01em;
}
.payload-row__sub {
font-size: 12px;
color: var(--ink-3);
margin: 0;
}
.payload-row__remove {
width: 32px;
height: 32px;
border-radius: 16px;
background: var(--paper-2);
color: var(--ink-2);
border: 0;
font-size: 18px;
font-weight: 600;
cursor: pointer;
}
.payload-row__remove:active { background: var(--paper-3); }
.payload-empty {
text-align: center;
padding: var(--s6) var(--s4) var(--s5);
color: var(--ink-3);
}
.payload-empty__line {
font-size: 16px;
font-weight: 600;
color: var(--ink-2);
margin: 0 0 var(--s2);
}
.payload-empty__sub {
font-size: 13px;
margin: 0;
}
.payload-footer {
padding: var(--s3) var(--s4) var(--s4);
background: var(--paper);
border-top: 1px solid var(--paper-3);
}
/* Take-off-truck confirm — quick gate + a required reason (documented
for the manager) before a FOUND is reversed. */
.pl-confirm-scrim {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 80;
}
.pl-confirm {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: calc(100% - var(--s4) * 2);
max-width: 360px;
z-index: 81;
background: var(--paper);
border-radius: var(--r-button, 16px);
padding: var(--s4);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
gap: var(--s3);
}
.pl-confirm__title { font-size: var(--type-section); font-weight: 800; color: var(--ink); margin: 0; }
.pl-confirm__sub { font-size: var(--type-caption); color: var(--ink-2); margin: 0; line-height: 1.4; }
.pl-confirm__note {
width: 100%;
border: 2px solid var(--paper-3);
border-radius: var(--r-input, 10px);
padding: var(--s2) var(--s3);
font: inherit;
font-size: var(--type-body);
color: var(--ink);
resize: none;
background: var(--paper-2);
}
.pl-confirm__note:focus { outline: none; border-color: var(--ink); background: var(--paper); }
.pl-confirm__actions { display: flex; gap: var(--s3); }
.pl-confirm__cancel,
.pl-confirm__remove {
flex: 1 1 0;
height: 48px;
border-radius: var(--r-button, 14px);
font-size: var(--type-body);
font-weight: 700;
cursor: pointer;
}
.pl-confirm__cancel { background: var(--paper-2); color: var(--ink); border: 1.5px solid var(--paper-3); }
.pl-confirm__remove { background: var(--ink); color: var(--paper); border: none; }
.pl-confirm__remove:disabled { background: var(--paper-3); color: var(--ink-3); cursor: not-allowed; }
/* hidden guard — the author display:flex above would otherwise override
the [hidden] attribute, leaving the modal stuck open + un-dismissable. */
.pl-confirm[hidden], .pl-confirm-scrim[hidden] { display: none; }
/* ------------------------------------------------------------------ */
/* Batch RTS — scan loop. Top progress, camera + reticle in middle, */
/* up-next hint below, Simulate + Done at the bottom. */
/* ------------------------------------------------------------------ */
.screen--rts-batch-scan {
display: flex;
flex-direction: column;
height: 100%;
background: var(--brand-primary);
color: var(--paper);
}
.batch-top {
display: grid;
grid-template-columns: 90px 1fr 90px;
align-items: center;
padding: var(--s3) var(--s4);
background: var(--brand-primary);
color: var(--gold);
}
.batch-back {
justify-self: start;
background: transparent;
border: 0;
color: var(--gold);
font-size: 15px;
font-weight: 600;
padding: var(--s2) var(--s3);
border-radius: var(--r-button);
cursor: pointer;
}
.batch-back:active { background: rgba(255, 205, 0, 0.12); }
.batch-titles { text-align: center; }
.batch-titles__label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--header-sub-fg);
margin: 0;
}
.batch-titles__progress {
font-size: 18px;
font-weight: 800;
margin: 2px 0 0;
color: var(--gold);
}
.batch-top__spacer { display: block; }
.batch-scan-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: var(--s3);
padding: var(--s3) var(--s4) var(--s3);
}
.batch-dots {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
}
.batch-dots__dot {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid var(--gold);
background: transparent;
}
.batch-dots__dot--done {
background: var(--gold);
box-shadow: 0 0 0 2px rgba(255, 205, 0, 0.22);
}
.batch-scan-stage {
flex: 1 1 auto;
position: relative;
background: #000;
border-radius: 18px;
overflow: hidden;
min-height: 200px;
}
.batch-scan-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.batch-scan-fallback {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--s4);
color: var(--paper);
}
.batch-scan-fallback__title {
font-size: 15px;
font-weight: 700;
margin: 0 0 var(--s2);
}
.batch-scan-fallback__body {
font-size: 13px;
color: var(--header-sub-fg);
margin: 0;
}
.batch-scan-hint {
position: absolute;
bottom: var(--s3);
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.55);
color: var(--paper);
padding: 6px 12px;
border-radius: 14px;
font-size: 12px;
font-weight: 600;
margin: 0;
}
.batch-upnext {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: var(--s2) var(--s3);
background: rgba(255, 255, 255, 0.06);
border-radius: 12px;
}
.batch-upnext__label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--header-sub-fg);
}
.batch-upnext__cart {
font-size: 15px;
font-weight: 700;
color: var(--gold);
}
.batch-just-scanned {
display: flex;
align-items: center;
gap: var(--s2);
padding: var(--s2) var(--s3);
background: rgba(0, 168, 90, 0.18);
border: 1px solid var(--green);
color: var(--green-soft);
border-radius: 12px;
font-size: 13px;
font-weight: 600;
animation: batch-just-in 220ms var(--ease-snap);
}
@keyframes batch-just-in {
from { transform: translateY(4px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.batch-scan-bottom {
display: flex;
flex-direction: column;
gap: var(--s2);
padding: var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
background: var(--brand-primary);
}
/* Mobile: anchor the footer to the visible viewport bottom regardless of
* how .phone is sized. iOS Safari's bottom URL bar overlays content
* inconsistently; fixed positioning takes the layout question off the
* table. Body gets bottom padding so its content isn't covered. */
@media (max-width: 480px) {
.batch-scan-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 60;
}
.batch-scan-body {
padding-bottom: calc(180px + env(safe-area-inset-bottom));
}
}
.batch-simulate {
height: 56px;
background: var(--gold);
color: var(--ink);
border: 0;
border-radius: 28px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
.batch-simulate:active { transform: scale(0.98); }
.batch-done {
height: 48px;
background: transparent;
color: var(--header-sub-fg);
border: 1.5px solid var(--brand-rule);
border-radius: 24px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.batch-done:active { background: rgba(255, 255, 255, 0.04); }
/* "Photograph the tag instead" — per-cart photo-as-verification button.
* Same outlined-container family as the /scan footer CTAs: full gold
* border, near-transparent fill, white text. Reads as an escape hatch,
* not a primary CTA. */
.batch-photo {
height: 52px;
background: rgba(255, 255, 255, 0.05);
color: var(--paper);
border: 2px solid var(--gold);
border-radius: 26px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
transition: background var(--t-instant) var(--ease-snap),
transform var(--t-instant) var(--ease-snap);
}
.batch-photo:active {
background: rgba(255, 205, 0, 0.18);
transform: scale(0.98);
}
/* Done sheet — slides up from the bottom of /rts-batch-scan when the
* rep taps "Done — N remaining." Replaces the browser confirm() so we
* can offer richer options than OK / Cancel. */
.batch-done-sheet {
position: absolute;
inset: 0;
z-index: 80;
display: flex;
align-items: flex-end;
justify-content: center;
}
.batch-done-sheet[hidden] { display: none; }
.batch-done-sheet__scrim {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
animation: scrim-in var(--t-quick) var(--ease-snap);
}
.batch-done-sheet__panel {
position: relative;
width: 100%;
background: var(--paper);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
animation: skip-card-slide 260ms var(--ease-snap);
}
.batch-done-sheet__title {
font-size: 20px;
font-weight: 800;
color: var(--ink);
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.batch-done-sheet__sub {
font-size: 13px;
color: var(--ink-3);
margin: 0 0 var(--s3);
}
.batch-done-sheet__list {
list-style: none;
margin: 0 0 var(--s4);
padding: var(--s3);
background: var(--paper-2);
border-radius: 12px;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-2);
display: flex;
flex-direction: column;
gap: 4px;
max-height: 140px;
overflow-y: auto;
}
.batch-done-sheet__list li::before {
content: '· ';
color: var(--ink-3);
}
.batch-done-sheet__btn {
width: 100%;
height: 52px;
border-radius: 26px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
margin-bottom: var(--s2);
border: 0;
letter-spacing: 0.01em;
transition: transform var(--t-instant) var(--ease-snap),
background var(--t-instant) var(--ease-snap);
}
.batch-done-sheet__btn:last-child { margin-bottom: 0; }
.batch-done-sheet__btn:active { transform: scale(0.98); }
.batch-done-sheet__btn--primary {
background: var(--gold);
color: var(--ink);
}
.batch-done-sheet__btn--secondary {
background: var(--paper);
color: var(--ink);
border: 2px solid var(--ink);
}
.batch-done-sheet__btn--ghost {
background: transparent;
color: var(--ink-3);
}
.batch-done-sheet__btn--ghost:active { background: var(--paper-2); }
/* Untagged callout on /rts-batch-scan - notag carts on the truck.
* They skip the scan loop entirely and are surfaced at Done for
* attestation; this callout keeps the rep aware they're held aside. */
.batch-untagged {
margin: 0 var(--s4) var(--s2);
padding: 6px var(--s3);
background: rgba(30, 136, 229, 0.18);
color: var(--paper);
border-left: 3px solid var(--blue);
border-radius: 0 8px 8px 0;
font-size: 12px;
font-weight: 600;
}
/* Picker sheet - lets the rep choose which cart's tag they "scanned"
* for prototype purposes. Same panel chrome as the Done sheet. */
.batch-pick-sheet,
.batch-unknown-sheet {
position: absolute;
inset: 0;
z-index: 82;
display: flex;
align-items: flex-end;
justify-content: center;
}
.batch-pick-sheet[hidden],
.batch-unknown-sheet[hidden] { display: none; }
.batch-pick-sheet__scrim {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
animation: scrim-in var(--t-quick) var(--ease-snap);
}
.batch-pick-sheet__panel {
position: relative;
width: 100%;
background: var(--paper);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
animation: skip-card-slide 260ms var(--ease-snap);
}
.batch-pick-sheet__title {
font-size: 20px;
font-weight: 800;
color: var(--ink);
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.batch-pick-sheet__sub {
font-size: 12px;
color: var(--ink-3);
margin: 0 0 var(--s4);
}
.batch-pick-sheet__list {
list-style: none;
margin: 0 0 var(--s3);
padding: 0;
display: flex;
flex-direction: column;
gap: var(--s2);
max-height: 280px;
overflow-y: auto;
}
.batch-pick-sheet__row {
width: 100%;
text-align: left;
background: var(--paper-2);
border: 0;
border-radius: 12px;
padding: var(--s3) var(--s4);
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
color: var(--ink);
cursor: pointer;
}
.batch-pick-sheet__row:active { background: var(--paper-3); }
.batch-pick-sheet__row--unknown {
background: rgba(192, 38, 211, 0.12);
color: var(--ink-2);
}
.batch-pick-sheet__row--unknown span {
font-family: var(--font-family);
font-size: 11px;
font-style: italic;
font-weight: 600;
color: #A21CAF;
margin-left: 6px;
}
.batch-pick-sheet__row--unknown:active { background: rgba(192, 38, 211, 0.22); }
/* Unknown-cart confirm sheet. Carries the soft fraud-signal flag. */
.batch-unknown-sheet__eyebrow {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #A21CAF;
margin: 0 0 var(--s2);
}
/* Done sheet groupings - tagged-unscanned (flagged) + untagged (attested). */
.batch-done-sheet__group {
margin-bottom: var(--s3);
}
.batch-done-sheet__group-label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-2);
margin: 0 0 2px;
}
.batch-done-sheet__group-note {
font-size: 11px;
font-style: italic;
color: var(--ink-3);
margin: 0 0 var(--s2);
}
/* ------------------------------------------------------------------ */
/* Trip-paused modal - full-screen overlay on /map and /list when */
/* reverb.trip.state = 'paused'. Scrim covers everything; centered */
/* card with Resume primary + End trip secondary dominates. The rep */
/* has no other actions available until they resume or end. */
/* ------------------------------------------------------------------ */
.trip-paused-modal {
position: absolute;
inset: 0;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
animation: paused-fade-in 220ms var(--ease-snap);
}
/* Explicit hidden override - class-selector display:flex above wins
* over the browser's default [hidden] { display: none } otherwise. */
.trip-paused-modal[hidden] { display: none; }
@keyframes paused-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.trip-paused-modal__scrim {
position: absolute;
inset: 0;
background: rgba(10, 10, 10, 0.7);
backdrop-filter: blur(2px);
}
.trip-paused-modal__card {
position: relative;
background: var(--paper);
border-radius: 20px;
padding: var(--s5) var(--s5) var(--s4);
text-align: center;
width: calc(100% - var(--s7));
max-width: 320px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
animation: paused-card-in 280ms var(--ease-snap);
}
@keyframes paused-card-in {
from { transform: scale(0.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.trip-paused-modal__icon {
width: 56px;
height: 56px;
margin: 0 auto var(--s3);
border-radius: 50%;
background: var(--amber);
color: var(--amber-deep);
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
}
.trip-paused-modal__title {
font-size: 24px;
font-weight: 800;
color: var(--ink);
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.trip-paused-modal__sub {
font-size: 14px;
color: var(--ink-3);
margin: 0 0 var(--s5);
}
.trip-paused-modal__sub > span {
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--ink-2);
}
.trip-paused-modal__resume {
width: 100%;
height: 56px;
background: var(--gold);
color: var(--ink);
border: 0;
border-radius: 28px;
font-size: 17px;
font-weight: 800;
letter-spacing: 0.01em;
cursor: pointer;
margin-bottom: var(--s3);
transition: transform var(--t-instant) var(--ease-snap);
}
.trip-paused-modal__resume:active { transform: scale(0.98); }
.trip-paused-modal__end {
width: 100%;
background: transparent;
color: var(--ink-2);
border: 0;
padding: var(--s2);
font-size: 14px;
font-weight: 600;
cursor: pointer;
opacity: 0.85;
}
.trip-paused-modal__end:active { opacity: 1; }
/* ------------------------------------------------------------------ */
/* Trip End summary - mockup 06, House skin. */
/* Green confirmation strip + 3 headline stats + disposition */
/* breakdown + attribution + green Done CTA. */
/* ------------------------------------------------------------------ */
.screen--trip-end {
display: flex;
flex-direction: column;
height: 100%;
background: var(--paper);
}
.trip-end-top {
display: flex;
flex-direction: column;
gap: var(--s2);
padding: var(--s3) var(--s4);
background: var(--brand-primary);
color: var(--gold);
}
.trip-end-back {
align-self: flex-start;
background: transparent;
border: 1.5px solid rgba(255, 205, 0, 0.45);
color: var(--gold);
padding: 6px 12px;
border-radius: 16px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
transition: background var(--t-instant) var(--ease-snap),
transform var(--t-instant) var(--ease-snap);
}
.trip-end-back:active {
background: rgba(255, 205, 0, 0.12);
transform: scale(0.97);
}
.trip-end-top__titles {
display: flex;
flex-direction: column;
gap: 2px;
}
.trip-end-top__store {
font-size: 12px;
font-weight: 500;
color: var(--header-sub-fg);
margin: 0;
}
.trip-end-body {
flex: 1 1 auto;
overflow-y: auto;
padding: var(--s4);
}
.trip-end-celebrate {
background: var(--green);
color: var(--paper);
border-radius: 14px;
padding: var(--s3) var(--s4);
margin-bottom: var(--s4);
}
.trip-end-celebrate__title {
font-size: 20px;
font-weight: 800;
margin: 0 0 2px;
letter-spacing: -0.01em;
}
.trip-end-celebrate__sub {
font-size: 12px;
font-weight: 500;
margin: 0;
color: var(--green-soft);
}
.trip-end-stats {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--s2);
margin-bottom: var(--s5);
}
.trip-end-stat {
background: var(--paper-2);
border-radius: 12px;
padding: var(--s3) var(--s2);
text-align: center;
}
.trip-end-stat__num {
font-size: 28px;
font-weight: 800;
color: var(--ink);
margin: 0;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.trip-end-stat__label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-2);
margin: 4px 0 2px;
}
.trip-end-stat__sub {
font-size: 10px;
font-weight: 500;
color: var(--ink-3);
margin: 0;
}
.trip-end-breakdown {
margin-bottom: var(--s5);
}
/* Corrections list — carts taken off the truck, with documented reasons. */
.trip-end-removals { margin-bottom: var(--s5); }
.trip-end-removals__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.trip-end-removal {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px var(--s3);
border-radius: 10px;
background: var(--paper-2);
border-left: 3px solid var(--amber, #FFB300);
}
.trip-end-removal__cart {
font-family: var(--font-mono);
font-size: var(--type-caption);
font-weight: 700;
color: var(--ink);
}
.trip-end-removal__reason {
font-size: var(--type-microcopy);
color: var(--ink-2);
}
.trip-end-breakdown__heading {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 var(--s2);
}
.trip-end-breakdown__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.trip-end-breakdown__empty {
font-size: 13px;
color: var(--ink-3);
margin: 0;
font-style: italic;
}
.trip-end-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--s3);
padding: 10px var(--s3);
border-radius: 10px;
background: var(--paper-2);
}
.trip-end-row__label {
font-size: 14px;
font-weight: 700;
color: var(--ink);
}
.trip-end-row__tail {
font-size: 12px;
color: var(--ink-3);
font-style: italic;
justify-self: start;
}
.trip-end-row__count {
font-size: 16px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--ink);
min-width: 24px;
text-align: right;
}
/* Per-kind background tint + count color. Mirrors the disposition
* palette used across the app for consistency at a glance. */
.trip-end-row--green { background: var(--green-soft); }
.trip-end-row--green .trip-end-row__count { color: var(--green-deep); }
.trip-end-row--amber { background: var(--amber-soft); }
.trip-end-row--amber .trip-end-row__count { color: var(--amber-deep); }
.trip-end-row--blue { background: var(--blue-soft); }
.trip-end-row--blue .trip-end-row__count { color: var(--blue-deep); }
.trip-end-row--red { background: var(--red-soft); }
.trip-end-row--red .trip-end-row__count { color: var(--red-deep); }
.trip-end-row--neutral { background: var(--paper-2); }
.trip-end-row--neutral .trip-end-row__count { color: var(--ink-2); }
.trip-end-recorded {
padding-top: var(--s3);
border-top: 1px solid var(--paper-3);
}
.trip-end-recorded__heading {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 var(--s2);
}
.trip-end-recorded__rep {
font-size: 14px;
font-weight: 700;
color: var(--ink);
margin: 0 0 2px;
}
.trip-end-recorded__id {
font-size: 11px;
font-family: var(--font-mono);
font-weight: 500;
color: var(--ink-3);
margin: 0;
}
.trip-end-footer {
padding: var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
background: var(--paper);
border-top: 1px solid var(--paper-3);
}
/* Field notes section on /trip-end - pre-fills from the running
* trip-notes (cockpit menu entry) so the rep sees what they've jotted
* and can augment before Confirm. */
.trip-end-notes {
margin-bottom: var(--s5);
padding-top: var(--s3);
border-top: 1px solid var(--paper-3);
}
.trip-end-notes__heading {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 var(--s2);
}
.trip-end-notes__input {
width: 100%;
background: var(--paper-2);
border: 1.5px solid var(--paper-3);
border-radius: 12px;
padding: var(--s3);
font-family: var(--font-family);
font-size: 14px;
font-weight: 500;
color: var(--ink);
resize: vertical;
min-height: 88px;
outline: none;
transition: border-color var(--t-instant) var(--ease-snap);
}
.trip-end-notes__input:focus { border-color: var(--blue); }
/* ------------------------------------------------------------------ */
/* /trip-notes screen - dedicated Notes entry, reachable from cockpit */
/* Trip menu anywhere in the trip. Auto-saves as you type. */
/* ------------------------------------------------------------------ */
.screen--trip-notes {
display: flex;
flex-direction: column;
height: 100%;
background: var(--paper);
}
.trip-notes-top {
display: grid;
grid-template-columns: 84px 1fr 84px;
align-items: center;
padding: var(--s3) var(--s4);
background: var(--brand-primary);
color: var(--gold);
}
.trip-notes-back {
justify-self: start;
background: transparent;
border: 0;
color: var(--gold);
font-size: 15px;
font-weight: 600;
padding: var(--s2) var(--s3);
border-radius: var(--r-button);
cursor: pointer;
}
.trip-notes-back:active { background: rgba(255, 205, 0, 0.12); }
.trip-notes-top__titles {
text-align: center;
}
.trip-notes-top__label {
font-size: 16px;
font-weight: 800;
margin: 0;
color: var(--gold);
letter-spacing: -0.01em;
}
.trip-notes-top__sub {
font-size: 11px;
font-weight: 500;
color: var(--header-sub-fg);
margin: 2px 0 0;
}
.trip-notes-top__spacer { display: block; }
.trip-notes-body {
flex: 1 1 auto;
overflow-y: auto;
padding: var(--s4);
}
.trip-notes__label {
display: block;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
margin: 0 0 var(--s2);
}
.trip-notes__input {
width: 100%;
background: var(--paper-2);
border: 1.5px solid var(--paper-3);
border-radius: 14px;
padding: var(--s4);
font-family: var(--font-family);
font-size: 15px;
font-weight: 500;
color: var(--ink);
resize: vertical;
min-height: 220px;
outline: none;
transition: border-color var(--t-instant) var(--ease-snap);
}
.trip-notes__input:focus { border-color: var(--blue); }
.trip-notes__hint {
font-size: 12px;
font-style: italic;
color: var(--ink-3);
margin: var(--s3) 0 0;
}
.trip-notes-footer {
padding: var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
background: var(--paper);
border-top: 1px solid var(--paper-3);
}
/* Hint on the photo-verification capture screen. Lives above the
* shutter; tells the rep what to aim at. */
.capture-photo-hint {
position: absolute;
bottom: var(--s4);
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.55);
color: var(--paper);
padding: 6px 12px;
border-radius: 14px;
font-size: 12px;
font-weight: 600;
margin: 0;
white-space: nowrap;
max-width: calc(100% - var(--s5));
text-align: center;
}
/* ------------------------------------------------------------------ */
/* Batch RTS — confirm roster (the list of carts being committed). */
/* Mirrors /payload row styling tuned for the confirm context. */
/* ------------------------------------------------------------------ */
.confirm-roster {
list-style: none;
margin: var(--s3) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.confirm-roster__row {
display: grid;
grid-template-columns: 20px 1fr 32px;
align-items: center;
gap: var(--s2);
padding: 10px var(--s3);
background: var(--paper-2);
border-radius: 12px;
}
.confirm-roster__check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--green);
color: var(--paper);
font-size: 12px;
font-weight: 800;
}
.confirm-roster__cart {
font-size: 14px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.01em;
}
.confirm-roster__remove {
width: 28px;
height: 28px;
border-radius: 14px;
background: transparent;
color: var(--ink-3);
border: 0;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
.confirm-roster__remove:active { background: var(--paper-3); }
/* ------------------------------------------------------------------ */
/* UTR — reason picker. Five canonical reasons; two flagged NEW. */
/* AMBER is the disposition signal, not the brand - the persistent */
/* gold rule stays under the header per brand standards §3.1. */
/* ------------------------------------------------------------------ */
.screen--utr-reason {
display: flex;
flex-direction: column;
height: 100%;
background: var(--paper);
}
.utr-top {
display: grid;
grid-template-columns: 90px 1fr 90px;
align-items: center;
padding: var(--s3) var(--s4);
background: var(--amber);
color: var(--amber-deep);
}
.utr-back {
justify-self: start;
background: transparent;
border: 0;
color: var(--amber-deep);
font-size: 15px;
font-weight: 700;
padding: var(--s2) var(--s3);
border-radius: var(--r-button);
cursor: pointer;
}
.utr-back:active { background: rgba(0, 0, 0, 0.08); }
.utr-titles { text-align: center; }
.utr-titles__label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--amber-deep);
opacity: 0.75;
margin: 0;
}
.utr-titles__cart {
font-size: 18px;
font-weight: 800;
margin: 2px 0 0;
color: var(--amber-deep);
}
.utr-top__spacer { display: block; }
.utr-body {
flex: 1 1 auto;
overflow-y: auto;
padding: var(--s4) var(--s4) var(--s5);
}
/* Section heading — big enough to land as a title, no surface so it
* never reads as tappable. Differentiates from the ink-bordered
* buttons below by being a flat heading, not a contained surface. */
.utr-intro {
font-size: 28px;
font-weight: 800;
color: var(--ink);
margin: var(--s2) 0 var(--s5);
letter-spacing: -0.01em;
}
.utr-reasons {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--s3);
}
.utr-reason {
width: 100%;
text-align: left;
background: var(--paper);
border: 2px solid var(--ink);
border-radius: 14px;
padding: var(--s4) var(--s4);
display: flex;
flex-direction: column;
gap: 4px;
cursor: pointer;
transition: border-color var(--t-instant) var(--ease-snap),
transform var(--t-instant) var(--ease-snap);
}
.utr-reason:active {
transform: scale(0.98);
border-color: var(--amber);
}
.utr-reason__title {
font-size: 17px;
font-weight: 800;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: var(--s2);
}
.utr-reason__sub {
font-size: 13px;
color: var(--ink-3);
}
/* NEW disposition: gold replaces ink on the LEFT border (thicker too)
* while top/right/bottom stay ink. Press state keeps the gold left
* intact - the NEW marker shouldn't toggle on touch. Authorship mark
* per brand standards §3.1. */
.utr-reason--new {
border-left-width: 4px;
border-left-color: var(--gold);
}
.utr-reason--new:active {
border-top-color: var(--amber);
border-right-color: var(--amber);
border-bottom-color: var(--amber);
border-left-color: var(--gold);
}
.utr-reason__badge {
display: inline-block;
background: var(--ink);
color: var(--gold);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
padding: 2px 6px;
border-radius: 4px;
}
/* ------------------------------------------------------------------ */
/* UTR — capture screen extras: skip-with-reason affordance + card. */
/* The base .capture-* chrome from /found-capture is reused. */
/* ------------------------------------------------------------------ */
/* Skip-photo affordance — promoted from a buried text-link to a labeled
* pill that sits left of the shutter. Visible the moment the rep can't
* or won't shoot; symmetric with the shutter's gold ring via the right
* balance spacer so the shutter stays optically centered. */
.capture-skip-pill {
flex: 0 0 auto;
background: rgba(255, 255, 255, 0.12);
color: var(--paper);
border: 1.5px solid rgba(255, 205, 0, 0.5);
border-radius: 22px;
padding: 10px 16px;
height: 44px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
white-space: nowrap;
}
.capture-skip-pill:active {
background: rgba(255, 205, 0, 0.18);
transform: scale(0.97);
}
/* Side wrappers keep the shutter dead-center regardless of skip-pill
* text width. Both sides claim equal flex space; the pill aligns to
* the left edge of the left side, right side stays empty for symmetry. */
.capture-bottom__side {
flex: 1 1 0;
display: flex;
align-items: center;
min-width: 0;
}
.capture-bottom__side--left { justify-content: flex-start; }
.capture-bottom__side--right { justify-content: flex-end; }
.skip-card {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
z-index: 70;
animation: skip-card-fade var(--t-quick) var(--ease-snap);
}
.skip-card[hidden] { display: none; }
@keyframes skip-card-fade {
from { background: rgba(0, 0, 0, 0); }
to { background: rgba(0, 0, 0, 0.5); }
}
.skip-card__panel {
width: 100%;
background: var(--paper);
border-top-left-radius: 18px;
border-top-right-radius: 18px;
padding: var(--s4) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
animation: skip-card-slide 260ms var(--ease-snap);
}
@keyframes skip-card-slide {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.skip-card__head {
display: flex;
justify-content: space-between;
align-items: center;
}
.skip-card__title {
font-size: 17px;
font-weight: 800;
margin: 0;
color: var(--ink);
}
.skip-card__close {
width: 32px;
height: 32px;
border-radius: 16px;
background: var(--paper-2);
border: 0;
font-size: 18px;
cursor: pointer;
color: var(--ink-2);
}
.skip-card__intro {
font-size: 13px;
color: var(--ink-3);
margin: var(--s2) 0 var(--s3);
}
.skip-card__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--s2);
}
.skip-card__option {
width: 100%;
text-align: left;
background: var(--paper-2);
border: 1.5px solid var(--paper-3);
border-radius: 12px;
padding: var(--s3) var(--s4);
font-size: 15px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
}
.skip-card__option:active {
border-color: var(--amber);
background: var(--amber-soft);
}
/* ------------------------------------------------------------------ */
/* UTR — confirm chrome (amber). Mirrors confirm-header--rts pattern. */
/* ------------------------------------------------------------------ */
.confirm-header--utr {
background: var(--amber);
color: var(--amber-deep);
}
.confirm-header--utr .confirm-header__label {
color: var(--amber-deep);
opacity: 0.8;
}
.confirm-header--utr .confirm-header__cart {
color: var(--amber-deep);
}
.confirm-header--utr .confirm-header__close {
background: rgba(0, 0, 0, 0.14);
color: var(--amber-deep);
}
/* Reason chip at the top of /utr-confirm. Shows the rep's pick from
* the picker as ambient context for the commit. */
.confirm-reason {
display: flex;
align-items: baseline;
gap: var(--s2);
padding: var(--s3) 0;
border-bottom: 1px solid var(--paper-3);
margin-bottom: var(--s3);
}
.confirm-reason__label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
}
.confirm-reason__value {
font-size: 15px;
font-weight: 700;
color: var(--amber-deep);
}
/* Skip-photo block when the rep chose Skip with reason on /utr-capture.
* Stands in for the photo preview; same vertical footprint, different
* meaning. */
.confirm-skip {
display: flex;
align-items: center;
gap: var(--s3);
padding: var(--s4);
background: var(--amber-soft);
border: 1px dashed var(--amber);
border-radius: 14px;
margin-bottom: var(--s3);
}
.confirm-skip__icon {
font-size: 28px;
opacity: 0.7;
}
.confirm-skip__title {
font-size: 15px;
font-weight: 800;
color: var(--amber-deep);
margin: 0 0 2px;
}
.confirm-skip__sub {
font-size: 13px;
color: var(--ink-2);
margin: 0;
}
/* ------------------------------------------------------------------ */
/* No-tag confirm chrome — header color per sub-type. Commit button */
/* stays green semantic (committed event). */
/* ------------------------------------------------------------------ */
.confirm-header--notag {
background: var(--blue);
color: var(--paper);
}
.confirm-header--notag .confirm-header__label,
.confirm-header--notag .confirm-header__cart { color: var(--paper); }
.confirm-header--notag .confirm-header__label { opacity: 0.85; }
.confirm-header--notag .confirm-header__close {
background: rgba(0, 0, 0, 0.18);
color: var(--paper);
}
.confirm-header--unrdbl {
background: var(--amber);
color: var(--amber-deep);
}
.confirm-header--unrdbl .confirm-header__label,
.confirm-header--unrdbl .confirm-header__cart { color: var(--amber-deep); }
.confirm-header--unrdbl .confirm-header__label { opacity: 0.85; }
.confirm-header--unrdbl .confirm-header__close {
background: rgba(0, 0, 0, 0.14);
color: var(--amber-deep);
}
.confirm-header--tagnocart {
background: var(--red);
color: var(--paper);
}
.confirm-header--tagnocart .confirm-header__label,
.confirm-header--tagnocart .confirm-header__cart { color: var(--paper); }
.confirm-header--tagnocart .confirm-header__label { opacity: 0.85; }
.confirm-header--tagnocart .confirm-header__close {
background: rgba(0, 0, 0, 0.18);
color: var(--paper);
}
/* Investigate (Flag) header - BLUE chrome per brand standards §3.3
* (Investigate chrome is always blue across all skins; semantic
* "information / flag" signal). */
.confirm-header--investigate {
background: var(--blue);
color: var(--paper);
}
.confirm-header--investigate .confirm-header__label,
.confirm-header--investigate .confirm-header__cart { color: var(--paper); }
.confirm-header--investigate .confirm-header__label { opacity: 0.9; }
.confirm-header--investigate .confirm-header__close {
background: rgba(0, 0, 0, 0.18);
color: var(--paper);
}
/* Flag textarea on /investigate-confirm - "What's the issue?" */
.flag-note__label {
display: block;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
margin: var(--s2) 0 var(--s2);
}
.flag-note__input {
width: 100%;
background: var(--paper-2);
border: 1.5px solid var(--paper-3);
border-radius: 12px;
padding: var(--s3);
font-family: var(--font-family);
font-size: 14px;
font-weight: 500;
color: var(--ink);
resize: vertical;
min-height: 90px;
outline: none;
transition: border-color var(--t-instant) var(--ease-snap);
margin-bottom: var(--s4);
}
.flag-note__input:focus { border-color: var(--blue); }
/* Note-only treatment - stands in for the photo block when the rep
* skipped capture. */
.confirm-skip--note-only {
background: var(--blue-soft);
border: 1px dashed var(--blue);
}
.confirm-skip--note-only .confirm-skip__title { color: var(--blue-deep); }
/* Capture screen — per-kind inner shutter color matches the option's
* palette so the rep visually knows which type they're capturing.
* Outer gold ring is unchanged (persistent §3.1). */
.screen--notag-blue .capture-shutter__inner { border-color: var(--blue); }
.screen--notag-amber .capture-shutter__inner { border-color: var(--amber); }
.screen--notag-red .capture-shutter__inner { border-color: var(--red); }
/* ------------------------------------------------------------------ */
/* Reverb Sonar — last-mile BLE homing (/sonar) */
/* Navigation only: FOUND routes through /scan, the identity gate. */
/* Brand flag (open): gold lock/acquisition treatment is a new use of */
/* persistent-gold — pending a brand-baseline nod. sonar/README.md. */
/* ------------------------------------------------------------------ */
.screen--sonar {
background: radial-gradient(circle at 50% 38%, var(--brand-surface), var(--brand-deep) 70%);
color: var(--paper);
}
.sonar-top {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: var(--s3);
padding: var(--s4) var(--s4) var(--s2);
}
.sonar-chip {
flex: 0 0 auto;
background: rgba(255, 205, 0, 0.14);
border: 1px solid var(--gold);
color: var(--gold);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
padding: var(--s1) 9px;
border-radius: var(--r-chip);
}
.sonar-target { flex: 1 1 auto; min-width: 0; }
.sonar-target b {
display: block;
font-size: var(--type-body);
font-weight: 700;
letter-spacing: 0.01em;
}
.sonar-target small {
font-size: var(--type-microcopy);
color: var(--ink-3);
}
.sonar-exit {
flex: 0 0 auto;
background: transparent;
border: 1px solid var(--brand-rule);
color: var(--paper-3);
border-radius: var(--r-input);
min-height: var(--tap-min);
padding: 0 var(--s3);
font-family: var(--font-family);
font-size: var(--type-caption);
font-weight: 700;
cursor: pointer;
}
/* ---- scope ---- */
.sonar-scope {
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
.sonar-radar { position: relative; width: 280px; height: 280px; }
.sonar-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid rgba(120, 150, 190, 0.28);
}
.sonar-ring--2 { inset: 46px; }
.sonar-ring--3 { inset: 92px; }
.sonar-ring--4 { inset: 130px; }
.sonar-sweep {
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(from 0deg, rgba(30, 136, 229, 0.3), transparent 45%);
animation: sonar-spin 3.4s linear infinite;
}
@keyframes sonar-spin { to { transform: rotate(360deg); } }
.sonar-self {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--blue);
border: 2px solid var(--paper);
z-index: 3;
}
.sonar-self__halo {
position: absolute;
inset: -8px;
border-radius: 50%;
background: rgba(30, 136, 229, 0.3);
animation: sonar-halo 2.2s var(--ease-soft) infinite;
}
@keyframes sonar-halo {
0% { transform: scale(0.6); opacity: 0.9; }
100% { transform: scale(2.1); opacity: 0; }
}
.sonar-heading {
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
z-index: 2;
color: var(--gold);
transition: transform var(--t-deliberate) var(--ease-snap);
}
.sonar-heading svg {
position: absolute;
left: -9px;
top: -118px;
width: 18px;
height: 18px;
}
.sonar-blip {
position: absolute;
left: 50%;
top: 50%;
z-index: 4;
transition: transform var(--t-deliberate) var(--ease-snap);
}
.sonar-blip__pin {
position: absolute;
left: -13px;
top: -13px;
width: 26px;
height: 26px;
transform: translateY(-100%);
filter: drop-shadow(0 0 6px rgba(255, 205, 0, 0.8));
}
.sonar-blip__pin path { fill: var(--gold); }
.sonar-blip__pin circle { fill: var(--gold-dark-text); }
.sonar-blip__radiate {
position: absolute;
left: -22px;
top: -22px;
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid var(--gold);
opacity: 0;
animation: sonar-radiate 1.6s var(--ease-soft) infinite;
}
@keyframes sonar-radiate {
0% { transform: scale(0.4); opacity: 0.9; }
100% { transform: scale(1.7); opacity: 0; }
}
.sonar-readout {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 5;
pointer-events: none;
}
.sonar-readout__dist {
font-size: 34px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
}
.sonar-readout__dist small {
font-size: var(--type-body);
font-weight: 400;
color: var(--ink-3);
}
.sonar-readout__temp {
font-size: var(--type-microcopy);
font-weight: 700;
letter-spacing: 0.14em;
margin-top: var(--s1);
color: var(--blue);
}
/* ---- warmth bar ---- */
.sonar-warmth {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: var(--s3);
padding: var(--s1) var(--s5) var(--s2);
}
.sonar-warmth__label {
width: 52px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--ink-3);
}
.sonar-warmth__bar {
flex: 1;
height: 8px;
border-radius: var(--r-chip);
background: var(--brand-rule);
overflow: hidden;
}
.sonar-warmth__bar i {
display: block;
height: 100%;
width: 30%;
border-radius: var(--r-chip);
background: linear-gradient(90deg, var(--blue), var(--amber), var(--gold));
transition: width var(--t-deliberate) var(--ease-soft);
}
/* ---- sim bar (off-brand 🐛, same contract as /scan simulate) ---- */
.sonar-simbar {
flex: 0 0 auto;
display: flex;
justify-content: center;
gap: var(--s2);
padding: 0 var(--s4);
}
.sonar-simbar .scan-simulate-bug { margin-top: 0; }
/* ---- footer ---- */
.sonar-foot {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: var(--s2);
padding: var(--s3) var(--s4) var(--s5);
}
.sonar-found:disabled {
background: var(--brand-rule);
color: var(--ink-3);
cursor: default;
box-shadow: none;
}
.sonar-found:disabled .commit-button__sub { color: var(--ink-3); }
.sonar-found--hot {
box-shadow: 0 0 0 3px rgba(0, 168, 90, 0.3), 0 8px 22px rgba(0, 168, 90, 0.35);
}
.sonar-links {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s3);
}
.sonar-links__hint {
font-size: var(--type-microcopy);
color: var(--ink-3);
}
.sonar-links__back {
background: none;
border: none;
color: var(--ink-3);
font-family: var(--font-family);
font-size: var(--type-caption);
font-weight: 700;
min-height: var(--tap-min);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
/* FAB placement in sonar — float clear of the FOUND footer + simbar.
* Same .cart-fab as /map; only the vertical anchor changes. */
.bottom-bar--sonar { bottom: 200px; }
/* ---- safety gate ---- */
.sonar-gate {
position: absolute;
inset: 0;
/* Above the FAB (z-25): the gate is a safety stop, nothing floats over it. */
z-index: 40;
background: rgba(8, 8, 10, 0.92);
color: var(--paper);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--s6);
}
.sonar-gate[hidden] { display: none; }
.sonar-gate__icon { width: 64px; height: 64px; color: var(--amber); margin-bottom: var(--s4); }
.sonar-gate__title { font-size: var(--type-section); margin: 0 0 var(--s2); }
.sonar-gate__body {
font-size: var(--type-caption);
color: var(--paper-3);
max-width: 280px;
margin: 0 0 var(--s6);
line-height: var(--lh-body);
}
.sonar-gate__passenger {
min-height: var(--tap-primary);
width: 250px;
border: none;
border-radius: var(--r-button);
background: var(--gold);
color: var(--gold-dark-text);
font-family: var(--font-family);
font-size: var(--type-body);
font-weight: 700;
cursor: pointer;
margin-bottom: var(--s3);
}
.sonar-gate__cancel {
min-height: var(--tap-min);
width: 250px;
background: transparent;
border: 1px solid var(--brand-rule);
border-radius: var(--r-button);
color: var(--paper-3);
font-family: var(--font-family);
font-size: var(--type-caption);
font-weight: 700;
cursor: pointer;
}
/* ------------------------------------------------------------------ */
/* Sonar quiet-lock toast on /map */
/* ------------------------------------------------------------------ */
.sonar-toast[hidden] { display: none; }
.sonar-toast {
position: absolute;
left: var(--s3);
right: var(--s3);
bottom: 84px; /* clears the + FAB row */
z-index: 30;
background: var(--brand-primary);
color: var(--paper);
border-radius: 16px;
border-left: 4px solid var(--gold);
padding: var(--s3) var(--s4);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
display: flex;
align-items: flex-start;
gap: var(--s3);
transform: translateY(140%);
transition: transform var(--t-deliberate) var(--ease-snap);
}
.sonar-toast--up { transform: translateY(0); }
.sonar-toast__icon { width: 30px; height: 30px; flex: 0 0 auto; color: var(--gold); margin-top: 2px; }
.sonar-toast__tx { flex: 1 1 auto; min-width: 0; }
.sonar-toast__tx b { display: block; font-size: var(--type-body); font-weight: 700; }
.sonar-toast__tx small { font-size: var(--type-microcopy); color: var(--ink-3); }
.sonar-toast__acts { display: flex; gap: var(--s2); margin-top: var(--s3); }
.sonar-toast__engage {
min-height: var(--tap-min);
border: none;
border-radius: var(--r-input);
background: var(--gold);
color: var(--gold-dark-text);
font-family: var(--font-family);
font-size: var(--type-caption);
font-weight: 700;
padding: 0 var(--s4);
cursor: pointer;
}
.sonar-toast__dismiss {
min-height: var(--tap-min);
background: transparent;
border: 1px solid var(--brand-rule);
border-radius: var(--r-input);
color: var(--paper-3);
font-family: var(--font-family);
font-size: var(--type-caption);
font-weight: 700;
padding: 0 var(--s4);
cursor: pointer;
}
/* ------------------------------------------------------------------ */
/* Sheet Sonar affordance */
/* ------------------------------------------------------------------ */
.sheet__sonar {
display: flex;
align-items: center;
gap: var(--s2);
width: 100%;
min-height: var(--tap-primary);
margin-top: var(--s2);
background: var(--brand-primary);
color: var(--gold);
border: 1px solid var(--gold);
border-radius: var(--r-button);
font-family: var(--font-family);
font-size: var(--type-body);
font-weight: 700;
padding: 0 var(--s4);
cursor: pointer;
}
.sheet__sonar-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.sheet__sonar-dist {
margin-left: auto;
font-size: var(--type-caption);
font-weight: 400;
color: var(--gold-soft);
}
/* ------------------------------------------------------------------ */
/* Shared location fixes on /map (World Tour component 1) */
/* Blue = informational source attribution, never a status. */
/* ------------------------------------------------------------------ */
/* "Heard" mark — the cart's latest fix came from a partner phone. */
.map__pin-fix {
position: absolute;
top: -3px;
right: -5px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--blue);
border: 2px solid var(--paper);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
pointer-events: none;
}
/* Quiet arrival pulse — a soft blue ring when a new fix lands live.
* Treatment is feedback-decides (field/customer input); this is the
* default, deliberately quieter than the gold lock toast. */
.map__pin--fix-pulse::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border-radius: 50%;
border: 2px solid var(--blue);
opacity: 0;
animation: fix-pulse 0.9s var(--ease-soft) 2;
pointer-events: none;
}
@keyframes fix-pulse {
0% { transform: scale(0.4); opacity: 0.85; }
100% { transform: scale(1.9); opacity: 0; }
}
/* Last-3 dots contributed by the crowd get a blue ring. */
.map__breadcrumb .bc-dot--shared {
stroke: var(--blue);
stroke-width: 1;
}
/* Sim trigger placement — bottom-center, clear of payload chip (left)
* and + FAB (right). */
.map__sim {
position: absolute;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
z-index: 26;
}
/* ------------------------------------------------------------------ */
/* Selection focus-dim — selecting a pin pushes everything unrelated */
/* into the background (Hondo 2026-06-07). The selected pin, its */
/* Last-3 trail, the callout, and You stay at full strength; other */
/* pins + the cluster recede. CSS-only via :has(), no JS state. */
/* ------------------------------------------------------------------ */
.map:has(.map__pin--selected) .map__pin:not(.map__pin--selected),
.map:has(.map__pin--selected) .map__cluster {
/* Faint whisper (Hondo 2026-06-10): just enough to lift the selected
* cart, but the rest of the board stays readable for comparison — the
* planning model needs the whole picture visible. (0.25→0.45→0.7.) */
opacity: 0.7;
}
.map__pin, .map__cluster {
transition: opacity var(--t-quick) var(--ease-soft);
}
/* Fix-detail callout — tap a Last-X dot for that sighting's record. */
.map__fix-label {
position: absolute;
transform: translate(-50%, calc(-100% - 14px)) scale(calc(1 / var(--map-zoom, 1)));
transform-origin: 50% 100%;
background: var(--brand-primary);
color: var(--paper);
border-radius: var(--r-card);
padding: var(--s2) var(--s3);
display: flex;
flex-direction: column;
gap: 2px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
z-index: 21;
pointer-events: none;
white-space: nowrap;
}
.map__fix-label b { font-size: var(--type-caption); font-weight: 700; }
.map__fix-label span { font-size: var(--type-microcopy); color: var(--paper-3); }
/* Trail flow — dashes drift toward the present so movement moves.
* Behind TRAIL_FLOW flag in map.html; showcase polish, off by default. */
.map__breadcrumb--flow .bc-line {
animation: bc-flow 1.1s linear infinite;
}
@keyframes bc-flow {
to { stroke-dashoffset: -2; }
}
@media (prefers-reduced-motion: reduce) {
.map__breadcrumb--flow .bc-line { animation: none; }
}
/* ------------------------------------------------------------------ */
/* Mini-peek (pinned 2026-06-07) — selection docks a single row */
/* instead of the tall peek; the map keeps the screen for inspection. */
/* World Tour divergence from the as-is peek pattern. */
/* ------------------------------------------------------------------ */
.sheet__mini {
display: none;
align-items: center;
gap: var(--s3);
width: 100%;
min-height: var(--tap-primary);
}
.sheet--peek .sheet__mini { display: flex; }
.sheet--peek .sheet__handle,
.sheet--peek .sheet__header,
.sheet--peek .sheet__chips,
.sheet--peek .sheet__view-list { display: none; }
.sheet--peek { padding: var(--s1) var(--s4); }
/* Info row — tap to expand into read-only detail. */
.sheet__mini-info {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: var(--s3);
background: transparent;
border: none;
padding: 0;
font-family: var(--font-family);
cursor: pointer;
text-align: left;
}
.sheet__mini-id {
font-size: 16px;
font-weight: 700;
color: var(--ink);
flex: 0 0 auto;
}
.sheet__mini-seen {
flex: 1 1 auto;
min-width: 0;
font-size: var(--type-caption);
color: var(--ink-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Navigate — the peek's prominent primary action (gold pill, look + go). */
.sheet__mini-nav {
flex: 0 0 auto;
min-height: 40px;
padding: 0 var(--s4);
background: var(--gold);
color: var(--ink);
border: none;
border-radius: var(--r-chip, 999px);
font-family: var(--font-family);
font-size: var(--type-caption);
font-weight: 800;
cursor: pointer;
}
.sheet__mini-nav:active { transform: scale(0.97); }
/* ------------------------------------------------------------------ */
/* UAT mode (UAT-RUNBOOK.md) — session watermark + sim suppression */
/* ------------------------------------------------------------------ */
/* UAT mode (?uat=TAG, no &sims=1): advance-critical sims become clean
* in-brand "(demo)" stand-ins (relabelled + reskinned by index.html's
* loader) so a desktop tester with no camera can complete a trip
* without hitting debug chrome. Showcase-only sims hide. */
.uat .map__sim { display: none; } /* shared-fix trigger — not needed to finish a trip */
/* The clean stand-in: reads as an in-brand control on the dark scan/
* sonar stages; the "(demo)" label is the honesty marker. Appended
* after .scan-simulate-bug so it wins on the cascade. */
.uat-demo-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--tap-primary);
padding: 0 var(--s5);
background: rgba(255, 255, 255, 0.06);
color: var(--paper);
border: 2px solid var(--gold);
border-radius: var(--r-chip);
font-family: var(--font-family);
font-size: var(--type-body);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
box-shadow: none;
cursor: pointer;
}
.uat-demo-btn:active { background: rgba(255, 205, 0, 0.18); transform: scale(0.99); }
.sonar-simbar .uat-demo-btn { min-height: var(--tap-min); padding: 0 var(--s4); font-size: var(--type-caption); }
/* Tiled ghost watermark — tester tag + date, faint and diagonal.
* Traceability for screenshots; never intercepts input. */
.uat-watermark {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
overflow: hidden;
}
.uat-watermark span {
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-28deg);
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
color: rgba(10, 10, 10, 0.07);
white-space: nowrap;
user-select: none;
}
/* Flagged-event marker on a list row (escalate-flag or Investigate).
* Blue = informational/attention, per brand §2.2 / §3.3. */
.list-row__flag {
color: var(--blue);
font-size: 19px;
font-weight: 700;
margin-right: var(--s1);
}
/* Standalone observation marker — geotagged "note this spot" flag.
* Blue (informational, §3.3), counter-scales with fit-to-trail zoom. */
.map__obs {
position: absolute;
transform: translate(-50%, -50%) scale(calc(1 / var(--map-zoom, 1)));
transform-origin: center;
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 2px;
background: var(--blue);
color: var(--paper);
border: 2px solid var(--paper);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
font-size: 14px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 7;
}
.map__obs:active { transform: translate(-50%, -50%) scale(calc(0.94 / var(--map-zoom, 1))); }
/* Shared-fix arrival callout — names the updated cart, pinned to it,
* auto-dismissing. Blue (informational). Counter-scales with zoom. */
.map__fix-arrival {
position: absolute;
transform: translate(-50%, calc(-100% - 14px)) scale(calc(1 / var(--map-zoom, 1)));
transform-origin: 50% 100%;
display: flex;
align-items: center;
gap: var(--s2);
background: var(--brand-primary);
color: var(--paper);
border-left: 3px solid var(--blue);
border-radius: var(--r-card);
padding: var(--s2) var(--s3);
font-size: var(--type-microcopy);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
white-space: nowrap;
pointer-events: none;
z-index: 22;
animation: fix-arrival-in var(--t-quick) var(--ease-snap);
}
.map__fix-arrival[hidden] { display: none; }
.map__fix-arrival b { color: var(--blue-soft); font-weight: 700; }
.map__fix-arrival__dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--blue);
box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.3);
}
@keyframes fix-arrival-in {
from { opacity: 0; transform: translate(-50%, calc(-100% - 6px)) scale(calc(1 / var(--map-zoom, 1))); }
}
/* ------------------------------------------------------------------ */
/* Trip lifecycle — pre-trip preview (off-clock planning canvas) */
/* ------------------------------------------------------------------ */
/* trip-begin: two big, clearly-headed next steps — "plan your route" gets
equal billing with "begin" (Hondo 2026-06-23). */
.tb-next {
margin-top: var(--s6);
display: flex;
flex-direction: column;
gap: var(--s6);
}
.tb-step__head {
/* Big and clear (Hondo) — sits just under the 28px page title so the two
choices read as the bold next step, not small button labels. */
font-size: 22px;
font-weight: 800;
color: var(--ink);
line-height: var(--lh-heading);
margin: 0 0 var(--s2);
}
.tb-step__sub {
font-size: var(--type-body);
color: var(--ink-2);
line-height: 1.4;
margin: 0 0 var(--s4);
}
/* "Preview the map first" — inviting secondary under its heading. */
.trip-begin__preview {
width: 100%;
min-height: var(--tap-primary);
background: var(--paper);
color: var(--ink);
border: 2px solid var(--ink);
border-radius: var(--r-button);
font-family: var(--font-family);
font-size: var(--type-section);
font-weight: 700;
cursor: pointer;
}
.trip-begin__preview:active { background: var(--paper-2); transform: scale(0.99); }
/* Preview mode on /map: hide the execution + FAB, float a Begin CTA. */
.screen--map-preview .bottom-bar { display: none; }
.map__preview-cta {
position: absolute;
left: var(--s4);
right: var(--s4);
bottom: var(--s5);
z-index: 27;
}
.map__preview-cta[hidden] { display: none; }
/* Back-to-stores affordance in the preview CTA — quiet pill above Begin,
on the dark map so it reads as chrome, not a commit. */
.map__preview-back {
display: block;
margin: 0 auto var(--s3);
padding: var(--s2) var(--s4);
background: rgba(0, 0, 0, 0.55);
color: var(--paper);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: var(--r-chip, 999px);
font-family: var(--font-family);
font-size: var(--type-caption);
font-weight: 600;
cursor: pointer;
}
.map__preview-back:active { background: rgba(0, 0, 0, 0.7); transform: scale(0.98); }
/* Electric-cart priority callout — ⚡ badge (gold = attention/authorship),
* top-left so it composes with the blue "heard" mark (top-right) and the
* center state glyph. Situational glyph channel (Hondo 2026-06-10). */
.map__pin-bolt {
position: absolute;
top: -4px;
left: -5px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--gold);
color: var(--gold-dark-text);
border: 2px solid var(--paper);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
font-size: 9px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}