/* ─────────────────────────────────────────────────────────
   CRM CONSOLE: SCREENS

   Layout only: how primitives are arranged on a given screen. Classes
   are screen-<screen>-<part> (screen-shell, screen-rail, screen-contact)
   plus a few shared screen- helpers (screen-inline-form). Anything that
   looks like a reusable piece belongs in primitives.css as a ui- class
   instead. Tokens only, like everywhere else.

   Sections: the shell (rail and main), the contact view, the attention
   queue, the conversations list, the tenants list, the tenant page, the
   knowledge base, sign-in, then the shared breakpoints. Every screen is
   built on components/crm/ui; there is no legacy block any more.

   Desktop first (spec §2), 1440 the reference. On the contact view the
   thread and the side column scroll on their own, with the header and
   the composer pinned in the thread pane. Below 960px the panes stack
   and the page scrolls as one; below 720px a top bar takes the rail's
   place and the rail opens from it as a drawer (ShellNav.tsx).
   ───────────────────────────────────────────────────────── */

/* ── Shell ─────────────────────────────────────────────── */

.screen-shell {
  display: grid;
  grid-template-columns: calc(var(--c-rail-width) + env(safe-area-inset-left)) minmax(0, 1fr);
  min-height: var(--c-screen-h);
  background: var(--c-bg);
}

/* The safe-area insets are zero except on a phone held sideways, where
   the notch would otherwise sit over the rail or the page's far edge. */
.screen-main {
  min-width: 0;
  padding-right: env(safe-area-inset-right);
}

.screen-rail {
  --c-control-fill: var(--c-raised);
  --c-control-lift: 0 0 0 var(--c-hairline) var(--c-control-edge), 0 1px 1px var(--c-shadow);
  position: sticky;
  top: 0;
  z-index: var(--c-z-rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: var(--c-screen-h);
  padding: 14px 0 var(--c-space-4) env(safe-area-inset-left);
  /* A short screen scrolls the whole rail, so no tab is ever clipped
     inside a group that scrolls on its own. */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: var(--c-rail);
}

.screen-rail > * {
  flex-shrink: 0;
}

/* The search tile: a small field-shaped button at the top of the rail that
   opens the ⌘K palette. */
.screen-rail-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  width: 70px;
  height: var(--c-control-sm);
  margin-bottom: var(--c-space-2);
  padding: 0 6px 0 var(--c-space-2);
  border: 0;
  border-radius: var(--c-radius-control);
  background: var(--c-control-fill);
  box-shadow: var(--c-control-lift);
  color: var(--c-text-2);
  cursor: pointer;
  transition: color var(--c-motion-fast) var(--c-ease);
}

.screen-rail-search:hover {
  color: var(--c-text);
}

.screen-rail-search:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--c-accent), 0 0 0 4px var(--c-focus);
}

.screen-rail-kbd {
  font-family: var(--c-font-ui);
  font-size: var(--c-text-2xs);
  font-weight: 500;
}

.screen-rail-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.screen-rail-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 78px;
  padding: var(--c-space-2) 0 6px;
  border-radius: var(--c-radius-md);
  color: var(--c-text-2);
  font-size: var(--c-text-2xs);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background-color var(--c-motion-fast) var(--c-ease), color var(--c-motion-fast) var(--c-ease);
}

.screen-rail-link:hover {
  background: var(--c-hover);
  color: var(--c-text);
}

.screen-rail-link[aria-current='page'] {
  background: var(--c-raised);
  color: var(--c-accent);
  box-shadow: 0 1px 2px var(--c-shadow);
}

.screen-rail-glyph {
  position: relative;
  display: inline-flex;
}

.screen-rail-badge {
  position: absolute;
  top: -5px;
  left: 13px;
}

/* The admin group (RailAdmin.tsx): the settings and testing tabs at the
   foot of the rail, under a hairline, behind a gear tile. Collapsed it
   is the gear alone; open, its tabs come in a step smaller than the
   everyday ones. It never scrolls on its own (that clipped Tenants and
   Team out of sight on a laptop): when the rail runs short the whole
   rail scrolls, and the current tab is scrolled into view. */
.screen-rail-admin {
  display: flex;
  /* The gear stays put at the foot and its tabs open upward above it, so a
     second click in the same spot closes them again. */
  flex-direction: column-reverse;
  align-items: center;
  gap: 3px;
  flex: none;
  margin-top: auto;
  padding-top: var(--c-space-2);
  box-shadow: inset 0 var(--c-hairline) 0 var(--c-separator);
}

.screen-rail-admin ~ .screen-rail-foot {
  margin-top: var(--c-space-3);
}

.screen-rail-admin-toggle {
  flex: none;
  cursor: pointer;
}

.screen-rail-admin-toggle:focus-visible,
.screen-rail-admin .screen-rail-link:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: -2px;
}

.screen-rail-admin-toggle[aria-expanded='true'] {
  color: var(--c-text);
}

/* Collapsed on one of its own pages: the gear says where you are. */
.screen-rail-admin-toggle[data-current] {
  background: var(--c-raised);
  color: var(--c-accent);
  box-shadow: 0 1px 2px var(--c-shadow);
}

.screen-rail-admin-chevron {
  display: none;
  transition: transform var(--c-motion-fast) var(--c-ease);
}

.screen-rail-admin[data-open] .screen-rail-admin-chevron {
  transform: rotate(180deg);
}

.screen-rail-admin-list[hidden] {
  display: none;
}

.screen-rail-admin-list .screen-rail-link {
  gap: var(--c-space-hair);
  padding: 6px 0 var(--c-space-1);
}

.screen-rail-admin-list .screen-rail-glyph .ui-icon {
  width: 18px;
  height: 18px;
}

.screen-rail-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c-space-3);
  width: 100%;
  margin-top: auto;
  padding: 0 var(--c-space-1);
}

/* The "Something wrong?" report's console entry (PanicButton.tsx), below
   the user button at the foot: a plain "Help" item opening the same modal
   the field app's tab bar does. A <button>, so it drops the browser's
   button chrome and otherwise looks exactly like the rail's other items. */
.screen-rail-panic {
  flex: none;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
}

.screen-rail-panic:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: -2px;
}

.screen-tenant-filter {
  width: 100%;
  flex: none;
}

.screen-tenant-filter .ui-field-label {
  font-size: var(--c-text-2xs);
  text-align: center;
}

.screen-theme-switch {
  flex: none;
}

.screen-rail-user {
  display: grid;
  place-items: center;
  min-width: 32px;
  min-height: 32px;
}

/* The phone's top bar, scrim and drawer close (ShellNav.tsx): nothing
   on a desktop. */
.screen-topbar,
.screen-rail-scrim,
.screen-rail-close {
  display: none;
}

/* ── Shell, phone ──────────────────────────────────────── */

/* Below 720px the rail is a drawer from the left over a scrim, opened
   from a slim top bar: the menu (with the attention count), the
   section's name, search. The drawer is the desktop rail's markup laid
   out as a list: icon and label on one line, 44px rows, the foot's
   filter, theme and user at the bottom. Closed, it is hidden as well as
   off-screen, so its links leave the tab order. */
@media (max-width: 720px) {
  .screen-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .screen-main {
    padding-right: 0;
  }

  .screen-topbar {
    position: sticky;
    top: 0;
    z-index: var(--c-z-rail);
    display: flex;
    align-items: center;
    gap: var(--c-space-1);
    height: calc(var(--c-topbar-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) calc(var(--c-space-1) + env(safe-area-inset-right)) 0
      calc(var(--c-space-1) + env(safe-area-inset-left));
    background: var(--c-rail);
    box-shadow: 0 var(--c-hairline) 0 var(--c-separator);
  }

  .screen-topbar-button {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: var(--c-tap);
    height: var(--c-tap);
    border-radius: var(--c-radius-full);
    color: var(--c-text);
  }

  .screen-topbar-button:active {
    background: var(--c-hover);
  }

  .screen-topbar-badge {
    position: absolute;
    top: 4px;
    left: 24px;
  }

  .screen-topbar-fill {
    flex: 1;
  }

  .screen-rail-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--c-z-overlay);
    display: block;
    background: var(--c-scrim);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--c-motion) var(--c-ease), visibility 0s linear var(--c-motion);
  }

  .screen-rail-scrim[data-open] {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--c-motion) var(--c-ease);
  }

  .screen-rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--c-z-overlay);
    align-items: stretch;
    gap: var(--c-space-1);
    width: min(300px, 86vw);
    height: auto;
    padding: calc(var(--c-space-3) + env(safe-area-inset-top)) var(--c-space-3)
      calc(var(--c-space-4) + env(safe-area-inset-bottom)) calc(var(--c-space-3) + env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform var(--c-motion) var(--c-ease), visibility 0s linear var(--c-motion);
  }

  .screen-rail[data-open] {
    visibility: visible;
    transform: none;
    box-shadow: var(--c-shadow-popover);
    transition: transform var(--c-motion) var(--c-ease);
  }

  .screen-rail-close {
    position: absolute;
    top: calc(var(--c-space-2) + env(safe-area-inset-top));
    right: var(--c-space-2);
    display: grid;
    place-items: center;
    width: var(--c-tap);
    height: var(--c-tap);
    border-radius: var(--c-radius-full);
    color: var(--c-text-2);
  }

  /* Search lives in the top bar. */
  .screen-rail-search {
    display: none;
  }

  .screen-rail-link {
    flex-direction: row;
    gap: var(--c-space-3);
    width: auto;
    min-height: var(--c-tap);
    padding: 0 var(--c-space-3);
    font-size: var(--c-text-lg);
    letter-spacing: -0.005em;
  }

  .screen-rail-label {
    min-width: 0;
  }

  /* The drawer's Admin section: a row with a chevron at the bottom of
     the list, its tabs indented under it at the drawer's own size. */
  .screen-rail-admin {
    /* The drawer lists it top-down: the row first, its tabs under it. */
    flex-direction: column;
    align-items: stretch;
    flex: none;
    overflow: visible;
    margin-top: var(--c-space-4);
    padding-top: var(--c-space-3);
  }

  .screen-rail-admin-chevron {
    display: block;
    margin-left: auto;
    color: var(--c-text-3);
  }

  .screen-rail-admin-list .screen-rail-link {
    gap: var(--c-space-3);
    padding: 0 var(--c-space-3) 0 var(--c-space-6);
  }

  .screen-rail-admin-list .screen-rail-glyph .ui-icon {
    width: 20px;
    height: 20px;
  }

  .screen-rail-admin ~ .screen-rail-foot {
    margin-top: auto;
  }

  .screen-rail-foot {
    align-items: stretch;
    margin-top: auto;
    padding: var(--c-space-4) var(--c-space-2) 0;
  }

  .screen-rail-panic {
    text-align: left;
  }

  .screen-tenant-filter .ui-field-label {
    text-align: left;
  }

  .screen-theme-switch {
    align-self: flex-start;
  }

  .screen-rail-user {
    justify-content: start;
  }
}

/* ── Contact view ──────────────────────────────────────── */

/* The header runs the page's full width, to the window's right edge;
   the thread and the side column sit under it side by side, each
   scrolling on its own (2026-10-02: the side column used to run up
   beside the header and cut it short). */
.screen-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--c-side-width);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    'head head'
    'main side';
  height: var(--c-screen-h);
}

.screen-contact-header {
  grid-area: head;
}

.screen-contact-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* A phone's bar (the way back, the name opening the card), the strip of
   what needs the setter now, and the contact card (ContactInfo.tsx):
   below 720px only, where they stand in for the header and the side
   column (the Contact view, phone, block). */
.screen-contact-bar,
.screen-contact-strip,
.screen-contact-card {
  display: none;
}

/* The header at a laptop width: the name block claims a wide share, so
   a long row of actions (the replies, Call, Note, Actions) wraps under
   the name before the meta line breaks into a ragged column; each meta
   fact stays whole. */
.screen-contact-header {
  flex-wrap: wrap;
  row-gap: var(--c-space-2);
}

.screen-contact-header .ui-page-header-who {
  flex: 1 1 36rem;
}

.screen-contact-header .ui-page-meta > *,
.screen-convs-pane .ui-page-meta > * {
  white-space: nowrap;
}

/* Their clock, last on the grey line: a shade quieter than the facts
   (the contact header and the conversations preview's). */
.screen-contact-clock {
  color: var(--c-text-3);
}

.screen-contact-header-back {
  flex: none;
  margin-left: calc(-1 * var(--c-space-2));
  color: var(--c-accent);
}

/* The replies waiting, set apart from Call, Note and Actions by a rule
   (hidden with them once all are acknowledged). */
.screen-contact-replies {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
}

.screen-contact-replies::after {
  content: '';
  align-self: stretch;
  width: var(--c-hairline);
  margin: var(--c-space-1) var(--c-space-1) var(--c-space-1) var(--c-space-3);
  background: var(--c-separator);
}

/* Its panel hangs from the actions' right edge, not the pill's, so it
   stays on screen whether the actions sit beside the name or wrap under
   it. */
.screen-contact-header .ui-page-actions {
  position: relative;
}

.screen-contact-replies .ui-popover {
  position: static;
}

.screen-contact-replies:empty,
.screen-contact-replies:has(> .screen-replies-wrap[hidden]) {
  display: none;
}

.screen-contact-more {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 160px;
}

.screen-contact-more .ui-button {
  justify-content: flex-start;
}

/* ── The reach pill (ReachPill.tsx) ───────────────────────
   Do not contact, or the thread's number marked bad: the danger pill
   among the status pills, a button with a caret, opening a small panel
   with what is blocked and the one action that undoes it. The page's
   only statement of that status. */
.screen-reach-pill {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.screen-reach-pill:hover,
.screen-reach-pill[aria-expanded='true'] {
  background-image: linear-gradient(var(--c-hover), var(--c-hover));
}

.screen-reach-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}

.screen-reach-panel {
  width: max-content;
  max-width: min(280px, calc(100vw - 2 * var(--c-space-4)));
}

.screen-reach {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--c-space-2);
  padding: var(--c-space-2);
}

.screen-reach-line {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  margin: 0;
  font-size: var(--c-text-sm);
  line-height: var(--c-leading);
  color: var(--c-text);
}

.screen-reach-line .ui-mono {
  font-size: var(--c-text-xs);
  color: var(--c-text-2);
}

.screen-reach-hint {
  margin: 0;
  font-size: var(--c-text-xs);
  line-height: var(--c-leading);
  color: var(--c-text-2);
}

.screen-reach-form {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: var(--c-space-2);
  min-width: 240px;
}

.screen-reach-buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--c-space-2);
}

/* ── The contact's Actions menu (ContactActions.tsx) ──────
   "Actions ▾" beside Call and Note; the menu groups the owner items
   (ask, review, callback) above a task. An item that cannot run stays
   in the list, dimmed, with its reason under the label. */
/* Holds the menu's popover, so the menu can tell which side has room. */
.screen-actions-anchor {
  display: contents;
}

.screen-actions-trigger {
  gap: var(--c-space-1);
}

.screen-actions-trigger .ui-icon {
  color: var(--c-text-3);
}

.screen-actions-menu {
  display: flex;
  flex-direction: column;
  width: 280px;
  max-width: calc(100vw - var(--c-space-6));
}

.screen-actions-heading {
  margin: 0;
  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-3);
}

/* No owner on file: said once, under the heading, for the three items. */
.screen-actions-note {
  margin: 0;
  padding: 0 var(--c-space-3) var(--c-space-2);
  font-size: var(--c-text-sm);
  line-height: var(--c-leading);
  color: var(--c-text-2);
}

.screen-actions-rule {
  margin: var(--c-space-1) var(--c-space-3);
  border: 0;
  /* The popover's own edge colour: the separator token vanishes on a dark raised panel. */
  border-top: 1px solid var(--c-control-edge);
}

.screen-actions-item {
  display: flex;
  align-items: flex-start;
  gap: var(--c-space-3);
  width: 100%;
  padding: var(--c-space-2) var(--c-space-3);
  border: 0;
  border-radius: var(--c-radius-sm);
  background: none;
  font: inherit;
  font-size: var(--c-text-md);
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
}

.screen-actions-item:hover:not(:disabled),
.screen-actions-item:focus-visible {
  background: var(--c-hover);
  outline: none;
}

.screen-actions-item:active:not(:disabled) {
  background: var(--c-pressed);
}

.screen-actions-item:disabled {
  cursor: default;
}

.screen-actions-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--c-accent);
}

.screen-actions-item:disabled .screen-actions-icon,
.screen-actions-item:disabled .screen-actions-label {
  color: var(--c-text-3);
}

.screen-actions-text {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  min-width: 0;
  line-height: var(--c-leading-tight);
}

.screen-actions-label {
  line-height: 20px;
}

.screen-actions-reason {
  font-size: var(--c-text-sm);
  line-height: var(--c-leading);
  color: var(--c-text-3);
}

/* The phone's list, as a bottom sheet: the rows run edge to edge on the sheet. */
.screen-actions-sheet .screen-actions-menu {
  width: auto;
  max-width: none;
}

/* A thumb's reach per row on a phone. */
@media (max-width: 720px) {
  .screen-actions-item {
    align-items: center;
    min-height: var(--c-tap);
  }
}

.screen-actions-form {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
}

/* What the owner gets, as the text lands on their phone. */
.screen-actions-preview {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  margin: 0;
}

.screen-actions-preview-label {
  font-size: var(--c-text-sm);
  font-weight: 500;
  color: var(--c-text-2);
}

.screen-actions-bubble {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  max-width: 100%;
  padding: var(--c-space-2) var(--c-space-3);
  border-radius: var(--c-radius-bubble);
  /* An incoming bubble on the dialog's raised panel; the bubble token is the panel's own colour in dark. */
  background: color-mix(in srgb, var(--c-text) 8%, var(--c-raised));
  font-size: var(--c-text-sm);
  line-height: var(--c-leading);
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.screen-actions-bubble-link {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* column-reverse opens the pane scrolled to the bottom (the newest
   message) with no script, the way Messages opens a conversation. */
.screen-contact-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse;
  scrollbar-width: thin;
}

.screen-contact-threads {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-6);
  padding: 18px var(--c-space-7) var(--c-space-3);
}

.screen-thread {
  display: flex;
  flex-direction: column;
}

.screen-thread-head {
  align-self: center;
  margin-bottom: var(--c-space-2);
  font-size: var(--c-text-sm);
  font-weight: 600;
  color: var(--c-text-2);
}

.screen-thread-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Older messages behind a link (audit M12), and a thread with no texts yet
   (audit H1): small centred lines, the timeline above them still shows. */
.screen-thread-earlier,
.screen-thread-none {
  align-self: center;
  padding: var(--c-space-2) 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
}

.screen-thread-earlier a {
  color: var(--c-accent);
  font-weight: 600;
  text-decoration: none;
}

.screen-thread-earlier a:hover {
  text-decoration: underline;
}

/* A contact with several numbers: which thread the pane and the composer
   are on (audit H2). */
.screen-thread-switch {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  padding: var(--c-space-2) var(--c-space-7);
  border-bottom: 1px solid var(--c-separator);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-thread-switch .ui-segmented {
  min-width: 0;
  overflow-x: auto;
}

.screen-thread-switch-tag {
  margin-left: 4px;
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
}

.screen-composer {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  padding: 10px var(--c-space-6) var(--c-space-4);
  background: var(--c-bg);
}

/* What "Ask Dave to draft" adds beside the text: a question, an action to do by hand. */
.screen-draft-note {
  margin: 0 var(--c-space-4);
  font-size: var(--c-text-xs);
  color: var(--c-text-2);
}

.screen-optimistic {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 30vh;
  overflow-y: auto;
  padding: 0 var(--c-space-1);
}

/* The replies waiting (Acknowledge.tsx). One is a joined control: the
   reason on the warning tint, then its button flush against it. */
.screen-ack {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.screen-ack-join {
  display: inline-flex;
  align-items: stretch;
  flex: none;
  border-radius: var(--c-radius-control);
  background: var(--c-warning-tint);
}

.screen-ack-what {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 var(--c-space-2) 0 var(--c-space-3);
  font-size: var(--c-text-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--c-warning);
}

.screen-ack-join .ui-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Two or more: a warning pill-button, "2 replies waiting", opening the list. */
.screen-replies-wrap {
  display: inline-flex;
}

.screen-replies-pill {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.screen-replies-pill:hover,
.screen-replies-pill[aria-expanded='true'] {
  background-image: linear-gradient(var(--c-hover), var(--c-hover));
}

.screen-replies-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}

.screen-replies-panel {
  width: max-content;
  max-width: min(380px, calc(100vw - 2 * var(--c-space-4)));
}

/* Each waiting reply: the number and what they said, its button at the
   right; an error drops to its own line under them. */
.screen-replies {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--c-space-1);
  list-style: none;
}

.screen-replies:empty {
  display: none;
}

.screen-replies-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-2) var(--c-space-4);
  padding: var(--c-space-2) var(--c-space-1);
}

.screen-replies-row + .screen-replies-row {
  box-shadow: 0 calc(-1 * var(--c-hairline)) 0 var(--c-separator);
}

.screen-replies-row .ui-alert {
  flex-basis: 100%;
}

.screen-replies-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 10rem;
  gap: var(--c-space-hair);
  min-width: 0;
  font-size: var(--c-text-sm);
}

/* What they said, two lines at most. */
.screen-replies-said {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--c-text-2);
}

.screen-recall-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.screen-recall-cancel {
  height: auto;
  padding: 0;
  font-size: var(--c-text-xs);
}

.screen-contact-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  overflow-y: auto;
  padding: var(--c-space-4) var(--c-space-5) var(--c-space-7) var(--c-space-1);
  scrollbar-width: thin;
}

/* Side-column helpers, shared by the groups' controls. */
/* The follow-up group's forms (FollowUpControls): the fields stacked
   full width, the buttons at the right under them. */
.screen-followup-form {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  width: 100%;
}

.screen-followup-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--c-space-2);
}

/* At rest: the day and time, the cadence in words under it in grey. */
.screen-followup-when {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
}

.screen-followup-cadence {
  color: var(--c-text-2);
  font-size: var(--c-text-sm);
  font-weight: 400;
}

/* Due: Skip and Stop across the row. */
.screen-followup-due {
  width: 100%;
}

.screen-inline-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--c-space-2);
  width: 100%;
}

.screen-inline-form .ui-field {
  flex: 1 1 140px;
}

.screen-inline-form .ui-alert {
  flex-basis: 100%;
}

.screen-merge {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  width: 100%;
}

/* Merge (audit M6): people as you type, then who the survivor is. */
.screen-merge-results {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--c-hairline) solid var(--c-separator);
  border-radius: var(--c-radius-sm, 8px);
  overflow: hidden;
}

.screen-merge-results > li + li {
  border-top: var(--c-hairline) solid var(--c-separator);
}

.screen-merge-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--c-space-2) var(--c-space-3);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--c-text-sm);
  text-align: left;
  cursor: pointer;
}

.screen-merge-result:hover,
.screen-merge-result:focus-visible {
  background: var(--c-surface-2);
}

.screen-merge-result:disabled {
  opacity: 0.6;
  cursor: default;
}

.screen-merge-result-name {
  font-weight: 500;
  color: var(--c-text);
}

.screen-merge-who {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px var(--c-space-3);
  margin: 0 0 var(--c-space-2);
}

.screen-merge-who dt {
  color: var(--c-text-3);
}

.screen-merge-who dd {
  margin: 0;
  min-width: 0;
}

/* An email breaks only after the @ or before a dot (audit L6). */
.screen-ident-value {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.screen-stage-amount {
  max-width: 12rem;
}

.screen-stage-via {
  font-size: var(--c-text-sm);
}

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

/* The map card (db/118): the image is the group's first row, edge to
   edge, at a fixed aspect so the fill never jumps while it loads; the
   hairline under it comes from the group like any other row. */
/* Edge to edge in its group, as the Property group's photo is: the row's
   padding would inset it alone of the side column's images. */
/* The service-area notice (db/195): a dot for the tone, a one-line title,
   the reason under it. Over the map it is a frosted panel along the top
   edge that lets the map show through and never takes its click. */
.screen-location-area > .screen-area-notice {
  flex: 1 1 100%;
}

.screen-area-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--c-space-2);
  padding: var(--c-space-2) var(--c-space-3);
  border-radius: var(--c-radius-md);
  background: var(--c-surface-2);
  color: var(--c-text);
  line-height: 1.35;
}

.screen-area-notice--on-map {
  position: absolute;
  top: var(--c-space-2);
  left: var(--c-space-2);
  right: var(--c-space-2);
  z-index: 1;
  background: color-mix(in srgb, var(--c-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: var(--c-shadow-popover);
  pointer-events: none;
}

.screen-area-notice-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.4em;
  border-radius: var(--c-radius-full);
  background: var(--c-danger);
}

.screen-area-notice--warning .screen-area-notice-dot {
  background: var(--c-warning);
}

.screen-area-notice-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.screen-area-notice-title {
  font-weight: 600;
}

.screen-area-notice-reason {
  color: var(--c-text-2);
}

.screen-map {
  position: relative;
}

.screen-map {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  padding: 0;
  background: var(--c-surface-2);
}

.screen-map-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The map opens Google Maps in a new tab; the chip only says so on
   hover/focus, so the image reads as a plain photo the rest of the time. */
.screen-map-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.screen-map-link:hover .screen-map-img {
  opacity: 0.92;
}

.screen-map-pill {
  position: absolute;
  right: var(--c-space-2);
  bottom: var(--c-space-2);
  opacity: 0;
  transition: opacity var(--c-motion-fast) var(--c-ease);
  pointer-events: none;
}

.screen-map-link:hover .screen-map-pill,
.screen-map-link:focus-visible .screen-map-pill {
  opacity: 1;
}

/* The Location card's address editor: the field takes the row, Save and
   Cancel sit on the control line (the field's hint hangs below). */
.screen-location-edit .screen-inline-form {
  align-items: flex-start;
}

.screen-location-edit .ui-address-field {
  flex: 1 1 180px;
}

.screen-location-edit-actions {
  display: flex;
  gap: var(--c-space-1);
  /* Down by the label's line, so the buttons meet the input. */
  padding-top: calc(var(--c-text-sm) * var(--c-leading) + var(--c-space-1));
}

.screen-row-action {
  margin-left: calc(-1 * var(--c-space-2));
}

/* The qualification card. Editing: the box and its Clear button on one
   line, the button sitting on the box's baseline (below the label).
   Draft: the current value, then the suggestion line (pill, value,
   confidence, the accept check at the far right), then the evidence, all
   inside the row's value cell. */
.screen-qual-field {
  display: flex;
  align-items: flex-end;
  gap: var(--c-space-1);
  width: 100%;
}

/* What moved while the form was open: a line under the box (M7). */
.ui-row:has(> .screen-qual-conflict, > .screen-qual-updated) {
  flex-wrap: wrap;
}

.screen-qual-conflict,
.screen-qual-updated {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-qual-conflict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-1) var(--c-space-2);
  padding: var(--c-space-2);
  border-radius: var(--c-radius-sm);
  background: var(--c-warning-tint);
  color: var(--c-text);
}

.screen-qual-conflict > span {
  flex: 1 1 100%;
}

.screen-qual-clear {
  margin-bottom: var(--c-space-hair);
}

.screen-qual-draft {
  gap: var(--c-space-1);
}

/* Who set a field (AI, Human, Lead) sits on the first line of its value,
   not centred on a two-line one; the short version's, which stacks
   under its label, beside the label instead of on a line of its own. */
.screen-qual-row .ui-row-trailing {
  align-self: baseline;
}

.screen-qual-row.ui-row--stack {
  position: relative;
}

.screen-qual-row.ui-row--stack .ui-row-trailing {
  position: absolute;
  top: var(--c-space-2);
  right: var(--c-space-3);
}

/* The short version (Dave's sentences, or a person's) reads as prose in
   the value cell; the warmth editor is the label, the cold-to-hot picker
   and the reason box, stacked. */
.screen-qual-brief {
  font-weight: 400;
  line-height: var(--c-leading);
  white-space: pre-line;
}

.screen-qual-warmth {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  width: 100%;
  min-width: 0;
}

.screen-qual-compare {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  min-width: 0;
}

.screen-qual-current.is-unknown,
.screen-qual-suggest-value.is-unknown {
  font-weight: 400;
  color: var(--c-text-2);
}

.screen-qual-suggest {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  min-width: 0;
  min-height: var(--c-control-sm);
}

/* The pill says whose the value is; the value itself stays plain text,
   since accent text in this console means "tap me". */
.screen-qual-suggest-value {
  flex: 1;
  min-width: 0;
}

.screen-qual-confidence {
  flex: none;
  font-size: var(--c-text-xs);
}

.screen-qual-accept {
  margin-right: calc(-1 * var(--c-space-1));
}

.screen-qual-evidence {
  font-size: var(--c-text-xs);
  font-weight: 400;
  line-height: var(--c-leading);
}

/* The warmth's reason in the card reads as the other fields' evidence
   line: small and faint under the value, the same gap (the Short version
   elsewhere keeps its own, larger reason; ShortVersion.tsx WarmthLine). */
.screen-qual-row .ui-warmth-main {
  gap: var(--c-space-1);
}

.screen-qual-row .ui-warmth-reason {
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
}

.screen-qual-foot {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
}

.screen-qual-foot-actions {
  display: flex;
  align-items: center;
  gap: var(--c-space-1);
}

.screen-stage-note {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-stage-now {
  align-items: baseline;
  gap: 10px;
}

.screen-stage-name {
  font-size: var(--c-text-lg);
  font-weight: 600;
  color: var(--c-accent);
}

.screen-task {
  align-items: flex-start;
}

.screen-task .ui-row-leading {
  align-self: flex-start;
  margin-top: -2px;
}

/* The check ring (Reminders): an empty circle that fills green when done. */
.screen-task-check {
  box-shadow: inset 0 0 0 1.5px var(--c-text-4);
  color: transparent;
}

.screen-task-check:hover:not(:disabled) {
  background: transparent;
  color: var(--c-text-3);
}

.screen-task-mark {
  display: grid;
  place-items: center;
  width: var(--c-control-sm);
  height: var(--c-control-sm);
}

.screen-task.is-done .screen-task-check {
  background: var(--c-success);
  box-shadow: none;
  color: var(--c-on-accent);
  opacity: 1;
}

.screen-task-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--c-space-hair);
  min-width: 0;
}

.screen-task-title {
  font-weight: 500;
}

/* A closed task's line with its Reopen at the right (db/162). */
.screen-task-closed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-2);
}

.screen-task.is-done .screen-task-title {
  color: var(--c-text-3);
  text-decoration: line-through;
}

.screen-task-sub {
  font-size: var(--c-text-sm);
  font-weight: 400;
  color: var(--c-text-2);
}

/* An owner review's controls (TaskList.tsx): "Re-send review" when it is
   past its deadline, then Withdraw, in a row that wraps on a phone. */
.screen-task-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-task-answer {
  display: flex;
  align-items: flex-end;
  gap: var(--c-space-2);
  margin-top: var(--c-space-1);
}

.screen-task-recent {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
}

.screen-appt-title {
  font-weight: 500;
  color: var(--c-text);
}

.screen-appt-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--c-text-sm);
  font-weight: 400;
  color: var(--c-text-2);
}

/* The facts after the status pill, a dot between each ("lapses Sep 25 ·
   14 Laurel Ct"), so the hold's time and the address read as two. */
.screen-appt-sub > :not(.ui-pill) + span::before {
  content: '·';
  margin-right: 6px;
  color: var(--c-text-3);
}

/* The journey's ad click, opened: the creative beside its facts. */
.screen-journey-ad {
  display: flex;
  align-items: flex-start;
  gap: var(--c-space-3);
  min-width: 0;
}

.screen-timeline-item .ui-row-leading {
  align-self: flex-start;
  margin: 5px var(--c-space-1) 0 var(--c-space-hair);
}

.screen-timeline-text {
  flex: 1;
  min-width: 0;
}

.screen-timeline-text p {
  font-weight: 500;
}

.screen-timeline-when {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

/* ── Tenants list ──────────────────────────────────────── */

/* The two tenant screens (list, tenant) scroll with the window under
   the pinned PageHeader, like the rest of the shell. */
.screen-tenants,
.screen-tenant {
  min-width: 0;
  min-height: var(--c-screen-h);
}

/* One grouped list in a centred column, like a Settings pane. Each row
   is a free Row with a stretched link: the name's link covers the row
   (its ::after), the attention badge is a second link lifted above it. */
.screen-tenants-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-6);
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--c-space-6) var(--c-space-6) var(--c-space-8);
}

/* The working tenants' list carries no visible title (the page's is
   enough); its h2 stays for assistive tech. */
.screen-tenants-group > .ui-group-head {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.screen-tenants-search {
  width: 100%;
}

.screen-tenants-row {
  flex-wrap: nowrap;
  gap: var(--c-space-3);
  min-height: 56px;
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.screen-tenants-row:hover {
  background: var(--c-hover);
}

.screen-tenants-open {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  flex: 1;
  min-width: 0;
  color: inherit;
}

.screen-tenants-open::after {
  content: '';
  position: absolute;
  inset: 0;
}

.screen-tenants-open:focus-visible {
  outline: none;
}

.screen-tenants-open:focus-visible::after {
  border-radius: var(--c-radius-lg);
  box-shadow: inset 0 0 0 3px var(--c-focus);
}

.screen-tenants-text {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  min-width: 0;
}

.screen-tenants-name {
  font-weight: 600;
}

.screen-tenants-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--c-space-2);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-tenants-meta > * + *::before {
  content: '·';
  margin-right: var(--c-space-2);
  color: var(--c-text-3);
}

/* The Setup checklist's verdict in the meta line (db/174): a dot and a few words. */
.screen-tenants-setup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Dave's mode as a dot and a word, grey: it is read, not acted on. */
.screen-tenants-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
  white-space: nowrap;
}

/* A fixed slot so the pills line up whether or not a row has a count. */
.screen-tenants-count {
  display: inline-flex;
  justify-content: flex-end;
  flex: none;
  min-width: 28px;
}

.screen-tenants-queue {
  position: relative;
  z-index: 1;
  display: inline-flex;
  border-radius: var(--c-radius-full);
}

.screen-tenants-count {
  align-items: center;
  gap: var(--c-space-2);
}

.screen-tenants-backlog {
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
  white-space: nowrap;
  text-decoration: none;
}

.screen-tenants-backlog:hover {
  color: var(--c-text-2);
  text-decoration: underline;
}

.screen-tenants-row .ui-row-chevron {
  margin-left: 0;
}

/* ── Tenant page ───────────────────────────────────────── */

/* Take A "Panes": the tenant's settings sidebar (SettingsNav, sticky
   under the PageHeader) and one pane beside it, capped at a reading
   width; the whole split centred. */
/* In a pane, the contact's face and name open the full page. */
.screen-contact-open {
  color: inherit;
  text-decoration: none;
  border-radius: 999px;
}

.screen-contact-open--name {
  border-radius: 4px;
}

.screen-contact-open--name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.screen-contact-open:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* The homeowner reminders list (TenantBooking): when, how far, remove. */
.screen-reminder-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
  width: 100%;
}

.screen-reminder-amount {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
  flex: 1 1 auto;
  min-width: 0;
}

.screen-reminder-number {
  width: 72px;
}

.screen-reminder-row .ui-icon-button {
  margin-left: auto;
}

.screen-reminder-problem {
  margin: var(--c-space-1) 0 0;
  color: var(--c-danger);
  font-size: var(--c-text-sm, 12px);
}

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

.screen-reminder-save {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
}

/* The tenant calendar's busy-times picker (db/200): one centred column,
   as the tenant's settings pane reads beside its nav. */
.screen-busy-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-5);
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: var(--c-space-6) var(--c-space-6) var(--c-space-8);
}

.screen-busy-intro {
  margin: 0;
  color: var(--c-text-2);
}

.screen-busy-form {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-5);
}

.screen-busy-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--c-space-2);
}

@media (max-width: 720px) {
  .screen-busy-body {
    padding: var(--c-space-4) var(--c-space-4) var(--c-space-6);
  }
}

.screen-tenant-split {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  align-items: start;
  gap: var(--c-space-8);
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--c-space-6) var(--c-space-6) var(--c-space-8);
}

.screen-tenant-side {
  position: sticky;
  top: 76px;
}

.screen-tenant-pane {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-6);
  min-width: 0;
  max-width: 620px;
}

.screen-tenant-notice {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--c-space-4) var(--c-space-6) 0;
}

.screen-tenant-notice + .screen-tenant-split {
  padding-top: var(--c-space-4);
}

/* Phone only: every pane as a scrolling row of tabs above the pane, so
   moving between panes never means scrolling past a 4,000px Booking. */
.screen-tenant-tabs {
  display: none;
  gap: 6px;
  margin: 0 calc(-1 * var(--c-space-4));
  padding: 0 var(--c-space-4) 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.screen-tenant-tab {
  flex: none;
  padding: 6px var(--c-space-3);
  border-radius: var(--c-radius-full);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-size: var(--c-text-sm);
  text-decoration: none;
  white-space: nowrap;
}

.screen-tenant-tab[aria-current='page'] {
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 600;
}

/* Overview: Dave's mode as one sentence over its switch. */
.screen-tenant-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c-space-3);
  padding: var(--c-space-6) var(--c-space-4) var(--c-space-2);
  text-align: center;
}

.screen-tenant-hero-title {
  font-size: var(--c-text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.screen-tenant-hero-sub {
  max-width: 44ch;
  font-size: var(--c-text-lg);
  line-height: var(--c-leading);
  color: var(--c-text-2);
}

.screen-tenant-hero .ui-segmented {
  margin-top: var(--c-space-2);
}

/* At a glance: a summary, not a list of links; grey labels in a column,
   the row's chevron says it opens the pane. */
.screen-tenant-glance .ui-row-label {
  flex: 0 0 108px;
  font-weight: 400;
  color: var(--c-text-2);
}

.screen-tenant-glance .ui-row-value {
  font-weight: 500;
  overflow-wrap: break-word;
}

/* The header's queue count sits apart from its label. */
.screen-tenant .ui-page-header .ui-badge {
  margin-left: 6px;
}

.screen-tenant-saved {
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
  text-align: center;
}

/* The overall AI cap tripped: the one hero line that is a warning. */
.screen-tenant-hero-sub.screen-tenant-hero-alert {
  color: var(--c-danger);
}

/* Phone lines: Connect GoHighLevel above the numbers when the bridge has no install. */
.screen-tenant-connect {
  display: flex;
}

/* To finish › Resume import: the button, and why it would not start beside it. */
.screen-tenant-resume {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-tenant-resume-error {
  font-size: var(--c-text-sm);
  color: var(--c-danger);
}

/* Overview › Setup (db/174): a tick for a done line, the count beside the
   title, and the way live under the rows. */
.screen-setup-tick {
  color: var(--c-success);
  flex: none;
}

.screen-setup-count {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-setup-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-2) var(--c-space-3);
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-setup-foot > p {
  margin: 0;
  flex: 1 1 240px;
}

.screen-setup-golive {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
}

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

/* Advanced › Lead forms: "How to fix" under a failing sync's one line. */
.screen-tenant-fix {
  margin-top: var(--c-space-2);
  color: var(--c-text-2);
}

.screen-tenant-fix summary {
  cursor: pointer;
  color: var(--c-accent);
  font-weight: 500;
}

.screen-tenant-fix p {
  margin-top: var(--c-space-1);
}

.screen-tenant-aside {
  font-weight: 400;
  color: var(--c-text-2);
}

/* ── Knowledge pane ────────────────────────────────────── */

/* A section per Group, a wide SettingRow like the voicemail greeting:
   the writing box takes the pane's width and grows with the text from a
   tall start. A link to a section (#knowledge-faq) lands below the
   pinned PageHeader. */
.screen-knowledge-group {
  scroll-margin-top: 76px;
}

.screen-knowledge-row .ui-setting-control {
  flex-direction: column;
  align-items: stretch;
  gap: var(--c-space-3);
  padding: var(--c-space-2) 0 var(--c-space-1);
}

.screen-knowledge-text {
  width: 100%;
  min-height: 240px;
  padding: 10px 12px;
  font-size: var(--c-text-lg);
  line-height: 1.55;
  field-sizing: content;
}

/* The preview reads like the text Dave is given: the report's RichText
   (plain p, ul, ol, strong) where the writing box was, as tall. */
.screen-knowledge-preview {
  min-height: 240px;
  padding: 10px 12px;
  font-size: var(--c-text-lg);
  line-height: 1.55;
  overflow-wrap: break-word;
}

.screen-knowledge-preview :where(p, ul, ol) + :where(p, ul, ol) {
  margin-top: var(--c-space-3);
}

.screen-knowledge-preview :where(ul, ol) {
  padding-left: var(--c-space-5);
}

.screen-knowledge-preview ul {
  list-style: disc;
}

.screen-knowledge-preview ol {
  list-style: decimal;
}

.screen-knowledge-preview .ui-empty {
  padding: 0;
}

.screen-knowledge-savebar {
  display: flex;
  justify-content: flex-end;
}

/* Suggested from answers (db/181, KnowledgeSuggestions.tsx): one card a
   drafted entry, on the Knowledge pane's queue and under a resolved
   question on the Questions page. The question in bold over the answer,
   as it will read in the section; the actions in one row under it. */
.screen-suggestion-item + .screen-suggestion-item {
  border-top: 1px solid var(--c-separator);
}

.screen-suggestion {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  padding: var(--c-space-3) var(--c-space-4);
  min-width: 0;
}

.screen-suggestion.is-decided {
  gap: var(--c-space-1);
  color: var(--c-text-2);
}

.screen-suggestion-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-suggestion-meta {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-suggestion-title {
  font-weight: 600;
  overflow-wrap: break-word;
}

.screen-suggestion-body {
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.screen-suggestion-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--c-space-2);
}

.screen-suggestion-form .ui-select {
  align-self: flex-start;
}

.screen-suggestion-text {
  width: 100%;
  min-height: 96px;
  padding: 8px 10px;
  line-height: 1.5;
  field-sizing: content;
}

/* The section's whole text: as tall a start as the section's own box. */
.screen-suggestion-merge {
  min-height: 240px;
}

.screen-suggestion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-2);
}

/* Under a resolved question's thread: the card on its own surface. */
.screen-questions-suggestion {
  margin-top: var(--c-space-4);
  border: 1px solid var(--c-separator);
  border-radius: var(--c-radius-lg);
  background: var(--c-surface);
}

.screen-questions-suggestion-h {
  padding: var(--c-space-3) var(--c-space-4) 0;
  font-size: var(--c-text-sm);
  font-weight: 600;
  color: var(--c-text-2);
}

/* ── Sign-in and not-allowed ───────────────────────────── */

/* The bare canvas, no rail: the one thing on the page, centred. The
   signed-out pages that carry a single message (an expired link, a dead
   onboarding link) use it as it is. */
.screen-auth {
  display: grid;
  place-items: center;
  min-height: var(--c-window-h);
  padding: var(--c-space-8) var(--c-space-4);
  background: var(--c-bg);
}

/* The sign-in frame (components/crm/AuthFrame.tsx): sign-in, sign-up
   and not-allowed. A desktop gets one card in two columns, the value
   statement on a tint at the left and Clerk's box at the right; a phone
   gets a tinted band with the logo over a sheet holding the box (below).
   Everything in the panel is centred, on both: Clerk centres its own
   divider and footer, so the header, the message and the help follow
   it. Fields and buttons take the column's full width. */
.screen-auth--framed {
  padding: var(--c-space-8) var(--c-space-6);
  background: var(--c-auth-canvas);
}

.screen-auth-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  max-width: var(--c-auth-frame-w);
  min-height: min(var(--c-auth-frame-h), calc(var(--c-window-h) - 2 * var(--c-space-8)));
  overflow: hidden;
  border-radius: var(--c-radius-xl);
  background: var(--c-auth-card);
  box-shadow:
    0 0 0 var(--c-hairline) var(--c-separator),
    var(--c-shadow-popover);
}

.screen-auth-aside {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-8);
  padding: var(--c-space-8);
  background: var(--c-accent-tint);
}

.screen-auth-logo {
  display: block;
  width: var(--c-auth-logo-w);
}

.screen-auth-logo img {
  width: 100%;
  height: auto;
}

.screen-auth-logo-light {
  display: var(--c-show-light);
}

.screen-auth-logo-dark {
  display: var(--c-show-dark);
}

.screen-auth-pitch {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-5);
  margin: auto 0;
}

.screen-auth-pitch-title {
  font-size: var(--c-text-2xl);
  font-weight: 600;
  line-height: var(--c-leading-tight);
  letter-spacing: -0.01em;
  color: var(--c-text);
  text-wrap: balance;
}

.screen-auth-pitch-list {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  font-size: var(--c-text-lg);
  line-height: var(--c-leading);
  color: var(--c-text-2);
}

/* A short accent rule ahead of each point, in place of a bullet. */
.screen-auth-pitch-list li {
  display: flex;
  align-items: baseline;
  gap: var(--c-space-3);
}

.screen-auth-pitch-list li::before {
  content: '';
  flex: none;
  width: var(--c-space-3);
  height: var(--c-space-hair);
  border-radius: var(--c-radius-full);
  background: var(--c-accent);
  transform: translateY(calc(-1 * var(--c-space-1)));
}

.screen-auth-aside-foot {
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
}

/* The box sits in the middle of the room the help leaves it; the help
   keeps to the panel's foot. */
.screen-auth-panel {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-8);
  padding: var(--c-space-8) var(--c-space-8) var(--c-space-6);
}

.screen-auth-box {
  width: 100%;
  max-width: var(--c-auth-column-w);
  margin: auto;
}

/* Help: one short line over a button that rings Thomas. Its own block,
   ruled off from the form, so it reads as a way out rather than part of
   the sign-in. */
.screen-auth-help {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c-space-3);
  width: 100%;
  max-width: var(--c-auth-column-w);
  margin: 0 auto;
  padding-top: var(--c-space-5);
  border-top: var(--c-hairline) solid var(--c-separator);
  text-align: center;
}

.screen-auth-help-line {
  font-size: var(--c-text-lg);
  line-height: var(--c-leading);
  color: var(--c-text-2);
}

/* A secondary button in the clothes of Clerk's Google button: raised,
   edged, a finger's height; the phone glyph carries the accent. Raised
   rather than the grey fill, which would vanish on dark's grey card. */
.screen-auth-help .screen-auth-help-call {
  height: var(--c-tap-lg);
  padding-inline: var(--c-space-5);
  gap: var(--c-space-2);
  background: var(--c-raised);
  box-shadow: 0 0 0 1px var(--c-control-edge);
  font-size: var(--c-text-lg);
  font-weight: 600;
}

.screen-auth-help .screen-auth-help-call:hover {
  background: var(--c-surface-2);
}

.screen-auth-help-call .ui-icon {
  flex: none;
  color: var(--c-accent);
}

/* Not-allowed's own message, set like Clerk's header beside it. */
.screen-auth-message {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  text-align: center;
}

.screen-auth-title {
  font-size: var(--c-text-2xl);
  font-weight: 700;
  line-height: var(--c-leading-tight);
  letter-spacing: -0.01em;
  color: var(--c-text);
  text-wrap: balance;
}

.screen-auth-text {
  font-size: var(--c-text-lg);
  line-height: var(--c-leading);
  color: var(--c-text-2);
  text-wrap: pretty;
}

.screen-auth-actions {
  display: flex;
  flex-direction: column;
  margin-top: var(--c-space-4);
}

.screen-auth-actions .ui-button {
  height: var(--c-tap-lg);
  font-size: var(--c-text-xl);
  font-weight: 600;
}

/* A phone: the whole window, composed top to bottom. A band on the
   accent tint, edge to edge, holds the logo and the statement's
   headline; under it a sheet (the card's fill, rounded at the top)
   runs to the bottom edge, the box at its head and the help pinned to
   its foot, so nothing floats. Safe-area insets pad the band's top and
   the sheet's foot. At 390x844 the field and Continue sit well above
   the fold, with room for a Google button and Clerk's footer. */
@media (max-width: 720px) {
  .screen-auth--framed {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--c-accent-tint);
  }

  .screen-auth-frame {
    display: flex;
    flex: 1;
    flex-direction: column;
    max-width: none;
    min-height: 0;
    overflow: visible;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .screen-auth-aside {
    align-items: center;
    gap: var(--c-space-3);
    padding: calc(var(--c-space-6) + env(safe-area-inset-top)) var(--c-space-6) var(--c-space-6);
    background: none;
    text-align: center;
  }

  .screen-auth-logo {
    width: var(--c-auth-logo-w-sm);
  }

  .screen-auth-pitch {
    margin: 0;
  }

  .screen-auth-pitch-title {
    font-size: var(--c-text-lg);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--c-text-2);
  }

  .screen-auth-pitch-list,
  .screen-auth-aside-foot {
    display: none;
  }

  .screen-auth-panel {
    flex: 1;
    gap: var(--c-space-6);
    padding: var(--c-space-6) var(--c-space-5) calc(var(--c-space-5) + env(safe-area-inset-bottom));
    border-radius: var(--c-radius-xl) var(--c-radius-xl) 0 0;
    background: var(--c-auth-card);
    box-shadow:
      0 0 0 var(--c-hairline) var(--c-separator),
      0 calc(-1 * var(--c-space-1)) var(--c-space-6) var(--c-shadow);
  }

  .screen-auth-box {
    margin: 0 auto;
  }

  .screen-auth-help {
    margin-top: auto;
  }
}

/* Clerk's box, in the frame's clothes. CrmSignIn sets it flush (no card
   of its own) and hands over the palette; the rest is here, on Clerk's
   stable cl-* class names, two classes deep so it outweighs Clerk's
   single generated class. Header centred at the frame's size, like the
   rest of the panel; fields and buttons a finger's size (--c-tap-lg)
   with text at 17px so iOS never zooms; the footer quiet. */
.screen-auth-box .cl-card {
  gap: var(--c-space-6);
  background: none;
}

.screen-auth-box .cl-header {
  align-items: center;
  gap: var(--c-space-2);
  text-align: center;
}

.screen-auth-box .cl-headerTitle {
  font-size: var(--c-text-2xl);
  font-weight: 700;
  line-height: var(--c-leading-tight);
  letter-spacing: -0.01em;
  color: var(--c-text);
  text-wrap: balance;
}

.screen-auth-box .cl-headerSubtitle {
  text-wrap: pretty;
  font-size: var(--c-text-lg);
  line-height: var(--c-leading);
  color: var(--c-text-2);
}

/* A field's label stays with its field, at the field's left edge: the
   field is full width, so it is the column, not a line of text. */
.screen-auth-box .cl-formFieldLabel {
  font-size: var(--c-text-lg);
  font-weight: 500;
  color: var(--c-text);
}

.screen-auth-box .cl-formFieldInput {
  min-height: var(--c-tap-lg);
  padding-inline: var(--c-space-4);
  font-size: var(--c-text-xl);
}

.screen-auth-box .cl-otpCodeFieldInput {
  min-height: var(--c-tap-lg);
  font-size: var(--c-text-2xl);
}

/* Buttons take the console's pill (ui-button), fields keep the rounded
   rectangle, as everywhere else in the app. */
.screen-auth-box :is(.cl-formButtonPrimary, .cl-socialButtonsBlockButton, .cl-alternativeMethodsBlockButton) {
  min-height: var(--c-tap-lg);
  border-radius: var(--c-radius-full);
  font-size: var(--c-text-xl);
}

.screen-auth-box .cl-formButtonPrimary {
  font-weight: 600;
}

.screen-auth-box :is(.cl-footerActionText, .cl-footerActionLink, .cl-formResendCodeLink, .cl-identityPreviewText) {
  font-size: var(--c-text-lg);
}

.screen-auth-box :is(.cl-footerAction, .cl-identityPreview) {
  justify-content: center;
}

/* Clerk's "Secured by Clerk" line stays: taking it off is a paid-plan
   setting in Clerk's dashboard, not ours to hide. It sits quiet under
   the box, on no fill of its own. */
.screen-auth-box .cl-footer {
  background: none;
}

/* ── A rep's calendar onboarding (plan S3 T1) ─────────────
   The link a rep opens, usually signed out: no rail, one centred
   column of groups, phone first. */

.screen-onboarding {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 600px;
  min-height: var(--c-window-h);
  margin: 0 auto;
  padding: var(--c-space-8) var(--c-space-4) var(--c-space-8);
}

.screen-onboarding-head {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  /* The groups' titles' inset, so every left edge on the page lines up. */
  padding: 0 var(--c-space-3) var(--c-space-1);
}

/* The Google Calendar icon on its tile, the tenant and the title beside it. */
.screen-onboarding-brand {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  min-width: 0;
}

.screen-onboarding-logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--c-radius-lg);
  background: var(--c-raised);
  box-shadow:
    0 0 0 var(--c-hairline) var(--c-control-edge),
    0 2px 6px var(--c-shadow);
}

.screen-onboarding-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.screen-onboarding-kicker {
  margin: 0;
  font-size: var(--c-text-sm);
  font-weight: 600;
  line-height: var(--c-leading-tight);
  color: var(--c-text-2);
}

.screen-onboarding-title {
  margin: 0;
  font-size: var(--c-text-2xl);
  font-weight: 700;
  line-height: var(--c-leading-tight);
  color: var(--c-text);
}

.screen-onboarding-lead {
  margin: 0;
  font-size: var(--c-text-lg);
  line-height: 1.45;
  color: var(--c-text-2);
  text-wrap: pretty;
}

/* What connecting does: three short lines, an accent icon each. */
.screen-onboarding-points {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.screen-onboarding-points li {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  font-size: var(--c-text-message);
  line-height: var(--c-leading-tight);
  color: var(--c-text);
}

.screen-onboarding-points .ui-icon {
  flex: none;
  color: var(--c-accent);
}

/* A group title's small icon. */
.screen-onboarding-glyph {
  display: inline-flex;
  flex: none;
  color: var(--c-accent);
}

.screen-onboarding-account-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--c-space-1);
}
.screen-onboarding-account-row dt,
.screen-onboarding-account-value {
  margin: 0;
}
.screen-onboarding-account-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
  min-width: 0;
}
.screen-onboarding-account {
  /* Breaks at the @ (a <wbr> there); mid-word only when one half alone is too wide. */
  overflow-wrap: break-word;
  word-break: normal;
  min-width: 0;
  font-weight: 500;
  color: var(--c-text);
}

.screen-onboarding-connect {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--c-space-3);
  padding: var(--c-space-1) 0;
}

.screen-onboarding-connect p {
  margin: 0;
}

.screen-onboarding-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.screen-onboarding-day {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-2) var(--c-space-3);
  width: 100%;
  min-height: 32px;
}

.screen-onboarding-times {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-onboarding-times .ui-field {
  width: 112px;
}

/* A day's blocks of hours (a split day), stacked, with Add hours under them. */
.screen-onboarding-windows {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--c-space-2);
}

.screen-onboarding-add {
  align-self: flex-end;
}

/* Under a day's blocks: Copy to other days (the first working day) and Add hours. */
.screen-onboarding-day-tools {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--c-space-1);
}

/* "Copy to other days", open: inline under the day, since the group's
   rounded fill clips anything floating. */
.screen-onboarding-copy {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  flex-basis: 100%;
  padding: var(--c-space-3);
  border-radius: var(--c-radius-md);
  background: var(--c-surface);
}

.screen-onboarding-copy-title {
  margin: 0;
  font-size: var(--c-text-sm);
  font-weight: 600;
  color: var(--c-text-2);
}

.screen-onboarding-copy-all {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
  align-self: flex-start;
  font-size: var(--c-text-md);
  font-weight: 500;
  color: var(--c-text);
  cursor: pointer;
}

.screen-onboarding-copy-days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-2);
}

.screen-onboarding-copy-day {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 var(--c-space-3) 0 var(--c-space-2);
  border-radius: var(--c-radius-full);
  background: var(--c-raised);
  box-shadow: 0 0 0 var(--c-hairline) var(--c-control-edge);
  font-size: var(--c-text-md);
  font-weight: 500;
  color: var(--c-text);
  cursor: pointer;
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.screen-onboarding-copy-day:has(:checked) {
  background: var(--c-accent-tint);
  color: var(--c-accent);
}

.screen-onboarding-copy-day:has(:focus-visible) {
  box-shadow: 0 0 0 2px var(--c-focus);
}

.screen-onboarding-check {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--c-accent);
}

.screen-onboarding-copy-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--c-space-2);
}

.screen-onboarding-copied {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-1);
  flex-basis: 100%;
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-success);
}

.screen-onboarding-problem {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-danger);
}

.screen-onboarding-signin {
  flex-basis: 100%;
  text-align: center;
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
}

/* A booking rule: name and hint at the left, the number and its unit at the right. */
.screen-onboarding-rule {
  column-gap: var(--c-space-3);
}

/* One width for every unit, so the three boxes line up. */
.screen-onboarding-rule .ui-setting-unit {
  min-width: 6ch;
}

.screen-onboarding-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--c-space-2);
}

.screen-onboarding-actions--center {
  justify-content: center;
}

.screen-onboarding-actions--sticky {
  flex-direction: column;
  align-items: stretch;
}

.screen-onboarding-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--c-space-2);
}

.screen-onboarding-unsaved {
  margin-right: auto;
  font-size: var(--c-text-sm);
}

/* The way out, above the title on every step: back to Settings when
   signed in, to their day from a texted link. */
.screen-onboarding-bar {
  display: flex;
  margin: calc(-1 * var(--c-space-4)) 0 calc(-1 * var(--c-space-2));
}
.screen-onboarding-exit {
  display: inline-flex;
  align-items: center;
  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-onboarding-exit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--c-focus);
}
.screen-onboarding-done-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--c-space-2);
}

@media (max-width: 520px) {
  .screen-onboarding {
    padding: var(--c-space-5) var(--c-space-3) var(--c-space-6);
  }

  .screen-onboarding-logo {
    width: 44px;
    height: 44px;
  }

  .screen-onboarding-copy-day {
    min-height: var(--c-tap);
  }

  .screen-onboarding-copy-actions .ui-button {
    flex: 1;
  }

  .screen-onboarding-day-tools {
    justify-content: space-between;
  }

  .screen-onboarding-times {
    flex-basis: 100%;
  }

  .screen-onboarding-actions .ui-button {
    flex: 1;
  }

  .screen-onboarding-windows {
    align-items: stretch;
    flex-basis: 100%;
  }

  /* Save is a long scroll away on a phone: keep it in reach, so
     connecting Google never reads as done. */
  .screen-onboarding-actions--sticky {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 calc(-1 * var(--c-space-3));
    padding: var(--c-space-3) var(--c-space-3) calc(var(--c-space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--c-bg);
    border-top: var(--c-hairline) solid var(--c-separator);
  }

  .screen-onboarding-unsaved {
    display: none;
  }
}

/* The tenant page's Rep calendars rows (plan S3 T1): the team row, with
   the state pill beside the name and one fact per line. */

.screen-booking-row {
  align-items: flex-start;
}

/* The company calendar's hours, edited (TenantCalendarGroup): Cancel and Save at the right, the error above them. */
.screen-company-hours-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--c-space-2);
  width: 100%;
}

.screen-company-hours-actions .ui-alert {
  flex-basis: 100%;
}

.screen-booking-row .ui-avatar,
.screen-booking-row .screen-team-actions {
  margin-top: var(--c-space-hair);
}

.screen-booking-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-1) var(--c-space-2);
  min-width: 0;
}

.screen-booking-line {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  /* The actions drop under the facts, beside the avatar's column. */
  .screen-booking-row .screen-team-actions {
    order: 5;
    flex-basis: 100%;
    margin: 0;
    padding-left: calc(32px + var(--c-space-3) - var(--c-space-2));
  }
}

/* ── Team (db/127) ─────────────────────────────────────── */

/* The Team page, the Contacts reading: the people (SidebarList) in a
   column on the left, one person's card centred on the right. On a phone
   one pane at a time: the list, or (?person=) the card with a back link. */
.screen-team {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-width: 0;
  min-height: var(--c-screen-h);
}

.screen-team-side {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  min-width: 0;
  padding: var(--c-space-4) var(--c-space-3);
  box-shadow: var(--c-hairline) 0 0 var(--c-separator);
}

.screen-team-sidehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The admin's + button sets the height; a setter's header keeps it. */
  min-height: var(--c-control-md);
  padding: 0 var(--c-space-1) 0 var(--c-space-2);
}

/* Someone invited and not signed in yet: a hollow avatar, whatever the role. */
.ui-avatar.screen-team-pending {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--c-separator);
  color: var(--c-text-3);
}

.screen-team-invited-dot {
  display: inline-flex;
}

.screen-team-works {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-team-works-list {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
}

.screen-team-expiry {
  padding: 0 var(--c-space-4);
  color: var(--c-text-3);
  font-size: var(--c-text-sm);
}

.screen-team-expiry[data-expired] {
  color: var(--c-warning);
}

.screen-team-h {
  font-size: var(--c-text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.screen-team-detail {
  min-width: 0;
  padding: var(--c-space-8) var(--c-space-6);
}

.screen-team-bar {
  display: none;
}

.screen-team-card {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-6);
  max-width: 560px;
  margin: 0 auto;
}

.screen-team-remove-group {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
}

.screen-team-remove .ui-row-value {
  text-align: center;
}

/* The tenant page's Memberships group (TeamList) and its booking rows:
   the tenants list's row, without the stretched link (a row has its own
   Edit and Remove). */

.screen-team-row {
  flex-wrap: nowrap;
  gap: var(--c-space-3);
  min-height: 56px;
}

.screen-team-text {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  flex: 1;
  min-width: 0;
}

.screen-team-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen-team-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--c-space-2);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-team-meta > * + *::before {
  content: '·';
  margin-right: var(--c-space-2);
  color: var(--c-text-3);
}

.screen-team-text .ui-alert {
  margin-top: var(--c-space-1);
}

.screen-team-pills {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  flex: none;
}

.screen-team-actions {
  display: inline-flex;
  gap: var(--c-space-hair);
  flex: none;
  margin-right: calc(-1 * var(--c-space-1));
}

/* ── Team, narrow ──────────────────────────────────────── */

@media (max-width: 960px) {
  .screen-team {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .screen-team-detail {
    padding: var(--c-space-6) var(--c-space-4);
  }
}

@media (max-width: 720px) {
  .screen-team {
    grid-template-columns: minmax(0, 1fr);
  }

  .screen-team[data-view='detail'] .screen-team-side,
  .screen-team[data-view='list'] .screen-team-detail {
    display: none;
  }

  .screen-team-side {
    box-shadow: none;
  }

  /* On a phone the list is a list: the wide screen's default card is not
     open, so its row is not marked. */
  .screen-team[data-view='list'] .ui-sidebar-list-item[aria-current='true'] {
    background: transparent;
  }

  .screen-team-detail {
    padding: var(--c-space-2) var(--c-space-4) var(--c-space-8);
  }

  .screen-team-bar {
    display: flex;
    margin: 0 0 var(--c-space-2) calc(-1 * var(--c-space-2));
  }
}

/* ── Tenant screens, narrow ────────────────────────────── */

@media (max-width: 960px) {
  .screen-tenant-split {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--c-space-6);
  }
}

@media (max-width: 720px) {
  .screen-tenants-body {
    padding: var(--c-space-4) var(--c-space-3) var(--c-space-6);
  }

  /* One column: the pane, then the other panes as grouped lists. */
  .screen-tenant-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--c-space-8);
    padding: var(--c-space-4) var(--c-space-4) var(--c-space-8);
  }

  /* The pane tabs above the pane do the sidebar's job on a phone. */
  .screen-tenant-side {
    display: none;
  }

  /* The title gets the width; the header's buttons wrap under it. */
  .screen-tenant .ui-page-header {
    flex-wrap: wrap;
  }

  .screen-tenant .ui-page-header-who {
    flex-basis: 100%;
  }

  .screen-tenant .ui-page-actions {
    justify-content: flex-start;
  }

  .screen-tenant-tabs {
    display: flex;
  }

  .screen-tenant-hero {
    padding-top: var(--c-space-2);
  }

  .screen-tenant-hero .ui-segmented {
    align-self: stretch;
  }

  .screen-tenant-notice {
    padding: var(--c-space-3) var(--c-space-3) 0;
  }

  .screen-tenants-row,
  .screen-team-row {
    flex-wrap: wrap;
  }

  .screen-team-pills {
    order: 5;
    flex-basis: 100%;
    justify-content: flex-start;
    padding-left: calc(32px + var(--c-space-3)); /* the md avatar and the gap */
  }

  /* The mode drops under the name, beside the avatar's column, as a
     third line of the same row. */
  .screen-tenants-mode {
    order: 5;
    flex-basis: 100%;
    padding-left: calc(32px + var(--c-space-3)); /* the md avatar and the gap */
  }

  .screen-tenants-row:has(.screen-tenants-mode) {
    row-gap: 2px;
  }
}

@media (max-width: 960px) {
  .screen-contact {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: none;
    height: auto;
  }

  .screen-contact-header,
  .screen-contact-main,
  .screen-contact-side {
    grid-area: auto;
  }

  .screen-contact-main {
    height: auto;
    overflow: visible;
  }

  .screen-contact-scroll {
    overflow: visible;
  }

  .screen-composer {
    position: sticky;
    bottom: 0;
    z-index: var(--c-z-sticky);
    box-shadow: 0 calc(-1 * var(--c-hairline)) 0 var(--c-separator);
  }

  .screen-contact-side {
    height: auto;
    overflow: visible;
    padding: var(--c-space-4);
  }
}

/* ── Contact view, phone and compact ───────────────────
   The phone's bar, strip and card (ContactInfo.tsx), as they look
   wherever they show: below 720px on the contact page, and at every
   width in a compact view (the queue's drawer). Hidden otherwise (the
   display: none above), so these never reach a desktop page. */

.screen-contact-bar {
  grid-template-columns: var(--c-tap) minmax(0, 1fr) var(--c-tap);
  align-items: center;
  flex: none;
  padding: var(--c-space-hair) var(--c-space-2) var(--c-space-1);
  background: var(--c-bar);
  box-shadow: 0 var(--c-hairline) 0 var(--c-separator);
}

.screen-contact-bar-back {
  display: grid;
  place-items: center;
  width: var(--c-tap);
  height: var(--c-tap);
  border-radius: var(--c-radius-full);
  color: var(--c-accent);
}

/* Balances the back button, so the name sits at the bar's centre. */
.screen-contact-bar-end {
  width: var(--c-tap);
}

.screen-contact-bar-back:active,
.screen-contact-bar-who:active {
  background: var(--c-hover);
}

.screen-contact-bar-who {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: var(--c-space-2);
  max-width: 100%;
  min-width: 0;
  padding: var(--c-space-hair) var(--c-space-2);
  border: 0;
  border-radius: var(--c-radius-md);
  background: none;
  font: inherit;
  color: var(--c-text);
  cursor: pointer;
}

/* Compact: a small face inline with the name, so the thread keeps the
   screen; the strip under it carries the state. */
.screen-contact-bar-who .ui-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  font-size: var(--c-text-sm);
}

.screen-contact-bar-name {
  display: flex;
  align-items: center;
  gap: var(--c-space-hair);
  min-width: 0;
  max-width: 100%;
  font-size: var(--c-text-lg);
  font-weight: 600;
  line-height: var(--c-leading-tight);
}

.screen-contact-bar-name .ui-icon {
  color: var(--c-text-3);
}

.screen-contact-bar-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Centred under the bar's centred name, so the two read as one column. */
.screen-contact-strip {
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 6px;
  padding: 6px var(--c-space-3);
  background: var(--c-bg);
  box-shadow: 0 var(--c-hairline) 0 var(--c-separator);
}

/* The strip's panels (the status chip's, the reach pill's, the
   replies') drop under the strip at its width, not from their pill,
   which may sit anywhere on its line. */
.screen-contact-strip {
  position: relative;
}

.screen-contact-strip .ui-popover {
  position: static;
}

.screen-contact-strip .ui-popover-panel {
  left: var(--c-space-3);
  right: var(--c-space-3);
  width: auto;
  max-width: none;
}

/* The strip's acknowledgement in a pill's height, not a full button's. */
.screen-contact-strip .ui-button {
  height: 26px;
  padding: 0 var(--c-space-2);
  font-size: var(--c-text-sm);
}

.screen-contact-card-bar {
  position: sticky;
  top: var(--c-sticky-top);
  z-index: var(--c-z-sticky);
  margin: 0 calc(-1 * var(--c-space-4));
  padding: var(--c-space-1) var(--c-space-2);
  background: var(--c-bar);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.screen-contact-card-back {
  display: inline-flex;
  align-items: center;
  height: var(--c-tap);
  padding: 0 var(--c-space-2) 0 0;
  border: 0;
  border-radius: var(--c-radius-md);
  background: none;
  font: inherit;
  font-size: var(--c-text-xl);
  color: var(--c-accent);
  cursor: pointer;
}

/* The header's actions as the Contacts card's tiles: icon over label. */
.screen-contact-card-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--c-space-2);
}

/* Direct tiles only: a tile's own sheet (the Actions menu's dialogs) keeps the dialog look. */
.screen-contact-card-actions > :not(dialog) {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  min-width: 0;
}

.screen-contact-card-actions > .ui-button,
.screen-contact-card-actions > :not(dialog) > .ui-button {
  flex-direction: column;
  gap: var(--c-space-1);
  width: 100%;
  height: auto;
  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);
  font-size: var(--c-text-sm);
  color: var(--c-accent);
}

.screen-contact-card-actions > .ui-button .ui-icon,
.screen-contact-card-actions > :not(dialog) > .ui-button .ui-icon {
  width: 20px;
  height: 20px;
}

.screen-contact-card-actions .ui-pill {
  align-self: center;
}

/* ── Contact view, phone ─────────────────────────────────
   Messages on a phone: the thread fills the window under a slim bar
   with the name centred, the composer pinned at its foot. The header
   and the side column step aside; tapping the name opens the contact
   card in their place ([data-info], ?info=1): the big avatar and name,
   the header's actions as tiles, then the side column's groups. */
@media (max-width: 720px) {
  .screen-contact-header {
    display: none;
  }

  .screen-contact-main {
    height: var(--c-screen-h);
    overflow: hidden;
  }

  .screen-contact-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .screen-contact-side {
    display: none;
  }

  .screen-contact-bar {
    display: grid;
  }

  .screen-contact-strip {
    display: flex;
  }

  .screen-contact[data-info] .screen-contact-main {
    display: none;
  }

  .screen-contact[data-info] .screen-contact-card {
    display: flex;
    flex-direction: column;
    gap: var(--c-space-5);
    padding: 0 var(--c-space-4);
  }

  .screen-contact[data-info] .screen-contact-side {
    display: flex;
    padding: var(--c-space-5) var(--c-space-4) calc(var(--c-space-7) + env(safe-area-inset-bottom));
  }

  .ui-page-header {
    flex-wrap: wrap;
    padding: var(--c-space-3);
  }

  .ui-page-actions {
    justify-content: flex-start;
  }

  .screen-contact-threads {
    padding: var(--c-space-3);
  }

  .screen-thread-switch {
    padding: var(--c-space-2) var(--c-space-3);
  }

  /* Pinned to the foot of the window: clear of the home bar. */
  .screen-composer {
    padding: var(--c-space-2) var(--c-space-3) calc(var(--c-space-3) + env(safe-area-inset-bottom));
  }

  .ui-msg {
    max-width: 86%;
  }

  .ui-draft {
    width: 100%;
  }
}

/* ── Attention queue ───────────────────────────────────── */

/* Lanes by what you will do (take C): three columns of capped Lanes
   (components/crm/ui/Lane.tsx), two under 1180, one on a phone. Each
   lane is only as tall as its first five items, so the grid stays a
   page however long the queue gets. */

.screen-queue-body,
.screen-conversations-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-6);
  padding: var(--c-space-5) var(--c-space-6) var(--c-space-8);
}

.screen-queue,
.screen-conversations {
  min-width: 0;
}

.screen-queue-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--c-space-6) var(--c-space-5);
}

/* Reps who can't be booked (CalendarProblems), above the lanes. */
.screen-queue-calendars {
  max-width: 760px;
}
.screen-queue-calendars-list {
  margin: var(--c-space-1) 0 0;
  padding-left: var(--c-space-4);
}
.screen-queue-calendars-list a {
  color: inherit;
  font-weight: 600;
}

/* Answer Dave: the box takes the row, Send stays beside it. */
.screen-queue-answer {
  display: flex;
  flex: 1;
  gap: var(--c-space-2);
  min-width: 0;
}

.screen-queue-answer > .ui-input {
  flex: 1;
}

/* "Same person as…": the form opens under the item's line. */
.screen-queue-claim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-queue-claim > .ui-field {
  flex: 1 1 240px;
}

.screen-queue-claim > .ui-alert {
  flex-basis: 100%;
}

.screen-queue-more {
  padding: 0 var(--c-space-3);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

/* db/162: a failed send's raw error after our sentence, the reasons a
   number can be bad, and a feedback note's label. */
.screen-queue-error {
  color: var(--c-text-3);
}

/* The failed text's age, after it on its panel. */
.screen-queue-quote-age {
  color: var(--c-text-3);
  white-space: nowrap;
}

/* A failed text over an hour old: asked before it goes again. */
.screen-queue-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-queue-confirm-text {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

/* A draft's whole text, kept as written (line breaks), and the control
   that opens a long one before Send shows. */
.screen-queue .ui-action-quote {
  white-space: pre-wrap;
}

.screen-queue-readmore {
  align-self: flex-start;
  margin: -4px 0 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--c-accent);
  font: inherit;
  font-size: var(--c-text-sm);
  font-weight: 600;
  cursor: pointer;
}

.screen-queue-readmore:hover {
  text-decoration: underline;
}

.screen-queue-readmore:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--c-radius-sm);
}

/* The queue's tick: a 44px target around the ring, which stays its size. */
.screen-queue .ui-action-item-leading .screen-task-check {
  position: relative;
}

.screen-queue .ui-action-item-leading .screen-task-check::after {
  content: '';
  position: absolute;
  inset: calc((var(--c-control-sm) - 44px) / 2);
}

/* FYI: the owner has these; muted, last. */
.screen-queue-lane--fyi .ui-action-item-name {
  color: var(--c-text-2);
}

.screen-queue-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-2);
}

.screen-queue-label {
  font-weight: 600;
  color: var(--c-text);
}

/* The conversation drawer (QueueDrawer.tsx): the thread beside the
   queue, a column at the window's right edge on the canvas with the
   window's hairline edge, as Drawer is. The queue narrows to make room
   (two lanes, one under 1180) and stays usable. The pane inside is the
   conversations list's (ThreadPreviewPane), its thread padded for the
   narrower column. Below 720px it is a full-screen sheet with
   "‹ Attention" at its top, over the page, which then does not scroll. */
.screen-queue {
  --queue-drawer-w: min(var(--c-queue-drawer-w), 46vw);
}

.screen-queue:has(.screen-queue-drawer) {
  padding-right: var(--queue-drawer-w);
}

.screen-queue:has(.screen-queue-drawer) .screen-queue-lanes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.screen-queue-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--c-z-rail);
  display: flex;
  flex-direction: column;
  width: var(--queue-drawer-w);
  background: var(--c-bg);
  box-shadow: calc(-1 * var(--c-hairline)) 0 0 var(--c-separator);
  outline: none;
}

.screen-queue-drawer > .screen-convs-pane,
.screen-queue-drawer > .screen-contact--compact {
  flex: 1;
}

.screen-queue-drawer .screen-convs-pane-thread {
  padding: var(--c-space-4) var(--c-space-5);
}

.screen-queue-drawer .screen-convs-pane-note,
.screen-queue-drawer .screen-convs-pane-claim {
  padding: 0 var(--c-space-5) var(--c-space-3);
}

.screen-queue-drawer:focus-visible {
  outline: none;
}

/* Its bar: the walk through the queue (j / k) at the left, the close at
   the right; on a phone "‹ Attention" at the left and the walk at the
   right. "Open full page" is the pane's (a contact's: its card's bar). */
.screen-queue-drawer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  min-height: 44px;
  padding: 0 var(--c-space-3);
}

.screen-queue-drawer-back {
  display: none;
}

.screen-queue-drawer-walk {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-hair);
}

/* The thread on its way: bubbles' worth of grey from the foot up,
   theirs at the left, ours at the right. */
.screen-queue-drawer-skeleton {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--c-space-3);
  padding: var(--c-space-4) var(--c-space-5) var(--c-space-6);
}

.screen-queue-drawer-bubble {
  display: block;
  width: 64%;
  height: 44px;
  border-radius: var(--c-radius-bubble);
}

.screen-queue-drawer-bubble--short {
  width: 42%;
  height: 34px;
}

.screen-queue-drawer-bubble--out {
  align-self: flex-end;
}

.screen-queue-drawer-bubble--tall {
  height: 76px;
}

.screen-queue-drawer-error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c-space-3);
  padding: 0 var(--c-space-5) var(--c-space-6);
}

@media (max-width: 1180px) {
  .screen-queue:has(.screen-queue-drawer) .screen-queue-lanes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .screen-queue:has(.screen-queue-drawer) {
    padding-right: 0;
  }

  :root:has(.screen-queue-drawer) {
    overflow: hidden;
  }

  .screen-queue-drawer {
    left: 0;
    z-index: var(--c-z-overlay);
    width: auto;
    padding-top: env(safe-area-inset-top);
    box-shadow: none;
  }

  .screen-queue-drawer-bar {
    min-height: var(--c-topbar-h);
    padding: 0 var(--c-space-2);
    background: var(--c-bar);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 var(--c-hairline) 0 var(--c-separator);
  }

  .screen-queue-drawer-back {
    display: inline-flex;
  }

  .screen-queue-drawer-close {
    display: none;
  }

  /* The conversations list drops its pane on a phone; the drawer is one. */
  .screen-queue-drawer .screen-convs-pane {
    display: flex;
  }

  .screen-queue-drawer .screen-convs-pane-thread {
    padding: var(--c-space-4) var(--c-space-3);
  }

  .screen-queue-drawer .screen-convs-pane-note,
  .screen-queue-drawer .screen-convs-pane-claim {
    padding: 0 var(--c-space-3) var(--c-space-3);
  }
}

/* A missed visit (2026-10-01, NoShowTask.tsx): the title, what happened,
   the rep's note, the next step; then Rebook / Text them / Mark lost,
   each opening its panel under the buttons. The queue card and the
   contact's task list share it. */
.screen-noshow {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  min-width: 0;
  font-size: var(--c-text-sm);
  line-height: var(--c-leading);
  color: var(--c-text-2);
}

.screen-noshow p {
  margin: 0;
}

.screen-noshow-title {
  font-weight: 600;
  color: var(--c-text);
}

.screen-noshow-text {
  color: var(--c-text-2);
}

.screen-noshow-note {
  padding: var(--c-space-1) var(--c-space-2);
  border-left: 2px solid var(--c-warning);
  border-radius: 0 var(--c-radius-sm) var(--c-radius-sm) 0;
  background: var(--c-warning-tint);
  color: var(--c-text);
}

.screen-noshow-note-label,
.screen-noshow-next-label {
  font-size: var(--c-text-xs);
  font-weight: 600;
  color: var(--c-text-3);
}

.screen-noshow-next {
  color: var(--c-text);
}

.screen-noshow-actions {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--c-space-2);
  min-width: 0;
}

.screen-noshow-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-2);
}

.screen-noshow-panel {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  max-width: 520px;
  padding: var(--c-space-3);
  border-radius: var(--c-radius-md);
  background: var(--c-surface);
}

.screen-noshow-panel-note {
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-noshow-panel-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--c-space-2);
}

.screen-task .screen-noshow,
.screen-task .screen-noshow-actions {
  margin-top: var(--c-space-1);
}

@media (max-width: 720px) {
  .screen-noshow-panel {
    max-width: none;
    padding: var(--c-space-2);
  }
}

/* A phone row's menu on the contact (db/162): the badge, Primary and the
   menu button at the right; the reasons in a row under it. */
.screen-phone-value {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--c-space-1);
}

.screen-phone-value .ui-mono {
  white-space: nowrap;
}

.screen-phone-trailing {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-phone-menu-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  width: 100%;
}

.screen-phone-menu-title {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-phone-menu-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-2);
}

.screen-phone-menu .ui-alert {
  width: 100%;
}

/* ── Console toasts (db/162): a tick's Undo, an offer after an action ── */

.screen-toasts {
  position: fixed;
  left: var(--c-space-3);
  right: var(--c-space-3);
  bottom: calc(var(--c-space-4) + env(safe-area-inset-bottom, 0px));
  z-index: var(--c-z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c-space-2);
  pointer-events: none;
}

.screen-toast {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  width: 100%;
  max-width: 30rem;
  min-height: var(--c-control-lg, 40px);
  padding: var(--c-space-1) var(--c-space-1) var(--c-space-1) var(--c-space-4);
  border-radius: var(--c-radius-lg);
  background: var(--c-text);
  color: var(--c-bg);
  font-size: var(--c-text-sm);
  font-weight: 500;
  box-shadow: var(--c-shadow-popover);
  pointer-events: auto;
  animation: screen-field-toast-in var(--c-motion) var(--c-ease);
}

.screen-toast--error {
  background: var(--c-danger);
  color: var(--c-on-accent);
}

.screen-toast-text {
  flex: 1;
  min-width: 0;
}

.screen-toast-action {
  flex: none;
  padding: var(--c-space-1) var(--c-space-2);
  border: 0;
  border-radius: var(--c-radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.screen-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;
}

/* ── Conversations list ────────────────────────────────── */

/* The filter bar: the selects in one row on a grouped fill, so the
   controls take the raised fill (as they do in a grouped list). */
/* The toolbar: the search box, the count and the sort on one line, the
   filter chips under it. No fill of its own: the chips carry theirs. */
.screen-conv-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  margin-bottom: calc(-1 * var(--c-space-2));
}

.screen-conv-toolbar-top {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
}

.screen-list-search {
  flex: 1 1 auto;
  max-width: 420px;
}

.screen-conv-count {
  margin-left: auto;
  color: var(--c-text-2);
  font-size: var(--c-text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.screen-conv-sort {
  flex: none;
  width: 150px;
}

.screen-conv-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.screen-queue-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
  margin-bottom: calc(-1 * var(--c-space-2));
}

/* The Messages sidebar, widened: a gutter for the attention dot, the
   avatar, then fixed columns so the stages and times line up. */
.screen-conv-list {
  min-width: 0;
}

.screen-conv-link {
  display: grid;
  grid-template-columns: 8px 32px minmax(140px, 220px) minmax(0, 1fr) 228px 156px 14px;
  grid-template-areas: 'flag avatar who preview pills time go';
  align-items: center;
  gap: 0 var(--c-space-3);
  min-height: 56px;
  padding: var(--c-space-2) var(--c-space-3) var(--c-space-2) var(--c-space-2);
  color: inherit;
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

a.screen-conv-link:hover {
  background: var(--c-hover);
}

a.screen-conv-link:active {
  background: var(--c-pressed);
}

.screen-conv-flag {
  grid-area: flag;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen-conv-flag > span {
  display: inline-flex;
}

.screen-conv-avatar {
  grid-area: avatar;
}

.screen-conv-who {
  grid-area: who;
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  min-width: 0;
}

.screen-conv-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.screen-conv-name-text,
.screen-conv-tenant,
.screen-conv-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen-conv-name-text {
  font-weight: 600;
}

.screen-conv-tenant {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-conv-preview {
  grid-area: preview;
  min-width: 0;
  color: var(--c-text-2);
}

.screen-conv-row.is-unread .screen-conv-preview {
  color: var(--c-text);
}

.screen-conv-you {
  color: var(--c-text-3);
}

.screen-conv-pills {
  grid-area: pills;
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-1);
}

.screen-conv-time {
  grid-area: time;
  justify-self: end;
  font-size: var(--c-text-xs);
  color: var(--c-text-2);
  white-space: nowrap;
}

.screen-conv-go {
  grid-area: go;
  color: var(--c-text-3);
}

.screen-conv-more {
  display: flex;
  justify-content: center;
}

@media (max-width: 1180px) {
  .screen-queue-lanes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .screen-conv-link {
    grid-template-columns: 8px 32px minmax(0, 1fr) auto 14px;
    grid-template-areas:
      'flag avatar who time go'
      'flag avatar preview pills go';
    gap: var(--c-space-1) var(--c-space-3);
  }

  .screen-conv-pills {
    justify-content: flex-end;
  }
}

@media (max-width: 720px) {
  .screen-queue-body,
  .screen-conversations-body {
    gap: var(--c-space-5);
    padding: var(--c-space-4) var(--c-space-3) var(--c-space-6);
  }

  .screen-queue-lanes {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--c-space-5);
  }

  .screen-conv-go {
    display: none;
  }

  .screen-conv-toolbar-top {
    flex-wrap: wrap;
  }

  .screen-list-search {
    flex-basis: 100%;
    max-width: none;
  }

  .screen-conv-count {
    margin-left: 0;
  }

  .screen-conv-link {
    grid-template-columns: 8px 32px minmax(0, 1fr) auto;
    grid-template-areas:
      'flag avatar who time'
      'flag avatar preview preview'
      'flag avatar pills pills';
    align-items: start;
    padding-right: var(--c-space-3);
  }

  /* The dot centred on the avatar, not on the three lines. */
  .screen-conv-flag {
    align-self: start;
    height: 32px;
  }

  .screen-conv-pills {
    justify-content: flex-start;
  }
}

/* ── Conversations, split view (take C: list + preview) ── */

/* The Messages window: a grey sidebar with the list, the selected
   thread beside it. The sidebar's controls sit on its grey, so they take
   the raised fill (as the rail's do). The older screen-conv-* rules above
   are the list before the split; nothing renders them any more. */
.screen-convs {
  display: grid;
  grid-template-columns: 372px minmax(0, 1fr);
  height: var(--c-screen-h);
}

.screen-convs-list {
  --c-control-fill: var(--c-raised);
  --c-control-lift: 0 0 0 var(--c-hairline) var(--c-control-edge), 0 1px 1px var(--c-shadow);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--c-surface);
  box-shadow: var(--c-hairline) 0 0 var(--c-separator);
}

.screen-convs-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--c-space-4) var(--c-space-3) var(--c-space-3);
}

.screen-convs-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-2);
  padding: 0 var(--c-space-1);
}

.screen-convs-title {
  font-size: var(--c-text-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.screen-convs-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.screen-convs-filters .screen-list-search {
  max-width: none;
}

.screen-convs-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 var(--c-space-1);
}

.screen-convs-chips[hidden] {
  display: none;
}

.screen-convs-clear {
  margin-left: auto;
}

.screen-convs-sort {
  position: relative;
  flex: none;
  width: 140px;
}

.screen-convs-sort-face {
  display: none;
}

/* A phone: the select's own text is 16px (base.css, no zoom on focus),
   bigger than every chip beside it; it is drawn transparent and the
   chips' size shows over it. The popup is native, so its options keep
   the theme's colours (.ui-select-native option). */
@media (max-width: 720px) {
  .screen-convs-sort .ui-select-native {
    color: transparent;
  }

  .screen-convs-sort-face {
    display: block;
    position: absolute;
    inset: 0 calc(var(--c-space-1) + 14px) 0 var(--c-space-2);
    z-index: 1;
    overflow: hidden;
    line-height: var(--c-control-sm);
    font-size: var(--c-text-xs);
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
  }
}

.screen-convs-rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--c-space-2) var(--c-space-3);
  scrollbar-width: thin;
}

.screen-convs-rows-list {
  display: flex;
  flex-direction: column;
}

.screen-convs-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c-space-2);
  padding: var(--c-space-3) 0;
}

.screen-convs-count {
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}

/* The pane: the contact page's header, the thread opened at its newest
   message (column-reverse, as the contact page does it), the foot. */
.screen-convs-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  transition: opacity var(--c-motion) var(--c-ease);
}

/* A thread with no contact on its own page (phones): the pane is the page. */
.screen-convs-pane--page {
  flex: 1;
}

.screen-convs-pane.is-pending {
  opacity: 0.6;
}

.screen-convs-pane-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse;
  scrollbar-width: thin;
}

.screen-convs-pane-thread {
  display: flex;
  flex-direction: column;
  padding: var(--c-space-4) var(--c-space-7);
}

.screen-convs-earlier {
  align-self: center;
  margin-bottom: var(--c-space-2);
}

.screen-convs-foot-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-3);
  padding: var(--c-space-3) var(--c-space-6) var(--c-space-4);
}

.screen-convs-why {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  min-width: 0;
  font-size: var(--c-text-md);
  color: var(--c-text-2);
}

.screen-convs-why b {
  color: var(--c-text);
  font-weight: 600;
}

.screen-convs-why[data-tone='danger'] b {
  color: var(--c-danger);
}

.screen-convs-why[data-tone='warning'] b {
  color: var(--c-warning);
}

.screen-convs-why[data-tone='accent'] b {
  color: var(--c-accent);
}

/* Above the thread: "not in this list" and a stranger's "Same person
   as…"; below it, after the foot, the reply box (the contact page's
   composer, on the pane's own background). */
.screen-convs-pane-note,
.screen-convs-pane-claim {
  padding: 0 var(--c-space-6) var(--c-space-3);
}

.screen-convs-pane-reply .screen-composer {
  background: transparent;
  padding-top: 0;
}

/* A thread with no contact on its own page (app/crm/conversations/[id]):
   the pane, full height, with Back above it. */
.screen-convs-solo {
  display: flex;
  flex-direction: column;
  height: var(--c-screen-h);
  max-width: 880px;
  margin: 0 auto;
}

.screen-convs-solo-back {
  align-self: flex-start;
  margin: var(--c-space-3) var(--c-space-4) 0;
}

.screen-convs-solo .screen-convs-pane {
  flex: 1;
}

@media (max-width: 960px) {
  .screen-convs {
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .screen-convs-pane-thread {
    padding: var(--c-space-4) var(--c-space-5);
  }
}

/* A tablet or a narrow laptop: the list gives the thread room. */
@media (max-width: 900px) {
  .screen-convs {
    grid-template-columns: 284px minmax(0, 1fr);
  }

  .screen-convs-pane-note,
  .screen-convs-pane-claim {
    padding: 0 var(--c-space-4) var(--c-space-3);
  }
}

/* A phone gets the list only; a tap opens the contact page, as before. */
@media (max-width: 720px) {
  .screen-convs {
    display: block;
    height: auto;
  }

  .screen-convs-list {
    --c-control-fill: var(--c-surface);
    --c-control-lift: 0 0 0 0 transparent;
    background: var(--c-bg);
    box-shadow: none;
  }

  .screen-convs-rows {
    overflow: visible;
    padding: 0 var(--c-space-2) var(--c-space-4);
  }

  .screen-convs-pane {
    display: none;
  }

  .screen-convs-solo {
    height: auto;
    min-height: var(--c-screen-h);
  }

  .screen-convs-solo .screen-convs-pane {
    display: flex;
  }

  .screen-convs-solo .screen-convs-pane-note,
  .screen-convs-solo .screen-convs-pane-claim {
    padding: 0 var(--c-space-3) var(--c-space-3);
  }
}

/* ── Conversations, the preview's side column ────────────
   The contact's side column (ContactSide.tsx) beside the preview's
   thread, under the header, as the contact page lays them out. It
   waits behind the header's Details at every width (PreviewDetails.tsx,
   .is-details-open), closed by default: closed, the thread has the
   whole pane; open from 1280px up, both sit side by side; open and
   narrower, the column slides in over the thread's right edge. Below
   720px the pane is gone with it, except in the queue's drawer, which
   is a full-screen sheet there and slides the column in over it. */
.screen-convs-pane-split {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.screen-convs-pane-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.screen-convs-pane-side {
  display: flex;
  min-width: 0;
  min-height: 0;
  background: var(--c-bg);
  box-shadow: inset var(--c-hairline) 0 0 var(--c-separator);
}

/* The contact page's column, scrolling on its own at every width (the
   page's own 960px rule lets it run long; here it is a pane's column). */
.screen-convs-pane-side .screen-convs-side {
  flex: 1;
  height: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--c-space-4) var(--c-space-4) var(--c-space-7);
}

.screen-convs-side-out {
  align-self: flex-start;
}

.screen-convs-details-toggle {
  flex-shrink: 0;
}

/* The column on its way: a few groups of grey, the groups' own shapes. */
.screen-convs-side-skeleton {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.screen-convs-side-skeleton-group {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
}

.screen-convs-side-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  padding: var(--c-space-3) var(--c-space-4);
  border-radius: var(--c-radius-lg);
  background: var(--c-group-fill);
}

/* Open and side by side, the thread is narrower than without the
   column: its bubbles keep the contact page's tighter gutter. Closed,
   the column is out of the grid and the thread has the pane. */
@media (min-width: 1280px) {
  .screen-convs-pane-split.is-details-open {
    grid-template-columns: minmax(0, 1fr) var(--c-side-width);
  }

  .screen-convs-pane-split:not(.is-details-open) .screen-convs-pane-side {
    display: none;
  }

  .screen-convs-pane-split.is-details-open .screen-convs-pane-thread {
    padding: var(--c-space-4) var(--c-space-5);
  }
}

@media (max-width: 1279px) {
  .screen-convs-pane-side {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--c-z-sticky);
    width: min(var(--c-side-width), 100%);
    box-shadow: var(--c-shadow-popover);
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform var(--c-motion) var(--c-ease),
      visibility 0s linear var(--c-motion);
  }

  .screen-convs-pane-split.is-details-open .screen-convs-pane-side {
    transform: none;
    visibility: visible;
    transition:
      transform var(--c-motion) var(--c-ease),
      visibility 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen-convs-pane-side {
    transition: none;
  }
}

/* ── Contact view, pane layout ───────────────────────────
   The contact view beside a list (ContactView.tsx, layout="pane": the
   conversations pane), the same view as the
   contact page laid out for a pane: the header over the split above
   (PreviewDetails.tsx) rather than the page's grid, the thread and the
   composer filling the split's main column, the side column behind
   Details. It keeps its header at every width a pane has (the page
   swaps it for a phone bar below 720px), and its thread scrolls on its
   own at every width (the page lets it run long below 960px). */
.screen-contact--pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: auto;
}

.screen-contact--pane .screen-contact-main {
  flex: 1;
  overflow: hidden;
}

/* Open and side by side, the thread keeps the contact page's tighter gutter. */
@media (min-width: 1280px) {
  .screen-convs-pane-split.is-details-open .screen-contact-threads {
    padding: var(--c-space-4) var(--c-space-5);
  }
}

@media (max-width: 960px) {
  .screen-contact--pane .screen-contact-main {
    height: auto;
    overflow: hidden;
  }

  .screen-contact--pane .screen-contact-scroll {
    overflow-y: auto;
  }

  .screen-contact--pane .screen-contact-threads {
    padding: var(--c-space-4) var(--c-space-5);
  }
}

@media (max-width: 720px) {
  .screen-contact--pane .screen-contact-header {
    display: flex;
  }

  .screen-contact--pane .screen-contact-side {
    display: flex;
  }
}

/* The contact view in a narrow column (ContactView.tsx, layout="compact":
   the queue's drawer, 2026-10-12): the phone's layout at every width.
   The bar's name over the strip, the thread and the composer filling the
   column; the name opens the card (the actions as tiles, the facts, then
   every side group) in their place, and the column scrolls it. After the
   page's 960 and 720 blocks, so it wins at every window width. */
.screen-contact--compact {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.screen-contact--compact .screen-contact-main {
  flex: 1;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

.screen-contact--compact .screen-contact-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.screen-contact--compact .screen-contact-header,
.screen-contact--compact .screen-contact-side {
  display: none;
}

.screen-contact--compact .screen-contact-bar {
  display: grid;
}

.screen-contact--compact .screen-contact-strip {
  display: flex;
}

.screen-contact--compact[data-info] .screen-contact-main {
  display: none;
}

.screen-contact--compact[data-info] .screen-contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-5);
  padding: 0 var(--c-space-5);
}

.screen-contact--compact[data-info] .screen-contact-side {
  display: flex;
  height: auto;
  overflow: visible;
  padding: var(--c-space-5) var(--c-space-5) var(--c-space-7);
}

/* The card's bar pins to the column's top, Open full page at its right. */
.screen-contact--compact .screen-contact-card-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  top: 0;
  margin: 0 calc(-1 * var(--c-space-5));
  padding: var(--c-space-1) var(--c-space-4) var(--c-space-1) var(--c-space-2);
}

.screen-contact-card-full {
  font-size: var(--c-text-md);
}

.screen-contact--compact .screen-contact-threads {
  padding: var(--c-space-4) var(--c-space-5);
}

.screen-contact--compact .screen-composer {
  position: static;
  padding: var(--c-space-2) var(--c-space-4) var(--c-space-4);
  box-shadow: 0 calc(-1 * var(--c-hairline)) 0 var(--c-separator);
}

.screen-contact--compact .ui-msg {
  max-width: 86%;
}

.screen-contact--compact .ui-draft {
  width: 100%;
}

@media (max-width: 720px) {
  .screen-contact--compact .screen-contact-threads {
    padding: var(--c-space-3);
  }

  .screen-contact--compact[data-info] .screen-contact-card,
  .screen-contact--compact[data-info] .screen-contact-side {
    padding-inline: var(--c-space-4);
  }

  .screen-contact--compact .screen-contact-card-bar {
    margin: 0 calc(-1 * var(--c-space-4));
  }

  .screen-contact--compact .screen-composer {
    padding: var(--c-space-2) var(--c-space-3) calc(var(--c-space-3) + env(safe-area-inset-bottom));
  }
}

/* ── Questions (Dave's questions to the team, db/133) ──── */

/* The page is a triage split view (QuestionsTriage.tsx), Mail's layout:
   a bar, the list pane, the reading pane. The page never scrolls; the
   panes do. On a phone the panes stack and the question is pushed as
   its own view (data-pane). */
.screen-questions-triage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  height: var(--c-screen-h);
  min-width: 0;
}

/* What an action just did ("Resolved Q7. Text Dana yourself?"); empty
   (no height) the rest of the time. */
.screen-questions-notice {
  padding: var(--c-space-2) var(--c-space-5) 0;
}

.screen-questions-more {
  display: flex;
  justify-content: center;
  padding: var(--c-space-3) 0;
}

/* The lead at a glance in the reading pane: stage, address, last texts. */
.screen-questions-lead {
  font-size: var(--c-text-sm);
}

.screen-questions-lead-texts {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  margin: var(--c-space-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--c-text-sm);
}

.screen-questions-passon {
  gap: var(--c-space-3);
  box-shadow: 0 calc(-1 * var(--c-hairline)) 0 var(--c-separator);
  padding-top: var(--c-space-4);
}

.screen-questions-passon .screen-questions-actions {
  margin-left: 0;
}

.screen-questions-bar {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  min-width: 0;
  padding: var(--c-space-3) var(--c-space-5);
  box-shadow: 0 var(--c-hairline) 0 var(--c-separator);
}

.screen-questions-h1 {
  margin-right: var(--c-space-2);
  font-size: var(--c-text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.screen-questions-count {
  margin-left: calc(var(--c-space-1) + 1px);
}

.screen-questions-search {
  width: 220px;
  margin-left: auto;
}

/* The rail's tenant filter, named here so the list says what it is narrowed to. */
.screen-questions-tenant {
  white-space: nowrap;
}

.screen-questions-panes {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  min-height: 0;
}

.screen-questions-list {
  min-height: 0;
  overflow-y: auto;
  padding: var(--c-space-2);
  box-shadow: var(--c-hairline) 0 0 var(--c-separator);
  scrollbar-width: thin;
}

.screen-questions-read {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
}

.screen-questions-read--empty {
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
}

/* The empty pane's top holds only the phone's back. */
.screen-questions-top--bare {
  display: none;
}

.screen-questions-top {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  padding: var(--c-space-5) var(--c-space-7) var(--c-space-4);
  box-shadow: 0 var(--c-hairline) 0 var(--c-separator);
}

.screen-questions-line {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  min-width: 0;
}

.screen-questions-back {
  display: none;
}

.screen-questions-actions {
  display: flex;
  gap: var(--c-space-2);
  margin-left: auto;
}

.screen-questions-title {
  max-width: 60ch;
  font-size: var(--c-text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.screen-questions-thread {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  min-height: 0;
  overflow-y: auto;
  padding: var(--c-space-2) var(--c-space-7) var(--c-space-4);
  scrollbar-width: thin;
}

.screen-questions-compose {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  padding: var(--c-space-3) var(--c-space-7) var(--c-space-5);
}

@media (max-width: 960px) {
  .screen-questions-panes {
    grid-template-columns: 320px minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .screen-questions-triage {
    height: auto;
  }

  .screen-questions-bar {
    flex-wrap: wrap;
    padding: var(--c-space-3) var(--c-space-4);
  }

  .screen-questions-filter {
    order: 3;
    max-width: 100%;
    overflow-x: auto;
  }

  .screen-questions-search {
    flex: 1;
    width: auto;
    margin-left: 0;
  }

  .screen-questions-notice {
    padding: var(--c-space-2) var(--c-space-4) 0;
  }

  /* The question as its own view: no bar over it, the pane fills the
     screen, the thread scrolls and the composer stays pinned. */
  .screen-questions-triage[data-pane='read'] {
    grid-template-rows: auto minmax(0, 1fr);
    height: var(--c-screen-h);
  }

  .screen-questions-triage[data-pane='read'] .screen-questions-bar {
    display: none;
  }

  .screen-questions-triage[data-pane='read'] .screen-questions-panes,
  .screen-questions-triage[data-pane='read'] .screen-questions-read {
    min-height: 0;
    height: 100%;
  }

  .screen-questions-top--bare {
    display: flex;
    box-shadow: none;
    padding-bottom: 0;
  }

  .screen-questions-panes {
    grid-template-columns: minmax(0, 1fr);
  }

  .screen-questions-list {
    box-shadow: none;
  }

  .screen-questions-triage[data-pane='list'] .screen-questions-read,
  .screen-questions-triage[data-pane='read'] .screen-questions-list {
    display: none;
  }

  .screen-questions-back {
    display: inline-flex;
    margin-left: calc(-1 * var(--c-space-2));
  }

  .screen-questions-line {
    flex-wrap: wrap;
  }

  .screen-questions-actions {
    width: 100%;
    margin-left: 0;
  }

  .screen-questions-top,
  .screen-questions-thread,
  .screen-questions-compose {
    padding-left: var(--c-space-4);
    padding-right: var(--c-space-4);
  }

  .screen-questions-compose {
    padding-bottom: calc(var(--c-space-5) + env(safe-area-inset-bottom));
  }

  .screen-questions-title {
    font-size: var(--c-text-lg);
  }
}

/* The lead page's "Questions to the team": one card per question
   (QuestionsView.tsx QuestionCard): the question, who asked whom, the
   state (and the answer, quoted), then the actions and "Open in Team". */
.screen-question-row {
  align-items: flex-start;
}

.screen-question-card {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  min-width: 0;
  width: 100%;
}

.screen-question-text {
  font-weight: 500;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.screen-question-who {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-question-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
  margin-top: var(--c-space-1);
  font-size: var(--c-text-sm);
}

.screen-question-answer {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  margin: var(--c-space-1) 0 0;
  padding-left: var(--c-space-3);
  box-shadow: inset 2px 0 0 var(--c-success);
}

.screen-question-answer-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.screen-question-answer-who,
.screen-question-note {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-question-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
  margin-top: var(--c-space-1);
}

.screen-question-foot > .screen-question-actions {
  flex-basis: 100%;
}

.screen-question-open {
  margin-left: auto;
  font-size: var(--c-text-sm);
}

/* A live question's actions (QuestionActions.tsx), here and in a member's
   Team thread: a row of small buttons, or the composer one opens. */
.screen-question-actions {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
}

.screen-question-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
}

/* ── Evals (Dave → Evals, spec §9) ─────────────────────── */

/* The runs page: the live panel and the runs list in a centred column,
   like the tenants list. A run row is a free Row with a stretched link
   (the label's), the win rates and the pass pill beside it. */
.screen-evals {
  min-width: 0;
  min-height: var(--c-screen-h);
}

.screen-evals-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-6);
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: var(--c-space-6) var(--c-space-6) var(--c-space-8);
}

.screen-evals-row {
  flex-wrap: nowrap;
  gap: var(--c-space-4);
  min-height: 60px;
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.screen-evals-row:hover {
  background: var(--c-hover);
}

.screen-evals-open {
  display: flex;
  flex: 1;
  min-width: 0;
  color: inherit;
}

.screen-evals-open::after {
  content: '';
  position: absolute;
  inset: 0;
}

.screen-evals-open:focus-visible {
  outline: none;
}

.screen-evals-open:focus-visible::after {
  box-shadow: inset 0 0 0 3px var(--c-focus);
}

.screen-evals-text {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  min-width: 0;
}

.screen-evals-name {
  font-weight: 600;
}

.screen-evals-meta,
.screen-evals-outcomes {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--c-space-2);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-evals-meta > * + *::before,
.screen-evals-outcomes > * + *::before {
  content: '·';
  margin-right: var(--c-space-2);
  color: var(--c-text-3);
}

.screen-evals-outcomes b {
  color: var(--c-text);
}

.screen-evals-stats {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-4);
  flex: none;
}

.screen-evals-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--c-text-sm);
}

.screen-evals-stat-label {
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
}

.screen-evals-win b {
  font-weight: 600;
}

.screen-evals-row .ui-row-chevron,
.screen-eval-case .ui-row-chevron {
  margin-left: 0;
}

.screen-evals-pager,
.screen-eval-cases-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-2);
  padding: var(--c-space-3) var(--c-space-1);
}

/* One run: the list, and the drawer beside it when a case is open. The
   drawer holds the viewport's height and scrolls on its own. */
.screen-eval-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  min-height: var(--c-screen-h);
}

.screen-eval-run--open {
  grid-template-columns: minmax(0, 1fr) minmax(400px, 46%);
}

.screen-eval-run-main {
  min-width: 0;
}

.screen-eval-run-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-6);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--c-space-8) var(--c-space-6);
}

/* The verdict: one display sentence, how far to trust it, one action. */
.screen-eval-run-hero {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
}

.screen-eval-run-eyebrow,
.screen-eval-run-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-eval-run-cta {
  gap: var(--c-space-3);
  margin-top: var(--c-space-2);
  font-size: var(--c-text-md);
}

.screen-eval-run-cta .ui-field {
  margin-left: auto;
}

.screen-eval-run-cta .ui-select {
  width: auto;
  min-width: 200px;
}

/* A phone: the picker takes its own line; a run's long label would
   otherwise size the select past the window. */
@media (max-width: 720px) {
  .screen-eval-run-cta .ui-field {
    flex: 1 1 100%;
    min-width: 0;
    margin-left: 0;
  }

  .screen-eval-run-cta .ui-select {
    width: 100%;
    min-width: 0;
  }
}

.screen-eval-run-verdict {
  font-size: var(--c-text-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--c-leading-tight);
}

.screen-eval-run-verdict em {
  font-style: normal;
  color: var(--c-text-3);
}

.screen-eval-run-spread {
  color: var(--c-text-2);
}

.screen-eval-run-dist {
  padding: var(--c-space-4) var(--c-space-4) var(--c-space-3);
}

.screen-eval-run-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--c-space-5);
  align-items: start;
}

.screen-eval-run-check {
  align-items: center;
}

.screen-eval-run-check .ui-row-value {
  font-weight: 400;
}

/* A case in a list: the lead and where the case came from, then one
   grey line (Dave's message, or the lead's last text). */
.screen-eval-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.screen-eval-item-name {
  font-weight: 600;
}

.screen-eval-item-name small {
  margin-left: 6px;
  font-size: var(--c-text-sm);
  font-weight: 400;
  color: var(--c-text-3);
}

.screen-eval-item-text {
  overflow: hidden;
  color: var(--c-text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .screen-eval-run-verdict {
    font-size: var(--c-text-2xl);
  }

  .screen-eval-run-cta .ui-field {
    margin-left: 0;
  }
}

.screen-eval-run .ui-drawer {
  position: sticky;
  top: 0;
  height: var(--c-screen-h);
  overflow-y: auto;
}

.screen-eval-case {
  align-items: center;
  gap: var(--c-space-3);
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.screen-eval-case:hover {
  background: var(--c-hover);
}

.screen-eval-case.is-current {
  background: var(--c-selection);
}

.screen-eval-json {
  font-size: var(--c-text-xs);
  overflow-wrap: anywhere;
}

/* A case's conversation inside a Group: the thread on the grouped fill. */
.screen-eval-thread-wrap {
  padding: var(--c-space-3);
  background: var(--c-surface);
  border-radius: var(--c-radius-lg);
}

.screen-eval-thread {
  display: flex;
  flex-direction: column;
  gap: 3px;
  --c-thread-max: 82%;
}

/* Scores (EvalScores.tsx): the mean, the bars against the anchors, the
   tags and kinds of case side by side; two runs side by side. */
.screen-eval-mean b {
  font-weight: 600;
}

.screen-eval-results,
.screen-eval-compare {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-5);
}

.screen-eval-results-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--c-space-5);
  align-items: start;
}

.screen-eval-compare .screen-eval-results-pair .screen-eval-results-pair {
  grid-template-columns: minmax(0, 1fr);
}

.screen-eval-bars {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  width: 100%;
  padding: var(--c-space-1) 0;
}

.screen-eval-bars-row {
  display: grid;
  grid-template-columns: 14px minmax(80px, 1fr) 28px minmax(0, 1.4fr);
  align-items: center;
  gap: var(--c-space-3);
  font-size: var(--c-text-sm);
}

.screen-eval-bars-score {
  font-weight: 600;
  text-align: right;
}

.screen-eval-bars-track {
  height: 8px;
  background: var(--c-surface-2);
  border-radius: var(--c-radius-full);
  overflow: hidden;
}

.screen-eval-bars-fill {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  background: var(--c-accent);
  border-radius: inherit;
}

.screen-eval-bars-row[data-score='1'] .screen-eval-bars-fill,
.screen-eval-bars-row[data-score='2'] .screen-eval-bars-fill {
  background: var(--c-danger);
}

.screen-eval-bars-row[data-score='3'] .screen-eval-bars-fill {
  background: var(--c-warning);
}

.screen-eval-bars-row[data-score='5'] .screen-eval-bars-fill {
  background: var(--c-success);
}

.screen-eval-bars-n {
  color: var(--c-text-2);
  text-align: right;
}

.screen-eval-bars-anchor {
  color: var(--c-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen-eval-drawer-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--c-space-2);
}

/* Score: one reply at a time. One centred column that reads like the
   thread, under a sticky bar with the run and the batch's progress. */
.screen-eval-score-page {
  min-width: 0;
  min-height: var(--c-screen-h);
}

.screen-eval-score-top {
  position: sticky;
  top: var(--c-sticky-top);
  z-index: var(--c-z-sticky);
  background: var(--c-bar);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 var(--c-hairline) 0 var(--c-separator);
}

.screen-eval-score-top-line {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  padding: var(--c-space-3) var(--c-space-6) var(--c-space-2);
}

.screen-eval-score-title {
  flex: 1;
  min-width: 0;
  font-size: var(--c-text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.screen-eval-score-top-actions {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-eval-score-where {
  margin-left: var(--c-space-2);
  font-variant-numeric: tabular-nums;
  font-size: var(--c-text-md);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--c-text-2);
}

.screen-eval-score-progress {
  padding: 0 var(--c-space-6) var(--c-space-3);
}

.screen-eval-score-col {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-5);
  max-width: 640px;
  margin: 0 auto;
  padding: var(--c-space-6) var(--c-space-6) var(--c-space-8);
}

.screen-eval-score-case {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.screen-eval-score-lead {
  font-size: var(--c-text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.screen-eval-score-case-tags,
.screen-eval-score-again,
.screen-eval-score-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.screen-eval-score-notes {
  max-width: 48ch;
}

/* Dave's reply: the next bubble, on the accent tint. */
.screen-eval-score-reply {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  margin-top: var(--c-space-3);
  padding: var(--c-space-3) var(--c-space-3) var(--c-space-3) var(--c-space-4);
  border-radius: var(--c-radius-xl);
  background: var(--c-accent-tint);
}

.screen-eval-score-reply .ui-msg {
  --c-thread-max: 88%;
}

.screen-eval-score-reply-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-2);
}

.screen-eval-score-reply-label {
  font-size: var(--c-text-sm);
  font-weight: 600;
  color: var(--c-accent);
}

.screen-eval-score-silent {
  color: var(--c-text-2);
  font-style: italic;
}

.screen-eval-score-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--c-space-1) var(--c-space-3);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-eval-score-facts li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.screen-eval-score-facts li.is-held {
  color: var(--c-warning);
}

.screen-eval-score-did {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  margin-top: var(--c-space-1);
  padding-top: var(--c-space-2);
  box-shadow: inset 0 var(--c-hairline) 0 var(--c-separator);
  font-size: var(--c-text-sm);
}

.screen-eval-score-did-title {
  font-size: var(--c-text-xs);
  font-weight: 600;
  color: var(--c-text-2);
}

.screen-eval-score-did-list {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
}

.screen-eval-score-did-list li {
  display: flex;
  gap: var(--c-space-2);
  min-width: 0;
  overflow-wrap: anywhere;
}

.screen-eval-score-did-key {
  flex: none;
  min-width: 40px;
  color: var(--c-text-3);
}

/* The tag tray: only for a 3 or lower (or on request). */
.screen-eval-score-tray {
  --c-control-fill: var(--c-raised);
  --c-control-lift: 0 0 0 var(--c-hairline) var(--c-control-edge);
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  padding: var(--c-space-4);
  border-radius: var(--c-radius-lg);
  background: var(--c-surface);
}

.screen-eval-score-tray-title {
  font-size: var(--c-text-md);
  font-weight: 600;
}

.screen-eval-score-chips,
.screen-eval-score-tray-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.screen-eval-score-tray-actions {
  gap: var(--c-space-2);
}

.screen-eval-score-tray-hint {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-eval-score-hint {
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
  text-align: center;
}

@media (max-width: 720px) {
  .screen-eval-score-top-line {
    padding: var(--c-space-2) var(--c-space-4);
  }

  .screen-eval-score-where {
    display: block;
    margin: 0;
    font-size: var(--c-text-sm);
  }

  .screen-eval-score-progress {
    padding: 0 var(--c-space-4) var(--c-space-2);
  }

  .screen-eval-score-col {
    gap: var(--c-space-4);
    padding: var(--c-space-4) var(--c-space-4) var(--c-space-6);
  }

  .screen-eval-score-reply .ui-msg {
    --c-thread-max: 92%;
  }

  .screen-eval-score-hint {
    display: none;
  }
}

/* The case bank: one centred column, the search and the status on one
   line, source and tags under "More"; the cases grouped by status. */
.screen-eval-cases-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-5);
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--c-space-6);
}

.screen-eval-cases-filters {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
}

.screen-eval-cases-tools,
.screen-eval-cases-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2) var(--c-space-3);
}

.screen-eval-cases-more {
  gap: var(--c-space-2);
}

.screen-eval-cases-tools .screen-list-search {
  flex: 1 1 200px;
}

.screen-eval-cases-row {
  align-items: center;
}

.screen-eval-cases-date {
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .screen-eval-cases-body {
    padding: var(--c-space-4);
  }
}

/* The case editor: the conversation and what a good turn does on the
   left, the setup on the right; one column under 960. */
.screen-eval-editor {
  min-width: 0;
  min-height: var(--c-screen-h);
}

.screen-eval-editor-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-4);
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--c-space-5) var(--c-space-6) var(--c-space-8);
}

.screen-eval-editor-notices {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
}

.screen-eval-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--c-space-5);
  align-items: start;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.screen-eval-editor-main,
.screen-eval-editor-side {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-5);
  min-width: 0;
}

.screen-eval-turns {
  display: flex;
  flex-direction: column;
}

.screen-eval-turn {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  padding: var(--c-space-3) var(--c-space-4);
}

.screen-eval-turn + .screen-eval-turn {
  box-shadow: inset 0 var(--c-hairline) 0 var(--c-separator);
}

/* Dave's turns lean on the accent, as his bubbles do; a teammate note on
   the warning tint, since Dave never reads it. */
.screen-eval-turn--dave {
  background: var(--c-accent-tint);
}

.screen-eval-turn--note {
  background: var(--c-warning-tint);
}

.screen-eval-turn-head,
.screen-eval-turn-when,
.screen-eval-turn-tools,
.screen-eval-turn-add,
.screen-eval-inline,
.screen-eval-slots,
.screen-eval-tag-chips,
.screen-eval-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-eval-turn-when {
  font-size: var(--c-text-sm);
}

.screen-eval-turn-label {
  font-size: var(--c-text-sm);
}

.screen-eval-turn-tools {
  margin-left: auto;
  gap: var(--c-space-hair);
}

.screen-eval-inline {
  font-size: var(--c-text-sm);
}

.screen-eval-inline .ui-input {
  flex: 1 1 120px;
}

.screen-eval-inline .screen-eval-num,
.screen-eval-turn-when .screen-eval-num {
  flex: none;
  width: 64px;
}

.screen-eval-time {
  flex: none;
  width: 124px;
}

.screen-eval-decision {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-1);
}

.screen-eval-decision-date {
  flex: none;
  width: 146px;
}

.screen-eval-turn-head .ui-select,
.screen-eval-inline .ui-select,
.screen-eval-editor-side .ui-row > .ui-select {
  flex: none;
  width: auto;
  min-width: 132px;
}

.screen-eval-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--c-space-3);
  width: 100%;
}

.screen-eval-lines {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  width: 100%;
}

.screen-eval-line .ui-input {
  flex: 1 1 160px;
}

.screen-eval-line .screen-eval-money {
  flex: none;
  width: 104px;
}

.screen-eval-slot .ui-chip-value {
  font-size: var(--c-text-xs);
}

@media (max-width: 960px) {
  .screen-eval-run--open {
    grid-template-columns: minmax(0, 1fr);
  }

  .screen-eval-run .ui-drawer {
    position: static;
    height: auto;
    overflow: visible;
  }

  .screen-evals-row {
    flex-wrap: wrap;
  }

  .screen-eval-editor-grid,
  .screen-eval-results-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .screen-evals-body,
  .screen-eval-run-body,
  .screen-eval-editor-body {
    padding: var(--c-space-4) var(--c-space-4) var(--c-space-6);
  }

  .screen-evals-stats {
    flex-wrap: wrap;
    gap: var(--c-space-2);
  }

  .screen-eval-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .screen-eval-bars-anchor {
    display: none;
  }
}

/* ── Metrics (MetricsView.tsx, MetricsPivot.tsx) ─────────
   The briefing (headline, flow, tiles, speed and money) over the
   pivot (its slim chart, toolbar and table). */

.screen-metrics {
  min-width: 0;
  min-height: var(--c-screen-h);
}

.screen-metrics-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-6);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--c-space-5) var(--c-space-6) var(--c-space-8);
}

.screen-metrics-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-metrics-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-metrics-date {
  display: inline-flex;
}

/* A custom range that cannot be read (from after to), said beside the dates. */
.screen-metrics-error {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-danger);
}

/* The headline sentence and the line against the period before. */
.screen-metrics-story {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  padding: var(--c-space-3) 0 0;
}

.screen-metrics-kicker {
  margin: 0;
  font-size: var(--c-text-sm);
  font-weight: 600;
  color: var(--c-text-2);
}

.screen-metrics-headline {
  margin: 0;
  font-size: var(--c-text-display);
  font-weight: 600;
  line-height: var(--c-leading-tight);
  letter-spacing: -0.02em;
  color: var(--c-text);
}

.screen-metrics-bad {
  color: var(--c-danger);
}

.screen-metrics-compare {
  max-width: 780px;
  margin: 0;
  font-size: var(--c-text-lg);
  color: var(--c-text-2);
}

.screen-metrics-legend,
.screen-metrics-legend-hint {
  font-size: var(--c-text-xs);
  font-weight: 400;
  color: var(--c-text-3);
}

.screen-metrics-legend {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
}

.screen-metrics-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--c-space-1);
  border-radius: 2px;
  background: var(--c-accent);
}

.screen-metrics-swatch.is-prev {
  background: var(--c-prev);
}

/* Tiles: five across, each a fill of its own. */
.screen-metrics-tiles {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.screen-metrics-n {
  font-size: var(--c-text-md);
  font-weight: 500;
  color: var(--c-text-3);
}

.screen-metrics-pair {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 4fr);
  gap: var(--c-space-6);
}

/* The pivot: slim chart, toolbar, table. */
.screen-metrics-pivot {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-4);
  min-width: 0;
}

.screen-metrics-trend {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--c-space-6);
  padding: var(--c-space-3) var(--c-space-4);
  border-radius: var(--c-radius-lg);
  background: var(--c-surface);
}

.screen-metrics-trend-sel {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  min-width: 0;
}

.screen-metrics-eyebrow {
  font-size: var(--c-text-xs);
  font-weight: 600;
  color: var(--c-text-2);
}

.screen-metrics-trend-name {
  overflow: hidden;
  font-size: var(--c-text-md);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen-metrics-trend-value {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  margin-top: var(--c-space-1);
}

.screen-metrics-trend-value strong {
  font-size: var(--c-text-2xl);
  font-weight: 600;
  line-height: var(--c-leading-tight);
}

.screen-metrics-trend-foot {
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
}

.screen-metrics-trend-plot {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  min-width: 0;
}

.screen-metrics-trend-plot .screen-metrics-legend {
  justify-content: space-between;
}

.screen-metrics-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-metrics-toolbar-label {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-metrics-toolbar-spacer {
  flex: 1;
}

.screen-metrics-table .ui-datatable-table td {
  height: 40px;
}

.screen-metrics-leads {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-metrics-ad {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  min-width: 0;
}

.screen-metrics-thumb-space {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--c-radius-sm);
  background: var(--c-surface-2);
}

.screen-metrics-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.screen-metrics-link,
.screen-metrics-plain {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-datatable-row[data-depth='0'] .screen-metrics-link,
.ui-datatable-row[data-depth='0'] .screen-metrics-plain {
  font-weight: 600;
}

.screen-metrics-link {
  color: var(--c-text);
  text-decoration: none;
}

.screen-metrics-link:hover {
  color: var(--c-accent);
  text-decoration: underline;
}

.screen-metrics-link:focus-visible {
  outline: none;
  border-radius: var(--c-radius-sm);
  box-shadow: 0 0 0 3px var(--c-focus);
}

.screen-metrics-meta {
  overflow: hidden;
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen-metrics-foot {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  padding: 0 var(--c-space-3);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-metrics-foot p {
  margin: 0;
}

.screen-metrics-muted {
  color: var(--c-text-3);
}

.screen-metrics-notes {
  padding: 0 var(--c-space-3);
}

.screen-metrics-defs {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  margin: 0;
  padding-left: var(--c-space-5);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

@media (max-width: 1100px) {
  .screen-metrics-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--c-space-4);
  }
}

@media (max-width: 960px) {
  .screen-metrics-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .screen-metrics-body {
    gap: var(--c-space-5);
    padding: var(--c-space-4) var(--c-space-4) var(--c-space-6);
  }

  /* The filters wrap, so Compare is never off-screen; the table's
     toolbar scrolls sideways. */
  .screen-metrics-toolbar {
    flex-wrap: nowrap;
    margin: 0 calc(-1 * var(--c-space-4));
    padding: 0 var(--c-space-4);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .screen-metrics-toolbar > * {
    flex: none;
  }

  .screen-metrics-headline {
    font-size: var(--c-text-2xl);
  }

  .screen-metrics-compare {
    font-size: var(--c-text-md);
  }

  .screen-metrics-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* An odd tile out takes the whole row. */
  .screen-metrics-tiles > :first-child:nth-last-child(odd) {
    grid-column: 1 / -1;
  }

  .screen-metrics-trend {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--c-space-3);
  }

  .screen-metrics-toolbar-label,
  .screen-metrics-toolbar-spacer,
  .screen-metrics-legend-hint {
    display: none;
  }

  .screen-metrics-table.ui-datatable--sticky {
    max-height: none;
  }

  /* An edge on the pinned name column, so the tinted cells scrolled under
     it never peek out beside it. */
  .screen-metrics .ui-datatable-name {
    min-width: 168px;
    max-width: 168px;
    box-shadow: 1px 0 0 var(--c-separator);
  }

  .screen-metrics .ui-datatable-bar {
    display: none;
  }

  .screen-metrics .ui-datatable-row[data-depth='1'] .ui-datatable-name-inner {
    padding-left: var(--c-space-2);
  }

  .screen-metrics .ui-datatable-row[data-depth='2'] .ui-datatable-name-inner {
    padding-left: var(--c-space-4);
  }

  .screen-metrics-link,
  .screen-metrics-plain {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* ── Dave sandbox (components/crm/SandboxView.tsx) ─────────
   Take C "Trace": sessions | the chat (you are the lead, on the right) |
   the inspector, dense. The list and the inspector sit on the grey
   surface; the inspector's groups, stat strip and waterfall on raised
   (--c-group-fill). Under 1180 the chat and the turn share a column
   behind a switch; at 720 the sessions join it, one pane at a time. */
.screen-sandbox {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 460px;
  height: var(--c-screen-h);
  min-width: 0;
}

.screen-sandbox-tabs {
  display: none;
}

.screen-sandbox-list {
  --c-control-fill: var(--c-raised);
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  min-height: 0;
  overflow-y: auto;
  padding: var(--c-space-3) var(--c-space-2) var(--c-space-3) var(--c-space-3);
  background: var(--c-surface);
  scrollbar-width: thin;
}

.screen-sandbox-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-2);
  padding-left: var(--c-space-1);
}

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

.screen-sandbox-day {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
}

.screen-sandbox-day-title {
  margin: 0;
  padding: var(--c-space-2) var(--c-space-2) var(--c-space-1);
  font-size: var(--c-text-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.screen-sandbox-sessions {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  margin: 0;
  padding: 0;
  list-style: none;
}

.screen-sandbox-session {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px var(--c-space-2);
  border: 0;
  border-radius: var(--c-radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--c-text-sm);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.screen-sandbox-session:hover {
  background: var(--c-hover);
}

.screen-sandbox-session:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}

.screen-sandbox-session[aria-current='true'] {
  background: var(--c-selection);
}

.screen-sandbox-session-dot {
  display: flex;
  align-items: center;
}

/* The running turn's dot pulses in place of a spinner; ui-pulse is the
   same fade the skeletons use, and the reduced-motion query below turns
   it off the same way. */
.screen-sandbox-session-dot.is-running .ui-dot {
  animation: ui-pulse 1.1s var(--c-ease) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .screen-sandbox-session-dot.is-running .ui-dot {
    animation: none;
  }
}

.screen-sandbox-session-name {
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen-sandbox-session-status {
  font-weight: 500;
}

.screen-sandbox-session-status--running {
  color: var(--c-accent);
}

.screen-sandbox-session-status--muted {
  color: var(--c-text-3);
}

.screen-sandbox-session-meta {
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
  white-space: nowrap;
}

.screen-sandbox-list-foot {
  margin-top: auto;
  padding-top: var(--c-space-2);
}

.screen-sandbox-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: var(--c-screen-h);
  overflow: hidden;
}

.screen-sandbox-chat--empty {
  justify-content: center;
}

.screen-sandbox-header {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  min-width: 0;
  padding: var(--c-space-3) var(--c-space-4);
  box-shadow: inset 0 calc(-1 * var(--c-hairline)) 0 var(--c-separator);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-sandbox-header-title {
  display: flex;
  align-items: center;
  gap: var(--c-space-1);
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--c-text-lg);
  font-weight: 700;
  color: var(--c-text);
}

.screen-sandbox-header-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen-sandbox-header-rename {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--c-text-lg);
  font-weight: 700;
}

.screen-sandbox-cap {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
  white-space: nowrap;
}

.screen-sandbox-cap-track {
  width: 56px;
  height: 4px;
  overflow: hidden;
  border-radius: var(--c-radius-full);
  background: var(--c-surface-2);
}

.screen-sandbox-cap-fill {
  display: block;
  width: max(2px, var(--sandbox-cap));
  height: 100%;
  background: var(--c-accent);
}

.screen-sandbox-cap.is-over {
  color: var(--c-warning);
}

.screen-sandbox-cap.is-over .screen-sandbox-cap-fill {
  background: var(--c-warning);
}

.screen-sandbox-more-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 140px;
}

.screen-sandbox-more-list .ui-button {
  justify-content: flex-start;
}

.screen-sandbox-more-danger {
  color: var(--c-danger);
}

/* column-reverse opens the chat at the newest message, as the contact view does. */
.screen-sandbox-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse;
  padding: var(--c-space-2) var(--c-space-4);
  scrollbar-width: thin;
}

.screen-sandbox-thread {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  --c-thread-max: 80%;
}

/* A turn's tag, T1 T2: a mono chip; the picked turn's is the accent. */
.screen-sandbox-tag {
  display: inline-block;
  padding: 1px 5px;
  border: 0;
  border-radius: var(--c-radius-sm);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-family: var(--c-font-mono);
  font-size: var(--c-text-2xs);
  font-weight: 400;
  line-height: 1.4;
}

button.screen-sandbox-tag {
  cursor: pointer;
}

button.screen-sandbox-tag:hover {
  background: var(--c-hover);
}

.screen-sandbox-tag:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}

.screen-sandbox-tag[aria-pressed='true'] {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.screen-sandbox-picked .ui-bubble {
  box-shadow: 0 0 0 2px var(--c-accent);
}

.screen-sandbox-flag {
  display: inline-flex;
  align-items: center;
  color: var(--c-accent);
}

.screen-sandbox-working {
  margin-top: var(--c-space-2);
}

.screen-sandbox-question,
.screen-sandbox-turn-line {
  margin: var(--c-space-2) 0;
}

.screen-sandbox-answer {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  margin-top: var(--c-space-2);
}

.screen-sandbox-answer .ui-input {
  min-width: 240px;
}

.screen-sandbox-composer {
  padding: var(--c-space-2) var(--c-space-4) var(--c-space-3);
  background: var(--c-bg);
}

.screen-sandbox-cost {
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
}

.screen-sandbox-inspector {
  --c-control-fill: var(--c-raised);
  --c-group-fill: var(--c-raised);
  display: flex;
  flex-direction: column;
  gap: var(--c-space-4);
  min-height: 0;
  height: var(--c-screen-h);
  overflow-y: auto;
  padding: var(--c-space-3) var(--c-space-4) var(--c-space-5);
  background: var(--c-surface);
  scrollbar-width: thin;
}

.screen-sandbox-inspector-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
}

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

.screen-sandbox-inspector-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-1);
  margin-left: auto;
}

.screen-sandbox-section {
  min-width: 0;
}

.screen-sandbox-section-title {
  margin: 0 0 var(--c-space-2);
  padding-left: var(--c-space-1);
  font-size: var(--c-text-xs);
  font-weight: 600;
  color: var(--c-text-3);
}

.screen-sandbox-tab {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
}

.screen-sandbox-reply {
  padding: var(--c-space-3);
  border-radius: var(--c-radius-md);
  background: var(--c-group-fill);
}

.screen-sandbox-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-sandbox-tool {
  display: block;
}

.screen-sandbox-json {
  max-height: 320px;
  margin: 0;
  overflow: auto;
  padding: var(--c-space-2) var(--c-space-3);
  border-radius: var(--c-radius-sm);
  background: var(--c-group-fill);
  color: var(--c-text);
  font-size: var(--c-text-xs);
  white-space: pre-wrap;
}

.screen-sandbox-tool .screen-sandbox-json {
  margin-top: var(--c-space-2);
  background: var(--c-surface);
}

.screen-sandbox-foot {
  margin: 0;
  font-size: var(--c-text-xs);
}

/* The new-session dialog. */
.screen-sandbox-new {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-4);
}

.screen-sandbox-new-filters,
.screen-sandbox-seed-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--c-space-3);
}

.screen-sandbox-new-search {
  grid-column: 1 / -1;
}

.screen-sandbox-cases {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  max-height: 360px;
  margin: 0;
  padding: var(--c-space-1);
  overflow-y: auto;
  border-radius: var(--c-radius-lg);
  background: var(--c-surface);
  list-style: none;
}

.screen-sandbox-case {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: var(--c-space-2) var(--c-space-3);
  border: 0;
  border-radius: var(--c-radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.screen-sandbox-case:hover {
  background: var(--c-hover);
}

.screen-sandbox-case:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}

.screen-sandbox-case[aria-checked='true'] {
  background: var(--c-raised);
  box-shadow: inset 0 0 0 2px var(--c-accent);
}

.screen-sandbox-case-head {
  display: flex;
  justify-content: space-between;
  gap: var(--c-space-2);
  font-size: var(--c-text-md);
}

.screen-sandbox-case-head .ui-text-3 {
  font-size: var(--c-text-xs);
}

.screen-sandbox-case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.screen-sandbox-case-last {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen-sandbox-seed {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-4);
}

.screen-sandbox-lines {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.screen-sandbox-lines legend {
  margin-bottom: var(--c-space-2);
  padding: 0;
  font-size: var(--c-text-sm);
}

.screen-sandbox-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: var(--c-space-2);
}

@media (max-width: 1180px) {
  .screen-sandbox {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .screen-sandbox-tabs {
    display: block;
    grid-column: 2;
    grid-row: 1;
    padding: var(--c-space-2) var(--c-space-4) 0;
  }

  /* "Sessions" joins the switch only at phone width; the list is beside it here. */
  .screen-sandbox-tabs .ui-segment:first-child {
    display: none;
  }

  .screen-sandbox-list {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .screen-sandbox-chat,
  .screen-sandbox-inspector {
    grid-column: 2;
    grid-row: 2;
    height: auto;
  }

  .screen-sandbox[data-pane='turn'] .screen-sandbox-chat,
  .screen-sandbox:not([data-pane='turn']) .screen-sandbox-inspector {
    display: none;
  }
}

/* A phone: one pane under the switch. The chat is exactly the window
   under the top bar, the switch on top, the thread taking what is left
   and the composer at the foot, clear of the home bar; the sessions and
   the turn are as tall as they need and the page scrolls. */
@media (max-width: 720px) {
  .screen-sandbox {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: var(--c-screen-h);
  }

  .screen-sandbox[data-pane='chat'] {
    height: var(--c-screen-h);
  }

  .screen-sandbox-tabs {
    flex: none;
    padding: var(--c-space-3) var(--c-space-3) 0;
  }

  .screen-sandbox-tabs .ui-segment:first-child {
    display: flex;
  }

  .screen-sandbox-list,
  .screen-sandbox-chat,
  .screen-sandbox-inspector {
    display: none;
  }

  .screen-sandbox[data-pane='sessions'] .screen-sandbox-list {
    display: flex;
    background: var(--c-bg);
  }

  .screen-sandbox[data-pane='chat'] .screen-sandbox-chat {
    display: flex;
    flex: 1;
    height: auto;
  }

  .screen-sandbox-header {
    padding: var(--c-space-2) var(--c-space-3);
  }

  .screen-sandbox-cap-track {
    display: none;
  }

  .screen-sandbox-scroll,
  .screen-sandbox-composer {
    padding-inline: var(--c-space-3);
  }

  .screen-sandbox-scroll {
    overscroll-behavior: contain;
  }

  .screen-sandbox-composer {
    padding-bottom: calc(var(--c-space-3) + env(safe-area-inset-bottom));
  }

  .screen-sandbox[data-pane='turn'] .screen-sandbox-inspector {
    display: flex;
    height: auto;
    padding: var(--c-space-3);
  }

  .screen-sandbox-new-filters,
  .screen-sandbox-seed-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Contact: appointments booking (plan S3 T6) ───────────
   The Appointments group's rows carry their actions under the text; the
   picker is a row of its own, full width. */

.screen-appt-row {
  flex-wrap: wrap;
}

.screen-appt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-1);
  width: 100%;
  margin-top: var(--c-space-1);
}

.screen-appt-picker,
.screen-appt-cancel {
  flex-direction: column;
  align-items: stretch;
}

.screen-appt-picker-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  width: 100%;
  min-width: 0;
  padding: var(--c-space-1) 0;
}

.screen-appt-picker-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-appt-picker-note {
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-appt-picker-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--c-space-2);
}

/* Upcoming, then "Earlier", then the canceled folded away. */
.screen-appt-divider {
  list-style: none;
  padding: var(--c-space-2) var(--c-space-4) var(--c-space-1);
  font-size: var(--c-text-xs);
  font-weight: 500;
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.screen-appt-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
  width: 100%;
  margin: var(--c-space-1) 0 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

/* The canceled visits, folded under the list (audit L8). */
.screen-appt-gone {
  color: var(--c-text-2);
}

.screen-appt-gone-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

/* On a phone the slot grid runs long: Book and Hold stay pinned at the
   window's foot while the setter scrolls it. */
@media (max-width: 720px) {
  .screen-appt-picker-actions {
    position: sticky;
    bottom: 0;
    z-index: var(--c-z-sticky);
    margin: 0 calc(-1 * var(--c-space-3));
    padding: var(--c-space-2) var(--c-space-3) calc(var(--c-space-2) + env(safe-area-inset-bottom));
    background: var(--c-bar);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 calc(-1 * var(--c-hairline)) 0 var(--c-separator);
  }

  /* The group's rounded clip, without the scroll box that would hold the bar in place. */
  .ui-group-list:has(.screen-appt-picker-actions) {
    overflow: clip;
  }
}

/* ── Calendar (plan S3 T6; take C, route and inspector) ───
   The grid and its bar in the main column, the Inspector (selected
   event, or what needs a setter) in a 360px column at the right. The
   screen is exactly the window tall and never scrolls: the grid takes
   every row the bar leaves and scrolls its hours inside its frame, the
   inspector scrolls on its own. Below 960px the inspector is a sheet
   (or gone when nothing is picked); below 720px the week is a strip
   over one day and the page scrolls as one. */

.screen-calendar {
  display: grid;
  /* The pane sizes itself (360px, a slim tab folded) and is left out when
     nothing waits, so the week takes the width. */
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  height: var(--c-screen-h);
}

.screen-calendar-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* Two rows that keep their shape in week and day (no jump between
   them): the title, the arrows and Week / Day; then the chips, the
   rep legend and the links. The title gives way (ellipsis). */
.screen-calendar-bar {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  padding: var(--c-space-4) var(--c-space-6) var(--c-space-3);
}

.screen-calendar-bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2) var(--c-space-3);
  min-width: 0;
}

.screen-calendar-bar-row:first-child {
  flex-wrap: nowrap;
}

.screen-calendar-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--c-text-2xl);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* All reps: who is which colour. */
.screen-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-1) var(--c-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--c-text-xs);
  color: var(--c-text-2);
}

.screen-calendar-legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-1);
}

.screen-calendar-legend-dot {
  width: var(--c-space-2);
  height: var(--c-space-2);
  border-radius: var(--c-radius-full);
  background: var(--ui-cal-rep);
}

/* "N waiting": the phone's way to Needs you (the pane is a sheet there). */
.screen-calendar-needs-chip {
  display: none;
}

.screen-calendar-needs-fold {
  align-self: flex-end;
  margin-bottom: calc(var(--c-space-3) * -1);
}

/* Needs you folded: a slim tab at the right with the count. */
.screen-calendar-needs-tab {
  display: flex;
  justify-content: center;
  padding: var(--c-space-4) var(--c-space-2);
  background: var(--c-rail);
  box-shadow: inset var(--c-hairline) 0 0 var(--c-separator);
}

.screen-calendar-needs-open {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c-space-1);
  height: fit-content;
  padding: var(--c-space-2);
  border: 0;
  border-radius: var(--c-radius-md);
  background: transparent;
  color: var(--c-text-2);
  font: inherit;
  cursor: pointer;
}

.screen-calendar-needs-open:hover {
  background: var(--c-hover);
}

.screen-calendar-needs-open:focus-visible {
  outline: 2px solid var(--c-focus);
}

.screen-calendar-needs-count {
  min-width: 1.5em;
  padding: 0 var(--c-space-1);
  border-radius: var(--c-radius-full);
  background: var(--c-warning-tint);
  color: var(--c-text);
  font-size: var(--c-text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.screen-calendar-dialog-note {
  margin: 0 0 var(--c-space-3);
}

.ui-chip.is-disabled {
  cursor: default;
  opacity: 0.7;
}

/* A selected block, scrolled to on a phone, lands under the top bar. */
.screen-calendar-body .ui-cal-event {
  scroll-margin-top: calc(var(--c-space-8) * 3);
}

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

.screen-calendar-filters,
.screen-calendar-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-1);
}

.screen-calendar-views {
  flex-shrink: 0;
}

.screen-calendar-strip {
  display: none;
}

.screen-calendar-alert {
  margin: 0 var(--c-space-6) var(--c-space-3);
}

.screen-calendar-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 var(--c-space-6) var(--c-space-6);
}

.screen-calendar-body > .ui-calendar {
  flex: 1 1 auto;
}

.screen-calendar-phone {
  display: none;
}

.screen-calendar-event-rep {
  font-weight: 500;
  color: var(--c-text-3);
}

/* The inspector column runs the screen's height and scrolls its own. */
.screen-calendar-inspector {
  min-height: 0;
  overflow-y: auto;
}

@media (min-width: 961px) {
  /* Wide enough that the lead marker's headline never loses its text to
     the time and the chevron (Thomas, 2026-10-02). */
  .screen-calendar-inspector {
    width: 400px;
  }

  .screen-calendar .ui-calendar--week {
    --ui-cal-min-col: calc(var(--c-space-8) * 2.75);
  }
}

@media (min-width: 961px) and (max-width: 1200px) {
  .screen-calendar-inspector {
    width: 360px;
  }
}

.screen-calendar-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-1);
}

.screen-calendar-card .ui-row-value {
  white-space: normal;
}

.screen-calendar-receipt {
  padding: var(--c-space-3);
}

.screen-calendar-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--c-space-2);
}

.screen-calendar-actions .ui-button {
  height: var(--c-control-lg);
}

.screen-calendar-actions .ui-button--secondary {
  background: var(--c-raised);
  box-shadow: 0 0 0 var(--c-hairline) var(--c-control-edge);
}

.screen-calendar-action-wide {
  grid-column: 1 / -1;
}

.screen-calendar-move {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
}

.screen-calendar-move-note {
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

/* The brief in the inspector (CalendarInspector.tsx): Call and the
   thread under the head, then the brief's groups. */
.screen-calendar-insp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-2);
  margin-top: calc(-1 * var(--c-space-2));
}

.screen-calendar-map {
  padding: 0;
  overflow: hidden;
}

.screen-calendar-map .screen-field-map {
  width: 100%;
  height: calc(var(--c-space-8) * 4);
}

.screen-calendar-address .ui-row-label {
  white-space: normal;
  color: var(--c-text);
}

.screen-calendar-address .ui-row-leading,
.screen-calendar-drive-row .ui-row-leading {
  color: var(--c-text-2);
}

.screen-calendar-drive-row .ui-row-value {
  white-space: normal;
  text-align: right;
}

.screen-calendar-ad {
  min-width: 0;
}

/* The thread's lead marker inside the group's fill, as on the brief. */
.screen-calendar-ad .ui-marker {
  flex: 1;
  margin: 0;
}

.screen-calendar-ad .ui-marker-panel {
  max-width: none;
  margin-left: 0;
  background: var(--c-surface);
}

.screen-calendar-msg .ui-row-label {
  display: flex;
  align-items: baseline;
  gap: var(--c-space-2);
  min-width: 0;
}

.screen-calendar-msg-who {
  font-weight: 600;
  color: var(--c-text);
}

.screen-calendar-msg-when {
  margin-left: auto;
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
  white-space: nowrap;
}

.screen-calendar-msg .ui-row-value {
  white-space: normal;
}

.screen-calendar-msg-body {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--c-text);
}

/* A selected drive: the car in the hatch the grid draws it with. */
.screen-calendar-drive-glyph {
  --ui-cal-hatch: color-mix(in srgb, var(--c-text-2) 22%, transparent);
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--c-space-8) + var(--c-space-3));
  height: calc(var(--c-space-8) + var(--c-space-3));
  border-radius: var(--c-radius-full);
  background-color: var(--c-surface);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--ui-cal-hatch) 0 var(--c-space-hair),
    transparent var(--c-space-hair) calc(var(--c-space-2) - var(--c-space-hair))
  );
  box-shadow: inset 0 0 0 var(--c-hairline) var(--c-separator);
  color: var(--c-text-2);
}

.screen-calendar-drive-sentence {
  margin: 0;
  text-wrap: balance;
  font-size: var(--c-text-lg);
  line-height: var(--c-leading-tight);
  color: var(--c-text);
}

.screen-calendar-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-2) var(--c-space-5);
  margin: 0;
  font-size: var(--c-text-md);
}

@media (max-width: 960px) {
  .screen-calendar {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The full brief wants more of the screen than a sheet's usual
     60%; it still scrolls inside and swipes away. */
  .screen-calendar-inspector {
    position: fixed;
    top: auto;
    max-height: 78vh;
  }

  /* The grid keeps to the room above the sheet. */
  .screen-calendar--inspecting .screen-calendar-body {
    padding-bottom: 50vh;
  }

  .screen-calendar-needs-chip {
    display: inline-flex;
  }

  .screen-calendar-needs-tab,
  .screen-calendar-needs-fold {
    display: none;
  }
}

@media (max-width: 720px) {
  /* Under the phone's top bar the page scrolls as one; the day takes its
     natural height, taller than the window. */
  .screen-calendar {
    height: auto;
  }

  .screen-calendar-bar {
    padding: var(--c-space-3);
  }

  .screen-calendar-title {
    font-size: var(--c-text-xl);
  }

  .screen-calendar-views {
    display: none;
  }

  .screen-calendar-strip {
    display: grid;
    padding: 0 var(--c-space-3) var(--c-space-2);
  }

  .screen-calendar-alert {
    margin-left: var(--c-space-3);
    margin-right: var(--c-space-3);
  }

  .screen-calendar-body {
    padding-left: var(--c-space-3);
    padding-right: var(--c-space-3);
  }

  .screen-calendar-wide {
    display: none;
  }

  .screen-calendar-phone {
    display: flex;
  }
}

/* ── The rep's day (plan S3 T6; take C, the route) ────────
   Phone first: the header, the route in one column (the Route
   primitive), big targets. Over 960px the next stop's full brief sits
   beside the route, and the route's own copy of its outcome entry
   steps aside for it. /crm/day in the shell, and /crm/day/<token> bare
   from the morning text. */

.screen-day {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  gap: var(--c-space-8);
  min-width: 0;
  min-height: var(--c-screen-h);
  padding: var(--c-space-6) var(--c-space-6) var(--c-space-8);
}

.screen-day--paned {
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  max-width: 1120px;
  margin: 0 auto;
}

.screen-day:not(.screen-day--paned) {
  grid-template-columns: minmax(0, 560px);
}

.screen-day-link {
  min-height: var(--c-window-h);
  background: var(--c-bg);
}

.screen-day-main {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-4);
  min-width: 0;
}

.screen-day-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--c-space-3);
}

.screen-day-head-text {
  min-width: 0;
}

.screen-day-title {
  margin: 0;
  font-size: var(--c-text-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--c-leading-tight);
}

.screen-day-meta {
  margin: var(--c-space-1) 0 0;
  font-size: var(--c-text-md);
  color: var(--c-text-2);
}

.screen-day-nav,
.screen-day-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-1);
}

.screen-day-zone {
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
}

.screen-day-where {
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

/* A stop's actions (Directions, Call, Brief): one row of equal buttons,
   each at least as wide as its label, wrapping to a second row on a
   narrow card rather than cutting "Directions" short. */
.screen-day-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-2);
}

.screen-day-actions > * {
  flex: 1 1 0;
  min-width: max-content;
}

.screen-day-actions .ui-button {
  height: calc(var(--c-control-lg) + var(--c-space-1));
  font-size: var(--c-text-lg);
}

/* On a card's fill, the secondary buttons (Call, Brief) stand up off it. */
.ui-route-card .screen-day-actions .ui-button--secondary,
.screen-field-next .screen-day-actions .ui-button--secondary {
  background: var(--c-raised);
}

/* Move and Cancel (the field app's Today), or Record outcome: the
   card's footer (StopManageBar). A strip across the card's full width
   under a hairline, each button an equal part of it with a hairline
   between, Cancel in the danger colour. It is the card body's last
   child and reaches its edges through --stop-pad, the body's padding. */
.screen-day-manage {
  --stop-pad: var(--c-space-3);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0 calc(-1 * var(--stop-pad)) calc(-1 * var(--stop-pad));
  border-top: var(--c-hairline) solid var(--c-separator);
  border-radius: 0 0 var(--c-radius-lg) var(--c-radius-lg);
  overflow: hidden;
}

.screen-day-manage .ui-button {
  width: 100%;
  height: calc(var(--c-control-lg) + var(--c-space-1));
  justify-content: center;
  border-radius: 0;
  font-size: var(--c-text-md);
}

.screen-day-manage .ui-button + .ui-button {
  border-left: var(--c-hairline) solid var(--c-separator);
}

.screen-day-manage .ui-button.screen-day-manage-cancel {
  color: var(--c-danger);
}

.screen-day-brief {
  font-size: var(--c-text-md);
}

.screen-day-pills,
.screen-day-facts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--c-space-1);
}

/* "In progress · until 5:30 PM": the live dot and the words, in green,
   on the stop under way (its card, the pane, the field app). */
.screen-day-live {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
  font-size: var(--c-text-sm);
  font-weight: 600;
  color: var(--c-success);
  font-variant-numeric: tabular-nums;
}

/* The full brief beside the route. */
.screen-day-detail {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-5);
  min-width: 0;
}

.screen-day-detail-title {
  margin: var(--c-space-2) 0 0;
  font-size: var(--c-text-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.screen-day-detail-meta {
  margin: var(--c-space-1) 0 0;
  color: var(--c-text-2);
}

.screen-day-receipt {
  padding: var(--c-space-3);
}

.screen-day-card .ui-row-value {
  white-space: normal;
}

.screen-day-detail-head {
  min-width: 0;
}

/* The owner review's address row wraps (it shared a rule with the old day). */
.screen-review-address .ui-row-label,
.screen-review-address .ui-row-value {
  white-space: normal;
}

.screen-day-outcome {
  flex-direction: column;
  align-items: stretch;
  gap: var(--c-space-2);
  padding-top: var(--c-space-3);
  padding-bottom: var(--c-space-3);
}

.screen-day-outcome-label {
  font-weight: 600;
}

.screen-day-outcome-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--c-space-2);
}

.screen-day-outcome-actions .ui-button,
.screen-day-after .ui-button {
  height: var(--c-control-lg);
}

.screen-day-after {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
}

/* ── The visit survey (OutcomeEntry, db/160) ─────────────
   Phone first: two big choices, a scrub bar with a thumb a thumb can
   hold, and the saved state in place. */
.screen-survey {
  gap: var(--c-space-3);
}

.screen-survey-form {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-5);
}

.screen-survey-block {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
}

.screen-survey-q {
  font-size: var(--c-text-lg);
  font-weight: 600;
  color: var(--c-text);
}

.screen-survey-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-2);
}

.screen-survey-change {
  padding: var(--c-space-1) var(--c-space-2);
  border: 0;
  border-radius: var(--c-radius-sm);
  background: none;
  color: var(--c-accent);
  font: inherit;
  cursor: pointer;
}

/* "Change result" on a recorded visit: the confirm in place, then what it was. */
.screen-survey-confirm {
  display: grid;
  gap: var(--c-space-2);
  padding: var(--c-space-3);
  border-radius: var(--c-radius-md);
  background: var(--c-surface-2);
}

.screen-survey-confirm p,
.screen-survey-was {
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-survey-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-2);
}

.screen-survey-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--c-space-2);
}

.screen-survey-choice-btn {
  min-height: 56px;
  padding: 0 var(--c-space-3);
  border: 1.5px solid var(--c-control-edge);
  border-radius: var(--c-radius-lg);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: var(--c-text-xl);
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.screen-survey-choice-btn:hover {
  background: var(--c-surface-2);
}

.screen-survey-change:focus-visible,
.screen-survey-choice-btn:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.screen-survey-choice-btn[aria-pressed='true'] {
  border-color: var(--c-accent);
  background: var(--c-accent-tint);
  color: var(--c-accent);
}

.screen-survey-choice-btn--danger[aria-pressed='true'] {
  border-color: var(--c-danger);
  background: var(--c-danger-tint);
  color: var(--c-danger);
}

.screen-survey-scrub {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
}

.screen-survey-scrub-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.screen-survey-scrub-num {
  min-width: 3ch;
  font-size: var(--c-text-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--c-accent);
}

.screen-survey-scrub.is-unset .screen-survey-scrub-num {
  color: var(--c-text-3);
}

/* The native range, restyled: a 8px track filled to the value, a 32px
   thumb. The input itself is 44px tall so the whole strip takes a touch. */
.screen-survey-range {
  --thumb: 32px;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  touch-action: pan-y;
}

.screen-survey-range:focus-visible {
  outline: none;
}

.screen-survey-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--c-radius-full);
  background: linear-gradient(to right, var(--c-accent) var(--scrub), var(--c-surface-2) var(--scrub));
}

.screen-survey-range::-moz-range-track {
  height: 8px;
  border-radius: var(--c-radius-full);
  background: var(--c-surface-2);
}

.screen-survey-range::-moz-range-progress {
  height: 8px;
  border-radius: var(--c-radius-full);
  background: var(--c-accent);
}

.screen-survey-range::-webkit-slider-thumb {
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((8px - var(--thumb)) / 2);
  border: 0;
  border-radius: 50%;
  background: var(--c-raised);
  box-shadow: 0 0 0 1px var(--c-control-edge), 0 2px 6px var(--c-scrim);
  appearance: none;
  -webkit-appearance: none;
}

.screen-survey-range::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border: 0;
  border-radius: 50%;
  background: var(--c-raised);
  box-shadow: 0 0 0 1px var(--c-control-edge), 0 2px 6px var(--c-scrim);
}

.screen-survey-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--c-focus), 0 2px 6px var(--c-scrim);
}

.screen-survey-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px var(--c-focus), 0 2px 6px var(--c-scrim);
}

/* Unset: no fill, a hollow dashed thumb that asks to be moved. */
.screen-survey-scrub.is-unset .screen-survey-range::-webkit-slider-runnable-track {
  background: var(--c-surface-2);
}

.screen-survey-scrub.is-unset .screen-survey-range::-moz-range-progress {
  background: transparent;
}

.screen-survey-scrub.is-unset .screen-survey-range::-webkit-slider-thumb {
  background: var(--c-bg);
  box-shadow: inset 0 0 0 2px var(--c-text-3);
}

.screen-survey-scrub.is-unset .screen-survey-range::-moz-range-thumb {
  background: var(--c-bg);
  box-shadow: inset 0 0 0 2px var(--c-text-3);
}

.screen-survey-scrub-ends {
  display: flex;
  justify-content: space-between;
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
}

.screen-survey-submit {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
}

.screen-survey-submit .ui-button {
  height: var(--c-control-lg);
}

.screen-survey-gap {
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
  text-align: center;
}

.screen-survey-saved {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  margin: 0;
  padding: var(--c-space-3);
  border-radius: var(--c-radius-md);
  background: var(--c-success-tint);
  color: var(--c-text);
  font-weight: 600;
}

.screen-survey-saved svg {
  flex: none;
  color: var(--c-success);
}

.screen-survey-facts {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.screen-survey-facts > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-3);
  min-height: var(--c-control-lg);
  padding: var(--c-space-1) 0;
  border-bottom: 1px solid var(--c-separator);
}

.screen-survey-facts > div:last-child {
  border-bottom: 0;
}

.screen-survey-facts dt {
  color: var(--c-text-2);
}

.screen-survey-facts dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
}

.screen-survey-facts-num {
  font-variant-numeric: tabular-nums;
}

.screen-survey-facts > .screen-survey-facts-note {
  flex-direction: column;
  align-items: stretch;
  gap: var(--c-space-1);
  padding: var(--c-space-2) 0;
}

.screen-survey-facts-note dd {
  font-weight: 400;
  text-align: left;
  white-space: pre-wrap;
}

.screen-survey-facts-pills {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--c-space-1);
}

@media (prefers-reduced-motion: reduce) {
  .screen-survey-choice-btn {
    transition: none;
  }
}

@media (min-width: 961px) {
  .screen-day-paned {
    display: none;
  }
}

@media (max-width: 960px) {
  .screen-day,
  .screen-day--paned,
  .screen-day:not(.screen-day--paned) {
    grid-template-columns: minmax(0, 560px);
  }

  .screen-day-detail {
    display: none;
  }
}

@media (max-width: 720px) {
  .screen-day,
  .screen-day--paned,
  .screen-day:not(.screen-day--paned) {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--c-space-4);
  }
}

/* ── The owner's review (plan S3 T6) ───────────────────────
   Signed out, phone first: one column of groups, the three answers
   pinned to the bottom of the screen on a translucent bar. */

.screen-review-page {
  min-height: var(--c-window-h);
  background: var(--c-bg);
}

.screen-review {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.screen-review-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-4);
  padding: var(--c-space-2) var(--c-space-4) var(--c-space-6);
}

/* What's already booked for the lead, above the answers. */
.screen-review-booked {
  font-weight: 600;
}

.screen-review-map {
  padding: 0;
  overflow: hidden;
}

.screen-review-map-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 300;
  object-fit: cover;
}

.screen-review-thread {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  padding: var(--c-space-3);
  border-radius: var(--c-radius-lg);
  background: var(--c-bg);
}

.screen-review-decide {
  position: sticky;
  bottom: 0;
  z-index: var(--c-z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  padding: var(--c-space-3) var(--c-space-4) calc(var(--c-space-3) + env(safe-area-inset-bottom));
  background: var(--c-bar);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 calc(var(--c-hairline) * -1) 0 var(--c-separator);
}

.screen-review-panel {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
}

.screen-review-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--c-space-2);
}

.screen-review-buttons .ui-button {
  height: var(--c-control-lg);
}

/* Back and the one confirm (2026-10-01): never two primaries stacked. */
.screen-review-buttons-two {
  grid-template-columns: 1fr 2fr;
}

/* An answer's panel sits in the page, above the bar, so the bar stays one
   row of buttons (a quarter of a phone screen at most). */
.screen-review-body > .screen-review-panel {
  padding: var(--c-space-4);
  border-radius: var(--c-radius-lg);
  background: var(--c-group-fill);
  scroll-margin-bottom: calc(var(--c-control-lg) + var(--c-space-8));
}

.screen-review-panel-note {
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--c-text-sm);
}

/* The answer, shown at once; "Saving" beside it until the server agrees. */
.screen-review-saving {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-1);
  margin-left: var(--c-space-2);
  color: var(--c-text-2);
  font-size: var(--c-text-sm);
  white-space: nowrap;
}

/* A dead link's way on (2026-10-01): sign in, or text us. */
.screen-link-help {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--c-space-2);
}

/* ── Property (components/crm/PropertyInfo.tsx; db/177) ─────
   The lead's Zillow record, one group on the contact card, the brief,
   the owner's review and the callback page: our satellite picture, six
   headline facts in a 3 by 2 grid, ownership and money rows, then More
   details behind a disclosure. */
/* The value change pill stays on one line beside "Owned". */
.screen-property .ui-row-trailing .ui-pill {
  white-space: nowrap;
}

.screen-property-picture {
  padding: 0;
  overflow: hidden;
}

.screen-property-picture-img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  background: var(--c-surface-2);
}

.screen-property-head {
  padding: 0;
}

.screen-property-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin: 0;
}

.screen-property-fact {
  min-width: 0;
  padding: var(--c-space-2) var(--c-space-3);
}

/* Hairlines between the cells: left of every cell but the first in a
   row, above the second row. */
.screen-property-fact:not(:nth-child(3n + 1)) {
  box-shadow: inset var(--c-hairline) 0 0 var(--c-separator);
}

.screen-property-fact:nth-child(n + 4) {
  box-shadow: inset 0 var(--c-hairline) 0 var(--c-separator);
}

.screen-property-fact:nth-child(n + 5) {
  box-shadow: inset var(--c-hairline) var(--c-hairline) 0 var(--c-separator);
}

.screen-property-fact-label {
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
  white-space: nowrap;
}

.screen-property-fact-value {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen-property-fact-value--empty {
  font-weight: 400;
  color: var(--c-text-4);
}

.screen-property-count {
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
  white-space: nowrap;
}

.screen-property-loading {
  align-items: center;
}

.screen-property-loading-text {
  color: var(--c-text-2);
}

/* A failed lookup's Retry (PropertyRetry.tsx): a second failure is said beside it, wrapping above the button when long. */
.screen-property-retry {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--c-space-2);
  max-width: 60%;
  text-align: right;
}

.screen-property-retry-note {
  color: var(--c-text-2);
}

/* The stored code (http 429: …), for whoever chases it. */
.screen-property-retry-code {
  font-family: var(--c-font-mono, ui-monospace, monospace);
  font-size: 0.9em;
}

.screen-property-more {
  display: block;
}

.screen-property-details {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  padding-top: var(--c-space-2);
}

.screen-property-list {
  display: grid;
  grid-template-columns: var(--c-row-label-w) minmax(0, 1fr);
  gap: var(--c-space-1) var(--c-space-3);
  margin: 0;
}

.screen-property-line {
  display: contents;
}

.screen-property-line dt {
  color: var(--c-text-2);
}

.screen-property-line dd {
  margin: 0;
  font-weight: 500;
  min-width: 0;
}

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

.screen-property-sub-title {
  margin: 0;
  font-size: var(--c-text-xs);
  font-weight: 600;
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.screen-property-description {
  margin: 0;
  color: var(--c-text-2);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

.screen-property-rows {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.screen-property-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--c-space-3);
  min-width: 0;
}

.screen-property-row-main {
  min-width: 0;
}

.screen-property-row-side {
  flex: none;
  color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
}

/* ── Feasibility (components/crm/FeasibilityCard.tsx) ────────
   Our site analysis, the group after Property: the score and the
   report's confidence wording over the narrator's verdict (clamped),
   one line per flagged issue with its detail behind a disclosure, the
   cleared checks folded into one, then the link to the full report. */
.screen-feasibility-verdict {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--c-space-2);
  padding-top: var(--c-space-3);
  padding-bottom: var(--c-space-3);
}

.screen-feasibility-head {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  min-width: 0;
}

.screen-feasibility-score {
  display: inline-flex;
  align-items: baseline;
  flex: none;
  margin: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.screen-feasibility-score-value {
  font-size: var(--c-text-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.screen-feasibility-score-max {
  margin-left: var(--c-space-hair);
  font-size: var(--c-text-sm);
  font-weight: 500;
  color: var(--c-text-3);
}

.screen-feasibility-tier {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  flex: 1;
  min-width: 0;
  line-height: var(--c-leading-tight);
}

.screen-feasibility-confidence {
  font-weight: 600;
}

.screen-feasibility-basis {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.screen-feasibility-flag {
  flex: none;
  align-self: center;
}

.screen-feasibility-flag .ui-pill,
.screen-feasibility-cost .ui-pill,
.screen-feasibility .ui-row-trailing .ui-pill {
  white-space: nowrap;
}

/* The verdict is the narrator's paragraph; three lines say it, the report has the rest. */
.screen-feasibility-summary {
  margin: 0;
  color: var(--c-text-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* A plain issue (an early report: no detail) is a row with its cost
   trailing; one with detail is a block holding its disclosure. */
.screen-feasibility-issue {
  align-items: center;
}

.screen-feasibility-issue--more,
.screen-feasibility-more {
  display: block;
}

/* An issue's disclosure reads as the row's own line: ink, full width,
   the cost at the right edge; the chevron sits on the first line. */
.screen-feasibility-disclosure > .ui-disclosure-summary {
  display: flex;
  align-items: flex-start;
  width: 100%;
  font-size: inherit;
  color: var(--c-text);
}

.screen-feasibility-disclosure > .ui-disclosure-summary > .ui-disclosure-chevron {
  flex: none;
  margin-top: var(--c-space-hair);
  color: var(--c-text-3);
}

.screen-feasibility-issue-title {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

.screen-feasibility-cost {
  flex: none;
  margin-left: var(--c-space-2);
}

.screen-feasibility-text {
  margin: 0;
}

.screen-feasibility-text + .screen-feasibility-text {
  margin-top: var(--c-space-1);
}

.screen-feasibility-why {
  font-weight: 600;
  color: var(--c-text);
}

.screen-feasibility-checks {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.screen-feasibility-check {
  display: flex;
  align-items: flex-start;
  gap: var(--c-space-2);
  min-width: 0;
}

.screen-feasibility-check-icon {
  flex: none;
  margin-top: 1px;
  color: var(--c-success);
}

.screen-feasibility-check-text {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  min-width: 0;
}

.screen-feasibility-check-title {
  font-weight: 500;
  color: var(--c-text);
}

.screen-feasibility-check-detail {
  color: var(--c-text-2);
}

/* ── The kill switch (db/182): the switch's box ── */

/* The switch: on the Tenants list (every tenant) and a tenant's Overview (that one). */
.screen-pause-switch {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-3);
  width: 100%;
  max-width: 560px;
  padding: var(--c-space-3) var(--c-space-4);
  border: 1px solid var(--c-separator);
  border-radius: var(--c-radius-lg);
  background: var(--c-raised);
  text-align: left;
}

.screen-pause-switch.is-paused {
  border-color: color-mix(in srgb, var(--c-danger) 40%, transparent);
  background: var(--c-danger-tint);
}

.screen-pause-switch-text {
  flex: 1 1 260px;
  min-width: 0;
}

.screen-pause-switch-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
  margin: 0;
  font-size: var(--c-text-md);
  font-weight: 600;
}

.screen-pause-switch-detail {
  margin: var(--c-space-1) 0 0;
  font-size: var(--c-text-sm);
  line-height: var(--c-leading);
  color: var(--c-text-2);
  overflow-wrap: anywhere;
}

.screen-pause-switch-detail.screen-pause-switch-env {
  color: var(--c-danger);
}

.screen-pause-switch > .ui-alert {
  flex-basis: 100%;
}

.screen-pause-switch-confirm {
  margin: 0 0 var(--c-space-3);
}

@media (max-width: 720px) {

  /* Full-width sheet: each tenant stacks (name, who and why, then Open). */

  .screen-pause-switch .ui-button {
    flex: 1 1 100%;
  }
}

/* ── Team texts (db/183, db/184): owners and reps with Dave ─────────────
   A split view like Questions: the conversations on the left, one open on
   the right with its transcript, the "Dave answers" switch and the
   composer. On a phone, the list or the thread (data-pane). */

.screen-team {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  height: var(--c-screen-h);
  min-width: 0;
}

.screen-team-bar {
  display: flex;
  align-items: baseline;
  gap: var(--c-space-3);
  min-width: 0;
  padding: var(--c-space-3) var(--c-space-5);
  box-shadow: 0 var(--c-hairline) 0 var(--c-separator);
}

.screen-team-h1 {
  font-size: var(--c-text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.screen-team-sub {
  overflow: hidden;
  font-size: var(--c-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen-team-tenant {
  margin-left: auto;
  white-space: nowrap;
}

.screen-team-panes {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  min-height: 0;
}

.screen-team-list {
  min-height: 0;
  overflow-y: auto;
  padding: var(--c-space-2);
  box-shadow: var(--c-hairline) 0 0 var(--c-separator);
  scrollbar-width: thin;
}

.screen-team-row-meta {
  display: inline-flex;
  gap: var(--c-space-2);
}

.screen-team-waiting {
  color: var(--c-warning);
  font-weight: 500;
}

.screen-team-read {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
}

.screen-team-read--empty {
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
}

.screen-team-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--c-space-2) var(--c-space-4);
  padding: var(--c-space-4) var(--c-space-7) var(--c-space-3);
  box-shadow: 0 var(--c-hairline) 0 var(--c-separator);
}

.screen-team-back {
  display: none;
}

.screen-team-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.screen-team-name {
  font-size: var(--c-text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.screen-team-state {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
}

.screen-team-toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--c-space-1);
}

.screen-team-pause {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--c-space-2);
}

.screen-team-pause-actions {
  display: flex;
  gap: var(--c-space-1);
}

.screen-team-wait {
  grid-column: 1 / -1;
  font-size: var(--c-text-sm);
}

.screen-team-wait--person {
  color: var(--c-warning);
  font-weight: 500;
}

/* column-reverse opens the thread at the newest text, as the contact view does. */
.screen-team-scroll {
  display: flex;
  flex-direction: column-reverse;
  min-height: 0;
  overflow-y: auto;
  padding: var(--c-space-2) var(--c-space-7) var(--c-space-4);
  scrollbar-width: thin;
}

.screen-team-transcript {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A column, so its SystemLine (capped at 560px) centres by its own align-self, not left in a block li. */
.screen-team-event {
  display: flex;
  flex-direction: column;
  margin: var(--c-space-2) 0;
}

/* The earlier texts on the company line (TeamChannel.tsx): history, so quieter than the team thread. */
.screen-team-line-msg .ui-bubble {
  opacity: 0.72;
}

.screen-team-compose {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  padding: var(--c-space-3) var(--c-space-7) var(--c-space-5);
}

/* The Team tab's filter (All / Needs reply), after the subtitle. */
.screen-team-filter {
  display: flex;
  flex: none;
  gap: var(--c-space-2);
  align-self: center;
}

.screen-team-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* A section with nothing in it: one quiet line under its head. */
/* db/199: who stands in as owner where a tenant has none, above the list. */
.screen-team-standin {
  padding: var(--c-space-1) var(--c-space-3) var(--c-space-2);
  font-size: var(--c-text-sm);
}

.screen-team-none {
  padding: var(--c-space-1) var(--c-space-3) var(--c-space-2);
  font-size: var(--c-text-sm);
  list-style: none;
}

/* A setting-team question open beside the list (QuestionPane.tsx): the
   notice over the reading pane. */
.screen-team-question {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.screen-team-question > .screen-questions-read {
  grid-row: 2;
}

/* A question in a member's thread (TeamQuestionCard.tsx): no card. Its
   text is the outgoing bubble above (or its own, `is-own`); under it, on
   the bubble's side, only a small line and the answer affordance. */
.screen-team-q {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--c-space-1);
  list-style: none;
  scroll-margin-block: var(--c-space-8);
}

.screen-team-q > .screen-question-actions {
  align-self: stretch;
  max-width: var(--c-thread-max);
  margin-left: auto;
  width: 100%;
}

.screen-team-q > .ui-msg {
  max-width: var(--c-thread-max);
}

.screen-team-q > .ui-msg--in {
  align-self: flex-start;
}

.screen-team-q-line {
  margin: 0 var(--c-space-3);
  font-size: var(--c-text-xs);
  color: var(--c-text-2);
  text-align: right;
  white-space: pre-wrap;
}

.screen-team-q > .screen-team-q-closed,
.screen-team-q > .screen-suggestion,
.screen-team-q > .screen-questions-passon {
  align-self: stretch;
}

/* ?q= picks it out: the bubble that asked it is ringed. */
.screen-team-q.is-selected .screen-team-q-ask .ui-bubble,
.ui-msg:has(+ .screen-team-q.is-selected:not(.is-own)) .ui-bubble {
  box-shadow: 0 0 0 2px var(--c-focus);
}

/* A member's open items under their thread's header (TeamTicketRail.tsx),
   hung the way tickets hang in a kitchen: a label, then one ticket per
   open item, the longest wait on the left. A full rail narrows its
   tickets to a width that still reads, then scrolls: the edge with more
   fades, and a pointer gets a button there that pages the rail along.
   The scroller is padded past the tickets' shadows and focus rings, and
   the padding is taken back with negative margins, so the header's
   spacing is unchanged. Pulled, a ticket is ringed and its tray opens
   under the rail. */
.screen-tickets {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--c-space-2);
}

.screen-tickets-label {
  grid-row: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  margin-bottom: var(--c-space-2);
  font-size: var(--c-text-2xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.screen-tickets-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--c-radius-full);
  background: var(--c-warning-tint);
  color: var(--c-warning);
  font-family: var(--c-font-mono);
  font-size: var(--c-text-2xs);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* The tickets and, when they outrun the header, the fades and page buttons over their ends. */
.screen-tickets-track {
  grid-row: 2;
  position: relative;
  min-width: 0;
}

.screen-tickets-row {
  display: flex;
  gap: var(--c-space-3);
  margin: calc(-1 * var(--c-space-1)) calc(-1 * var(--c-space-3)) calc(-1 * var(--c-space-4));
  padding: var(--c-space-1) var(--c-space-3) var(--c-space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--c-space-3);
  scrollbar-width: none;
  list-style: none;
}

.screen-tickets-row::-webkit-scrollbar {
  display: none;
}

.screen-tickets-slot {
  /* Full width while they fit; a full rail narrows them, never past what reads. */
  display: flex;
  flex: 0 1 236px;
  min-width: 188px;
  scroll-snap-align: start;
}

.screen-tickets-track.has-back .screen-tickets-row {
  mask-image: linear-gradient(to right, transparent, var(--c-mask-solid) 48px);
}

.screen-tickets-track.has-more .screen-tickets-row {
  mask-image: linear-gradient(to left, transparent, var(--c-mask-solid) 48px);
}

.screen-tickets-track.has-back.has-more .screen-tickets-row {
  mask-image: linear-gradient(to right, transparent, var(--c-mask-solid) 48px, var(--c-mask-solid) calc(100% - 48px), transparent);
}

.screen-tickets-page {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  /* The rail's bottom padding is taken back: centre on the tickets, not the box. */
  margin-top: calc(-1 * var(--c-space-2));
  border-radius: var(--c-radius-full);
  background: var(--c-raised);
  box-shadow:
    0 0 0 var(--c-hairline) var(--c-separator),
    0 2px 8px var(--c-shadow);
}

.screen-tickets-page--back {
  left: calc(-1 * var(--c-space-3));
}

.screen-tickets-page--on {
  right: calc(-1 * var(--c-space-3));
}

/* A phone swipes. */
@media (hover: none) {
  .screen-tickets-page {
    display: none;
  }
}

.screen-ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
  padding: var(--c-space-3) var(--c-space-3) 0;
  border: 0;
  border-radius: var(--c-radius-md);
  background: var(--c-raised);
  color: var(--c-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow:
    0 0 0 var(--c-hairline) var(--c-separator),
    0 1px 2px var(--c-shadow),
    0 6px 14px -8px var(--c-shadow);
  transition:
    transform var(--c-motion) var(--c-ease),
    box-shadow var(--c-motion) var(--c-ease);
}

.screen-ticket:hover:not(.is-pulled) {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 var(--c-hairline) var(--c-separator),
    0 2px 4px var(--c-shadow),
    0 10px 20px -10px var(--c-shadow);
}

.screen-ticket:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--c-focus),
    0 6px 14px -8px var(--c-shadow);
}

.screen-ticket.is-pulled {
  box-shadow:
    0 0 0 2px var(--c-accent),
    0 10px 22px -10px var(--c-shadow);
}

.screen-ticket-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--c-space-2);
  font-family: var(--c-font-mono);
  font-size: var(--c-text-2xs);
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}

.screen-ticket-lead {
  overflow: hidden;
  font-size: var(--c-text-md);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Two lines, always: tickets on one rail keep one height. */
.screen-ticket-text {
  display: -webkit-box;
  min-height: calc(2 * 1.4em);
  overflow: hidden;
  font-size: var(--c-text-sm);
  line-height: 1.4;
  color: var(--c-text-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* The tear-off stub: what it waits on, and its clock. */
.screen-ticket-stub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-2);
  margin: var(--c-space-2) calc(-1 * var(--c-space-3)) 0;
  padding: 6px var(--c-space-3) 7px;
  border-top: 1px dashed var(--c-separator);
  border-radius: 0 0 var(--c-radius-md) var(--c-radius-md);
  background: var(--c-surface);
  font-size: var(--c-text-xs);
  font-weight: 500;
  color: var(--c-text-2);
}

.screen-ticket-clock {
  font-family: var(--c-font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.screen-ticket--accent .screen-ticket-stub {
  background: var(--c-accent-tint);
  color: var(--c-accent);
}

.screen-ticket--warning .screen-ticket-stub {
  background: var(--c-warning-tint);
  color: var(--c-warning);
}

/* The pulled ticket, opened under the rail. */
.screen-tickets-tray {
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  max-height: min(420px, 45vh);
  margin-top: var(--c-space-3);
  padding: var(--c-space-4);
  overflow-y: auto;
  border-radius: var(--c-radius-lg);
  background: var(--c-surface);
  scrollbar-width: thin;
  animation: screen-tickets-tray-in var(--c-motion) var(--c-ease);
}

@keyframes screen-tickets-tray-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.screen-tickets-tray-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--c-space-3);
}

.screen-tickets-tray-lead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: var(--c-text-sm);
}

.screen-tickets-tray-name {
  font-size: var(--c-text-lg);
  font-weight: 600;
}

.screen-tickets-tray-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-tickets-tray-jump {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--c-text-sm);
  cursor: pointer;
}

.screen-tickets-tray-body {
  display: grid;
  gap: var(--c-space-3);
  max-width: 72ch;
}

.screen-tickets-tray-body dt {
  margin-bottom: var(--c-space-1);
  font-size: var(--c-text-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.screen-tickets-tray-q {
  font-size: var(--c-text-message);
  line-height: var(--c-leading);
}

/* The member's reply reads as their text did: an incoming bubble. */
.screen-tickets-tray-reply {
  justify-self: start;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: var(--c-radius-bubble);
  background: var(--c-bubble-in);
  font-size: var(--c-text-message);
  line-height: var(--c-leading);
  white-space: pre-wrap;
}

.screen-tickets-tray-foot {
  padding-top: var(--c-space-3);
  border-top: var(--c-hairline) solid var(--c-separator);
}


/* "Show in thread": the question it scrolled to, lit for a moment. */
.screen-team-q.is-flashed {
  animation: screen-team-flash 1.6s var(--c-ease);
  border-radius: var(--c-radius-lg);
}

@keyframes screen-team-flash {
  0%,
  30% {
    background: var(--c-accent-tint);
  }
}

@media (max-width: 720px) {
  .screen-tickets-slot {
    flex-basis: 212px;
    min-width: 212px;
  }

  .screen-tickets-tray {
    max-height: 55vh;
    padding: var(--c-space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen-ticket,
  .screen-tickets-tray,
  .screen-team-q.is-flashed {
    transition: none;
    animation: none;
  }
}

@media (max-width: 960px) {
  .screen-team-panes {
    grid-template-columns: 300px minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .screen-team-bar {
    flex-wrap: wrap;
    padding: var(--c-space-3) var(--c-space-4);
  }

  .screen-team-sub {
    flex-basis: 100%;
    order: 3;
    white-space: normal;
  }

  .screen-team-filter {
    order: 4;
  }

  .screen-team-panes {
    grid-template-columns: minmax(0, 1fr);
  }

  .screen-team-list {
    box-shadow: none;
  }

  .screen-team[data-pane='list'] .screen-team-read,
  .screen-team[data-pane='list'] .screen-team-question,
  .screen-team[data-pane='read'] .screen-team-list,
  .screen-team[data-pane='read'] .screen-team-bar {
    display: none;
  }

  .screen-team[data-pane='read'] {
    grid-template-rows: minmax(0, 1fr);
  }

  .screen-team-top {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--c-space-3) var(--c-space-4);
  }

  .screen-team-back {
    display: inline-flex;
    align-items: center;
    gap: var(--c-space-1);
    justify-self: start;
    font-size: var(--c-text-sm);
  }

  .screen-team-state {
    justify-content: space-between;
  }

  .screen-team-scroll {
    padding: var(--c-space-2) var(--c-space-4) var(--c-space-3);
  }

  .screen-team-compose {
    padding: var(--c-space-2) var(--c-space-4) var(--c-space-4);
  }
}

/* The Attention queue's "Reply to the owner" item (team threads waiting on a person). */
.screen-queue-team {
  margin-bottom: var(--c-space-3);
}

.screen-queue-team-list {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  margin: var(--c-space-2) 0 0;
  padding: 0;
  list-style: none;
}

/* One run of text inside a team thread's event line, so it wraps as prose. */
.screen-team-event-text {
  min-width: 0;
}

/* ── Test mode (db/187, docs/test-bench.md): the rail's switch, the banner, the homeowner's composer ── */

/* The rail's switch: the track over a short label, so it fits the narrow rail. */
.screen-test-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c-space-hair);
}

.screen-test-switch .ui-toggle {
  flex-direction: column;
  gap: var(--c-space-1);
  min-height: 0;
  font-size: var(--c-text-xs);
  text-align: center;
}

.screen-test-switch.is-on .ui-toggle-track {
  background: var(--c-test-stripe);
  box-shadow: inset 0 0 0 1px var(--c-test-dark-stripe);
}

.screen-test-switch.is-on .ui-toggle-label {
  color: var(--c-text);
  font-weight: 600;
}

.screen-test-switch-error {
  margin: 0;
  max-width: 80px;
  font-size: var(--c-text-xs);
  color: var(--c-danger);
  text-align: center;
  overflow-wrap: anywhere;
}

/* Across the top of every console page while test mode is on; nothing dismisses it but leaving test mode. */
.screen-test-banner {
  position: sticky;
  top: 0;
  z-index: var(--c-z-rail);
  background: var(--c-test-tint);
  border-bottom: 2px solid var(--c-test);
  color: var(--c-text);
  font-size: var(--c-text-sm);
  line-height: var(--c-leading);
}

.screen-test-banner-stripe {
  height: 6px;
  background: var(--c-test-stripe);
}

.screen-test-banner-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  padding: var(--c-space-2) var(--c-space-4) var(--c-space-3);
}

.screen-test-banner-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-test-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--c-space-2);
  border-radius: var(--c-radius-sm);
  background: var(--c-test);
  color: var(--c-test-ink);
  font-size: var(--c-text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.screen-test-badge--sm {
  padding: 0 var(--c-space-1);
  font-size: 10px;
  vertical-align: 1px;
}

.screen-test-banner-title {
  margin: 0;
  min-width: 0;
  font-weight: 600;
}

.screen-test-banner-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-1) var(--c-space-4);
  margin: 0;
  color: var(--c-text-2);
}

.screen-test-fact {
  min-width: 0;
  overflow-wrap: anywhere;
}

.screen-test-fact b {
  color: var(--c-text);
  font-weight: 600;
}

.screen-test-ahead {
  color: var(--c-text);
}

.screen-test-link {
  color: var(--c-accent);
  white-space: nowrap;
}

.screen-test-banner-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-2);
}

.screen-test-clock,
.screen-test-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-1);
}

.screen-test-note {
  margin: 0;
  color: var(--c-text-2);
}

.screen-test-error {
  margin: 0;
  color: var(--c-danger);
  overflow-wrap: anywhere;
}

/* The new lead's form, in its dialog. */
.screen-test-lead-form {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
}

.screen-test-lead-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--c-space-2);
}

/* "Text as homeowner": the composer's box, edged in the test amber so it is never taken for the team's own. */
.screen-test-composer {
  padding: var(--c-space-2) var(--c-space-4) 0;
}

.screen-test-composer .screen-test-composer-box .ui-composer-box {
  background: var(--c-test-tint);
  box-shadow: inset 0 0 0 1px var(--c-test);
}

.screen-test-composer-input {
  min-height: 40px;
}

@media (max-width: 720px) {
  /* On a phone the banner scrolls with the page (it is tall there); the stripe and the badge still open every page. */
  .screen-test-banner {
    position: static;
  }

  .screen-test-banner-body {
    padding: var(--c-space-2) var(--c-space-3) var(--c-space-3);
  }

  .screen-test-banner-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .screen-test-composer {
    padding: var(--c-space-2) var(--c-space-3) 0;
  }
}

/* ── The tenant's API keys (db/188, components/crm/TenantApiKeys.tsx) ── */

.screen-apikey-name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
}

.screen-apikey-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.screen-apikey-prefix {
  font-family: var(--c-font-mono);
  font-size: var(--c-text-xs);
  color: var(--c-text-2);
}

.screen-apikey-meta {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
  overflow-wrap: anywhere;
}

.screen-apikey-form {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
}

.screen-apikey-note {
  margin: 0;
  font-size: var(--c-text-sm);
  line-height: var(--c-leading);
  color: var(--c-text-2);
}

.screen-apikey-once {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--c-space-3);
}

/* The whole key, once: selectable in one click, wrapped rather than scrolled on a phone. */
.screen-apikey-secret {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: var(--c-space-2) var(--c-space-3);
  border-radius: var(--c-radius-sm);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-family: var(--c-font-mono);
  font-size: var(--c-text-sm);
  overflow-wrap: anywhere;
  user-select: all;
}