/* ─────────────────────────────────────────────────────────
   CRM: THE OWNER/REP APP (screen-field-*)

   The phone-first app for builders' reps and owners (/crm/day, week,
   leads, results, brief, settings; components/crm/field). Mockup take A
   of the rep app, on the console's own tokens and primitives: a bottom
   tab bar on a phone that becomes a left rail from 721px, large titles,
   grouped lists. Every colour, size and radius reads a token from
   tokens.css; the few lengths of its own are --field-* below, derived
   from tokens.

   Three widths. A phone (to 720px) is the app as designed. A tablet
   (721-1023px) gets the rail and one centred column. A desktop (from
   1024px) gets each screen's own layout in a centred container: Today
   and the brief in two columns, the week as seven day columns, Leads
   and Results as tables, Settings and the review as one readable
   column. Nothing of the desktop layouts reaches a phone.

   Sections: shell · header · needs you · up next · today · viewing as,
   then one per screen.
   ───────────────────────────────────────────────────────── */

.crm-body {
  --field-tabbar-h: calc(var(--c-tap) + var(--c-space-3));
  --field-rail-w: var(--c-rail-width);
  --field-map-h: calc(var(--c-space-8) * 5);
  /* A desktop screen's container, and the readable column (Settings,
     the review's thread, a tablet's one column). */
  --field-content-max: calc(var(--c-side-width) * 3.3);
  --field-read-max: calc(var(--c-side-width) * 1.9);
  /* A map from a tablet up: its own aspect, never shorter or taller. */
  --field-map-min: calc(var(--c-space-8) * 9);
  --field-map-max: calc(var(--c-space-8) * 11);
  --field-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── shell ─────────────────────────────────────────────── */

.screen-field {
  min-height: var(--c-window-h);
  background: var(--c-bg);
  padding-bottom: calc(var(--field-tabbar-h) + var(--field-safe-bottom));
}

.screen-field-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--c-z-rail);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: calc(var(--field-tabbar-h) + var(--field-safe-bottom));
  padding-bottom: var(--field-safe-bottom);
  background: var(--c-bar);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 var(--c-hairline) 0 var(--c-separator);
}

.screen-field-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--c-space-hair);
  font-size: var(--c-text-2xs);
  font-weight: 500;
  color: var(--c-text-3);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
/* Help (the panic button, PanicButton.tsx PanicTab): a button dressed as a tab. */
.screen-field-tab-help {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.screen-field-tab:hover {
  color: var(--c-text-2);
}
.screen-field-tab[aria-current='page'] {
  color: var(--c-accent);
}
.screen-field-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--c-focus);
  border-radius: var(--c-radius-md);
}

.screen-field-tab-glyph {
  position: relative;
  display: inline-flex;
}
.screen-field-tab-badge {
  position: absolute;
  top: calc(-1 * var(--c-space-1));
  left: calc(100% - var(--c-space-2));
}

/* The tapped tab, while its screen loads (useLinkStatus): a soft pulse. */
.screen-field-tab-glyph.is-pending {
  animation: ui-pulse 1s var(--c-ease) infinite;
}

/* A slow navigation's hint: a thin accent bar creeping along the top. */
.screen-field-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--c-z-toast);
  height: var(--c-space-hair);
  background: var(--c-accent);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
}
.screen-field-progress.is-on {
  opacity: 1;
  animation: screen-field-progress 8s cubic-bezier(0.1, 0.6, 0.2, 1) forwards;
}
@keyframes screen-field-progress {
  from {
    transform: scaleX(0.08);
  }
  to {
    transform: scaleX(0.92);
  }
}

/* Toasts (feedback.ts): above the tab bar on a phone, bottom of the
   content beside the rail on a desktop. */
.screen-field-toasts {
  position: fixed;
  left: var(--c-space-3);
  right: var(--c-space-3);
  bottom: calc(var(--field-tabbar-h) + var(--field-safe-bottom) + var(--c-space-2));
  z-index: var(--c-z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c-space-2);
  pointer-events: none;
}
.screen-field-toast {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  width: 100%;
  max-width: calc(var(--c-side-width) + var(--c-space-8));
  min-height: var(--c-tap);
  padding: var(--c-space-2) var(--c-space-2) var(--c-space-2) var(--c-space-4);
  border-radius: var(--c-radius-lg);
  background: var(--c-text);
  color: var(--c-bg);
  font-size: var(--c-text-md);
  font-weight: 500;
  line-height: var(--c-leading-tight);
  box-shadow: var(--c-shadow-popover);
  pointer-events: auto;
  animation: screen-field-toast-in var(--c-motion) var(--c-ease);
}
.screen-field-toast--error {
  background: var(--c-danger);
  color: var(--c-on-accent);
}
.screen-field-toast-text {
  flex: 1;
  min-width: 0;
}
.screen-field-toast-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--c-control-md);
  height: var(--c-control-md);
  border: 0;
  border-radius: var(--c-radius-full);
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}
/* Undo, on a toast whose answer waits (feedback.ts deferWithUndo). */
.screen-field-toast-action {
  flex: none;
  min-height: var(--c-control-md);
  padding: 0 var(--c-space-3);
  border: 0;
  border-radius: var(--c-radius-full);
  background: color-mix(in srgb, var(--c-bg) 18%, transparent);
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.screen-field-toast-action:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}
/* The Undo bar (Undo.tsx): an answer waiting behind Undo. Bigger and
   bolder than a toast, with a full-height Undo button and a line along
   its foot running down the window (held while touched). */
.screen-field-undo {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  width: 100%;
  max-width: calc(var(--c-side-width) + var(--c-space-8));
  min-height: calc(var(--c-tap) + var(--c-space-4));
  padding: var(--c-space-2) var(--c-space-2) var(--c-space-2) var(--c-space-4);
  overflow: hidden;
  border-radius: var(--c-radius-lg);
  background: var(--c-text);
  color: var(--c-bg);
  font-size: var(--c-text-md);
  font-weight: 600;
  line-height: var(--c-leading-tight);
  box-shadow: var(--c-shadow-popover);
  pointer-events: auto;
  animation: screen-field-toast-in var(--c-motion) var(--c-ease);
}
.screen-field-undo-text {
  flex: 1;
  min-width: 0;
}
.screen-field-undo-button {
  flex: none;
  min-width: calc(var(--c-tap) * 2);
  min-height: var(--c-tap);
  padding: 0 var(--c-space-4);
  border: 0;
  border-radius: var(--c-radius-md);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font: inherit;
  font-size: var(--c-text-lg);
  font-weight: 700;
  cursor: pointer;
}
.screen-field-undo-button:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
.screen-field-undo-time {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--c-space-1);
  background: var(--c-accent);
  transform-origin: left center;
  transform: scaleX(var(--undo-from, 1));
  animation: screen-field-undo-time var(--undo-left, 10s) linear forwards;
}
.screen-field-undo[data-held] .screen-field-undo-time {
  animation: none;
}
@keyframes screen-field-undo-time {
  from {
    transform: scaleX(var(--undo-from, 1));
  }
  to {
    transform: scaleX(0);
  }
}

/* A Needs you row answered behind Undo (Undo.tsx AnsweredRow). */
.screen-field-answered {
  background: color-mix(in srgb, var(--c-success) 8%, transparent);
}
.screen-field-answered-mark {
  color: var(--c-success);
}
.screen-field-answered-undo {
  align-self: flex-start;
  min-height: var(--c-tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-accent);
  font: inherit;
  font-size: var(--c-text-md);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.screen-field-answered-undo:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
@keyframes screen-field-toast-in {
  from {
    opacity: 0;
    transform: translateY(var(--c-space-2));
  }
}
@media (min-width: 721px) {
  .screen-field-toasts {
    left: calc(var(--field-rail-w) + var(--c-space-4));
    bottom: var(--c-space-6);
  }
}
@media (prefers-reduced-motion: reduce) {
  .screen-field-toast,
  .screen-field-undo,
  .screen-field-tab-glyph.is-pending {
    animation: none;
  }
}

/* A row acted on before the server answered (feedback.ts, 'pending'). */
.screen-field-settling {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity var(--c-motion) var(--c-ease);
}

/* A route's loading.tsx (FieldSkeleton): the title and the grouped
   fills as grey shapes, the tab bar kept as it was. */
.screen-field-loading .ui-skeleton {
  display: block;
}
.screen-field-skel-head {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  padding-top: calc(var(--c-space-6) + env(safe-area-inset-top, 0px));
}
.screen-field-skel-title {
  width: 9em;
  height: var(--c-text-display);
}
.screen-field-skel-group {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
}
.screen-field-skel-fill {
  display: flex;
  flex-direction: column;
  border-radius: var(--c-radius-xl);
  background: var(--c-group-fill);
}
.screen-field-skel-row {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  min-height: var(--c-tap);
  padding: var(--c-space-3);
}
.screen-field-skel-row + .screen-field-skel-row {
  box-shadow: inset 0 var(--c-hairline) 0 var(--c-separator);
}
.screen-field-skel-dot.ui-skeleton {
  flex: none;
  width: var(--c-space-8);
  height: var(--c-space-8);
  border-radius: var(--c-radius-full);
}
.screen-field-skel-lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--c-space-2);
  min-width: 0;
}
.screen-field-skel-map.ui-skeleton {
  width: 100%;
  height: var(--field-map-h);
  border-radius: var(--c-radius-xl);
}

/* The skeleton's own container (the main's gap again), its desktop
   columns invisible below 1024px, and the pieces one width alone draws. */
.screen-field-skel {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-6);
}
.screen-field-skel-main,
.screen-field-skel-side,
.screen-field-skel-phone {
  display: contents;
}
.screen-field-skel-days,
.screen-field-skel-tiles {
  display: none;
}
.screen-field-skel-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c-space-2);
}
.screen-field-skel-column {
  align-self: stretch;
  flex: 1;
  gap: var(--c-space-2);
  min-height: calc(var(--c-space-8) * 10);
  padding: var(--c-space-2);
}
.screen-field-skel-block {
  flex: none;
}
.screen-field-skel-tile {
  gap: var(--c-space-2);
  padding: var(--c-space-3) var(--c-space-4);
}
.screen-field-skel-figure.ui-skeleton {
  width: 50%;
  height: var(--c-text-2xl);
}

@media (min-width: 721px) {
  .screen-field-skel-map.ui-skeleton {
    height: auto;
    aspect-ratio: 2 / 1;
    min-height: var(--field-map-min);
    max-height: var(--field-map-max);
  }
}

@media (min-width: 1024px) {
  .screen-field-skel-main,
  .screen-field-skel-side {
    display: flex;
    flex-direction: column;
    gap: var(--c-space-6);
    min-width: 0;
  }
  .screen-field-skel--today,
  .screen-field-skel--brief {
    display: grid;
    column-gap: var(--c-space-8);
    row-gap: var(--c-space-6);
    align-items: start;
  }
  .screen-field-skel--today {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  }
  .screen-field-skel--today > .screen-field-skel-head {
    grid-column: 1 / -1;
  }
  .screen-field-skel--today > .screen-field-skel-side {
    grid-column: 2;
    grid-row: 2 / span 2;
  }
  .screen-field-skel--brief {
    grid-template-columns: minmax(calc(var(--c-side-width) * 0.75), 1fr) minmax(0, 2.4fr);
  }
  .screen-field-skel-profile {
    align-items: center;
  }
  .screen-field-skel-phone {
    display: none;
  }
  .screen-field-skel-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--c-space-2);
  }
  .screen-field-skel-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--c-space-2);
  }
}

.screen-field-body {
  min-width: 0;
}

.screen-field-main {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-6);
  padding: 0 var(--c-space-4) var(--c-space-8);
  max-width: var(--field-content-max);
}

@media (min-width: 721px) {
  .screen-field {
    padding-bottom: 0;
    padding-left: var(--field-rail-w);
  }
  .screen-field-tabs {
    top: 0;
    right: auto;
    width: var(--field-rail-w);
    height: auto;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-auto-rows: calc(var(--c-tap) + var(--c-space-5));
    align-content: start;
    padding: var(--c-space-6) 0 0;
    background: var(--c-rail);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: inset calc(-1 * var(--c-hairline)) 0 0 var(--c-separator);
  }
  .screen-field-tab {
    font-size: var(--c-text-xs);
  }
  .screen-field-main {
    max-width: none;
    padding: 0 var(--c-space-8) var(--c-space-8);
  }
}

/* The screens' containers, centred in what the rail leaves: one
   readable column on a tablet, the full container on a desktop. The
   brief's bar and the review's stay the width of the window. */
@media (min-width: 721px) {
  .screen-field-today,
  .screen-field-week,
  .screen-field-leads,
  .screen-field-results,
  .screen-field-brief-cols,
  .screen-field-settings,
  .screen-field-brief--thread .screen-thread,
  .screen-field-skel {
    width: 100%;
    max-width: var(--field-read-max);
    margin-inline: auto;
  }
  .screen-field-leads,
  .screen-field-results,
  .screen-field-skel--list,
  .screen-field-skel--results {
    max-width: var(--field-content-max);
  }
}
@media (min-width: 1024px) {
  .screen-field-today,
  .screen-field-week,
  .screen-field-brief-cols,
  .screen-field-skel--today,
  .screen-field-skel--week,
  .screen-field-skel--brief {
    max-width: var(--field-content-max);
  }
}

/* ── header: the large title and the avatar ────────────── */

.screen-field-head {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  padding-top: calc(var(--c-space-6) + env(safe-area-inset-top, 0px));
}
.screen-field-head-row {
  display: flex;
  align-items: flex-end;
  gap: var(--c-space-3);
}
.screen-field-head-text {
  flex: 1;
  min-width: 0;
}
.screen-field-kicker {
  font-size: var(--c-text-sm);
  font-weight: 600;
  color: var(--c-text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.screen-field-title {
  font-size: var(--c-text-display);
  font-weight: 700;
  line-height: var(--c-leading-tight);
  letter-spacing: -0.02em;
}
.screen-field-meta {
  margin-top: var(--c-space-1);
  color: var(--c-text-2);
  font-size: var(--c-text-lg);
}
.screen-field-me {
  flex: none;
  border-radius: var(--c-radius-full);
}
.screen-field-me .ui-avatar {
  background: var(--c-accent-tint);
  color: var(--c-accent);
}
.screen-field-me:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}

/* ── needs you ─────────────────────────────────────────── */

.screen-field-lead {
  display: inline-grid;
  place-items: center;
  width: var(--c-space-8);
  height: var(--c-space-8);
  border-radius: var(--c-radius-full);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  flex: none;
}
.screen-field-lead--warning {
  background: var(--c-warning-tint);
  color: var(--c-warning);
}
.screen-field-lead--accent {
  background: var(--c-accent-tint);
  color: var(--c-accent);
}
.screen-field-lead--success {
  background: var(--c-success-tint);
  color: var(--c-success);
}
.screen-field-lead--danger {
  background: var(--c-danger-tint);
  color: var(--c-danger);
}

.screen-field-line {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  flex: 1;
  min-width: 0;
}
.screen-field-line-title {
  font-size: var(--c-text-lg);
  font-weight: 600;
  color: var(--c-text);
}
.screen-field-line-sub {
  color: var(--c-text-2);
  font-size: var(--c-text-md);
}
/* Needs you: two lines of a long note at most; the sheet has the rest. */
.screen-field-needs-row .screen-field-line-sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.screen-field-needs-row {
  align-items: flex-start;
  min-height: var(--c-tap);
}
.screen-field-needs-row .ui-row-leading {
  align-self: flex-start;
}
.screen-field-age {
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}
.screen-field-needs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-2);
  align-items: center;
  align-self: center;
}
.screen-field-needs-more {
  padding: var(--c-space-2) var(--c-space-3);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

/* Needs you's sheets (needs-sheets.tsx): an outcome's survey, a review's
   book / call / pass, a callback's Done, over Today. The survey sits on
   the sheet itself, as the brief's does. */
.screen-field-needs-sheet .ui-group-list {
  padding: 0;
  overflow: visible;
  background: none;
}
.screen-field-needs-sheet .screen-day-outcome {
  padding: 0;
}
.screen-field-review-sheet,
.screen-field-callback-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-4);
}
.screen-field-review-sheet-panel {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
}
.screen-field-review-sheet-panel {
  padding: var(--c-space-1) 0 var(--c-space-2);
}
.screen-field-review-other {
  align-self: flex-start;
}
/* The answer's button stays in sight, above a phone's keyboard too (the
   CRM's viewport shrinks for it): the footer sticks to the bottom of the
   scrolling sheet, over the fields that scroll under it. */
@media (max-width: 720px) {
  .screen-field-needs-sheet--footed .ui-dialog-actions {
    position: sticky;
    bottom: calc(-1 * (var(--c-space-6) + env(safe-area-inset-bottom, 0px)));
    z-index: 1;
    margin: 0 calc(-1 * var(--c-space-4)) calc(-1 * (var(--c-space-6) + env(safe-area-inset-bottom, 0px)));
    padding: var(--c-space-3) var(--c-space-4) calc(var(--c-space-6) + env(safe-area-inset-bottom, 0px));
    border-top: var(--c-hairline) solid var(--c-separator);
    background: var(--c-bg);
  }
}
.screen-field-callback-sheet-page {
  align-self: center;
}

/* A callback (CallbackRow): the row's link to its page, then Call and
   Done beside it, outside the link; under it on a phone. */
.ui-row-wrap.screen-field-callback {
  display: flex;
  align-items: center;
}
.screen-field-callback > .ui-row {
  flex: 1;
  min-width: 0;
}
.screen-field-callback > .screen-field-needs-actions {
  flex: none;
  padding-right: var(--c-space-3);
}

@media (max-width: 720px) {
  .ui-row-wrap.screen-field-callback {
    flex-wrap: wrap;
  }
  .screen-field-callback > .ui-row {
    flex-basis: 100%;
  }
  .screen-field-callback > .screen-field-needs-actions {
    width: 100%;
    padding: 0 var(--c-space-3) var(--c-space-3) calc(var(--c-space-8) + var(--c-space-3) * 2);
  }
}

/* ── up next ───────────────────────────────────────────── */

.screen-field-map {
  position: relative;
  height: var(--field-map-h);
  overflow: hidden;
  background: var(--c-surface-2);
}
.screen-field-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--c-motion) var(--c-ease);
}
/* Before the image arrives (RouteMap): a shimmer and a quiet label, the
   image laid over it and faded in once loaded. */
.screen-field-map.is-loading img {
  opacity: 0;
}
.screen-field-map-wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--c-text-3);
  font-size: var(--c-text-sm);
  background-color: var(--c-surface-2);
}
.screen-field-map.is-loading picture {
  position: absolute;
  inset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .screen-field-map-wait {
    animation: none;
  }
  .screen-field-map img {
    transition: none;
  }
}

.screen-field-next {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--c-radius-xl);
  background: var(--c-group-fill);
}
.screen-field-next-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  padding: var(--c-space-4);
}
.screen-field-next-kicker {
  font-size: var(--c-text-sm);
  font-weight: 600;
  color: var(--c-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Under way (UpNext live): ringed in green, the kicker the live dot
   and "In progress · until 5:30 PM". */
.screen-field-next--live {
  border: 2px solid color-mix(in srgb, var(--c-success) 55%, transparent);
}
.screen-field-next--live .screen-field-next-body {
  background: var(--c-success-tint);
}
.screen-field-next-kicker--live {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  color: var(--c-success);
}
/* Today's aside: the visit under way, then Up next under it. */
.screen-field-today-next {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-4);
}
.screen-field-next-name {
  font-size: var(--c-text-2xl);
  font-weight: 700;
  line-height: var(--c-leading-tight);
}
.screen-field-next-sub {
  margin-top: var(--c-space-1);
  color: var(--c-text-2);
  font-size: var(--c-text-md);
}
.screen-field-next .ui-facts {
  font-size: var(--c-text-md);
}
.screen-field-leave {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  padding: var(--c-space-2) var(--c-space-3);
  border-radius: var(--c-radius-md);
  background: var(--c-accent-tint);
  color: var(--c-accent);
  font-weight: 600;
}
.screen-field-leave-drive {
  margin-left: auto;
  font-weight: 400;
}
/* The footer strip (screens.css .screen-day-manage) reaches this body's
   wider padding and the card's larger corners. */
.screen-field-next .screen-day-manage {
  --stop-pad: var(--c-space-4);
  border-radius: 0 0 var(--c-radius-xl) var(--c-radius-xl);
}

/* ── today ─────────────────────────────────────────────── */

.screen-field-today {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-6);
}
.screen-field-route .ui-route {
  padding: var(--c-space-2) var(--c-space-3);
}
.screen-field-zone {
  padding: 0 var(--c-space-3) var(--c-space-3);
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
}

/* The two columns are wrappers a phone and a tablet do not see: their
   one column keeps the phone's order (Needs you, Up next, the route,
   the numbers). The right column's own map is a desktop's alone. */
.screen-field-today-main,
.screen-field-today-side {
  display: contents;
}
.screen-field-today-needs {
  order: 1;
}
.screen-field-today-next {
  order: 2;
}
.screen-field-today-route {
  order: 3;
}
.screen-field-today-numbers {
  order: 4;
}
.screen-field-today-map {
  display: none;
}

/* From a tablet up a map keeps its aspect (2:1, RouteMap asks for that
   shape): never squeezed into the phone's strip, never a towering one. */
@media (min-width: 721px) {
  .screen-field-map {
    height: auto;
    aspect-ratio: 2 / 1;
    min-height: var(--field-map-min);
    max-height: var(--field-map-max);
  }
}

@media (min-width: 1024px) {
  .screen-field-today {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    grid-template-areas:
      'head head'
      'main side';
    column-gap: var(--c-space-8);
    row-gap: var(--c-space-6);
    align-items: start;
  }
  .screen-field-today-head {
    grid-area: head;
  }
  .screen-field-today-main,
  .screen-field-today-side {
    display: flex;
    flex-direction: column;
    gap: var(--c-space-6);
    min-width: 0;
  }
  .screen-field-today-main {
    grid-area: main;
  }
  .screen-field-today-side {
    grid-area: side;
  }
  /* Nothing for the right column (no Up next, no map, no numbers): one. */
  .screen-field-today:has(.screen-field-today-side:empty) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'head'
      'main';
    max-width: var(--field-read-max);
  }
  .screen-field-today-side:empty {
    display: none;
  }
  .screen-field-today-map {
    display: block;
    border-radius: var(--c-radius-xl);
  }
  .screen-field-route-map--day {
    display: none;
  }
  /* The week's four tiles two by two in the narrower column. */
  .screen-field-today-side .ui-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── viewing as (an admin previewing someone's app) ────── */

/* A slim strip in the admin's indigo over the screen (FieldViewingAs):
   whose app and which builder, the way back to the console at its end.
   Sticky, so an admin never scrolls out of knowing; it takes the safe
   area the large title would have had, and the sticky bars under it
   (the brief's, Up next on a desktop) start below it. Its sheet (a
   phone) or panel (a desktop) is the Dialog primitive, restyled here.
   Nothing of it exists for a rep or an owner. */
.screen-field[data-viewas] {
  --field-viewas-h: calc(var(--c-tap) + var(--c-space-1));
  --field-viewas-top: calc(var(--field-viewas-h) + env(safe-area-inset-top, 0px));
}
.screen-field-viewas {
  position: sticky;
  top: 0;
  z-index: calc(var(--c-z-sticky) + 1);
}

.screen-field-viewas-bar {
  display: flex;
  align-items: center;
  gap: var(--c-space-1);
  min-width: 0;
  min-height: var(--field-viewas-top);
  padding: env(safe-area-inset-top, 0px) var(--c-space-2) 0;
  background: color-mix(in srgb, var(--c-admin-tint) 92%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 calc(-1 * var(--c-hairline)) 0 color-mix(in srgb, var(--c-admin) 40%, transparent);
}

.screen-field-viewas-trigger {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  margin-right: auto;
  gap: var(--c-space-3);
  min-width: 0;
  min-height: var(--c-tap);
  padding: 0 var(--c-space-3) 0 var(--c-space-1);
  border: 0;
  border-radius: var(--c-radius-full);
  background: none;
  color: var(--c-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.screen-field-viewas-trigger:hover {
  background: var(--c-hover);
}
.screen-field-viewas-trigger:active {
  background: var(--c-pressed);
}
.screen-field-viewas-trigger:focus-visible,
.screen-field-viewas-exit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}

/* Their initials on the admin's indigo, an eye on the corner. */
.screen-field-viewas-face {
  position: relative;
  display: inline-flex;
  flex: none;
}
.screen-field-viewas-face .ui-avatar {
  background: var(--c-admin);
  color: var(--c-on-accent);
}
.screen-field-viewas-eye {
  position: absolute;
  right: calc(-1 * var(--c-space-1));
  bottom: calc(-1 * var(--c-space-1));
  display: grid;
  place-items: center;
  width: calc(var(--c-space-3) + var(--c-space-hair));
  height: calc(var(--c-space-3) + var(--c-space-hair));
  border-radius: var(--c-radius-full);
  background: var(--c-bg);
  color: var(--c-admin);
  box-shadow: 0 0 0 var(--c-hairline) var(--c-separator);
}

.screen-field-viewas-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: var(--c-leading-tight);
}
.screen-field-viewas-who,
.screen-field-viewas-where {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.screen-field-viewas-who {
  font-size: var(--c-text-message);
  font-weight: 600;
}
.screen-field-viewas-kicker {
  color: var(--c-admin);
  font-weight: 500;
}
.screen-field-viewas-where {
  margin-top: var(--c-space-hair);
  color: var(--c-text-2);
  font-size: var(--c-text-sm);
}
.screen-field-viewas-unfold {
  flex: none;
  color: var(--c-text-3);
}

.screen-field-viewas-exit {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--c-space-1);
  min-height: var(--c-tap);
  padding: 0 var(--c-space-3);
  border-radius: var(--c-radius-full);
  color: var(--c-admin);
  font-size: var(--c-text-md);
  font-weight: 500;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.screen-field-viewas-exit:hover {
  background: var(--c-hover);
}
/* A phone keeps the width for the name and the builder: the glyph alone. */
@media (max-width: 720px) {
  .screen-field-viewas-exit {
    width: var(--c-tap);
    padding: 0;
    justify-content: center;
  }
  .screen-field-viewas-exit-label {
    display: none;
  }
}

/* Under the strip: the large title loses the safe area it took, and the
   sticky bars start below it. */
.screen-field[data-viewas] .screen-field-head {
  padding-top: var(--c-space-6);
}
.screen-field[data-viewas] .screen-field-brief-bar {
  top: var(--field-viewas-top);
  padding-top: var(--c-space-1);
}

/* The sheet: the Dialog on a phone, restyled as a grouped list. */
.screen-field-viewas-title {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
}
.screen-field-viewas-title .ui-icon {
  color: var(--c-admin);
}

.screen-field-viewas-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--c-radius-lg);
  background: var(--c-group-fill);
  overflow: hidden;
}
.screen-field-viewas-list[aria-busy='true'] {
  opacity: 0.6;
}
.screen-field-viewas-list:empty {
  display: none;
}
/* Hairlines between rows, inset past the avatar as iOS insets them. */
.screen-field-viewas-list > li {
  position: relative;
}
.screen-field-viewas-list > li + li::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--c-space-4);
  right: 0;
  height: var(--c-hairline);
  background: var(--c-separator);
}
.screen-field-viewas-list--people > li + li::before {
  left: calc(var(--c-space-4) + var(--c-space-8) + var(--c-space-3));
}

.screen-field-viewas-row {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  width: 100%;
  min-height: calc(var(--c-tap) + var(--c-space-2));
  padding: var(--c-space-2) var(--c-space-4);
  border: 0;
  background: none;
  color: var(--c-text);
  font: inherit;
  font-size: var(--c-text-lg);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.screen-field-viewas-row:hover {
  background: var(--c-hover);
}
.screen-field-viewas-row:active {
  background: var(--c-pressed);
}
.screen-field-viewas-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--c-focus);
}
.screen-field-viewas-row .ui-avatar {
  background: var(--c-text-4);
  color: var(--c-text);
}
.screen-field-viewas-row[aria-current='true'] .ui-avatar {
  background: var(--c-admin);
  color: var(--c-on-accent);
}
.screen-field-viewas-row--builder {
  border-radius: var(--c-radius-lg);
  background: var(--c-group-fill);
}
.screen-field-viewas-row-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: var(--c-leading-tight);
}
.screen-field-viewas-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.screen-field-viewas-row-label {
  color: var(--c-text-2);
  font-size: var(--c-text-sm);
}
.screen-field-viewas-row-hint {
  color: var(--c-text-2);
  font-size: var(--c-text-md);
}
.screen-field-viewas-row-chevron {
  flex: none;
  color: var(--c-text-3);
}
.screen-field-viewas-row-check {
  flex: none;
  color: var(--c-admin);
}

.screen-field-viewas-back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--c-space-hair);
  min-height: var(--c-tap);
  padding: 0 var(--c-space-2) 0 0;
  border: 0;
  border-radius: var(--c-radius-md);
  background: none;
  color: var(--c-accent);
  font: inherit;
  font-size: var(--c-text-lg);
  cursor: pointer;
}
.screen-field-viewas-back:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}

.screen-field-viewas-empty {
  color: var(--c-text-2);
  font-size: var(--c-text-md);
}

/* Chrome focuses the dialog, or its scrolling panel, on open: no ring
   around the whole sheet for that. */
.screen-field-viewas-sheet:focus,
.screen-field-viewas-sheet .ui-dialog-panel:focus {
  outline: none;
}
.screen-field-viewas-sheet .ui-dialog-actions .ui-button {
  color: var(--c-admin);
}

/* A desktop: no dim, the panel beside the control it came from. */
@media (min-width: 721px) {
  .screen-field-viewas-sheet::backdrop {
    background: transparent;
  }
  .screen-field-viewas-sheet .ui-dialog-panel {
    width: calc(var(--c-side-width) - var(--c-space-4));
    max-height: 80%;
    margin: 0;
    overflow-y: auto;
  }
  .screen-field-viewas-sheet {
    padding: calc(var(--field-viewas-top) + var(--c-space-1)) 0 0 calc(var(--field-rail-w) + var(--c-space-2));
  }
}

/* ── week (the Week tab, the move sheet) ───────────────── */

.screen-field-week {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-6);
}
.screen-field-week-nav {
  display: flex;
  align-items: center;
  gap: var(--c-space-1);
}
/* Full tap targets in fixed places: the chevrons never move (2026-10-01). */
.screen-field-week-nav-step {
  width: var(--c-tap);
  height: var(--c-tap);
  padding: 0;
  justify-content: center;
}
.screen-field-week-nav-label {
  min-width: 9.5em;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.screen-field-week-nav-today {
  margin-left: var(--c-space-2);
}
.screen-field-week-load {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--c-space-1) var(--c-space-3);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
}
.screen-field-week-next {
  color: var(--c-accent);
  font-weight: 600;
  text-decoration: none;
}
.screen-field-week-load-person {
  white-space: nowrap;
}
.screen-field-week-load-person.is-warning {
  color: var(--c-warning);
  font-weight: 600;
}
/* "Your route" over the owner's map: the map is theirs, the rows everyone's. */
/* db/183: time off the person blocked, above the day's visits. */
.screen-field-week-off {
  display: flex;
  align-items: baseline;
  gap: var(--c-space-2);
  padding: var(--c-space-2) var(--c-space-3);
  background: var(--c-warning-tint);
  border-radius: var(--c-radius-sm);
}

.screen-field-week-off-label {
  font-size: var(--c-text-xs);
  font-weight: 600;
  color: var(--c-warning);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.screen-field-week-off-text {
  font-size: var(--c-text-md);
  color: var(--c-text);
}

.screen-field-week-map-label {
  display: block;
  padding: var(--c-space-2) var(--c-space-3) var(--c-space-1);
  font-size: var(--c-text-xs);
  font-weight: 600;
  color: var(--c-text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* The map until its image arrives: RouteMap's own line and shimmer (.screen-field-map-wait). */
.screen-field-map img {
  position: relative;
}
.screen-field-week-day {
  scroll-margin-top: var(--c-space-4);
}

.screen-field-visit {
  display: flex;
  align-items: flex-start;
  gap: var(--c-space-2);
  min-height: var(--c-tap);
}
.screen-field-visit + .screen-field-visit {
  box-shadow: inset 0 var(--c-hairline) 0 var(--c-separator);
}
.screen-field-visit-main {
  display: flex;
  align-items: stretch;
  gap: var(--c-space-3);
  flex: 1;
  min-width: 0;
  padding: var(--c-space-3);
  color: inherit;
  text-decoration: none;
  border-radius: var(--c-radius-md);
}
a.screen-field-visit-main:hover {
  background: var(--c-hover);
}
a.screen-field-visit-main:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--c-focus);
}
.screen-field-visit-time {
  flex: 0 0 calc(var(--c-space-8) * 2);
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.screen-field-visit-time small {
  font-weight: 400;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}
.screen-field-visit-bar {
  width: 3px;
  flex: none;
  border-radius: var(--c-radius-full);
  background: var(--c-accent);
}
.screen-field-visit-bar--hold {
  background: repeating-linear-gradient(var(--c-warning) 0 4px, transparent 4px 7px);
}
.screen-field-visit-bar--phone {
  background: var(--c-success);
}
.screen-field-visit-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-1);
  margin-top: var(--c-space-1);
}
.screen-field-visit--past .screen-field-visit-main {
  opacity: 0.55;
}
/* Under way: the row on the green tint, its time in green. */
.screen-field-visit--live {
  background: var(--c-success-tint);
}
.screen-field-visit--live .screen-field-visit-time {
  color: var(--c-success);
}
.screen-field-visit-more {
  display: inline-grid;
  place-items: center;
  width: var(--c-tap);
  height: var(--c-tap);
  flex: none;
  margin: var(--c-space-1) var(--c-space-1) 0 0;
  border-radius: var(--c-radius-full);
  color: var(--c-text-2);
}
.screen-field-visit-more:hover {
  background: var(--c-hover);
  color: var(--c-text);
}
.screen-field-visit-more:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--c-focus);
}
/* Started or over: "Record outcome" where the ••• was (2026-10-01). */
.screen-field-visit-record {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-1);
  flex: none;
  min-height: var(--c-tap);
  padding: 0 var(--c-space-3);
  font-size: var(--c-text-sm);
  font-weight: 600;
  color: var(--c-accent);
  text-decoration: none;
  border-radius: var(--c-radius-md);
}
.screen-field-visit-record:hover {
  background: var(--c-hover);
}
.screen-field-visit-record:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--c-focus);
}
/* The row's number on the day's route map. */
.screen-field-visit-pin {
  display: inline-grid;
  place-items: center;
  min-width: 1.35em;
  height: 1.35em;
  margin-right: var(--c-space-1);
  padding: 0 0.3em;
  border-radius: var(--c-radius-full);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: var(--c-text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  vertical-align: 0.1em;
}
/* A row whose move or cancel is with the server: it says so. */
.screen-field-settling-label {
  align-self: center;
  flex: none;
  padding: 0 var(--c-space-3);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

/* The drive between two visits: a dashed rule with the minutes on it. */
.screen-field-drive {
  display: flex;
  align-items: center;
  padding: var(--c-space-1) var(--c-space-3) var(--c-space-1) calc(var(--c-space-8) * 2 + var(--c-space-6) + 3px);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
  background-image: repeating-linear-gradient(90deg, var(--c-separator) 0 6px, transparent 6px 10px);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 50%;
}
.screen-field-drive > span {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-1);
  padding: 0 var(--c-space-2);
  background: var(--c-group-fill);
}

/* The move sheet's pieces. */
.screen-field-sheet-note {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}
/* The move sheet opened in place, while its visit loads (FieldSheets.tsx). */
.screen-field-sheet-loading {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
}
.screen-field-sheet-loading-bar {
  display: block;
  width: 100%;
  height: var(--c-tap);
  border-radius: var(--c-radius-md);
}
.screen-field-follows {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  padding-left: var(--c-space-5);
  font-size: var(--c-text-md);
  color: var(--c-text-2);
  list-style: disc;
}
.screen-field-change {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--c-space-2);
}
.screen-field-change-side {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  padding: var(--c-space-3);
  border-radius: var(--c-radius-lg);
  background: var(--c-surface);
}
.screen-field-change-label {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}
.screen-field-change-when {
  font-weight: 600;
}
.screen-field-change-when--old {
  color: var(--c-text-3);
  text-decoration: line-through;
}
.screen-field-cancel-instead {
  margin-right: auto;
  color: var(--c-danger);
}

/* The day strip (WeekStrip) under the title, as close as when it sat
   in the header (the header's gap, not the screen's), and sticky: the
   days stay in reach while the lists scroll under them, and the chosen
   one follows. Under the admin's "Viewing as" bar when there is one. */
.screen-field-week-strip {
  position: sticky;
  top: 0;
  z-index: var(--c-z-sticky);
  margin-top: calc(var(--c-space-3) - var(--c-space-6));
  padding: var(--c-space-1) 0;
  background: color-mix(in srgb, var(--c-bg) 94%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
.screen-field[data-viewas] .screen-field-week-strip {
  top: var(--field-viewas-top);
}
/* Today keeps the filled circle; the chosen day is a ring, so another
   week's first day never reads as today (2026-10-01). */
.screen-field-week-strip .ui-calstrip-day[aria-current='date'] .ui-calstrip-date {
  background: transparent;
  color: var(--c-accent);
  box-shadow: inset 0 0 0 2px var(--c-accent);
}
.screen-field-week-strip .ui-calstrip-day.is-today .ui-calstrip-date {
  background: var(--c-accent);
  color: var(--c-on-accent);
}
/* Whether a day has anything: a dot under the date, amber when full; a day off dimmed. */
.screen-field-week-strip-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--c-radius-full);
}
.screen-field-week-strip-dot.has-some {
  background: var(--c-accent);
}
.screen-field-week-strip .ui-calstrip-day.is-full .screen-field-week-strip-dot.has-some {
  background: var(--c-warning);
}
.screen-field-week-strip .ui-calstrip-day.is-off:not([aria-current='date']) {
  opacity: 0.45;
}

@media (max-width: 720px) {
  .screen-field-week .ui-calstrip {
    margin-left: calc(-1 * var(--c-space-4));
    margin-right: calc(-1 * var(--c-space-4));
    padding-left: var(--c-space-2);
    padding-right: var(--c-space-2);
  }
}

/* A tablet's day list: the map a strip of the column's width, not a
   block taller than the visits under it. */
@media (min-width: 721px) and (max-width: 1023px) {
  .screen-field-week-map .screen-field-map {
    max-height: var(--field-map-min);
  }
}

/* The days' wrapper and the column head are a desktop's: a phone and a
   tablet read one list per day under its long title. */
.screen-field-week-days {
  display: contents;
}
.screen-field-week-short {
  display: none;
}

/* A desktop: the week as a compact calendar, one column per day. The
   strip goes (every day is in view; its links only scrolled a phone). */
@media (min-width: 1024px) {
  .screen-field-week .ui-calstrip {
    display: none;
  }
  .screen-field-week-days {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--c-space-2);
    align-items: stretch;
  }
  .screen-field-week-day {
    min-height: calc(var(--c-space-8) * 10);
  }
  .screen-field-week-day > .ui-group-list {
    flex: 1;
    border-radius: var(--c-radius-lg);
  }

  /* The head: the weekday over the date, today's in the accent circle,
     the day's load under it. */
  .screen-field-week-day > .ui-group-head {
    flex-direction: column;
    align-items: center;
    gap: var(--c-space-hair);
    min-height: 0;
    padding: 0 0 var(--c-space-2);
  }
  .screen-field-week-day .ui-group-title {
    flex: none;
  }
  .screen-field-week-day .ui-group-action {
    margin: 0;
  }
  .screen-field-week-long {
    display: none;
  }
  .screen-field-week-short {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--c-space-hair);
  }
  .screen-field-week-short-day {
    font-size: var(--c-text-xs);
    font-weight: 600;
    color: var(--c-text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .screen-field-week-short-date {
    display: grid;
    place-items: center;
    width: var(--c-control-lg);
    height: var(--c-control-lg);
    border-radius: var(--c-radius-full);
    font-size: var(--c-text-xl);
    font-weight: 600;
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
  }
  .screen-field-week-day.is-today .screen-field-week-short-day {
    color: var(--c-accent);
  }
  .screen-field-week-day.is-today .screen-field-week-short-date {
    background: var(--c-accent);
    color: var(--c-on-accent);
  }
  .screen-field-week-day.is-today > .ui-group-list {
    box-shadow: inset 0 0 0 var(--c-hairline) var(--c-accent);
  }
  .screen-field-week-load {
    justify-content: center;
    gap: 0 var(--c-space-2);
    font-size: var(--c-text-xs);
    line-height: var(--c-leading-tight);
  }
  /* Every head keeps the load line's room, so the columns line up (2026-10-01). */
  .screen-field-week-day > .ui-group-head {
    min-height: calc(var(--c-control-lg) + var(--c-text-xs) * 2 * var(--c-leading-tight) + var(--c-space-2) * 2);
    justify-content: flex-start;
  }
  .screen-field-week-day:not(:has(.screen-field-week-load)) > .ui-group-head::after {
    content: '';
    height: calc(var(--c-text-xs) * var(--c-leading-tight));
  }

  /* The route's thumbnail at the column's top, 4:3. */
  .screen-field-week-days .screen-field-week-map .screen-field-map {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 4 / 3;
  }

  /* A visit as a compact block: the kind's bar down its side, the time
     over the name, the ••• in the corner. */
  .screen-field-week-days .screen-field-visit {
    position: relative;
    min-height: 0;
  }
  .screen-field-week-days .screen-field-visit-main {
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr);
    column-gap: var(--c-space-2);
    row-gap: var(--c-space-hair);
    padding: var(--c-space-2);
  }
  .screen-field-week-days .screen-field-visit-bar {
    grid-row: 1 / span 2;
  }
  .screen-field-week-days .screen-field-visit-time {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--c-space-1);
    font-size: var(--c-text-sm);
  }
  .screen-field-week-days .screen-field-visit:has(.screen-field-visit-more) .screen-field-visit-time {
    padding-right: var(--c-control-md);
  }
  .screen-field-week-days .screen-field-visit-time small::before {
    content: '– ';
  }
  .screen-field-week-days .screen-field-line {
    grid-column: 2;
  }
  .screen-field-week-days .screen-field-line-title {
    font-size: var(--c-text-md);
  }
  .screen-field-week-days .screen-field-line-sub {
    font-size: var(--c-text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .screen-field-week-days .screen-field-visit-record {
    width: 100%;
    min-height: var(--c-control-md);
    padding: 0 var(--c-space-2) var(--c-space-1);
    font-size: var(--c-text-xs);
  }
  .screen-field-week-days .screen-field-visit:has(.screen-field-visit-record) {
    flex-direction: column;
    gap: 0;
  }
  .screen-field-week-days .screen-field-visit:has(.screen-field-visit-record) .screen-field-visit-main {
    width: 100%;
  }
  .screen-field-week-days .screen-field-drive > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .screen-field-week-days .screen-field-visit-more {
    position: absolute;
    top: var(--c-space-1);
    right: var(--c-space-1);
    width: var(--c-control-md);
    height: var(--c-control-md);
    margin: 0;
  }
  .screen-field-week-days .screen-field-drive {
    justify-content: center;
    padding: var(--c-space-hair) var(--c-space-2);
    font-size: var(--c-text-xs);
  }
  .screen-field-week-days .ui-empty {
    padding: var(--c-space-4) var(--c-space-2);
    font-size: var(--c-text-sm);
    text-align: center;
  }
}

/* 1024 to 1279: seven narrow columns. The end time goes (the row's
   tooltip keeps it), names and subs stay on one line. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .screen-field-week-days .screen-field-visit-time small {
    display: none;
  }
  .screen-field-week-days .screen-field-line-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ── leads (the owner's Leads tab) ─────────────────────── */

.screen-field-leads {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-5);
}
.screen-field-leads-search .ui-search {
  display: flex;
  width: 100%;
}
.screen-field-leads-search .ui-search-input {
  height: var(--c-control-lg);
  font-size: var(--c-text-lg);
}
/* Asking again as they type: a spinner where the magnifier was. */
.screen-field-leads-search {
  position: relative;
}
.screen-field-leads-search.is-pending .ui-search-glyph {
  visibility: hidden;
}
.screen-field-leads-search-spin {
  position: absolute;
  top: 50%;
  left: calc(var(--c-space-2) + var(--c-space-hair) / 2);
  margin-top: calc(var(--c-space-3) / -2);
  color: var(--c-text-3);
}
/* The stage chips: one sideways strip on a phone, wrapped on a wide screen. */
.screen-field-leads-chips {
  display: flex;
  gap: var(--c-space-2);
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--c-space-4));
  padding: 0 var(--c-space-4) var(--c-space-hair);
  scroll-padding-inline: var(--c-space-4);
}
.screen-field-leads-chips::-webkit-scrollbar {
  display: none;
}
.screen-field-leads-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--c-space-1);
  min-height: var(--c-control-lg);
  padding: 0 var(--c-space-4);
  border-radius: var(--c-radius-full);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--c-text-md);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.screen-field-leads-chip:hover {
  background: var(--c-surface-2);
}
.screen-field-leads-chip[aria-current='page'] {
  background: var(--c-text);
  color: var(--c-bg);
}
.screen-field-leads-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}
.screen-field-leads-chip-n {
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}
.screen-field-leads-chip[aria-current='page'] .screen-field-leads-chip-n {
  color: inherit;
  opacity: 0.7;
}
/* Needs you: Today's word, in its warning tone. */
.screen-field-leads-chip--needs:not([aria-current='page']) {
  background: var(--c-warning-tint);
}
.screen-field-leads-chip--needs:not([aria-current='page']) .screen-field-leads-chip-n {
  color: var(--c-warning);
  font-weight: 600;
}
/* Under a search, a chip with nothing in it steps back. */
.screen-field-leads-chip--empty {
  color: var(--c-text-3);
  background: transparent;
  box-shadow: inset 0 0 0 var(--c-hairline) var(--c-separator);
}
.screen-field-leads-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
}
.screen-field-leads-note {
  color: var(--c-text-3);
  font-size: var(--c-text-sm);
}
.screen-field-leads-list {
  border-radius: var(--c-radius-xl);
}
.screen-field-leads-row {
  align-items: flex-start;
  padding-block: var(--c-space-3);
}
.screen-field-leads-row .ui-row-leading {
  align-self: flex-start;
}
.screen-field-leads-text {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  flex: 1;
  min-width: 0;
}
.screen-field-leads-top {
  display: flex;
  align-items: baseline;
  gap: var(--c-space-2);
}
.screen-field-leads-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--c-text-lg);
  font-weight: 600;
  color: var(--c-text);
}
.screen-field-leads-sub {
  color: var(--c-text-2);
  font-size: var(--c-text-md);
}
.screen-field-leads-state {
  display: flex;
  align-items: baseline;
  gap: var(--c-space-1) var(--c-space-2);
  font-size: var(--c-text-sm);
}
.screen-field-leads-pill {
  flex: none;
}
.screen-field-leads-context {
  flex: 1;
  min-width: 0;
  color: var(--c-text-3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.screen-field-leads-context.screen-field-leads-context--due {
  color: var(--c-warning);
  font-weight: 500;
}
.screen-field-leads-more {
  display: flex;
  justify-content: center;
}

@media (min-width: 721px) {
  .screen-field-leads-chips {
    flex-wrap: wrap;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
}

/* The table's head and its own cells are a desktop's. */
.screen-field-leads-cols,
.screen-field-leads-cell {
  display: none;
}

/* A desktop: the list as a table. Each row's text is a grid on one
   template (the head uses it too, inset past the avatar and short of
   the chevron, so the columns line up): the lead over their project,
   the town, the stage, the latest, the estimate, when. */
@media (min-width: 1024px) {
  .screen-field-leads {
    --field-leads-cols: minmax(0, 1.5fr) minmax(0, 0.9fr) calc(var(--c-space-8) * 3.25) minmax(0, 2.4fr) calc(var(--c-space-8) * 2.25)
      calc(var(--c-space-8) * 2.25);
  }
  .screen-field-leads-search {
    max-width: calc(var(--c-side-width) * 1.2);
  }
  .screen-field-leads-cols {
    display: block;
    padding: 0 calc(var(--c-space-3) * 2 + var(--c-space-3) + var(--c-space-hair)) 0 calc(var(--c-space-3) * 2 + var(--c-space-8) + var(--c-space-2));
    margin-bottom: calc(-1 * var(--c-space-1));
    color: var(--c-text-2);
    font-size: var(--c-text-sm);
    font-weight: 600;
  }
  .screen-field-leads-cols-text,
  .screen-field-leads-text {
    display: grid;
    grid-template-columns: var(--field-leads-cols);
    column-gap: var(--c-space-4);
    align-items: center;
  }
  .screen-field-leads-cols-num,
  .screen-field-leads-cell--est,
  .screen-field-leads-text .screen-field-age {
    justify-self: end;
    text-align: right;
  }
  .screen-field-leads-row {
    align-items: center;
    padding-block: var(--c-space-2);
  }
  .screen-field-leads-row .ui-row-leading {
    align-self: center;
  }
  /* A row with no brief to open has no chevron: keep its columns in line. */
  .screen-field-leads-row:not(.ui-row--link) .screen-field-leads-text {
    margin-right: calc(var(--c-space-3) + var(--c-space-3) + var(--c-space-hair));
  }
  .screen-field-leads-top,
  .screen-field-leads-state {
    display: contents;
  }
  .screen-field-leads-sub {
    display: none;
  }
  .screen-field-leads-cell {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c-text-2);
    font-size: var(--c-text-md);
  }
  .screen-field-leads-name {
    grid-column: 1;
    grid-row: 1;
  }
  .screen-field-leads-cell--job {
    grid-column: 1;
    grid-row: 2;
    font-size: var(--c-text-sm);
  }
  .screen-field-leads-cell--town {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .screen-field-leads-pill {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: start;
  }
  .screen-field-leads-context {
    grid-column: 4;
    grid-row: 1 / span 2;
    font-size: var(--c-text-md);
    color: var(--c-text-2);
  }
  .screen-field-leads-cell--est {
    grid-column: 5;
    grid-row: 1 / span 2;
    color: var(--c-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .screen-field-leads-text .screen-field-age {
    grid-column: 6;
    grid-row: 1 / span 2;
  }
}

/* ── results (the owner's Results tab) ─────────────────── */

.screen-field-results {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-5);
}
.screen-field-results-note,
.screen-field-results-foot {
  color: var(--c-text-3);
  font-size: var(--c-text-sm);
}
.screen-field-results-note {
  margin-top: calc(-1 * var(--c-space-2));
}
.screen-field-results-tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.screen-field-results-cut {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
}
.screen-field-results-h {
  font-size: var(--c-text-2xl);
  font-weight: 700;
  line-height: var(--c-leading-tight);
}
.screen-field-results-list {
  display: flex;
  flex-direction: column;
  border-radius: var(--c-radius-xl);
  background: var(--c-group-fill);
  overflow: hidden;
}
.screen-field-results-card {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  padding: var(--c-space-4);
}
.screen-field-results-card + .screen-field-results-card {
  box-shadow: inset 0 var(--c-hairline) 0 var(--c-separator);
}
.screen-field-results-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--c-space-2);
}
.screen-field-results-card-text {
  flex: 1;
  min-width: 0;
}
.screen-field-results-name {
  font-size: var(--c-text-lg);
  font-weight: 600;
  color: var(--c-text);
}
.screen-field-results-sub {
  margin-top: var(--c-space-hair);
  color: var(--c-text-2);
  font-size: var(--c-text-md);
}
.screen-field-results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--c-space-3) var(--c-space-2);
  margin: 0;
}
.screen-field-results-cell {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  min-width: 0;
}
.screen-field-results-cell dt {
  color: var(--c-text-2);
  font-size: var(--c-text-sm);
}
.screen-field-results-value {
  margin: 0;
  font-size: var(--c-text-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.screen-field-results-value--accent {
  color: var(--c-accent);
}
.screen-field-results-value--warn,
.screen-field-results-warn {
  color: var(--c-warning);
}
.screen-field-results-warn {
  margin-top: var(--c-space-hair);
  font-size: var(--c-text-sm);
  font-weight: 600;
}

@media (min-width: 721px) {
  .screen-field-results-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .screen-field-results-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .screen-field-results-cut .ui-segmented,
  .screen-field-results .screen-field-head .ui-segmented {
    max-width: calc(var(--c-side-width) * 1.2);
  }
}

/* The table's head is a desktop's. */
.screen-field-results-cols {
  display: none;
}

/* A desktop: the cards as a table's rows on one template (the head's
   too): the ad or campaign and its mark, then the six numbers, right
   aligned. The cut's title and its control share a line. */
@media (min-width: 1024px) {
  .screen-field-results {
    --field-results-cols: minmax(0, 2.4fr) minmax(0, 6fr);
  }
  .screen-field-results-cut {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--c-side-width) * 1.2));
    align-items: center;
    gap: var(--c-space-3) var(--c-space-4);
  }
  .screen-field-results-cut > :nth-child(n + 3) {
    grid-column: 1 / -1;
  }
  .screen-field-results-cols,
  .screen-field-results-card {
    display: grid;
    grid-template-columns: var(--field-results-cols);
    column-gap: var(--c-space-4);
    align-items: center;
  }
  .screen-field-results-cols {
    margin-bottom: calc(-1 * var(--c-space-2));
    padding: 0 var(--c-space-4);
    color: var(--c-text-2);
    font-size: var(--c-text-sm);
    font-weight: 600;
  }
  .screen-field-results-cols-nums,
  .screen-field-results-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--c-space-2);
    text-align: right;
  }
  .screen-field-results-card {
    padding: var(--c-space-3) var(--c-space-4);
  }
  .screen-field-results-card-head {
    flex-wrap: wrap;
    row-gap: var(--c-space-1);
  }
  .screen-field-results-cell {
    align-items: flex-end;
  }
  /* The labels are the head's now; a screen reader keeps them. */
  .screen-field-results-cell dt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .screen-field-results-value {
    font-size: var(--c-text-lg);
  }
}

/* ── brief (the lead brief, the owner's review) ────────── */

/* The bar: back to where they came from, the builder's name centred. */
.screen-field-brief {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-5);
}
.screen-field-brief-bar {
  position: sticky;
  top: 0;
  z-index: var(--c-z-sticky);
  display: grid;
  grid-template-columns: minmax(calc(var(--c-tap) * 2), 1fr) minmax(0, max-content) minmax(calc(var(--c-tap) * 2), 1fr);
  align-items: center;
  margin: 0 calc(-1 * var(--c-space-4));
  padding: calc(var(--c-space-1) + env(safe-area-inset-top, 0px)) var(--c-space-2) var(--c-space-1);
  background: var(--c-bar);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 calc(-1 * var(--c-hairline)) 0 var(--c-separator);
}
.screen-field-brief-back {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: var(--c-tap);
  padding-right: var(--c-space-2);
  border-radius: var(--c-radius-md);
  color: var(--c-accent);
  font-size: var(--c-text-lg);
  text-decoration: none;
}
.screen-field-brief-bar-end {
  justify-self: end;
  padding: 0 var(--c-space-2);
}
.screen-field-brief-back:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}
.screen-field-brief-bar-title {
  overflow: hidden;
  font-size: var(--c-text-lg);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen-field-brief-cols,
.screen-field-brief-lead,
.screen-field-brief-rest {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-5);
  min-width: 0;
}
.screen-field-brief-lead .ui-profile {
  padding-top: var(--c-space-2);
}
.screen-field-brief-lead .ui-profile-line {
  font-size: var(--c-text-lg);
}

/* Call, Directions, Move: the Contacts card's tiles, icon over word. */
.screen-field-brief-tiles {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--c-space-2);
}
.screen-field-brief-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--c-space-1);
  min-height: calc(var(--c-tap) + var(--c-space-5));
  padding: var(--c-space-2) var(--c-space-1);
  border-radius: var(--c-radius-lg);
  background: var(--c-group-fill);
  color: var(--c-accent);
  font-size: var(--c-text-sm);
  font-weight: 500;
  text-decoration: none;
}
.screen-field-brief-tile:hover {
  background: var(--c-hover);
}
.screen-field-brief-tile:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}
.screen-field-brief-tile[aria-disabled='true'] {
  color: var(--c-text-4);
  background: var(--c-group-fill);
}

/* The number and the email under the tiles, to tap or read out (2026-10-01). */
.screen-field-brief-reach {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--c-space-1) var(--c-space-4);
  margin: 0;
  font-size: var(--c-text-md);
  text-align: center;
}
.screen-field-brief-reach a {
  color: var(--c-accent);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.screen-field-brief-reach a:hover {
  text-decoration: underline;
}
.screen-field-brief-reach-note {
  flex-basis: 100%;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}
/* The Owner review pill opens the review. */
.screen-field-brief-pill-link {
  text-decoration: none;
  border-radius: var(--c-radius-full);
}
.screen-field-brief-pill-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}
/* Waiting on you: what is owed, in the accent, the ask under it. */
.screen-field-brief-open .ui-row-label {
  color: var(--c-accent);
}
.screen-field-brief-open .ui-row-leading {
  color: var(--c-accent);
}
.screen-field-brief-open .ui-row-value {
  font-weight: 400;
  color: var(--c-text-2);
}
/* The booking sheet's picker. */
.screen-field-brief-book {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--c-space-3);
  min-width: 0;
}

/* The rows that do something read in the accent (Cancel in red). */
.screen-field-brief-act .ui-row-label {
  color: var(--c-accent);
}
.screen-field-brief-act .ui-row-leading {
  color: var(--c-accent);
}
.screen-field-brief-act--danger .ui-row-label,
.screen-field-brief-act--danger .ui-row-leading {
  color: var(--c-danger);
}
.screen-field-brief-pills {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--c-space-1);
}

/* Where: the map edge to edge in the group's fill. */
.screen-field-brief-map {
  padding: 0;
  overflow: hidden;
}
.screen-field-brief-map .screen-field-map {
  width: 100%;
}
.screen-field-brief-map-link {
  display: block;
}
.screen-field-brief-map-link:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: -3px;
}
/* The source's name is in the open panel below; the bar's chip only truncated it ("Dir…"). */
.screen-field-brief-ad .ui-marker.is-open .ui-marker-headline {
  display: none;
}
.screen-field-brief-address .ui-row-label {
  white-space: normal;
  color: var(--c-text);
}
.screen-field-brief-address .ui-row-leading {
  color: var(--c-accent);
}

/* What they want: the design on top, the estimate as rows, the photos. */
.screen-field-brief-design {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.screen-field-brief-design img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--c-surface-2);
}
.screen-field-brief-design-tag {
  position: absolute;
  top: var(--c-space-2);
  left: var(--c-space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-1);
  padding: var(--c-space-hair) var(--c-space-2);
  border-radius: var(--c-radius-full);
  background: var(--c-bar);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  font-size: var(--c-text-sm);
  font-weight: 600;
}
.screen-field-brief-total .ui-row-label,
.screen-field-brief-total .ui-row-value {
  font-weight: 700;
  color: var(--c-text);
}
.screen-field-brief-photos {
  display: inline-flex;
  gap: var(--c-space-1);
}
.screen-field-brief-photos img {
  display: block;
  width: var(--c-space-8);
  height: var(--c-space-8);
  border-radius: var(--c-radius-sm);
  object-fit: cover;
  background: var(--c-surface-2);
}

/* The card: values wrap, the long ones (project, notes) stack. */
.screen-field-brief-fact .ui-row-value {
  white-space: normal;
}
.screen-field-brief-fact.ui-row--stack .ui-row-value {
  color: var(--c-text);
  font-weight: 500;
}

/* The last message: who, what they said, when. */
.screen-field-brief-last .ui-row-value {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  white-space: normal;
}
.screen-field-brief-who {
  font-weight: 600;
  color: var(--c-text);
}
.screen-field-brief-said {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--c-text);
}
.screen-field-brief-when {
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
}
.screen-field-brief-ad {
  min-width: 0;
}
/* The thread's lead marker (ThreadMarker) inside the group's fill: full
   width, no thread margins, its panel lifted off the fill. */
.screen-field-brief-ad .ui-marker {
  flex: 1;
  margin: 0;
}
.screen-field-brief-ad .ui-marker-panel {
  max-width: none;
  margin-left: 0;
  background: var(--c-raised);
}

.screen-field-brief-note form {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  width: 100%;
}
.screen-field-brief-note .ui-button {
  align-self: flex-end;
}

/* The outcome sheet: the day's outcome rows without their own padding. */
.screen-field-brief-sheet .ui-group-list {
  padding: var(--c-space-1);
  overflow: visible;
  background: none;
}
.screen-field-brief-sheet .screen-day-outcome {
  padding: 0;
}

/* The whole thread (?thread=1). */
.screen-field-brief--thread .screen-thread {
  padding: 0;
}

/* A desktop: the summary on the left, in view while the rest scrolls;
   the rest in two balanced columns from 1200px (a group never splits). */
@media (min-width: 1024px) {
  .screen-field-brief-cols {
    display: grid;
    grid-template-columns: minmax(calc(var(--c-side-width) * 0.75), 1fr) minmax(0, 2.4fr);
    column-gap: var(--c-space-8);
    align-items: start;
  }
  .screen-field-brief-lead {
    position: sticky;
    top: calc(var(--c-tap) + var(--c-space-2) + var(--c-space-5));
  }
  .screen-field[data-viewas] .screen-field-brief-lead {
    top: calc(var(--field-viewas-top) + var(--c-tap) + var(--c-space-2) + var(--c-space-5));
  }
}
@media (min-width: 1200px) {
  .screen-field-brief-rest {
    display: block;
    columns: 2;
    column-gap: var(--c-space-5);
  }
  .screen-field-brief-rest > * {
    break-inside: avoid;
    margin-bottom: var(--c-space-5);
  }
}
@media (min-width: 721px) {
  .screen-field-brief-bar {
    margin: 0 calc(-1 * var(--c-space-8));
    padding-inline: var(--c-space-4);
  }
}

/* The owner's review inside the app: its answers sit above the tab bar. */
.screen-field-review .screen-review {
  max-width: none;
}
.screen-field-review .screen-review-body {
  padding-inline: 0;
}
@media (max-width: 720px) {
  .screen-field-review .screen-review-decide {
    bottom: calc(var(--field-tabbar-h) + var(--field-safe-bottom));
    margin: 0 calc(-1 * var(--c-space-4));
  }
}
@media (min-width: 721px) {
  .screen-field-review .screen-review {
    max-width: calc(var(--c-side-width) * 1.5);
  }
}

/* ── the callback page (CallbackPanel: /crm/callbacks/<task>) ─── */

/* "Call them back", its own page where the owner's text lands: the
   brief's bar (back, "Callback", Card), then who and why with one big
   Call, their card a row under it, the short version, then "How did the
   call go?" as six large choices, the one picked opening what it needs.
   One column on a phone; from 1024px the who and the how side by side,
   the who sticky while the how grows (the slot picker). */
.screen-field-callback-page {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-5);
}
/* Its own page: the panel is the page's one card, so no ring to set it
   apart from anything (the ring was for sitting on top of the brief). */
.screen-field-callback-page .screen-callback,
.screen-field-callback-page .screen-callback.is-done {
  outline: none;
}
.screen-callback {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-5);
  padding: var(--c-space-4);
  margin: 0 calc(-1 * var(--c-space-2));
  border-radius: var(--c-radius-xl);
  background: var(--c-group-fill);
  outline: 2px solid color-mix(in srgb, var(--c-accent) 35%, transparent);
  outline-offset: -2px;
}
.screen-callback.is-done {
  outline-color: color-mix(in srgb, var(--c-success) 40%, transparent);
}
.screen-callback-who,
.screen-callback-how {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  min-width: 0;
}
.screen-callback-kicker {
  display: flex;
  align-items: center;
  gap: var(--c-space-1);
  font-size: var(--c-text-sm);
  font-weight: 600;
  color: var(--c-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.screen-callback-title {
  font-size: var(--c-text-2xl);
  font-weight: 700;
  line-height: var(--c-leading-tight);
}
.screen-callback-why {
  font-size: var(--c-text-lg);
  line-height: var(--c-leading);
}
.screen-callback-summary {
  color: var(--c-text-2);
  font-size: var(--c-text-md);
}
.screen-callback-tries {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}
.screen-callback-tries li {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
}
.screen-callback-call {
  min-height: calc(var(--c-tap) + var(--c-space-3));
  font-size: var(--c-text-lg);
}
.screen-callback-dnc {
  color: var(--c-danger);
  font-weight: 600;
}
/* "View Megan's card": the brief, a quiet full-width row under Call. */
.screen-callback-card {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  min-height: var(--c-tap);
  padding: 0 var(--c-space-3);
  border-radius: var(--c-radius-lg);
  background: var(--c-raised);
  color: var(--c-accent);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--c-motion-fast) var(--c-ease);
}
.screen-callback-card:hover {
  background: var(--c-hover);
}
.screen-callback-card:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}
.screen-callback-card-text {
  flex: 1;
  min-width: 0;
}
.screen-callback-card-chevron {
  color: var(--c-text-3);
}
/* The short version, compact: raised off the panel's fill. */
.screen-callback-short .ui-group-list {
  background: var(--c-raised);
}
.screen-callback-short .ui-short-version-text {
  font-size: var(--c-text-md);
}

.screen-callback-outcomes {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.screen-callback-legend {
  padding: 0;
  margin-bottom: var(--c-space-2);
  font-size: var(--c-text-lg);
  font-weight: 700;
}
.screen-callback-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--c-space-2);
}
/* Today's sheet: one column of shorter rows. */
.screen-callback-grid--compact {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--c-space-1);
}
.screen-callback-grid--compact .screen-callback-choice {
  min-height: var(--c-tap);
  padding: var(--c-space-2) var(--c-space-3);
}
.screen-callback-choice {
  /* Icon | label over description. The two text rows hug the top with a
     fixed small gap, whatever the text's length and the button's height
     (align-content: start keeps a tall button's spare space below). */
  display: grid;
  grid-template-columns: var(--c-space-6) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    'icon label'
    'icon sub';
  align-content: start;
  align-items: start;
  column-gap: var(--c-space-3);
  row-gap: var(--c-space-hair);
  min-height: calc(var(--c-tap) * 1.5);
  padding: var(--c-space-3);
  border: 1px solid var(--c-separator);
  border-radius: var(--c-radius-lg);
  background: var(--c-raised);
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  transition: background var(--c-motion-fast) var(--c-ease), border-color var(--c-motion-fast) var(--c-ease);
}
.screen-callback-choice:hover {
  background: var(--c-hover);
}
.screen-callback-choice:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}
.screen-callback-choice:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.screen-callback-choice-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  /* One label line tall, so the glyph sits level with the label. */
  height: calc(var(--c-text-lg) * var(--c-leading-tight));
  overflow: visible;
  color: var(--c-accent);
}
.screen-callback-choice--danger .screen-callback-choice-icon {
  color: var(--c-danger);
}
.screen-callback-choice-label {
  grid-area: label;
  font-size: var(--c-text-lg);
  font-weight: 600;
  line-height: var(--c-leading-tight);
}
.screen-callback-choice-sub {
  grid-area: sub;
  font-size: var(--c-text-sm);
  line-height: var(--c-leading-tight);
  color: var(--c-text-2);
}
.screen-callback-choice[aria-checked='true'] {
  border-color: var(--c-accent);
  background: var(--c-accent-tint);
  box-shadow: inset 0 0 0 1px var(--c-accent);
}
.screen-callback-choice--danger[aria-checked='true'] {
  border-color: var(--c-danger);
  background: var(--c-danger-tint);
  box-shadow: inset 0 0 0 1px var(--c-danger);
}

.screen-callback-step {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
}
.screen-callback-step-label {
  font-weight: 600;
}
.screen-callback-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-2);
}
.screen-callback-chip {
  min-height: var(--c-tap);
  padding: 0 var(--c-space-4);
  border: 1px solid var(--c-separator);
  border-radius: var(--c-radius-full);
  background: var(--c-raised);
  color: var(--c-text);
  font-size: var(--c-text-md);
  cursor: pointer;
}
.screen-callback-chip:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}
.screen-callback-chip[aria-checked='true'] {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.screen-callback-hint {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}
.screen-callback-hint--danger {
  color: var(--c-danger);
}

/* Done: a check (or the voicemail, a try logged), what was recorded. */
.screen-callback-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c-space-2);
  padding: var(--c-space-4) 0;
  text-align: center;
}
.screen-callback-done-line,
.screen-callback-done-sub {
  max-width: 34ch;
}
.screen-callback-done-mark {
  margin-bottom: var(--c-space-1);
}
.screen-callback-done-next {
  align-self: stretch;
}
.screen-callback-done-mark {
  display: grid;
  place-items: center;
  width: calc(var(--c-space-8) + var(--c-space-2));
  height: calc(var(--c-space-8) + var(--c-space-2));
  border-radius: var(--c-radius-full);
  background: var(--c-success);
  color: var(--c-on-accent);
  animation: screen-callback-pop var(--c-motion) var(--c-ease);
}
.screen-callback-done.is-open .screen-callback-done-mark {
  background: var(--c-accent);
}
/* Withdrawn: nothing the owner did, so no success colour. */
.screen-callback-done.is-withdrawn .screen-callback-done-mark {
  background: var(--c-surface-2);
  color: var(--c-text-2);
}
.screen-callback-done-title {
  font-size: var(--c-text-xl);
  font-weight: 700;
}
.screen-callback-done-line {
  font-size: var(--c-text-lg);
}
.screen-callback-done-sub {
  margin-bottom: var(--c-space-2);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}
.screen-callback-saving {
  color: var(--c-text-3);
}
@keyframes screen-callback-pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .screen-callback-done-mark {
    animation: none;
  }
}

@media (min-width: 1024px) {
  .screen-callback {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    column-gap: var(--c-space-8);
    align-items: start;
    margin: 0;
    padding: var(--c-space-6);
  }
  .screen-callback-who {
    position: sticky;
    top: calc(var(--c-tap) + var(--c-space-2) + var(--c-space-5));
  }
  .screen-field[data-viewas] .screen-callback-who {
    top: calc(var(--field-viewas-top) + var(--c-tap) + var(--c-space-2) + var(--c-space-5));
  }
  .screen-callback-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── settings ──────────────────────────────────────────── */

/* One column of grouped lists, as a form reads: the whole width on a
   phone, a centred readable column from a tablet up (the shell's
   containers), the calendar and hours, then the rules, texts and
   appearance. */
.screen-field-settings {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-6);
}
.screen-field-settings-cols,
.screen-field-settings-col {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-6);
  min-width: 0;
}
.screen-field-settings-glyph {
  display: grid;
  place-items: center;
  width: var(--c-control-lg);
  height: var(--c-control-lg);
  border-radius: var(--c-radius-md);
  background: var(--c-accent-tint);
  color: var(--c-accent);
}
.screen-field-settings-check {
  display: inline-flex;
  color: var(--c-accent);
}
.screen-field-settings-connect {
  justify-content: flex-start;
}
/* Disconnect: a row of its own at the bottom of Google Calendar, away
   from Change at the group's title. */
.screen-field-settings-disconnect-row {
  justify-content: flex-start;
}
.screen-field-settings-disconnect.ui-button--ghost {
  color: var(--c-danger);
}
/* An admin's preview: whose real settings these are. */
.screen-field-settings-preview {
  margin: 0;
  padding: var(--c-space-2) var(--c-space-3);
  border-radius: var(--c-radius-md);
  background: var(--c-accent-tint);
  color: var(--c-text);
  font-size: var(--c-text-sm);
}
/* Rules that together leave nothing to book, at the top of Visits' footer. */
.screen-field-settings-warning {
  color: var(--c-danger);
  font-weight: 500;
}
/* The Visits numbers line up: one width for every unit. */
.screen-field-settings .ui-setting-unit {
  min-width: 3.4em;
}
.screen-field-settings-open {
  background: var(--c-hover);
}
.screen-field-settings-turned {
  transform: rotate(90deg);
}
.screen-field-settings-day {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-3);
}
.screen-field-settings-windows {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--c-space-2);
}
.screen-field-settings-times {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
}
.screen-field-settings-day-actions {
  display: inline-flex;
  gap: var(--c-space-2);
  margin-left: auto;
}
.screen-field-settings-signout {
  padding-bottom: var(--c-space-4);
}
/* Two columns on a desktop: the calendar and hours, then the rules,
   texts and appearance. */
@media (min-width: 1100px) {
  .screen-field-settings {
    max-width: calc(var(--field-read-max) * 1.6);
  }
  .screen-field-settings-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* ── the day's route map (RouteMap: Today, the Week) ───── */

.screen-field-route-map--day {
  margin-bottom: var(--c-space-1);
}
.screen-field-week-map .screen-field-map {
  height: calc(var(--field-map-h) * 0.8);
}

/* ── news in Needs you (NewsRow): the row, then its dismiss ─ */

.ui-row-wrap.screen-field-news {
  display: flex;
  align-items: center;
}
.screen-field-news > .ui-row {
  flex: 1;
  min-width: 0;
}
.screen-field-news-dismiss {
  flex: none;
  /* A full touch target: a truck is no place for a 32px ×. */
  width: var(--c-tap);
  height: var(--c-tap);
  margin-right: var(--c-space-1);
  color: var(--c-text-3);
}

/* ── a calendar that can't be booked (CalendarNotice: Today, Week) ── */

.screen-field-calendar-notice {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  margin-top: var(--c-space-3);
}
.screen-field-calendar-notice-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2) var(--c-space-3);
  padding: var(--c-space-3);
  border-radius: var(--c-radius-lg);
  background: var(--c-warning-tint);
  color: var(--c-text);
}
.screen-field-calendar-notice-icon {
  flex: none;
  color: var(--c-warning);
}
.screen-field-calendar-notice-body {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}
.screen-field-calendar-notice-body strong {
  font-size: var(--c-text-md);
  color: var(--c-text);
}

/* ── The practice tour (spec 2026-10-01 §1, §2) ───────────
   Welcome's steps in the calendar onboarding's column; the coach mark
   over the practice copy (TourCoach.tsx): a ring drawn on the element
   itself ([data-tour-on], an outline following its own corners) so it
   scrolls with it and never trails, nothing else over the page (it stays
   usable), and the card docked at the top or the foot, away from the
   element (lib/crm/tour/try.ts dock()), compact for a tall one. A card
   with no element sits in the middle over a dimmed screen. A step being
   tried folds into a pill in a corner. Inside a sheet the card or the
   pill docks at the dialog's foot instead, or above a phone's sheet at
   the top of the screen ([data-dock='top'], the outcome survey). */

.screen-welcome-n {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: var(--c-text-sm);
  font-weight: 700;
  color: var(--c-text-2);
  background: var(--c-surface);
  border: 1px solid var(--c-separator);
}

.screen-welcome-n.is-done {
  color: var(--c-on-accent);
  background: var(--c-success);
  border-color: transparent;
}

.screen-welcome-actions {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  padding: 0 var(--c-space-1);
}

.screen-welcome-set {
  margin: var(--c-space-2) 0 0;
  font-size: var(--c-text-xl);
  font-weight: 700;
  color: var(--c-text);
}

.screen-welcome-note {
  margin: 0;
  font-size: var(--c-text-md);
  line-height: 1.45;
  color: var(--c-text-2);
}

.screen-tour-done {
  justify-content: center;
}

.screen-tour-done-mark {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: var(--c-on-accent);
  background: var(--c-success);
}

.screen-tour-button {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
}

/* Settings' Start over during the tour, asked in place. */
.screen-tour-confirm {
  font-size: var(--c-text-sm);
  color: var(--c-text);
}
.screen-tour-confirm-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: var(--c-space-2);
}

/* A practice text's link after the practice (PracticeOver): Resume and the real Today, stacked. */
.screen-practice-over-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--c-space-2);
}

/* An admin's tour as someone (Viewing as): where the texts go, under Start. */
.screen-tour-preview {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--c-space-1);
}
.screen-tour-preview-note {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
  text-align: right;
}

.screen-tour-error {
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-danger);
}

.screen-tour {
  position: fixed;
  inset: 0;
  z-index: var(--c-z-overlay);
  pointer-events: none;
}

.screen-tour-dim {
  position: fixed;
  background: var(--c-scrim-tour);
  pointer-events: none;
}

.screen-tour-dim-all {
  inset: 0;
}

.screen-tour-place {
  position: fixed;
  left: var(--c-space-3);
  right: var(--c-space-3);
  pointer-events: auto;
}

.screen-tour[data-place='middle'] .screen-tour-place {
  top: 50%;
  left: 50%;
  right: auto;
  width: min(360px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
}

/* The foot's offset (above the tab bar) is set inline from its measured height. */
.screen-tour[data-place='foot'] .screen-tour-place {
  bottom: var(--c-space-3);
}

.screen-tour[data-place='top'] .screen-tour-place {
  top: calc(var(--c-space-3) + env(safe-area-inset-top, 0px));
}

@media (min-width: 721px) {
  .screen-tour[data-place='foot'] .screen-tour-place,
  .screen-tour[data-place='top'] .screen-tour-place {
    left: auto;
    right: var(--c-space-6);
    width: min(400px, calc(100vw - var(--field-rail-w) - 48px));
  }
}

.screen-tour-card {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  padding: var(--c-space-4);
  border-radius: var(--c-radius-xl);
  background: var(--c-raised);
  box-shadow: var(--c-shadow-popover);
  color: var(--c-text);
}

/* In a sheet: at the dialog's foot, above its own buttons' row. */
.screen-tour-card.is-docked {
  position: sticky;
  bottom: 0;
  margin-top: var(--c-space-3);
  border: 1px solid var(--c-separator);
  box-shadow: none;
}

/* A phone's sheet rising from the bottom (the outcome survey): the card,
   or the pill, at the top of the screen instead, and the sheet below it,
   shortened to fit (its panel scrolls). The dialog is a column pushed to
   its foot, so the card comes first and takes the slack under it. */
@media (max-width: 720px) {
  .ui-dialog--sheet > .screen-tour-card.is-docked[data-dock='top'],
  .ui-dialog--sheet > .screen-tour-pill.is-docked[data-dock='top'] {
    position: relative;
    order: -1;
    flex: none;
    margin: calc(var(--c-space-3) + env(safe-area-inset-top, 0px)) var(--c-space-3) auto;
    border: 0;
    box-shadow: var(--c-shadow-popover);
  }
  .ui-dialog--sheet:has(> [data-dock='top']) > .ui-dialog-panel {
    margin-top: var(--c-space-3);
    min-height: 0;
  }
}

/* A tall element: the compact bar, so it still fits beside it. */
.screen-tour-card.is-compact {
  gap: var(--c-space-1);
  padding: var(--c-space-3);
  border-radius: var(--c-radius-lg);
}

.screen-tour-card.is-compact .screen-tour-title {
  margin: 0;
  font-size: var(--c-text-md);
}

.screen-tour-card.is-compact .screen-tour-body {
  font-size: var(--c-text-sm);
  line-height: 1.4;
}

.screen-tour-card.is-compact .screen-tour-actions {
  margin-top: 0;
}

/* Trying it: the card folded into a pill in a corner, out of the way. */
.screen-tour-pill {
  position: fixed;
  right: var(--c-space-3);
  z-index: var(--c-z-overlay);
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  max-width: calc(100vw - 2 * var(--c-space-3));
  padding: var(--c-space-2) var(--c-space-2) var(--c-space-2) var(--c-space-4);
  border-radius: var(--c-radius-xl);
  background: var(--c-raised);
  box-shadow: var(--c-shadow-popover), 0 0 0 2px var(--c-accent);
  color: var(--c-text);
  animation: screen-tour-pill-in 0.2s var(--c-ease) both;
}

.screen-tour-pill[data-side='top'] {
  top: calc(var(--c-space-3) + env(safe-area-inset-top, 0px));
}

/* The foot's offset (above the tab bar) is set inline from its measured height. */
.screen-tour-pill[data-side='foot'] {
  bottom: var(--c-space-3);
}

.screen-tour-pill.is-docked {
  position: sticky;
  right: auto;
  bottom: 0;
  max-width: none;
  margin-top: var(--c-space-3);
}

.screen-tour-pill-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.screen-tour-pill-step {
  font-size: var(--c-text-xs);
  font-weight: 600;
  color: var(--c-text-2);
}

.screen-tour-pill-hint {
  font-size: var(--c-text-sm);
  line-height: 1.35;
  color: var(--c-text);
}
/* The reminder while they try: pretend homeowners, nothing real happens. */
.screen-tour-pill-note {
  font-size: var(--c-text-xs);
  line-height: 1.35;
  color: var(--c-text-2);
}

@keyframes screen-tour-pill-in {
  from {
    opacity: 0;
    transform: translateY(var(--c-space-2));
  }
}

.screen-tour-kicker {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--c-space-1) var(--c-space-3);
  margin: 0;
  font-size: var(--c-text-sm);
  font-weight: 600;
  color: var(--c-text-2);
}

.screen-tour-clock {
  font-weight: 500;
  color: var(--c-text-3);
}

.screen-tour-progress {
  height: 3px;
  border-radius: 2px;
  background: var(--c-surface);
  overflow: hidden;
}

.screen-tour-progress > span {
  display: block;
  height: 100%;
  background: var(--c-accent);
}

.screen-tour-title {
  margin: var(--c-space-1) 0 0;
  font-size: var(--c-text-lg);
  font-weight: 700;
}

.screen-tour-body {
  margin: 0;
  font-size: var(--c-text-md);
  line-height: 1.45;
  color: var(--c-text-2);
}
/* Once, on the first step that asks them to try something: it is a safe mock. */
.screen-tour-note {
  margin: 0;
  padding: var(--c-space-2) var(--c-space-3);
  border-radius: var(--c-radius-md);
  background: var(--c-surface-2);
  font-size: var(--c-text-sm);
  line-height: 1.4;
  color: var(--c-text);
}
/* The element is not on screen: where to look, instead of pointing at nothing. */
.screen-tour-where {
  margin: 0;
  font-size: var(--c-text-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-text);
}
.screen-tour-card.is-compact .screen-tour-note {
  padding: var(--c-space-1) var(--c-space-2);
  font-size: var(--c-text-xs);
}

.screen-tour-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-2);
  margin-top: var(--c-space-1);
}

.screen-tour-nav {
  display: inline-flex;
  gap: var(--c-space-2);
}

/* Back's chevron stands in for its word on a narrow phone, and Skip drops "for now" (audit row 37). */
.screen-tour-back-icon {
  display: none;
}
.screen-tour-skip-more,
.screen-tour-back-label {
  display: inline;
}
@media (max-width: 380px) {
  .screen-tour-skip-more,
  .screen-tour-back-label {
    display: none;
  }
  .screen-tour-back-icon {
    display: inline-block;
  }
}

/* "Still loading": Try again, inline in the error line (audit X5). */
.screen-tour-retry {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--c-accent);
  text-decoration: underline;
  cursor: pointer;
}

/* In a sheet, the docked card makes way while a field in it is being typed into (audit row 20). */
dialog:has(textarea:focus, input:not([type='radio'], [type='checkbox'], [type='button'], [type='submit']):focus) .screen-tour-card.is-docked,
dialog:has(textarea:focus, input:not([type='radio'], [type='checkbox'], [type='button'], [type='submit']):focus) .screen-tour-pill.is-docked {
  display: none;
}

/* The move step is moving: the sheet's "Cancel the visit instead" waits for the cancel step (audit row 22). */
[data-tour-beat='move'] .screen-field-cancel-instead {
  display: none;
}

/* The element, ringed on itself: an outline, so it follows the element's
   own corners, scrolls and resizes with it, and never touches its layout
   or its own shadow. It breathes gently, fading and back, never growing
   (TourCoach.tsx RING is its reach: 3px wide, 3px off). */
[data-tour-on] {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
  animation: screen-tour-ring 1.8s ease-in-out infinite;
}

/* Flush against an edge that clips (a grouped list's row, the chip strip,
   the screen's edge): ringed just inside its edge, so none of it is cut. */
[data-tour-on][data-tour-ring='inset'] {
  outline-offset: -4px;
}

/* A bare wrapper (no fill, no border, square corners): rounded corners
   for its ring, to match the rounded controls; nothing else shows them. */
[data-tour-on][data-tour-round] {
  border-radius: var(--c-radius-lg);
}

/* The chip strip runs edge to edge with its chips flush to its top: room
   inside it for the ring, given back outside so nothing moves. */
.screen-field-leads-chips[data-tour-ring='inset'] {
  padding-block: var(--c-space-2);
  margin-block: calc(-1 * var(--c-space-2));
}

dialog[data-tour-on] {
  animation: none;
  outline: none;
}

@keyframes screen-tour-ring {
  50% {
    outline-color: color-mix(in srgb, var(--c-accent) 45%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-tour-on],
  .screen-tour-pill {
    animation: none;
  }
}