/* Typography (owner D11). Bundled, licence-checked fonts only; nothing loads from the network.
   - Inter 4 variable (SIL OFL 1.1, fonts/Inter-OFL.txt): body and, with the display optical size,
     headings. Resend uses ABC Favorit (Dinamo, commercial) for display; it is NOT licensed here and
     is not copied. The Inter Display heading treatment is the proposed alternative, pending owner approval.
   - Commit Mono (SIL OFL 1.1, fonts/CommitMono-OFL.txt): code, logs and the SQL editor.
   The @font-face rules live in fonts.css (generated by tools/build-fonts-css.cjs) with the fonts
   embedded as data: URIs, so no font file is fetched (the sandboxed preview blocks font requests). */
/* DASTER Major 8C design prototype. DESIGN ONLY: static HTML/CSS/JS, sample data, simulated actions.
   Token values come from ../03-visual-spec-and-tokens.md. Nothing here is imported by the application. */

:root {
  --canvas: #fafafa;
  --surface: #ffffff;
  --raised: #ffffff;
  --subtle: #f4f4f5;
  --selected: #e4e4e7;
  --text: #18181b;
  --muted: #52525b;
  --faint: #5f5f68;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --control-border: #71717a;
  --primary: #18181b;
  --primary-hover: #3f3f46;
  --on-primary: #ffffff;
  --focus: #1d4ed8;
  --success: #166534;
  --success-bg: #f0fdf4;
  --warning: #854d0e;
  --warning-bg: #fefce8;
  --error: #b91c1c;
  --error-bg: #fef2f2;
  --info: #1e40af;
  --info-bg: #eff6ff;
  --on-danger: #ffffff;
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --proto-bg: #18181b;
  --proto-fg: #fafafa;
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 4%), 0 4px 16px rgb(0 0 0 / 8%);
  --shadow-overlay: 0 16px 48px rgb(0 0 0 / 18%);
  --font-sans:
    'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'Commit Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --control-sm: 26px; /* Supabase "tiny": the default small button */
  --control-md: 34px; /* Supabase "small": inputs, dropdowns and normal buttons */
  --control-lg: 38px; /* Supabase "medium" */
  --sidebar-w: 248px;
  --topbar-h: 52px;
  --protobar-h: 32px;
  --inspector-w: 380px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --canvas: #09090b;
    --surface: #111113;
    --raised: #1c1c1f;
    --subtle: #18181b;
    --selected: #27272a;
    --text: #fafafa;
    --muted: #a1a1aa;
    --faint: #9a9aa3;
    --border: #27272a;
    --border-strong: #3f3f46;
    --control-border: #71717a;
    --primary: #fafafa;
    --primary-hover: #d4d4d8;
    --on-primary: #09090b;
    --focus: #60a5fa;
    --success: #4ade80;
    --success-bg: #0a2615;
    --warning: #facc15;
    --warning-bg: #2a2005;
    --error: #f87171;
    --error-bg: #2c0d0d;
    --info: #93c5fd;
    --info-bg: #0d1b33;
    --on-danger: #09090b;
    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --s4: #c98500;
    --proto-bg: #fafafa;
    --proto-fg: #09090b;
    --shadow-raised: none;
    --shadow-overlay: none;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --canvas: #09090b;
  --surface: #111113;
  --raised: #1c1c1f;
  --subtle: #18181b;
  --selected: #27272a;
  --text: #fafafa;
  --muted: #a1a1aa;
  --faint: #9a9aa3;
  --border: #27272a;
  --border-strong: #3f3f46;
  --control-border: #71717a;
  --primary: #fafafa;
  --primary-hover: #d4d4d8;
  --on-primary: #09090b;
  --focus: #60a5fa;
  --success: #4ade80;
  --success-bg: #0a2615;
  --warning: #facc15;
  --warning-bg: #2a2005;
  --error: #f87171;
  --error-bg: #2c0d0d;
  --info: #93c5fd;
  --info-bg: #0d1b33;
  --on-danger: #09090b;
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --s4: #c98500;
  --proto-bg: #fafafa;
  --proto-fg: #09090b;
  --shadow-raised: none;
  --shadow-overlay: none;
  color-scheme: dark;
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
body {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}
h1,
h2,
h3,
h4 {
  margin: 0;
  text-wrap: balance;
  font-family: var(--font-display);
}
/* Display optical size for headings (Inter 4 opsz axis), tighter tracking, medium weight. */
h1,
.page-head h1,
.stat .v {
  font-variation-settings: 'opsz' 32;
}
p {
  margin: 0;
}
a {
  color: inherit;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.mono {
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.num {
  font-variant-numeric: tabular-nums;
}
.muted {
  color: var(--muted);
}
.faint {
  color: var(--faint);
}
.small {
  font-size: 13px;
}
.xs {
  font-size: 12px;
  line-height: 16px;
}
.eyebrow {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.stack-sm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.row-between {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}
.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.grid-main-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.skip {
  position: absolute;
  left: 8px;
  top: -40px;
  background: var(--primary);
  color: var(--on-primary);
  padding: 8px 12px;
  border-radius: var(--r-md);
  z-index: 100;
}
.skip:focus {
  top: 8px;
}

/* The real product (js/live-api.js reached the DASTER API, html.is-live): no prototype notice, preview
   controls or development notes. While that check runs (html.live-check) neither the notice nor the app
   shows, so the real product never flashes sample data. Opened from a file, nothing changes. */
html.live-check,
html.is-live {
  --protobar-h: 0px;
}
html.live-check .protobar,
html.live-check #app,
html.is-live .protobar,
html.is-live .pb-panel,
html.is-live .dev-only {
  display: none !important;
}

/* Prototype bar: always says this is a design prototype */
.protobar {
  height: var(--protobar-h);
  background: var(--proto-bg);
  color: var(--proto-fg);
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  font-size: 12px;
  overflow: hidden;
}
.protobar strong {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  white-space: nowrap;
}
.protobar .pb-note {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  opacity: 0.85;
}
.protobar .pb-controls {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex: none;
}
.protobar select {
  background: transparent;
  color: var(--proto-fg);
  border: 1px solid currentColor;
  border-radius: var(--r-sm);
  height: 22px;
  font-size: 12px;
  padding: 0 4px;
}
.protobar select option {
  color: #18181b;
  background: #fff;
}
.protobar a {
  font-size: 12px;
  white-space: nowrap;
}
.protobar label {
  white-space: nowrap;
}

/* App shell */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: calc(100vh - var(--protobar-h));
}
.app.with-inspector {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--inspector-w);
}
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 12px 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: sticky;
  top: 0;
  height: calc(100vh - var(--protobar-h));
  overflow-y: auto;
}
.sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 12px;
  text-decoration: none;
}
.mark {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--primary);
  color: var(--on-primary);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 12px;
  flex: none;
}
.wordmark {
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 14px;
}
.sb-group {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
  padding: 12px 10px 3px;
}
.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  min-height: 30px;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  position: relative;
}
.sb-item svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.sb-item:hover {
  background: var(--subtle);
  color: var(--text);
}
.sb-item[aria-current='page'] {
  background: var(--selected);
  color: var(--text);
  font-weight: 500;
}
.sb-item[aria-current='page']::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--text);
}
.sb-item .hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--faint);
}
.sb-item .num-badge {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}
.sb-foot {
  margin-top: auto;
  padding: 16px 10px 4px;
  font-size: 12px;
  color: var(--faint);
  border-top: 1px solid var(--border);
}
@media (pointer: coarse) {
  .sb-item {
    min-height: 44px;
  }
}

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 20;
  min-width: 0;
}
.ctx {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.ctx-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
  height: 32px;
}
.ctx-btn span.lbl {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctx-btn:hover {
  background: var(--subtle);
}
.ctx-sep {
  color: var(--border-strong);
}
.env {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  color: var(--muted);
}
.env.prod {
  border-color: var(--warning);
  color: var(--warning);
  background: var(--warning-bg);
}
.tb-spacer {
  flex: 1;
  min-width: 0;
}
.search-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--faint);
  background: var(--canvas);
  min-width: 220px;
  cursor: pointer;
}
.kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--muted);
  margin-left: auto;
}
.btn.menu-btn {
  display: none;
}
.app {
  background: linear-gradient(
    to right,
    var(--surface) calc(var(--sidebar-w) - 1px),
    var(--border) calc(var(--sidebar-w) - 1px),
    var(--border) var(--sidebar-w),
    transparent var(--sidebar-w)
  );
}
td > .cell {
  min-width: 0;
}
.content {
  padding: 24px 32px 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  max-width: 1320px;
  width: 100%;
}

/* Inspector (AI) */
.inspector {
  border-left: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: calc(100vh - var(--protobar-h));
  min-width: 0;
}
.inspector-h {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--border);
}
.inspector-b {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inspector-f {
  border-top: 1px solid var(--border);
  padding: 12px;
}

/* Breadcrumbs & page header */
.crumbs {
  font-size: 13px;
  color: var(--faint);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.crumbs a {
  text-decoration: none;
  color: var(--muted);
}
.crumbs a:hover {
  text-decoration: underline;
}
.page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}
.page-head h1 {
  font-size: 26px;
  line-height: 32px;
  font-weight: 560;
  letter-spacing: -0.025em;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.page-head h1:focus {
  outline: none;
}
.page-head .desc {
  margin-top: 4px;
  color: var(--muted);
  max-width: 72ch;
}
.page-head .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}
.back:hover {
  color: var(--text);
}

/* Tabs */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  /* Only sideways: the active underline overlaps the border by 1px, which would add a vertical scrollbar. */
  overflow-y: hidden;
  scrollbar-width: thin;
  min-width: 0;
}
.tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  text-decoration: none;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  font-weight: 500;
}
.tabs a:hover {
  color: var(--text);
}
.tabs a[aria-current='page'] {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--text);
  background: var(--selected);
  border-radius: 6px 6px 0 0;
}
/* A header button for the page you're on (see markCurrentActions in shell.js). */
.page-head .actions .btn.is-current {
  background: var(--selected);
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
  color: var(--text);
  font-weight: 600;
}
.tabs .count {
  font-size: 11px;
  color: var(--faint);
  font-weight: 400;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--control-md);
  padding: 0 14px;
  border-radius: var(--r-md);
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color 80ms var(--ease),
    border-color 80ms var(--ease);
}
.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}
.btn-primary:hover {
  background: var(--primary-hover);
}
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  background: var(--subtle);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
}
.btn-ghost:hover {
  background: var(--subtle);
}
.btn-danger {
  background: var(--error);
  color: var(--on-danger);
}
.btn-danger-outline {
  background: var(--surface);
  color: var(--error);
  border-color: var(--border-strong);
}
.btn-danger-outline:hover {
  background: var(--error-bg);
}
.btn[disabled],
.btn[aria-disabled='true'] {
  background: var(--subtle);
  color: var(--faint);
  border-color: var(--border);
  cursor: not-allowed;
}
.btn-sm {
  height: var(--control-sm);
  padding: 0 10px;
  font-size: 12px;
  gap: 6px;
}
.btn-lg {
  height: var(--control-lg);
  padding: 0 18px;
}
.btn-icon {
  width: var(--control-md);
  padding: 0;
}
.btn-icon.btn-sm {
  width: var(--control-sm);
}
@media (pointer: coarse) {
  .btn,
  .btn-sm {
    min-height: 44px;
  }
  .btn-icon,
  .btn-icon.btn-sm {
    min-width: 44px;
  }
}
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 500;
}

/* Pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--subtle);
  color: var(--muted);
  border: 1px solid var(--border);
  line-height: 1;
}
.pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.pill.ok {
  background: var(--success-bg);
  color: var(--success);
  border-color: transparent;
}
.pill.prog {
  background: var(--info-bg);
  color: var(--info);
  border-color: transparent;
}
.pill.warn {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: transparent;
}
.pill.warn::before {
  border-radius: 0;
  width: 0;
  height: 0;
  background: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid currentColor;
}
.pill.err {
  background: var(--error-bg);
  color: var(--error);
  border-color: transparent;
}
.pill.err::before {
  border-radius: 1px;
}
.pill.off::before {
  background: transparent;
  border: 1.5px solid currentColor;
  width: 7px;
  height: 7px;
}
.pill.plain::before {
  display: none;
}
.tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.sim-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--control-border);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Cards & sections */
.card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  min-width: 0;
}
.card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.card-h h2,
.card-h h3 {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.card-b {
  padding: 16px 20px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-b.tight {
  padding-block: 4px;
}
.card-f {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.section-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.section-h h2 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.danger-zone {
  border-color: var(--error);
}
.danger-zone .card-h h2 {
  color: var(--error);
}
.dz-row {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.dz-row:last-child {
  border-bottom: 0;
}

/* Key values, stats, meters */
.kv {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0;
}
.kv dt {
  color: var(--muted);
}
.kv dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.stat {
  padding: 16px 20px;
  border-right: 1px solid var(--border);
  min-width: 0;
}
.stat:last-child {
  border-right: 0;
}
.stat .v {
  font-size: 20px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.stat .d {
  font-size: 12px;
  color: var(--muted);
}
.meter {
  height: 6px;
  border-radius: 999px;
  background: var(--subtle);
  overflow: hidden;
  border: 1px solid var(--border);
}
.meter > span {
  display: block;
  height: 100%;
  background: var(--text);
  border-radius: 999px;
}
.meter.warn > span {
  background: var(--warning);
}
.meter.err > span {
  background: var(--error);
}
.usage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 6px 16px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.usage-row:last-child {
  border-bottom: 0;
}

/* Copy field & code */
.copy {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 0 4px 0 10px;
  min-height: 36px;
  background: var(--subtle);
  min-width: 0;
}
.copy .val {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
pre.code {
  margin: 0;
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  overflow-x: auto;
  max-width: 100%;
  white-space: pre;
}
.code-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* Tables */
.tbl-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  max-width: 100%;
}
table {
  width: 100%;
  border-collapse: collapse;
}
caption {
  text-align: left;
}
th {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
  background: var(--subtle);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td {
  padding: 8px 12px;
  height: 44px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
td.nowrap {
  white-space: nowrap;
}
tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover td {
  background: var(--subtle);
}
td.r,
th.r {
  text-align: right;
}
td a.row-link {
  font-weight: 500;
  text-decoration: none;
}
td a.row-link:hover {
  text-decoration: underline;
}
.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.chip[aria-pressed='true'] {
  border-style: solid;
  color: var(--text);
  background: var(--selected);
}
.search-input {
  height: 32px;
  border: 1px solid var(--control-border);
  border-radius: var(--r-md);
  padding: 0 10px;
  background: var(--surface);
  min-width: 0;
  width: 220px;
  max-width: 100%;
}
.count-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}
.count-tile {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 10px 12px;
  text-align: left;
  background: var(--surface);
  cursor: pointer;
}
.count-tile[aria-pressed='true'] {
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}
.count-tile .n {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: block;
  margin-top: 2px;
}
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

/* Forms */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.field > label,
.field > .label {
  font-weight: 500;
  font-size: 13px;
}
.input,
select.input,
textarea.input {
  height: var(--control-md);
  border: 1px solid var(--control-border);
  border-radius: var(--r-md);
  padding: 0 12px;
  background: var(--surface);
  color: var(--text);
  width: 100%;
  min-width: 0;
}
textarea.input {
  height: auto;
  min-height: 88px;
  padding: 8px 12px;
  resize: vertical;
}
textarea.input.code-input {
  font-family: var(--font-mono);
  font-size: 13px;
}
.input[aria-invalid='true'] {
  border-color: var(--error);
}
.hint-t {
  font-size: 12px;
  color: var(--muted);
}
.err-t {
  font-size: 12px;
  color: var(--error);
  display: flex;
  gap: 6px;
  align-items: center;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.form-section {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.form-section:last-child {
  border-bottom: 0;
}
.form-section h3 {
  font-size: 14px;
  font-weight: 600;
}
.check-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.check-row input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--text);
  flex: none;
}
.choice-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.choice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 12px;
  cursor: pointer;
  background: var(--surface);
}
.choice:has(input:checked) {
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}
.choice input {
  margin-top: 3px;
  accent-color: var(--text);
  flex: none;
}
.switch {
  position: relative;
  display: inline-flex;
  width: 36px;
  height: 20px;
  flex: none;
}
.switch input {
  appearance: none;
  margin: 0;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--selected);
  border: 1px solid var(--border-strong);
  cursor: pointer;
}
.switch input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
  transition: transform 140ms var(--ease);
}
.switch input:checked {
  background: var(--text);
  border-color: var(--text);
}
.switch input:checked::after {
  transform: translateX(16px);
}
.setting {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.setting:last-child {
  border-bottom: 0;
}
.setting .t {
  font-weight: 500;
}
.seg {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 2px;
  background: var(--surface);
  flex-wrap: wrap;
}
.seg button {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 6px;
  color: var(--muted);
}
.seg button[aria-pressed='true'] {
  background: var(--selected);
  color: var(--text);
  font-weight: 500;
}

/* Banners, empty, states */
.banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--subtle);
  color: var(--text);
  border: 1px solid var(--border);
  min-width: 0;
}
.banner > svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.banner.warn {
  background: var(--warning-bg);
}
.banner.warn > svg {
  color: var(--warning);
}
.banner.err {
  background: var(--error-bg);
}
.banner.err > svg {
  color: var(--error);
}
.banner.info {
  background: var(--info-bg);
}
.banner.info > svg {
  color: var(--info);
}
.banner.ok {
  background: var(--success-bg);
}
.banner.ok > svg {
  color: var(--success);
}
.banner .grow {
  flex: 1;
  min-width: 0;
}
.empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 40px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--surface);
}
.empty .ico {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--canvas);
}
.empty .ico svg {
  width: 20px;
  height: 20px;
}
.empty h2 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.empty p {
  color: var(--muted);
  max-width: 46ch;
}
.skel {
  height: 12px;
  border-radius: 4px;
  background: var(--subtle);
}
.skel.block {
  height: 120px;
  border-radius: var(--r-md);
}
@media (prefers-reduced-motion: no-preference) {
  .skel {
    background: linear-gradient(90deg, var(--subtle), var(--selected), var(--subtle));
    background-size: 200% 100%;
    animation: shimmer 1.6s linear infinite;
  }
  @keyframes shimmer {
    from {
      background-position: 100% 0;
    }
    to {
      background-position: -100% 0;
    }
  }
}
.steps-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps-track li {
  border-top: 3px solid var(--border-strong);
  padding-top: 8px;
  font-size: 13px;
  color: var(--faint);
}
.steps-track li.done {
  border-color: var(--text);
  color: var(--text);
}
.steps-track li.now {
  border-color: var(--info);
  color: var(--info);
  font-weight: 500;
}
.steps-track li.fail {
  border-color: var(--error);
  color: var(--error);
  font-weight: 500;
}
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.checklist li:last-child {
  border-bottom: 0;
}
.check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  flex: none;
  display: grid;
  place-items: center;
}
.check.done {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.check.done svg {
  width: 11px;
  height: 11px;
}
.checklist .t {
  flex: 1;
  min-width: 0;
}
.checklist .done-t {
  color: var(--faint);
  text-decoration: line-through;
}
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 10px 0;
  align-items: start;
  border-bottom: 1px solid var(--border);
}
.timeline li:last-child {
  border-bottom: 0;
}
.timeline .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  margin: 6px 4px;
}
.timeline .dot.ok {
  background: var(--success);
}
.timeline .dot.err {
  background: var(--error);
}
.timeline .dot.prog {
  background: var(--info);
}
.timeline .dot.warn {
  background: var(--warning);
}
.timeline .when {
  font-size: 12px;
  color: var(--faint);
  white-space: nowrap;
}
.svc-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}
.svc-card .top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ico-box {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--muted);
  flex: none;
  background: var(--canvas);
}
.ico-box svg {
  width: 16px;
  height: 16px;
}
.svc-card .name {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.svc-card .go {
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  margin-top: auto;
}
.svc-card .go:hover {
  text-decoration: underline;
}
.diff-add {
  color: var(--success);
}
.diff-del {
  color: var(--error);
}
.diff-mod {
  color: var(--warning);
}
pre.code .add {
  color: var(--success);
  display: block;
}
pre.code .del {
  color: var(--error);
  display: block;
}

/* Logs */
.logs {
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 20px;
  max-height: 360px;
  overflow: auto;
  padding: 8px 0;
}
.logs .ln {
  display: grid;
  grid-template-columns: 84px 52px minmax(0, 1fr);
  gap: 8px;
  padding: 0 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.logs .ln.err {
  background: var(--error-bg);
}
.logs .ln.warn {
  background: var(--warning-bg);
}
.logs .lv {
  color: var(--faint);
}

/* Webmail */
.mail {
  display: grid;
  grid-template-columns: 180px minmax(0, 300px) minmax(0, 1fr);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  min-height: 520px;
  overflow: hidden;
}
.mail-folders {
  border-right: 1px solid var(--border);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mail-folders .sb-item::before {
  display: none;
}
.mail-list {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  min-width: 0;
}
.mail-item {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  min-width: 0;
}
.mail-item[aria-current='true'] {
  background: var(--selected);
}
.mail-item .from {
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.mail-item .subj,
.mail-item .prev {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.mail-item.unread .subj {
  font-weight: 600;
}
.mail-read {
  padding: 20px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Shared inbox layer on webmail */
.si-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--subtle);
}
.si-tags {
  display: block;
  margin-top: 4px;
  line-height: 22px;
}
.si-handle {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.si-thread,
.si-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.si-msg,
.si-notes li {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 10px;
  overflow-wrap: anywhere;
}
.si-msg.out {
  background: var(--subtle);
}
.si-notes li {
  border-style: dashed;
}
.si-log ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
/* Send with attachments: recipient preview (sample files, nothing loaded) */
.at-mail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.at-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.at-inline {
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: normal;
}
.at-img {
  width: 200px;
  max-width: 100%;
  aspect-ratio: 2 / 1;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--subtle);
  border: 1px solid var(--border);
  color: var(--faint);
}
.at-missing {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  color: var(--muted);
  white-space: normal;
}
.attach {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 8px 10px;
  flex-wrap: wrap;
}

/* Chat (AI) */
.chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.msg {
  max-width: 92%;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
}
.msg.user {
  align-self: flex-end;
  background: var(--selected);
  border-color: transparent;
}
.msg .who {
  font-size: 12px;
  color: var(--faint);
  margin-bottom: 4px;
}
.action-card {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
}
.action-card .ac-h {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.action-card .ac-b {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.action-card ol {
  margin: 0;
  padding-left: 18px;
}
.composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.composer textarea {
  flex: 1;
  min-height: 40px;
  max-height: 160px;
}

/* Charts */
.chart-box {
  position: relative;
}
.chart-box svg {
  display: block;
  width: 100%;
  height: auto;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13px;
  color: var(--muted);
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.tip {
  position: absolute;
  pointer-events: none;
  background: var(--raised);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-raised);
  border-radius: var(--r-md);
  padding: 8px 10px;
  font-size: 12px;
  min-width: 150px;
  z-index: 5;
}
.tip div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* Overlays: dialogs, drawers, menus, palette, toasts */
dialog {
  border: 0;
  padding: 0;
  color: var(--text);
  background: transparent;
  max-width: none;
  max-height: none;
}
dialog::backdrop {
  background: rgb(9 9 11 / 45%);
}
.dlg {
  width: min(520px, calc(100vw - 32px));
  background: var(--raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-overlay);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
}
.dlg-h {
  padding: 18px 20px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.dlg-h h2 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}
.dlg-b {
  padding: 12px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.dlg-f {
  padding: 12px 20px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.consequences {
  margin: 0;
  padding: 12px 14px 12px 32px;
  background: var(--error-bg);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
dialog.drawer {
  margin: 0 0 0 auto;
  height: 100%;
  max-height: 100vh;
}
.drw {
  width: min(520px, 100vw);
  height: 100vh;
  background: var(--raised);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow-overlay);
  display: flex;
  flex-direction: column;
}
.drw .dlg-b {
  flex: 1;
}
.drw .dlg-f {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
dialog.navdrawer {
  margin: 0 auto 0 0;
  height: 100%;
  max-height: 100vh;
}
.navdrw {
  width: min(300px, 86vw);
  height: 100vh;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 8px;
}
.menu {
  position: absolute;
  /* Above the phone AI sheet (60) and the call card (69–71), whose menus open from them; below toasts. */
  z-index: 80;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 16px));
  background: var(--raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-raised);
  padding: 4px;
}
.menu [role='menuitem'],
.menu [role='menuitemradio'] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  min-height: 36px;
}
.menu [role='menuitem']:hover,
.menu [role='menuitem']:focus,
.menu [role='menuitemradio']:hover,
.menu [role='menuitemradio']:focus {
  background: var(--subtle);
  outline: none;
}
.menu [aria-checked='true']::after {
  content: '✓';
  margin-left: auto;
  font-size: 12px;
}
/* Radio items (e.g. the AI conversation history) need the same fixed icon size: an unsized SVG grew to
   the row width and squeezed the title to one letter per line (owner screenshot, 2026-10-24). */
.menu [role='menuitem'] svg,
.menu [role='menuitemradio'] svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex: none;
}
.menu [aria-checked='true']::after {
  flex: none;
}
/* Long item titles wrap on word boundaries and stop after two lines; the full title is the tooltip. */
.menu .mi-t {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}
.menu .menu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.menu .menu-label {
  font-size: 11px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 10px 2px;
}
.palette {
  width: min(640px, calc(100vw - 32px));
  background: var(--raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
  margin-top: 10vh;
}
dialog.palette-dlg {
  margin: 0 auto auto;
}
.palette input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  background: transparent;
  font-size: 16px;
  outline: none;
}
.palette ul {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 50vh;
  overflow-y: auto;
}
.palette li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.palette li[aria-selected='true'] {
  background: var(--selected);
}
.palette li .grp {
  margin-left: auto;
  font-size: 12px;
  color: var(--faint);
}
.palette .p-f {
  border-top: 1px solid var(--border);
  padding: 8px 14px;
  font-size: 12px;
  color: var(--faint);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.toasts {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
  max-width: min(400px, calc(100vw - 32px));
}
.toast {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-raised);
  padding: 12px 14px;
}
.toast > svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.toast .t {
  font-weight: 500;
}

/* Responsive */
@media (max-width: 1279px) {
  .app.with-inspector {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  }
  .inspector {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(var(--inspector-w), 100vw);
    z-index: 60;
    height: 100vh;
    box-shadow: var(--shadow-overlay);
  }
}
@media (max-width: 1024px) {
  .app,
  .app.with-inspector {
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar {
    display: none;
  }
  .app {
    background: none;
  }
  .btn.menu-btn {
    display: inline-flex;
  }
  .grid-main-rail {
    grid-template-columns: minmax(0, 1fr);
  }
  .content {
    padding: 20px 20px 64px;
  }
  .mail {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  }
  .mail-folders {
    display: none;
  }
}
@media (max-width: 760px) {
  .grid-2,
  .grid-3,
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .form-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .search-btn {
    min-width: 0;
    width: 36px;
    padding: 0;
    justify-content: center;
  }
  .search-btn .lbl,
  .search-btn .kbd {
    display: none;
  }
  .ctx .hide-sm,
  .ctx-sep.hide-sm {
    display: none;
  }
  .tb-hide-sm {
    display: none !important;
  }
  .content {
    padding: 16px max(16px, env(safe-area-inset-left, 0px)) 64px
      max(16px, env(safe-area-inset-right, 0px));
  }
  .topbar {
    padding: 0 8px;
    gap: 4px;
  }
  .stat {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .mail {
    grid-template-columns: minmax(0, 1fr);
  }
  .mail.reading .mail-list {
    display: none;
  }
  .mail:not(.reading) .mail-read {
    display: none;
  }
  .mail-list {
    border-right: 0;
  }
  .usage-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .protobar .pb-note {
    display: none;
  }
  .protobar {
    height: auto;
    min-height: var(--protobar-h);
    flex-wrap: wrap;
    padding-block: 4px;
    gap: 6px;
  }
  .protobar .pb-controls {
    margin-left: 0;
    flex-wrap: wrap;
    /* Fill the row so the controls wrap instead of clipping the build label (audit: label clipped). */
    flex: 1 1 100%;
    min-width: 0;
  }
  .protobar select {
    max-width: 150px;
  }
  .kv {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 0;
  }
  .kv dd {
    margin-bottom: 8px;
  }
  .card-b,
  .card-h {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Tables become stacked rows on phones */
  table.stackable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  table.stackable,
  table.stackable tbody,
  table.stackable tr,
  table.stackable td {
    display: block;
    width: 100%;
  }
  table.stackable tr {
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
  }
  table.stackable tr:last-child {
    border-bottom: 0;
  }
  table.stackable td {
    border: 0;
    height: auto;
    padding: 3px 12px;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px;
    text-align: left;
  }
  table.stackable td.r {
    text-align: left;
  }
  table.stackable td::before {
    content: attr(data-label);
    color: var(--faint);
    font-size: 12px;
  }
  table.stackable td.no-label {
    grid-template-columns: minmax(0, 1fr);
  }
  table.stackable td.no-label::before {
    display: none;
  }
  .tbl-wrap:has(table.stackable) {
    overflow-x: visible;
  }
  dialog.drawer {
    margin: auto 0 0;
    height: auto;
    width: 100%;
  }
  .drw {
    width: 100vw;
    height: auto;
    max-height: 92vh;
    border-left: 0;
    border-top: 1px solid var(--border-strong);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== Owner-approved usability additions (2026-10-23): sidebar rail, collapsible groups, density, full-width pages ===== */
.sb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 0 8px;
}
.sb-top .sb-brand {
  padding: 4px 8px;
}
.sb-toggle {
  flex: none;
}
.sb-group-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
  padding: 12px 10px 4px;
  text-align: left;
  border-radius: 6px;
}
.sb-group-btn:hover {
  color: var(--text);
}
.sb-group-btn svg {
  width: 14px;
  height: 14px;
  transition: transform 140ms var(--ease);
}
.sb-group-btn[aria-expanded='false'] svg {
  transform: rotate(-90deg);
}
.sb-group-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sb-group-items.collapsed > .sb-item:not([aria-current='page']) {
  display: none;
}
.sb-sep {
  height: 1px;
  background: var(--border);
  margin: 8px 6px;
  display: none;
}
.sb-tip {
  position: fixed;
  z-index: 300;
  pointer-events: none;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: var(--shadow-raised);
}
@media (min-width: 1025px) {
  .app.sb-ready {
    transition: grid-template-columns 160ms var(--ease);
  }
  .app.sb-collapsed {
    --sidebar-w: 48px;
  }
  .app.sb-collapsed .sidebar:not(.sb-open) {
    padding-left: 6px;
    padding-right: 6px;
    overflow-x: hidden;
  }
  .app.sb-collapsed .sidebar:not(.sb-open) .sb-top {
    flex-direction: column;
    gap: 6px;
  }
  .app.sb-collapsed .sidebar:not(.sb-open) .sb-brand .wordmark,
  .app.sb-collapsed .sidebar:not(.sb-open) .sb-group-btn,
  .app.sb-collapsed .sidebar:not(.sb-open) .sb-foot,
  .app.sb-collapsed .sidebar:not(.sb-open) .sb-item .hint,
  .app.sb-collapsed .sidebar:not(.sb-open) .sb-item .num-badge {
    display: none;
  }
  .app.sb-collapsed .sidebar:not(.sb-open) .sb-item {
    justify-content: center;
    padding: 0;
    min-height: 36px;
  }
  .app.sb-collapsed .sidebar:not(.sb-open) .sb-item > span.lbl {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .app.sb-collapsed .sidebar:not(.sb-open) .sb-item[aria-current='page']::before {
    left: -6px;
  }
  .app.sb-collapsed .sidebar:not(.sb-open) .sb-group-items.collapsed > .sb-item {
    display: flex;
  }
  .app.sb-collapsed .sidebar:not(.sb-open) .sb-sep {
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app.sb-ready {
    transition: none;
  }
  .sb-group-btn svg {
    transition: none;
  }
}
/* Density: comfortable (default) or compact (developer preference). */
:root[data-density='compact'] td {
  height: 34px;
  padding: 4px 10px;
}
:root[data-density='compact'] th {
  padding: 6px 10px;
}
:root[data-density='compact'] .card-b {
  padding: 12px 16px;
  gap: 8px;
}
:root[data-density='compact'] .card-h {
  padding: 10px 16px;
}
:root[data-density='compact'] .content {
  gap: 16px;
}
/* Readability: slightly larger secondary text in tables and helper copy. */
th {
  font-size: 12.5px;
  color: var(--muted);
}
.hint-t,
.err-t {
  font-size: 12.5px;
}
/* Full-width workspace pages (SQL editor). */
.content.content-full {
  max-width: none;
  padding: 0;
  gap: 0;
}
.content.content-full > .crumbs {
  padding: 12px 20px 0;
}

/* ===== SQL editor workspace ===== */
.sqlw {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  height: calc(100vh - var(--protobar-h) - var(--topbar-h) - 33px);
  min-height: 520px;
  border-top: 1px solid var(--border);
}
.sqlw.no-schema {
  grid-template-columns: 260px minmax(0, 1fr);
}
.sqlw-side {
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.sqlw-schema {
  border-left: 1px solid var(--border);
  border-right: 0;
}
.sqlw-side-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 12px 12px 8px;
}
.sqlw-side-h h2 {
  font-size: 15px;
  font-weight: 600;
}
.sqlw-side-b {
  overflow-y: auto;
  padding: 0 8px 12px;
  flex: 1;
  min-height: 0;
}
.sqlw-sec {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
  padding: 12px 6px 4px;
}
.sqlw-q {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  min-height: 32px;
}
.sqlw-q:hover {
  background: var(--subtle);
}
.sqlw-q[aria-current='true'] {
  background: var(--selected);
  font-weight: 500;
}
.sqlw-q .t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sqlw-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--canvas);
}
.sqlw-tabs {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow-x: auto;
  min-height: 38px;
}
.sqlw-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 12px;
  border-right: 1px solid var(--border);
  white-space: nowrap;
  font-size: 13px;
  color: var(--muted);
}
.sqlw-tab.sel {
  background: var(--canvas);
  color: var(--text);
  font-weight: 500;
  box-shadow: inset 0 2px 0 var(--text);
}
.sqlw-tab > button.name {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 8px 0;
  color: inherit;
  font: inherit;
}
.sqlw-tab .dirty {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text);
}
.sqlw-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.sqlw-toolbar .grow {
  flex: 1;
}
.sqlw-ctx {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.sqlw-ctx select {
  height: 30px;
  border: 1px solid var(--control-border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 0 8px;
  font-size: 13px;
  max-width: 200px;
}
.sqlw-split {
  display: grid;
  grid-template-rows: var(--sql-split, 55%) 8px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
.sqlw-handle {
  cursor: row-resize;
  background: var(--border);
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
}
.sqlw-handle::after {
  content: '';
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: var(--faint);
}
.sqlw-handle:hover,
.sqlw-handle:focus-visible {
  background: var(--selected);
}
.sqled {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  background: var(--surface);
  min-height: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
}
.sqled-gutter {
  overflow: hidden;
  color: var(--faint);
  text-align: right;
  padding: 10px 8px 10px 0;
  user-select: none;
  border-right: 1px solid var(--border);
  background: var(--canvas);
}
.sqled-gutter div {
  height: 20px;
}
.sqled-gutter div.err {
  color: var(--error);
  font-weight: 600;
  background: var(--error-bg);
}
.sqled-code {
  position: relative;
  min-width: 0;
  overflow: hidden;
}
.sqled-hl,
.sqled-input {
  margin: 0;
  padding: 10px 12px;
  font: inherit;
  line-height: 20px;
  white-space: pre;
  tab-size: 2;
  letter-spacing: 0;
  border: 0;
}
.sqled-hl {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--text);
  overflow: hidden;
}
.sqled-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  resize: none;
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  outline: none;
  overflow: auto;
}
.sqled-input::selection {
  background: color-mix(in srgb, var(--focus) 30%, transparent);
  color: transparent;
}
.sqled-input:focus-visible {
  box-shadow: inset 0 0 0 2px var(--focus);
}
.tk-kw {
  color: var(--s1);
  font-weight: 600;
}
.tk-fn {
  color: var(--info);
}
.tk-str {
  color: var(--success);
}
.tk-num {
  color: var(--s2);
}
.tk-com {
  color: var(--faint);
  font-style: italic;
}
.tk-err {
  text-decoration: wavy underline var(--error);
}
.sqled-ac {
  position: absolute;
  z-index: 20;
  min-width: 220px;
  max-width: 320px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-raised);
  padding: 4px;
  font-family: var(--font-sans);
  font-size: 13px;
}
.sqled-ac [role='option'] {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.sqled-ac [aria-selected='true'] {
  background: var(--selected);
}
.sqled-ac .k {
  color: var(--faint);
  font-size: 12px;
}
.sqlw-results {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
}
.sqlw-res-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.sqlw-res-b {
  overflow: auto;
  flex: 1;
  min-height: 0;
}
.sqlw-res-b table {
  font-size: 13px;
}
.sqlw-res-b td,
.sqlw-res-b th {
  white-space: nowrap;
  height: 32px;
  padding: 4px 12px;
  font-family: var(--font-mono);
}
.sqlw-res-b th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-family: var(--font-sans);
}
.sqlw-err {
  margin: 12px;
  border: 1px solid var(--error);
  background: var(--error-bg);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sqlw-tree details > summary {
  cursor: pointer;
  padding: 5px 6px;
  border-radius: 6px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sqlw-tree details > summary::-webkit-details-marker {
  display: none;
}
.sqlw-tree details > summary::before {
  content: '▸';
  color: var(--faint);
  font-size: 11px;
  width: 10px;
}
.sqlw-tree details[open] > summary::before {
  content: '▾';
}
.sqlw-tree summary:hover {
  background: var(--subtle);
}
.sqlw-col {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 3px 6px 3px 26px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12.5px;
  text-align: left;
}
.sqlw-col:hover {
  background: var(--subtle);
}
.sqlw-col .ty {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 12px;
}
.sqlw-mobile-bar {
  display: none;
}
@media (max-width: 1024px) {
  .sqlw,
  .sqlw.no-schema {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }
  .sqlw-side {
    display: none;
  }
  .sqlw-mobile-bar {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-wrap: wrap;
  }
  .sqlw-split {
    grid-template-rows: 300px 8px minmax(260px, auto);
  }
  .content.content-full > .crumbs {
    padding: 12px 16px 0;
  }
}
.sqlw-drawer-body .sqlw-side {
  display: flex;
  border: 0;
}
/* Scroll containers must contain absolutely positioned screen-reader text (prevents phone overflow). */
.tabs,
.sqlw-tabs,
.tbl-wrap,
.sqlw-res-b,
.sqlw-side-b,
.logs {
  position: relative;
}
.sqlw-split {
  grid-template-columns: minmax(0, 1fr);
}
.sqlw-results,
.sqled {
  min-width: 0;
}
/* Phone and touch targets: buttons, chips, segmented controls and tabs reach 44px on narrow or
   coarse-pointer screens (owner usability item 8). */
@media (max-width: 760px), (pointer: coarse) {
  .btn,
  .btn-sm,
  .chip,
  .count-tile,
  .seg button,
  .tabs a {
    min-height: 44px;
  }
  .btn-icon,
  .btn-icon.btn-sm {
    min-width: 44px;
  }
}
.protobar .pb-build {
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
  opacity: 0.9;
}

/* Bare pages: welcome, account entry and onboarding render without the app shell (def.bare). */
.app.bare,
.app.bare.with-inspector {
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg);
}
.app.bare > .sidebar,
.app.bare .topbar,
.app.bare > .inspector {
  display: none;
}
.app.bare .content {
  padding: 0;
  max-width: none;
}

/* Page not found (js/not-found.js, owner-supplied 21st.dev animation): black, then white circles sweep
   in until the page is white, stick figures tumble across, then the message. The scene keeps its own
   colours in both themes; the buttons are the app's, drawn black and white on the white page. */
.nf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100svh - var(--protobar-h, 0px));
  min-height: 420px;
  overflow: hidden;
  background: #000;
  color: #000;
}
.nf-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.nf-cast {
  position: absolute;
  inset: 0 auto auto 0;
  width: 99%;
  height: 95%;
  pointer-events: none;
}
.nf-fig {
  position: absolute;
  width: 18%;
  height: 18%;
}
.nf-fig svg {
  display: block;
  width: 100%;
  height: 100%;
}
.nf-msg {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  text-align: center;
  opacity: 0;
  transition: opacity 500ms;
}
.nf-msg.is-in {
  opacity: 1;
}
.nf-kicker {
  margin: 0;
  font-size: 35px;
  font-weight: 600;
  line-height: 1.2;
}
.nf-code {
  margin: 4px 0;
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.nf-text {
  margin: 8px 0 0;
  max-width: 34em;
  font-size: 15px;
  line-height: 1.5;
}
.nf-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.nf .btn-primary {
  background: #000;
  border-color: #000;
  color: #fff;
}
.nf .btn-primary:hover {
  background: #27272a;
}
.nf .btn-secondary {
  background: #fff;
  border-color: #000;
  color: #000;
}
.nf .btn-secondary:hover {
  background: #f4f4f5;
}
@media (max-width: 640px) {
  .nf-kicker {
    font-size: 26px;
  }
  .nf-code {
    font-size: 64px;
  }
}

/* ---------- Visual polish pass (owner, 2026-10-23) ----------
   Evidence: Codex hosted screenshot of Domains (build fb4142761a26) and measurements in
   verification/visual-polish/before-measurements.json. References inspected through Mobbin MCP:
   Resend Add domain / sidebar (mobbin.com/screens/080f7d33-…, ca8f9ef0-…, b77307e6-…) and Supabase
   SQL/Table editor (fe760737-…, fafd08ad-…, e7c9e639-…); rows logged in mobbin-ledger-shell.csv.
   Cause found: icons are drawn on a 24-unit grid with stroke 1.5, so at 16px they render a 1.0px
   stroke (0.875px for the 14px chevrons): crisp at 2x, but lighter than the 14px text beside them.
   Token changes, before → after:
     sidebar row 30 → 34px · sidebar icon 16 → 18px · icon stroke 1.5 → 1.75 (1.31px rendered in the
     sidebar, 1.17px on 16px button icons) · group label 11px faint → 12px muted, weight 600 ·
     group chevron 14 → 16px · small controls (--control-sm, collapse toggle) 28 → 32px ·
     filter chips 28px dashed → 32px solid · secondary button border #d4d4d8 → --btn-border with a
     hairline shadow · disabled buttons: dashed border, no shadow (state readable without colour) ·
     phone context and search buttons ≥ 44px · sidebar focus ring drawn inside the row (no clipping).
   2026-10-28: the control scale now follows Supabase (tiny 26 / small 34 / medium 38), see the :root tokens
   near the top; phones keep 32px small controls and 44px touch targets below. */
:root {
  --sb-row: 34px;
  --icon-stroke: 1.75;
  --btn-border: #c4c4cc;
  --btn-shadow: 0 1px 0 rgb(0 0 0 / 5%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --btn-border: #52525b;
    --btn-shadow: 0 1px 0 rgb(0 0 0 / 40%);
  }
}
:root[data-theme='dark'] {
  --btn-border: #52525b;
  --btn-shadow: 0 1px 0 rgb(0 0 0 / 40%);
}
svg[viewBox='0 0 24 24'][stroke='currentColor'] {
  stroke-width: var(--icon-stroke);
}
.sb-item {
  min-height: var(--sb-row);
  gap: 12px;
}
.sb-item svg {
  width: 18px;
  height: 18px;
}
.sb-item[aria-current='page'] {
  font-weight: 500;
}
.sb-item:focus-visible,
.sb-group-btn:focus-visible {
  outline-offset: -2px;
}
.sb-group-btn {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
  padding: 14px 10px 6px;
}
.sb-group-btn svg {
  width: 16px;
  height: 16px;
}
.sb-toggle {
  width: 32px;
  height: 32px;
}
.btn-secondary,
.btn-danger-outline {
  border-color: var(--btn-border);
  box-shadow: var(--btn-shadow);
}
.btn[disabled],
.btn[aria-disabled='true'] {
  border-style: dashed;
  box-shadow: none;
}
.chip {
  height: 32px;
  border-style: solid;
  border-color: var(--btn-border);
}
@media (max-width: 760px), (pointer: coarse) {
  .ctx-btn,
  .search-btn {
    min-height: 44px;
  }
}

/* MongoDB query bar (owner screenshot bug 2026-10-23): input, Find and Reset share one control row at
   one height; helper and validation text sit below the row, so errors never move the buttons.
   Mobbin reference: Supabase query bar (c205911f, in mobbin-ledger-data.csv). */
.mgq-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'label .'
    'input btns'
    'hint hint'
    'err err';
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
}
.mgq-bar > .field {
  display: contents;
}
.mgq-bar label {
  grid-area: label;
}
.mgq-bar .input {
  grid-area: input;
  height: var(--control-md);
  min-width: 0;
}
.mgq-bar .mgq-btns {
  grid-area: btns;
  display: flex;
  gap: 6px;
}
.mgq-bar .hint-t {
  grid-area: hint;
}
.mgq-bar .err-t {
  grid-area: err;
}
@media (max-width: 520px) {
  .mgq-bar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'label' 'input' 'btns' 'hint' 'err';
  }
}

/* ===== Resend-derived visual refresh (owner-authorized 2026-10-23, after the 246b9ee73815 retest) =====
   Source: the owner's Resend design.md token extract (RESEND_OWNER_TOKENS.design.md). That source covers
   Resend's public marketing pages only, so this block adapts it to a dense dashboard; mapping, deviations
   and contrast results are recorded in ../VISUAL_REFRESH.md and verification/visual-refresh/.
   - Dark: Resend canvas #000, surface-card #0a0a0c, surface-elevated #101012, ink #fcfdff, mute #a1a4a5,
     ash #888e90, translucent white hairlines (.06 / .14), white primary CTA on black, accent blue links/focus.
   - Light (no Resend source): the same structure inverted on a cool off-white, ink #0a0a0c, hairlines in
     the source's on-light base rgb(0 0 51), darker accents chosen for WCAG AA on white.
   - Geometry: controls 8px, cards/tables/dialogs/code windows 12px, depth from luminance and hairlines;
     shadows remain only on floating overlays in light mode.
   - Type: Inter for UI (14px body, 24px/500 page titles), Commit Mono 13px for code; Instrument Serif
     (OFL) stands in for Domaine Display on the welcome hero only. Nothing here changes behaviour. */
:root {
  --canvas: #f8f9fb;
  --surface: #ffffff;
  --raised: #ffffff;
  --subtle: #f2f4f7;
  --selected: #e7eaee;
  --text: #0a0a0c;
  --muted: #50555b;
  --faint: #5d6268;
  --border: rgb(0 0 51 / 8%);
  --border-strong: rgb(0 0 51 / 14%);
  --control-border: #767b82;
  --primary: #000000;
  --primary-hover: #26282c;
  --primary-pressed: #3a3d42;
  --on-primary: #fcfdff;
  --focus: #0a64c8;
  --link: #0a64c8;
  --success: #0a7a46;
  --success-bg: #ebf9f1;
  --warning: #855000;
  --warning-bg: #fff6e0;
  --error: #c8002a;
  --error-bg: #fff0f2;
  --info: #0a64c8;
  --info-bg: #edf5ff;
  --on-danger: #ffffff;
  --btn-border: rgb(0 0 51 / 20%);
  --btn-shadow: none;
  --backdrop: rgb(0 0 25 / 40%);
  --shadow-raised: 0 8px 24px rgb(0 0 51 / 8%);
  --shadow-overlay: 0 24px 64px rgb(0 0 51 / 16%);
  --hero-wash-a: rgb(0 117 255 / 7%);
  --hero-wash-b: rgb(255 89 0 / 5%);
  --font-editorial:
    'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --r-card: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --canvas: #000000;
    --surface: #0a0a0c;
    --raised: #101012;
    --subtle: #141417;
    --selected: #1c1d20;
    --text: #fcfdff;
    --muted: #a1a4a5;
    --faint: #888e90;
    --border: rgb(255 255 255 / 6%);
    --border-strong: rgb(255 255 255 / 14%);
    --control-border: #6c7175;
    --primary: #fcfdff;
    --primary-hover: #dcdee0;
    --primary-pressed: #f1f7fe;
    --on-primary: #000000;
    --focus: #3b9eff;
    --link: #3b9eff;
    --success: #11ff99;
    --success-bg: rgb(34 255 153 / 10%);
    --warning: #ffc53d;
    --warning-bg: rgb(255 197 61 / 10%);
    --error: #ff2047;
    --error-bg: rgb(255 32 71 / 12%);
    --info: #3b9eff;
    --info-bg: rgb(0 117 255 / 14%);
    --on-danger: #000000;
    --btn-border: rgb(255 255 255 / 14%);
    --btn-shadow: none;
    --backdrop: rgb(0 0 0 / 70%);
    --shadow-raised: none;
    --shadow-overlay: none;
    --hero-wash-a: rgb(0 117 255 / 16%);
    --hero-wash-b: rgb(255 89 0 / 10%);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --canvas: #000000;
  --surface: #0a0a0c;
  --raised: #101012;
  --subtle: #141417;
  --selected: #1c1d20;
  --text: #fcfdff;
  --muted: #a1a4a5;
  --faint: #888e90;
  --border: rgb(255 255 255 / 6%);
  --border-strong: rgb(255 255 255 / 14%);
  --control-border: #6c7175;
  --primary: #fcfdff;
  --primary-hover: #dcdee0;
  --primary-pressed: #f1f7fe;
  --on-primary: #000000;
  --focus: #3b9eff;
  --link: #3b9eff;
  --success: #11ff99;
  --success-bg: rgb(34 255 153 / 10%);
  --warning: #ffc53d;
  --warning-bg: rgb(255 197 61 / 10%);
  --error: #ff2047;
  --error-bg: rgb(255 32 71 / 12%);
  --info: #3b9eff;
  --info-bg: rgb(0 117 255 / 14%);
  --on-danger: #000000;
  --btn-border: rgb(255 255 255 / 14%);
  --btn-shadow: none;
  --backdrop: rgb(0 0 0 / 70%);
  --shadow-raised: none;
  --shadow-overlay: none;
  --hero-wash-a: rgb(0 117 255 / 16%);
  --hero-wash-b: rgb(255 89 0 / 10%);
  color-scheme: dark;
}

/* Chrome: nav bar and sidebar sit on the canvas, separated by hairlines (Resend nav-bar). */
.topbar,
.sidebar {
  background: var(--canvas);
}

/* Page titles: Resend heading-md (24px, weight 500, -0.4px), kept in Inter for dense pages. */
.page-head h1 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.4px;
}

/* Buttons: 36px, 8px radius, 16px side padding; white primary on black in dark, black on light.
   Pressed state is explicit (the source leaves secondary/pressed states unspecified). */
.btn {
  padding: 0 16px;
}
.btn-sm {
  padding: 0 12px;
}
.btn-primary:active {
  background: var(--primary-pressed);
}
.btn-secondary,
.btn-danger-outline {
  background: var(--raised);
}
.btn-secondary:active,
.btn-ghost:active {
  background: var(--selected);
}
.btn-lg {
  text-transform: none;
  letter-spacing: 0;
}

/* Cards, tables, dialogs, menus and code windows: 12px radius, hairline-strong outline, no shadow. */
.card,
.tbl-wrap,
.dlg,
pre.code {
  border-radius: var(--r-card);
}
.card,
.tbl-wrap {
  border-color: var(--border-strong);
}
.card-h {
  border-bottom-color: var(--border);
}
.menu {
  border-radius: var(--r-card);
}
dialog::backdrop {
  background: var(--backdrop);
}
pre.code {
  background: var(--subtle);
  border-color: var(--border-strong);
}
.ico-box {
  background: var(--raised);
  border-color: var(--border-strong);
}

/* Status pills: Resend badge-pill on the elevated surface; semantic pills keep their state colours. */
.pill {
  background: var(--raised);
  border-color: var(--border-strong);
}

/* Inline links inside running text use the accent link colour (Resend link token). Navigation, tabs,
   breadcrumbs, table cells and card headers keep their neutral colour. */
:is(.content, .app.bare) :is(p, li, .banner, .hint-t, .err-t) a:not([class]):not([role]) {
  color: var(--link);
  text-underline-offset: 2px;
}

/* Inputs: touch screens reach 44px like buttons, so inline input + button rows stay aligned. */
@media (max-width: 760px), (pointer: coarse) {
  .input,
  select.input {
    min-height: 44px;
  }
}

/* Pricing: the current plan reads as the featured tier (Resend pricing-tier-featured: elevated surface). */
.card.plan-current {
  background: var(--raised);
  border-color: var(--text);
}

/* Welcome hero: the one editorial surface. Display serif (Instrument Serif, OFL, substituting the
   unlicensed Domaine Display) on the Resend responsive scale 44 / 56 / 76.8 / 96px, with a restrained
   low-opacity wash in the accent glow hues. Dashboard pages never use this face. */
.hero-band {
  position: relative;
  isolation: isolate;
}
.hero-band::before {
  content: '';
  position: absolute;
  inset: -40px -16px -24px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 80% 25%, var(--hero-wash-a), transparent),
    radial-gradient(closest-side at 15% 85%, var(--hero-wash-b), transparent);
}
.hero-title {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variation-settings: normal;
  max-width: 16ch;
}
.hero-lede {
  font-size: 18px;
  line-height: 1.5;
  max-width: 60ch;
}
@media (min-width: 426px) {
  .hero-title {
    font-size: 56px;
  }
}
@media (min-width: 1024px) {
  .hero-title {
    font-size: 76.8px;
  }
}
@media (min-width: 1440px) {
  .hero-title {
    font-size: 96px;
  }
}
/* Hero rail and fact strip, adapted from the 21st.dev shadcn "Monochrome Stats Hero" (hero-15): a hairline
   rail with a mono index, and a hairline-divided strip (1 column on phones, 3 from 640px). DASTER keeps its
   12px card radius and its 12px eyebrow (hero-15 uses 11px/0.2em, too small for body copy here). */
.hero-rail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-strong);
}
.hero-idx {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--faint);
}
.hero-facts {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  overflow: hidden;
}
.hero-facts > div {
  min-width: 0;
  padding: 16px 20px;
}
.hero-facts > div + div {
  border-top: 1px solid var(--border-strong);
}
.hero-facts dt {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
}
.hero-facts dd {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
}
@media (min-width: 640px) {
  .hero-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hero-facts > div + div {
    border-top: 0;
    border-left: 1px solid var(--border-strong);
  }
}
/* Top-bar context at every width: the org and project labels truncate with an ellipsis (the project label is
   a <strong>, which the base .ctx-btn span.lbl rule missed), and the DEV/PROD badge never shrinks. */
.ctx-btn .lbl {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .ctx-btn[data-action='fn:projectMenu'],
.topbar .ctx-btn[data-action='fn:orgMenu'] {
  flex: 0 1 auto;
  overflow: hidden;
}
.topbar .ctx-btn[data-action='fn:envMenu'] {
  flex: none;
}
/* Phones and tablets (< 1024px, where the sidebar is a drawer): two rows. Row 1 holds navigation and the
   global actions (menu, Search, wallet, New, Ask AI, notifications, Account); row 2 is a full-width context
   row with the org (tablet), the project switcher and the DEV/PROD badge, so the current context stays
   readable and operable next to Search/New/AI instead of being squeezed by them. In the single-row
   baseline the search button shrank to 29px and New / Ask AI to 42px on phones, the tablet context was
   16-18px wide, and a single row cannot fit a usable project switcher at 320px. */
@media (max-width: 1023px) {
  :root {
    --topbar-h: 100px;
  }
  .topbar {
    height: auto;
    min-height: var(--topbar-h);
    flex-wrap: wrap;
    align-content: flex-start;
    row-gap: 0;
    padding-block: 4px 0;
  }
  .topbar > * {
    align-self: center;
  }
  .topbar .ctx {
    order: 10;
    flex: 1 0 100%;
    height: 48px;
    gap: 4px;
    border-top: 1px solid var(--border);
  }
  .topbar .ctx-btn[data-action='fn:envMenu'] {
    justify-content: center;
  }
}
/* Phones: every control in both rows is at least 44 x 44px. */
@media (max-width: 760px) {
  .topbar {
    min-height: 100px;
  }
  .topbar .search-btn,
  .topbar .btn-sm,
  .topbar .menu-btn {
    flex: none;
    min-width: 44px;
    min-height: 44px;
  }
  .topbar .search-btn {
    width: 44px;
  }
  .topbar .ctx-btn {
    height: 44px;
    min-width: 44px;
  }
  .topbar .ctx-btn[data-action='fn:projectMenu'] {
    max-width: calc(100% - 52px);
    font-size: 15px;
  }
}
@media (max-width: 360px) {
  .topbar {
    gap: 4px;
    padding-inline: 8px;
  }
}
/* Narrow desktop (1024-1100px): the labelled search field squeezed the org/project/DEV context; the search
   collapses to its icon (still named "Search (Command K)") so the context reads. */
@media (min-width: 1024px) and (max-width: 1100px) {
  .search-btn {
    width: 36px;
    min-width: 0;
    padding: 0;
    justify-content: center;
    flex: none;
  }
  .search-btn .lbl,
  .search-btn .kbd {
    display: none;
  }
}
/* Touch: list-item buttons (Mongo collections) carry an inline 40px desktop row height; touch screens get 44px. */
@media (max-width: 760px), (pointer: coarse) {
  .btn[role='listitem'] {
    min-height: 44px !important;
  }
}

/* ===== Owner screenshot corrections (2026-10-23): shared layout causes =====
   Overview: the cost sparkline sat in a corner of a stretched card, a finished 6/6 checklist used ~330px, the
   wallet text wrapped into a narrow column. Create organization: a 300px summary left values ~65px wide and
   the single input stretched to ~900px. References: verification/mobbin-ledger-layout.csv. */

/* Key-value lists: the label column takes at most 40% of the width, so values keep room. The column gap is
   restated because the phone rule above sets it to 0 for a stacked list that this rule makes two columns again. */
.kv {
  grid-template-columns: fit-content(40%) minmax(0, 1fr);
  column-gap: 16px;
}
/* Rails beside a form or a detail page: label above value, values use the whole rail width. */
.grid-main-rail > :last-child .kv {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 0;
}
.grid-main-rail > :last-child .kv dd {
  margin-bottom: 10px;
}
.grid-main-rail > :last-child .kv dd:last-child {
  margin-bottom: 0;
}
/* WordPress import "Downtime and cost" on phones: label above value (two columns had no gap between them). */
@media (max-width: 760px) {
  .wpimp-cost .kv {
    grid-template-columns: minmax(0, 1fr);
  }
  .wpimp-cost .kv dd:last-child {
    margin-bottom: 0;
  }
}
/* Create forms: a bounded form column beside the summary (Plain "Create a help center", single column). */
@media (min-width: 1025px) {
  .grid-main-rail.grid-form {
    grid-template-columns: minmax(0, 600px) minmax(280px, 340px);
    justify-content: start;
  }
}
/* Cards in a row take their own height instead of stretching to the tallest. */
.grid-top {
  align-items: start;
}
/* Overview: the compact setup card needs less width than This month (spend, wallet, compute, chart). */
@media (min-width: 1025px) {
  .grid-ov {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* Overview: a finished setup collapses to one line with a disclosure (Devin "Get started", Klaviyo). */
.setup-done > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  cursor: pointer;
}
.setup-done > summary::-webkit-details-marker {
  display: none;
}
.setup-done-toggle {
  margin-left: auto;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.setup-done[open] .setup-done-toggle {
  font-size: 0;
}
.setup-done[open] .setup-done-toggle::after {
  content: 'Hide steps';
  font-size: 13px;
}
.setup-done > .checklist {
  border-top: 1px solid var(--border);
}

/* Overview: daily cost bars (Snowflake Cost Management: dated bars, a value scale, average per day). */
.cost-chart {
  margin: 0;
  display: grid;
  gap: 8px;
}
.cost-chart figcaption {
  flex-wrap: wrap;
  gap: 4px 12px;
}
.cost-plot {
  position: relative;
  padding-top: 18px;
}
.cost-max {
  position: absolute;
  top: 0;
  left: 0;
}
.cost-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 96px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: end;
  border-top: 1px dashed var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}
.cost-bar {
  height: var(--h);
  min-height: 2px;
  width: min(28px, 70%);
  justify-self: center;
  border-radius: 4px 4px 0 0;
  background: var(--control-border);
}
.cost-bar.today {
  background: var(--text);
}
.cost-axis {
  display: flex;
  justify-content: space-between;
}
/* Busy (loading) buttons read as in progress, not as disabled: solid border, progress cursor. */
.btn[aria-busy='true'] {
  border-style: solid;
  cursor: progress;
  opacity: 0.85;
}
/* Goal / intent cards (new-project overview): one header row with a reserved badge slot, a title, a flexible
   description and the action pinned to the bottom, so titles and buttons line up across the row
   (owner screenshot 2026-10-23; reference: Higgsfield onboarding cards, mobbin-ledger-layout.csv). */
.goal-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  min-width: 0;
}
.goal-card.is-suggested {
  border-color: var(--text);
}
.goal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
}
.goal-badge {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.goal-title {
  font-size: 15px;
  line-height: 20px;
}
.goal-desc {
  flex: 1 1 auto;
}
.goal-action {
  margin-top: 8px;
}
.goal-action .btn {
  width: 100%;
}
/* Two-column card rows take their own height (Billing → Wallet "Add funds" stretched to the payment card). */
.grid-2 {
  align-items: start;
}
/* Very narrow phones (≤ 400px): long status pills and sample tags wrap instead of pushing the page sideways. */
@media (max-width: 400px) {
  .pill,
  .sim-tag {
    white-space: normal;
    height: auto;
    min-height: 22px;
    max-width: 100%;
  }
}
/* Welcome section headings get a heading line height (they were 20px type on a 20px line). */
.app.bare h2 {
  line-height: 1.3;
}

/* ===== Owner mobile header / theme / preview controls (2026-10-23) =====
   References: verification/mobbin-ledger-mobile.csv (Mobbin) plus one OWNER-SUPPLIED 21st SCREENSHOT for the
   account-menu theme footer (pattern only; no 21st assets). */

/* Prototype notice: one line at every width; review-only controls live in the Preview controls drawer. */
.protobar {
  gap: 10px;
}
.protobar .pb-note-sm {
  display: none;
  white-space: nowrap;
}
.protobar .pb-build {
  margin-left: auto;
}
.pb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  flex: none;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.pb-toggle:hover,
.pb-toggle[aria-expanded='true'] {
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.pb-panel {
  position: fixed;
  top: calc(var(--protobar-h) + 4px);
  right: max(8px, env(safe-area-inset-right, 0px));
  z-index: 60;
  width: min(300px, calc(100vw - 16px));
  display: grid;
  gap: 6px;
  padding: 14px;
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-overlay);
  font-size: 13px;
}
.pb-panel[hidden] {
  display: none;
}
.pb-panel .pb-panel-h {
  margin: 0;
  font-weight: 600;
}
.pb-panel .pb-panel-note {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.protobar .pb-panel label {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  white-space: normal;
}
.protobar .pb-panel select {
  height: 36px;
  max-width: none;
  padding: 0 8px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.protobar .pb-panel a {
  margin-top: 6px;
  color: var(--text);
  font-size: 13px;
}
.protobar .pb-panel a.pb-link-main {
  font-weight: 600;
}

/* Initials avatar for the account menu button (all widths). */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--selected);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Account menu footer: compact Light / Dark / System switch on the left, Sign out on the right. */
.menu .menu-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 2px 4px;
}
.menu .menu-theme {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--subtle);
}
.menu .menu-theme [role='menuitemradio'] {
  position: relative;
  width: 32px;
  min-height: 28px;
  height: 28px;
  padding: 0;
  justify-content: center;
  border-radius: 6px;
  color: var(--muted);
}
.menu .menu-theme [role='menuitemradio']:hover,
.menu .menu-theme [role='menuitemradio']:focus {
  background: transparent;
  color: var(--text);
}
.menu .menu-theme [aria-checked='true'],
.menu .menu-theme [aria-checked='true']:hover,
.menu .menu-theme [aria-checked='true']:focus {
  background: var(--raised);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--border-strong);
}
.menu .menu-theme [aria-checked='true']::after {
  content: none;
}
.menu .menu-theme [role='menuitemradio']:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -1px;
}
.menu .menu-theme svg {
  width: 16px;
  height: 16px;
}
.menu .menu-foot > [role='menuitem'] {
  width: auto;
  margin-left: auto;
  flex: none;
}
/* Tooltip on hover and keyboard focus (the accessible name comes from aria-label). */
.menu [data-tip]:hover::before,
.menu [data-tip]:focus-visible::before {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 2;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--text);
  color: var(--canvas);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
}
.seg button svg {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
}

/* Phones: one compact header button system. Every control keeps a 44 x 44px hit box; the visible chrome is
   drawn inside it (32px tiles, 20px glyphs), so menu, Search, New, AI and Account read as one set, with New the
   single filled action. Row 2 is the project / environment row: project left, DEV/PROD right. */
@media (max-width: 760px) {
  :root {
    --topbar-h: 96px;
    --protobar-h: 44px;
  }
  .protobar {
    height: var(--protobar-h);
    min-height: 0;
    flex-wrap: nowrap;
    padding-block: 0;
    gap: 8px;
  }
  .protobar strong,
  .protobar .pb-note {
    display: none;
  }
  .protobar .pb-note-sm {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-weight: 600;
  }
  .protobar .pb-build .pb-k {
    display: none;
  }
  .pb-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border: 0;
    background: transparent;
  }
  .pb-toggle::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
    border-radius: 6px;
  }
  .pb-toggle:hover,
  .pb-toggle[aria-expanded='true'] {
    background: transparent;
  }
  .pb-toggle[aria-expanded='true']::before {
    background: color-mix(in srgb, currentColor 14%, transparent);
  }
  .pb-toggle .pb-tl {
    display: none;
  }
  .topbar {
    min-height: var(--topbar-h);
    padding: 0 4px;
    gap: 0;
    padding-block: 2px 0;
  }
  .topbar .tbi,
  .topbar .search-btn.tbi,
  .topbar .btn.tbi {
    position: relative;
    flex: none;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: var(--text);
  }
  .topbar .tbi::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background-color 0.12s var(--ease);
  }
  .topbar .tbi > * {
    position: relative;
  }
  .topbar .tbi > svg {
    width: 20px;
    height: 20px;
  }
  .topbar .tbi:hover,
  .topbar .tbi:active {
    background: transparent;
  }
  .topbar .tbi:hover::before,
  .topbar .tbi[aria-expanded='true']::before {
    background: var(--subtle);
    border-color: var(--border);
  }
  .topbar .tbi[aria-pressed='true']::before {
    background: var(--selected);
    border-color: var(--border-strong);
  }
  .topbar .tbi:focus-visible {
    outline: none;
  }
  .topbar .tbi:focus-visible::before {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
  }
  .topbar .search-btn.tbi .lbl,
  .topbar .search-btn.tbi .kbd {
    display: none;
  }
  .topbar .btn.tbi-new {
    color: var(--on-primary);
  }
  .topbar .tbi-new::before,
  .topbar .tbi-new:hover::before,
  .topbar .tbi-new[aria-expanded='true']::before {
    background: var(--primary);
    border-color: var(--primary);
  }
  .topbar .tbi-new:hover::before {
    background: var(--primary-hover);
  }
  .topbar .tbi-avatar::before {
    inset: 7px;
    border-radius: 999px;
  }
  .topbar .tbi-avatar .avatar {
    width: 30px;
    height: 30px;
  }
  .topbar .tbi-avatar:hover::before,
  .topbar .tbi-avatar[aria-expanded='true']::before {
    background: transparent;
    border-color: transparent;
  }
  .topbar .tbi-avatar[aria-expanded='true'] .avatar {
    border-color: var(--text);
  }
  .topbar .ctx {
    height: 44px;
    gap: 4px;
    padding-inline: 4px;
  }
  .topbar .ctx-btn[data-action='fn:projectMenu'] {
    max-width: calc(100% - 64px);
    padding-inline: 8px;
    gap: 4px;
    font-size: 15px;
  }
  .topbar .ctx-btn[data-action='fn:projectMenu'] svg {
    color: var(--muted);
  }
  .topbar .ctx-btn[data-action='fn:envMenu'] {
    margin-left: auto;
    padding-inline: 8px;
  }
  .menu .menu-theme [role='menuitemradio'] {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .menu .menu-foot > [role='menuitem'] {
    min-height: 44px;
  }
}
/* Phones: a segmented choice (theme, density) goes under its label in one row instead of a stacked column. */
@media (max-width: 760px) {
  .setting:has(> .seg) {
    flex-direction: column;
    gap: 10px;
  }
  .setting > .seg {
    flex-wrap: nowrap;
  }
  .setting > .seg button {
    min-height: 40px;
  }
}

/* ===== DASTER AI workspace, compact panel and simulated voice call (owner P0 brief, 2026-10-23) =====
   References: verification/ai-research/ (Mobbin ledger, official OpenAI voice notes, 21st components).
   Owner tokens: black/white, hairlines, 12px cards, 8px controls, one white primary action. */
.ai-ws {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}
.ai-list,
.ai-rail {
  position: sticky;
  top: calc(var(--topbar-h) + 12px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.ai-list {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
  max-height: calc(100vh - var(--topbar-h) - var(--protobar-h) - 40px);
  overflow: auto;
}
.ai-list-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ai-list-h h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.ai-convs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ai-conv-row {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 8px;
}
.ai-conv-row > a {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}
.ai-conv-row > a:hover {
  background: var(--subtle);
}
.ai-conv-row > a[aria-current='page'] {
  background: var(--selected);
}
.ai-conv-t {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.ai-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ai-head-t {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.ai-head-t h2 {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  overflow-wrap: anywhere;
}
.ai-head-a {
  gap: 8px;
}
.ai-list-toggle {
  display: none;
}
.ai-ctx {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.ai-thread {
  min-height: 240px;
}
.ai-msg {
  max-width: min(760px, 100%);
}
.msg.ai-msg:not(.user) {
  align-self: stretch;
  background: transparent;
  border: 0;
  padding: 4px 0;
  max-width: 100%;
}
.ai-msg .who {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-msg .who svg {
  color: var(--text);
}
.ai-p {
  margin: 0 0 8px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.ai-p:last-child {
  margin-bottom: 0;
}
.ai-p code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
}
.ai-msg-err .ai-p {
  color: var(--error);
}
.ai-msg-f {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.ai-via {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ai-thinking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.ai-dots {
  display: inline-flex;
  gap: 3px;
}
.ai-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: ai-blink 1.2s infinite both;
}
.ai-dots i:nth-child(2) {
  animation-delay: 0.2s;
}
.ai-dots i:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes ai-blink {
  0%,
  80%,
  100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}
.ai-code {
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--subtle);
  margin: 8px 0;
  overflow: hidden;
}
.ai-code-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 4px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}
.ai-code pre {
  margin: 0;
  padding: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}
.ai-diag,
.ai-summary {
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px 14px;
  margin: 8px 0;
}
.ai-diag-h {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ai-dl {
  display: grid;
  grid-template-columns: fit-content(30%) minmax(0, 1fr);
  gap: 6px 14px;
  margin: 0 0 8px;
  font-size: 13px;
}
.ai-dl dt {
  color: var(--muted);
}
.ai-dl dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.ai-dl ul {
  margin: 0;
  padding-left: 18px;
}
.ai-check {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-check li {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.ai-links {
  margin: 8px 0;
}
.ai-act {
  margin: 8px 0;
  border-radius: 12px;
}
.ai-act .ac-b {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11.5px;
}
.ai-flow li {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--faint);
}
.ai-flow li.done {
  color: var(--text);
  border-color: var(--border-strong);
}
.ai-flow li.cur {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
}
.ai-act-f {
  justify-content: flex-end;
}
.ai-wrap {
  font-family: var(--font-mono);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
/* Phones: the shared .kv keeps two columns but its phone rule zeroes the column gap, so a full-width
   label ("Now → proposed") touched its value. Restore a gap on the AI action card only. */
@media (max-width: 760px) {
  .ai-act .kv {
    column-gap: 12px;
  }
}
.ai-dev {
  margin-top: 4px;
}
.ai-follow {
  gap: 6px;
}
.ai-composer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 8px;
  background: var(--surface);
}
.ai-composer textarea {
  border: 0;
  background: transparent;
  resize: vertical;
  min-height: 48px;
  box-shadow: none;
}
.ai-composer textarea:focus-visible {
  outline: none;
}
.ai-composer:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.ai-comp-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-under {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.ai-env {
  max-width: 360px;
  margin: 0;
}
.ai-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 32px 8px;
}
.ai-welcome h2 {
  font-size: 20px;
  font-weight: 500;
  margin: 4px 0 0;
}
.ai-glyph {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
}
.ai-starters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.ai-starter {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  min-height: 36px;
}
.ai-starter:hover {
  background: var(--subtle);
}
.ai-recs,
.ai-mini-acts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-recs li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.ai-rec-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
}
.ai-mini-acts li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.ai-noticed {
  margin-bottom: 16px;
}
.ai-noticed .card-h h2 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-hist {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
}
/* Compact panel */
.ai-panel-h {
  gap: 4px;
}
.ai-panel-ctx {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.ai-panel-conv {
  height: 32px;
  font-size: 13px;
}
.inspector .ai-welcome {
  padding: 16px 4px;
}
.inspector .ai-comp-hint {
  display: none;
}
/* Voice call: centred sheet on large screens, full screen on phones. State is always in words. */
.ai-call-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--backdrop, rgb(0 0 0 / 55%));
}
.ai-call {
  position: fixed;
  z-index: 71;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-call-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-call-top h2 {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  overflow-wrap: anywhere;
}
.ai-call-perm h3 {
  font-size: 20px;
  font-weight: 500;
  margin: 8px 0 4px;
}
.ai-call-perm p {
  margin: 0 0 10px;
}
.ai-call-perm-a {
  justify-content: flex-end;
  margin-top: 12px;
}
.ai-call-live {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.ai-call-state {
  font-size: 18px;
  font-weight: 500;
  margin: 4px 0 0;
}
.ai-presence {
  display: grid;
  grid-template-columns: repeat(3, 14px);
  gap: 10px;
  padding: 14px;
  margin-top: 8px;
}
.ai-presence i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text);
  opacity: 0.35;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.ai-presence.sm {
  grid-template-columns: repeat(3, 5px);
  gap: 3px;
  padding: 0;
  margin: 0;
}
.ai-presence.sm i {
  width: 5px;
  height: 5px;
}
.ai-presence.st-listening i {
  animation: ai-breathe 2.4s ease-in-out infinite;
}
.ai-presence.st-speaking i {
  opacity: 1;
  animation: ai-wave 1s ease-in-out infinite;
}
.ai-presence.st-user_speaking i {
  opacity: 0.9;
  animation: ai-wave 0.7s ease-in-out infinite;
}
.ai-presence.st-thinking i,
.ai-presence.st-connecting i,
.ai-presence.st-reconnecting i {
  animation: ai-blink 1.2s infinite both;
}
.ai-presence i:nth-child(3n + 2) {
  animation-delay: 0.15s;
}
.ai-presence i:nth-child(3n) {
  animation-delay: 0.3s;
}
.ai-presence.st-muted i,
.ai-presence.st-interrupted i {
  opacity: 0.2;
}
@keyframes ai-breathe {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
}
@keyframes ai-wave {
  0%,
  100% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.15);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-presence i,
  .ai-dots i {
    animation: none !important;
  }
  .ai-presence.st-speaking i,
  .ai-presence.st-user_speaking i {
    opacity: 1;
  }
}
.ai-call-tx {
  align-self: stretch;
  text-align: left;
  max-height: 160px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  background: var(--surface);
  font-size: 13px;
}
.ai-call-tx p {
  margin: 4px 0;
  overflow-wrap: anywhere;
}
.ai-call-say {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  align-items: center;
}
.ai-call-type {
  display: flex;
  gap: 6px;
  align-self: stretch;
}
.ai-call-type .input {
  flex: 1;
  min-width: 0;
}
.ai-call-ctrl {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.ai-cbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 64px;
  min-height: 56px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.ai-cbtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ai-cbtn[aria-pressed='true'] {
  background: var(--selected);
}
.ai-cbtn-sel select {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  max-width: 96px;
}
.ai-cbtn-end {
  background: var(--error);
  border-color: var(--error);
  color: var(--on-danger, #fff);
}
.ai-call-mini {
  position: fixed;
  z-index: 69;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--raised);
  max-width: calc(100vw - 32px);
}
.ai-call-mini-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
}
/* Tablet: the rail moves under the conversation; phone: the history is a toggle above it. */
@media (max-width: 1279px) {
  .ai-ws {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .ai-rail {
    grid-column: 2;
    position: static;
  }
}
@media (max-width: 860px) {
  .ai-ws {
    grid-template-columns: minmax(0, 1fr);
  }
  .ai-list {
    display: none;
    position: static;
    max-height: none;
  }
  .ai-ws.list-open .ai-list {
    display: flex;
  }
  .ai-rail {
    grid-column: 1;
  }
  .ai-list-toggle {
    display: inline-flex;
  }
}
@media (max-width: 760px) {
  .ai-call {
    inset: 0;
    transform: none;
    width: 100%;
    max-height: none;
    height: 100%;
    border-radius: 0;
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
      max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  }
  .ai-call-live {
    flex: 1;
  }
  .ai-call-ctrl {
    margin-top: auto;
  }
  .ai-cbtn {
    min-width: 56px;
  }
  .ai-comp-hint {
    display: none;
  }
  .ai-composer .btn {
    min-height: 44px;
    min-width: 44px;
  }
  .ai-conv-row > a,
  .ai-conv-row .btn {
    min-height: 44px;
  }
  .ai-flow {
    font-size: 11px;
  }
  .ai-dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .ai-dl dd {
    margin-bottom: 6px;
  }
}
/* AI recommendations: title first, status and the action on one line below (the rail is narrow). */
.ai-recs li {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 't t' 'p o';
  row-gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.ai-recs li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.ai-recs li > .pill {
  grid-area: p;
  justify-self: start;
}
.ai-recs li > .ai-rec-t {
  grid-area: t;
}
.ai-recs li > .btn {
  grid-area: o;
}
.ai-call > .ai-ctx,
.ai-head .ai-ctx {
  align-self: flex-start;
  width: auto;
}
.ai-panel-ctx .ai-ctx {
  align-self: flex-start;
}
/* With the AI panel open the top bar has less room: search collapses to its icon and the wallet to its
   amount, so the org and project names stay readable (queued defect: they shrank to "N." / "s."). */
@media (min-width: 1025px) and (max-width: 1700px) {
  .app.with-inspector .topbar .search-btn {
    width: 36px;
    min-width: 0;
    padding: 0;
    justify-content: center;
    flex: none;
  }
  .app.with-inspector .topbar .search-btn .lbl,
  .app.with-inspector .topbar .search-btn .kbd {
    display: none;
  }
  .app.with-inspector .topbar [data-topbar-wallet] {
    display: none;
  }
  .app.with-inspector .topbar .ctx-btn[data-action='fn:projectMenu'] {
    min-width: 9ch;
  }
  .app.with-inspector .topbar .ctx-btn[data-action='fn:orgMenu'] {
    min-width: 6ch;
  }
}

/* Import lifecycle (owner P0 migration correction): beginner stepper with Done / Now / Next / Later told apart by
   mark, fill, border and a word, not by colour alone. References: verification/migration-research/. */
.mig-steps {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.mig-steps li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  min-width: 0;
  font-size: 13px;
}
.mig-n {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-strong);
}
.mig-l {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}
.mig-w {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  margin-top: 2px;
}
.mig-steps li.done .mig-n {
  background: var(--selected);
}
.mig-steps li.cur {
  border-color: var(--text);
  border-width: 2px;
  padding: 7px;
}
.mig-steps li.cur .mig-n {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.mig-steps li.cur .mig-w {
  color: var(--text);
  font-weight: 600;
}
.mig-steps li.next {
  border-style: dashed;
  border-color: var(--border-strong);
}
.mig-steps li.pend {
  color: var(--muted);
  border-style: dotted;
}
.mig-rollback {
  border-color: var(--border-strong);
}
.mig-rollback .card-f {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
@media (max-width: 1100px) {
  .mig-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .mig-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .mig-steps li {
    padding: 6px 8px;
  }
}
.mig-cfg {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mig-cfg-i {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mig-atts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mig-atts > li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  min-width: 0;
  overflow-wrap: anywhere;
}
.mig-atts > li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.mig-sum {
  display: none;
  margin: 0 0 6px;
  font-weight: 500;
}
/* Phones: a summary line (“Step n of 7 …”, read by screen readers too) plus the current and next step; done and
   later steps are hidden on phones to keep the page short. */
@media (max-width: 600px) {
  .mig-sum {
    display: block;
  }
  .mig-steps li.done,
  .mig-steps li.pend {
    display: none;
  }
}

/* ===== DASTER AI chat and call layout (owner-approved direction, 2026-10-23) =====
   Bubbles, a bottom-anchored rounded composer and a floating call card over the chat. Owner design.md
   black/white tokens; no third-party branding. References: owner screenshots (direct reference) and
   verification/ai-research/mobbin-ledger-ai-layout.csv (Mobbin). */
.inspector {
  height: calc(100vh - var(--protobar-h));
  height: calc(100dvh - var(--protobar-h));
}
.inspector-h.ai-panel-h {
  height: 52px;
  min-height: 52px;
  flex: none;
  gap: 2px;
  padding: 0 8px;
}
.ai-hist-btn {
  gap: 6px;
  min-width: 0;
}
.ai-hist-btn strong {
  font-size: 14px;
}
.ai-panel-ctx {
  flex: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
}
.ai-panel-title {
  flex: 1 1 100%;
  min-width: 0;
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-panel-ctx .ai-ctx {
  font-size: 11px;
}
.inspector-b#ai-thread-panel {
  flex: 1 1 auto;
  min-height: 0;
}
.inspector-f.ai-panel-f {
  flex: none;
  padding: 8px 12px max(10px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Conversation rows and bubbles */
.ai-thread {
  gap: 14px;
}
.ai-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ai-row-user {
  align-items: flex-end;
}
.ai-row-ai {
  align-items: flex-start;
}
.ai-bubble {
  max-width: min(100%, 72ch);
  min-width: 0;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--subtle);
  border: 1px solid var(--border);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.ai-row-ai .ai-bubble {
  border-top-left-radius: 6px;
}
.ai-bubble-user {
  max-width: min(85%, 60ch);
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
  border-top-right-radius: 6px;
}
.ai-bubble-user .ai-p code {
  background: transparent;
  color: inherit;
}
.ai-bubble .ai-diag,
.ai-bubble .ai-act,
.ai-bubble .ai-code,
.ai-bubble .ai-summary {
  background: var(--surface);
}
.ai-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--faint);
}
.ai-row .ai-msg-f {
  margin-top: 0;
}
.ai-msg-err .ai-bubble {
  border-color: var(--error);
}
/* Suggestions: one scrolling row so they never push the composer off screen */
.ai-follow {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.ai-follow .chip {
  flex: none;
  white-space: nowrap;
}
/* Composer bar */
.ai-bar {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  background: var(--surface);
}
.ai-bar:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.ai-bar-in {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 1.5;
  resize: none;
  padding: 8px 6px;
  min-height: 36px;
  max-height: 9em;
  overflow-y: auto;
}
.ai-bar-in:focus {
  outline: none;
}
.ai-bar-btn,
.ai-bar-send {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  color: var(--text);
  background: transparent;
}
.ai-bar-btn:hover {
  background: var(--subtle);
}
.ai-bar-btn[aria-pressed='true'] {
  background: var(--selected);
}
.ai-bar-send {
  background: var(--primary);
  color: var(--on-primary);
}
.ai-bar-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ai-bar-btn:focus-visible,
.ai-bar-send:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.ai-bar-note {
  margin: 0;
  text-align: center;
  font-size: 11px;
  color: var(--faint);
}
/* Full workspace: the composer stays at the bottom of the conversation column */
#ai-composer-page {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 8px 0 max(8px, env(safe-area-inset-bottom, 0px));
  background: var(--canvas);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Floating call card */
.ai-call-float {
  position: fixed;
  z-index: 69;
  right: max(16px, env(safe-area-inset-right, 0px));
  top: 72px;
  left: auto;
  transform: none;
  width: min(360px, calc(100vw - 32px));
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 12px;
  gap: 10px;
  border-radius: 16px;
}
.ai-cf-h {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ai-cf-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 13px;
}
.ai-cf-t .ai-call-state {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 400;
  margin: 0;
}
.ai-cf-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.ai-cf-tx {
  max-height: 96px;
  font-size: 12.5px;
}
.ai-call-float .ai-call-say {
  justify-content: flex-start;
}
.ai-call-float .ai-call-say .chip {
  font-size: 12px;
}
.ai-cf-ctrl {
  display: flex;
  gap: 8px;
}
.ai-cf-ctrl > * {
  flex: 1;
  justify-content: center;
}
.ai-cf-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  border-radius: 12px;
  border: 0;
  background: var(--selected);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.ai-cf-btn[aria-pressed='true'] {
  outline: 2px solid var(--border-strong);
}
.ai-cf-end {
  background: var(--error);
  color: var(--on-danger, #fff);
}
.ai-cf-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .ai-call-float {
    right: max(12px, env(safe-area-inset-right, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    width: auto;
    max-height: 45vh;
  }
  .ai-bar-btn,
  .ai-bar-send,
  .ai-cf-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }
  .ai-cf-btn {
    width: auto;
  }
  .ai-bubble-user {
    max-width: 90%;
  }
}
@media (max-width: 1279px) {
  .inspector {
    height: 100vh;
    height: 100dvh;
  }
}
/* The floating card is not the full-screen sheet: it sizes to its content at every width. */
.ai-call.ai-call-float {
  height: auto;
  inset: auto;
  right: max(16px, env(safe-area-inset-right, 0px));
  border-radius: 16px;
}
@media (max-width: 760px) {
  .ai-call.ai-call-float {
    inset: auto max(12px, env(safe-area-inset-right, 0px)) auto
      max(12px, env(safe-area-inset-left, 0px));
    height: auto;
    padding: 12px;
  }
}

/* ===== Owner Dots reference (2026-10-24): compact live call card ===== */
/* Avatar, name and status on one line; two prominent controls (Mute, red End); nothing else competes. */
.ai-call.ai-call-float {
  width: min(320px, calc(100vw - 24px));
}
.ai-cf-av {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--subtle);
  border: 1px solid var(--border);
}
.ai-cf-sub {
  font-size: 12.5px;
  color: var(--muted);
}
.ai-cf-sub .ai-call-state {
  display: inline;
}
.ai-cf-two .ai-cf-btn {
  min-height: 44px;
  border-radius: 12px;
}
.ai-cf-mute {
  background: var(--subtle);
  border: 1px solid var(--border);
}
.ai-cf-mute[aria-pressed='true'] {
  outline: 0;
  background: var(--text);
  color: var(--canvas);
}
@media (max-width: 760px) {
  .ai-call.ai-call-float {
    left: auto;
    width: min(320px, calc(100vw - 24px));
  }
  .ai-cf-two .ai-cf-btn {
    width: auto;
  }
}

/* ===== Composer attachments and dictation (owner, 2026-10-24; samples and simulation only) ===== */
.ai-bar.has-att {
  flex-wrap: wrap;
  border-radius: 20px;
}
.ai-att {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 4px 4px 2px;
}
.ai-att-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: min(280px, 100%);
  padding: 6px 6px 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
}
.ai-att-chip.is-bad {
  border-color: var(--error);
}
.ai-att-chip.is-bad .ai-att-m strong {
  color: var(--error);
  font-weight: 500;
}
.ai-att-ext {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--subtle);
  border: 1px solid var(--border);
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--muted);
}
.ai-att-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.ai-att-n {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-att-m {
  font-size: 12px;
  color: var(--muted);
}
.ai-att-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.ai-att-x:hover {
  background: var(--subtle);
  color: var(--text);
}
.ai-att-x:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.ai-att-hint {
  flex: 1 1 100%;
  margin: 0;
  padding: 0 8px 2px;
  font-size: 12px;
  color: var(--muted);
}
.ai-att-sent {
  padding: 8px 0 0;
}
.ai-bubble-user .ai-att-chip {
  background: transparent;
}
.ai-att-note {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--muted);
}
.ai-att-note svg {
  flex: none;
  margin-top: 3px;
}
.ai-pick {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.ai-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.ai-pick-row:has(input:checked) {
  border-color: var(--text);
}
.ai-dict {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ai-wave {
  flex: 1;
  min-width: 0;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
}
.ai-wave i {
  flex: none;
  width: 3px;
  border-radius: 2px;
  background: var(--text);
  opacity: 0.75;
  animation: ai-wave 1s ease-in-out infinite;
}
.ai-dict-t {
  flex: none;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 420px) {
  .ai-dict-t [role='status'] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* A still waveform: the bars keep their varied heights. */
  .ai-wave i {
    animation: none !important;
  }
}

/* Authorization context (simulated): the reason under an AI action card a Viewer cannot act on. */
.ai-auth-note {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}
/* Development sandbox controls wrap at narrow widths instead of running off the screen. */
.op-dev .row {
  flex-wrap: wrap;
}
.op-dev .btn {
  white-space: normal;
  max-width: 100%;
  text-align: left;
  height: auto;
  min-height: var(--control-sm);
}

/* ===== Supabase-style shell (owner, 2026-10-24; reference: the owner's own Supabase dashboard, observed directly)
   One compact header across the full width: brand / organization + plan / project, the existing environment
   badge, then search and the global actions. Desktop sidebar: a 48px icon rail that expands as an overlay on
   hover or keyboard focus ("Expand on hover", default), with Expanded and Collapsed in the Sidebar control menu.
   DASTER colours, fonts and icons are kept. Phones and tablets keep the drawer and the two-row header. */
.topbar {
  grid-column: 1 / -1;
}
.sidebar {
  top: var(--topbar-h);
  height: calc(100vh - var(--protobar-h) - var(--topbar-h));
}
/* Beside the page (≥1280px) the panel starts under the header; below that it is a full-height overlay drawer. */
@media (min-width: 1280px) {
  .inspector {
    top: var(--topbar-h);
    height: calc(100vh - var(--protobar-h) - var(--topbar-h));
  }
}
.tb-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 4px;
  border-radius: 6px;
  text-decoration: none;
}
.tb-plan {
  flex: none;
  font-size: 11px;
  line-height: 18px;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--muted);
  font-weight: 500;
}
.sb-ctl {
  margin-top: auto;
  padding-top: 8px;
}
.sb-ctl + .sb-foot {
  margin-top: 8px;
}
button.sb-item {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sidebar .sb-item .lbl {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1024px) {
  .tb-brand,
  .tb-brand-sep {
    display: none;
  }
}
@media (max-width: 1100px) {
  .tb-plan {
    display: none;
  }
}
@media (min-width: 1025px) {
  :root {
    --topbar-h: 48px;
  }
  .topbar {
    padding: 0 12px;
    gap: 6px;
  }
  .topbar .ctx {
    margin-left: 0;
    min-width: 0;
    flex: 0 1 auto;
    gap: 2px;
  }
  .topbar .ctx-btn[data-action='fn:orgMenu'] .lbl {
    max-width: 200px;
  }
  .topbar .ctx-btn > svg {
    flex: none;
  }
  .topbar .ctx-btn[data-action='fn:projectMenu'] .lbl {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* The rail keeps its 48px column; the open sidebar overlays the page instead of pushing it. */
  .app.sb-collapsed .sidebar {
    width: var(--sidebar-w);
    z-index: 25;
    overflow-x: hidden;
  }
  .app.sb-ready.sb-collapsed .sidebar {
    transition:
      width 150ms var(--ease),
      box-shadow 150ms var(--ease);
  }
  .app.sb-collapsed .sidebar.sb-open {
    width: 248px;
    box-shadow: var(--shadow-raised);
  }
}
@media (prefers-reduced-motion: reduce) {
  .app.sb-ready.sb-collapsed .sidebar {
    transition: none;
  }
}

/* WordPress import: the single address field and the destination choice stay in a bounded form column on
   desktop (the accepted create-form rule, 600px; retroactive Mobbin check: beehiiv "Importing content",
   Snowflake "Import a model"). The coverage table keeps the full card width. */
@media (min-width: 1025px) {
  #wpimp-url,
  #wpimp-dest {
    max-width: 600px;
  }
}

/* ===== Navigation structure (owner-approved, 2026-10-24; reference: the owner's own Replit workspace, observed
   directly): six primary destinations on the left, sections as disclosures of their pages; organization and
   account pages in the header menus; an on-demand right panel (DASTER AI · Context · Activity). ===== */
.sb-sec-btn {
  width: 100%;
}
.sb-sec-btn .sb-chev {
  margin-left: auto;
  display: inline-flex;
  color: var(--faint);
}
.sb-sec-btn .sb-chev svg {
  width: 14px;
  height: 14px;
  transition: transform 140ms var(--ease);
}
.sb-sec-btn[aria-expanded='false'] .sb-chev svg {
  transform: rotate(-90deg);
}
.sb-sec-active > .sb-sec-btn {
  color: var(--text);
  font-weight: 500;
}
.sb-sub {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sb-sub.collapsed > .sb-item:not([aria-current='page']) {
  display: none;
}
.sb-item.sb-subitem {
  padding-left: 40px;
}
.sidebar .sb-sep,
.navdrw .sb-sep {
  display: block;
}
.sb-head {
  margin: 0;
  padding: 6px 10px 4px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
@media (min-width: 1025px) {
  /* The closed rail shows the six primary destinations only; the current section carries the selected state. */
  .app.sb-collapsed .sidebar:not(.sb-open) .sb-sub {
    display: none;
  }
  .app.sb-collapsed .sidebar:not(.sb-open) .sb-sec-btn .sb-chev {
    display: none;
  }
  .app.sb-collapsed .sidebar:not(.sb-open) .sb-sec-active > .sb-sec-btn {
    background: var(--selected);
  }
  .app.sb-collapsed .sidebar:not(.sb-open) .sb-sec-active > .sb-sec-btn::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: var(--text);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sb-sec-btn .sb-chev svg {
    transition: none;
  }
}
/* Right panel: one surface at a time. */
.rp-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.rp-tab {
  flex: 1 1 0;
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.rp-tab:hover {
  background: var(--subtle);
  color: var(--text);
}
.rp-tab[aria-pressed='true'] {
  background: var(--selected);
  color: var(--text);
}
.rp-sub {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
#rp-body {
  gap: 20px;
}
#rp-body .kv {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 0;
}
#rp-body .kv dd {
  margin-bottom: 8px;
}
.rp-list,
.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rp-list li,
.link-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.link-list li > span {
  flex-basis: 100%;
}
@media (max-width: 1100px) {
  .tb-hide-md {
    display: none;
  }
}
@media (pointer: coarse), (max-width: 760px) {
  .rp-tab {
    min-height: 44px;
  }
}
/* Long organization and project names wrap inside the panel's context chip instead of widening the page. */
.ai-panel-ctx .ai-ctx {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* A simulated call card floats under the panel header; on Context and Activity the panel keeps its height free. */
body:has(.ai-call-float) #rp-body {
  padding-top: calc(var(--ai-call-card-h, 124px) + 24px);
}
/* Marketing email (proposed): the campaign preview reads like a plain message. */
.mkt-preview {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 12px 16px;
  background: var(--surface);
  min-width: 0;
}
.mkt-body {
  margin: 8px 0 0;
  font-family: inherit;
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Add email domain page: adapted from Resend's current /domains/add (vertical steps, sender preview). */
.adddom-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.adddom-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--subtle);
  color: var(--text);
}
.adddom-steps {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 0 28px;
  border-left: 1px solid var(--border);
  margin-left: 12px;
  display: grid;
  gap: 32px;
}
.adddom-step {
  position: relative;
  min-width: 0;
}
.adddom-step::before {
  content: '';
  position: absolute;
  left: -35px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--canvas);
}
.adddom-step.is-current::before {
  border-color: var(--text);
}
.adddom-step:not(.is-current) {
  color: var(--muted);
}
.adddom-step h2 {
  font-size: 17px;
  margin: 0 0 2px;
}
.adddom-grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 32px;
  margin-top: 16px;
  align-items: start;
}
.adddom-adv summary,
.email-more summary {
  cursor: pointer;
  font-size: 14px;
}
.adddom-adv ul {
  margin: 4px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}
.adddom-preview {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 16px;
  min-width: 0;
  display: grid;
  gap: 12px;
}
.adddom-from {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.adddom-av {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--subtle);
  border: 1px solid var(--border);
  font-size: 13px;
}
.adddom-lines {
  display: grid;
  gap: 8px;
}
.adddom-lines span {
  height: 10px;
  border-radius: 5px;
  background: var(--subtle);
}
.adddom-lines span:nth-child(1) {
  width: 55%;
}
.adddom-lines span:nth-child(2) {
  width: 80%;
}
.adddom-lines span:nth-child(3) {
  width: 66%;
}
@media (max-width: 860px) {
  .adddom-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .adddom-icon {
    width: 48px;
    height: 48px;
  }
}
/* Marketing email (proposed): bounded empty panel and filter row, adapted from Resend's Broadcasts/Audience. */
.mkt-empty .empty {
  border-style: solid;
  border-radius: var(--r-lg);
  padding: 64px 20px;
}
.mkt-filters .filters {
  flex: 1;
  min-width: 0;
}
.mkt-filters .search-input {
  flex: 1 1 220px;
  min-width: 0;
}
.mkt-filters select.input {
  flex: 0 1 200px;
  min-width: 0;
  width: auto;
}
.mkt-topics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 24px;
  align-items: start;
}
.mkt-unsub-preview {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 16px 20px 20px;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.mkt-unsub-preview h3 {
  font-size: 20px;
  text-align: center;
  margin: 12px 0 0;
  text-wrap: balance;
}
.mkt-unsub-preview > p {
  text-align: center;
  margin: 0;
}
.mkt-unsub-btn {
  justify-content: center;
  pointer-events: none;
}
@media (max-width: 860px) {
  .mkt-topics {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Centered form dialog (def.centered), e.g. Add webhook as on Resend's current /webhooks, at every width. */
dialog.drawer.drawer-center {
  margin: auto;
  height: fit-content;
  width: fit-content;
  max-height: calc(100vh - 32px);
}
.drawer-center .drw {
  width: min(520px, calc(100vw - 32px));
  height: auto;
  max-height: calc(100vh - 32px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
}
.drawer-center .drw .dlg-f {
  border-top: 0;
}
/* Secondary details kept behind a disclosure (owner: progressive disclosure, as in Resend). */
.email-more {
  margin-top: 16px;
}
.email-more > p,
.email-more > .row {
  margin: 8px 0 0;
}
/* Template body format (Text / HTML), one body shown at a time. */
.tpl-body {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.tpl-body legend {
  font-weight: 500;
  margin-bottom: 6px;
  padding: 0;
}
.tpl-body .seg {
  justify-self: start;
}
.seg-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 13px;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
}
.seg-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.seg-opt:has(input:checked) {
  background: var(--selected);
  color: var(--text);
  font-weight: 500;
}
.seg-opt:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
/* Add contact: optional details grouped under one legend. */
.mkt-optional {
  border: 0;
  border-top: 1px solid var(--border);
  padding: 12px 0 0;
  margin: 0;
  min-width: 0;
}
.mkt-optional legend {
  font-weight: 500;
  padding: 0 8px 0 0;
}
/* The required consent sits apart from the optional group above it. */
.mkt-optional + .check-row {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
/* Visual email editor (screens-email-editor.js): rail, canvas, settings; preview frame. */
.ed-shell {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.ed-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 12px;
}
.ed-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: start;
}
.ed-rail,
.ed-panel,
.ed-canvas,
.ed-prev {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 12px;
  min-width: 0;
}
.ed-t {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 8px;
}
.ed-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.ed-blocks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ed-block {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 8px;
  min-width: 0;
}
.ed-block.is-sel {
  border-color: var(--text);
}
.ed-pick {
  flex: 1;
  min-width: 0;
  display: grid;
  text-align: left;
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--text);
}
.ed-sum {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ed-ops {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}
.ed-frame {
  margin: 10px auto 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--canvas);
  overflow: hidden;
  max-width: 100%;
}
.ed-desktop {
  width: 600px;
}
.ed-mobile {
  width: 360px;
}
.ed-inbox {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.ed-mail {
  padding: 14px;
  overflow-wrap: anywhere;
}
.ed-h {
  font-size: 20px;
  margin: 0 0 8px;
}
.ed-btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  background: var(--primary);
  color: var(--on-primary);
}
.ed-img {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 96px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--subtle);
  margin: 8px 0;
  text-align: center;
  padding: 8px;
}
.ed-hr {
  border: 0;
  border-top: 1px solid var(--border);
}
.ed-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 1100px) {
  .ed-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .ed-meta {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Email API › Metrics: delivery funnel (screens-email-metrics.js) */
.em-funnel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.em-funnel .meter {
  margin-top: 4px;
}

/* Marketing › Automations editor steps (screens-email-automations.js) */
.au-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.au-step {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: var(--surface);
  min-width: 0;
}
.au-step .input,
[data-au-id] .row > .input {
  width: auto;
  flex: 1 1 160px;
  max-width: 100%;
  min-width: 0;
}
/* Templates › Cards view (screens-email-templates.js) */
.tpl-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
/* Webhooks › events picker (screens-email-dev.js): grouped catalog in a scroll box */
.wh-events {
  max-height: min(26vh, 240px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px 10px 10px;
}

/* WhatsApp Business: area navigation, wizard rail, readiness checklist */
.wa-shell {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.wa-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wa-nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 72px;
}
.wa-nav-g {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wa-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--r-md);
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}
.wa-nav a:hover {
  background: var(--subtle);
  color: var(--text);
}
.wa-nav a[aria-current='page'] {
  background: var(--selected);
  color: var(--text);
  font-weight: 500;
}
.wa-nav-select {
  display: none;
}
.wa-scn .input {
  width: auto;
  max-width: 100%;
}
.wa-pending {
  border-style: dashed;
}
.wa-check,
.wa-steps,
.wa-setup,
.wa-activity {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wa-check li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wa-check .wa-ck {
  flex: 1;
}
.wa-steps li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}
.wa-wizard {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
}
.wa-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.wa-rail li {
  display: flex;
  gap: 8px;
  align-items: center;
}
.wa-rail .num {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  flex: none;
}
.wa-rail li.cur {
  color: var(--text);
  font-weight: 500;
}
.wa-rail li.cur .num {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.wa-rail li.done .num {
  background: var(--subtle);
}
.wa-wz-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.wa-h {
  font-size: 16px;
  margin: 0;
}
.wa-meta {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 900px) {
  .wa-shell,
  .wa-wizard {
    grid-template-columns: minmax(0, 1fr);
  }
  .wa-nav {
    display: none;
  }
  .wa-nav-select {
    display: flex;
  }
  .wa-rail {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 12px;
  }
  .wa-rail li:not(.cur) {
    font-size: 0;
    gap: 0;
  }
}

/* WhatsApp: message preview, timelines, builder nodes, inbox */
.wa-phone {
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 12px);
  background: var(--subtle);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}
.wa-bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-wrap: anywhere;
}
.wa-bubble p {
  margin: 0;
}
.wa-btn {
  display: block;
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  font-size: 13px;
  color: var(--focus);
}
.wa-timeline {
  list-style: none;
  margin: 12px 0 4px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 13px;
  color: var(--muted);
}
.wa-timeline li.done {
  color: var(--text);
}
.wa-timeline li.fail {
  color: var(--error);
}
.wa-node {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wa-arrow {
  text-align: center;
  color: var(--faint);
  line-height: 1;
}
.wa-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.wa-suggest {
  margin-top: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 12px;
}
.wa-inbox {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 240px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  min-height: 520px;
  overflow: hidden;
}
.wa-inbox:not(.reading) {
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
}
.wa-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  min-width: 0;
  border-right: 1px solid var(--border);
}
.wa-back {
  display: none;
}
.wa-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.wa-msg {
  max-width: 80%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 10px;
  overflow-wrap: anywhere;
}
.wa-msg p {
  margin: 0 0 4px;
}
.wa-msg.out {
  align-self: flex-end;
  background: var(--subtle);
}
.wa-msg.note {
  align-self: stretch;
  max-width: none;
  border-style: dashed;
  background: var(--warning-bg);
}
.wa-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.wa-ctx {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.wa-ctx h3 {
  margin: 0;
}
@media (max-width: 1100px) {
  .wa-inbox,
  .wa-inbox:not(.reading) {
    grid-template-columns: minmax(0, 1fr);
  }
  .wa-inbox.reading .mail-list {
    display: none;
  }
  .wa-back {
    display: inline-flex;
  }
  .wa-thread {
    border-right: 0;
  }
  .wa-ctx {
    border-top: 1px solid var(--border);
  }
}

/* DASTER for Shopify: reuses the WhatsApp area layout (.wa-shell, .wa-nav, .wa-check, .wa-steps, .wa-inbox) */
.sh-consent {
  max-width: 640px;
}
.sh-scope {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 12px;
}
.sh-scope summary {
  cursor: pointer;
}
.sh-scope ul {
  margin: 8px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sh-setup {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sh-setup li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.sh-setup li.pending {
  color: var(--muted);
}
.sh-setup li.failed {
  border-color: var(--error);
}
.sh-setup li.done .sh-ic {
  color: var(--success);
}
.sh-setup li.failed .sh-ic {
  color: var(--error);
}
.sh-setup .grow {
  min-width: 0;
  overflow-wrap: anywhere;
}
.sh-sandbox summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
}
.sh-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.sh-cards .card {
  margin: 0;
}
.sh-matrix td,
.sh-matrix th {
  text-align: center;
}
.sh-h {
  font-size: 15px;
  margin: 4px 0 0;
}
.sh-steps {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sh-diff {
  width: 100%;
}
.sh-diff th[scope='rowgroup'] {
  text-align: left;
  background: var(--subtle);
}

/* ===== Compact call bar (owner recording, 2026-10-26) =====
   A small floating bar keeps the chat visible and usable: status dot, name, status · timer, then light icon
   controls and a red End. The optional details panel under it is not modal. Replaces the centred sheet. */
.ai-call.ai-cb {
  width: min(400px, calc(100vw - 24px));
  max-height: none;
  overflow: visible;
  padding: 6px 6px 6px 12px;
  gap: 8px;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 12%);
}
.ai-cb.is-open {
  padding-bottom: 10px;
  max-height: calc(100vh - var(--ai-cb-top, 64px) - 12px);
  max-height: calc(100dvh - var(--ai-cb-top, 64px) - 12px);
  overflow: auto;
}
.ai-cb-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
}
.ai-cb-bar .ai-cf-t {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.ai-cb-bar .ai-cf-sub {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-cb-dot {
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--muted);
}
.ai-cb-dot.st-listening,
.ai-cb-dot.st-connected,
.ai-cb-dot.st-interrupted {
  background: var(--success);
}
.ai-cb-dot.st-speaking,
.ai-cb-dot.st-user_speaking,
.ai-cb-dot.st-thinking,
.ai-cb-dot.st-connecting,
.ai-cb-dot.st-reconnecting {
  background: var(--info);
}
.ai-cb-dot.st-failed {
  background: var(--error);
}
@media (prefers-reduced-motion: no-preference) {
  .ai-cb-dot.st-speaking,
  .ai-cb-dot.st-thinking,
  .ai-cb-dot.st-connecting,
  .ai-cb-dot.st-reconnecting {
    animation: ai-cb-pulse 1.2s ease-in-out infinite;
  }
}
@keyframes ai-cb-pulse {
  50% {
    opacity: 0.35;
  }
}
.ai-cb-btn,
.ai-cb-end {
  flex: none;
  display: inline-grid;
  place-items: center;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--subtle);
  color: var(--text);
  cursor: pointer;
  padding: 0;
}
.ai-cb-btn {
  width: 32px;
}
.ai-cb-btn[aria-pressed='true'] {
  background: var(--text);
  color: var(--canvas);
  border-color: var(--text);
}
.ai-cb-more-btn[aria-expanded='true'] svg {
  transform: rotate(180deg);
}
.ai-cb-end {
  width: 44px;
  background: var(--error);
  border-color: var(--error);
  color: var(--on-danger, #fff);
}
.ai-cb-btn:focus-visible,
.ai-cb-end:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.ai-cb .ai-cf-note {
  font-size: 12.5px;
}
.ai-cb .ai-cf-ctrl {
  justify-content: flex-end;
}
.ai-cb .ai-cf-ctrl > * {
  flex: none;
}
.ai-cb .field {
  margin: 0;
}
.ai-cb-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 6px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.ai-cb-panel .ai-call-tx {
  max-height: min(220px, 32vh);
  font-size: 13px;
}
.ai-cb-panel .ai-call-type .input {
  min-height: 36px;
  font-size: 14px;
}
.ai-cb-sec > summary {
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ai-cb-sec[open] > summary {
  margin-bottom: 6px;
}
.ai-cb-sec > summary::-webkit-details-marker {
  display: none;
}
.ai-cb-sec > summary::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 4px 0 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}
.ai-cb-sec[open] > summary::before {
  transform: rotate(45deg);
}
.ai-cb-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ai-cb-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 6px;
  white-space: nowrap;
}
.ai-cb-sec .ai-call-say {
  justify-content: flex-start;
}
.ai-cb-sec .ai-call-say .chip {
  font-size: 12.5px;
}
.ai-cb-meter {
  width: 64px;
  height: 6px;
  margin: 0;
}
.ai-cb-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 0;
}
.ai-cb-foot .ai-ctx {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.ai-cb-dev > summary {
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 760px) {
  .ai-call.ai-cb {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: auto;
  }
  .ai-cb-btn {
    width: 40px;
    height: 40px;
  }
  .ai-cb-end {
    width: 48px;
    height: 40px;
  }
  .ai-cb-panel .ai-call-tx {
    max-height: 26vh;
  }
}
/* Call bar note (greeting, microphone, sound, reconnect): one short line under the bar, read by screen readers. */
.ai-cb-note {
  margin: 0 6px 2px 20px;
  font-size: 12.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Connect once journey: progress list and the collapsed advanced section. */
.co-progress {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.co-review {
  margin: 0;
}
.co-advanced > summary {
  cursor: pointer;
  list-style: revert;
}
.co-advanced > summary h2 {
  display: inline;
  font-size: inherit;
}
/* Official WordPress and Shopify marks on their top-level sidebar entries (brand/PROVENANCE.md): shown at the
   icon size with their own proportions, the dark mark in the light theme and the white mark in the dark theme. */
.brand-mark {
  display: inline-flex;
  flex: none;
  width: 16px;
  height: 16px;
}
.brand-mark img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.brand-mark .bm-dark {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .brand-mark .bm-light {
    display: none;
  }
  :root:not([data-theme='light']) .brand-mark .bm-dark {
    display: block;
  }
}
:root[data-theme='dark'] .brand-mark .bm-light {
  display: none;
}
:root[data-theme='dark'] .brand-mark .bm-dark {
  display: block;
}

/* DASTER SMS (owner SMS + Mobile OTP final UI closure): section headings inside a tab, the Mobile OTP section list
   that replaces its second tab bar, and the message preview. Neutral tokens only. */
.h3 {
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}
.otp-sections {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 8px;
}
.otp-sections li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-width: 0;
}
.otp-sections a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  min-width: 0;
}
.otp-sections a strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.otp-sections a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
  border-radius: 4px;
}
.sms-bubble {
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: 16px 16px 16px 4px;
  padding: 10px 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 20px;
  min-height: 44px;
  max-width: 34ch;
}
.sms-bubble mark {
  background: var(--selected);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}
[data-sms-log-filters] .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
[data-sms-log-filters] .filters select {
  width: auto;
}

/* ===== Public homepage and account entry (owner P0 redesign, 2026-10-27) =====
   Live references inspected 2026-10-27: https://resend.com/ (nav controls 40 px / 14 px / 16 px padding; hero
   action 48 px / 16 px / 20 px padding; serif display 96/96, 64 on phones; body 18/27) and
   https://supabase.com/dashboard/sign-in and /sign-up (384 px form column, providers first, "or", recovery
   link on the password label row). Scale and rhythm only; DASTER's composition, copy and connection map
   are its own. Black-and-white tokens; the hero and closing band are dark by design in both themes. */
.bf {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--protobar-h));
}
.bf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.bf-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.bf-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.bf-main {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 24px 16px 40px;
}
.bf-foot {
  text-align: center;
  padding: 0 16px 24px;
}

/* --- Homepage --- */
.dh {
  --dh-ink: #0a0a0a;
  --dh-ink-text: #fafafa;
  --dh-ink-muted: #a1a1aa;
  --dh-ink-line: rgb(255 255 255 / 16%);
  --dh-gutter: max(20px, min(5vw, 48px));
  background: var(--surface);
  color: var(--text);
}
.dh-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: max(var(--dh-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--dh-gutter), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}
.dh-top {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--dh-ink);
  color: var(--dh-ink-text);
  border-bottom: 1px solid var(--dh-ink-line);
}
.dh-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
.dh-top .mark,
.dh-foot .mark {
  background: var(--dh-ink-text);
  color: var(--dh-ink);
}
.dh-foot .mark {
  background: var(--text);
  color: var(--surface);
}
.dh-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dh-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 12px;
}
.dh-navlink {
  height: 40px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--dh-ink-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;
}
.dh-navlink:hover {
  color: var(--dh-ink-text);
}
.dh .btn {
  border-radius: 10px;
}
.dh-btn-nav {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
}
.dh-top .btn-ghost {
  color: var(--dh-ink-text);
}
.dh-top .btn-ghost:hover {
  background: rgb(255 255 255 / 10%);
}
.dh-top .btn-primary,
.dh-hero .btn-primary,
.dh-close .btn-primary {
  background: var(--dh-ink-text);
  color: var(--dh-ink);
  border-color: var(--dh-ink-text);
}
.dh-top .btn-primary:hover,
.dh-hero .btn-primary:hover,
.dh-close .btn-primary:hover {
  background: #d4d4d8;
}
.dh :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.dh-top :focus-visible,
.dh-hero :focus-visible,
.dh-close :focus-visible {
  outline-color: #93c5fd;
}
.dh-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
/* Truth strip and the development-preview note. */
.dh-truths {
  border-bottom: 1px solid var(--border);
}
.dh-truths ul {
  list-style: none;
  margin: 0;
  padding: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}
.dh-truths strong {
  display: block;
  color: var(--text);
  font-weight: 600;
}
.dh-preview {
  margin: 24px 0 28px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
  max-width: 72em;
}
/* Sections */
.dh-section {
  padding: clamp(72px, 10vw, 136px) 0 0;
}
.dh-head {
  display: grid;
  gap: 16px;
  max-width: 40em;
}
.dh .dh-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 32;
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.dh-lede {
  margin: 0;
  font-size: 18px;
  line-height: 27px;
  color: var(--muted);
}
.dh-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--faint);
}
/* Three ways in: columns divided by hairlines, not cards. */
.dh-paths {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
/* Three ways in: a card per way, its mark on a lit dark tile, a faint glow in the brand's own colour. */
.dh-path {
  --glow: 148 163 184;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(90% 70% at 0% 0%, rgb(var(--glow) / 16%), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--text) 4%, transparent), transparent 50%),
    var(--surface);
  transition:
    border-color 220ms var(--ease),
    transform 220ms var(--ease);
}
.dh-path:hover {
  border-color: rgb(var(--glow) / 55%);
  transform: translateY(-3px);
}
.dh-path-cloud {
  --glow: 125 211 252;
}
.dh-path-wordpress {
  --glow: 33 117 155;
}
.dh-path-shopify {
  --glow: 149 191 71;
}
.dh-path-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dh-path-mark {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fafafa;
  background:
    radial-gradient(circle at 30% 20%, rgb(var(--glow) / 55%), transparent 70%),
    linear-gradient(160deg, #1c1c1f, #050505);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 18%),
    0 0 0 1px rgb(255 255 255 / 8%),
    0 14px 30px rgb(var(--glow) / 28%);
}
.dh-path-mark img {
  display: block;
}
.dh-path-chips {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dh-path-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--canvas);
  font-size: 12.5px;
  color: var(--text);
}
.dh-path-chips svg {
  color: rgb(var(--glow));
  flex: none;
}
.dh-path .dh-path-go {
  margin-top: auto;
  padding-top: 8px;
}
/* Icon tiles across the public pages: a lit gradient tile, so the marks feel like DASTER's site,
   not the app's toolbar. */
.dh .dh-job-ic,
.dh .dh-mega-ic,
.dh .dh-truth-ic,
.dh .dp-usage-ic,
.dh .dp-free-ic {
  position: relative;
  border: 0;
  color: var(--text);
  background:
    radial-gradient(
      circle at 30% 20%,
      color-mix(in srgb, var(--text) 22%, transparent),
      transparent 70%
    ),
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--text) 12%, transparent),
      color-mix(in srgb, var(--text) 3%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 22%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent),
    0 8px 20px color-mix(in srgb, var(--text) 8%, transparent);
}
.dh .dh-mega-ic {
  color: #fafafa;
  background:
    radial-gradient(circle at 30% 20%, rgb(255 255 255 / 25%), transparent 70%),
    linear-gradient(160deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 3%));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    inset 0 0 0 1px rgb(255 255 255 / 10%);
}
@media (max-width: 1023px) {
  .dh-paths {
    grid-template-columns: minmax(0, 1fr);
  }
}
.dh-paths h3 {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.dh-paths p {
  margin: 0;
  color: var(--muted);
  line-height: 22px;
}
.dh-mono {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 22px;
  color: var(--faint);
}
.dh-mono li::before {
  content: '— ';
}
/* Chapters: a sticky index beside the story; each chapter is copy beside a typographic specimen. */
.dh-ch-grid {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 4fr);
  gap: clamp(28px, 5vw, 72px);
  margin-top: 48px;
  border-top: 1px solid var(--text);
}
.dh-ch-index {
  position: sticky;
  top: 88px;
  align-self: start;
  padding-top: 28px;
}
.dh-ch-index ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.dh-ch-index button {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--faint);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.dh-ch-index button span {
  font-family: var(--font-mono);
  font-size: 12px;
  width: 20px;
}
.dh-ch-index button:hover,
.dh-ch-index button[aria-current='true'] {
  color: var(--text);
}
.dh-ch-index button[aria-current='true'] {
  font-weight: 600;
}
.dh-chapter {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding: 28px 0 56px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 88px;
}
.dh-chapter:last-child {
  border-bottom: 0;
}
.dh-chapter-copy {
  display: grid;
  gap: 14px;
  max-width: 30em;
}
.dh-chapter h3 {
  margin: 0;
  font-weight: 500;
  font-variation-settings: 'opsz' 32;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.dh-chapter p {
  margin: 0;
  color: var(--muted);
  line-height: 24px;
}
.dh-spec {
  margin: 0;
  display: grid;
}
.dh-spec > div {
  display: grid;
  grid-template-columns: minmax(96px, 0.8fr) minmax(0, 2fr);
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.dh-spec > div:last-child {
  border-bottom: 1px solid var(--border);
}
.dh-spec dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dh-spec dd {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  color: var(--text);
}
/* First goal: rows, not tiles. */
.dh-two {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: start;
}
.dh-goals {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--text);
}
.dh-goal {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dh-goal-t {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}
.dh-goal-d {
  grid-column: 1;
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}
.dh-goal-go {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 20px;
  transition: transform 160ms var(--ease);
}
.dh-goal:hover .dh-goal-go,
.dh-goal:focus-visible .dh-goal-go {
  transform: translateX(4px);
}
/* Steps */
.dh-steps {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.dh-steps li {
  display: grid;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--text);
}
.dh-steps .dh-num {
  font-family: var(--font-editorial);
  font-size: 48px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--text);
}
.dh-steps h3 {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}
.dh-steps p {
  margin: 0;
  color: var(--muted);
  line-height: 22px;
}
/* Closing statement */
.dh-close {
  margin-top: clamp(72px, 10vw, 136px);
  background: var(--dh-ink);
  color: var(--dh-ink-text);
  padding: clamp(64px, 9vw, 120px) 0;
}
.dh .dh-close h2 {
  margin: 0;
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
}
.dh-close-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--dh-ink-muted);
  font-size: 14px;
}
.dh-close-link:hover {
  color: var(--dh-ink-text);
}
@media (max-width: 1023px) {
  .dh-chapter,
  .dh-two,
  .dh-ch-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .dh-ch-index {
    display: none;
  }
}
@media (max-width: 860px) {
  .dh-nav {
    display: none;
  }
}
@media (max-width: 760px) {
  .dh-truths ul,
  .dh-paths,
  .dh-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Compact header buttons on phones (36 px, above the 24 px WCAG 2.2 AA target size). */
  .dh-btn-nav {
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }
  .dh-top-row {
    min-height: 60px;
  }
  .dh-spec > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}
@media (max-width: 420px) {
  .dh-top .btn-ghost {
    padding: 0 10px;
  }
  .dh-top .wordmark {
    display: none;
  }
}

/* --- Homepage below the hero, and the public pricing page (Claude, 2026-10-27; live resend.com reference):
   Products menu, "works with" row, developer code window, product index, chapter windows, site footer. --- */
/* Products menu: a panel under the sticky header; on phones the same panel is the site menu. */
.dh-caret {
  display: inline-flex;
  margin-left: 4px;
  opacity: 0.7;
  transform: rotate(90deg);
  transition: transform 160ms var(--ease);
}
.dh-navlink[aria-expanded='true'] {
  color: var(--dh-ink-text);
}
.dh-navlink[aria-expanded='true'] .dh-caret {
  transform: rotate(-90deg);
}
.dh-menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--dh-ink-line);
  border-radius: 10px;
  background: none;
  color: var(--dh-ink-text);
  cursor: pointer;
}
.dh-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: 24px 0 28px;
  background: var(--dh-ink);
  color: var(--dh-ink-text);
  border-bottom: 1px solid var(--dh-ink-line);
  box-shadow: 0 32px 64px rgb(0 0 0 / 45%);
}
.dh-mega[hidden] {
  display: none;
}
.dh-mega-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 24px;
}
.dh-mega-h {
  margin: 0 0 8px;
  padding-left: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dh-ink-muted);
}
.dh-mega ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.dh-mega-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dh-mega-item:hover,
.dh-mega-item:focus-visible {
  background: rgb(255 255 255 / 7%);
}
.dh-mega-ic {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--dh-ink-line);
  border-radius: 8px;
}
.dh-mega-t {
  display: grid;
  gap: 2px;
}
.dh-mega-t strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.dh-mega-t span {
  font-size: 13px;
  line-height: 18px;
  color: var(--dh-ink-muted);
}
.dh-mega-more {
  display: none;
}
.dh-mega-link {
  height: 44px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--dh-ink-text);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.dh-mega-link:hover {
  background: rgb(255 255 255 / 7%);
}
@media (max-width: 860px) {
  .dh-menu-btn {
    display: grid;
  }
  .dh-mega {
    max-height: calc(100svh - 60px - var(--protobar-h));
    overflow: auto;
    overscroll-behavior: contain;
  }
  .dh-mega-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dh-mega-more {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--dh-ink-line);
  }
}
@media (max-width: 560px) {
  .dh-mega-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Works with: names of the tools DASTER connects to, on the hero's dark ground. */
.dh-works {
  padding: 40px 0 52px;
  background: var(--dh-ink);
  color: var(--dh-ink-text);
  border-top: 1px solid var(--dh-ink-line);
}
.dh-works-h {
  margin: 0 0 22px;
  text-align: center;
  font-size: 14px;
  color: var(--dh-ink-muted);
}
.dh-works-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dh-works-list svg,
.dh-works-list img {
  flex: none;
  opacity: 0.9;
}
.dh-works-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 980px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 36px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #d4d4d8;
}
/* Truths: three short promises, each with a small mark. */
.dh-truths ul {
  padding-top: 40px;
}
.dh-truth-ic {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.dh-path-go {
  margin-top: 6px;
  width: fit-content;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.dh-path-go:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Developers: copy beside a code window built from the real SDK and CLI. */
.dh-dev-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
/* "Read the docs" under the developer points (the documentation site, apps/website /docs/). */
.dh-dev-cta {
  margin: 28px 0 0;
}
.dh-dev-points {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.dh-dev-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 22px;
  color: var(--muted);
}
.dh-dev-points svg {
  flex: none;
  margin-top: 2px;
  color: var(--text);
}
.dh-dev-points strong {
  color: var(--text);
}
.dh-code {
  min-width: 0;
}
.dh-code-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.dh-code-tabs [role='tab'] {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.dh-code-tabs [role='tab']:hover {
  color: var(--text);
}
.dh-code-tabs [aria-selected='true'] {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}
.dh-code-win {
  overflow: hidden;
  background: #0a0a0a;
  color: #e4e4e7;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 6%),
    0 24px 60px rgb(0 0 0 / 22%);
}
.dh-code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  font-family: var(--font-mono);
  font-size: 12px;
  color: #a1a1aa;
}
.dh-code-copy {
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 8px;
  background: none;
  color: #e4e4e7;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.dh-code-copy:hover {
  background: rgb(255 255 255 / 8%);
}
.dh-code-pre {
  margin: 0;
  min-height: 320px;
  padding: 20px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 22px;
  tab-size: 2;
}
.dh-code-pre:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: -2px;
}
.tk-k {
  color: #fafafa;
  font-weight: 600;
}
.tk-s {
  color: #a1a1aa;
}
.tk-c {
  color: #71717a;
  font-style: italic;
}
.dh-chapters .dh-ch-grid {
  margin-top: clamp(56px, 7vw, 96px);
}
/* Platform chapters as tabs (one panel at a time keeps the homepage short). */
.dh-ch-tabs {
  margin-top: clamp(40px, 5vw, 64px);
}
.dh-ch-index[role='tablist'] {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin-bottom: 24px;
}
.dh-ch-index[role='tablist'] button {
  width: auto;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
}
.dh-ch-index[role='tablist'] button[aria-selected='true'] {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
  font-weight: 600;
}
.dh-ch-tabs .dh-chapter {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    radial-gradient(
      70% 90% at 100% 0%,
      color-mix(in srgb, var(--text) 6%, transparent),
      transparent 70%
    ),
    var(--surface);
}
.dh-ch-tabs .dh-chapter[hidden] {
  display: none;
}
@media (max-width: 1023px) {
  .dh-ch-tabs .dh-ch-index {
    display: flex;
  }
}
@media (max-width: 640px) {
  .dh-ch-index[role='tablist'] {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .dh-ch-tabs .dh-chapter {
    padding: 20px;
  }
}
/* A chapter's rows inside a quiet product window. */
.dh-window {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 4%),
    0 16px 40px rgb(0 0 0 / 7%);
}
.dh-window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  background: var(--canvas);
  border-bottom: 1px solid var(--border);
}
.dh-window-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
}
.dh-window-bar span {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.dh-window .dh-spec {
  padding: 2px 20px;
}
.dh-window .dh-spec > div:first-child {
  border-top: 0;
}
.dh-window .dh-spec > div:last-child {
  border-bottom: 0;
}
/* Closing band: a soft light rising from the bottom edge. */
.dh-close {
  position: relative;
  overflow: hidden;
}
.dh-close .dh-wrap {
  position: relative;
}
.dh-close-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 70% at 50% 120%, rgb(255 255 255 / 12%), transparent 70%);
}
/* Site footer: brand, three product columns and the account links. */
.dh-foot {
  padding: 64px 0 40px;
  border-top: 1px solid var(--border);
}
.dh-foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.dh-foot-brand p {
  margin: 14px 0 0;
  max-width: 20em;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}
.dh-foot nav {
  display: grid;
  align-content: start;
  gap: 10px;
}
.dh-foot-h {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.dh-foot-a {
  width: fit-content;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.dh-foot-a:hover {
  color: var(--text);
}
.dh-foot-a,
.dh-path-go,
.dh-close-link {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}
.dh-foot-note {
  margin: 48px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--faint);
}
@media (pointer: coarse) {
  .dh-foot-a {
    padding: 6px 0;
  }
}
@media (max-width: 1023px) {
  .dh-dev-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 860px) {
  .dh-foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dh-foot-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .dh-code-pre {
    min-height: 0;
    font-size: 12px;
    line-height: 20px;
  }
}

/* Two-tone section headings: a quiet lead-in, then the point. */
.dh-dim {
  color: var(--faint);
}
/* What you can do: a bento of jobs, each card with a small drawn picture of the job. */
.dh-jobs {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.dh-job {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 320px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 4%, transparent), transparent 55%),
    var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent);
  transition:
    border-color 200ms var(--ease),
    transform 200ms var(--ease);
}
.dh-job::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto auto;
  width: 70%;
  height: 80%;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--text) 9%, transparent),
    transparent
  );
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
.dh-job:hover {
  border-color: color-mix(in srgb, var(--text) 28%, var(--border));
}
.dh-job:hover::before {
  opacity: 1;
}
.dh-job-wide {
  grid-column: span 2;
  flex-direction: row;
}
.dh-job-wide .dh-job-copy {
  flex: 0 0 42%;
}
.dh-job-ic {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--canvas);
  color: var(--text);
}
.dh-job h3 {
  margin: 16px 0 6px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.dh-job p {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}
/* The drawn pictures (decorative). */
.ja {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  font-size: 12px;
  line-height: 16px;
}
.ja-ok {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text);
  color: var(--surface);
  vertical-align: -3px;
}
.ja-browser {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--canvas);
  overflow: hidden;
}
.ja-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
}
.ja-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
}
.ja-bar span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 6px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.ja-page {
  display: grid;
  gap: 8px;
  padding: 12px;
}
.ja-page b {
  display: block;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 9%, transparent);
}
.ja-page .ja-hero {
  height: 54px;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--text) 18%, transparent),
    color-mix(in srgb, var(--text) 5%, transparent)
  );
}
.ja-row3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ja-row3 b {
  height: 34px;
}
.ja-line {
  height: 8px;
}
.ja-short {
  width: 60%;
}
.ja-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 11px;
  font-weight: 500;
}
.ja-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ja-feed li {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--canvas);
}
.ja-feed li:nth-child(2) {
  margin-left: 12px;
  opacity: 0.85;
}
.ja-feed li:nth-child(3) {
  margin-left: 24px;
  opacity: 0.6;
}
.ja-feed span {
  color: var(--muted);
}
.ja-term {
  padding: 14px;
  border-radius: 12px;
  background: #0a0a0a;
  border: 1px solid rgb(255 255 255 / 10%);
  color: #d4d4d8;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 22px;
}
.ja-term p {
  margin: 0;
}
.ja-term em {
  display: inline-block;
  width: 22px;
  font-style: normal;
  color: #a1a1aa;
}
.ja-term .ja-ok {
  background: #fafafa;
  color: #0a0a0a;
}
.ja-cursor {
  color: #fafafa;
}
@media (prefers-reduced-motion: no-preference) {
  .ja-cursor {
    animation: ja-blink 1.1s steps(1) infinite;
  }
  @keyframes ja-blink {
    50% {
      opacity: 0;
    }
  }
}
.ja-table {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.ja-table p {
  margin: 0;
  display: grid;
  grid-template-columns: 40px 1fr 60px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}
.ja-table p:first-child {
  border-top: 0;
  background: var(--canvas);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.ja-chans {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ja-chans span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--canvas);
  font-weight: 500;
}
.ja-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 96px;
  padding: 0 2px;
  border-bottom: 1px solid var(--border);
}
.ja-bars b {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--text) 55%, transparent),
    color-mix(in srgb, var(--text) 10%, transparent)
  );
}
.ja-move {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ja-node {
  padding: 6px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-family: var(--font-mono);
  color: var(--muted);
}
.ja-node-d {
  border-style: solid;
  border-color: var(--text);
  color: var(--text);
  font-weight: 600;
}
.ja-arrow {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--text) 0 6px, transparent 6px 12px);
  opacity: 0.5;
}
@media (prefers-reduced-motion: no-preference) {
  .ja-arrow {
    background-size: 24px 1px;
    animation: ja-flow 1.2s linear infinite;
  }
  @keyframes ja-flow {
    to {
      background-position: 24px 0;
    }
  }
}
.ja-steps {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ja-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ja-wait {
  width: 16px;
  height: 16px;
  border: 1.5px dashed var(--muted);
  border-radius: 50%;
}
.ja-chat {
  display: grid;
  gap: 10px;
}
.ja-you {
  justify-self: end;
  max-width: 80%;
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px 12px 4px 12px;
  background: var(--text);
  color: var(--surface);
  font-weight: 500;
}
.ja-plan {
  display: grid;
  gap: 6px;
  max-width: 88%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px 12px 12px 4px;
  background: var(--canvas);
}
.ja-plan span {
  color: var(--muted);
}
.ja-plan span::before {
  content: '— ';
}
.ja-btns {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.ja-btns b {
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--text);
  color: var(--surface);
  font-weight: 600;
}
.ja-btns .ja-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.ja-wallet {
  display: grid;
  gap: 8px;
}
.ja-wallet p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
}
.ja-wallet strong {
  color: var(--text);
}
.ja-meter {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
.ja-meter b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--text);
}
.ja-meter-limit b {
  opacity: 0.6;
}
.ja-meter i {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 16px;
  background: var(--text);
}
.ja-split {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.ja-split span {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
}
/* One dashboard: real screens in a lit frame, switched by tabs. */
.dh-show-box {
  margin-top: 40px;
}
.dh-show-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.dh-show-tabs [role='tab'] {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.dh-show-tabs [role='tab']:hover {
  color: var(--text);
}
.dh-show-tabs [aria-selected='true'] {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}
.dh-show-frame {
  position: relative;
  isolation: isolate;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent),
    0 40px 100px rgb(0 0 0 / 28%);
}
.dh-show-glow {
  position: absolute;
  inset: -12% 8% auto;
  height: 50%;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--text) 16%, transparent),
    transparent
  );
  filter: blur(40px);
  pointer-events: none;
}
.dh-show-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 11px;
  border: 1px solid var(--border);
}
/* Who it is for: four columns with three facts each. */
.dh-who {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.dh-who > li {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, transparent), transparent 60%),
    var(--surface);
}
.dh-who h3 {
  margin: 0;
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.05;
}
.dh-who p {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}
.dh-who ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 12px 0 0;
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.dh-who ul li {
  display: flex;
  gap: 8px;
}
/* Move from…: four sources DASTER can bring over. */
.dh-moves {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.dh-moves > li {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 4%, transparent), transparent 55%),
    var(--surface);
}
.dh-moves h3 {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 23px;
  font-weight: 600;
}
.dh-moves p {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}
.dh-moves .dh-move-from {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}
.dh-move-go {
  margin-top: 24px;
}
/* Four tools, one account: a three-column comparison without prices. */
.dh-stack {
  margin-top: 44px;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}
.dh-stack-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.7fr) minmax(0, 1.4fr) minmax(0, 1.6fr);
  gap: 16px;
  align-items: center;
  padding: 16px 22px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  line-height: 22px;
}
.dh-stack-row:first-child {
  border-top: 0;
}
.dh-stack-h {
  background: var(--canvas);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.dh-stack-sep {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent);
}
.dh-stack-us {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
}
.dh-stack-total {
  background: color-mix(in srgb, var(--dh-tick) 7%, var(--surface));
  font-weight: 600;
}
.dh-stack-total .dh-stack-us {
  color: color-mix(in srgb, var(--dh-tick) 70%, var(--text));
}
@media (max-width: 1023px) {
  .dh-moves {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .dh-moves {
    grid-template-columns: minmax(0, 1fr);
  }
  .dh-stack-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .dh-stack-h {
    display: none;
  }
}
.dh-dev-points .dh-job-ic,
.dp-flow-stop .dh-job-ic {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
}
.dh-dev-points li {
  align-items: center;
}
/* Site icons move a little when their card or row is hovered: a small lift and tilt, nothing more. */
@media (prefers-reduced-motion: no-preference) {
  .dh .si {
    transition: transform 260ms var(--ease);
  }
  .dh-job:hover .si,
  .dh-moves > li:hover .si,
  .dp-usage > li:hover .si,
  .dh-mega-item:hover .si,
  .dh-mega-item:focus-visible .si,
  .dh-path:hover .dh-path-mark .si,
  .dh-dev-points li:hover .si,
  .dp-free-list li:hover .si {
    transform: translateY(-1px) rotate(-8deg) scale(1.06);
  }
}
/* Cards rise into place once (js watchReveal); off for reduced motion. */
.dh-reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 420ms var(--ease) var(--d, 0ms),
    transform 420ms var(--ease) var(--d, 0ms),
    border-color 200ms var(--ease);
}
@media print {
  .dh-reveal-on [data-reveal] {
    opacity: 1;
    transform: none;
  }
}
.dh-reveal-on [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (max-width: 1023px) {
  .dh-jobs,
  .dh-who {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .dh-jobs,
  .dh-who {
    grid-template-columns: minmax(0, 1fr);
  }
  .dh-job-wide {
    grid-column: auto;
    flex-direction: column;
  }
  .dh-job {
    min-height: 0;
  }
}

/* Public pricing page (#pricing): centred statement, plan cards, how a month is paid, usage per product,
   a comparison table and questions. Facts only; prices are labelled samples. */
.dp-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 10vw, 136px) 0 clamp(40px, 5vw, 64px);
  background: var(--dh-ink);
  color: var(--dh-ink-text);
  text-align: center;
}
.dp-hero .dh-wrap {
  position: relative;
  display: grid;
  justify-items: center;
}
.dp-hero-glow {
  position: absolute;
  left: 50%;
  top: -30%;
  width: min(900px, 120vw);
  height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(255 255 255 / 14%), transparent);
  filter: blur(30px);
  pointer-events: none;
}
.dp-hero .dh-kicker {
  color: var(--dh-ink-muted);
}
.dp .dp-hero h1 {
  margin: 18px 0 0;
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.dp-hero .dh-lede {
  margin-top: 22px;
  max-width: 34em;
  color: var(--dh-ink-muted);
}
.dp-sample {
  margin: 28px 0 0;
  max-width: 44em;
  padding: 10px 16px;
  border: 1px solid var(--dh-ink-line);
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
  font-size: 13px;
  line-height: 20px;
  color: var(--dh-ink-muted);
}
.dp-sample strong {
  color: var(--dh-ink-text);
}
.dp-section {
  padding: clamp(64px, 8vw, 112px) 0 0;
}
/* Plans: four cards on the dark band's edge, Enterprise as one wide row below. */
.dp-plans-s {
  padding-top: 0;
  background: linear-gradient(180deg, var(--dh-ink) 0 120px, transparent 120px);
}
.dp-plans {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.dp-plan {
  /* Each card spans two rows of the plan grid (subgrid), so every card's top part has the same height and
     the buttons line up; the button sits at the bottom of that top part. */
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  cursor: pointer;
  transition:
    border-color 200ms var(--ease),
    box-shadow 200ms var(--ease),
    transform 200ms var(--ease);
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 4%, transparent), transparent 50%),
    var(--surface);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent),
    0 24px 60px rgb(0 0 0 / 14%);
}
.dp-plan-mark {
  border-color: var(--text);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent),
    0 0 0 1px var(--text),
    0 30px 80px rgb(0 0 0 / 22%);
}
.dp-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--text);
  color: var(--surface);
  font-size: 11px;
  font-weight: 600;
  vertical-align: 2px;
}
.dp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.dp-plan:hover {
  border-color: color-mix(in srgb, var(--text) 35%, var(--border));
}
.dp-plan-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}
.dp-plan h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.dp-for {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}
.dp-price {
  margin: 6px 0 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}
.dp-price .num {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--text);
}
.dp-incl {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}
.dp-incl strong {
  color: var(--text);
}
.dp-plan-go {
  margin-top: auto;
  height: 44px;
  justify-content: center;
  border-radius: 10px;
}
.dp-plan ul {
  list-style: none;
  margin: 0;
  padding: 20px 24px 24px;
  display: grid;
  gap: 10px;
  font-size: 14px;
  line-height: 20px;
}
.dp-plan ul li {
  display: flex;
  gap: 10px;
}
.dp-ent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 12px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
}
.dp-ent h3 {
  margin: 0 0 4px;
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: 30px;
}
.dp-ent p {
  margin: 0;
  max-width: 44em;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}
.dp-chip,
.dp-nd {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 26px;
  padding: 0 10px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
}
/* Plan finder: sliders on the left, the plan that fits on the right. */
.dp-find {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    radial-gradient(
      60% 120% at 100% 0%,
      color-mix(in srgb, var(--dh-tick) 8%, transparent),
      transparent 70%
    ),
    var(--surface);
}
.dp-find-in {
  display: grid;
  gap: 22px;
}
.dp-find-l {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 14px;
}
.dp-find-l label {
  color: var(--muted);
}
.dp-find-l output {
  font-weight: 600;
}
.dp-find input[type='range'] {
  width: 100%;
  height: 24px;
  accent-color: var(--dh-tick);
  cursor: pointer;
}
.dp-find-out {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 24px;
  border-radius: 16px;
  background: var(--canvas);
  border: 1px solid var(--border);
}
.dp-find-out p {
  margin: 0;
}
.dp-find-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.dp-find-name {
  font-family: var(--font-editorial);
  font-size: 48px;
  line-height: 1;
}
.dp-find-why {
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}
.dp-find-out .dp-plan-go {
  margin-top: 8px;
  height: 44px;
  justify-content: center;
  border-radius: 10px;
}
@media (max-width: 760px) {
  .dp-find {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px;
  }
}
/* How a month is paid: three steps in order, and the limit that stops them. */
.dp-flow {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 12px;
}
.dp-flow-step {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.dp-flow-step strong {
  font-size: 17px;
}
.dp-flow-step span:last-child {
  font-size: 14px;
  color: var(--muted);
}
.dp-flow-n {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--text);
  color: var(--surface);
  font-size: 13px;
  font-weight: 600;
}
.dp-flow-arrow {
  display: grid;
  place-items: center;
  color: var(--muted);
}
.dp-flow-stop {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border: 1px dashed color-mix(in srgb, var(--text) 40%, var(--border));
  border-radius: 16px;
  font-size: 14px;
  color: var(--muted);
}
.dp-flow-stop strong {
  color: var(--text);
}
/* Usage per product: small cards, every rate honestly "not defined yet". */
.dp-usage {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.dp-usage > li {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, transparent), transparent 60%),
    var(--surface);
}
.dp-usage-ic {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--canvas);
}
.dp-usage h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.dp-usage p {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}
/* The Free plan, compared: one big figure, then a table with DASTER's column lit. */
.dp-free-hero {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px 48px;
  align-items: center;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    radial-gradient(
      60% 120% at 0% 0%,
      color-mix(in srgb, var(--text) 9%, transparent),
      transparent 70%
    ),
    var(--surface);
}
.dp-free-lead {
  display: grid;
  gap: 20px;
}
.dp-free-hero p {
  margin: 0;
  display: grid;
  gap: 4px;
  color: var(--muted);
}
.dp-free-big .num {
  font-family: var(--font-editorial);
  font-size: clamp(64px, 9vw, 120px);
  line-height: 0.9;
  color: var(--text);
}
.dp-free-day .num {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
}
.dp-free-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.dp-free-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'ic n' 'ic t';
  column-gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--canvas);
}
.dp-free-ic {
  grid-area: ic;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.dp-free-list strong {
  grid-area: n;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.02em;
}
.dp-free-list li > span:last-child {
  grid-area: t;
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 860px) {
  .dp-free-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
  }
}
@media (max-width: 420px) {
  .dp-free-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
.dp-vs {
  min-width: 720px;
}
.dp-vs td {
  vertical-align: top;
  line-height: 21px;
}
.dp-vs .dp-vs-us {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
}
.dp-vs thead .dp-vs-us {
  background: var(--text);
  color: var(--surface);
}
.dp-src {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--faint);
}
.dp-src a {
  color: inherit;
}
/* Ticks: a small lit mint badge, the one accent on the public pages (Resend-like warmth, DASTER's own mark).
   The tick colour mixes toward the text colour so it reads in both themes. */
.dh {
  --dh-tick: #10b981;
}
.dp-tick {
  flex: none;
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  margin-top: 1px;
  border-radius: 50%;
  color: color-mix(in srgb, var(--dh-tick) 78%, var(--text));
  background:
    radial-gradient(
      circle at 30% 25%,
      color-mix(in srgb, var(--dh-tick) 30%, transparent),
      transparent 70%
    ),
    color-mix(in srgb, var(--dh-tick) 14%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--dh-tick) 38%, transparent),
    0 0 12px color-mix(in srgb, var(--dh-tick) 22%, transparent);
}
.dp-tick svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.5;
}
.dp-plan-mark .dp-tick {
  color: #052e1c;
  background: linear-gradient(160deg, #6ee7b7, var(--dh-tick));
  box-shadow: 0 0 14px color-mix(in srgb, var(--dh-tick) 45%, transparent);
}
.dp-plus {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.dp-yes {
  width: 22px;
  height: 22px;
}
.dp-yes svg {
  width: 12px;
  height: 12px;
}
/* Compare plans. */
.dp-table-wrap {
  /* Positioned so the screen-reader-only labels in its cells are clipped with the table on phones. */
  position: relative;
  margin-top: 44px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.dp-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14px;
}
.dp-table th,
.dp-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.dp-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  font-size: 15px;
  font-weight: 600;
}
.dp-table tbody th[scope='row'] {
  font-weight: 400;
  color: var(--muted);
}
.dp-table tr:last-child th,
.dp-table tr:last-child td {
  border-bottom: 0;
}
.dp-group th {
  padding-top: 22px;
  background: var(--canvas);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
/* Questions. */
.dp-faq {
  border-top: 1px solid var(--text);
}
.dp-faq details {
  border-bottom: 1px solid var(--border);
}
.dp-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.dp-faq summary::-webkit-details-marker {
  display: none;
}
.dp-faq summary::after {
  content: '+';
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
}
.dp-faq details[open] summary::after {
  content: '–';
}
.dp-faq p {
  margin: 0 0 20px;
  max-width: 40em;
  line-height: 22px;
  color: var(--muted);
}
.dp .dh-close {
  margin-top: clamp(72px, 10vw, 136px);
}
@media (max-width: 1100px) {
  .dp-usage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .dp-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .dp-flow {
    grid-template-columns: minmax(0, 1fr);
  }
  .dp-flow-arrow {
    transform: rotate(90deg);
  }
  .dp-ent {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 560px) {
  .dp-plans,
  .dp-usage {
    grid-template-columns: minmax(0, 1fr);
  }
  .dp-sample {
    border-radius: 12px;
  }
}

/* --- Account entry: focused form column beside a quiet DASTER panel --- */
.bf-auth .bf-head {
  border-bottom: 0;
  padding: 20px max(20px, min(4vw, 32px));
}
/* Centred account entry (Claude, 2026-10-27): the form alone on a quiet dot ground, prototype tools below it. */
.bf-auth .bf-main {
  padding: 0;
  display: flex;
}
.da-center {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.da-ground {
  /* Canvas drawn by mountAuthDots (screens-entry.js); faded toward the bottom so the form stays calm. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: var(--text);
  -webkit-mask-image: radial-gradient(85% 75% at 50% 0%, #000 0%, transparent 80%);
  mask-image: radial-gradient(85% 75% at 50% 0%, #000 0%, transparent 80%);
}
.da-form {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: clamp(32px, 9vh, 104px) max(20px, min(5vw, 48px)) 56px;
}
.da-proto {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
}
.da-proto .da-sbx {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}
.da-form-inner {
  width: min(400px, 100%);
  display: grid;
  gap: 20px;
  align-content: start;
}
.da-form-inner h1 {
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.da-sub {
  margin-top: -12px;
}
.da-form-inner .input {
  height: 44px;
  border-radius: 10px;
}
.da-form-inner [data-providers] {
  display: grid;
  gap: 10px;
}
.da-form-inner [data-providers] .btn,
.da-form-inner form .btn-primary {
  width: 100%;
  min-height: 44px;
  border-radius: 10px;
  justify-content: center;
}
.da-has-aside {
  position: relative;
}
.da-pw-aside {
  position: absolute;
  top: 0;
  right: 0;
}
.da-pw-aside a {
  color: var(--muted);
}
/* Account entry polish: a lit brand mark, a soft light from the top, the free-account perks and calmer
   inputs. */
.da-center::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -260px;
  width: min(760px, 140vw);
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--text) 10%, transparent),
    transparent
  );
  filter: blur(20px);
  pointer-events: none;
}
.da-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  border-radius: 14px;
  background: linear-gradient(
    160deg,
    var(--text),
    color-mix(in srgb, var(--text) 70%, var(--surface))
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--text) 20%, transparent),
    0 10px 30px color-mix(in srgb, var(--text) 18%, transparent);
}
.da-mark span {
  color: var(--surface);
  font-family: var(--font-editorial);
  font-size: 26px;
  line-height: 1;
}
.da-form-inner .input {
  transition:
    border-color 160ms var(--ease),
    box-shadow 160ms var(--ease);
}
.da-form-inner .input:hover {
  border-color: color-mix(in srgb, var(--text) 35%, var(--border));
}
.da-form-inner .input:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 10%, transparent);
}
.da-form-inner form .btn-primary {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 16%, transparent);
}
.da-form-inner .da-switch a {
  color: var(--text);
  font-weight: 600;
  text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent);
  text-underline-offset: 3px;
}
.da-prov-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.da-prov-hint {
  margin: 0;
  text-align: center;
}
.da-perks {
  list-style: none;
  margin: 4px 0 0;
  padding: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}
.da-perks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.da-perks .dp-tick {
  --dh-tick: #10b981;
  margin-top: 0;
}
/* Programmatic focus lands on the page heading for screen readers; keyboard rings stay on controls. */
.bf h1[tabindex='-1']:focus,
.dh h1[tabindex='-1']:focus,
.dh h2[tabindex='-1']:focus,
.dh h3[tabindex='-1']:focus {
  outline: none;
}
.da-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.da-or::before,
.da-or::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border);
}

/* --- Homepage hero: the Dot Field (owner-supplied 21st.dev component by romanvasnev, ported in js/dot-field.js).
   Dark full-width stage; the headline is drawn with dots, the pointer pushes them, scrolling scatters them.
   Copy: eyebrow on top, supporting line and the two actions at the bottom. Static and text-only fallbacks. */
.dh-hero {
  --df-top: 64px;
  /* The stage leaves the top of the next section in view (a hint that the page goes on) and stays
     compact on a tall screen: 560 to 780 px, room for the original-size headline, the line under it
     and the scroll hint. */
  --df-stage-h: clamp(560px, calc(100svh - var(--df-top) - var(--protobar-h) - 180px), 780px);
  position: relative;
  background: var(--dh-ink);
  color: var(--dh-ink-text);
}
/* No extra scroll room under the stage: the dots scatter while the hero itself scrolls away
   (js/dot-field.js), so the next section always follows the stage directly. */
.df-stage {
  position: sticky;
  top: var(--df-top);
  height: var(--df-stage-h);
  overflow: hidden;
  font-family: var(--font-sans);
}
.df-glow,
.df-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.df-glow {
  pointer-events: none;
  opacity: 0.9;
  mix-blend-mode: screen;
  filter: blur(10px);
}
.df-spot {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms;
  background: radial-gradient(
    260px circle at var(--x, 50%) var(--y, 40%),
    rgb(255 255 255 / 9%),
    transparent 70%
  );
}
.df-stage:hover .df-spot {
  opacity: 1;
}
/* The real headline: visible text until the canvas draws it, then kept for screen readers only. */
.df-title {
  position: absolute;
  inset: 0 0 auto;
  top: 30%;
  margin: 0;
  padding: 0 24px;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
}
.df-title span {
  display: block;
}
.df-live .df-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.df-copy {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  /* The scroll hint (62 px, 22 px above the stage bottom) sits centred in the space under the
     supporting line: 22 px above it, 22 px below it. */
  padding: clamp(28px, 6vh, 56px) 20px 106px;
  text-align: center;
}
.df-live .df-copy {
  opacity: 0;
}
.df-live.df-ready .df-copy {
  transition: opacity 600ms var(--ease);
}
.df-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--dh-ink-line);
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dh-ink-muted);
}
.df-eyebrow i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #fafafa;
  box-shadow: 0 0 10px #fafafa;
}
.df-bottom {
  display: grid;
  justify-items: center;
  max-width: 620px;
}
.df-bottom .dh-hero-lede {
  margin: 0;
  max-width: 34em;
  font-size: 17px;
  line-height: 25px;
  color: var(--dh-ink-muted);
}
.df-bottom .dh-cta {
  margin-top: 22px;
  justify-content: center;
  pointer-events: auto;
}
.dh-hero-lede {
  font-size: 18px;
  line-height: 27px;
  color: var(--dh-ink-muted);
}
.df-hint {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--dh-ink-muted);
  opacity: 0;
  transition: opacity 700ms;
  pointer-events: none;
}
.df-wheel {
  position: relative;
  width: 22px;
  height: 34px;
  border: 1.5px solid rgb(255 255 255 / 28%);
  border-radius: 11px;
  transition: transform 500ms;
}
.df-hint[data-up='true'] .df-wheel {
  transform: rotate(180deg);
}
.df-wheel span {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #fafafa;
}
@media (prefers-reduced-motion: no-preference) {
  .df-wheel span {
    animation: df-wheel 1.8s cubic-bezier(0.6, 0, 0.3, 1) infinite;
  }
  @keyframes df-wheel {
    0% {
      transform: translateY(0);
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    70% {
      transform: translateY(10px);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
}
.df-controls {
  position: absolute;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: 16px;
  display: flex;
  gap: 6px;
}
.df-ctl {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--dh-ink-line);
  border-radius: 999px;
  background: rgb(255 255 255 / 6%);
  color: var(--dh-ink-text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.df-ctl:hover {
  background: rgb(255 255 255 / 12%);
}
/* The text fallback (no canvas) shows only the headline and copy, already visible. */
.dh-hero:not(.df-live) .df-controls,
.dh-hero:not(.df-live) .df-hint {
  display: none;
}
@media (max-width: 760px) {
  .dh-hero {
    --df-stage-h: clamp(480px, calc(100svh - var(--df-top) - var(--protobar-h) - 160px), 600px);
  }
  .df-controls {
    bottom: 12px;
  }
  .df-ctl {
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
  }
  .df-hint {
    display: none;
  }
  .df-copy {
    padding-bottom: 56px;
  }
}
/* Shared action row (hero and closing band): one 48 px primary, one quiet secondary. */
.dh-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.dh-cta-close {
  margin-top: 36px;
}
.dh-btn-lg {
  height: 48px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
}
.dh-btn-quiet {
  background: transparent;
  color: var(--dh-ink-text);
  border: 1px solid var(--dh-ink-line);
}
.dh-btn-quiet:hover {
  background: rgb(255 255 255 / 8%);
}
.dh-close .dh-hero-lede {
  margin: 20px 0 0;
  max-width: 30em;
}

/* --- Account entry refinement (owner correction 2026-10-27; live supabase.com/dashboard/sign-in|sign-up and
   resend.com/login inspected the same day): in-field eye toggle, icon provider buttons, a plain "or", centered
   switch link, and an editorial index beside the form instead of the wheel. --- */
.pw-wrap {
  position: relative;
}
.pw-wrap .pw-input {
  width: 100%;
  padding-right: 44px;
}
.pw-eye {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition:
    color 160ms var(--ease),
    background 160ms var(--ease);
}
.pw-eye:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}
.pw-eye[aria-pressed='true'] {
  color: var(--text);
}
.pw-eye:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
@media (pointer: coarse) {
  /* 44 px touch target without making the icon larger. */
  .pw-eye::after {
    content: '';
    position: absolute;
    inset: -6px;
  }
}
.da-prov-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.da-form-inner [data-providers] .da-prov {
  gap: 8px;
  font-weight: 500;
}
.da-prov svg {
  flex: none;
}
@media (max-width: 519px) {
  .da-prov-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.da-switch {
  margin: 0;
  text-align: center;
}
.da-switch a {
  color: var(--text);
  font-weight: 600;
}
.da-form-inner .da-sub {
  margin-top: -12px;
}

/* Organization → typed projects (owner dashboard plan, 2026-10-28). Neutral tokens only, both themes. */
.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 11px;
  line-height: 18px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  vertical-align: middle;
  flex: none;
}
.type-badge svg {
  width: 12px;
  height: 12px;
}
.type-badge .brand-mark img {
  width: 12px;
  height: 12px;
}
.type-badge-lg {
  height: 24px;
  font-size: 12px;
  padding: 0 8px;
}
.topbar .tb-type {
  margin-left: 2px;
}
@media (max-width: 640px) {
  .topbar .tb-type span {
    display: none;
  }
}
.sidebar .sb-scope,
.navdrw .sb-scope {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app.sb-collapsed .sidebar:not(.sb-open) .sb-scope {
  visibility: hidden;
}
.sb-add {
  margin-top: 4px;
  color: var(--muted);
}
.sb-add:hover {
  color: var(--text);
}
/* + Add a service: one row per service, related ones first. */
.add-svc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.add-svc li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
}
.add-svc li:last-child {
  border-bottom: 0;
}
.add-svc-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.add-svc-h {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin: 4px 0 0;
}
.add-svc + .add-svc-h {
  margin-top: 12px;
}
.add-svc-dlg .dlg {
  max-width: 560px;
}
.add-svc-dlg .dlg-b {
  max-height: min(70vh, 640px);
  overflow-y: auto;
}
/* New project: step 1 type cards. */
.pn-steps {
  margin-bottom: 12px;
}
.pn-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 10px;
}
.pn-type {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  min-height: 44px;
}
.pn-type:hover {
  border-color: var(--border-strong);
  background: var(--subtle);
}
.pn-type:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.pn-type strong {
  font-size: 15px;
  line-height: 20px;
}
.pn-radios {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.pn-radios legend {
  padding: 0;
  margin-bottom: 4px;
}
.pn-radios .check-row {
  align-items: flex-start;
  padding: 4px 0;
}
/* Create organization: Personal / Company. */
.org-kind {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.seg-opt {
  position: relative;
  display: inline-flex;
}
.seg-opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.seg-opt span {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 6px;
  color: var(--muted);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.seg-opt input:checked + span {
  background: var(--selected);
  color: var(--text);
  font-weight: 500;
}
.seg-opt input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
/* Typed project overview: checklist, connect strip and services; status on the right. */
.ov-typed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .ov-typed {
    grid-template-columns: minmax(0, 1fr);
  }
  /* On narrow screens the type's main card comes first; Status follows the services. */
  .ov-typed > .ov-status {
    order: 1;
  }
}
.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 8px;
}
.svc-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
  min-height: 44px;
}
.svc-list a:hover {
  background: var(--subtle);
}
.svc-list-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.svc-list-t .xs {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-proj .card-h h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* PostgreSQL table editor: filter and sort bar (gap plan §1). */
.tv-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-end;
  margin: 12px 0 0;
}
.tv-bar .field {
  margin: 0;
  min-width: 120px;
}
.tv-bar .input {
  min-height: 32px;
}
.tv-actions {
  gap: 6px;
  padding-bottom: 2px;
}
@media (max-width: 640px) {
  .tv-bar .field {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }
}
/* PostgreSQL schema diagram. */
.sd-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sd {
  display: block;
  max-width: none;
  font-family: var(--font-mono);
}
.sd-table rect {
  fill: var(--surface);
  stroke: var(--border);
}
.sd-name {
  font-size: 13px;
  font-weight: 600;
  fill: var(--text);
}
.sd-col {
  font-size: 12px;
  fill: var(--text);
}
.sd-type {
  font-size: 11px;
  fill: var(--muted);
}
.sd-rel {
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.5;
}

/* Database size cards in the create form (prices from D.prices). */
.db-sizes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0 0 4px;
}
.db-size {
  position: relative;
  display: block;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  background: var(--surface);
}
.db-size input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.db-size-b {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.db-size-p {
  font-weight: 600;
}
.db-size:has(input:checked) {
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
  background: var(--selected);
}
.db-size:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.db-size.is-later .db-size-p {
  color: var(--muted);
}
.db-size-note {
  margin: 4px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--info-bg);
}

/* MongoDB aggregation stages (proposal preview). */
.agg-stage .agg-op {
  width: auto;
  min-width: 130px;
  margin-left: auto;
}
.agg-stage.has-err {
  border-color: var(--error);
}

/* MongoDB explorer, laid out like a document database data explorer (owner 2026-10-28). */
.mgx {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.mgx-tree {
  border-right: 1px solid var(--border);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  background: var(--canvas);
}
.mgx-tree-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.mgx-search {
  min-height: 32px;
  font-size: 13px;
}
.mgx-db-h {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 2px;
}
.mgx-colls {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
  margin-left: 8px;
}
.mgx-coll {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 34px;
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.mgx-coll:hover {
  background: var(--selected);
  color: var(--text);
}
.mgx-coll[aria-current='true'] {
  background: var(--selected);
  color: var(--text);
  font-weight: 600;
}
.mgx-coll .mono {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mgx-n {
  font-size: 11px;
  color: var(--faint);
}
.mgx-main {
  min-width: 0;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mgx-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
}
.mgx-ns {
  font-size: 16px;
  margin: 0;
  overflow-wrap: anywhere;
}
.mgx-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
}
.mgx-stats div {
  display: flex;
  flex-direction: column;
}
.mgx-stats dt {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.mgx-stats dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.mgx-tabs {
  margin-top: -4px;
}
.mgx-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.mgx-tab:hover {
  color: var(--text);
}
.mgx-tab[aria-current='page'] {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--text);
  background: var(--selected);
  border-radius: 6px 6px 0 0;
}
.mgx-query {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--canvas);
}
.mgx-query .mgq-bar {
  position: relative;
  align-items: flex-start;
}
/* The field is display: contents (grid), so the label is placed against the bar, inside the input. */
.mgx-query .mgq-bar > .field > label {
  position: absolute;
  left: 8px;
  top: 11px;
  z-index: 1;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--selected);
}
.mgx-query .mgq-bar > .field > .input {
  padding-left: 62px;
}
.mgx-opts {
  margin-top: 6px;
}
.mgx-opts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 12px;
  margin-top: 8px;
}
.mgx-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mgx-views button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
}
.mgx-doc {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--surface);
}
.mgx-doc:hover,
.mgx-doc:focus-within {
  border-color: var(--border-strong);
}
.mgx-doc-acts {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s;
  background: var(--surface);
  border-radius: 8px;
}
.mgx-doc:hover .mgx-doc-acts,
.mgx-doc:focus-within .mgx-doc-acts {
  opacity: 1;
}
@media (hover: none) {
  .mgx-doc-acts {
    opacity: 1;
  }
}
.mgx-doc .mg-tree .xs.faint {
  opacity: 0;
}
.mgx-doc li:hover > .xs.faint,
.mgx-doc summary:hover .xs.faint {
  opacity: 1;
}
.mgv-string {
  color: var(--success);
}
.mgv-int32,
.mgv-int64,
.mgv-double,
.mgv-decimal128 {
  color: var(--info);
}
.mgv-objectid,
.mgv-date {
  color: var(--warning);
}
.mgv-boolean,
.mgv-null {
  color: var(--link);
}
@media (max-width: 760px) {
  .mgx {
    grid-template-columns: 1fr;
  }
  .mgx-tree {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .mgx-colls {
    flex-direction: row;
    flex-wrap: wrap;
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
  }
  .mgx-coll {
    width: auto;
  }
}

/* Where apps run: AWS partner host badge. */
.host-aws {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

/* ---- Dropdown (replaces every native select; js/dropdown.js) ----
   Look follows the 21st.dev "Select Dropdown": firm 2px outline, rounded corners, option rows with a title and
   a small description, a check on the chosen row, a chevron that turns, and a colour flip on hover. */
.dd {
  position: relative;
  display: block;
  min-width: 0;
  width: 100%;
}
.dd-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}
.dd-trigger.input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0 10px 0 12px;
  border: 2px solid var(--text);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.dd-trigger.input:hover:not(:disabled) {
  background: var(--subtle);
}
.dd-trigger.input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.dd-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--border-strong);
}
.dd-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-trigger.is-placeholder .dd-value {
  color: var(--muted);
}
.dd-chev {
  flex: none;
  transition: transform 0.25s;
}
.dd-trigger.is-open .dd-chev {
  transform: rotate(180deg);
}
.mkt-filters .dd {
  flex: 0 1 200px;
  width: auto;
}
.dd-panel {
  position: absolute;
  z-index: 90;
  max-width: min(420px, calc(100vw - 16px));
  background: var(--surface);
  border: 2px solid var(--text);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgb(0 0 0 / 18%);
  animation: dd-in 0.18s ease-out;
}
.dd-panel.is-up {
  animation-name: dd-in-up;
}
@keyframes dd-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}
@keyframes dd-in-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.dd-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 40px 8px 12px;
  min-height: 40px;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: var(--text);
  font-weight: 500;
  transition:
    background 0.15s,
    color 0.15s;
}
.dd-opt:last-child {
  border-bottom: 0;
}
.dd-opt-d {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
}
.dd-opt.is-active {
  background: var(--text);
  color: var(--surface);
}
.dd-opt.is-active .dd-opt-d {
  color: inherit;
  opacity: 0.7;
}
.dd-opt[aria-selected='true']::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 6px;
  height: 11px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-65%) rotate(45deg);
}
.dd-opt[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}
.dd-group {
  padding: 8px 16px 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
@media (prefers-reduced-motion: reduce) {
  .dd-panel {
    animation: none;
  }
  .dd-chev,
  .dd-opt,
  .dd-trigger.input {
    transition: none;
  }
}

/* ---- Buttons: colours, hover, disabled and focus ring follow the shared button spec the owner supplied
   (21st.dev "button" by shugar). Shape and size stay DASTER's own: same radius (--r-md), heights and padding.
   Light and dark values sit in custom properties; the three dark entry points mirror the token blocks above. */
:root {
  --bt-primary: #171717;
  --bt-primary-h: #383838;
  --bt-primary-t: #ffffff;
  --bt-sec: #ffffff;
  --bt-sec-h: #00000014;
  --bt-sec-b: #00000014;
  --bt-sec-t: #171717;
  --bt-err: #ea001d;
  --bt-err-h: #ae292f;
  --bt-err-t: #f5f5f5;
  --bt-dis: #f2f2f2;
  --bt-dis-t: #8f8f8f;
  --bt-dis-b: #ebebeb;
  --bt-ring-gap: #ffffff;
  --bt-ring: oklch(57.61% 0.2508 258.23);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bt-primary: #ededed;
    --bt-primary-h: #cccccc;
    --bt-primary-t: #0a0a0a;
    --bt-sec: #171717;
    --bt-sec-h: #ffffff17;
    --bt-sec-b: #ffffff24;
    --bt-sec-t: #ededed;
    --bt-err: #e2162a;
    --bt-err-h: #ff565f;
    --bt-err-t: #ffffff;
    --bt-dis: #1a1a1a;
    --bt-dis-b: #2e2e2e;
    --bt-ring-gap: #0a0a0a;
  }
}
:root[data-theme='dark'] {
  --bt-primary: #ededed;
  --bt-primary-h: #cccccc;
  --bt-primary-t: #0a0a0a;
  --bt-sec: #171717;
  --bt-sec-h: #ffffff17;
  --bt-sec-b: #ffffff24;
  --bt-sec-t: #ededed;
  --bt-err: #e2162a;
  --bt-err-h: #ff565f;
  --bt-err-t: #ffffff;
  --bt-dis: #1a1a1a;
  --bt-dis-b: #2e2e2e;
  --bt-ring-gap: #0a0a0a;
}
.btn {
  gap: 4px;
  transition:
    background-color 150ms var(--ease),
    border-color 150ms var(--ease),
    box-shadow 150ms var(--ease);
}
.btn-primary {
  background: var(--bt-primary);
  color: var(--bt-primary-t);
  border-color: transparent;
}
.btn-primary:hover,
.btn-primary:active {
  background: var(--bt-primary-h);
}
.btn-secondary {
  background: var(--bt-sec);
  color: var(--bt-sec-t);
  border-color: var(--bt-sec-b);
  box-shadow: none;
}
.btn-secondary:hover,
.btn-secondary:active {
  background: var(--bt-sec-h);
}
.btn-ghost {
  color: var(--bt-sec-t);
}
.btn-ghost:hover,
.btn-ghost:active {
  background: var(--bt-sec-h);
}
.btn-danger {
  background: var(--bt-err);
  color: var(--bt-err-t);
}
.btn-danger:hover {
  background: var(--bt-err-h);
}
.btn[disabled],
.btn[aria-disabled='true'] {
  background: var(--bt-dis);
  color: var(--bt-dis-t);
  border: 1px solid var(--bt-dis-b);
}
.btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bt-ring-gap),
    0 0 0 4px var(--bt-ring);
}
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

/* ---- Filter rows: labelled dropdowns and bare search boxes share one bottom line and one height ----
   A labelled field is taller than a bare search input, so centring made the controls sit at different heights. */
.filters:has(> .field),
.toolbar:has(> .field) {
  align-items: flex-end;
}
.filters > .search-input,
.toolbar > .search-input {
  height: var(--control-md);
  box-sizing: border-box;
}
.filters > .field,
.toolbar > .field {
  flex: 0 1 200px;
  min-width: 140px;
}
/* A small button beside a search box or dropdown takes the same height, so the row reads as one line. */
.filters > .btn.btn-sm,
.toolbar > .btn.btn-sm {
  height: var(--control-sm);
}

/* ---- Header controls, desktop: neat and clean (owner 2026-10-28, "like Supabase") ----
   No box around the shortcut inside Search; every header icon the same 16px, thin line, muted until hovered. */
@media (min-width: 761px) {
  .search-btn .kbd {
    border: 0;
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    color: var(--faint);
  }
  .topbar .search-btn svg,
  .topbar .tbi > svg,
  .topbar .btn.tbi svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.6;
    flex: none;
  }
  .topbar .btn-ghost.tbi,
  .topbar .search-btn {
    color: var(--muted);
  }
  .topbar .btn-ghost.tbi:hover,
  .topbar .search-btn:hover {
    color: var(--text);
  }
  .topbar .btn.btn-secondary.tbi {
    color: var(--text);
  }
}

/* Search box in the header: a larger magnifier and a readable shortcut (owner 2026-10-28: too small to see). */
@media (min-width: 761px) {
  .topbar .search-btn {
    height: 36px;
    min-width: 240px;
    font-size: 14px;
  }
  .topbar .search-btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.75;
  }
  .topbar .search-btn .kbd {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--muted);
  }
}

/* Header profile: round avatar with an initials fallback and a count badge on its top-right corner
   (adapted from the 21st.dev avatar + badge component; plain CSS, no React or Tailwind here). */
@media (min-width: 761px) {
  .topbar .tbi-avatar {
    position: relative;
  }
  .topbar .tbi-avatar .avatar-round {
    flex: none;
    width: 30px;
    min-width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    overflow: hidden;
    background: var(--subtle);
    box-shadow: 0 0 0 1px var(--border-strong);
  }
  .topbar .tbi-avatar .avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
  }
}

/* Profile picture: the image fills the round avatar; the large one on the Account page. */
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.avatar.avatar-lg {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: var(--subtle);
}
.avatar.avatar-lg .avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 24px;
  font-weight: 600;
}

/* Notifications popover, built to match the 21st.dev component: 320px panel, 8px radius, 1px border, 4px padding,
   soft shadow; header with title and "Mark all as read"; a rule; rows with the text, the time below it and a dot at the
   end while unread. The bell is an outlined 36px icon button with the count badge overhanging its top-right corner. */
.menu.np {
  width: 320px;
  min-width: 320px;
  max-width: calc(100vw - 16px);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.05),
    0 4px 6px -4px rgba(0, 0, 0, 0.05);
  max-height: min(70vh, 480px);
  overflow-y: auto;
}
.np-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px;
}
.np-title {
  font-size: 14px;
  font-weight: 600;
}
.np-act {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
.np-act:hover {
  text-decoration: underline;
}
.np-rule {
  height: 1px;
  margin: 4px -4px;
  background: var(--border);
}
.menu.np .np-row {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 24px 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
}
.menu.np .np-row:hover,
.menu.np .np-row:focus-visible {
  background: var(--subtle);
}
.np-text {
  display: block;
  font-weight: 500;
}
.np-time {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.np-dot {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: currentColor;
}
@media (min-width: 761px) {
  .topbar .tbi[data-action='fn:notifMenu'] {
    position: relative;
    width: 36px;
    height: 36px;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    color: var(--text);
    margin-inline: 4px;
  }
  .topbar .tbi[data-action='fn:notifMenu']:hover {
    background: var(--subtle);
  }
  .topbar .tbi[data-action='fn:notifMenu'] svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
  }
}
.tbi[data-action='fn:notifMenu'] {
  position: relative;
}
.bell-badge {
  position: absolute;
  top: -6px;
  left: 100%;
  transform: translateX(-50%);
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--primary, var(--text));
  color: var(--on-primary, var(--surface));
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  pointer-events: none;
}
.bell-badge[hidden] {
  display: none;
}
@media (max-width: 760px) {
  .bell-badge {
    top: 4px;
    left: auto;
    right: 4px;
    transform: none;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
  }
}
.menu.np .np-act {
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  display: inline;
  gap: 0;
}
.menu.np .np-act:hover {
  background: transparent;
}

/* ---- Header, desktop: every control the same size and rhythm (owner 2026-10-28: "sab ek hi size") ----
   One control height (26px, Supabase "tiny"), one corner radius (8px), one icon size (14px), one gap (8px). Search, Ask AI, Help and
   the bell share the same outline; the profile is a 26px circle. Last in the file on purpose: it wins over the
   earlier header rules. */
@media (min-width: 761px) {
  .topbar {
    gap: 8px;
  }
  .topbar .tb-brand {
    width: 26px;
    height: 26px;
  }
  .topbar .ctx-btn {
    height: 26px;
  }
  .topbar .search-btn.tbi,
  .topbar .btn.tbi,
  .topbar .tbi {
    box-sizing: border-box;
    padding-block: 0;
    height: 26px;
    min-height: 26px;
    margin: 0;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
  }
  .topbar .search-btn.tbi {
    min-width: 176px;
    padding: 0 10px;
    color: var(--muted);
    font-weight: 400;
  }
  .topbar .btn.btn-secondary.tbi {
    width: auto;
    padding: 0 10px;
    gap: 6px;
  }
  .topbar .btn-icon.tbi {
    width: 26px;
    min-width: 26px;
    padding: 0;
  }
  .topbar .tbi:hover {
    background: var(--subtle);
  }
  .topbar .tbi.tbi-avatar {
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
  }
  .topbar .tbi.tbi-avatar:hover {
    background: transparent;
  }
  .topbar .search-btn svg,
  .topbar .tbi > svg,
  .topbar .btn.tbi svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.75;
  }
  .topbar .tbi[data-action='fn:notifMenu'] svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.75;
  }
  .topbar .tbi-avatar .avatar-round {
    width: 26px;
    height: 26px;
    min-width: 26px;
  }
  .topbar .tbi-avatar .avatar-fallback {
    font-size: 11px;
  }
  .topbar .search-btn .kbd {
    font-size: 12px;
  }
  .topbar .tbi::before {
    display: none;
  }
}

@media (max-width: 760px) {
  :root {
    --control-sm: 32px;
    --control-md: 36px;
  }
}

/* Type scale follows Supabase's (typography.css): page title 24px, section 20px, sub-section 16px, default and
   compact headings 14px and 12px medium. Big numbers in stat tiles and billing use the 20px section size. */
.stat .v,
.num.big,
.billing-total .num,
.bill-sum .num {
  font-size: 20px;
}

/* ---- One tick everywhere (owner 2026-10-28) ----
   Same shape, weight and size in checklists, status icons, form checkboxes and menu selections: a filled mark with a
   bold white check (look taken from the 21st.dev "Task Steps" / "Onboarding Checklist" components).
   - Status and readiness ticks come from DP.icon('ok') (a filled circle, coloured by context).
   - Checklist steps use .check; done is a filled 20px circle with a 12px check, 2.8 stroke.
   - Native checkboxes and radios are drawn by CSS so they match (the browser default tick was thin and tiny).
   - Menu selections draw the same check from a mask. */
:root {
  --tick: #16a34a;
  --tick-soft: rgba(22, 163, 74, 0.16);
  --tick-mark: #fff;
}
:root[data-theme='dark'] {
  --tick: #22c55e;
  --tick-soft: rgba(34, 197, 94, 0.2);
  --tick-mark: #04210f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --tick: #22c55e;
    --tick-soft: rgba(34, 197, 94, 0.2);
    --tick-mark: #04210f;
  }
}
.check {
  width: 20px;
  height: 20px;
}
.check.done {
  background: var(--tick);
  border-color: var(--tick);
  color: var(--tick-mark);
  box-shadow: 0 0 0 3px var(--tick-soft);
}
.check.done svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.8;
}
.checklist .t.done-t,
.checklist .done-t {
  color: var(--muted);
}
.ic-ok {
  flex: none;
}
input[type='checkbox']:not([role='switch']),
input[type='radio'] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid var(--border-strong);
  background-color: var(--surface);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
  cursor: pointer;
  vertical-align: middle;
  transition:
    background-color 120ms var(--ease),
    border-color 120ms var(--ease);
}
input[type='checkbox']:not([role='switch']) {
  border-radius: 4px;
}
input[type='radio'] {
  border-radius: 50%;
}
input[type='checkbox']:not([role='switch']):checked,
input[type='checkbox']:not([role='switch']):indeterminate {
  background-color: var(--tick);
  border-color: var(--tick);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.3l3 3l6-6.3'/%3E%3C/svg%3E");
}
input[type='checkbox']:not([role='switch']):indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
}
input[type='radio']:checked {
  border-color: var(--tick);
  background-image: radial-gradient(circle, var(--tick) 0 4px, transparent 4.5px);
  background-size: 100% 100%;
}
input[type='checkbox']:not([role='switch']):disabled,
input[type='radio']:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
input[type='checkbox']:not([role='switch']):focus-visible,
input[type='radio']:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
:root[data-theme='dark'] input[type='checkbox']:not([role='switch']):checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2304210f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.3l3 3l6-6.3'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) input[type='checkbox']:not([role='switch']):checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2304210f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.3l3 3l6-6.3'/%3E%3C/svg%3E");
  }
}
.menu [aria-checked='true']::after {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: auto;
  background: var(--tick);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.3l3 3l6-6.3'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.3l3 3l6-6.3'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* ---- Buttons: Supabase's default size (owner 2026-10-28: "still too big") ----
   Supabase's Button defaults to "tiny": 26px high, 12px text, 10px side padding, 14px icons. Ours now does the same on
   desktop. A larger button (.btn-lg) is Supabase's "small" 34px. Search boxes and filters in toolbars use the tiny size
   too, so a toolbar row stays on one line. Phones and touch screens keep 44px targets (rule above). */
@media (min-width: 761px) {
  .btn:not(.bare .btn),
  .btn-sm:not(.bare .btn) {
    height: var(--control-sm);
    padding: 0 10px;
    font-size: 12px;
    gap: 6px;
  }
  .btn:not(.bare .btn) svg,
  .btn-sm:not(.bare .btn) svg {
    width: 14px;
    height: 14px;
  }
  .btn-lg:not(.bare .btn) {
    height: var(--control-md);
    padding: 0 14px;
    font-size: 14px;
  }
  .btn-lg svg {
    width: 16px;
    height: 16px;
  }
  .btn-icon:not(.bare .btn),
  .btn-icon.btn-sm:not(.bare .btn) {
    width: var(--control-sm);
    padding: 0;
  }
  .toolbar .search-input,
  .filters .search-input,
  .filters select.input,
  .filters .dd-trigger.input,
  .toolbar .dd-trigger.input,
  .toolbar > .input {
    height: var(--control-sm);
    font-size: 12px;
  }
  .filters > .search-input,
  .toolbar > .search-input {
    height: var(--control-sm);
  }
}
@media (min-width: 761px) {
  .search-input {
    height: var(--control-sm);
    font-size: 12px;
  }
}
@media (min-width: 761px) {
  /* A dropdown or input that shares a row with a button takes the button's height, so the row reads as one line. */
  .row:has(> .btn) > .dd .dd-trigger.input,
  .row:has(> .btn) > input.input,
  .row:has(> .btn) > select.input {
    height: var(--control-sm);
    font-size: 12px;
  }
}

/* DASTER AI orb (WebGL sphere with eyes that follow the pointer): see js/live-orb.js. */
.orb-host {
  display: block;
  margin: 0 auto;
}
.orb {
  position: relative;
  flex: none;
  display: block;
}
.orb-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.orb-fallback {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  background: var(--text);
}
.orb-fallback[hidden] {
  display: none;
}
.orb-eye {
  position: absolute;
  width: 13%;
  height: 28%;
  top: 34%;
  border-radius: 999px;
  background: var(--orb-eye, var(--surface));
}
.orb-eye-l {
  left: 31%;
}
.orb-eye-r {
  left: 56%;
}
.ic-orb {
  flex: none;
}
@media (min-width: 761px) {
  .topbar .tbi > svg.ic-orb,
  .topbar .btn.tbi svg.ic-orb {
    width: 16px;
    height: 16px;
  }
}

/* The orb with its pencil, and the edit box (modelled on the 21st.dev Live Orb "Controls" panel). */
.orb-wrap {
  position: relative;
  display: inline-block;
  margin: 0 auto;
}
/* The orb's edit card: opens in the top-right corner like ChatGPT's companion panel (owner 2026-10-28). */
.orb-edit {
  position: absolute;
  right: 6%;
  bottom: 6%;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 140ms var(--ease),
    transform 140ms var(--ease),
    background-color 120ms var(--ease);
}
.orb-edit svg {
  display: block;
  width: 13px;
  height: 13px;
}
.orb-edit:hover {
  background: var(--subtle);
}
.orb-wrap:hover .orb-edit,
.orb-wrap:focus-within .orb-edit,
.orb-edit[aria-expanded='true'] {
  opacity: 1;
  transform: scale(1);
}
@media (hover: none) {
  .orb-edit {
    opacity: 1;
    transform: none;
  }
}
.orb-pop.orb-side {
  position: fixed;
  z-index: 1000;
  top: 60px;
  right: 16px;
  left: auto;
  width: 312px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 76px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
  animation: orb-side-in 160ms var(--ease);
}
@keyframes orb-side-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .orb-pop.orb-side {
    animation: none;
  }
}
.orb-side-h {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.orb-side-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.orb-side-id strong {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.orb-side-id span {
  font-size: 12px;
  color: var(--muted);
}
.orb-x {
  align-self: start;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.orb-x:hover {
  background: var(--subtle);
  color: var(--text);
}
.orb-sec {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.orb-looks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.orb-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--canvas);
  cursor: pointer;
  color: var(--muted);
}
.orb-opt:hover {
  border-color: var(--border-strong);
}
.orb-opt[aria-pressed='true'] {
  border-color: var(--text);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--text);
}
.orb-cap {
  font-size: 12px;
  font-weight: 500;
}
.orb-rows {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}
.orb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  border-bottom: 1px solid var(--border);
}
.orb-row:last-child {
  border-bottom: 0;
}
.orb-lab {
  font-size: 13px;
}
.orb-ctl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.orb-num {
  width: 72px;
  height: 26px;
  font-size: 12px;
  text-align: right;
}
.orb-hex {
  width: 84px;
  height: 26px;
  font-size: 12px;
  font-family: var(--font-mono);
  text-align: right;
}
.orb-chip input[type='color'] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.orb-chip input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}
.orb-chip input[type='color']::-webkit-color-swatch {
  border: 0;
  border-radius: 50%;
}
.orb-reset {
  width: 100%;
  justify-content: center;
}
@media (max-width: 760px) {
  .orb-pop.orb-side {
    top: 56px;
    right: 8px;
    left: 8px;
    width: auto;
  }
}

/* The orb as a chat companion: small, kept at the top of the chat, name and status under it. */
.ai-pet {
  position: sticky;
  top: calc(var(--topbar-h, 48px) + 6px);
  z-index: 4;
  width: 140px;
  height: 68px;
  margin: 0 auto;
  align-self: center;
  pointer-events: none;
}
.ai-pet[hidden] {
  display: none;
}
.ai-pet .orb-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 40px;
  height: 40px;
  margin: 0;
  transform: translateX(-50%);
  pointer-events: auto;
}
.ai-pet .orb-edit {
  width: 22px;
  height: 22px;
  right: -12px;
  top: -6px;
  bottom: auto;
  pointer-events: auto;
}
.ai-pet .orb-edit svg {
  width: 12px;
  height: 12px;
}
/* The name sits in its own chip glued to the orb, with a solid background, so the chat behind never shows through
   (as in ChatGPT), just under it, edge to edge, not overlapping it. What it is doing appears inside the chip and grows it downward; the chat does not move. */
.ai-pet-chip {
  position: absolute;
  top: 40px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  min-width: 0;
  max-width: 240px;
  padding: 3px 8px 4px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  text-align: center;
}
.ai-pet-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  color: var(--text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-pet-st {
  display: block;
  max-height: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 14px;
  color: var(--muted);
  opacity: 0;
  transition:
    max-height 160ms var(--ease),
    opacity 160ms var(--ease);
}
.ai-pet-st.is-on {
  max-height: 14px;
  opacity: 1;
}
.ai-pet.is-thinking .ai-pet-st::after {
  content: '…';
}
#ai-pet-panel {
  position: relative;
  top: auto;
  width: 100%;
  height: 72px;
  margin: 0;
  padding: 6px 0 0;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
#ai-pet-panel .orb-wrap {
  top: 6px;
}
#ai-pet-panel .ai-pet-chip {
  top: 46px;
}
.orb-name {
  width: 120px;
  height: 26px;
  font-size: 12px;
  text-align: right;
}

/* ---- Liquid metal button: the header's AI button (js/metal-button.js) ----
   A flowing metal rim (the shader) around a dark face, as in the 21st.dev component, at our own 26px size and 8px
   corners. The shader fills the whole button; the face sits 2px inside it so only a rim of metal shows. */
.lm {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0 !important;
  background: transparent !important;
  color: #e4e4e7 !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 2px 5px rgba(0, 0, 0, 0.18) !important;
  transition:
    transform 150ms var(--ease),
    box-shadow 150ms var(--ease);
}
.lm:hover {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 4px 10px rgba(0, 0, 0, 0.22) !important;
}
.lm .lm-shader {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
}
.lm .lm-shader canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: inherit;
}
.lm .lm-face {
  position: absolute;
  inset: 2px;
  z-index: 1;
  border-radius: calc(var(--r-md, 8px) - 2px);
  background: linear-gradient(180deg, #202020 0%, #000 100%);
  transition: box-shadow 150ms var(--ease);
}
.lm > :not(.lm-shader):not(.lm-face):not(.lm-ripple) {
  position: relative;
  z-index: 2;
}
.lm .sr-only {
  position: absolute;
}
.lm .ic-orb rect {
  fill: #000;
}
.lm.is-pressed {
  transform: translateY(1px) scale(0.98);
}
.lm.is-pressed .lm-face {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.lm .lm-ripple {
  position: absolute;
  z-index: 3;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  animation: lm-ripple 0.6s ease-out forwards;
}
@keyframes lm-ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lm,
  .lm .lm-face {
    transition: none;
  }
  .lm .lm-ripple {
    display: none;
  }
}

@media (max-width: 760px) {
  .lm {
    overflow: visible;
    background: transparent !important;
    color: var(--text) !important;
    box-shadow: none !important;
  }
  .lm .lm-shader,
  .lm .lm-face,
  .lm .lm-ripple {
    display: none;
  }
  .lm .ic-orb rect {
    fill: var(--surface, #fff);
  }
}

/* The bell's count must not run onto the profile beside it: the count sits closer to the bell and the two buttons are
   a little further apart (owner 2026-10-28). */
@media (min-width: 761px) {
  .topbar .bell-badge {
    top: -7px;
    left: auto;
    right: -7px;
    transform: none;
  }
  .topbar .tbi.tbi-avatar {
    margin-left: 8px;
  }
}

/* ---- Header search: the full box on every desktop width (owner 2026-10-28) ----
   Earlier rules shrank it to a magnifier between 761 and 1279px, so it looked big on one screen and small on another.
   Now only phones (760px and below) get the icon; on a narrower desktop the project and organisation names give way
   (they shorten with an ellipsis) so the search keeps its size. */
@media (min-width: 761px) {
  .topbar .search-btn.tbi {
    width: 176px;
    min-width: 176px;
    padding: 0 10px;
    justify-content: flex-start;
    flex: none;
  }
  .topbar .search-btn.tbi .lbl {
    display: inline;
  }
  .topbar .search-btn.tbi .kbd {
    display: inline;
    margin-left: auto;
  }
  .topbar .ctx {
    min-width: 0;
    flex: 0 1 auto;
  }
  .topbar .ctx-btn {
    min-width: 0;
  }
  .topbar .ctx-btn .lbl {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar .tb-spacer {
    min-width: 0;
  }
}

/* Business Email calendar (js/screens-bizmail.js): a month grid, Monday first. */
.bm-cal {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.bm-dow,
.bm-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.bm-dow span {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.bm-day {
  min-height: 74px;
  padding: 4px 6px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bm-day:nth-child(7n) {
  border-right: 0;
}
.bm-off {
  background: var(--canvas);
}
.bm-n {
  font-size: 12px;
  color: var(--muted);
}
.bm-today .bm-n {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text);
  color: var(--surface);
  font-weight: 600;
}
.bm-ev {
  font-size: 11px;
  line-height: 1.3;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--selected);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .bm-day {
    min-height: 56px;
    padding: 2px 3px;
  }
  .bm-ev {
    font-size: 10px;
  }
}
@media (min-width: 761px) {
  .mgq-bar .mgq-btns .btn {
    height: var(--control-md);
  }
}

/* Two cards side by side share one height; the content inside keeps its natural size and sits at the top. */
@media (min-width: 761px) {
  .grid-2:not(.grid-top) {
    align-items: stretch;
  }
  .grid-2:not(.grid-top) > .card {
    display: flex;
    flex-direction: column;
  }
  .grid-2:not(.grid-top) > .card > .card-b:not(.tight) {
    flex: 1 1 auto;
    align-content: flex-start;
  }
}
@media (min-width: 761px) {
  .grid-ov.grid-top {
    align-items: stretch;
  }
  .grid-ov.grid-top > .card {
    display: flex;
    flex-direction: column;
  }
}

/* Open a card: a plain arrow in the card's corner replaces the "Open X" text link (no box around it).
   `.go-ic` is the standalone control; `.svc-card .go` turns the old text link into the same arrow without changing
   the page's markup. The words stay in the page for screen readers and tooltips. */
.go-ic,
.svc-card .go {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  margin: 0;
}
.go-ic::after,
.svc-card .go::after {
  content: '';
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6l6 6l-6 6'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6l6 6l-6 6'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition: transform 0.15s ease;
}
.go-ic:hover,
.svc-card .go:hover {
  color: var(--fg);
  text-decoration: none;
}
.go-ic:hover::after,
.svc-card .go:hover::after {
  transform: translateX(2px);
}
.go-ic:focus-visible,
.svc-card .go:focus-visible {
  outline: 2px solid var(--focus, currentColor);
  outline-offset: 2px;
}
.svc-card {
  position: relative;
}
.svc-card .go,
.svc-card .top > .go-ic {
  position: absolute;
  top: 12px;
  right: 12px;
}
.svc-card:has(> .go) .top,
.svc-card .top:has(> .go-ic) {
  padding-right: 32px;
}
/* A card name keeps its words whole: it wraps between words, never inside one. */
.svc-card .name {
  overflow-wrap: break-word;
  word-break: normal;
}
/* A header's right side: status first, then the open arrow, always in the same place. */
.card-h .h-end {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Shopify channel cards: equal height, body grows, the switch or button always sits at the bottom, left aligned. */
.sh-cards {
  align-items: stretch;
}
.sh-cards .card {
  display: flex;
  flex-direction: column;
}
.sh-cards .card > .card-b {
  flex: 1 1 auto;
}
.sh-cards .card > .card-f {
  justify-content: flex-start;
  align-items: center;
  min-height: 52px;
}
.sh-cards .card > .card-f label.row {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}
button.go-ic {
  padding: 0;
  cursor: pointer;
  appearance: none;
}
.svc-card .go,
.svc-card .top > .go-ic {
  top: 14px;
}

/* The whole card opens, not just the arrow: a click handler (core.js) presses the card's arrow control when the click
   lands anywhere on the card that is not itself a button, link, switch or field. */
.card:has(.go-ic),
.card:has(> .go) {
  position: relative;
  cursor: pointer;
}
.card:has(.go-ic) :is(button, a, label, input, select, summary, textarea),
.card:has(> .go) :is(button, a, label, input, select, summary, textarea) {
  cursor: pointer;
}
.card:has(.go-ic):hover,
.card:has(> .go):hover {
  border-color: var(--muted);
}
.svc-card .go,
.svc-card .top > .go-ic {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* In a row of service cards the action row (Configure, Health details, Open...) always sits on the same line at the bottom. */
.svc-card > .row:last-child,
.svc-card > .btn:last-child {
  margin-top: auto;
}
/* A card's title row keeps one height whether or not a status pill sits beside the title, so the lines below line up across the row. */
.svc-card > .row-between:first-child {
  min-height: 26px;
  align-items: center;
}

/* PostgreSQL Connect: the five ways to connect, as large choice tiles, and numbered steps. */
.pg-modes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.pg-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  text-align: center;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}
.pg-mode svg {
  color: var(--muted);
  margin-bottom: 4px;
}
.pg-mode strong {
  font-size: 13px;
}
.pg-mode:hover {
  background: var(--subtle);
}
.pg-mode[aria-pressed='true'] {
  border-color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--fg);
}
@media (max-width: 760px) {
  .pg-modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.pg-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pg-steps > li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.pg-n {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}
.pg-steps > li > div {
  flex: 1 1 auto;
}

/* The Connect dialog is wide, like Supabase's, so five tiles and the code blocks fit comfortably. */
.dlg.dlg-wide {
  width: min(880px, calc(100vw - 32px));
}
.dlg-wide .dlg-h {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.dlg-wide .dlg-b {
  padding: 16px 20px;
  gap: 18px;
}

/* Page actions lifted into the header (js/header-actions.js). */
.page-head .actions.in-bar {
  position: fixed;
  z-index: 40;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* The Connect panel is a wider side drawer, so five tiles and the code blocks fit. */
.drawer-wide .drw {
  width: min(760px, 100vw);
}
.drawer-wide .dlg-h {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.drawer-wide .dlg-b {
  padding: 16px 20px;
  gap: 18px;
}
.drw .dlg-f {
  align-items: center;
}

/* Connect panel rows: the label and its help on the left, the control on the right. */
.pg-rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.pg-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 16px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.pg-row-l {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.pg-row-l span {
  color: var(--muted);
  font-size: 12px;
}
.pg-row-c {
  min-width: 0;
}
.pg-row-c select.input {
  width: 100%;
}
@media (max-width: 560px) {
  .pg-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
.pg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
}
.pg-follow {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pg-follow h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.pg-params summary {
  cursor: pointer;
  font-size: 13px;
  padding: 4px 0;
}
.pg-params[open] summary {
  margin-bottom: 8px;
}

/* Connect panel: radio cards, notice card, KEY=value block, connection parameters. */
.pg-radios {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
}
.pg-radio {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 13px;
}
.pg-radio + .pg-radio {
  border-top: 1px solid var(--border);
}
.pg-radio:has(input:checked) {
  background: var(--subtle);
}
.pg-radio input {
  margin-top: 3px;
}
.pg-radio-d {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
  margin-top: 2px;
}
.pg-notice {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--subtle);
}
.pg-notice-i {
  color: var(--muted);
  display: grid;
  place-items: center;
}
.pg-use {
  margin: 8px 0 0;
  padding-left: 18px;
}
.pg-env,
.pg-params-card {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
}
.pg-env-h,
.pg-params-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: var(--subtle);
  border-bottom: 1px solid var(--border);
}
.pg-env-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
}
.pg-env-row:last-child {
  border-bottom: 0;
}
.pg-env-k {
  flex: none;
  font-size: 12px;
  color: var(--muted);
}
.pg-env-row .copy {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
}
.pg-code-wrap {
  position: relative;
}
.pg-code-reset {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}

/* PostgreSQL: a left menu beside the page (like Supabase's Database area). */
.pg-shell {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.pg-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 72px;
}
.pg-nav-g {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pg-nav-t {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 10px 6px;
}
.pg-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}
.pg-nav a:hover {
  background: var(--subtle);
  color: var(--fg);
}
.pg-nav a[aria-current='page'] {
  background: var(--subtle);
  color: var(--fg);
  font-weight: 500;
}
.pg-main {
  min-width: 0;
}
.pg-ph {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.pg-title {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .pg-shell {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pg-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .pg-nav-t {
    display: none;
  }
  .pg-nav-g {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* While a side panel or dialog is open, the page behind it does not scroll, and the panel has one scroll area only. */
html:has(dialog[open]) {
  overflow: hidden;
}
dialog.drawer {
  overflow: hidden;
}
.drw {
  max-height: 100vh;
  overflow: hidden;
}
.drw .dlg-b {
  min-height: 0;
}

/* Code blocks: header strip and code in one rounded box; the sideways scrollbar sits inside, clear of the corners. */
.codebox {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  background: var(--subtle);
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}
.codebox > .code-h {
  margin: 0;
  padding: 3px 6px 3px 14px;
  border-bottom: 1px solid var(--border);
}
.codebox pre.code {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 8px 8px;
  overflow: visible;
  max-width: none;
}
.code-s {
  display: block;
  padding: 12px 6px 8px;
  overflow-x: auto;
  font: inherit;
  white-space: pre;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.codebox pre.code[data-mg-json] {
  padding: 12px 14px;
}
pre.code {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* A dropdown list opens inside the dialog or panel that holds it, and may reach past a small dialog's edge. */
dialog:not(.drawer):has(> .dd-panel) {
  overflow: visible;
}

/* Roles list: a role, what it is for, and how many connections it has right now. */
.pg-roles .card-b {
  padding: 0;
}
.pg-role {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.pg-role:last-child {
  border-bottom: 0;
}
.pg-role > :first-child {
  flex: 1;
  min-width: 0;
}
.pg-role-c {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--muted);
}
.pg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}

/* A filter dropdown in a list's toolbar: a fixed width, side by side with the search box. */
.pg-f {
  display: inline-block;
  width: 170px;
  flex: none;
}
.pg-f .dd,
.pg-f select.input {
  width: 100%;
}
.toolbar .filters {
  flex-wrap: wrap;
}
.pg-main > .seg {
  width: fit-content;
}

.sd-table.sd-dim {
  opacity: 0.25;
}
.pg-new {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--success);
  background: var(--success-bg, transparent);
  border-radius: 4px;
  padding: 1px 6px;
}
/* Pipelines: the database in the middle of a dotted canvas, destinations beside it. */
.pg-canvas {
  min-height: 180px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 16px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 24px;
  flex-wrap: wrap;
}
.pg-canvas-db,
.pg-canvas-d {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.pg-empty-card {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-card);
  padding: 16px;
}
@media (min-width: 900px) {
  .pg-main table td .mono,
  .pg-main table td .xs {
    white-space: nowrap;
  }
}

/* Long code words in text (such as DASTER_PUBLISHABLE_KEY) may break, so a phone does not scroll sideways. */
.pg-main :is(p, .banner, .small, li, .hint-t) .mono {
  overflow-wrap: anywhere;
}

/* Authentication pages: switch rows, add-on rows and the usage figures. */
.au-sw {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.au-sw:last-of-type {
  border-bottom: 0;
}
.au-addon {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  gap: 16px;
  align-items: flex-start;
}
.au-addon:last-child {
  border-bottom: 0;
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.au-big {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.au-estimate {
  padding: 10px 12px;
  background: var(--subtle);
  border-radius: 8px;
  font-size: 13px;
}

/* DASTER AI: the call control is one round icon (owner, 2026-10-29). 44px on the page and phones, 36px in the panel. */
.ai-call-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  padding: 0;
}
.ai-call-round:hover {
  background: var(--subtle);
}
.ai-call-round:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.ai-call-round-sm {
  width: 36px;
  height: 36px;
}
@media (pointer: coarse) {
  .ai-call-round-sm {
    width: 44px;
    height: 44px;
  }
}

/* Import & migrate: what each source brings (automatic / assisted / you do it / not in V1). */
.mig-cap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.mig-cap li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
/* Cutover readiness: three columns that wrap inside the preview box on phones. */
[data-readiness] .tbl {
  width: 100%;
  table-layout: fixed;
}
[data-readiness] th,
[data-readiness] td {
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  vertical-align: top;
}
[data-readiness] th {
  width: 32%;
}
[data-readiness] td.r {
  width: 34%;
}
[data-readiness] .pill {
  white-space: normal;
  height: auto;
}

/* DASTER logo (owner, 2026-10-29): black mark in the light theme, white in the dark theme; the homepage
   header is always dark, so it always shows the white mark. */
.logo-mark {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.logo-mark img {
  height: 100%;
  width: auto;
}
.logo-mark .lg-dark {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .logo-mark .lg-light {
    display: none;
  }
  :root:not([data-theme='light']) .logo-mark .lg-dark {
    display: block;
  }
}
:root[data-theme='dark'] .logo-mark .lg-light,
.dh-top .logo-mark .lg-light {
  display: none;
}
:root[data-theme='dark'] .logo-mark .lg-dark,
.dh-top .logo-mark .lg-dark {
  display: block;
}
/* The sign-in pages showed a dark tile with a "D"; the logo stands on its own now. */
.da-mark {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
/* Phones: the homepage header keeps only the D mark (the wordmark would push the menu off-screen); the name stays for screen readers. */
@media (max-width: 480px) {
  .dh-top .logo-word img {
    display: none !important;
  }
}

/* Owner (2026-10-29): project type and plan badges get a light tint each, so App, WordPress, Shopify … and
   Free, Starter, Pro, Team are told apart at a glance. Deeper shades in the light theme, brighter in the dark
   theme; the label text keeps its contrast in both. */
:root {
  --tint-app: #1d4ed8;
  --tint-wordpress: #0e7490;
  --tint-shopify: #15803d;
  --tint-messaging: #7c3aed;
  --tint-bizemail: #b45309;
  --tint-import: #52525b;
  --tint-free: #52525b;
  --tint-starter: #0f766e;
  --tint-pro: #4338ca;
  --tint-team: #b45309;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --tint-app: #60a5fa;
    --tint-wordpress: #22d3ee;
    --tint-shopify: #4ade80;
    --tint-messaging: #a78bfa;
    --tint-bizemail: #fbbf24;
    --tint-import: #a1a1aa;
    --tint-free: #a1a1aa;
    --tint-starter: #2dd4bf;
    --tint-pro: #818cf8;
    --tint-team: #fbbf24;
  }
}
:root[data-theme='dark'] {
  --tint-app: #60a5fa;
  --tint-wordpress: #22d3ee;
  --tint-shopify: #4ade80;
  --tint-messaging: #a78bfa;
  --tint-bizemail: #fbbf24;
  --tint-import: #a1a1aa;
  --tint-free: #a1a1aa;
  --tint-starter: #2dd4bf;
  --tint-pro: #818cf8;
  --tint-team: #fbbf24;
}
.type-badge[data-type='app'] {
  --tint: var(--tint-app);
}
.type-badge[data-type='wordpress'] {
  --tint: var(--tint-wordpress);
}
.type-badge[data-type='shopify'] {
  --tint: var(--tint-shopify);
}
.type-badge[data-type='messaging'] {
  --tint: var(--tint-messaging);
}
.type-badge[data-type='bizemail'] {
  --tint: var(--tint-bizemail);
}
.type-badge[data-type='import'] {
  --tint: var(--tint-import);
}
.tb-plan[data-tb-plan='free'] {
  --tint: var(--tint-free);
}
.tb-plan[data-tb-plan='starter'] {
  --tint: var(--tint-starter);
}
.tb-plan[data-tb-plan='pro'] {
  --tint: var(--tint-pro);
}
.tb-plan[data-tb-plan='team'] {
  --tint: var(--tint-team);
}
.type-badge[data-type],
.tb-plan[data-tb-plan] {
  color: var(--tint);
  border-color: color-mix(in srgb, var(--tint) 45%, transparent);
  background: color-mix(in srgb, var(--tint) 9%, transparent);
}
/* The "/" between the logo, the organization and the project: visible, but quieter than the names. */
.topbar .ctx-sep {
  color: var(--muted);
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  margin: 0 2px;
  opacity: 0.6;
}

/* Account pages: the header leads back home; the wordmark sits above the form. */
.bf-home {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  min-height: 32px;
}
.bf-home:hover {
  color: var(--text);
}
.da-mark {
  margin-bottom: 12px;
}

/* Hosting → How it runs and size (owner 2026-10-29): the two run types sit side by side on wide screens and
   stack on phones; the status pill never breaks over two lines. */
.host-runs {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.db-size .pill {
  white-space: nowrap;
}

/* Hosting → live deployment card and status filters (owner 2026-10-29: "too big a box at the top"). The card
   is left-aligned and short: address, deployment, then one line with how it runs, size, price and region.
   The status counts become one row of small toggle buttons instead of five large tiles. */
.dep-live {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding: 14px 16px;
}
.dep-live-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.dep-live-url {
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.dep-live-commit {
  overflow-wrap: anywhere;
}
.dep-live-actions {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.dep-live-plan {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: center;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.dep-live-plan .muted {
  margin-right: 4px;
}
@media (max-width: 640px) {
  .dep-live {
    grid-template-columns: minmax(0, 1fr);
  }
}
.count-tiles.is-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.count-tiles.is-inline .count-tile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
}
.count-tiles.is-inline .count-tile .n {
  display: inline;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.count-tiles.is-inline .count-tile[aria-pressed='true'] .n {
  color: inherit;
}

/* Hosting wizard: the chosen plan as one line on the Build settings step. */
.plan-line {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow-wrap: anywhere;
}

/* Project Overview by type: service tiles with figures, main card, attention (ui-scope-phase2 §E). */
.svc-tiles a {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.svc-tile-h {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.svc-tile-h strong {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.svc-tile-h .pill {
  white-space: nowrap;
}
.svc-tile-f {
  display: grid;
  gap: 2px;
}
.svc-tile-f > span {
  overflow-wrap: anywhere;
}
.ov-attn .checklist li .t {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.svc-tiles a,
.svc-tiles a .small,
.svc-tiles a strong {
  color: var(--text);
}
.svc-tiles a:hover strong {
  text-decoration: underline;
}

/* Project Overview as a dashboard (owner 2026-10-30; inspired by Supabase, Neon, Cloudflare and Vercel
   project pages): facts, key numbers with a trend, the week, services as rows; side column for attention,
   cost and activity. */
.ov-dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .ov-dash {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ov-hero .card-h h2 {
  font-size: 15px;
}
.ov-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 14px 20px;
  margin: 0;
}
.ov-fact {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}
.ov-fact .ico-box {
  width: 32px;
  height: 32px;
}
.ov-fact-t {
  min-width: 0;
}
.ov-fact dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}
.ov-fact dd {
  margin: 2px 0 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.ov-kpis {
  padding: 0;
}
.ov-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ov-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px 12px;
  min-width: 0;
}
.ov-kpi + .ov-kpi {
  border-left: 1px solid var(--border);
}
.ov-kpi-v {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ov-kpi-d {
  color: var(--muted);
  min-height: 16px;
}
.ov-kpi-d.is-up {
  color: var(--success);
}
.ov-kpi-d.is-down {
  color: var(--warning);
}
.kpi-spark {
  width: 100%;
  height: 28px;
  margin-top: 6px;
}
.kpi-spark polyline {
  fill: none;
  stroke: var(--s1);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.kpi-spark polygon {
  fill: var(--s1);
  opacity: 0.1;
}
.ov-kpi-note {
  margin: 0;
  padding: 8px 20px 12px;
  border-top: 1px solid var(--border);
}
@media (max-width: 760px) {
  .ov-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ov-kpi:nth-child(odd) {
    border-left: 0;
  }
  .ov-kpi:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }
}
.svc-rows {
  display: block;
}
.svc-rows li + li {
  border-top: 1px solid var(--border);
}
.svc-rows a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border: 0;
  border-radius: 0;
  color: var(--text);
}
.svc-rows a:hover {
  background: var(--subtle);
}
.svc-row-n {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.svc-row-n strong {
  font-weight: 600;
}
.svc-row-f {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.svc-row-v {
  color: var(--text);
}
.svc-row-go {
  color: var(--faint);
  display: inline-flex;
}
.svc-rows .pill {
  white-space: nowrap;
}
@media (max-width: 520px) {
  .svc-rows a {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 12px 16px;
  }
  .svc-row-go {
    display: none;
  }
  .svc-row-f {
    white-space: normal;
  }
}
.svc-row-t {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.svc-rows a strong,
.svc-rows a .svc-row-v {
  color: var(--text);
}
.svc-rows a:hover strong {
  text-decoration: underline;
}
@media (max-width: 520px) {
  .ov-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .ov-fact .ico-box {
    display: none;
  }
}