/* Batch A layout. Phone <768px, desktop ≥1024px. */
html.has-session,
html.has-session body,
#app {
  background: #0f1b2d;
}

#app {
  --space: 4px;
  --pad: 16px;
  --gap: 12px;
  --radius: 12px;
  --radius-pill: 999px; /* batch D: was --chip; --chip stays the badge color from styles.css */
  --surface: #0f1b2d;
  --raised: #16243a;
  --border: rgba(255, 255, 255, 0.08);
  --accent: #78a640;
  --amber: #e0a030;
  --danger: #f07178;
  --font: "Segoe UI", system-ui, sans-serif;
  --header-h: 48px;
  --context-h: 40px;
  --rail: 0px;
  font-family: var(--font);
  background: var(--surface);
  color: #e8eef7;
}

#app .tile .val,
#app .activity-mini,
#app .live-time,
#app .sales-metric .val {
  font-variant-numeric: tabular-nums;
}

#app .app-header {
  min-height: 48px;
  height: 48px;
  max-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

#app .brand-logo-full,
#app .brand-meta-row,
#app .rail-toggle,
#app .user-menu-btn {
  display: none;
}

#app .brand-logo-compact {
  display: block;
  height: 28px;
  width: auto;
}

#app #view-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}

html.header-hidden #app .app-header {
  transform: translateY(-100%);
}

html.header-hidden #app .page-bar {
  top: 0;
}

#app .user-menu-panel {
  position: absolute;
  right: 8px;
  top: 44px;
  z-index: var(--z-popover);
  min-width: 180px;
  padding: 12px;
  border-radius: 12px;
  background: var(--raised);
  border: 1px solid var(--border);
}

#app .user-menu-panel[hidden] {
  display: none !important;
}

#app .page-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  max-height: 40px;
  min-height: 40px;
  padding: 0 8px;
  background: var(--surface);
  grid-template-columns: none;
  grid-template-rows: none;
  overflow: visible;
}

#app .page-bar .periods,
#app .page-bar .section-jumps {
  flex: 1 1 0;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
}

#app .section-jumps {
  gap: 8px;
  scroll-snap-type: x mandatory;
}

#app .section-jumps button[data-jump] {
  scroll-snap-align: center;
  padding: 0 12px;
  border-radius: var(--radius-pill);
}

#app #company,
#app #on-shift,
#app #cards,
#app .card,
#app .activity-tile,
#app .sales-block,
#app .owner-card,
#app .tool-tile,
#app #sales-growth,
#app #sales-totals,
#app #sales-agents,
#app #sales-recent,
#app #sales-lsa {
  scroll-margin-top: calc(var(--header-h) + var(--context-h) + 8px);
}

#app .activity-tile {
  min-height: 56px;
  width: 100%;
  border-radius: var(--radius);
  background: var(--raised);
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}

#app .activity-bars {
  display: none;
}

#app .activity-tile.is-open .activity-bars {
  display: block;
}

#app .activity-minis {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 8px;
  margin-left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#app .activity-mini {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 2.4rem;
}

#app .activity-mini-val {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

#app .activity-mini-cap {
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #9aa6b2;
  line-height: 1.2;
}

#app .activity-tile {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

#app .activity-name {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .activity-minis {
  flex: 0 0 auto;
  width: auto;
}

#app .card.mainline,
#app article.card.mainline {
  display: none;
}

#app .presence-summary {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: var(--raised);
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
}

#app .presence-list,
#app .presence-label {
  display: none !important;
}

#app .presence-strip.is-open .presence-list,
#app .presence-strip.is-open .presence-label {
  display: block !important;
}

#app .period-select {
  display: none;
}

@media (max-width: 767px) {
  #app .activity-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  #app #agent-activity,
  #app .activity-title {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  #app .activity-tile {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  #app .activity-name {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    text-align: left;
  }

  #app .activity-minis {
    flex: 0 0 auto;
    margin-left: auto;
    justify-content: flex-end;
  }

  #app .page-bar {
    padding-left: 0;
    padding-right: 0;
  }

  #app .page-bar:has(.periods) {
    flex-wrap: nowrap;
    height: 40px;
    max-height: 40px;
    min-height: 40px;
    gap: 8px;
  }

  #app .page-bar .periods {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    overflow: hidden;
    background: transparent;
    padding: 0;
    border-radius: 0;
  }

  #app .page-bar .periods button[data-period] {
    display: none !important;
  }

  #app .period-select {
    display: block;
    appearance: none;
    -webkit-appearance: none;
    color-scheme: dark;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0 28px 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background-color: #16243a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 1.6 6 6.2 10.6 1.6' fill='none' stroke='%23e8eef7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    color: #e8eef7;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  #app .page-bar .section-jumps,
  #app .page-bar .section-jumps.can-scroll-left,
  #app .page-bar .section-jumps.can-scroll-right,
  #app .page-bar .section-jumps.can-scroll-left.can-scroll-right {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  #app .page-bar .section-jumps button[data-jump] {
    flex: 0 0 auto;
    scroll-snap-align: none;
  }
}

@media (min-width: 768px) {
  #app .page-bar .periods {
    flex: 0 1 auto;
    width: auto;
    overflow: visible;
  }

  #app .page-bar .periods button[data-period] {
    flex: 0 0 auto;
    overflow: visible;
    text-overflow: clip;
    padding: 0 12px;
  }
}

#app .live-filters {
  position: sticky;
  top: calc(var(--header-h) + var(--context-h));
  z-index: var(--z-sticky-filters);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  background: var(--surface);
}

#app .live-type {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}

#app .live-dir-legacy {
  display: none;
}

#app .live-chip {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: #c5d0dc;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

#app .live-chip[aria-pressed="true"] {
  background: #78a640;
  color: #0b1a20;
}

#app .live-dir-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #9aa6b2;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

#app .live-dir-select {
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0 28px 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background-color: #16243a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 1.6 6 6.2 10.6 1.6' fill='none' stroke='%23e8eef7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
  color: #e8eef7;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

#app .live-day {
  position: sticky;
  top: calc(var(--header-h) + var(--context-h) + 40px);
  z-index: var(--z-sticky-local);
  margin: 8px 0 4px;
  padding: 4px 0;
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
  color: var(--amber);
}

#app .feed-health-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--amber);
  color: var(--amber);
  font-size: 12px;
  font-weight: 700;
}

#app .live-row {
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

#app .live-kind-word {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


#app .status-badge.status-available {
  background: #78a640;
  color: #0b1a20;
  border-color: #78a640;
  box-shadow: none;
}

#app .status-badge.status-available .status-dot {
  background: #0b1a20;
  box-shadow: none;
}

#app .status-badge.status-on-call {
  background: transparent;
  color: #9ec1ff;
  border: 1px solid #5b9cff;
  box-shadow: none;
}

#app .status-badge.status-on-call .status-dot {
  background: #5b9cff;
  box-shadow: none;
}

#app .status-badge.status-dnd {
  background: transparent;
  color: #e0a030;
  border: 1px solid #e0a030;
  box-shadow: none;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

#app .status-badge.status-dnd .status-dot {
  background: #e0a030;
  box-shadow: none;
}

/* Unavailable: device connected, Dialpad not available, no live call. */
#app .status-badge.status-busy {
  background: transparent;
  color: #c9b48a;
  border: 1px dashed rgba(201, 180, 138, 0.7);
  box-shadow: none;
}

#app .status-badge.status-busy .status-dot {
  background: #c9b48a;
  box-shadow: none;
}

#app .status-badge.status-offline {
  background: transparent;
  color: #9aa6b2;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
}

#app .status-badge.status-offline .status-dot {
  background: #9aa6b2;
  box-shadow: none;
}

#app .tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#app .tool-tile {
  min-height: 88px;
  border-radius: 12px;
  background: var(--raised);
  border: 1px solid var(--border);
}

#app .tool-hint {
  font-size: 13px;
}

#app .sales-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#app .metrics.sales-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#app .lsa-table {
  display: none;
}

#app .lsa-card {
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--raised);
  border: 1px solid var(--border);
}

#app .lsa-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

#app .lsa-card p {
  display: flex;
  justify-content: space-between;
  margin: 4px 0;
  font-variant-numeric: tabular-nums;
}

#app .reveo-reviews {
  border-radius: 12px;
  background: var(--raised);
  border: 1px solid var(--border);
}

#app .export-menu > summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

#app .export-menu-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

#app .weather-days {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}

#app .weather-day,
#app .weather-skeleton li {
  flex: 0 0 96px;
  scroll-snap-align: start;
  min-height: 120px;
  border-radius: 12px;
  background: var(--raised);
}

#app .weather-skeleton li {
  background: rgba(255, 255, 255, 0.08);
}

#app .card,
#app .owner-card,
#app .sales-block,
#app .tile {
  border-radius: 12px;
  border-color: var(--border);
  background: var(--raised);
}

@media (min-width: 1024px) {
  #app {
    --gap: 16px;
    --header-h: 56px;
    --rail: 224px;
  }

  html.rail-collapsed #app,
  #app {
    --rail: 224px;
  }

  @media (max-width: 1199px) {
    #app {
      --rail: 64px;
    }
  }

  html.rail-collapsed #app {
    --rail: 64px;
  }

  #app-shell {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    grid-template-rows: 56px minmax(0, 1fr);
    min-height: 100vh;
  }

  #app-header {
    grid-column: 2;
    grid-row: 1;
  }

  #app-view {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }

  #app-nav {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  #app-nav {
    position: sticky;
    top: 0;
    left: 0;
    bottom: auto;
    width: var(--rail);
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 8px;
    border-top: 0;
    border-right: 1px solid var(--border);
    background: var(--surface);
    z-index: var(--z-nav);
  }

  #app-nav button[data-nav],
  #app-nav .rail-settings {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }

  #app-nav .rail-settings {
    margin-top: auto;
  }

  #app .rail-toggle,
  #app .brand-logo-full,
  #app .brand-meta-row,
  #app .user-menu-btn {
    display: inline-flex;
  }

  #app .brand-logo-compact {
    display: none;
  }

  #app .app-header {
    height: 56px;
    max-height: 56px;
    min-height: 56px;
    padding: 0 24px;
  }

  #app .brand-logo-full {
    height: 28px;
    width: calc(28px * 2117 / 320);
    max-width: min(220px, 36vw);
    object-fit: cover;
    object-position: left top;
  }

  #app .user-menu-btn {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #16243a;
    color: #e8eef7;
    border-radius: 999px;
    min-height: 32px;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
  }

  #app-view {
    padding: 24px;
    max-width: 1600px;
  }

  #app .activity-grid,
  #app .grid,
  #app .tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
  }

  #app .activity-minis {
    display: none;
  }

  #app .activity-bars {
    display: block;
    width: 100%;
  }

  #app .activity-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  #app .presence-summary {
    display: none;
  }

  #app .presence-list,
  #app .presence-label {
    display: block !important;
  }

  #view-live .live-board,
  #live-board {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }

  #app .live-timeline {
    grid-column: 1 / span 8;
    min-width: 0;
  }

  #app .presence-strip {
    grid-column: 9 / span 4;
    grid-row: 1;
    position: sticky;
    top: 72px;
  }

  #app .live-row {
    grid-template-columns: 24px 32px 104px minmax(118px, 1fr) minmax(148px, 1fr) minmax(124px, 1.1fr);
    height: 44px;
    min-height: 44px;
  }

  #app .live-kind {
    grid-column: 1;
    overflow: visible;
    text-overflow: clip;
    font-size: 0;
  }

  #app .live-kind .live-ico {
    font-size: 16px;
  }

  #app .live-kind-word {
    display: none;
  }

  #app .live-dir {
    grid-column: 2;
  }

  #app .live-time {
    grid-column: 3;
  }

  #app .live-who {
    grid-column: 4;
  }

  #app .live-agent {
    grid-column: 5;
    max-width: none;
  }

  #app .live-snippet {
    grid-column: 6;
  }

  #app .live-row .live-subject {
    display: none;
  }

  #app .live-tags {
    display: none;
  }

  #app .live-row-main,
  #app .live-row-top {
    display: contents;
  }

  #app .live-row > *,
  #app .live-row-top > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #app .live-kind {
    overflow: visible;
    text-overflow: clip;
  }

  #app .live-snippet {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  #app .sales-shell {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
  }

  #app #sales-totals,
  #app .sales-shell > .section-jumps {
    grid-column: 1 / -1;
  }

  #app #sales-agents {
    grid-column: span 8;
  }

  #app #sales-recent {
    grid-column: span 4;
    position: sticky;
    top: 96px;
    align-self: start;
  }

  #app #sales-growth,
  #app .sales-shell > #sales-growth,
  #app #sales-lsa {
    grid-column: span 6;
  }

  #app .metrics.sales-totals {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #app .lsa-cards {
    display: none;
  }

  #app .lsa-table {
    display: table;
    width: 100%;
  }

  #app .lsa-table thead th {
    position: sticky;
    top: 0;
    background: var(--raised);
    text-align: right;
  }

  #app .lsa-table td:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  #view-tools {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 16px;
  }

  #view-tools .page-bar {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #view-tools #tools-home {
    grid-column: 1;
    grid-row: 2;
  }

  #view-tools .tools-shell:not(#tools-home) {
    grid-column: 2;
    grid-row: 2;
  }

  #app .weather-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    overflow: visible;
  }

  #app .weather-day {
    flex: none;
  }

  #app .nav-label {
    display: inline;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  #app .nav-label {
    display: none;
  }

  #app-nav button[data-nav],
  #app-nav .rail-settings {
    justify-content: center;
    padding: 0;
  }
}

@media (min-width: 1024px) {
  html.rail-collapsed #app .nav-label {
    display: none;
  }

  html.rail-collapsed #app-nav button[data-nav],
  html.rail-collapsed #app-nav .rail-settings {
    justify-content: center;
    padding: 0;
  }

  #app-nav .rail-settings.active {
    background: var(--accent);
    color: var(--on-accent);
  }
}

@media (max-width: 1023px) {
  #app-nav {
    background: #0f1b2d;
    backdrop-filter: none;
  }

  #app-nav .nav-label {
    display: block;
    font-size: 11px;
  }

  #rail-settings,
  #rail-toggle,
  #nav-crews,
  #nav-owner {
    display: none !important;
  }

  #nav-more {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    min-height: 44px;
    padding: 0.4rem 0.3rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
  }

  #nav-more.active {
    background: #78a640;
    color: #0b1a20;
    border-radius: 999px;
  }

  #app:has(#view-crews:not([hidden])) #view-title,
  #app:has(#view-owner:not([hidden])) #view-title,
  #app:has(#view-settings:not([hidden])) #view-title {
    display: block;
  }
}

#more-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: flex-end;
}

#more-sheet[hidden] {
  display: none !important;
}

.more-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
}

.more-sheet-panel {
  position: relative;
  width: 100%;
  margin: 0 0 calc(64px + env(safe-area-inset-bottom, 0px));
  padding: 8px;
  border-radius: 16px 16px 0 0;
  background: #16243a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.more-sheet-panel button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #e8eef7;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  text-align: left;
}

.more-sheet-panel button[hidden] {
  display: none;
}

@media (min-width: 1024px) {
  #nav-more,
  #more-sheet {
    display: none !important;
  }
}

#app .sales-growth-scroll,
#app .owner-card {
  overflow-x: auto;
  max-width: 100%;
}

#app .sales-growth-table th,
#app .sales-growth-table td,
#app .owner-card th,
#app .owner-card td {
  white-space: nowrap;
}

#view-tools[data-open-tool]:not([data-open-tool=""]) > .page-bar {
  display: none;
}

@media (min-width: 1024px) {
  #view-tools #tools-home[hidden] {
    display: block !important;
  }
}

/* An opened tool scrolls to its top, below the sticky header. */
#view-tools .tools-shell {
  scroll-margin-top: 68px;
}

/* Desktop: the rail sits on the far left edge and the page uses the rest of the width.
   Tools: no tool open, the tiles fill the row. A tool open, the list is a narrow column
   and the tool is a panel that fills the rest. */
@media (min-width: 1024px) {
  #app-shell {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  #app-nav {
    position: sticky;
    top: 0;
    left: 0;
    align-self: start;
  }

  #app .app-header,
  #app-view {
    padding-left: 24px;
    padding-right: 24px;
  }

  #app-view {
    max-width: none;
  }

  #view-tools {
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }

  #view-tools:not([data-open-tool]) #tools-home,
  #view-tools[data-open-tool=""] #tools-home {
    grid-column: 1 / -1;
  }

  #view-tools .tools-shell {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  #view-tools[data-open-tool]:not([data-open-tool=""]) #tools-home .tools-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  #view-tools .tool-hint {
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #view-tools .tools-shell:not(#tools-home) {
    padding: 20px 24px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--raised);
    overflow-wrap: anywhere;
    scroll-margin-top: 72px;
  }

  #view-tools .translator-mode-copy {
    max-width: none;
  }
}

/* Sq ft map: the map owns touch while measuring, so the page does not scroll or zoom
   under a finger. Larger buttons and a live readout. */
#app .quote-map {
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
}

#app .quote-segment button {
  min-height: 40px;
  min-width: 44px;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
}

#app .quote-chip {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

#app .quote-draw-help {
  margin: 0.5rem 0 0;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.35;
}

@media (max-width: 767px) {
  #app .quote-toolbar {
    position: static;
    margin-bottom: 0.5rem;
  }

  #app .quote-segment {
    flex-wrap: nowrap;
  }

  #app .quote-map {
    height: min(60vh, 26rem);
  }
}

/* Phone: the company summary hides its tile grid, but the AnswerConnect
   reason tiles live in their own block and must still show. */
@media (max-width: 480px) {
  #app #view-kpis > #company .ac-overflow .company-metrics {
    display: grid;
  }
}

/* Zero layout shift on refresh (2026-11-03). Data syncs patch nodes in
   place; these rules keep every changing piece the same size. */
#app {
  font-variant-numeric: tabular-nums;
}
#app .val,
#app .activity-mini-val,
#app .cell-val,
#app [data-asof],
#app .card-source,
#app .snapshot-age,
#app td {
  font-variant-numeric: tabular-nums;
}
/* The status pill keeps one size whatever the label (On a call, DND,
   Unavailable, Offline, Live). */
#app .status-badge {
  box-sizing: border-box;
  min-width: 8.6em;
  min-height: 1.45rem;
  justify-content: center;
  font-size: 0.75rem;
}
/* "· updating…" is always in the stamp; it only turns visible, so the
   stamp never changes width. */
#app .asof-updating.is-off {
  visibility: hidden;
}
/* The page-level Updating line is redundant with the stamps; keep it for
   screen readers without taking a line. */
#app #kpi-updating {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* UI/UX batch A: the refresh banner sits in the page flow inside a slot of
   fixed height that is always reserved, so it never covers cards and
   showing or hiding it never moves anything. */
#app #kpi-banner {
  display: flex !important;
  align-items: center;
  box-sizing: border-box;
  height: 2.75rem;
  min-height: 2.75rem;
  margin: 0 0 0.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#app #kpi-banner[hidden] {
  visibility: hidden;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
#app #kpi-banner > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#app .tile {
  min-height: 4.6rem;
}

/* UI/UX batch A: a sticky grid item is held by the whole grid, not its own
   row, so it slid over or under the next rows (Growth, Google ads). These two
   side cards stay in their row. */
@media (min-width: 1024px) {
  #app #sales-recent,
  #app .presence-strip {
    position: relative;
    top: auto;
  }
}
/* Sticky table headers (already opaque) sit on the scale. */
#app .lsa-table thead th,
#app .proof-table th {
  z-index: var(--z-sticky-table);
}
/* Google ads: the loading block holds the full 14-day table's height (it is
   the last block, and its jump chip is already in the row), so the summary
   landing late never pushes the page. */
#app .sales-lsa[data-lsa="loading"] {
  min-height: 38rem;
}
#app .sales-lsa .lsa-skel {
  height: 32rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}
/* Live: the day label sticks right under the filters bar at its real height
   (the bar is taller on phones), so it never tucks under it. */
#app .live-filters {
  --live-filters-h: 40px;
  box-sizing: border-box;
  height: var(--live-filters-h);
}
#app .live-timeline {
  --live-filters-h: 40px;
}
#app .live-day {
  top: calc(var(--header-h) + var(--context-h) + var(--live-filters-h, 40px));
}
@media (max-width: 899px) {
  #app .live-timeline,
  #app .live-filters {
    --live-filters-h: 46px;
  }
}

/* ── UI/UX batch B: form controls in the site theme ──────────────────────
   Pico.css-style values (MIT, ideas only, no dependency). Everything sits in
   :where() so it has zero specificity: any control that already has its own
   themed rule (pills, tabs, chips, toggles, period buttons) keeps it. */
:root {
  --fc-h: 2.5rem;
  --fc-pad-x: 0.75rem;
  --fc-radius: 0.5rem;
  --fc-bg: #0f1621;
  --fc-bg-disabled: #121a26;
  --fc-border: var(--border-strong, #5e808c);
  --fc-border-hover: #7d9aa5;
  --fc-focus: var(--accent, #78a640);
  --fc-focus-ring: 0 0 0 3px rgba(120, 166, 64, 0.35);
  --fc-invalid: var(--err, #f07178);
  --fc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23c5d0dc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay, .signout-modal, .tutorial-modal)
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]), select, textarea) {
  box-sizing: border-box;
  min-height: var(--fc-h);
  padding: 0.45rem var(--fc-pad-x);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  background-color: var(--fc-bg);
  color: var(--text, #e8eef7);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.35;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay, .signout-modal, .tutorial-modal) :where(textarea) {
  min-height: 5.5rem;
  resize: vertical;
}
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay, .signout-modal, .tutorial-modal) :where(select) {
  padding-right: 2.25rem;
  background-image: var(--fc-chevron);
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 12px 8px;
  cursor: pointer;
}
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay) :where(select[multiple], select[size]:not([size="1"])) {
  padding-right: var(--fc-pad-x);
  background-image: none;
}
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay) :where(input, select, textarea)::placeholder {
  color: var(--empty, #b7c4d2);
  opacity: 0.75;
}
/* Native date/time pickers: dark popup and a light calendar glyph. */
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay) :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"]) {
  color-scheme: dark;
}
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay) :where(input[type="search"])::-webkit-search-cancel-button {
  filter: invert(0.8);
}
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay) :where(input, select, textarea):where(:hover):where(:not(:disabled)) {
  border-color: var(--fc-border-hover);
}
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay, .signout-modal, .tutorial-modal) :where(input, select, textarea):where(:focus-visible, :focus) {
  outline: none;
  border-color: var(--fc-focus);
  box-shadow: var(--fc-focus-ring);
}
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay) :where(input, select, textarea):where([aria-invalid="true"], :user-invalid) {
  border-color: var(--fc-invalid);
}
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay) :where(input, select, textarea, button):where(:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay) :where(input, select, textarea):where(:disabled) {
  background-color: var(--fc-bg-disabled);
}
/* Checkbox and radio stay native (accessible) but take the brand green. */
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay, .signout-modal, .tutorial-modal) :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--accent, #78a640);
  width: 1.15rem;
  height: 1.15rem;
  margin: 0 0.4rem 0 0;
  vertical-align: -0.2em;
  cursor: pointer;
}
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay) :where(input[type="range"]) {
  accent-color: var(--accent, #78a640);
}
/* File inputs: the picker button looks like a secondary button. */
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay) :where(input[type="file"]) {
  font: inherit;
  font-size: 0.9rem;
  color: var(--muted, #c5d0dc);
  max-width: 100%;
}
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay) :where(input[type="file"])::file-selector-button {
  min-height: var(--fc-h);
  margin-right: 0.75rem;
  padding: 0 1rem;
  border: 1px solid rgba(120, 166, 64, 0.65);
  border-radius: 999px;
  background: rgba(120, 166, 64, 0.18);
  color: #f4f7ef;
  font: inherit;
  cursor: pointer;
}
/* Buttons: one height and four looks. Only opt-in classes and form submit
   buttons; already-themed buttons keep their own rules. */
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay, .signout-modal) :where(.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, form button[type="submit"]:not([class])) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--fc-h);
  padding: 0 1rem;
  border-radius: 999px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay, .signout-modal) :where(.btn-primary, form button[type="submit"]:not([class])) {
  border: 1px solid var(--accent, #78a640);
  background: var(--accent, #78a640);
  color: var(--on-accent, #0b1a20);
}
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay, .signout-modal) :where(.btn-secondary, .btn) {
  border: 1px solid rgba(120, 166, 64, 0.65);
  background: rgba(120, 166, 64, 0.18);
  color: #f4f7ef;
}
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay, .signout-modal) :where(.btn-ghost) {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text, #e8eef7);
}
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay, .signout-modal) :where(.btn-danger) {
  border: 1px solid var(--err, #f07178);
  background: var(--err-soft, rgba(240, 113, 120, 0.1));
  color: var(--err, #f07178);
}
:where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay, .signout-modal) :where(button):where(:focus-visible) {
  outline: 2px solid var(--accent-2, #5b9cff);
  outline-offset: 2px;
}
/* Focus and invalid must beat the older "#app input { border-color }" rule,
   so these two carry #app specificity on purpose. */
#app :is(input, select, textarea):focus-visible,
#csr-sheet :is(input, select, textarea):focus-visible,
#csr-drawer :is(input, select, textarea):focus-visible {
  border-color: var(--fc-focus);
}
#app :is(input, select, textarea)[aria-invalid="true"],
#csr-sheet :is(input, select, textarea)[aria-invalid="true"],
#csr-drawer :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--fc-invalid);
}
/* Phones: 44px touch height, and 16px text so iOS never zooms on focus. */
@media (max-width: 640px) {
  :root {
    --fc-h: 44px;
  }
  :where(#app, #csr-sheet, #csr-drawer, .csr-sheet, .overlay, .signout-modal, .tutorial-modal)
    :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea) {
    font-size: 16px;
  }
}
/* Signed out: no app chrome over the Google sign-in gate (the call panel's
   Calls bar, drawer and sheet mount on the body, outside #app). */
html:not(.has-session) #csr-strip,
html:not(.has-session) #csr-drawer,
html:not(.has-session) #csr-sheet,
html:not(.has-session) #app-nav {
  display: none !important;
}

/* Batch C: account menu (gear + Account). Fixed popover above content on
   every width, so the header frame can never clip it. */
#app .user-menu-panel.account-menu {
  position: fixed;
  top: calc(52px + env(safe-area-inset-top, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  z-index: var(--z-overlay);
  min-width: 220px;
  max-width: calc(100vw - 16px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 12px;
  background: #16243a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
#app .user-menu-panel.account-menu .who {
  margin: 4px 8px 6px;
  font-size: 12px;
  color: var(--muted, #9fb0c7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app .user-menu-panel.account-menu .who::after { content: none; }
#app .user-menu-panel.account-menu #menu-settings,
#app .user-menu-panel.account-menu .sign-out {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #e8eef7;
  cursor: pointer;
}
#app .user-menu-panel.account-menu .sign-out { color: #ff8a8a; }
#app .user-menu-panel.account-menu .sign-out::before { content: none; }
#app .user-menu-panel.account-menu #menu-settings:hover,
#app .user-menu-panel.account-menu .sign-out:hover,
#app .user-menu-panel.account-menu #menu-settings:focus-visible,
#app .user-menu-panel.account-menu .sign-out:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}
@media (min-width: 768px) {
  #app .user-menu-panel.account-menu { top: 60px; right: 24px; }
}

/* ===== Batch D (designer spec 2026-11-04, items 1-9) ===== */
/* batch-a.css, new block "batch D primitives" */
#app {
  --pill-h: 24px;          /* status and count pills */
  --pill-h-ctl: 32px;      /* clickable pills, desktop */
  --pill-pad-x: 10px;
  --pill-fs: 12px;
  --tap: 44px;
  --icon-btn: 32px;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}
@media (max-width: 767px) { #app { --pill-h-ctl: 44px; --icon-btn: 44px; } }

#app .icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--icon-btn); height: var(--icon-btn); min-width: var(--icon-btn);
  padding: 0; margin: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); line-height: 1; cursor: pointer;
}
#app .icon-btn:hover { color: var(--text); background: rgba(255,255,255,.06); }
#app .icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#app .icon-btn svg { width: 16px; height: 16px; display: block; pointer-events: none; }

/* phone: summary row is 44px (batch-a 218–241); reserve it */
#app .presence-strip { min-height: 44px; contain: layout paint; }
#app .presence-strip[data-state="stale"] .status-badge { opacity: .6; }
#app .presence-skel { display:block; height: 24px; border-radius: var(--radius-pill); background: rgba(255,255,255,.06); }
@media (min-width: 1024px) {
  /* desktop: list always open, column 9 / span 4 (batch-a 837–855) */
  #app .presence-strip { min-height: calc(28px + 6 * 32px); align-self: start; }
  #app .presence-row { min-height: 32px; }
}
#app .live-board { min-height: 60vh; }   /* timeline height does not jump to 0 while patching */

#app .tile-wrap { position: relative; min-width: 0; display: grid; }
#app .tile-wrap > .tile { padding-right: 36px; }            /* room for the dot */
#app .tile-wrap > .info-dot { position: absolute; top: 4px; right: 4px; margin: 0; }
/* the existing #app button.info-dot.info-dot (styles 6781–6804) is already 44×44 with a 22px visual */
@media (min-width: 1024px) {
  #app .tile-wrap > button.info-dot.info-dot { width: 32px; height: 32px; padding: 5px; }
}
#app .tile-def {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-popover);
  width: min(280px, calc(100vw - 32px)); padding: 10px 12px;
  background: var(--raised); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  font-size: 13px; line-height: 1.4; color: var(--text); white-space: normal;
}

#app .gear-btn { display: none !important; }     /* until the markup is removed */
#app .account-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--tap); min-width: var(--tap); padding: 0 6px; margin-right: -6px;
  border: 0; border-radius: var(--radius-pill); background: transparent;
  color: var(--text); font: inherit; font-size: 13px; font-weight: 650; line-height: 1; cursor: pointer;
}
#app .account-btn:hover { background: rgba(255,255,255,.06); }
#app .account-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#app .account-btn[aria-expanded="true"] { background: rgba(255,255,255,.08); }
#app .account-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #0b1420; font-size: 13px; font-weight: 800; letter-spacing: 0;
}
#app .account-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app .account-caret { width: 12px; height: 12px; color: var(--muted); }
@media (max-width: 767px) {
  #app .user-menu-btn, #app .account-btn { display: inline-flex !important; }   /* override batch-a 48–53 */
  #app .account-name, #app .account-caret { display: none; }
  #app .account-btn { width: 44px; padding: 0; justify-content: center; margin-right: -6px; }
}
@media (min-width: 1024px) { #app .account-btn { height: 40px; padding: 0 10px 0 4px; } }
/* menu: keep batch-a 1603–1656 (fixed, z var(--z-overlay), 44px items). Add the identity block: */
#app .user-menu-panel.account-menu .account-id { padding: 10px 14px; border-bottom: 1px solid var(--border); }
#app .user-menu-panel.account-menu .account-email { margin: 2px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

/* the base: add the class "pill" in markup, or list the selectors (below) on this rule */
#app :is(.pill, .chip, .badge, .status-badge, .shift-chip, .feed-health-pill, .live-chip,
         .tool-hint, .soon-chip, .activity-quiet-chip, .lookup-badge, .quote-badge, .quote-pill,
         .company-count) {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  box-sizing: border-box; height: var(--pill-h); min-height: 0; padding: 0 var(--pill-pad-x);
  border-radius: var(--radius-pill); font-size: var(--pill-fs); font-weight: 700; line-height: 1;
  white-space: nowrap; vertical-align: middle;
}
/* uppercase pills: offset the trailing letter-spacing so the text is centered */
#app :is(.badge, .shift-chip, .tool-hint, .soon-chip) {
  letter-spacing: .06em; padding-left: calc(var(--pill-pad-x) + .06em); padding-right: var(--pill-pad-x);
}
@supports (text-box: trim-both cap alphabetic) {
  #app :is(.badge, .shift-chip, .tool-hint, .soon-chip, .status-badge) { text-box: trim-both cap alphabetic; }
}
/* count pills: numbers do not change the width */
#app :is(.pill-count, .company-count, .live-chip .n) { min-width: var(--pill-h); font-variant-numeric: tabular-nums; }
/* clickable pills */
#app :is(.section-jumps button[data-jump], .settings-cats button, .ask-starter, .ask-pill,
         .lookup-reply-channels button, .crew-mode, .translator-modes button, .export-menu > summary,
         .owner-chip, .month-toggle) {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--pill-h-ctl); min-height: var(--pill-h-ctl); padding: 0 12px;
  border-radius: var(--radius-pill); line-height: 1; white-space: nowrap;
}
/* status-badge keeps its width rule from batch-a 1331 (min-width 8.6em) so the presence column lines up */
#app .status-badge { padding: 0 8px 0 6px; }
#app .status-badge .status-dot { flex: 0 0 8px; height: 8px; }

@media (min-width: 1024px) {
  #app .app-header { align-items: center; }               /* every header child centers in 56px */
  #app .rail-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--tap); height: var(--tap); margin: 0 8px 0 -12px;  /* glyph lines up with the content edge */
    padding: 0; border: 0; border-radius: 10px; background: transparent;
    color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
  }
  #app .rail-toggle:hover { color: var(--text); background: rgba(255,255,255,.06); }
  #app .rail-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  #app .header-brand { display: flex; flex-direction: column; justify-content: center; min-height: 56px; }
}

#view-tools[data-open-tool] .translator-kicker { display: none; }
#view-tools[data-open-tool] .translator-bar { margin: 0 0 12px; justify-content: flex-start; max-width: none; }
#view-tools[data-open-tool] .translator-title {      /* the h2 stays for headings, visually hidden */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
#app .translator-back {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; margin: 0 0 0 -8px; padding: 0 8px;    /* text lines up with the content left edge */
  border: 0; border-radius: 8px; background: transparent;
  font-size: 14px; font-weight: 600; line-height: 1; color: var(--muted);
}
#app .translator-back .crumb-cur { color: var(--text); }
#app .translator-back .crumb-sep { opacity: .5; }
#app .translator-back:hover .crumb-root { color: var(--accent); text-decoration: underline; }
#app .translator-back:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 767px) { #app .translator-back { min-height: 44px; } }

#app .crew-roster { min-width: 0; }
#app .crew-roster label { min-width: 0; }
#app .crew-roster input:not([type="checkbox"]),
#app .crew-roster select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
#app .crew-roster-row {
  display: grid; gap: 8px 10px; align-items: end;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);        /* phone: ID | Type / Name | Lead / Active */
  grid-template-areas: "id type" "name lead" "active active";
  padding: 10px 0; border-top: 1px solid var(--border); margin: 0;
}
#app .crew-roster-row > label:nth-child(1) { grid-area: id; }
#app .crew-roster-row > label:nth-child(2) { grid-area: name; }
#app .crew-roster-row > label:nth-child(3) { grid-area: lead; }
#app .crew-roster-row > label:nth-child(4) { grid-area: type; }
#app .crew-roster-row > .crew-check { grid-area: active; min-height: 44px; }
@media (min-width: 720px) {
  #app .crew-roster-row {
    grid-template-columns: minmax(0, 5.5rem) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 9rem) auto;
    grid-template-areas: "id name lead type active";
  }
}
/* Let the form theme set the height: delete min-height:48px at styles 5509, or set it to var(--fc-h) */
#app .crew-roster input:not([type="checkbox"]), #app .crew-roster select { min-height: var(--fc-h); }

#app .live-copy {                     /* replaces batch-a 496 */
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--icon-btn); height: var(--icon-btn); padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); font-size: 0; line-height: 1; cursor: pointer;
}
#app .live-copy svg { width: 16px; height: 16px; }
#app .live-copy:hover { color: var(--text); background: rgba(255,255,255,.06); }
#app .live-copy:focus-visible { outline: none; box-shadow: var(--focus-ring); opacity: 1; }
#app .live-copy[data-copied="1"] { color: var(--accent); }
#app .live-copy[data-copy-number=""] { display: none; }      /* 0002: no number, no control */
@media (min-width: 1024px) {
  #app .live-row { grid-template-columns: 24px 32px 104px minmax(118px,1fr) minmax(148px,1fr) minmax(124px,1.1fr) 32px; }
  #app .live-copy { grid-column: 7; grid-row: 1; align-self: center; opacity: 0; }
  #app .live-row:hover .live-copy, #app .live-row:focus-within .live-copy { opacity: 1; }
}
@media (max-width: 767px) {
  /* show it as a 44px target at the right of the top line; long-press stays */
  #app .live-row-main { position: relative; }
  #app .live-row-main:has(.live-copy:not([data-copy-number=""])) { padding-right: 44px; }
  #app .live-copy { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
  #app .live-row .live-who { font-size: 13px; }
}

#app .health-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
#app .health-table col.c-feed { width: 30%; } #app .health-table col.c-status { width: 92px; }
#app .health-table col.c-num { width: 88px; }  /* detail = rest */
#app .health-table th, #app .health-table td { padding: 8px 6px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
#app .health-table th { font-size: 11px; font-weight: 700; color: var(--muted); }
#app .health-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#app .health-table td:nth-child(2) { text-transform: capitalize; white-space: nowrap; }
#app .health-table tr td { color: var(--text); }
#app .health-table tr[data-tone="green"] td:nth-child(2) { color: var(--muted); }    /* neutral, not green */
#app .health-table tr[data-tone="yellow"] td:nth-child(2) { color: var(--amber); }
#app .health-table tr[data-tone="red"] td:nth-child(2) { color: var(--danger); font-weight: 700; }
#app .health-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: currentColor; vertical-align: 1px; }
@media (max-width: 767px) {           /* 390: stack the Detail cell under the row */
  #app .health-table, #app .health-table tbody, #app .health-table tr { display: block; }
  #app .health-table thead { display: none; }
  #app .health-table tr { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--border); }
  #app .health-table td { border: 0; padding: 0; }
  #app .health-table td:nth-child(4) { grid-column: 1 / -1; color: var(--muted); }
}

#app .activity-bars > .activity-metric + .activity-metric { margin-top: 6px; }
#app .activity-metric .activity-missing { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app .activity-metric,
#app .activity-metric[data-activity-known="0"] {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) 3.75rem; align-items: center; column-gap: 8px;
}
#app .activity-metric .activity-label { grid-column: 1; }
#app .activity-metric .activity-track,
#app .activity-metric .activity-missing { grid-column: 2; }
#app .activity-metric .activity-val { grid-column: 3; text-align: right; font-variant-numeric: tabular-nums; }
#app .activity-track { background: rgba(255,255,255,.07); }   /* empty bar stays visible on the card */

#app .activity-quiet { margin-top: 12px; }
#app .activity-quiet > summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; color: var(--muted); font-size: 13px; }
#app .activity-quiet-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
#app .activity-quiet-chip { /* uses the pill base (item 4) */ background: rgba(255,255,255,.05); color: var(--muted); font-weight: 600; }
@media (max-width: 767px) { #app .activity-quiet > summary { min-height: 44px; } }

#app .page-age[data-asof="page"] { margin: 4px 0 8px; font-size: 12px; line-height: 16px; min-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Batch D extras */
#app .tile-def[hidden], #app .live-copy svg[hidden] { display: none; }
#app h2 .tile-def, #app h3 .tile-def, #app p .tile-def { position: absolute; font-weight: 400; text-transform: none; letter-spacing: 0; }
#app h2, #app h3, #app .muted:has(> .info-dot) { position: relative; }
#app .live-copy[data-copied="1"] .ic-check { color: var(--accent); }
#app .presence-strip[data-state="loading"] { display: grid; gap: 6px; align-content: start; }

/* ---- Batch D follow-up (0002) ---- */
@media (max-width: 767px) {
  #app .live-row .live-row-top { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 6px; min-width: 0; }
  #app .live-row .live-row-top > * { white-space: nowrap; flex: 0 0 auto; }
  #app .live-row .live-row-top .live-who { font-size: 13px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #app .live-row .live-row-top .live-agent { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
#app .brand-top { align-items: baseline; }
#app .page-asof { min-height: 24px; }
#app .page-asof > .page-age { margin: 4px 0; }
#app .tile-wrap > .info-dot { top: 6px; right: 6px; }
@media (max-width: 767px) {
  #app .section-jumps button, #app .page-bar select, #app .account-btn, #app .translator-back { min-height: 44px; }
  #app .account-btn, #app .translator-back { min-width: 44px; }
}
#app { --header-h: 56px; }   /* the header renders 56px at 390 and 1280; 48 let it clip the bar */
#app .page-bar { top: var(--header-h); }
#app .user-menu-panel.account-menu .account-id > * { margin-left: 0; padding-left: 0; text-align: left; }
#app .overlay-foot:empty, #app .overlay-foot:not(:has(> :not([hidden]))) { display: none; }
#app .drilldown-list > li, #app .drill-row { align-items: center; }
#app .drilldown-list > li:last-child { border-bottom: 0; }
@media (max-width: 767px) {
  #app .crew-modes { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  #app .crew-modes > * { flex: 0 0 auto; }
  #app .crew-modes::-webkit-scrollbar { display: none; }
}
@media (min-width: 768px) { #app #view-settings .settings-shell { max-width: none; } }
#app .ask-memory { margin-top: 12px; }

/* ---- final batch part B (11/4) ---- */
/* 1: status summary on one line; the arrow turns when open */
#app .presence-summary { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; gap: 6px; }
#app .presence-summary-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; text-align: left; }
#app .summary-arrow { display: inline-block; flex: 0 0 auto; transition: transform .15s ease; }
#app .presence-summary[aria-expanded="true"] .summary-arrow,
#app details[open] > summary .summary-arrow { transform: rotate(180deg); }
#app details.live-group[open] > summary .summary-arrow { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { #app .summary-arrow { transition: none; } }
/* 2: one line per row on phones (email, text, call, AnswerConnect); the preview clamps to one line everywhere */
#app .live-preview { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
#app details.live-group > summary { list-style: none; }
#app details.live-group > summary::-webkit-details-marker { display: none; }
#app details.live-group > summary::marker { content: ""; }
@media (max-width: 767px) {
  #app #live-board .live-row .live-row-main { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
  #app #live-board .live-row .live-row-top { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #app #live-board .live-row .live-row-top > * { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #app #live-board .live-row :is(.live-subject, .live-snippet, .live-tags) { flex: 1 1 0; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #app #live-board .live-row .live-tags { display: none; }
  #app #live-board .live-row .live-subject { font-size: 13px; font-weight: 600; }
  #app details.live-group > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; white-space: nowrap; }
  #app details.live-group > summary .summary-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #app details.live-group > summary .summary-arrow { flex: 0 0 auto; }
  /* the fixed Calls bar never covers the last rows */
  #app .app-view-panel { padding-bottom: calc(var(--tap, 44px) + 72px + env(safe-area-inset-bottom, 0px)); }
  /* nit: 44px chips and period select */
  #app .live-filters :is(button, .chip, select), #app .chip-row :is(button, .chip), #app .period-select { min-height: 44px; }
  /* nit: Feeds/missed cutoff input and Save stacked */
  #app #call-settings-card .settings-row { flex-direction: column; align-items: stretch; flex-wrap: wrap; }
  #app #missed-cutoff-input, #app #missed-cutoff-save { width: 100%; min-height: 44px; }
}
/* 6: an inline "i" after the label */
#app .tile-wrap-inline > .tile { padding-right: 12px; }
#app .tile-host { position: relative; }
#app .tile-host > .tile-hit { position: absolute; inset: 0; z-index: 0; margin: 0; padding: 0; border: 0; background: transparent; border-radius: inherit; cursor: pointer; min-height: 0; }
#app .tile-host > .tile-hit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#app .tile-host > :not(.tile-hit) { position: relative; z-index: var(--z-base); pointer-events: none; }
#app .tile-host .lbl > .info-dot, #app .tile-host .lbl > .tile-def { pointer-events: auto; }
#app .tile-host .lbl > .info-dot { position: static; display: inline-flex; vertical-align: middle; margin: -12px -10px -12px -6px; }
#app .tile-wrap-inline .lbl > .info-dot { position: static; display: inline-flex; vertical-align: middle; margin: -12px -10px -12px -6px; }
/* 7: the Sales roster pill wraps inside the tile instead of clipping */
#app .sales-active .chip { max-width: 100%; height: auto; min-height: 24px; white-space: normal; overflow-wrap: anywhere; text-align: left; line-height: 1.3; padding-top: 3px; padding-bottom: 3px; }
/* 8: on Settings and Tools the page h1 names the page; the header keeps the logo */
#app:has(#view-settings:not([hidden])) #view-title,
#app:has(#view-tools:not([hidden])) #view-title { display: none; }
/* 11: the account button keeps its whole name */
#app .header-actions { flex: 0 0 auto; min-width: max-content; }
@media (min-width: 1024px) {
  #app .account-btn { margin-right: 0; }
  #app .account-name { max-width: 22ch; }
}
/* nit: smaller "Unknown caller" at 1280 */
@media (min-width: 1024px) { #app .live-row .live-who { font-size: 13px; font-weight: 600; } }
/* nit: Crews Active label above its checkbox */
#app .crew-roster .crew-check { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; }
#app .crew-check input { width: 22px; height: 22px; margin: 11px 0; }
/* gate: seasonal photos stay; navy only behind them as the fallback */
html:not(.has-session) body, .login-hero { background-color: #0F1B2D; }
#app .presence-strip.is-open .summary-arrow { transform: rotate(180deg); }
/* Schedule: time inputs fit "10:00 AM" plus the picker icon */
#app .schedule-day input[type="time"] { min-width: 7.5rem; font-variant-numeric: tabular-nums; padding-right: 0.25rem; }
@media (min-width: 721px) {
  #app .schedule-days { grid-template-columns: repeat(auto-fill, minmax(8.3rem, 1fr)); }
}
@media (max-width: 720px) {
  #app .schedule-days { grid-template-columns: 1fr; overflow: visible; }
  #app .schedule-day { display: grid; grid-template-columns: 3rem minmax(7.5rem, 1fr) minmax(7.5rem, 1fr); grid-auto-rows: auto; align-items: end; column-gap: 0.4rem; }
  #app .schedule-day > .schedule-day-label { align-self: center; }
  #app .schedule-day > .schedule-off { grid-column: 1 / -1; min-height: 44px; }
}
#app .schedule-day input[type="checkbox"] { width: 22px; height: 22px; min-width: 0; margin: 0; padding: 0; flex: 0 0 auto; }
/* an open "i" tooltip sits above the neighbouring tiles */
#app .tile-wrap:has(.tile-def:not([hidden])) { z-index: var(--z-popover); }
#app .tile-host .lbl { white-space: normal; }
#app .tile-host .lbl > .info-dot, #app .tile-wrap-inline .lbl > .info-dot { white-space: nowrap; }
/* GO nits */
#app details.activity-quiet > summary { list-style: none; }
#app details.activity-quiet > summary::-webkit-details-marker { display: none; }
#app details.activity-quiet[open] > summary .summary-arrow { transform: rotate(90deg); }
#app .live-filters, #app .live-day { background-color: #0F1B2D; }
#app details.live-group > summary { font-size: 13px; }
#app details.activity-quiet > summary .summary-arrow { margin-left: 4px; }

/* ── Final batch 2 (live review 2026-11-04) ─────────────────────────────── */
/* 1. Live has no period bar, so the filter row sticks right under the header,
   and at the very top once the header slides away. The old top added the
   40px context bar, leaving a gap the rows showed through. */
#app #live-board .live-filters,
#app .live-timeline > .live-filters {
  top: var(--header-h);
  background-color: #0F1B2D;
  box-shadow: 0 -8px 0 #0F1B2D, 0 1px 0 var(--border);
}
html.header-hidden #app #live-board .live-filters,
html.header-hidden #app .live-timeline > .live-filters { top: 0; }
#app #live-board .live-rows > .live-day,
#app .live-timeline .live-day {
  top: calc(var(--header-h) + var(--live-filters-h, 40px));
  background-color: #0F1B2D;
  color: var(--text, #e8eef7);
}
html.header-hidden #app #live-board .live-rows > .live-day,
html.header-hidden #app .live-timeline .live-day { top: var(--live-filters-h, 40px); }

/* 2. Phone Live rows: one line, but the caller and a short time win the space;
   the agent and the preview give way first. Desktop keeps the full stamp. */
#app .live-time-short { display: none; }
@media (max-width: 767px) {
  #app #live-board .live-row .live-time-full { display: none; }
  #app #live-board .live-row .live-time-short { display: inline; }
  #app #live-board .live-row .live-row-top { display: contents; }
  #app #live-board .live-row .live-row-top > .live-dir,
  #app #live-board .live-row .live-row-top > .live-time {
    flex: 0 0 auto; overflow: visible; text-overflow: clip;
  }
  #app #live-board .live-row .live-row-top > .live-who {
    flex: 0 0 auto; max-width: 11.5em; overflow: hidden; text-overflow: ellipsis;
  }
  #app #live-board .live-row .live-row-top > .live-agent {
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }
  #app #live-board .live-row :is(.live-subject, .live-snippet) { flex: 1 1 0; min-width: 0; }
  #app details.live-group > summary { white-space: normal; }
  #app details.live-group > summary .summary-text { white-space: normal; overflow: visible; text-overflow: clip; }
}
/* The status summary wraps to two lines instead of an ellipsis. */
#app .presence-summary { white-space: normal; align-items: center; }
#app .presence-summary-text {
  white-space: normal; overflow: visible; text-overflow: clip;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}

/* 3. The "i" rides with the label's last word, never alone on a line. */
#app .lbl-tail { white-space: nowrap; }
#app .lbl .info-dot, #app .card-source .info-dot, #app .page-asof .info-dot {
  display: inline-flex; vertical-align: middle; position: relative;
  width: 22px; height: 22px; min-width: 22px; min-height: 22px; padding: 0; margin: -11px 0 -11px 2px;
}
#app .lbl .info-dot::after, #app .page-asof .info-dot::after {
  content: ""; position: absolute; inset: -11px;   /* 44px tap target */
}

/* 4. Popovers outside tiles anchor to their own line and sit above tiles. */
#app .asof-older { position: relative; display: inline-block; }
#app .page-asof { position: relative; z-index: var(--z-popover); }
#app .asof-older > .tile-def { left: 0; right: auto; top: calc(100% + 6px); }
#app .lbl { position: relative; }
#app .tile-host:has(.tile-def:not([hidden])),
#app .tile:has(.tile-def:not([hidden])) { z-index: var(--z-popover); overflow: visible; }

/* 7. Company growth: the table scrolls inside its card, never past the edge. */
#app #sales-growth, #app .sales-growth, #app .sales-growth > * { min-width: 0; max-width: 100%; }
#app .sales-growth .sales-growth-scroll { overflow-x: auto; max-width: 100%; }

/* 8. Tool hint pills wrap, centred, inside the tile. */
#app #view-tools .tool-hint {
  white-space: normal; overflow: visible; text-overflow: clip;
  max-width: 100%; box-sizing: border-box; text-align: center; line-height: 1.25;
  overflow-wrap: anywhere;
}

/* 10. Every view clears the fixed Calls bar plus the bottom nav and safe area. */
@media (max-width: 767px) {
  #app .app-view-panel,
  #app #view-live,
  #app #live-board {
    scroll-padding-bottom: calc(var(--tap, 44px) + 72px + env(safe-area-inset-bottom, 0px));
  }
  #app .app-view-panel:not([hidden]) {
    padding-bottom: calc(var(--tap, 44px) + 72px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Final batch 3 (live review 2026-11-04 12:05 CT) ─────────────────────── */
/* 1. "No sales yet" is a real value, not a loading bar. */
#app .tile .val.val-empty { color: var(--muted); font-size: 1rem; }
/* 2. The "i" sits inside .lbl-tail now; keep it (and its popover) tappable
   above the tile-hit button so a tap opens only the popover. */
#app .tile-host .lbl .info-dot,
#app .tile-host .lbl .tile-def { pointer-events: auto; }
/* 3. Sticky Live strip: backfill edge to edge (container padding) and the
   label's margin, so no row text shows beside or under "Today". */
#app #live-board .live-filters,
#app .live-timeline > .live-filters,
#app #live-board .live-rows > .live-day,
#app .live-timeline .live-day { isolation: isolate; }
#app #live-board .live-filters::before,
#app .live-timeline > .live-filters::before,
#app #live-board .live-rows > .live-day::before,
#app .live-timeline .live-day::before {
  content: "";
  position: absolute;
  inset: -8px -24px -6px;
  background: #0F1B2D;
  z-index: -1;
  pointer-events: none;
}
#app #live-board .live-rows > .live-day,
#app .live-timeline .live-day { margin-top: 0; padding-top: 8px; }
/* 4. Tools hint pills grow with wrapped text. */
#app #view-tools .tool-hint {
  text-box: normal;
  border-radius: 12px;
  height: auto;
  min-height: 0;
  line-height: 1.25;
  padding-top: 3px;
  padding-bottom: 3px;
  overflow: visible;
}
/* 5. Live name column on phones: short name shown, full name in title/aria. */
#app .live-short-name { display: none; }
@media (max-width: 767px) {
  #app .live-full-name { display: none; }
  #app .live-short-name { display: inline; }
}

/* Team row (2026-11-04): one compact tile shape. The drilldown button behind an
   "i" tile is .tile-hit (absolute, invisible); every tile stacks number then
   label from the top, so the numbers line up whether the tile is a button or
   a div. The label wraps only between words, and "Today i" never splits. */
#app .company-metrics > .tile,
#app .company-metrics > .tile-wrap > .tile,
#app .company-metrics > .tile-host {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 2px;
  min-height: 0;
}
#app .company-metrics > .tile-wrap { display: grid; align-items: stretch; }
#app .company-metrics .tile .val { line-height: 1.2; }
#app .company-metrics .tile .lbl { margin-top: 0; line-height: 1.3; }
@media (min-width: 1024px) {
  #app .company-metrics > .tile,
  #app .company-metrics > .tile-wrap > .tile,
  #app .company-metrics > .tile-host { min-height: 3.5rem; padding: 8px 10px; }
}

/* Sales totals (2026-11-04): Active clients is the fourth tile, same shape as
   New leads, New customers and Close rate; no roster pill, no divider. */
#app .metrics.sales-totals > .tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 2px;
  margin: 0;
  min-width: 0;
}
#app .metrics.sales-totals > .tile .val { line-height: 1.2; }
#app .metrics.sales-totals > .tile .lbl { margin-top: 0; line-height: 1.3; }
#app .sales-active-tile .val.live { color: var(--accent); }
#app .sales-active-tile .sales-active-updated { font-size: 0.7rem; color: var(--muted); line-height: 1.3; }
@media (min-width: 1024px) {
  #app .metrics.sales-totals > .tile { min-height: 3.5rem; padding: 8px 10px; }
}

/* Month toggle (2026-11-04): latest 3 vs all at every width (the hide rule was
   phone-only, so on desktop the pill did nothing). Standard pill, inline with Export. */
#app table.month-collapse:not(.is-expanded) tr.month-extra { display: none !important; }
#app .growth-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; }
#app .growth-actions > .export-menu { margin: 0; }
#app .month-toggle,
#app .growth-actions > .month-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--pill-h-ctl); min-height: var(--pill-h-ctl); margin: 0; padding: 0 12px;
  border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--raised);
  color: inherit; font: inherit; font-size: 0.8rem; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
}
#app .month-toggle:hover { border-color: rgba(61, 214, 140, 0.45); }
#app .month-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 760px) {
  #app .month-toggle, #app .growth-actions > .month-toggle { min-height: 44px; height: 44px; }
}

/* Sales Recent (2026-11-04): on desktop it takes the By agent panel's height
   (contain: size keeps it from growing the row) and scrolls inside; on a phone
   it stacks with a max height. Thin scrollbar, only when it overflows. */
#app #sales-recent { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
#app #sales-recent::-webkit-scrollbar { width: 6px; }
#app #sales-recent::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
#app #sales-recent::-webkit-scrollbar-track { background: transparent; }
@media (min-width: 1024px) {
  /* Recent takes no height of its own (contain: size); the row is the By
     agent panel's height and Recent stretches to it and scrolls inside. The
     old 320px floor made Recent end lower than a short Today panel. */
  #app .sales-shell > #sales-agents { align-self: stretch; }
  #app .sales-shell > #sales-recent { align-self: stretch; contain: size; min-height: 0; max-height: none; position: relative; top: auto; }
}
@media (max-width: 1023px) {
  #app #sales-recent { max-height: 70vh; }
}

/* Google rating tile (native; no third-party script). AA on the dark theme:
   --text on --raised, stars #f5b301, source line uses --muted. */
#app .gbp-rating { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 10px 14px; color: var(--text); text-decoration: none; border-radius: 12px; }
#app .gbp-rating:focus-visible { outline: 2px solid var(--accent, #8dcc98); outline-offset: 2px; }
#app .gbp-rating-head { font-size: 0.8rem; font-weight: 700; color: var(--text); }
#app .gbp-rating-row { display: flex; align-items: baseline; gap: 8px; }
#app .gbp-rating-val { font-size: 1.5rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
#app .gbp-rating-stars { color: #f5b301; letter-spacing: 1px; font-size: 1.05rem; }
#app .gbp-rating-link { color: var(--text); text-decoration: underline; text-underline-offset: 2px; font-size: 0.85rem; }
#app .gbp-rating-src { color: var(--muted); font-size: 0.7rem; }

/* Full agent names wrap between words instead of ending in an ellipsis
   ("Hershey Atkinson" at 390, live check 2026-11-04). */
#app .card h3,
#app .activity-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.2;
}