@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  /* The transcript galley face (variable: weight 200-900, optical size 8-60). */
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-variable.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --app-shell-height: 64px;
  --super-admin-banner-height: 38px;
  /* Master Cut palette (docs/build/theme-competition-2026-08-25): one cool neutral
     family for shell AND components, coral reserved for live/action, cyan on phosphor
     duty (timecodes, markers, camera hues), amber pushed off coral's hue. */
  --bg: #090a09;
  --surface: #101314;
  --surface-2: #141819;
  --panel: #171b1d;
  --border: #262d30;
  --border-strong: #3d474b;
  --text: #f2eee8;
  --muted: #a2b0b4;
  --subtle: #77878c;
  --coral: #f28f84;
  --coral-dim: #9b5b55;
  --green: #7fb894;
  --amber: #d9b04e;
  --danger: #e85a6c;
  --complement: #3ec8d0;
  --complement-deep: #29a5ae;
  /* The --bc-* chain the Lit components read; defining it here retires their brown
     inline fallbacks (#1a1612 / #2e2925 / #b9b1a4) everywhere at once. */
  --bc-bg: var(--bg);
  --bc-surface: var(--surface);
  --bc-card: var(--surface);
  --bc-panel: var(--panel);
  --bc-border: var(--border);
  --bc-border-strong: var(--border-strong);
  --bc-text: var(--text);
  --bc-muted: var(--muted);
  --bc-subtle: var(--subtle);
  --bc-accent: var(--coral);
  --bc-warning: var(--amber);
  --bc-danger: var(--danger);
  --bc-complement: var(--complement);
  --bc-complement-deep: var(--complement-deep);
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --bc-ui-font: var(--font-sans);
  --bc-mono-font: var(--font-mono);
  --text-xs: 11px;
  --text-sm: 12px;
  --text-ui: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --line-tight: 1.12;
  --line-ui: 1.35;
  --line-body: 1.52;

  /* JUDGMENT: spacing + radius tokens added per Phase 2.3 audit. Existing
     rules can stay on magic numbers; new layout work should reach for these
     so spacing stays consistent as more surfaces are reshaped. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* overflow-x: hidden on html and body makes body a scroll container that
   never scrolls, so nothing inside it can stick. While the Project library
   shows, clip trims the same overflow without that side effect: the app
   header and the library's own top bar and folder rail stick, and the tab
   strip scrolls away to leave room for footage. */
html:has(#project-panel-library:not([hidden])),
html:has(#project-panel-library:not([hidden])) body {
  overflow-x: clip;
}

html:has(#project-panel-library:not([hidden])) .project-tabs-shell {
  position: static;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--line-body);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

.app-chrome {
  position: sticky;
  top: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: var(--app-shell-height);
  min-height: var(--app-shell-height);
  padding: 0 8px;
  /* viewport-fit=cover lets the page reach into the notch, so the chrome pads
     itself out of it. Off a notched phone every inset is 0 and 8px stands. */
  padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right));
  background: rgba(10, 10, 10, 0.92);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  max-width: 100%;
  overflow: visible;
}

.app-chrome-context {
  grid-column: 1;
  min-width: 0;
  height: var(--app-shell-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
}

.app-chrome-location {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas:
    "back parent"
    "back title";
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
}

.app-chrome-home,
.app-chrome-back {
  grid-area: back;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 4px;
}

.app-chrome-back {
  font-size: 30px;
}

.app-chrome-home:hover,
.app-chrome-home:focus-visible,
.app-chrome-back:hover,
.app-chrome-back:focus-visible {
  background: color-mix(in srgb, var(--coral) 8%, transparent);
}

.app-chrome-home:focus-visible,
.app-chrome-back:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: -2px;
}

.app-chrome-parent {
  grid-area: parent;
  color: var(--muted);
  font: 700 9px/1 var(--font-mono);
  /* House micro-caps tracking — every small cap in the product sits at the
     same optical loudness. */
  letter-spacing: .08em;
  text-transform: uppercase;
}

.app-chrome-title {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 760;
  line-height: 1.15;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-actions-menu {
  position: relative;
  align-self: stretch;
  height: var(--app-shell-height);
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.app-chrome-tools {
  min-width: 0;
  height: var(--app-shell-height);
  display: flex;
  align-items: center;
  gap: 4px;
}

.app-actions-menu[open] {
  z-index: 320;
}

.app-actions-menu > summary {
  min-width: 80px;
  min-height: var(--app-shell-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 0;
  color: var(--coral);
  cursor: pointer;
  font: 760 13px/1 var(--font-sans);
  list-style: none;
}

.app-actions-menu > summary::-webkit-details-marker {
  display: none;
}

.app-actions-menu > summary::after {
  content: "⌄";
  position: relative;
  top: -1px;
  color: var(--muted);
  font-size: 12px;
}

.app-actions-menu > summary:hover,
.app-actions-menu > summary:focus-visible,
.app-actions-menu[open] > summary {
  background: color-mix(in srgb, var(--coral) 8%, transparent);
}

.app-actions-menu > summary:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: -2px;
}

.app-actions-popover {
  position: absolute;
  z-index: 330;
  top: calc(100% + 4px);
  right: 0;
  width: min(232px, calc(100vw - 20px));
  display: grid;
  gap: 2px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}

.app-actions-popover a,
.app-actions-popover button {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: 700 13px/1.2 var(--font-sans);
  text-align: left;
}

.app-actions-popover a:hover,
.app-actions-popover a:focus-visible,
.app-actions-popover button:hover,
.app-actions-popover button:focus-visible {
  background: color-mix(in srgb, var(--coral) 9%, transparent);
}

.brand-lockup {
  grid-area: 1 / 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--app-shell-height);
  min-width: 0;
}

.brand-mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--coral);
}

.brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.brand-word {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
}

.top-nav {
  grid-column: 2;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--app-shell-height);
  font-family: var(--font-mono);
  font-size: var(--text-ui);
  color: var(--muted);
}

.top-nav form {
  margin: 0;
}

.top-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 9px;
  border: 1px solid transparent;
}

.support-trigger {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.support-trigger:hover,
.support-trigger:focus-visible,
.support-trigger[aria-expanded="true"] {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
}

.support-trigger:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

.support-trigger svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.support-trigger-beacon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  background: var(--coral);
  border: 1px solid rgba(9, 10, 9, 0.95);
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(242, 143, 132, 0.18);
}

.support-trigger-beacon[hidden] {
  display: none;
}

.notifications-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--app-shell-height);
  margin-right: 4px;
}

.notifications-menu[open] {
  z-index: 120;
}

.notifications-trigger {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--muted);
  list-style: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.notifications-trigger::-webkit-details-marker {
  display: none;
}

.notifications-trigger:hover,
.notifications-trigger:focus-visible,
.notifications-menu[open] .notifications-trigger {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
}

.notifications-trigger:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

.notifications-trigger svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.notifications-count {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  color: #191111;
  font-size: 10px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  background: var(--coral);
  border-radius: 999px;
}

.notifications-count[hidden] {
  display: none;
}

.notifications-popover {
  width: min(340px, calc(100vw - 28px));
  overflow-y: auto;
}

.notifications-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px;
}

.notifications-read-all-form {
  margin: 0;
}

.notifications-read-all {
  min-height: 32px;
  padding: 4px 6px;
  color: var(--muted);
  font: inherit;
  font-size: var(--text-xs);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.notifications-read-all:hover,
.notifications-read-all:focus-visible {
  color: var(--text);
}

.notifications-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-nav .notifications-link,
.notifications-link {
  display: grid;
  gap: 2px;
  min-height: 0;
  padding: 8px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.notifications-link:hover,
.notifications-link:focus-visible {
  background: rgba(255, 255, 255, 0.05);
}

.notifications-link strong {
  color: var(--text);
  font-weight: 650;
}

.notifications-item.is-unread .notifications-link strong::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--coral);
  border-radius: 999px;
}

.notifications-link span {
  overflow-wrap: anywhere;
}

.notifications-link time,
.notifications-all {
  color: var(--muted);
  font-size: var(--text-xs);
}

.notifications-empty {
  margin: 0;
  padding: 8px 4px;
  color: var(--muted);
}

.identity-unread-dot {
  position: absolute;
  top: 9px;
  right: 11px;
  display: none;
  width: 8px;
  height: 8px;
  background: var(--coral);
  border: 1px solid rgba(9, 10, 9, 0.95);
  border-radius: 999px;
}

.identity-menu-count {
  margin-left: auto;
  min-width: 18px;
  padding: 0 5px;
  color: #191111;
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  background: var(--coral);
  border-radius: 999px;
}

.identity-menu-count[hidden] {
  display: none;
}

.super-admin-shell {
  width: min(1280px, calc(100vw - 32px));
  margin: 28px auto 64px;
}

.super-admin-header,
.super-admin-current,
.super-admin-banner {
  display: flex;
  gap: var(--space-4);
}

.super-admin-header {
  align-items: end;
  justify-content: space-between;
  margin-bottom: var(--space-7);
}

.super-admin-kicker,
.admin-table small,
.admin-table span {
  color: var(--muted);
}

.super-admin-kicker,
.admin-pill {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.super-admin-kicker {
  margin: 0 0 var(--space-1);
  text-transform: uppercase;
}

.super-admin-header h1 {
  margin: 0;
  letter-spacing: 0;
  font-size: var(--text-3xl);
  line-height: var(--line-tight);
}

.super-admin-note {
  margin: var(--space-1) 0 0;
  color: var(--muted);
}

.super-admin-tools,
.super-admin-current-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.super-admin-directory-form {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.super-admin-search-row,
.super-admin-filter-row {
  display: flex;
  align-items: end;
  gap: var(--space-3);
}

.super-admin-search-row {
  margin-bottom: var(--space-3);
}

.super-admin-search-row input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 var(--space-4);
  color: var(--text);
  font: inherit;
  font-size: var(--text-md);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}

.super-admin-search-row input[type="search"]:focus-visible,
.super-admin-filter-row select:focus-visible,
.admin-account-more summary:focus-visible,
.super-admin-pagination a:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

.super-admin-filter-row {
  flex-wrap: wrap;
}

.super-admin-filter-row label {
  display: grid;
  gap: var(--space-1);
  color: var(--muted);
  font-size: var(--text-sm);
}

.super-admin-filter-row select {
  min-width: 145px;
  min-height: 38px;
  padding: 0 32px 0 var(--space-2);
  color: var(--text);
  font: inherit;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.super-admin-clear-link {
  min-height: 38px;
  padding: 9px 0;
  color: var(--muted);
}

.super-admin-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.super-admin-active-filters span {
  padding: 4px 8px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}

.super-admin-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.super-admin-summary article {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.super-admin-summary article > span,
.super-admin-summary small,
.super-admin-results-heading,
.super-admin-freshness {
  color: var(--muted);
}

.super-admin-summary article > span {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
}

.super-admin-summary strong {
  font-size: var(--text-2xl);
}

.super-admin-results-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.super-admin-results-heading p {
  margin: 0;
}

.admin-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
}

.admin-account-table {
  min-width: 1180px;
}

.admin-account-table td {
  height: 92px;
}

.admin-account-identity {
  min-width: 240px;
}

.admin-account-actions {
  position: sticky;
  right: 0;
  width: 112px;
  background: var(--surface);
  box-shadow: -12px 0 18px rgba(9, 10, 9, 0.78);
}

.admin-account-actions form {
  margin: 0 0 var(--space-2);
}

.admin-inline-button.admin-primary-button {
  color: #191111;
  font-weight: 750;
  background: var(--coral);
  border-color: var(--coral);
}

.admin-primary-button:hover {
  background: #f6aaa2;
}

.admin-account-more summary {
  width: fit-content;
  color: var(--muted);
  cursor: pointer;
}

.admin-account-more a {
  display: block;
  margin-top: var(--space-1);
  color: var(--text);
  white-space: nowrap;
}

.admin-account-table tr[data-stats-state="stale"] [data-stat] small,
.admin-account-table tr[data-stats-state="failed"] [data-stat] small {
  color: var(--amber);
}

.admin-table th,
.admin-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.admin-table th {
  color: var(--subtle);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
}

.admin-table td > strong,
.admin-table td > span,
.admin-table td > small,
.admin-row-link {
  display: block;
}

.admin-row-link {
  color: var(--text);
  font-weight: 700;
}

.admin-row-link:hover {
  color: var(--coral);
}

.admin-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 3px 8px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.super-admin-current {
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.admin-inline-button,
.super-admin-banner-button {
  min-height: 36px;
  padding: 0 var(--space-3);
  color: var(--text);
  font: inherit;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.super-admin-empty {
  padding: var(--space-8);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.super-admin-empty h2 {
  margin-top: 0;
}

.super-admin-empty .admin-inline-button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.super-admin-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  color: var(--muted);
}

.super-admin-pagination a:last-child,
.super-admin-pagination span:last-child {
  justify-self: end;
}

.super-admin-pagination [aria-disabled="true"] {
  color: var(--subtle);
}

.super-admin-banner {
  position: sticky;
  top: var(--app-shell-height);
  z-index: 250;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: var(--space-2) var(--space-4);
  color: var(--text);
  background: #231f17;
  border-bottom: 1px solid var(--amber);
}

.super-admin-banner a {
  color: var(--coral);
}

.super-admin-banner form {
  margin: 0;
}

@media (max-width: 860px) {
  .super-admin-header,
  .super-admin-current,
  .super-admin-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .super-admin-tools,
  .super-admin-current-actions,
  .super-admin-search-row {
    align-items: stretch;
  }

  .super-admin-summary {
    grid-template-columns: 1fr;
  }

  .super-admin-results-heading {
    display: block;
  }

  .super-admin-freshness {
    margin-top: var(--space-1) !important;
  }
}

@media (max-width: 560px) {
  .super-admin-shell {
    width: min(100% - 20px, 1280px);
    margin-top: var(--space-4);
  }

  .super-admin-search-row,
  .super-admin-tools,
  .super-admin-current-actions {
    flex-direction: column;
  }

  .super-admin-filter-row label,
  .super-admin-filter-row select {
    width: 100%;
  }

  .super-admin-filter-row .admin-inline-button {
    flex: 1 1 auto;
  }
}

.identity-menu {
  position: relative;
  height: var(--app-shell-height);
}

.identity-menu[open] {
  z-index: 120;
}

.identity-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--app-shell-height);
  min-height: var(--app-shell-height);
  max-width: 220px;
  padding: 0 0 0 10px;
  color: var(--text);
  font-family: var(--font-mono);
  list-style: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.identity-trigger::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 1px;
  background: var(--border-strong);
}

.identity-trigger::-webkit-details-marker {
  display: none;
}

.identity-trigger:hover,
.identity-menu[open] .identity-trigger {
  background: transparent;
}

.identity-trigger:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: -4px;
}

.identity-trigger:hover::before,
.identity-menu[open] .identity-trigger::before {
  background: var(--coral);
}

.identity-avatar {
  display: none;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  place-items: center;
  color: #191111;
  font-size: var(--text-xs);
  font-weight: 800;
  background: var(--coral);
  border-radius: 50%;
}

.identity-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--text-ui);
  font-weight: 650;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-caret {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
}

.identity-popover {
  position: absolute;
  z-index: 310;
  top: var(--app-shell-height);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(280px, calc(100vw - 28px));
  max-height: calc(100vh - var(--app-shell-height) - 8px);
  max-height: calc(100dvh - var(--app-shell-height) - 8px);
  padding: 8px;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-mono);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

.identity-card {
  display: grid;
  gap: 2px;
  padding: 4px 4px 8px;
  border-bottom: 1px solid var(--border);
}

.identity-card strong,
.identity-card span,
.identity-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-card strong {
  font-size: var(--text-ui);
}

.identity-card span,
.identity-card small {
  color: var(--muted);
  font-size: var(--text-sm);
}

.identity-context {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  background: color-mix(in srgb, var(--surface) 74%, #000);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.identity-context[hidden] {
  display: none;
}

.identity-context-label {
  color: var(--coral);
  font: 700 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0;
}

.identity-context strong,
.identity-context small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-context strong {
  color: var(--text);
  font-size: var(--text-ui);
}

.identity-context small {
  color: var(--muted);
  font-size: var(--text-sm);
}

.identity-menu-links {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-height: 0;
  padding-bottom: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 24%, transparent) transparent;
  border-bottom: 1px solid var(--border);
  /* Overlay scrollbars stay invisible until you already scroll, which silently hid
     the last item on short viewports. The `local` layers ride the content and mask
     the fixed `scroll` layers at each end, so the haze shows only when more remains. */
  background:
    linear-gradient(var(--surface) 40%, transparent) top / 100% 18px no-repeat local,
    linear-gradient(transparent, var(--surface) 60%) bottom / 100% 18px no-repeat local,
    linear-gradient(color-mix(in srgb, var(--text) 16%, transparent), transparent) top / 100% 10px
      no-repeat scroll,
    linear-gradient(transparent, color-mix(in srgb, var(--text) 16%, transparent)) bottom / 100% 10px
      no-repeat scroll;
}

.identity-popover > form {
  flex: 0 0 auto;
}

.identity-menu-links a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  color: var(--text);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.identity-menu-links a:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
}

/* Short viewports (small windows, landscape phones) otherwise push the last link —
   "Switch account" for super admins — into the scroll region. */
@media (max-height: 640px) {
  .identity-menu-links a {
    min-height: 34px;
    padding: 6px 10px;
  }
}

.settings-danger-copy {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
}

.settings-danger-link {
  display: inline-block;
  width: fit-content;
  padding: 8px 12px;
  color: var(--danger);
  border: 1px solid rgba(208, 109, 88, 0.4);
  text-decoration: none;
  font-weight: 800;
}

.settings-danger-link:hover,
.settings-danger-link:focus-visible {
  background: rgba(208, 109, 88, 0.12);
  border-color: var(--danger);
}

.identity-signout {
  width: 100%;
  padding: 8px 10px;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  cursor: pointer;
}

.identity-signout:hover {
  color: var(--danger);
  background: rgba(208, 109, 88, 0.12);
  border-color: rgba(208, 109, 88, 0.2);
}

.flash-stack {
  position: fixed;
  top: 76px;
  right: 20px;
  right: max(20px, env(safe-area-inset-right));
  z-index: 200;
  display: grid;
  gap: 8px;
  max-width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.flash {
  margin: 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.flash-notice {
  border-color: rgba(126, 196, 154, 0.5);
}

.flash-alert {
  border-color: rgba(215, 112, 85, 0.55);
}

.verify-email-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: rgba(215, 169, 85, 0.12);
  border-bottom: 1px solid rgba(215, 169, 85, 0.45);
  font-size: 0.9rem;
}

.verify-email-resend {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: none;
  border: 1px solid var(--border-strong);
  padding: 4px 10px;
  cursor: pointer;
  font: inherit;
}

/* On a phone the centred, wrapping layout stacks the sentence and the button
   into ~117px of a 664px viewport on every signed-in page until the address is
   verified. Keep the button beside the sentence and let the address wrap. */
@media (pointer: coarse) {
  .verify-email-banner {
    flex-wrap: nowrap;
    justify-content: space-between;
    text-align: left;
    gap: 10px;
    padding: 6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
    font-size: 0.85rem;
    line-height: 1.3;
  }

  .verify-email-banner > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .verify-email-banner > form,
  .verify-email-banner > a {
    flex: none;
  }
}

.app-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
  padding: clamp(20px, 3vw, 34px) 0 var(--space-4);
  border-bottom: 1px solid var(--border);
}

.app-page-title {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.app-page-title h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(28px, 2.7vw, 40px);
  line-height: var(--line-tight);
}

.app-page-meta {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-md);
  line-height: var(--line-ui);
}

.app-page-header .app-page-actions {
  align-self: start;
  padding-top: 2px;
}

.project-page-header {
  border-bottom: 0;
}

.project-page-header .app-page-title {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) 10px;
}

.project-page-header .eyebrow,
.project-page-header h1 {
  grid-column: 1 / -1;
}

.project-page-header .app-page-meta {
  white-space: nowrap;
}

.project-page-description {
  display: -webkit-box;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.upload-ai-strip,
.settings-ai-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.settings-ai-guide {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.upload-ai-strip h2 {
  margin: 2px 0 5px;
  font-size: var(--text-xl);
  line-height: var(--line-tight);
}

.upload-ai-strip p:not(.eyebrow),
.settings-ai-guide span {
  max-width: 72ch;
  margin: 0;
  color: var(--muted);
  line-height: var(--line-body);
}

.settings-ai-guide > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.settings-ai-guide strong {
  color: var(--text);
  font-size: var(--text-md);
}

.app-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

.app-page-actions > .button-primary,
.app-page-actions > .button-secondary {
  min-height: 44px;
  padding: 0 14px;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
}

.app-page-actions bitterclip-upload-link-share {
  min-width: 0;
}

.eyebrow {
  margin: 0;
  color: var(--coral);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

p {
  margin-top: 0;
}

h1 {
  max-width: 780px;
  margin-bottom: var(--space-5);
  font-size: var(--text-3xl);
  line-height: var(--line-tight);
  letter-spacing: 0;
}

h2 {
  margin-bottom: var(--space-3);
  font-size: var(--text-2xl);
  line-height: var(--line-tight);
}

h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
  line-height: var(--line-tight);
}

.lede {
  max-width: 680px;
  color: var(--muted);
  font-size: var(--text-md);
  line-height: var(--line-body);
}

.reference-docs {
  display: grid;
  gap: var(--space-7);
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

.reference-hero {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.reference-hero h1 {
  margin: 0;
}

.reference-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-md);
}

.reference-hero-actions,
.operation-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.reference-link-button,
.operation-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
}

.reference-link-button {
  color: var(--text);
  font-weight: 700;
}

.reference-section {
  display: grid;
  gap: var(--space-4);
}

.reference-section h2,
.reference-section h3,
.reference-section h4 {
  margin: 0;
}

.reference-muted {
  max-width: 760px;
  color: var(--muted);
}

.reference-grid,
.operation-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.reference-grid > div,
.operation-doc {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.operation-list {
  display: grid;
  gap: var(--space-7);
}

.operation-doc {
  display: grid;
  gap: var(--space-4);
}

.operation-doc header {
  display: grid;
  gap: var(--space-2);
}

.operation-doc header p {
  max-width: 880px;
  margin: 0;
  color: var(--muted);
}

.operation-name {
  color: var(--coral) !important;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
}

.operation-meta span {
  min-height: 28px;
  color: var(--muted);
  font-size: var(--text-sm);
}

.operation-errors p,
.operation-example p {
  margin: 0;
  color: var(--muted);
}

.reference-docs pre {
  overflow-x: auto;
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  color: var(--text);
  font-size: var(--text-sm);
  background: #050605;
  border: 1px solid var(--border);
}

.reference-docs code {
  font-family: var(--font-mono);
}

.button-primary,
.button-secondary,
.button-danger {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-ui);
  font-weight: 700;
  line-height: 1;
}

.button-primary,
.button-secondary,
.button-danger {
  cursor: pointer;
}

.button-primary {
  background: var(--coral);
  color: #16100e;
  border-color: #f7aca3;
  box-shadow: inset 0 -2px 0 rgba(22, 16, 14, 0.22);
}

.button-secondary {
  color: var(--text);
  background: var(--surface);
}

.button-danger {
  color: var(--danger);
  background: transparent;
  border-color: rgba(208, 109, 88, 0.55);
}

.button-danger:hover {
  background: rgba(208, 109, 88, 0.12);
}

.button-primary:disabled,
.button-secondary:disabled,
.button-danger:disabled {
  color: var(--subtle);
  background: #0d0f0e;
  border-color: var(--border);
  cursor: not-allowed;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

/* Global keyboard focus indicator. Every button + role=button surface needs
   a visible focus ring; the only previous focus styles were on a couple of
   specific rows (.bc-source-row, .bc-source-discard). Everything else was
   invisible to keyboard users. */
summary:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

.settings-page {
  display: grid;
  gap: var(--space-7);
  width: min(1180px, calc(100vw - 48px));
  max-width: none;
  margin: 0 auto;
  min-height: calc(100vh - 160px);
  min-height: calc(100dvh - 160px);
  align-items: start;
  padding: 0 0 var(--space-8);
}

.youtube-stats-page {
  align-content: start;
}

.youtube-stats-page dd {
  margin: 0;
}

.settings-stack {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.settings-panel {
  display: grid;
  gap: 16px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.settings-danger-panel {
  border-color: rgba(208, 109, 88, 0.45);
}

.settings-delete-summary {
  display: grid;
  gap: 10px;
}

.settings-delete-summary div {
  display: grid;
  gap: 3px;
}

.settings-delete-summary span {
  color: var(--muted);
}

.settings-section-heading {
  display: grid;
  gap: 4px;
}

.settings-section-heading h2 {
  margin: 0;
  font-size: 22px;
}

.settings-target-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.settings-target-form .settings-note {
  grid-column: 1 / -1;
}

.settings-target-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-defaults-form {
  display: grid;
  gap: 14px;
}

.settings-defaults-form fieldset {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.settings-defaults-form legend {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.settings-channel-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.settings-channel-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settings-channel-row strong,
.settings-channel-row span {
  overflow-wrap: anywhere;
}

.settings-channel-row span {
  color: var(--muted);
}

.auth-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: var(--space-8);
  align-items: center;
  width: min(100%, 1040px);
  min-height: calc(100vh - 96px);
  min-height: calc(100dvh - 96px);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  padding-inline: max(var(--space-6), env(safe-area-inset-left)) max(var(--space-6), env(safe-area-inset-right));
}

.auth-copy {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.auth-copy h1 {
  margin: 0;
}

.auth-copy .lede {
  max-width: 520px;
  margin: 0;
}

.auth-plan-intent {
  max-width: 520px;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--green);
  border-left: 3px solid var(--green);
  font-size: var(--text-sm);
}

.auth-panel {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--surface-2);
  border: 1px solid var(--border);
  /* the printer's rule: one coral ink line across the top of the card */
  border-top: 2px solid var(--coral);
  box-shadow: inset 0 1px 0 rgba(242, 238, 232, 0.045);
}

.auth-form {
  display: grid;
  gap: var(--space-4);
}

.auth-form label {
  display: grid;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
}

.auth-form input:not([type="hidden"]):not([type="submit"]):not([type="button"]) {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  color: var(--text);
  background: #0b0d0c;
  border: 1px solid var(--border-strong);
  font: inherit;
  font-size: var(--text-base);
  text-transform: none;
}

.auth-form input:not([type="hidden"]):focus {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
  border-color: var(--coral);
}

.auth-form .wide-action {
  min-height: 44px;
  justify-content: center;
  font-size: var(--text-ui);
}

.auth-form .auth-password-hint {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: none;
}

.button-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 9px 10px;
  color: var(--text);
  background: #0b0d0c;
  border: 1px solid var(--border-strong);
  font: inherit;
  font-size: var(--text-ui);
  font-weight: 800;
  text-decoration: none;
}

.button-google svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.button-google:hover,
.button-google:focus-visible {
  border-color: var(--coral);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}

/* Stands where the Google button would be when a social app opened this page
   in its own browser, which Google refuses to sign in from. */
.auth-inapp-notice {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--amber);
  font-size: var(--text-base);
  line-height: var(--line-body);
}

.auth-inapp-notice strong {
  display: block;
}

.settings-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.settings-field code {
  width: 100%;
  min-height: 42px;
  padding: 10px 11px;
  color: var(--text);
  background: #090b0a;
  border: 1px solid var(--border);
  font: inherit;
  text-transform: none;
}

.settings-field code {
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: 12px;
}

.settings-field input,
.settings-field select,
.settings-field textarea,
.settings-target-form input[type="text"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 10px;
  color: var(--text);
  background: #090b0a;
  border: 1px solid var(--border-strong);
  font: inherit;
  text-transform: none;
}

.settings-field textarea {
  resize: vertical;
  line-height: var(--line-normal);
}

.settings-field input:focus,
.settings-field select:focus,
.settings-field textarea:focus,
.settings-target-form input[type="text"]:focus {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
  border-color: var(--coral);
}

.settings-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.settings-page-compact {
  gap: var(--space-7);
}

.settings-stack-plain {
  gap: var(--space-8);
}

.settings-section {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.settings-section:last-child {
  border-bottom: 0;
}

.settings-line-heading {
  gap: 2px;
}

.settings-line-heading h2 {
  font-size: var(--text-xl);
}

.settings-provider-list,
.settings-kv-list {
  display: grid;
  border-top: 1px solid var(--border);
}

.settings-provider-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(132px, auto) auto;
  gap: var(--space-5);
  align-items: center;
  min-height: 58px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.settings-provider-row-with-editor {
  align-items: start;
}

.settings-provider-editor {
  grid-column: 1 / -1;
  padding-top: var(--space-2);
}

.settings-provider-platform {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.settings-provider-platform strong {
  color: var(--text);
}

.settings-provider-meta {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.settings-provider-meta a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(242, 143, 132, 0.45);
  text-underline-offset: 3px;
}

.zoom-import-guide {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: rgba(242, 143, 132, 0.055);
  border-left: 3px solid var(--coral);
}

.zoom-import-guide h3,
.settings-subheading-row h3 {
  margin: 0;
  font-size: var(--text-lg);
}

.zoom-import-guide ol {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 22px;
  color: var(--muted);
}

.zoom-import-guide li::marker {
  color: var(--coral);
  font-weight: 800;
}

.zoom-import-guide strong {
  color: var(--text);
}

.settings-subheading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-3);
}

.settings-subheading-row .settings-text-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.settings-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: var(--text-ui);
  font-weight: 800;
  white-space: nowrap;
}

.settings-status::before {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--subtle);
  content: "";
}

.settings-status.connected {
  color: var(--green);
}

.settings-status.connected::before {
  background: var(--green);
}

.settings-status.warning {
  color: var(--amber);
}

.settings-status.warning::before {
  background: var(--amber);
}

.settings-status.progress {
  color: var(--text);
}

.settings-status.progress::before {
  background: var(--coral);
}

.settings-status.missing {
  color: var(--muted);
}

.settings-provider-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
}

.settings-provider-actions form,
.settings-kv-row-action form {
  margin: 0;
}

.settings-row-button {
  min-height: 44px;
  min-width: 92px;
}

.settings-target-actions .button-primary,
.settings-target-actions .button-secondary {
  min-height: 44px;
}

.settings-text-action {
  color: var(--muted);
  font-size: var(--text-ui);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(160, 171, 164, 0.45);
  text-underline-offset: 3px;
}

.settings-text-action:hover {
  color: var(--text);
  text-decoration-color: rgba(242, 143, 132, 0.75);
}

.settings-target-form-compact {
  margin-top: 0;
}

.settings-target-form-compact .settings-target-input {
  grid-template-columns: 1fr;
  gap: 6px;
}

.inbox-route-fields {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.settings-row-field {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

.settings-row-field > span,
.settings-row-field legend {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
}

.settings-row-field input,
.settings-row-field select,
.settings-row-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  color: var(--text);
  background: #090b0a;
  border: 1px solid var(--border-strong);
  font: inherit;
  text-transform: none;
}

.settings-row-field textarea {
  resize: vertical;
  line-height: var(--line-body);
}

.settings-row-field input:focus,
.settings-row-field select:focus,
.settings-row-field textarea:focus {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
  border-color: var(--coral);
}

.settings-row-field input:disabled,
.settings-row-field select:disabled,
.settings-row-field textarea:disabled {
  color: var(--subtle);
  background: #0d0f0e;
  border-color: var(--border);
  cursor: not-allowed;
  opacity: 1;
}

.settings-defaults-compact {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.settings-check-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  align-items: stretch;
}

.settings-platform-control {
  display: grid;
  gap: 8px;
}

.settings-platform-option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  padding: 9px 11px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
}

.settings-platform-option:hover:not(.is-disabled),
.settings-platform-option:has(input[type="checkbox"]:focus-visible) {
  border-color: rgba(242, 143, 132, 0.65);
}

.settings-platform-option.is-selected,
.settings-platform-option:has(input[type="checkbox"]:checked) {
  background: rgba(242, 143, 132, 0.12);
  border-color: rgba(242, 143, 132, 0.75);
}

.settings-platform-option input[type="checkbox"] {
  display: grid;
  width: 22px;
  height: 22px;
  place-content: center;
  appearance: none;
  margin: 0;
  background: #080a09;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.settings-platform-option input[type="checkbox"]::before {
  width: 9px;
  height: 5px;
  border-bottom: 2px solid #090b0a;
  border-left: 2px solid #090b0a;
  content: "";
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform 120ms ease;
}

.settings-platform-option input[type="checkbox"]:checked {
  background: var(--coral);
  border-color: var(--coral);
}

.settings-platform-option input[type="checkbox"]:checked::before {
  transform: rotate(-45deg) scale(1);
}

.settings-platform-option input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

.settings-platform-option.is-disabled {
  color: var(--subtle);
  cursor: not-allowed;
}

.settings-platform-option input[type="checkbox"]:disabled {
  background: #0d0f0e;
  border-color: var(--border);
}

.settings-platform-option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.settings-platform-option-name {
  overflow: hidden;
  color: inherit;
  font-size: var(--text-ui);
  font-weight: 900;
  line-height: var(--line-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-platform-option-state {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: var(--line-ui);
  text-transform: none;
}

.settings-platform-option.is-disabled .settings-platform-option-state {
  color: var(--subtle);
}

.settings-field-hint {
  margin: 0;
  color: var(--subtle);
  font-size: var(--text-ui);
  font-weight: 600;
  text-transform: none;
}

.settings-row-field-wide {
  align-items: start;
}

.settings-form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-1);
}

.settings-form-footer .button-primary,
.settings-form-footer .button-secondary {
  min-height: 44px;
}

.settings-kv-row {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-height: 46px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.settings-kv-row-action {
  grid-template-columns: 168px minmax(0, 1fr) auto;
}

.settings-kv-row > span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
}

.settings-kv-row code {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.settings-subsection-heading {
  padding-top: var(--space-3);
}

.settings-subsection-heading h3 {
  margin: 0;
  font-size: var(--text-lg);
}

.settings-session-list {
  margin-top: -2px;
}

.connect-page {
  display: grid;
  gap: var(--space-5);
  width: min(1120px, calc(100vw - 32px));
  margin: 0 auto;
  padding: clamp(28px, 5vh, 56px) 0 var(--space-8);
}

.connect-hero {
  display: grid;
  gap: var(--space-3);
  max-width: 820px;
}

.connect-hero-copy {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.connect-hero h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
}

.connect-hero .lede {
  max-width: 720px;
  margin: 0;
}

.connect-server-panel,
.connect-access-panel,
.connect-setup-panel,
.connect-requests,
.connect-client,
.connect-provider-grid,
.connect-provider-row,
.connect-provider-main,
.connect-provider-title,
.connect-provider-actions,
.connect-url-box,
.connect-upload-row,
.connect-access-list div {
  display: grid;
  min-width: 0;
}

.connect-server-panel,
.connect-access-panel,
.connect-setup-panel,
.connect-requests {
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
}

.connect-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 380px);
  gap: var(--space-5);
  align-items: end;
}

.connect-section-heading h2,
.connect-client strong {
  margin: 0;
}

.connect-section-heading h2 {
  max-width: 760px;
  font-size: clamp(24px, 2.7vw, 34px);
  line-height: var(--line-tight);
}

.connect-section-heading p:not(.eyebrow),
.connect-upload-row span {
  margin: 0;
  color: var(--muted);
  line-height: var(--line-body);
}

.connect-url-box {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
  max-width: 820px;
}

.connect-provider-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.connect-provider-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: rgba(9, 10, 9, 0.36);
  border: 1px solid rgba(229, 235, 231, 0.1);
  border-radius: var(--radius-md);
}

.connect-provider-main {
  gap: 6px;
}

.connect-provider-title {
  grid-template-columns: minmax(0, auto) auto;
  gap: var(--space-2);
  align-items: center;
  justify-content: start;
}

.connect-provider-title h3 {
  margin: 0;
  font-size: var(--text-md);
}

.connect-provider-main p,
.connect-provider-meta {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-ui);
  line-height: var(--line-body);
}

.connect-provider-actions {
  grid-auto-flow: column;
  gap: var(--space-2);
  justify-content: start;
}

.connect-request-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.connect-request-list li {
  padding: var(--space-4);
  color: var(--text);
  background: rgba(9, 10, 9, 0.36);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  line-height: var(--line-body);
}

.connect-url-box .settings-field code {
  display: flex;
  align-items: center;
  min-height: 46px;
  border-color: var(--border-strong);
}

.connect-copy-button {
  min-height: 46px;
  white-space: nowrap;
}

.connect-copy-button:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

.connect-copy-status {
  min-height: 18px;
}

.connect-client-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.connect-client {
  gap: var(--space-2);
  min-width: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.connect-client strong {
  color: var(--text);
  font-size: var(--text-md);
  line-height: var(--line-ui);
}

.connect-client span {
  color: var(--muted);
  line-height: var(--line-body);
}

.connect-access-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
}

.connect-access-list div {
  gap: var(--space-1);
  min-width: 0;
}

.connect-access-list dt {
  color: var(--text);
  font-weight: 800;
}

.connect-access-list dd {
  margin: 0;
  color: var(--muted);
  line-height: var(--line-body);
  overflow-wrap: anywhere;
}

.connect-upload-row {
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  justify-content: start;
}

.billing-page {
  display: grid;
  gap: var(--space-8);
  width: min(1240px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 0 0 var(--space-8);
}

.billing-hero h1,
.billing-history h2,
.billing-plan h2,
.billing-local-checkout h2 {
  margin: 0;
}

.billing-summary {
  display: grid;
  /* Auto-flow rather than a fixed track count: the agent-usage cell renders
     only for accounts that have the rail, so this row is legitimately four
     cells wide for most studios and five for some. A `repeat(5, …)` would
     leave those studios an empty fifth column. The narrow-screen rule further
     down flips this back to rows. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.billing-summary div {
  display: grid;
  gap: var(--space-1);
  min-height: 72px;
  align-content: center;
  padding: var(--space-3) var(--space-4);
  border-right: 1px solid var(--border);
}

.billing-summary div:last-child {
  border-right: 0;
}

.billing-summary span,
.billing-table-head {
  color: var(--subtle);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.billing-summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: var(--text-lg);
  line-height: var(--line-tight);
}

/* The denominator sits inside the same <strong> so the pair wraps together,
   but reads as secondary — "$0.412" is the number, "of $20.00" is the scale. */
.billing-summary-of {
  color: var(--subtle);
  font-size: var(--text-sm);
  font-weight: 500;
}

.billing-comp-grant {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.billing-agent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.billing-agent-table th,
.billing-agent-table td {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  line-height: var(--line-body);
}

.billing-agent-table thead th {
  color: var(--subtle);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.billing-agent-table tbody th {
  font-weight: 700;
}

.billing-agent-tag {
  margin-left: var(--space-1);
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
}

.billing-agent-served {
  display: block;
  color: var(--subtle);
  font-size: var(--text-xs);
  font-weight: 500;
}

.billing-comp-main {
  display: grid;
  gap: var(--space-2);
}

.billing-comp-main h2 {
  margin: 0;
}

.billing-comp-main p:not(.eyebrow) {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: var(--line-body);
}

.billing-comp-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
}

.billing-comp-details div {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--border);
}

.billing-comp-details dt {
  color: var(--subtle);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.billing-comp-details dd {
  margin: 0;
  color: var(--text);
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: var(--line-tight);
}

.billing-comp-features {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.billing-comp-features li {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 5px 9px;
  color: var(--green);
  border: 1px solid rgba(126, 196, 154, 0.28);
  font-size: var(--text-sm);
  font-weight: 800;
}

.billing-plans,
.billing-history,
.billing-local-checkout {
  display: grid;
  gap: var(--space-4);
}

.billing-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border);
}

.billing-plan-main {
  display: grid;
  gap: var(--space-2);
}

.billing-plan-main p:not(.eyebrow) {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
}

.billing-plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.billing-trial-offer {
  display: grid;
  gap: var(--space-2);
}

.billing-trial-offer > strong {
  color: var(--text);
  font-size: var(--text-xl);
}

.billing-trial-offer details {
  color: var(--muted);
  font-size: var(--text-sm);
}

.billing-trial-offer summary {
  cursor: pointer;
  padding-block: var(--space-2);
}

.billing-plan-form .billing-checkout-terms {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.billing-plan-meta span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 8px;
  color: var(--green);
  border: 1px solid rgba(126, 196, 154, 0.28);
  font-size: var(--text-sm);
  font-weight: 800;
}

.billing-plan-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.billing-plan-form .button-primary {
  min-height: 44px;
}

.billing-plan-form--topups {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.billing-plan-form--topups form,
.billing-plan-form--topups .button-secondary {
  width: 100%;
}

.billing-plan-form--topups .settings-note {
  grid-column: 1 / -1;
}

/* Plan-ladder states: the account's live plan and the ?plan= intent from
   marketing/signup handoff. Left rail only — same tokens, no new palette. */
.billing-plan--current {
  border-left: 3px solid var(--border-strong);
  padding-left: var(--space-4);
}

.billing-plan--intended {
  border-left: 3px solid var(--green);
  padding-left: var(--space-4);
}

.billing-plan--intended .eyebrow {
  color: var(--green);
}

.billing-plan-meta .billing-plan-price {
  color: var(--text);
  border-color: var(--border-strong);
  font-size: var(--text-base);
}

.billing-plan-switch-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  max-width: 340px;
}

.billing-plan-form input[type="text"] {
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  color: var(--text);
  background: #090b0a;
  border: 1px solid var(--border-strong);
  font: inherit;
}

.billing-table {
  display: grid;
  border-top: 1px solid var(--border);
}

.billing-table-head,
.billing-table-row {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.1fr 1fr;
  gap: var(--space-3);
  align-items: center;
  min-height: 42px;
  border-bottom: 1px solid var(--border);
}

.billing-table-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.billing-table-action a {
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}

.billing-table-action a:hover {
  text-decoration: underline;
}

.settings-panel {
  padding: 0 0 0 clamp(18px, 3vw, 32px);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--border);
}

.auth-switch a {
  color: var(--coral);
}

.auth-switch {
  margin: 0;
  color: var(--text);
}

/* OAuth consent: what the assistant may do, and a caution for local apps. */
.oauth-consent-abilities {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.oauth-consent-abilities li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--text);
}

.oauth-consent-abilities li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
}

.oauth-consent-warning {
  padding: var(--space-3);
  border: 1px solid var(--amber);
  color: var(--text);
}

/* Founder campaign setup shares one calm visual grammar across account,
   verification, trial review, and scheduling. These selectors stay scoped to
   that journey so ordinary Billing and workspace surfaces keep their density. */
.founder-setup {
  width: min(100%, 900px);
  margin: var(--space-8) auto;
  padding: 0 var(--space-5) var(--space-8);
}

.founder-setup > h1 {
  max-width: 780px;
  margin-bottom: var(--space-4);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: var(--line-tight);
}

.founder-setup > .lede {
  max-width: 720px;
  margin-top: 0;
}

.founder-progress {
  margin-bottom: var(--space-6);
}

.founder-progress ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 500px;
  margin: 0;
  padding: 0;
  counter-reset: founder-step;
  list-style: none;
}

.founder-progress li {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  counter-increment: founder-step;
}

.founder-progress li::before {
  content: counter(founder-step);
  display: inline-grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 11px;
}

.founder-progress [aria-current] {
  color: var(--text);
}

.founder-progress [aria-current]::before {
  color: #16100e;
  background: var(--coral);
  border-color: #f7aca3;
}

.auth-page--founder .auth-copy {
  align-self: center;
}

.auth-page--founder .founder-progress {
  margin-bottom: var(--space-2);
}

.auth-page--founder .auth-plan-intent {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  color: var(--muted);
}

.auth-page--founder .auth-plan-intent strong {
  color: var(--green);
}

.founder-card {
  margin: var(--space-6) 0;
  padding: clamp(20px, 4vw, 30px);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(242, 238, 232, 0.035);
}

.founder-card h2,
.founder-card h3 {
  margin-top: 0;
}

.founder-card h2 {
  margin-bottom: var(--space-3);
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  line-height: 1.2;
}

.founder-card h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
}

.founder-card p {
  line-height: 1.65;
}

.founder-card > :last-child {
  margin-bottom: 0;
}

.founder-state-label,
.founder-appointment-time > span,
.founder-trial-clock > span,
.founder-deadline > span,
.founder-terms dt {
  color: var(--coral);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.founder-state-label {
  margin: 0 0 var(--space-2) !important;
}

.founder-email {
  overflow-wrap: anywhere;
}

.founder-terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: var(--space-5) 0;
  overflow: hidden;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.founder-terms div {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4);
  background: var(--surface);
}

.founder-terms dd {
  margin: 0;
  color: var(--text);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.4;
}

.founder-availability-preview {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: rgba(62, 200, 208, 0.045);
  border: 1px solid rgba(62, 200, 208, 0.22);
  border-radius: var(--radius-md);
}

.founder-availability-preview p {
  margin: 0 0 var(--space-3);
  color: var(--muted);
}

.founder-preview-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.founder-preview-times li {
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.founder-deadline,
.founder-appointment-time {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--surface);
  border-left: 3px solid var(--coral);
}

.founder-deadline strong,
.founder-appointment-time strong {
  color: var(--text);
  font-size: var(--text-md);
  line-height: 1.45;
}

.founder-appointment-time small {
  color: var(--muted);
  font-size: var(--text-sm);
}

.founder-appointment-time--muted {
  border-left-color: var(--border-strong);
}

.founder-trial-clock {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  max-width: 850px;
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.founder-trial-clock strong {
  overflow-wrap: anywhere;
}

.founder-trial-clock p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.founder-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.founder-actions form {
  margin: 0;
}

.founder-actions .button-primary,
.founder-actions .button-secondary,
.founder-actions .button-danger,
.founder-card > form > .button-primary,
.founder-card > form > .button-secondary,
.founder-card > .button-primary,
.founder-card > form > div > .button-primary,
.founder-card > form > div > .button-secondary {
  min-height: 42px;
}

.founder-actions--quiet {
  padding-top: var(--space-2);
}

.founder-actions--manage {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.founder-text-action {
  color: var(--text);
  font-weight: 700;
}

.founder-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.founder-fields label,
.founder-goal {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text);
  font-weight: 700;
}

.founder-fields small {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.45;
}

.founder-fields input,
.founder-fields select,
.founder-goal textarea {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 11px 12px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
}

.founder-current-time,
.founder-inline-status {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border-left: 3px solid var(--complement);
}

.founder-inline-status {
  border-left-color: var(--coral);
}

.founder-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: var(--space-3);
  min-width: 0;
  margin: var(--space-5) 0;
  padding: 0;
  border: 0;
}

.founder-slots legend {
  width: 100%;
  margin-bottom: var(--space-3);
  color: var(--text);
  font-weight: 700;
}

.founder-slots legend span {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 400;
}

.founder-slot {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.founder-slot:hover {
  border-color: var(--muted);
}

.founder-slot:has(input:checked) {
  background: rgba(242, 143, 132, 0.16);
  border-color: var(--coral);
  box-shadow: inset 0 0 0 1px var(--coral);
}

.founder-slot:has(input:focus-visible) {
  outline: 3px solid #ffb6a9;
  outline-offset: 3px;
}

.founder-slot input {
  margin: 0;
}

.founder-goal {
  margin-top: var(--space-5);
}

.founder-goal + .founder-note,
.founder-actions--manage + .founder-note,
.founder-card > form + .founder-note,
.founder-actions--quiet + .founder-note {
  margin-top: var(--space-3);
}

.founder-goal textarea {
  resize: vertical;
}

.founder-setup a:focus-visible,
.founder-setup input:focus-visible,
.founder-setup button:focus-visible,
.founder-setup select:focus-visible,
.founder-setup textarea:focus-visible {
  outline: 3px solid #ffb6a9;
  outline-offset: 3px;
}

.founder-slot input:focus-visible {
  outline: 0;
}

.founder-note {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.founder-status {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--coral);
}

.wide-action {
  width: 100%;
}

.progress {
  height: 8px;
  background: #090b0a;
  border: 1px solid var(--border);
}

.progress span {
  display: block;
  height: 100%;
  background: var(--coral);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 9px;
  color: var(--green);
  background: rgba(126, 196, 154, 0.08);
  border: 1px solid rgba(126, 196, 154, 0.35);
  font-size: 12px;
  font-weight: 800;
}

.chip small {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .auth-page {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: auto;
  }

  .settings-page {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: auto;
  }

  .connect-hero,
  .connect-section-heading,
  .connect-provider-grid,
  .connect-client-grid,
  .connect-access-list {
    grid-template-columns: 1fr;
  }

  .connect-request-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .settings-page-compact {
    width: min(100%, calc(100vw - 28px));
  }

  .settings-stack-plain {
    gap: var(--space-6);
  }

  .settings-provider-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    align-items: start;
    min-height: 0;
    padding: 12px 0;
  }

  .settings-provider-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .settings-subheading-row {
    align-items: start;
    flex-direction: column;
    gap: var(--space-1);
  }

  .settings-row-button {
    min-width: 0;
    width: 100%;
  }

  .settings-provider-actions .button-primary,
  .settings-provider-actions .button-secondary,
  .settings-target-actions .button-primary,
  .settings-target-actions .button-secondary {
    flex: 1 1 0;
  }

  .settings-target-form-compact,
  .settings-row-field,
  .settings-check-row,
  .settings-kv-row,
  .settings-kv-row-action {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .settings-form-footer {
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .app-chrome {
    align-items: center;
    flex-direction: row;
    height: 40px;
    min-height: 40px;
    padding: 0 8px;
  }

  .flash-stack {
    top: auto;
    right: 16px;
    right: max(16px, env(safe-area-inset-right));
    bottom: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 16px;
    left: max(16px, env(safe-area-inset-left));
    max-width: none;
  }

  h1 {
    font-size: 38px;
  }

  .top-nav {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
    flex-wrap: nowrap;
    overflow: visible;
  }

  .identity-trigger {
    max-width: min(154px, 42vw);
  }

  .identity-menu {
    margin-left: 0;
  }

  .identity-popover {
    right: 0;
  }

  .auth-page {
    padding: var(--space-6) var(--space-4);
    padding-inline: max(var(--space-4), env(safe-area-inset-left)) max(var(--space-4), env(safe-area-inset-right));
  }

  .auth-panel {
    padding: var(--space-5);
  }

  .auth-page--founder {
    gap: var(--space-6);
    padding-top: var(--space-5);
  }

  .founder-setup {
    margin: var(--space-6) auto;
    padding-inline: var(--space-4);
  }

  .founder-progress li {
    font-size: 11px;
  }

  .founder-card {
    margin: var(--space-5) 0;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }

  .founder-terms,
  .founder-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .founder-preview-times,
  .founder-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .founder-preview-times li {
    padding-inline: var(--space-2);
    font-size: 11px;
  }

  .founder-trial-clock {
    grid-template-columns: minmax(0, 1fr);
  }

  .founder-trial-clock p {
    grid-column: auto;
  }

  .founder-actions--manage .button-secondary,
  .founder-actions--manage form,
  .founder-actions--manage .button-danger {
    width: 100%;
  }

  .settings-page {
    width: min(100%, calc(100vw - 28px));
    padding: 0 0 var(--space-7);
  }

  .connect-page {
    width: min(100%, calc(100vw - 28px));
    gap: var(--space-5);
    padding-top: var(--space-6);
  }

  .connect-hero h1 {
    font-size: 34px;
  }

  .connect-hero {
    gap: var(--space-4);
  }

  .connect-section-heading h2 {
    font-size: var(--text-2xl);
  }

  .connect-provider-row {
    grid-template-columns: 1fr;
  }

  .connect-provider-title {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .connect-provider-actions {
    grid-auto-flow: row;
    justify-content: stretch;
  }

  .connect-url-box,
  .connect-upload-row {
    grid-template-columns: 1fr;
  }

  .connect-provider-actions .button-secondary,
  .connect-provider-actions .button-primary {
    width: 100%;
  }

  .connect-copy-button {
    width: 100%;
  }

  .settings-target-form,
  .settings-channel-row {
    grid-template-columns: 1fr;
  }

  .billing-summary,
  .billing-comp-grant,
  .billing-plan,
  .billing-table-head,
  .billing-table-row {
    grid-template-columns: 1fr;
  }

  /* .billing-summary flows by column at desktop width; stacking it needs the
     flow reset too, or grid-template-columns alone leaves the cells side by
     side on a phone. */
  .billing-summary {
    grid-auto-flow: row;
  }

  .billing-summary div {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    min-height: 64px;
    padding: var(--space-3) 0;
  }

  .billing-summary div:last-child {
    border-bottom: 0;
  }

  .billing-comp-grant {
    gap: var(--space-4);
  }

  .billing-comp-details {
    grid-template-columns: 1fr 1fr;
  }

  .billing-plan-form {
    grid-template-columns: 1fr;
  }

  .billing-plan-form .button-primary {
    min-height: 52px;
    width: 100%;
  }
}

/* JUDGMENT: .bc-stage retired — replaced by .bc-pane-transcript (above) in
   the three-pane shell. Keeping the legacy ERB selectors intact, only the
   SPA workspace was reshaped. */

#selected-moment {
  scroll-margin-top: 118px;
}

@keyframes bc-indeterminate {
  0% {
    transform: translateX(-110%);
  }

  100% {
    transform: translateX(260%);
  }
}

/*
 * Tablet / smaller-desktop fallback. Below ~1100px we can't hold four
 * columns at the design heuristic widths — collapse to a single column
 * stack. Mobile order per design-concept: media sticky-top → transcript →
 * moments drawer → library. Command box would land at bottom; that section
 * is being built by a separate sub-agent.
 */

@media (max-width: 640px) {

  

  

  

  #selected-moment {
    scroll-margin-top: 166px;
  }

  

  

  

  

  

  

  

}

/* Speaker profile memory. */
.speaker-profile-page {
  display: grid;
  gap: var(--space-5);
  width: min(1120px, calc(100vw - 28px));
  margin: 0 auto;
  padding: var(--space-5) 0 var(--space-7);
}

.speaker-profile-back a {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 4px 8px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.speaker-profile-back a:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.speaker-profile-hero {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.speaker-profile-avatar {
  display: grid;
  overflow: hidden;
  place-items: center;
  color: var(--text);
  background: rgba(190, 205, 216, 0.07);
  border: 1px solid rgba(190, 205, 216, 0.22);
  border-radius: 100%;
  font-weight: 800;
}

.speaker-profile-avatar > * {
  grid-area: 1 / 1;
}

.speaker-profile-avatar {
  width: 112px;
  height: 112px;
  font-size: 34px;
}

.speaker-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface);
  z-index: 1;
}

.speaker-profile-heading {
  min-width: 0;
}

.speaker-profile-heading h1 {
  margin: 2px 0 6px;
  font-size: var(--text-3xl);
  line-height: var(--line-tight);
}

.speaker-profile-heading p:not(.eyebrow) {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-ui);
}

.speaker-profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.speaker-profile-badges span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 2px 8px;
  color: var(--muted);
  border: 1px solid rgba(190, 205, 216, 0.18);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

.speaker-profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.speaker-profile-stat {
  display: grid;
  gap: var(--space-1);
  min-height: 86px;
  align-content: center;
  padding: var(--space-3);
  background: rgba(190, 205, 216, 0.035);
  border: 1px solid rgba(190, 205, 216, 0.14);
  border-radius: var(--radius-sm);
}

.speaker-profile-stat span {
  color: var(--subtle);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.speaker-profile-stat strong {
  color: var(--text);
  font-size: var(--text-xl);
  line-height: var(--line-tight);
}

.speaker-profile-recordings {
  display: grid;
  gap: var(--space-3);
}

.speaker-profile-recordings > header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
  justify-content: space-between;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.speaker-profile-recordings h2 {
  margin: 2px 0 0;
  font-size: var(--text-xl);
}

.speaker-profile-recordings > header > span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.speaker-profile-recording-list {
  display: grid;
  gap: var(--space-2);
}

.speaker-profile-recording {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.6fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid rgba(190, 205, 216, 0.13);
  border-radius: var(--radius-sm);
}

.speaker-profile-recording > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.speaker-profile-recording a {
  color: var(--text);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.speaker-profile-recording a:hover {
  color: var(--coral);
}

.speaker-profile-recording span {
  overflow: hidden;
  color: var(--subtle);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speaker-profile-recording dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
}

.speaker-profile-recording dl div {
  min-width: 0;
}

.speaker-profile-recording dt {
  color: var(--subtle);
  font-size: var(--text-xs);
}

.speaker-profile-recording dd {
  margin: 1px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speaker-profile-empty {
  display: grid;
  min-height: 120px;
  place-items: center;
  color: var(--muted);
  border: 1px solid var(--border);
}

.projects-page {
  width: 100%;
  margin: 0 auto;
  padding: 0 24px var(--space-8);
  overflow-x: clip;
}

.projects-index-page {
  padding-top: 20px;
}

.projects-page.workspace-composite-page {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-inline: 0;
  padding-bottom: 0;
}

/* The two index shelves: "Your projects" / "Shared with you" */
.projects-shelf-heading {
  margin: var(--space-6) 0 var(--space-2);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.projects-shared-shelf {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.project-studio-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px 16px 16px;
}
.project-studio-entry p { margin: 0; color: var(--muted); font-size: 14px; }
.project-studio-entry p.project-studio-status { color: var(--text); font-weight: 600; }
.project-studio-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.project-studio-action, .project-request-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--accent, #f28f84);
  color: #251916;
  font-weight: 600;
  text-decoration: none;
}
.project-studio-action-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
.project-studio-action:hover, .project-request-action:hover { filter: brightness(1.08); }
.project-studio-action:focus-visible, .project-request-action:focus-visible { outline: 3px solid var(--accent, #f28f84); outline-offset: 3px; }
.project-tabs-shell {
  position: sticky;
  top: var(--app-shell-height);
  z-index: 40;
  display: flex;
  align-items: end;
  background: rgba(9, 10, 9, 0.94);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

body.super-admin-switched:not(.workspace-shell-page) .project-tabs-shell {
  top: calc(var(--app-shell-height) + var(--super-admin-banner-height));
}

.project-tabs {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: end;
  justify-content: flex-start;
  gap: var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
}

.project-tabs::-webkit-scrollbar {
  display: none;
}

.project-tab {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4);
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font: inherit;
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
}

.project-tab:hover {
  color: var(--text);
  background: rgba(190, 205, 216, 0.035);
}

.project-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--coral);
}

.project-tab:focus-visible {
  outline: 1px solid var(--coral);
  outline-offset: -4px;
}

.project-tab-more {
  position: relative;
  display: none;
  flex: 0 0 auto;
}

.project-tab-more-button {
  min-width: 64px;
  min-height: 44px;
  padding: 0 10px;
  color: var(--muted);
  background: rgba(9, 10, 9, 0.98);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font: inherit;
  cursor: pointer;
}

.project-tab-more-button:hover,
.project-tab-more-button.is-active {
  color: var(--text);
}

.project-tab-more-button.is-active {
  border-bottom-color: var(--coral);
}

.project-tab-more-button:focus-visible {
  outline: 1px solid var(--coral);
  outline-offset: -4px;
}

.project-tab-more-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 2;
  display: grid;
  min-width: 156px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
}

.project-tab-more-menu[hidden] {
  display: none;
}

.project-tab-more-menu button {
  min-height: 44px;
  padding: 0 12px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.project-tab-more-menu button:hover,
.project-tab-more-menu button:focus-visible {
  background: rgba(190, 205, 216, 0.08);
}

.project-tab-more-menu button:focus-visible {
  outline: 1px solid var(--coral);
  outline-offset: -3px;
}

.tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-tabs-shell ~ [role="tabpanel"][data-view] {
  margin-top: var(--space-4);
}

@media (max-width: 560px) {
  .app-page-header {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-4) 0 var(--space-3);
  }

  .app-chrome {
    grid-template-columns: minmax(0, calc(100vw - 14px));
  }

  .app-page-title h1 {
    font-size: var(--text-3xl);
  }

  .app-page-meta {
    font-size: var(--text-base);
  }

  .app-page-actions {
    justify-content: flex-start;
    gap: 7px;
  }

  .app-page-header .app-page-actions {
    padding-top: 0;
  }

  .project-page-header .app-page-title {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-page-actions bitterclip-upload-link-share {
    max-width: 100%;
  }

  .projects-page {
    box-sizing: border-box;
    width: min(100%, calc(100vw - 14px));
    margin: 0 auto;
    padding: 0 0 var(--space-7);
  }

  .projects-page.workspace-composite-page {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-bottom: 0;
  }

  .upload-ai-strip,
  .settings-ai-guide {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    align-items: start;
  }

  .upload-ai-strip .button-secondary,
  .settings-ai-guide .button-secondary {
    width: 100%;
  }

  .project-tabs-shell { top: var(--app-shell-height); }

  .project-tab {
    min-height: 44px;
    padding: 0 10px;
  }

  .project-tab-overflow {
    display: none;
  }

  .project-tab-more {
    display: block;
  }

}

@media (max-width: 860px) {
  .speaker-profile-page {
    width: min(100vw - 24px, 100%);
  }

  .speaker-profile-hero,
  .speaker-profile-recording {
    grid-template-columns: 1fr;
  }

  .speaker-profile-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .speaker-profile-recording dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reference-docs {
    padding: var(--space-6) var(--space-4);
  }

  .reference-grid,
  .operation-columns {
    grid-template-columns: 1fr;
  }
}

/* Mobile chrome keeps navigation resilient under long names, localization, and
   reduced effective CSS width from browser text/page scaling. Keep this final
   so legacy mobile page rules cannot restore the old 40px text-heavy header. */
/* The editor's Lit breadcrumb and the Rails account control share one visual
   shell. The Rails header contributes only the account affordance; the editor
   paints the location/actions beneath it and reserves the same 52px slot. */
body.workspace-shell-page .app-chrome {
  pointer-events: none;
  background: transparent;
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.workspace-shell-page .brand-lockup,
body.workspace-shell-page .support-trigger,
body.workspace-shell-page .notifications-menu {
  display: none;
}

body.workspace-shell-page .identity-unread-dot:not([hidden]) {
  display: block;
}

body.workspace-shell-page .top-nav {
  grid-column: 2;
  width: 88px;
  pointer-events: auto;
}

body.workspace-shell-page .identity-menu,
body.workspace-shell-page .identity-trigger {
  width: 52px;
  max-width: 52px;
}

body.workspace-shell-page .identity-trigger {
  justify-content: center;
  padding: 0;
  background: color-mix(in srgb, var(--bg) 95%, var(--surface));
}

body.workspace-shell-page .identity-trigger::before {
  top: 0;
  bottom: 0;
  background: var(--border);
}

body.workspace-shell-page .identity-trigger:hover,
body.workspace-shell-page .identity-menu[open] .identity-trigger {
  background: color-mix(in srgb, var(--text) 7%, var(--bg));
}

body.workspace-shell-page .identity-trigger:hover::before,
body.workspace-shell-page .identity-menu[open] .identity-trigger::before {
  background: var(--border-strong);
}

body.workspace-shell-page .identity-avatar {
  display: grid;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
}

body.workspace-shell-page .identity-name,
body.workspace-shell-page .identity-caret {
  display: none;
}

body.workspace-shell-page .projects-page.workspace-composite-page {
  display: grid;
  grid-template: minmax(100dvh, auto) / minmax(0, 1fr);
  margin-top: calc(-1 * var(--app-shell-height));
  background: var(--bg);
}

body.workspace-shell-page .projects-page.workspace-composite-page > bitterclip-workspace,
body.workspace-shell-page .projects-page.workspace-composite-page > .workspace-open-fallback {
  grid-area: 1 / 1;
}

body.workspace-shell-page bitterclip-workspace {
  min-width: 0;
  min-height: 100dvh;
  --bc-context-account-space: 88px;
  --bc-context-banner-space: 0px;
}

.workspace-open-fallback {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: var(--app-shell-height) minmax(260px, 42dvh) auto 1fr;
  min-width: 0;
  min-height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  color: var(--text);
  background: var(--bg);
}

.workspace-open-fallback-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--border);
}

.workspace-open-fallback-back {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--muted);
  font-size: 30px;
  line-height: 1;
}

.workspace-open-fallback-heading {
  min-width: 0;
}

.workspace-open-fallback-heading strong,
.workspace-open-fallback-project {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-open-fallback-heading strong {
  font-size: 16px;
  font-weight: 650;
}

.workspace-open-fallback-project {
  margin-bottom: 2px;
  color: var(--muted);
  font: 700 10px/1.1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.workspace-open-fallback-account {
  width: 30px;
  height: 30px;
  margin: auto;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-2);
}

.workspace-open-fallback-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(220px, 0.95fr);
  min-height: 0;
  border-bottom: 1px solid var(--border);
  background: #050504;
}

.workspace-open-fallback-player {
  width: min(58%, 420px);
  height: min(82%, 340px);
  place-self: center;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 5px;
  background: linear-gradient(145deg, var(--surface-2), #090807 70%);
}

.workspace-open-fallback-copy {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 24px 24px 0;
  border-left: 1px solid var(--border);
}

.workspace-open-fallback-copy span {
  width: 88%;
  height: 9px;
  border-radius: 999px;
  background: var(--surface-2);
}

.workspace-open-fallback-copy span:nth-child(2) {
  width: 74%;
}

.workspace-open-fallback-copy span:nth-child(3) {
  width: 46%;
}

.workspace-open-fallback-timeline {
  display: grid;
  gap: 12px;
  padding: 18px 20px 22px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 35%, var(--bg));
}

.workspace-open-fallback-ruler,
.workspace-open-fallback-track {
  display: block;
  border-radius: 3px;
  background: var(--surface-2);
}

.workspace-open-fallback-ruler {
  width: 100%;
  height: 5px;
}

.workspace-open-fallback-track {
  width: 100%;
  height: 52px;
  border: 1px solid var(--border);
}

.workspace-open-fallback-track-short {
  width: 68%;
  height: 22px;
}

.workspace-open-fallback-message {
  align-self: start;
  justify-self: center;
  margin: 22px;
  color: var(--muted);
  font-size: 13px;
}

.workspace-open-fallback[data-state="failed"] .workspace-open-fallback-message {
  color: var(--text);
}

.workspace-open-status {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .workspace-open-fallback {
    grid-template-rows: var(--app-shell-height) minmax(230px, 38dvh) auto 1fr;
  }

  .workspace-open-fallback-stage {
    grid-template-columns: 1fr;
  }

  .workspace-open-fallback-player {
    width: min(72%, 360px);
    height: 78%;
  }

  .workspace-open-fallback-copy {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .workspace-open-fallback-player,
  .workspace-open-fallback-copy span,
  .workspace-open-fallback-ruler,
  .workspace-open-fallback-track {
    background-image: linear-gradient(
      100deg,
      transparent 20%,
      color-mix(in srgb, var(--text) 5%, transparent) 44%,
      transparent 68%
    );
    background-size: 220% 100%;
    animation: workspace-open-sheen 1.8s ease-in-out infinite;
  }
}

.workspace-open-fallback[data-state="failed"] .workspace-open-fallback-player,
.workspace-open-fallback[data-state="failed"] .workspace-open-fallback-copy span,
.workspace-open-fallback[data-state="failed"] .workspace-open-fallback-ruler,
.workspace-open-fallback[data-state="failed"] .workspace-open-fallback-track {
  animation: none;
  background-image: none;
}

@keyframes workspace-open-sheen {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* Support-mode keeps the same unified editor bar. Its account banner occupies
   a deliberate second row instead of covering the location or clip shelf. */
body.workspace-shell-page.super-admin-switched {
  --workspace-shell-banner-height: var(--super-admin-banner-height);
}

body.workspace-shell-page.super-admin-switched .projects-page.workspace-composite-page {
  margin-top: calc(-1 * var(--app-shell-height) - var(--workspace-shell-banner-height));
}

body.workspace-shell-page.super-admin-switched bitterclip-workspace {
  --bc-context-banner-space: var(--workspace-shell-banner-height);
}

body.workspace-shell-page .super-admin-banner {
  height: var(--workspace-shell-banner-height, 38px);
  min-height: var(--workspace-shell-banner-height, 38px);
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  white-space: nowrap;
}

body.workspace-shell-page .super-admin-banner > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.workspace-shell-page .super-admin-banner-button {
  min-height: 28px;
}

/* Editor detail sheets are modal work surfaces with their own close control.
   Retire the account affordance while one is open so the two controls never
   overlap or compete for focus at narrow widths. */
body.workspace-shell-page.workspace-editor-sheet-open .top-nav {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 560px) {
  .app-chrome,
  .brand-lockup,
  .top-nav,
  .identity-menu,
  .identity-trigger {
    height: var(--app-shell-height);
    min-height: var(--app-shell-height);
  }

  .app-chrome {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0 4px;
    padding-inline: max(4px, env(safe-area-inset-left)) max(4px, env(safe-area-inset-right));
  }

  .app-chrome-context {
    min-width: 0;
    gap: 0;
  }

  .app-chrome-tools {
    gap: 0;
  }

  .app-chrome-location {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 4px;
  }

  .app-chrome-title {
    font-size: 15px;
  }

  .app-actions-menu > summary {
    min-width: 72px;
    padding-inline: 7px;
  }

  .support-trigger {
    width: 44px;
    height: 44px;
  }

  .identity-trigger {
    width: 44px;
    max-width: 44px;
    padding: 0;
    justify-content: center;
  }

  .identity-trigger::before {
    top: 6px;
    bottom: 6px;
  }

  .identity-avatar {
    display: grid;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
  }

  .identity-name,
  .identity-caret {
    display: none;
  }

  .identity-popover {
    top: var(--app-shell-height);
  }

  .project-tabs-shell {
    top: var(--app-shell-height);
  }

  .projects-page {
    width: 100%;
    padding-inline: 14px;
  }

  .projects-index-page {
    padding-top: 14px;
  }

}

@media (max-width: 280px) {
  .brand-word {
    display: none;
  }
}

/* Touch phones, gated on the pointer rather than on width.
   1. iOS Safari zooms the whole page whenever a focused text control renders
      below 16px, and it never zooms back out. Every light-DOM control gets the
      16px floor; the compact-scale containers are named so their own
      `font: inherit` cannot undercut it. Pointer-fine desktops keep 12-14px.
   2. Apple's 44px minimum for anything a finger has to hit.
   3. `touch-action: manipulation` drops the double-tap-to-zoom wait, and the
      default tap highlight is black — invisible on this dark shell. */
@media (pointer: coarse) {
  input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .auth-form input:not([type="hidden"]):not([type="submit"]):not([type="button"]),
  .settings-field input,
  .settings-field select,
  .settings-field textarea,
  .settings-target-form input[type="text"],
  .settings-row-field input,
  .settings-row-field select,
  .settings-row-field textarea,
  .billing-plan-form input[type="text"],
  .founder-fields input,
  .founder-fields select,
  .founder-goal textarea,
  .super-admin-search input {
    font-size: 16px;
  }

  /* `.top-nav a`, `.verify-email-resend` and the identity menu already carry
     44px everywhere; these are the ones that stop at 34px. */
  .button-primary,
  .button-secondary,
  .button-danger,
  summary {
    min-height: 44px;
  }

  a,
  button,
  summary,
  label,
  input,
  select,
  textarea,
  [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(242, 143, 132, 0.22);
  }

  /* Links inside a sentence gain a finger-sized hit box without moving the
     line they sit on: the negative margin gives back exactly the padding. */
  .auth-switch a,
  .billing-page .settings-note a {
    display: inline-block;
    padding-block: 12px;
    margin-block: -12px;
  }
}

/* Added to the Home Screen, BitterClip runs full-screen, and viewport-fit=cover
   then puts the page under the status bar. Growing the shell variable — rather
   than only the header — keeps every offset measured from it (the account
   popover, the Project tab strip, the editor shell) aligned. Ordinary Safari
   never matches this, and off a notched phone the inset is 0. */
@media (display-mode: standalone) {
  :root {
    --app-shell-height: calc(64px + env(safe-area-inset-top));
  }

  .app-chrome {
    padding-top: env(safe-area-inset-top);
  }
}