@layer dashboard-layout {
/* Foyer UI Kit V2 — dashboard presentation. V1 remains in styles.css. */

[data-ui="v1"] .skip-link,
[data-ui="v1"] .sidebrand,
[data-ui="v1"] .sidebar-state,
[data-ui="v1"] .nav-toggle,
[data-ui="v1"] .nav-scrim,
[data-ui="v1"] .callbar__tiers--v2 {
  display: none;
}

[data-ui="v1"] .v2-only,
[data-ui="v2"] .v1-only {
  display: none;
}

[data-ui="v2"] .callbar .callbar__tiers--v1 {
  display: none;
}

[data-ui="v2"] *,
[data-ui="v2"] *::before,
[data-ui="v2"] *::after {
  box-sizing: border-box;
}

[data-ui="v2"] {
  /* Older settings and call-control components share the iOS semantic palette.
     Keep this bridge presentation-only; V1 retains its original values. */
  --parchment: var(--bg-canvas);
  --paper: var(--bg-raised);
  --paper-2: var(--bg-subtle);
  --ink: var(--text-primary);
  --ink-70: var(--text-secondary);
  --ink-50: var(--text-tertiary);
  --teal: var(--text-primary);
  --teal-deep: var(--text-secondary);
  --teal-tint: var(--bg-subtle);
  --brass: var(--text-tertiary);
  --brass-deep: var(--text-secondary);
  --bronze: var(--text-secondary);
  --brass-tint: var(--bg-subtle);
  --ok: var(--status-success);
  --ok-strong: var(--status-success);
  --ok-tint: var(--disposition-through-tint);
  --danger: var(--status-danger);
  --danger-tint: var(--disposition-blocked-tint);
  --line: var(--border-default);
  --line-soft: var(--border-subtle);
  --t-contact: var(--disposition-through);
  --t-approved: var(--disposition-through);
  --t-connect: var(--disposition-through);
  --t-review: var(--disposition-review);
  --t-voicemail: var(--disposition-voicemail);
  --t-spam: var(--disposition-blocked);
  --t-unknown: var(--text-tertiary);
  --serif: var(--font-family-display);
  --sans: var(--font-family-text);
  --shadow-sm: none;
  --shadow-md: none;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-family-text);
}

[data-ui="v2"] body {
  min-width: var(--space-0);
  margin: var(--space-0);
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-family-text);
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-leading);
  -webkit-font-smoothing: antialiased;
}

[data-ui="v2"] body.modal-open,
[data-ui="v2"] body.nav-open {
  overflow: hidden;
}

[data-ui="v2"] a {
  color: inherit;
}

[data-ui="v2"] button,
[data-ui="v2"] input,
[data-ui="v2"] select,
[data-ui="v2"] textarea {
  font: inherit;
}

[data-ui="v2"] h1,
[data-ui="v2"] h2,
[data-ui="v2"] h3,
[data-ui="v2"] .brand__word,
[data-ui="v2"] .sidebrand {
  font-family: var(--font-family-display);
}

[data-ui="v2"] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--component-field-focus-ring-width) solid var(--border-focus);
  outline-offset: var(--component-field-focus-ring-offset);
}

[data-ui="v2"] [hidden] {
  display: none;
}

[data-ui="v2"] .skip-link {
  position: fixed;
  z-index: var(--z-index-toast);
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--bg-accent);
  color: var(--text-on-accent);
  font-weight: var(--font-weight-bold);
  transform: translateY(calc((100% + var(--space-5)) * -1));
}

[data-ui="v2"] .skip-link:focus {
  transform: translateY(var(--space-0));
}

/* Login */
[data-ui="v2"] .login {
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: var(--space-8) var(--component-layout-gutter-web);
  background: var(--bg-subtle);
}

[data-ui="v2"] .login__card {
  width: min(100%, var(--component-layout-reading-max));
  padding: var(--space-9);
  overflow: visible;
  border: var(--component-card-border-width) solid var(--border-subtle);
  border-radius: var(--component-card-radius-web);
  background: var(--bg-raised);
  box-shadow: none;
  text-align: left;
}

[data-ui="v2"] .login__card::before {
  display: none;
}

[data-ui="v2"] .login__arch {
  width: var(--component-avatar-lg);
  height: var(--component-avatar-lg);
  display: grid;
  margin: var(--space-0) var(--space-0) var(--space-7);
  place-items: center;
  border: var(--space-0);
  border-radius: var(--radius-none);
  background: var(--text-primary);
  -webkit-mask: url("/dash/assets/foyer-monogram.svg") center / contain no-repeat;
  mask: url("/dash/assets/foyer-monogram.svg") center / contain no-repeat;
}

[data-ui="v2"] .login__arch img {
  display: none;
}

[data-ui="v2"] .login .spoken {
  margin: var(--space-0) var(--space-0) var(--space-3);
  color: var(--text-tertiary);
  font-family: var(--font-family-text);
  font-size: var(--type-label-md-size);
  font-style: normal;
  font-weight: var(--type-label-md-weight);
  line-height: var(--type-label-md-leading);
  letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase;
}

[data-ui="v2"] .login__title {
  margin: var(--space-0);
  color: var(--text-primary);
  font-size: var(--type-display-md-size);
  font-weight: var(--type-display-md-weight);
  line-height: var(--type-display-md-leading);
  letter-spacing: var(--type-display-md-tracking);
}

[data-ui="v2"] .login__sub {
  margin: var(--space-4) var(--space-0) var(--space-7);
  color: var(--text-secondary);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-leading);
}

[data-ui="v2"] .login__actions,
[data-ui="v2"] .emailauth__step {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-0);
}

[data-ui="v2"] .login__divider {
  gap: var(--space-4);
  margin: var(--space-6) var(--space-0);
  color: var(--text-tertiary);
}

[data-ui="v2"] .login__divider::before,
[data-ui="v2"] .login__divider::after {
  border-color: var(--border-subtle);
}

[data-ui="v2"] .login__fine,
[data-ui="v2"] .login__foot,
[data-ui="v2"] .emailauth__sent,
[data-ui="v2"] .emailauth__links {
  color: var(--text-tertiary);
  font-size: var(--type-body-sm-size);
}

[data-ui="v2"] .login__fine--new {
  padding-top: var(--space-4);
  border-color: var(--border-subtle);
}

[data-ui="v2"] .login__foot a {
  min-height: var(--target-web);
  display: inline-flex;
  align-items: center;
}

/* App shell */
[data-ui="v2"] #app {
  min-height: 100svh;
  background: var(--bg-canvas);
}

[data-ui="v2"] .topbar {
  height: var(--component-nav-bar-height);
  position: fixed;
  z-index: var(--z-index-sticky);
  top: var(--space-0);
  right: var(--space-0);
  left: var(--component-layout-sidebar-web);
  border: var(--space-0);
  background: var(--bg-canvas);
  box-shadow: none;
}

[data-ui="v2"] .topbar__inner {
  width: 100%;
  max-width: none;
  height: 100%;
  padding-inline: var(--component-layout-gutter-web);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

[data-ui="v2"] .topbar .brand {
  display: none;
}

[data-ui="v2"] .account {
  gap: var(--space-4);
}

[data-ui="v2"] .account__email {
  color: var(--text-secondary);
  font-size: var(--type-body-sm-size);
}

[data-ui="v2"] .mainnav {
  width: var(--component-layout-sidebar-web);
  position: fixed;
  z-index: var(--z-index-overlay);
  inset: var(--space-0) auto var(--space-0) var(--space-0);
  border: var(--space-0);
  border-right: var(--component-card-border-width) solid var(--border-subtle);
  background: var(--bg-subtle);
  box-shadow: none;
}

[data-ui="v2"] .mainnav__inner {
  width: 100%;
  max-width: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  overflow: visible;
}

[data-ui="v2"] .sidebrand {
  min-height: var(--component-nav-bar-height);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  color: var(--text-primary);
  font-size: var(--type-heading-lg-size);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--type-heading-lg-tracking);
  text-decoration: none;
}

[data-ui="v2"] .sidebrand::before {
  width: var(--space-5);
  height: var(--space-7);
  flex: none;
  background: currentColor;
  content: "";
  -webkit-mask: url("/dash/assets/foyer-monogram.svg") center / contain no-repeat;
  mask: url("/dash/assets/foyer-monogram.svg") center / contain no-repeat;
}

[data-ui="v2"] .mainnav .tab {
  width: 100%;
  min-height: var(--space-9);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--component-card-border-width) solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--type-heading-sm-size);
  font-weight: var(--type-heading-sm-weight);
  line-height: var(--type-heading-sm-leading);
  white-space: nowrap;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard),
              color var(--motion-duration-fast) var(--motion-easing-standard);
}

[data-ui="v2"] .mainnav .tab:hover {
  background: var(--bg-sunken);
  color: var(--text-primary);
}

[data-ui="v2"] .mainnav .tab.is-active {
  border-color: transparent;
  background: var(--bg-accent);
  color: var(--text-on-accent);
  box-shadow: none;
}

[data-ui="v2"] .tab__ic {
  width: var(--component-tab-bar-icon-size);
  height: var(--component-tab-bar-icon-size);
  display: grid;
  flex: none;
  padding: var(--space-0);
  border: var(--space-0);
  place-items: center;
  color: var(--text-secondary);
  background: transparent;
}

[data-ui="v2"] .tab__ic svg {
  width: 100%;
  height: 100%;
}

[data-ui="v2"] .mainnav .tab.is-active .tab__ic {
  border: var(--space-0);
  color: var(--text-on-accent);
}

[data-ui="v2"] .sidebar-state {
  min-height: var(--component-list-row-min-height);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: auto;
  padding: var(--space-4);
  border-top: var(--component-card-border-width) solid var(--border-subtle);
  color: var(--text-primary);
}

[data-ui="v2"] .sidebar-state__dot {
  width: var(--component-chip-dot-size);
  height: var(--component-chip-dot-size);
  flex: none;
  margin-top: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--status-success);
}

[data-ui="v2"] .sidebar-state.is-paused .sidebar-state__dot {
  background: var(--status-warning);
}

[data-ui="v2"] .sidebar-state b,
[data-ui="v2"] .sidebar-state small {
  display: block;
}

[data-ui="v2"] .sidebar-state b {
  font-size: var(--type-heading-sm-size);
}

[data-ui="v2"] .sidebar-state small {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-leading);
}

[data-ui="v2"] .nav-toggle,
[data-ui="v2"] .nav-scrim {
  display: none;
}

[data-ui="v2"] .shell,
[data-ui="v2"] .shell--full {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(var(--component-layout-sidebar-collapsed-web), calc(var(--component-layout-sidebar-web) - var(--space-8))) minmax(var(--space-0), 1fr);
  gap: var(--space-8);
  margin-left: var(--component-layout-sidebar-web);
  padding: var(--component-nav-bar-height) var(--component-layout-gutter-web) var(--space-0);
  background: var(--bg-canvas);
}

[data-ui="v2"] .shell--full {
  grid-template-columns: minmax(var(--space-0), 1fr);
}

[data-ui="v2"] .rail {
  position: sticky;
  top: calc(var(--component-nav-bar-height) + var(--space-8));
  align-self: start;
  padding-top: var(--space-8);
}

[data-ui="v2"] .rail__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

[data-ui="v2"] .subtab {
  min-height: var(--space-9);
  padding: var(--space-3) var(--space-4);
  border: var(--component-card-border-width) solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--type-heading-sm-size);
  font-weight: var(--type-heading-sm-weight);
  text-align: left;
}

[data-ui="v2"] .subtab:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

[data-ui="v2"] .subtab.is-active {
  border-color: var(--border-subtle);
  background: var(--bg-raised);
  color: var(--text-primary);
  box-shadow: none;
}

[data-ui="v2"] .rail__foot {
  display: none;
}

[data-ui="v2"] .content {
  width: min(100%, var(--component-layout-content-max-web));
  min-width: var(--space-0);
  margin-inline: auto;
}

[data-ui="v2"] .view {
  padding-block: var(--space-8) var(--space-12);
}

[data-ui="v2"] .viewhead {
  min-height: var(--component-nav-bar-height-large);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}

[data-ui="v2"] .eyebrow,
[data-ui="v2"] .detail__label,
[data-ui="v2"] .fld > span,
[data-ui="v2"] .sortctl > span,
[data-ui="v2"] .callbar__field > span,
[data-ui="v2"] .callbar__search > span,
[data-ui="v2"] .rail__mode-cap {
  color: var(--text-tertiary);
  font-size: var(--type-label-md-size);
  font-weight: var(--type-label-md-weight);
  line-height: var(--type-label-md-leading);
  letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase;
}

[data-ui="v2"] .viewhead__title {
  margin: var(--space-2) var(--space-0) var(--space-0);
  color: var(--text-primary);
  font-size: var(--type-display-md-size);
  font-weight: var(--type-display-md-weight);
  line-height: var(--type-display-md-leading);
  letter-spacing: var(--type-display-md-tracking);
}

[data-ui="v2"] .eyebrow::before {
  display: none;
}

/* iOS resolves disposition foregrounds to their audited "On" colours in dark
   appearance. The generated palette exposes both; select the same variants. */
[data-theme="dark"][data-ui="v2"] {
  --disposition-through: var(--disposition-through-on);
  --disposition-review: var(--disposition-review-on);
  --disposition-voicemail: var(--disposition-voicemail-on);
  --disposition-blocked: var(--disposition-blocked-on);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"][data-ui="v2"] {
    --disposition-through: var(--disposition-through-on);
    --disposition-review: var(--disposition-review-on);
    --disposition-voicemail: var(--disposition-voicemail-on);
    --disposition-blocked: var(--disposition-blocked-on);
  }
}

/* Shared components */
[data-ui="v2"] .btn,
[data-ui="v2"] .btn--auth {
  min-height: var(--component-button-min-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--component-button-gap);
  padding: var(--component-button-padding-y) var(--component-button-padding-x);
  border: var(--component-button-border-width) solid var(--text-primary);
  border-radius: var(--component-button-radius);
  background: var(--text-primary);
  color: var(--text-inverse);
  box-shadow: none;
  font-family: var(--font-family-display);
  font-size: var(--type-heading-sm-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--type-heading-sm-leading);
  transform: none;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard),
              border-color var(--motion-duration-fast) var(--motion-easing-standard),
              color var(--motion-duration-fast) var(--motion-easing-standard);
}

[data-ui="v2"] .btn:hover,
[data-ui="v2"] .btn--auth:hover {
  border-color: var(--text-secondary);
  background: var(--text-secondary);
  color: var(--text-inverse);
  box-shadow: none;
  transform: none;
}

[data-ui="v2"] .btn--sm {
  min-height: var(--component-button-min-height-sm);
  padding: var(--component-button-padding-ysm) var(--component-button-padding-xsm);
  font-family: var(--font-family-text);
  font-size: var(--type-label-lg-size);
}

[data-ui="v2"] .btn--ghost,
[data-ui="v2"] .btn--auth {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--text-primary);
}

[data-ui="v2"] .btn--ghost:hover,
[data-ui="v2"] .btn--auth:hover {
  border-color: var(--text-primary);
  background: var(--bg-subtle);
  color: var(--text-primary);
}

[data-ui="v2"] .btn--primary,
[data-ui="v2"] #btn-add-contact,
[data-ui="v2"] #add-save {
  border-color: var(--component-button-primary-bg);
  background: var(--component-button-primary-bg);
  color: var(--component-button-primary-text);
}

[data-ui="v2"] .btn--primary:hover,
[data-ui="v2"] #btn-add-contact:hover,
[data-ui="v2"] #add-save:hover {
  border-color: var(--component-button-primary-bg-pressed);
  background: var(--component-button-primary-bg-pressed);
  color: var(--component-button-primary-text);
}

[data-ui="v2"] .btn:disabled,
[data-ui="v2"] .btn--disabled {
  opacity: var(--component-button-disabled-opacity);
  transform: none;
}

[data-ui="v2"] .btn--danger {
  border-color: var(--status-danger);
  background: transparent;
  color: var(--status-danger);
}

[data-ui="v2"] .btn-plain,
[data-ui="v2"] .linkbtn,
[data-ui="v2"] .backlink {
  min-height: var(--target-web);
  padding: var(--space-2);
  border: var(--space-0);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--type-body-sm-size);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-underline-offset: var(--space-2);
}

[data-ui="v2"] .backlink {
  margin-bottom: var(--space-5);
}

[data-ui="v2"] .card,
[data-ui="v2"] .logcard,
[data-ui="v2"] .contact,
[data-ui="v2"] .notice {
  border: var(--component-card-border-width) solid var(--border-subtle);
  border-radius: var(--component-card-radius-web);
  background: var(--bg-raised);
  box-shadow: none;
}

[data-ui="v2"] .card {
  padding: var(--component-card-padding);
}

[data-ui="v2"] .card::before,
[data-ui="v2"] .logcard::before,
[data-ui="v2"] .callpage::before {
  display: none;
}

[data-ui="v2"] .card h3,
[data-ui="v2"] .empty h3,
[data-ui="v2"] .detail__block h3 {
  color: var(--text-primary);
  font-size: var(--type-heading-lg-size);
  font-weight: var(--type-heading-lg-weight);
  line-height: var(--type-heading-lg-leading);
  letter-spacing: var(--type-heading-lg-tracking);
}

[data-ui="v2"] .card__hint,
[data-ui="v2"] .card__note,
[data-ui="v2"] .detail__note {
  color: var(--text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-leading);
}

[data-ui="v2"] .notice {
  padding: var(--component-card-padding-compact);
  color: var(--text-secondary);
}

[data-ui="v2"] .notice--error {
  border-color: var(--status-danger);
  background: var(--bg-raised);
  color: var(--status-danger);
}

[data-ui="v2"] .notice--ok {
  border-color: var(--status-success);
  background: var(--bg-raised);
  color: var(--status-success);
}

[data-ui="v2"] .select,
[data-ui="v2"] .ta,
[data-ui="v2"] .search,
[data-ui="v2"] .fld input,
[data-ui="v2"] .emailauth__input {
  min-height: var(--component-field-min-height);
  padding-inline: var(--component-field-padding-x);
  border: var(--component-field-border-width) solid var(--border-strong);
  border-radius: var(--component-field-radius);
  background: var(--bg-raised);
  color: var(--text-primary);
  box-shadow: none;
  font-size: var(--type-body-md-size);
}

[data-ui="v2"] .ta {
  padding-block: var(--space-4);
}

[data-ui="v2"] :is(.select, .ta, .search, .fld input, .emailauth__input):focus {
  border-color: var(--border-focus);
  outline: var(--component-field-focus-ring-width) solid var(--border-focus);
  outline-offset: var(--component-field-focus-ring-offset);
  box-shadow: none;
}

[data-ui="v2"] :is(.select, .ta, .search, .fld input, .emailauth__input)::placeholder {
  color: var(--text-tertiary);
}

[data-ui="v2"] .fld,
[data-ui="v2"] .sortctl,
[data-ui="v2"] .callbar__field,
[data-ui="v2"] .callbar__search {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-0);
}

[data-ui="v2"] .callbar__q {
  /* The legacy field's flex-basis must not become a height in this label. */
  flex: none;
  width: 100%;
}

[data-ui="v2"] .toggle {
  min-height: var(--component-button-min-height);
  gap: var(--space-4);
  padding-block: var(--space-3);
}

[data-ui="v2"] .toggle__box {
  width: var(--space-10);
  height: var(--space-7);
  border: var(--component-card-border-width) solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
}

[data-ui="v2"] .toggle__box::after {
  width: var(--space-6);
  height: var(--space-6);
  top: var(--space-0);
  left: var(--space-0);
  border: var(--component-card-border-width) solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  box-shadow: none;
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}

[data-ui="v2"] .toggle input:checked + .toggle__box {
  border-color: var(--text-primary);
  background: var(--text-primary);
}

[data-ui="v2"] .toggle input:checked + .toggle__box::after {
  transform: translateX(var(--space-6));
}

[data-ui="v2"] .toggle input:focus-visible + .toggle__box {
  outline: var(--component-field-focus-ring-width) solid var(--border-focus);
  outline-offset: var(--component-field-focus-ring-offset);
}

[data-ui="v2"] .seg {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border: var(--component-card-border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

[data-ui="v2"] .seg__opt {
  min-height: var(--component-button-min-height-sm);
  border: var(--space-0);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--type-label-lg-size);
  font-weight: var(--type-label-lg-weight);
}

[data-ui="v2"] .seg__opt.is-on {
  background: var(--bg-raised);
  color: var(--text-primary);
  box-shadow: none;
}

/* Calls toolbar */
[data-ui="v2"] .chips {
  color: var(--text-secondary);
}

[data-ui="v2"] .callbar {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  padding: var(--space-0);
  border: var(--space-0);
  background: transparent;
}

[data-ui="v2"] .callbar__tiers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

[data-ui="v2"] .fpill {
  min-height: var(--component-button-min-height-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--component-chip-gap);
  padding-inline: var(--component-button-padding-xsm);
  border: var(--component-button-border-width) solid transparent;
  border-radius: var(--component-chip-radius);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--type-label-lg-size);
  font-weight: var(--type-label-lg-weight);
}

[data-ui="v2"] .fpill::after {
  display: none;
}

[data-ui="v2"] .fpill:hover {
  border-color: var(--text-primary);
  background: var(--bg-subtle);
  color: var(--text-primary);
}

[data-ui="v2"] .fpill.is-on {
  border-color: var(--text-primary);
  background: var(--text-primary);
  color: var(--text-inverse);
  box-shadow: none;
}

[data-ui="v2"] .fpill--through.is-on {
  border-color: var(--disposition-through);
  background: var(--disposition-through-tint);
  color: var(--disposition-through);
}

[data-ui="v2"] .fpill--review.is-on {
  border-color: var(--disposition-review);
  background: var(--disposition-review-tint);
  color: var(--disposition-review);
}

[data-ui="v2"] .fpill--voicemail.is-on {
  border-color: var(--disposition-voicemail);
  background: var(--disposition-voicemail-tint);
  color: var(--disposition-voicemail);
}

[data-ui="v2"] .fpill--blocked.is-on {
  border-color: var(--disposition-blocked);
  background: var(--disposition-blocked-tint);
  color: var(--disposition-blocked);
}

[data-theme="dark"][data-ui="v2"] .fpill--through.is-on {
  background: color-mix(in srgb, var(--disposition-through) 18%, transparent);
}

[data-theme="dark"][data-ui="v2"] .fpill--review.is-on {
  background: color-mix(in srgb, var(--disposition-review) 18%, transparent);
}

[data-theme="dark"][data-ui="v2"] .fpill--voicemail.is-on {
  background: color-mix(in srgb, var(--disposition-voicemail) 18%, transparent);
}

[data-theme="dark"][data-ui="v2"] .fpill--blocked.is-on {
  background: color-mix(in srgb, var(--disposition-blocked) 18%, transparent);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"][data-ui="v2"] .fpill--through.is-on {
    background: color-mix(in srgb, var(--disposition-through) 18%, transparent);
  }

  [data-theme="auto"][data-ui="v2"] .fpill--review.is-on {
    background: color-mix(in srgb, var(--disposition-review) 18%, transparent);
  }

  [data-theme="auto"][data-ui="v2"] .fpill--voicemail.is-on {
    background: color-mix(in srgb, var(--disposition-voicemail) 18%, transparent);
  }

  [data-theme="auto"][data-ui="v2"] .fpill--blocked.is-on {
    background: color-mix(in srgb, var(--disposition-blocked) 18%, transparent);
  }
}

[data-ui="v2"] .callbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
}

[data-ui="v2"] .callbar__search {
  flex: 1 1 calc(var(--component-layout-reading-max) / 2);
  min-width: var(--space-0);
}

[data-ui="v2"] .callbar__field {
  flex: none;
}

[data-ui="v2"] .callbar__range {
  width: auto;
}

[data-ui="v2"] .callbar__dates {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--space-3);
  color: var(--text-tertiary);
}

/* Calls table */
[data-ui="v2"] .log {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

[data-ui="v2"] .callgroup {
  scroll-margin-top: calc(var(--component-nav-bar-height) + var(--space-5));
}

[data-ui="v2"] .sectionhead {
  min-height: var(--space-8);
  position: sticky;
  z-index: var(--z-index-raised);
  top: var(--component-nav-bar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--component-section-header-space-above) var(--component-section-header-padding-x) var(--component-section-header-space-below);
  background: var(--bg-canvas);
  color: var(--text-tertiary);
  font-size: var(--type-label-md-size);
  font-weight: var(--type-label-md-weight);
  line-height: var(--type-label-md-leading);
  letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase;
}

[data-ui="v2"] .logcard {
  overflow: hidden;
}

[data-ui="v2"] .tbl {
  display: flex;
  flex-direction: column;
}

[data-ui="v2"] .tbl__row {
  min-height: var(--component-list-row-min-height);
  position: relative;
  display: grid;
  grid-template-columns: var(--component-list-row-rail-width) minmax(var(--space-0), 1fr) var(--space-10);
  border: var(--space-0);
  border-top: var(--component-card-border-width) solid var(--border-subtle);
  background: var(--bg-raised);
}

[data-ui="v2"] .tbl__row:first-child {
  border-top: var(--space-0);
}

[data-ui="v2"] .tbl__row:hover,
[data-ui="v2"] .tbl__row--self,
[data-ui="v2"] .tbl__row--self:hover,
[data-ui="v2"] .tbl__row--progress {
  background: var(--bg-subtle);
}

[data-ui="v2"] .tbl__rail {
  width: var(--component-list-row-rail-width);
  height: 100%;
  display: block;
  grid-column: 1;
  grid-row: 1;
  background: var(--text-tertiary);
}

[data-ui="v2"] .tbl__row[data-disposition="through"] .tbl__rail { background: var(--disposition-through); }
[data-ui="v2"] .tbl__row[data-disposition="review"] .tbl__rail { background: var(--disposition-review); }
[data-ui="v2"] .tbl__row[data-disposition="voicemail"] .tbl__rail { background: var(--disposition-voicemail); }
[data-ui="v2"] .tbl__row[data-disposition="blocked"] .tbl__rail { background: var(--disposition-blocked); }

[data-ui="v2"] .tbl__open {
  min-width: var(--space-0);
  min-height: var(--component-list-row-min-height);
  display: grid;
  grid-template-columns: var(--component-list-row-avatar-size) minmax(calc(var(--space-12) * 2), .8fr) minmax(calc(var(--space-12) * 2), 1.4fr) auto auto auto;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  gap: var(--component-list-row-gap);
  padding: var(--component-list-row-padding-y) var(--component-list-row-padding-x);
  border: var(--space-0);
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}

[data-ui="v2"] .tbl__open:focus-visible {
  z-index: var(--z-index-raised);
  outline-offset: calc(var(--component-field-focus-ring-width) * -1);
}

[data-ui="v2"] .avatar,
[data-ui="v2"] .tbl__avatar {
  width: var(--component-list-row-avatar-size);
  height: var(--component-list-row-avatar-size);
  display: grid;
  place-items: center;
  border: var(--component-card-border-width) solid var(--border-subtle);
  border-radius: var(--component-avatar-radius);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-family: var(--font-family-display);
  font-size: var(--type-label-lg-size);
  font-weight: var(--font-weight-bold);
}

[data-ui="v2"] .tbl__caller {
  display: contents;
}

[data-ui="v2"] .tbl__caller b {
  min-width: var(--space-0);
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--type-heading-sm-size);
  font-weight: var(--type-heading-sm-weight);
  line-height: var(--type-heading-sm-leading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-ui="v2"] .tbl__caller--inferred b,
[data-ui="v2"] .tbl__caller--cnam b,
[data-ui="v2"] .tbl__caller--self b {
  color: var(--text-primary);
  font-style: normal;
  text-decoration: none;
}

[data-ui="v2"] .tbl__request {
  min-width: var(--space-0);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-leading);
  text-overflow: ellipsis;
  white-space: normal;
}

[data-ui="v2"] .tbl__tier {
  align-items: center;
}

[data-ui="v2"] .tierpill {
  min-height: var(--component-chip-min-height);
  display: inline-flex;
  align-items: center;
  gap: var(--component-chip-gap);
  padding: var(--component-chip-padding-y) var(--component-chip-padding-x);
  border: var(--space-0);
  border-radius: var(--component-chip-radius);
  font-size: var(--type-label-sm-size);
  font-weight: var(--type-label-sm-weight);
  line-height: var(--type-label-sm-leading);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
}

[data-ui="v2"] .tierpill::before {
  display: none;
}

[data-ui="v2"] .tierpill i {
  width: var(--component-chip-dot-size);
  height: var(--component-chip-dot-size);
  border-radius: var(--radius-pill);
  background: currentColor;
}

[data-ui="v2"] .tierpill--through {
  background: var(--disposition-through-tint);
  color: var(--disposition-through);
}

[data-ui="v2"] .tierpill--review {
  background: var(--disposition-review-tint);
  color: var(--disposition-review);
}

[data-ui="v2"] .tierpill--voicemail {
  background: var(--disposition-voicemail-tint);
  color: var(--disposition-voicemail);
}

[data-ui="v2"] .tierpill--blocked {
  background: var(--disposition-blocked-tint);
  color: var(--disposition-blocked);
}

[data-theme="dark"][data-ui="v2"] .tierpill--through {
  background: color-mix(in srgb, var(--disposition-through) 18%, transparent);
}

[data-theme="dark"][data-ui="v2"] .tierpill--review {
  background: color-mix(in srgb, var(--disposition-review) 18%, transparent);
}

[data-theme="dark"][data-ui="v2"] .tierpill--voicemail {
  background: color-mix(in srgb, var(--disposition-voicemail) 18%, transparent);
}

[data-theme="dark"][data-ui="v2"] .tierpill--blocked {
  background: color-mix(in srgb, var(--disposition-blocked) 18%, transparent);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"][data-ui="v2"] .tierpill--through {
    background: color-mix(in srgb, var(--disposition-through) 18%, transparent);
  }

  [data-theme="auto"][data-ui="v2"] .tierpill--review {
    background: color-mix(in srgb, var(--disposition-review) 18%, transparent);
  }

  [data-theme="auto"][data-ui="v2"] .tierpill--voicemail {
    background: color-mix(in srgb, var(--disposition-voicemail) 18%, transparent);
  }

  [data-theme="auto"][data-ui="v2"] .tierpill--blocked {
    background: color-mix(in srgb, var(--disposition-blocked) 18%, transparent);
  }
}

[data-ui="v2"] .tbl__time {
  min-width: var(--space-10);
  display: grid;
  justify-items: end;
  color: var(--text-primary);
  font-size: var(--type-label-lg-size);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

[data-ui="v2"] .tbl__time small {
  color: var(--text-tertiary);
  font-size: var(--type-label-sm-size);
}

[data-ui="v2"] .call-new {
  order: -1;
  padding-inline: var(--space-2);
  border: var(--component-card-border-width) solid var(--border-default);
  margin-top: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-primary);
  font-size: var(--type-label-md-size);
  font-weight: var(--type-label-md-weight);
  line-height: var(--type-body-sm-leading);
}

[data-ui="v2"] .tbl__flags {
  display: inline-flex;
  justify-self: end;
  gap: var(--space-3);
  color: var(--text-tertiary);
}

[data-ui="v2"] .tbl__flags svg {
  width: var(--space-5);
  height: var(--space-5);
}

[data-ui="v2"] .tbl__read,
[data-ui="v2"] .tbl__readspace {
  width: var(--space-10);
  height: 100%;
  grid-column: 3;
  grid-row: 1;
}

[data-ui="v2"] .tbl__read {
  border: var(--space-0);
  background: transparent;
}

[data-ui="v2"] .tbl__read span {
  width: var(--component-chip-dot-size);
  height: var(--component-chip-dot-size);
  border-radius: var(--radius-pill);
  background: var(--text-tertiary);
  box-shadow: none;
}

[data-ui="v2"] .tbl__read:hover {
  background: var(--bg-subtle);
}

[data-ui="v2"] .logfoot,
[data-ui="v2"] .logcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-5);
  color: var(--text-tertiary);
  font-size: var(--type-body-sm-size);
  font-variant-numeric: tabular-nums;
}

[data-ui="v2"] .live-badge {
  color: var(--text-secondary);
}

[data-ui="v2"] .live-badge__dot {
  background: var(--status-success);
}

[data-ui="v2"] .empty {
  max-width: var(--component-layout-reading-max);
  margin-inline: auto;
  padding: var(--space-11) var(--space-7);
  color: var(--text-secondary);
  text-align: center;
}

[data-ui="v2"] .empty__mark {
  width: var(--component-avatar-lg);
  height: var(--component-avatar-lg);
  margin: var(--space-0) auto var(--space-6);
  opacity: 1;
}

[data-ui="v2"] .empty p {
  margin-bottom: var(--space-6);
}

[data-ui="v2"] .empty mark {
  padding-inline: .12em;
  border-radius: var(--radius-xs);
  background: var(--bg-accent);
  color: var(--text-on-accent);
}

/* Call detail and transcript */
[data-ui="v2"] .callpage {
  padding: var(--space-0);
  overflow: hidden;
}

[data-ui="v2"] .callpage__head {
  display: grid;
  gap: var(--space-5);
  padding: var(--component-card-padding);
  border-bottom: var(--component-card-border-width) solid var(--border-subtle);
  background: var(--bg-subtle);
}

[data-ui="v2"] .callpage__titlebar,
[data-ui="v2"] .callpage__numrow,
[data-ui="v2"] .callpage__badges,
[data-ui="v2"] .callpage__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

[data-ui="v2"] .callpage__titlebar {
  justify-content: space-between;
}

[data-ui="v2"] .callpage__title {
  margin: var(--space-0);
  color: var(--text-tertiary);
  font-family: var(--font-family-text);
  font-size: var(--type-label-md-size);
  font-weight: var(--type-label-md-weight);
  letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase;
}

[data-ui="v2"] .callpage__name {
  margin: var(--space-0);
  color: var(--text-primary);
  font-size: var(--type-display-sm-size);
  font-weight: var(--type-display-sm-weight);
  line-height: var(--type-display-sm-leading);
  letter-spacing: var(--type-display-sm-tracking);
}

[data-ui="v2"] .callpage__name--inferred,
[data-ui="v2"] .callpage__name--self {
  color: var(--text-primary);
  font-style: normal;
}

[data-ui="v2"] .callpage__company,
[data-ui="v2"] .callpage__num,
[data-ui="v2"] .fact {
  color: var(--text-secondary);
  font-size: var(--type-body-md-size);
}

[data-ui="v2"] .callpage__num,
[data-ui="v2"] .callpage__facts {
  font-variant-numeric: tabular-nums;
}

[data-ui="v2"] .fact__k {
  color: var(--text-tertiary);
  font-size: var(--type-label-md-size);
  font-weight: var(--type-label-md-weight);
  letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase;
}

[data-ui="v2"] .callpage__actions {
  display: inline-flex;
  gap: var(--space-3);
}

[data-ui="v2"] .callpage__action {
  width: var(--component-button-min-height-sm);
  height: var(--component-button-min-height-sm);
  display: grid;
  border: var(--component-button-border-width) solid var(--border-strong);
  border-radius: var(--radius-pill);
  place-items: center;
  color: var(--text-primary);
}

[data-ui="v2"] .callpage__action:hover {
  background: var(--bg-raised);
  color: var(--text-primary);
}

[data-ui="v2"] .callpage__body {
  display: grid;
  /* Keep summary, audio, audit and transcript in document order. Reserving a
     transcript column left all other content stranded in a narrow right rail. */
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-8);
  padding: var(--component-card-padding);
}

[data-ui="v2"] .callpage__body > * {
  min-width: 0;
  grid-column: 1 / -1;
}

[data-ui="v2"] .detail__block {
  margin: var(--space-0);
  padding: var(--component-card-padding-compact);
  border: var(--component-card-border-width) solid var(--border-subtle);
  border-radius: var(--component-card-radius-web);
  background: var(--bg-raised);
}

[data-ui="v2"] .detail__label {
  margin-bottom: var(--space-5);
}

[data-ui="v2"] .transcript {
  max-width: var(--component-transcript-max-width);
  display: grid;
  gap: var(--component-transcript-gap);
  padding: var(--space-0);
  border: var(--space-0);
  border-radius: var(--radius-none);
  background: transparent;
}

[data-ui="v2"] .transcript p {
  color: var(--text-primary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-leading);
}

[data-ui="v2"] .turn,
[data-ui="v2"] .turn--caller,
[data-ui="v2"] .turn--owner {
  display: grid;
  grid-template-columns: var(--space-12) minmax(var(--space-0), 1fr);
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-0);
}

[data-ui="v2"] .turn__meta {
  display: grid;
  gap: var(--component-transcript-speaker-gap);
  padding: var(--space-0);
  color: var(--text-tertiary);
}

[data-ui="v2"] .turn__who,
[data-ui="v2"] .turn__meta time {
  color: var(--text-tertiary);
  font-size: var(--type-label-md-size);
  font-weight: var(--type-label-md-weight);
  line-height: var(--type-label-md-leading);
  letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase;
}

[data-ui="v2"] .turn__meta time {
  letter-spacing: normal;
  text-transform: none;
}

[data-ui="v2"] .turn__text,
[data-ui="v2"] .turn--caller .turn__text,
[data-ui="v2"] .turn--owner .turn__text {
  max-width: none;
  padding: var(--space-0);
  border: var(--space-0);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-leading);
}

/* Contacts and settings */
[data-ui="v2"] .settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-12) * 4)), 1fr));
  gap: var(--space-5);
}

[data-ui="v2"] .contacts-tools {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

[data-ui="v2"] .log--contacts {
  overflow: hidden;
  border: var(--component-card-border-width) solid var(--border-subtle);
  border-radius: var(--component-card-radius-web);
  background: var(--bg-raised);
}

[data-ui="v2"] .contact {
  border: var(--space-0);
  border-top: var(--component-card-border-width) solid var(--border-subtle);
  border-radius: var(--radius-none);
}

[data-ui="v2"] .contact:first-child {
  border-top: var(--space-0);
}

[data-ui="v2"] .contact.is-open,
[data-ui="v2"] .contact__row:hover {
  background: var(--bg-subtle);
}

[data-ui="v2"] .contact__row {
  min-height: var(--component-list-row-min-height);
  gap: var(--component-list-row-gap);
  padding: var(--component-list-row-padding-y) var(--component-list-row-padding-x);
}

[data-ui="v2"] .contact__name {
  color: var(--text-primary);
  font-size: var(--type-heading-sm-size);
  font-weight: var(--type-heading-sm-weight);
}

[data-ui="v2"] .contact__sub,
[data-ui="v2"] .contact__count {
  color: var(--text-secondary);
  font-size: var(--type-body-sm-size);
}

[data-ui="v2"] .contact__detail {
  padding: var(--component-card-padding);
  border-color: var(--border-subtle);
}

[data-ui="v2"] .pause-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  padding: var(--component-card-padding-compact);
  border: var(--component-card-border-width) solid var(--status-warning);
  border-radius: var(--component-card-radius-web);
  background: var(--bg-raised);
  color: var(--text-secondary);
}

[data-ui="v2"] .card--paused,
[data-ui="v2"] .card--danger,
[data-ui="v2"] .card--testhost {
  background: var(--bg-raised);
}

[data-ui="v2"] .card--paused { border-color: var(--status-warning); }
[data-ui="v2"] .card--danger { border-color: var(--status-danger); }

/* Modals and shortcut reference */
[data-ui="v2"] .modal {
  z-index: var(--z-index-modal);
  padding: var(--component-sheet-padding);
}

[data-ui="v2"] .modal__backdrop {
  background: var(--scrim-modal);
  backdrop-filter: none;
}

[data-ui="v2"] .modal__card {
  padding: var(--component-sheet-padding);
  border: var(--component-card-border-width) solid var(--border-subtle);
  border-radius: var(--component-sheet-radius);
  background: var(--bg-raised);
  color: var(--text-primary);
  box-shadow: var(--elevation-light-lg);
}

[data-ui="v2"] .shortcut-sheet {
  width: min(calc(100% - (var(--component-layout-gutter-web) * 2)), var(--component-layout-reading-max));
  padding: var(--component-sheet-padding);
  border: var(--component-card-border-width) solid var(--border-subtle);
  border-radius: var(--component-sheet-radius);
  background: var(--bg-raised);
  color: var(--text-primary);
}

[data-ui="v2"] .shortcut-sheet::backdrop {
  background: var(--scrim-modal);
}

[data-ui="v2"] .shortcut-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

[data-ui="v2"] .shortcut-sheet h2 {
  margin: var(--space-0);
  font-size: var(--type-heading-lg-size);
}

[data-ui="v2"] .shortcut-sheet dl {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-0);
}

[data-ui="v2"] .shortcut-sheet dl > div {
  display: grid;
  grid-template-columns: calc(var(--space-12) * 1.5) 1fr;
  gap: var(--space-5);
  padding-block: var(--space-3);
  border-top: var(--component-card-border-width) solid var(--border-subtle);
}

[data-ui="v2"] .shortcut-sheet dt,
[data-ui="v2"] .shortcut-sheet dd {
  margin: var(--space-0);
}

[data-ui="v2"] kbd {
  padding: var(--space-1) var(--space-3);
  border: var(--component-card-border-width) solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--bg-subtle);
  color: var(--text-primary);
  font-family: var(--font-family-text);
  font-size: var(--type-label-lg-size);
  font-weight: var(--font-weight-bold);
}

@media (max-width: 1100px) {
  [data-ui="v2"] .topbar {
    left: var(--component-layout-sidebar-collapsed-web);
  }

  [data-ui="v2"] .mainnav {
    width: var(--component-layout-sidebar-collapsed-web);
  }

  [data-ui="v2"] .mainnav__inner {
    padding-inline: var(--space-3);
  }

  [data-ui="v2"] .sidebrand {
    justify-content: center;
  }

  [data-ui="v2"] .sidebrand span,
  [data-ui="v2"] .mainnav .tab:not(.is-active) > :not(.tab__ic),
  [data-ui="v2"] .sidebar-state > :not(.sidebar-state__dot),
  [data-ui="v2"] .mainnav .tab {
    font-size: var(--space-0);
  }

  [data-ui="v2"] .mainnav .tab {
    justify-content: center;
    padding-inline: var(--space-3);
  }

  [data-ui="v2"] .sidebar-state {
    justify-content: center;
    padding-inline: var(--space-3);
  }

  [data-ui="v2"] .sidebar-state > :not(.sidebar-state__dot) {
    display: none;
  }

  [data-ui="v2"] .shell,
  [data-ui="v2"] .shell--full {
    margin-left: var(--component-layout-sidebar-collapsed-web);
    padding-inline: var(--space-7);
  }

  [data-ui="v2"] .tbl__open {
    grid-template-columns: var(--component-list-row-avatar-size) minmax(var(--space-12), .9fr) minmax(var(--space-12), 1.1fr) auto auto;
  }

  [data-ui="v2"] .tbl__flags {
    display: none;
  }
}

@media (max-width: 760px) {
  [data-ui="v2"] .topbar {
    right: var(--space-0);
    left: var(--space-0);
    border-bottom: var(--component-card-border-width) solid var(--border-subtle);
  }

  [data-ui="v2"] .topbar__inner {
    justify-content: space-between;
    gap: var(--space-4);
    padding-inline: var(--space-5);
  }

  [data-ui="v2"] .topbar .brand {
    display: inline-flex;
    align-items: center;
    margin-right: auto;
    color: var(--text-primary);
    font-size: var(--type-heading-lg-size);
    font-weight: var(--font-weight-black);
    text-decoration: none;
    text-transform: lowercase;
  }

  [data-ui="v2"] .brand__seal {
    display: none;
  }

  [data-ui="v2"] .topbar .brand::before {
    width: var(--space-5);
    height: var(--space-7);
    margin-right: var(--space-3);
    background: currentColor;
    content: "";
    -webkit-mask: url("/dash/assets/foyer-monogram.svg") center / contain no-repeat;
    mask: url("/dash/assets/foyer-monogram.svg") center / contain no-repeat;
  }

  [data-ui="v2"] .account__email {
    display: none;
  }

  [data-ui="v2"] .nav-toggle {
    width: var(--component-button-min-height-sm);
    height: var(--component-button-min-height-sm);
    display: grid;
    padding: var(--space-3);
    border: var(--component-card-border-width) solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    place-content: center;
    gap: var(--space-2);
  }

  [data-ui="v2"] .nav-toggle span {
    width: var(--space-5);
    height: var(--space-1);
    display: block;
    background: var(--text-primary);
  }

  [data-ui="v2"] .mainnav {
    width: var(--component-layout-sidebar-web);
    transform: translateX(-100%);
    transition: transform var(--motion-duration-base) var(--motion-easing-enter);
  }

  [data-ui="v2"] .mainnav.is-open {
    transform: translateX(var(--space-0));
  }

  [data-ui="v2"] .mainnav__inner {
    padding: var(--space-5);
  }

  [data-ui="v2"] .sidebrand {
    justify-content: flex-start;
  }

  [data-ui="v2"] .sidebrand span,
  [data-ui="v2"] .mainnav .tab,
  [data-ui="v2"] .sidebar-state > :not(.sidebar-state__dot) {
    font-size: inherit;
  }

  [data-ui="v2"] .mainnav .tab,
  [data-ui="v2"] .sidebar-state {
    justify-content: flex-start;
    padding-inline: var(--space-4);
  }

  [data-ui="v2"] .nav-scrim {
    position: fixed;
    z-index: calc(var(--z-index-overlay) - 1);
    inset: var(--space-0);
    display: block;
    border: var(--space-0);
    background: var(--scrim-modal);
  }

  [data-ui="v2"] .shell,
  [data-ui="v2"] .shell--full {
    display: block;
    margin-left: var(--space-0);
    padding: var(--component-nav-bar-height) var(--space-5) var(--space-0);
  }

  [data-ui="v2"] .rail {
    position: static;
    padding-top: var(--space-5);
  }

  [data-ui="v2"] .rail__nav {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--space-3);
  }

  [data-ui="v2"] .subtab {
    flex: none;
    border-radius: var(--radius-pill);
  }

  [data-ui="v2"] .view {
    padding-block: var(--space-7) var(--space-12);
  }

  [data-ui="v2"] .viewhead {
    min-height: auto;
    align-items: flex-start;
    flex-direction: column;
  }

  [data-ui="v2"] .viewhead__title {
    font-size: var(--type-display-sm-size);
    line-height: var(--type-display-sm-leading);
  }

  [data-ui="v2"] .chips {
    width: 100%;
    overflow-x: auto;
  }

  [data-ui="v2"] .callbar__tiers {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--space-2);
  }

  [data-ui="v2"] .fpill {
    flex: none;
  }

  [data-ui="v2"] .callbar__row,
  [data-ui="v2"] .callbar__search,
  [data-ui="v2"] .callbar__field,
  [data-ui="v2"] .callbar__row > .btn {
    width: 100%;
  }

  [data-ui="v2"] .callbar__dates {
    width: 100%;
  }

  [data-ui="v2"] .callbar__dates .callbar__field {
    flex: 1;
  }

  [data-ui="v2"] .sectionhead {
    top: var(--component-nav-bar-height);
    margin-inline: calc(var(--space-5) * -1);
  }

  [data-ui="v2"] .tbl__row {
    grid-template-columns: var(--component-list-row-rail-width) minmax(var(--space-0), 1fr) var(--space-10);
  }

  [data-ui="v2"] .tbl__open {
    grid-template-columns: var(--component-list-row-avatar-size) minmax(var(--space-0), 1fr) auto;
    grid-template-rows: auto auto;
  }

  [data-ui="v2"] .tbl__caller {
    min-width: var(--space-0);
    display: block;
    grid-column: 2;
    grid-row: 1 / 3;
  }

  [data-ui="v2"] .tbl__caller b,
  [data-ui="v2"] .tbl__request {
    display: block;
  }

  [data-ui="v2"] .tbl__request {
    margin-top: var(--space-2);
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  [data-ui="v2"] .tbl__tier {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
  }

  [data-ui="v2"] .tbl__time {
    grid-column: 3;
    grid-row: 1;
  }

  [data-ui="v2"] .tbl__time small,
  [data-ui="v2"] .tbl__flags {
    display: none;
  }

  [data-ui="v2"] .callpage__body,
  [data-ui="v2"] .callpage__head,
  [data-ui="v2"] .card,
  [data-ui="v2"] .contact__detail {
    padding: var(--component-card-padding-compact);
  }

  [data-ui="v2"] .turn,
  [data-ui="v2"] .turn--caller,
  [data-ui="v2"] .turn--owner {
    grid-template-columns: 1fr;
    gap: var(--component-transcript-speaker-gap);
  }

  [data-ui="v2"] .turn__meta {
    display: flex;
    gap: var(--space-3);
  }

  [data-ui="v2"] .settings {
    grid-template-columns: 1fr;
  }

  [data-ui="v2"] .contacts-tools,
  [data-ui="v2"] .pause-strip {
    align-items: stretch;
    flex-direction: column;
  }

  [data-ui="v2"] .shortcut-sheet {
    width: calc(100% - (var(--space-5) * 2));
  }
}

/* Live controls stay above navigation and use readable semantic colours in
   both appearances, including the legacy chat bubbles and composer. */
[data-ui="v2"] #softphone {
  position: fixed;
  top: var(--component-nav-bar-height);
  right: 0;
  left: var(--component-layout-sidebar-web);
  margin-left: 0;
  z-index: calc(var(--z-index-overlay) + 1);
  color: var(--text-primary);
  background: var(--bg-subtle);
  border-block: var(--component-card-border-width) solid var(--border-subtle);
  box-shadow: none;
}

[data-ui="v2"] body.has-softbar .mainnav { top: 0; }
[data-ui="v2"] body.has-softbar .shell {
  padding-top: calc(var(--component-nav-bar-height) + var(--softbar-h));
}
[data-ui="v2"] body.has-softbar .rail {
  top: calc(var(--component-nav-bar-height) + var(--softbar-h) + var(--space-8));
}
[data-ui="v2"] .softbar__slim {
  max-width: none;
  padding-inline: var(--component-layout-gutter-web);
  gap: var(--space-3);
  font-size: var(--type-body-sm-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: normal;
}
[data-ui="v2"] .softbar__text { min-width: 0; }
[data-ui="v2"] #sp-retry { margin-left: auto; }
[data-ui="v2"] .softbar__dot,
[data-ui="v2"] .softbar__pulse { background: var(--status-success); animation: none; }
[data-ui="v2"] .softbar__dot[data-reg="warming"] { background: var(--status-warning); }
[data-ui="v2"] .softbar__dot[data-reg="off"] { background: var(--text-tertiary); }
[data-ui="v2"] .softbar__dot[data-reg="err"] { background: var(--status-danger); }
[data-ui="v2"] .softbar__panel { overflow-y: auto; }
[data-ui="v2"] .softbar__panelin {
  max-width: none;
  padding: var(--space-5) var(--component-layout-gutter-web);
  border-top: var(--component-card-border-width) solid var(--border-subtle);
  background: var(--bg-raised);
}
[data-ui="v2"] .softbar__name { font-family: var(--font-family-display); color: var(--text-primary); }
[data-ui="v2"] .softbar__kicker,
[data-ui="v2"] .softbar__num,
[data-ui="v2"] .softbar__quote,
[data-ui="v2"] .softbar__qnum,
[data-ui="v2"] .spdialed { color: var(--text-secondary); }
[data-ui="v2"] .spbtn--answer,
[data-ui="v2"] .spbtn--answer:hover { background: var(--bg-accent); color: var(--text-on-accent); box-shadow: none; }
[data-ui="v2"] .spbtn--ghost,
[data-ui="v2"] .spkey { background: var(--bg-subtle); color: var(--text-primary); border-color: var(--border-default); }
[data-ui="v2"] .spbtn--ghost:hover,
[data-ui="v2"] .spkey:hover { background: var(--bg-sunken); }
[data-ui="v2"] .spbtn--ghost.is-on,
[data-ui="v2"] .spkey:active { background: var(--bg-accent); color: var(--text-on-accent); border-color: var(--border-default); }
[data-ui="v2"] .spbtn--hangup { background: var(--status-danger); color: var(--text-inverse); }
[data-ui="v2"] .softbar__queued { background: var(--bg-subtle); border-color: var(--border-default); flex-wrap: wrap; }
[data-ui="v2"] .sp-chip { background: var(--bg-sunken); color: var(--text-secondary); }
[data-ui="v2"] .sp-chip[data-state="on"] { background: var(--bg-accent); color: var(--text-on-accent); }
[data-ui="v2"] .sp-chip[data-state="err"] { background: var(--bg-sunken); color: var(--text-primary); }
[data-ui="v2"] .pronoun-choice[data-pronouns="private"] { grid-column: 1 / -1; }

[data-ui="v2"] .mediation {
  z-index: var(--z-index-modal);
  background: var(--bg-raised);
  border-color: var(--border-default);
  box-shadow: none;
}

[data-ui="v2"] .mediation__head,
[data-ui="v2"] .mediation__restore,
[data-ui="v2"] .mediation__bubble--caller,
[data-ui="v2"] .mediation__compose textarea {
  color: var(--text-primary);
  background: var(--bg-subtle);
}

[data-ui="v2"] .mediation__compose textarea {
  min-width: 0;
}

[data-ui="v2"] .mediation__bubble--owner {
  color: var(--text-on-accent);
  background: var(--bg-accent);
}

[data-ui="v2"] .mediation__activity {
  color: var(--text-primary);
  background: var(--bg-subtle);
}

@media (min-width: 761px) {
  [data-ui="v2"] #softphone {
    left: var(--component-layout-sidebar-collapsed-web);
  }
}

@media (min-width: 1101px) {
  [data-ui="v2"] #softphone {
    left: var(--component-layout-sidebar-web);
  }
}

[data-ui="v2"] .toast {
  z-index: var(--z-index-toast);
}

/* The mobile dashboard uses the same persistent capsule navigation as iOS.
   Keep all existing destinations and handlers; only its presentation changes. */
@media (max-width: 760px) {
  [data-ui="v2"] .nav-toggle,
  [data-ui="v2"] .nav-scrim,
  [data-ui="v2"] .mainnav .sidebrand,
  [data-ui="v2"] .mainnav .sidebar-state {
    display: none;
  }

  [data-ui="v2"] .mainnav,
  [data-ui="v2"] body.has-softbar .mainnav {
    width: auto;
    inset: auto var(--space-5) calc(env(safe-area-inset-bottom) + var(--space-3));
    border: var(--component-card-border-width) solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    transform: none;
    transition: none;
  }

  [data-ui="v2"] .mainnav__inner {
    flex-direction: row;
    gap: var(--space-1);
    padding: var(--space-1);
  }

  [data-ui="v2"] .mainnav .tab {
    flex: 1;
    min-width: var(--space-0);
    min-height: var(--component-tab-bar-height);
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2);
    font-size: var(--type-label-lg-size);
    line-height: var(--type-label-lg-leading);
  }

  [data-ui="v2"] .mainnav .tab:not(.is-active) > :not(.tab__ic) {
    font-size: inherit;
  }

  [data-ui="v2"] .shell {
    padding-bottom: calc(var(--component-tab-bar-height) + var(--space-9) + env(safe-area-inset-bottom));
  }

  [data-ui="v2"] .toast {
    bottom: calc(var(--component-tab-bar-height) + var(--space-7) + env(safe-area-inset-bottom));
  }

  [data-ui="v2"] .call-incidents__item {
    flex-direction: column;
    gap: var(--space-2);
  }

  [data-ui="v2"] .viewhead {
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  [data-ui="v2"] .callbar__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
  }

  [data-ui="v2"] .callbar__search,
  [data-ui="v2"] .callbar__dates {
    grid-column: 1 / -1;
  }

  [data-ui="v2"] .callbar__row > .callbar__field {
    grid-row: span 2;
    align-self: start;
  }

  [data-ui="v2"] .logcard,
  [data-ui="v2"] .card,
  [data-ui="v2"] .contact {
    border-radius: var(--component-card-radius-ios);
  }

  [data-ui="v2"] .tbl__open {
    column-gap: var(--space-3);
    padding-inline: var(--space-3);
    align-items: start;
  }

  [data-ui="v2"] .tbl__tier .tierpill {
    padding: var(--space-0);
    background: transparent;
    font-size: var(--type-label-lg-size);
    font-weight: var(--type-label-lg-weight);
    letter-spacing: normal;
    text-transform: none;
  }

  [data-ui="v2"] .tbl__tier .tierpill i {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-ui="v2"],
  [data-ui="v2"] *,
  [data-ui="v2"] *::before,
  [data-ui="v2"] *::after {
    scroll-behavior: auto;
    animation-duration: var(--motion-duration-instant);
    animation-iteration-count: 1;
    transition-duration: var(--motion-duration-instant);
  }

  [data-ui="v2"] .skeleton,
  [data-ui="v2"] .reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 760px) {
  [data-ui="v2"] #softphone { left: 0; }
  [data-ui="v2"] .softbar__slim { padding-inline: var(--space-5); }
  [data-ui="v2"] .softbar__panelin { padding: var(--space-5); }
  [data-ui="v2"] #softphone .softbar__panel { max-height: calc(100svh - var(--component-nav-bar-height) - var(--softbar-h) - var(--space-13)); }
}

/* Migration aliases: app-derived roles, never independent palette values. */
:root {
  --paper-soft: var(--bg-subtle);
}

}

/* D023 — Michael's live recording feature. Neutral selected contrast; red
   carries recording state only, separate from the call's disposition. */
.recording-toggle__mark { fill: var(--status-danger); }
[data-ui="v2"] #softphone[data-mode="active"] .recording-toggle.is-on { background: var(--control-call-selected-fill, var(--text-primary)); color: var(--control-call-selected-ink, var(--bg-canvas)); }

[data-ui="v2"] #softphone[data-mode="active"] .softbar__actions:has(.recording-toggle) { grid-template-columns: repeat(3, minmax(0, 1fr)); }