/* Evorbe shared UI. Component API and compatibility aliases: docs/design-system.md. */
:root {
  --ds-brand: var(--accent, var(--teal, #1a9b8e));
  --ds-brand-hover: #0e6f66;
  --ds-bg: var(--bg, var(--paper, #f4f6f5));
  --ds-surface: var(--card, #fff);
  --ds-text: var(--text, var(--ink, #12201e));
  --ds-muted: var(--muted, #667875);
  --ds-line: var(--line, #e2e8e6);
  --ds-field: var(--field, #fff);
  --ds-hover: var(--hover, #eef2f1);
  --ds-primary: var(--btn, var(--teal, #1a9b8e));
  --ds-primary-text: var(--btn-text, #fff);
  --ds-success: var(--ok, #0f9f7a);
  --ds-danger: var(--bad, var(--err, #e11d48));
  --ds-warning: #b45309;
  --ds-info: #0369a1;
  --ds-money-in: var(--ds-success);
  --ds-money-out: var(--ds-danger);
  --ds-inverse: #fff;
  --ds-group-bg: #12201e;
  --ds-group-text: #e8eeed;
  --ds-font: system-ui, -apple-system, sans-serif;
  --ds-text-xs: .75rem;
  --ds-text-sm: .875rem;
  --ds-text-md: 1rem;
  --ds-text-lg: 1.125rem;
  --ds-text-xl: 1.5rem;
  --ds-text-title: clamp(1.5rem, 3vw, 2rem);
  --ds-leading: 1.5;
  --ds-space-0: 0;
  --ds-space-1: .25rem;
  --ds-space-2: .5rem;
  --ds-space-3: .75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-radius-sm: 6px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 16px;
  --ds-radius-pill: 999px;
  --ds-shadow-sm: var(--shadow, 0 1px 2px rgb(18 32 30 / 4%));
  --ds-shadow-overlay: 0 16px 48px rgb(0 0 0 / 18%);
  --ds-z-base: 0;
  --ds-z-sticky: 30;
  --ds-z-backdrop: 70;
  --ds-z-drawer: 80;
  --ds-z-dialog: 100;
  --ds-z-popover: 120;
  --ds-control-h: 44px;
}
html[data-theme="dark"] {
  --ds-warning: #fbbf24;
  --ds-info: #7dd3fc;
}
*, *::before, *::after { box-sizing: border-box; }
.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-control-h);
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  background: var(--ds-primary);
  color: var(--ds-primary-text);
  font: 600 var(--ds-text-sm)/1.25 var(--ds-font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.ds-button:hover { filter: brightness(1.08); text-decoration: none; }
.ds-button.ds-button--secondary { background: transparent; color: var(--ds-text); border-color: var(--ds-line); }
.ds-button.ds-button--ghost { background: transparent; color: var(--ds-text); }
.ds-button.ds-button--danger { background: var(--ds-danger); color: var(--ds-inverse); }
.ds-button--sm { padding: var(--ds-space-2) var(--ds-space-3); font-size: var(--ds-text-xs); }
.ds-button--lg { padding: var(--ds-space-4) var(--ds-space-6); font-size: var(--ds-text-md); }
.ds-button--icon { min-width: var(--ds-control-h); padding: var(--ds-space-2); }
:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: 2px solid var(--ds-brand);
  outline-offset: 3px;
}
.ds-button:disabled, .ds-button[aria-disabled="true"] { opacity: .55; cursor: default; }
.ds-page-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ds-space-3); margin-bottom: var(--ds-space-6); }
.ds-page-title { margin: 0; color: var(--ds-text); font-size: var(--ds-text-title); font-weight: 650; line-height: 1.2; letter-spacing: -.035em; text-transform: none; }
.ds-section-title { margin: var(--ds-space-6) 0 var(--ds-space-3); color: var(--ds-muted); font-size: var(--ds-text-xs); font-weight: 650; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; }
.ds-form { display: flex; flex-direction: column; gap: var(--ds-space-4); }
.ds-label { display: block; margin: 0; font-size: var(--ds-text-sm); color: var(--ds-muted); }
.ds-input { display: block; width: 100%; min-width: 0; min-height: var(--ds-control-h); margin-top: var(--ds-space-2); padding: var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); background: var(--ds-field); color: var(--ds-text); font: inherit; font-size: var(--ds-text-md); }
textarea.ds-input { min-height: 8rem; resize: vertical; }
.ds-check { display: flex; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-control-h); cursor: pointer; }
.ds-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ds-brand); }
.ds-help { color: var(--ds-muted); font-size: var(--ds-text-sm); }
.ds-error { color: var(--ds-danger); font-size: var(--ds-text-sm); }
.ds-card { padding: var(--ds-space-4); margin-bottom: var(--ds-space-5); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); background: var(--ds-surface); box-shadow: var(--ds-shadow-sm); }
.ds-card > :first-child { margin-top: 0; }
.ds-card > :last-child { margin-bottom: 0; }
.ds-table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.ds-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--ds-text-sm); }
.ds-table :is(th, td) { padding: var(--ds-space-3); border-bottom: 1px solid var(--ds-line); vertical-align: top; }
.ds-table th { color: var(--ds-muted); font-size: var(--ds-text-xs); font-weight: 650; }
.ds-list { list-style: none; padding: 0; margin: 0; }
.ds-list > li { padding-block: var(--ds-space-3); border-bottom: 1px solid var(--ds-line); }
.ds-chip { display: inline-flex; align-items: center; gap: var(--ds-space-1); padding: var(--ds-space-1) var(--ds-space-2); border-radius: var(--ds-radius-pill); background: var(--ds-hover); color: var(--ds-muted); font-size: var(--ds-text-xs); font-weight: 600; line-height: 1.4; }
.ds-chip--success { color: var(--ds-success); background: color-mix(in srgb, var(--ds-success) 12%, var(--ds-surface)); }
.ds-chip--danger { color: var(--ds-danger); background: color-mix(in srgb, var(--ds-danger) 12%, var(--ds-surface)); }
.ds-chip--warning { color: var(--ds-warning); background: color-mix(in srgb, var(--ds-warning) 12%, var(--ds-surface)); }
.ds-chip--info { color: var(--ds-info); background: color-mix(in srgb, var(--ds-info) 12%, var(--ds-surface)); }
.ds-money-in { color: var(--ds-money-in); }
.ds-money-out { color: var(--ds-money-out); }
.ds-empty { padding: var(--ds-space-8) var(--ds-space-4); color: var(--ds-muted); text-align: center; }
.ds-empty strong { display: block; color: var(--ds-text); }
.ds-alert { padding: var(--ds-space-3) var(--ds-space-4); margin-bottom: var(--ds-space-4); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); overflow-wrap: anywhere; }
.ds-alert--success { color: var(--ds-success); background: color-mix(in srgb, var(--ds-success) 10%, var(--ds-surface)); }
.ds-alert--danger { color: var(--ds-danger); background: color-mix(in srgb, var(--ds-danger) 10%, var(--ds-surface)); }
.ds-alert--warning { color: var(--ds-warning); background: color-mix(in srgb, var(--ds-warning) 10%, var(--ds-surface)); }
.ds-alert--info { color: var(--ds-info); background: color-mix(in srgb, var(--ds-info) 10%, var(--ds-surface)); }
.ds-dialog { width: min(40rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: var(--ds-space-5); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); background: var(--ds-surface); color: var(--ds-text); box-shadow: var(--ds-shadow-overlay); z-index: var(--ds-z-dialog); }
.ds-dialog::backdrop { background: rgb(7 18 16 / 45%); }
.ds-tabs { display: flex; gap: var(--ds-space-2); max-width: 100%; overflow-x: auto; }
.ds-tabs a { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: var(--ds-control-h); padding: var(--ds-space-2) var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-pill); color: var(--ds-muted); text-decoration: none; }
.ds-tabs a[aria-current="page"] { color: var(--ds-text); border-color: var(--ds-brand); background: var(--ds-hover); }
.ds-stack { display: flex; flex-direction: column; gap: var(--ds-space-4); }
.ds-cluster, .ds-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ds-space-3); }
.ds-actions { margin-top: var(--ds-space-5); }
.ds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--ds-space-4); }
.ds-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-4); }
.ds-min-0 { min-width: 0; }
.ds-full { width: 100%; }
.ds-text-wrap { overflow-wrap: anywhere; }
.ds-pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.ds-inline { display: inline; }
.ds-self-end { align-self: end; }
.ds-grow { flex: 1; min-width: 0; }
@media (min-width: 600px) {
  .ds-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-card { padding: var(--ds-space-6); }
}
@media (min-width: 960px) {
  .ds-page-header { gap: var(--ds-space-4); }
  .ds-page-header > .ds-actions { margin-top: 0; margin-left: auto; }
}
/* Studio shell uses the existing drawer and its 900px JS breakpoint. */
[data-ui="studio"] :is(.admin-frame, .admin-main) { min-width: 0; max-width: 100%; }
[data-ui="studio"] :is(.nav-toggle, .notify-btn, .account-btn) { min-width: var(--ds-control-h); min-height: var(--ds-control-h); }
[data-ui="studio"] .sidenav a { min-height: var(--ds-control-h); display: flex; align-items: center; }
[data-ui="studio"] :is(.account-panel a, .account-menu-action, .notify-all) { min-height: var(--ds-control-h); }
[data-ui="studio"] :is(.account-panel, .notify-panel) { max-width: calc(100vw - 2rem); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-overlay); }
@media (max-width: 900px) {
  [data-ui="studio"] .wrap > header { padding-block: var(--ds-space-2); }
  [data-ui="studio"] .header-end { gap: var(--ds-space-1); }
  [data-ui="studio"] body:has(.sidenav) header .brand { max-width: calc(100% - 200px); }
  [data-ui="studio"] :is(.brand-logo, .brand-logo--svg, .brand-logo--svg svg) { max-width: 100%; }
  [data-ui="studio"] .sidenav { padding-bottom: calc(var(--ds-space-6) + env(safe-area-inset-bottom)); }
  [data-ui="studio"] .powered-by { padding-bottom: calc(var(--ds-space-4) + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .ds-button { transition: none; }
}

/* Studio components. Old classes are aliases, including PHP-generated markup. */
[data-ui="studio"] { --border: var(--ds-line); --text-muted: var(--ds-muted); --ink: var(--ds-text); --teal: var(--ds-brand); --warn: var(--ds-warning); }
[data-ui="studio"] body { font-family: var(--ds-font); line-height: var(--ds-leading); }
[data-ui="studio"] :is(.card, .panel, .tile, .project-card) {
  border-color: var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-sm);
  padding: var(--ds-space-4);
}
[data-ui="studio"] :is(.card, .panel) { margin-bottom: var(--ds-space-5); }
[data-ui="studio"] :is(.card, .panel) > :first-child { margin-top: 0; }
[data-ui="studio"] :is(.admin-heading, .admin-list-page-header) { align-items: center; flex-wrap: wrap; gap: var(--ds-space-3); margin-bottom: var(--ds-space-5); }
[data-ui="studio"] :is(.admin-heading h2, .admin-list-page-title, .project-head h1, .project-page-title) {
  margin: 0;
  color: var(--ds-text);
  font-size: var(--ds-text-title);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.035em;
  text-transform: none;
}
[data-ui="studio"] .admin-list-page-lede { flex-basis: 100%; font-size: var(--ds-text-sm); line-height: 1.5; }
[data-ui="studio"] .section-label { font-size: var(--ds-text-xs); font-weight: 650; letter-spacing: .06em; margin-block: var(--ds-space-6) var(--ds-space-3); }
[data-ui="studio"] :is(.grid, .grid-2, .form-grid) { gap: var(--ds-space-4); }
[data-ui="studio"] :is(.grid, .grid-2, .form-grid) > * { min-width: 0; }
[data-ui="studio"] :is(input, select, textarea) { border-radius: var(--ds-radius-md); border-color: var(--ds-line); accent-color: var(--ds-brand); }
[data-ui="studio"] :is(.stack label, .form-grid label, .grid-2 label) > :is(input, select, textarea) { margin-top: var(--ds-space-2); }
[data-ui="studio"] :is(.stack, .form-grid, .grid-2) :is(label, form) { min-width: 0; }
[data-ui="studio"] :is(.check-row, .admin-list-toolbar-checkbox) { min-height: var(--ds-control-h); align-items: center; }
[data-ui="studio"] :is(.check-row, .admin-list-toolbar-checkbox) :is(input[type="checkbox"], input[type="radio"]) { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; }
[data-ui="studio"] :is(.btn, button.secondary, .admin-list-toolbar-action, details.add-panel > summary) {
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-sm);
  font-weight: 600;
  min-height: var(--ds-control-h);
}
[data-ui="studio"] .btn { padding: var(--ds-space-3) var(--ds-space-4); line-height: 1.25; }
[data-ui="studio"] :is(.btn.secondary, button.secondary) { border-color: var(--ds-line); background: transparent; color: var(--ds-text); }
[data-ui="studio"] :is(.btn.danger, button.danger) { background: var(--ds-danger); color: var(--ds-inverse); }
[data-ui="studio"] .admin-list-toolbar { --admin-toolbar-control-h: var(--ds-control-h); gap: var(--ds-space-2); }
[data-ui="studio"] .admin-list-toolbar-search-wrap { max-width: none; }
[data-ui="studio"] .admin-list-toolbar-actions { flex-wrap: wrap; }
[data-ui="studio"] :is(.badge, .project-card-status) { border-radius: var(--ds-radius-pill); font-size: var(--ds-text-xs); padding: var(--ds-space-1) var(--ds-space-2); }
[data-ui="studio"] :is(.flash, .err, .ok, .warn):not(.badge) { border-radius: var(--ds-radius-md); padding: var(--ds-space-3) var(--ds-space-4); overflow-wrap: anywhere; }
[data-ui="studio"] .flash:not(.err):not(.ok):not(.warn) { color: var(--ds-info); background: color-mix(in srgb, var(--ds-info) 10%, var(--ds-surface)); }
[data-ui="studio"] .warn { color: var(--ds-warning); background: color-mix(in srgb, var(--ds-warning) 12%, var(--ds-surface)); border-color: color-mix(in srgb, var(--ds-warning) 30%, var(--ds-line)); }
[data-ui="studio"] :is(.table-scroll, .tasks-table-scroll, .pipeline-board) { min-width: 0; max-width: 100%; overscroll-behavior-x: contain; }
[data-ui="studio"] .table :is(th, td) { padding: var(--ds-space-3); }
[data-ui="studio"] .table :is(td, th) { overflow-wrap: anywhere; }
[data-ui="studio"] .table th { font-weight: 650; }
[data-ui="studio"] .chipnav { gap: var(--ds-space-2); max-width: 100%; }
[data-ui="studio"] .chipnav a { min-height: var(--ds-control-h); align-items: center; padding: var(--ds-space-2) var(--ds-space-3); }
[data-ui="studio"] :is(.record-picker-dialog, .bot-work-dialog, .admin-add-drawer-panel, .help-panel) { border-radius: var(--ds-radius-lg); border-color: var(--ds-line); background: var(--ds-surface); box-shadow: var(--ds-shadow-overlay); }
[data-ui="studio"] .admin-add-drawer-root { z-index: var(--ds-z-drawer); }
[data-ui="studio"] :is(.help-panel, .admin-toolbar-menu-panel, .tasks-inline-popover-panel) { z-index: var(--ds-z-popover); }
[data-ui="studio"] :is(.project-tasks-empty, .pipeline-empty, .bot-work-section-empty, .notify-empty) { color: var(--ds-muted); font-size: var(--ds-text-sm); }
[data-ui="studio"] :is(.sub-amount--in, .ds-money-in) { color: var(--ds-money-in); }
[data-ui="studio"] :is(.sub-amount--out, .ds-money-out) { color: var(--ds-money-out); }
/* QA and Tax return retain their layouts. These aliases unify surfaces only. */
[data-ui="studio"] :is(.qa-workspace, .tax-return) .panel { border-color: var(--ds-line); border-radius: var(--ds-radius-lg); }
[data-ui="studio"] .qa-save-status { color: var(--ds-muted); }
[data-ui="studio"] :is(.bot-work-dialog, .record-picker-dialog) { max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; }
[data-ui="studio"] :is(.pipeline-col, .agent-work-detail-head, .project-page-header) { min-width: 0; }
[data-ui="studio"] :is(pre, .agent-pr-branches, .agent-work-detail-head, .project-head, .breadcrumb) { overflow-wrap: anywhere; }
[data-ui="studio"] pre { max-width: 100%; overflow-x: auto; }
/* Task grids deliberately do not inherit card, stacked-table or wrapping rules. */
[data-ui="studio"] :is(.tasks-table, .tasks-table-scroll) { border: 0; outline: 0; border-radius: 0; }
[data-ui="studio"] :is(.tasks-table-cell--title, .tasks-table-head-cell[data-col="title"]) { position: relative; left: auto; }
[data-ui="studio"] :is(.tasks-table-head-cell, .tasks-table-cell).is-tasks-col-last { border-right: 0; }
[data-ui="studio"] .tasks-table-epic-bar,
[data-ui="studio"] button.tasks-table-epic-bar.tasks-table-epic-bar--loose,
[data-ui="studio"] button.tasks-table-epic-bar:hover {
  background: var(--ds-group-bg);
  color: var(--ds-group-text);
  border-radius: 0;
  border: 0;
  margin-top: 30px;
}
[data-ui="studio"] .tasks-table-inner--subgrid .tasks-table-epic-group--subgrid .tasks-table-epic-bar { border: 0; border-radius: 0; }
[data-ui="studio"] .tasks-table-epic-bar :is(.epic-group-title, .epic-group-meta, .epic-group-count) { color: inherit; }
[data-ui="studio"] :is(.tasks-table-epic-rows, .tasks-table-epic-rows .task-compact-row) { padding-top: 0; margin-top: 0; margin-bottom: 0; border-radius: 0; }
[data-ui="studio"] button.bot-work-section-head.bot-work-section-toggle { padding: 30px 0 10px; color: var(--ds-text); }
[data-ui="studio"] .bot-work-section-head .bot-work-section-chevron { margin-left: 10px; }
[data-ui="studio"] .bot-work-section-body { gap: 0; }
[data-ui="studio"] :is(.bot-work-flash, .task-compact-row) { animation: none; }
[data-ui="studio"] .bot-work-bar { flex-wrap: wrap; gap: var(--ds-space-2); }
[data-ui="studio"] .bot-work-bar-left { flex: 1 1 100%; flex-wrap: wrap; }
[data-ui="studio"] .bot-work-bar-right { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; }
[data-ui="studio"] .bot-work-bar-title { font-size: var(--ds-text-xl); }
[data-ui="studio"] .bot-work-toolbar-btn { border-radius: var(--ds-radius-md); }
[data-ui="studio"] .bot-work-chrome { min-width: 0; max-width: 100%; }
@media (min-width: 600px) {
  [data-ui="studio"] :is(.card, .panel, .tile, .project-card) { padding: var(--ds-space-6); }
  [data-ui="studio"] :is(.form-grid, .grid-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-ui="studio"] .tax-return .grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 960px) {
  [data-ui="studio"] .bot-work-bar-left { flex-basis: auto; }
  [data-ui="studio"] .bot-work-bar-right { flex-basis: auto; justify-content: flex-end; }
}
@media (max-width: 900px) {
  [data-ui="studio"] {
    --ds-text-lg: 1.25rem;
    --ds-text-xl: 1.25rem;
    --ds-text-display: 1.75rem;
    --ds-text-title: var(--ds-text-display);
  }
  [data-ui="studio"] .chipnav { margin-inline: 0; padding-inline: 0; }
  [data-ui="studio"] .studio-planner-page,
  [data-ui="studio"] .studio-planner-goal-card,
  [data-ui="studio"] .studio-planner-summary,
  [data-ui="studio"] .task-card-compact {
    --ds-card-padding: var(--ds-space-4);
  }
  [data-ui="studio"] .studio-planner-goal-card,
  [data-ui="studio"] .studio-planner-summary,
  [data-ui="studio"] .task-card-compact {
    padding: var(--ds-card-padding, var(--ds-space-4));
  }
  [data-ui="studio"] .chipnav a { flex-shrink: 0; }
  [data-ui="studio"] :is(button, .btn, summary, [role="button"], select, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])) {
    min-height: var(--ds-control-h) !important;
  }
  [data-ui="studio"] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) { font-size: var(--ds-text-md); }
  [data-ui="studio"] :is(.help-btn, .task-menu-trigger, .bot-work-menu-btn, .record-picker-close) { min-width: var(--ds-control-h); max-width: none; max-height: none; }
  [data-ui="studio"] .help-panel { position: fixed; inset: auto 1rem; width: auto; max-height: 60dvh; overflow-y: auto; }
  [data-ui="studio"] :is(.task-compact-title, .tasks-table-head-sort, .epic-group-title, table td > a, .plain li > a, .inspector-list a) { min-height: var(--ds-control-h); display: inline-flex; align-items: center; }
  [data-ui="studio"] .tasks-table-head-cell { min-height: var(--ds-control-h); }
  [data-ui="studio"] .task-compact-copy-link { padding-inline: var(--ds-space-2); flex-shrink: 0; }
  [data-ui="studio"] .task-detail-meta-grid { grid-template-columns: minmax(0, 1fr); }
  [data-ui="studio"] .task-detail-field :is(input, select) { max-width: 100%; }
  [data-ui="studio"] :is(.bot-work-toolbar-btn, .bot-work-view-opt) { height: var(--ds-control-h); }
  [data-ui="studio"] .bot-work-view-toggle { height: auto; padding: 0; }
  [data-ui="studio"] .bot-work-bar-right { gap: var(--ds-space-2); }
  [data-ui="studio"] :is(.bot-work-menu-panel a, .admin-toolbar-menu-item, .task-menu-item, .record-picker-hit) { min-height: var(--ds-control-h); display: flex; align-items: center; }
  [data-ui="studio"] .bot-work-filters-panel { display: grid; grid-template-columns: minmax(0, 1fr); }
  [data-ui="studio"] .bot-work-filters-panel[hidden] { display: none; }
  [data-ui="studio"] .bot-work-filter-field { flex-wrap: wrap; }
  [data-ui="studio"] .bot-work-select { flex: 1; max-width: 100%; }
  [data-ui="studio"] .tasks-table-head-select,
  [data-ui="studio"] .tasks-row-select-label { min-height: var(--ds-control-h); min-width: var(--ds-control-h); }
  [data-ui="studio"] .status-color-field input[type="color"] { width: var(--ds-control-h); height: var(--ds-control-h); }
  [data-ui="studio"] :is(.admin-add-drawer-panel, .bot-work-dialog) { padding: var(--ds-space-4); }
  [data-ui="studio"] .admin-list-search-clear { min-width: var(--ds-control-h); right: 0; }
  [data-ui="studio"] .admin-list-toolbar-search-input { padding-right: var(--ds-control-h); }
  [data-ui="studio"] .agent-work-detail-head { flex-wrap: wrap; }
}
@media (max-width: 599px) {
  [data-ui="studio"] :is(.form-grid, .grid-2, .status-color-grid) { grid-template-columns: minmax(0, 1fr); }
  [data-ui="studio"] .grid { grid-template-columns: minmax(0, 1fr); }
  [data-ui="studio"] .table:not(.stack-mobile) { display: block; overflow-x: auto; }
}
/* Reusable replacements for static presentation attributes. */
.ds-gap-1 { gap: var(--ds-space-1); }
.ds-gap-2 { gap: var(--ds-space-2); }
.ds-gap-3 { gap: var(--ds-space-3); }
.ds-wrap { flex-wrap: wrap; }
.ds-items-center { align-items: center; }
.ds-items-end { align-items: flex-end; }
.ds-items-baseline { align-items: baseline; }
.ds-basis-full { flex: 1 1 100%; }
.ds-block { display: block; }
.ds-text-sm { font-size: var(--ds-text-sm); }
.ds-text-md { font-size: var(--ds-text-md); }
.ds-max-sm { max-width: 10rem; }
.ds-max-prose { max-width: 40rem; }
.ds-my-1 { margin-block: var(--ds-space-1); }
.ds-my-3 { margin-block: var(--ds-space-3); }
.ds-cursor-default { cursor: default; }
.ds-list-inset { line-height: var(--ds-leading); padding-left: var(--ds-space-5); }
.ds-heading-sm { font-size: var(--ds-text-md); }
.ds-heading-lg { font-size: var(--ds-text-xl); }
/* Utilities intentionally override component margins without !important. */
:root .ds-m-0 { margin: 0; }
:root .ds-mt-0 { margin-top: 0; }
:root .ds-mb-0 { margin-bottom: 0; }
:root .ds-mt-1 { margin-top: var(--ds-space-1); }
:root .ds-mt-2 { margin-top: var(--ds-space-2); }
:root .ds-mt-3 { margin-top: var(--ds-space-3); }
:root .ds-mt-4 { margin-top: var(--ds-space-4); }
:root .ds-mt-5 { margin-top: var(--ds-space-5); }
:root .ds-mt-6 { margin-top: var(--ds-space-6); }
:root .ds-mt-8 { margin-top: var(--ds-space-8); }
:root .ds-mb-1 { margin-bottom: var(--ds-space-1); }
:root .ds-mb-2 { margin-bottom: var(--ds-space-2); }
:root .ds-mb-3 { margin-bottom: var(--ds-space-3); }
:root .ds-mb-4 { margin-bottom: var(--ds-space-4); }
:root .ds-mb-5 { margin-bottom: var(--ds-space-5); }
:root .ds-mb-6 { margin-bottom: var(--ds-space-6); }
@media print {
  [data-ui="studio"] :is(.card, .panel) { border: 0; box-shadow: none; }
  [data-ui="studio"] .wrap > header { display: none; }
}
/* Field and Office keep their PWA layout and action hooks. */
[data-ui="field"] :is(.btn, .btn-text) { min-height: var(--ds-control-h); border-radius: var(--ds-radius-md); }
[data-ui="field"] .btn { background: var(--ds-brand); }
[data-ui="field"] :is(.btn--secondary, .btn--ghost) { background: transparent; color: var(--ds-text); }
[data-ui="field"] .btn--danger { background: var(--ds-danger); color: var(--ds-inverse); }
[data-ui="field"] .btn--warn { background: var(--ds-warning); color: var(--ds-inverse); }
[data-ui="field"] .card { border-radius: var(--ds-radius-lg); border-color: var(--ds-line); box-shadow: var(--ds-shadow-sm); }
[data-ui="field"] .field :is(input, select, textarea) { border-radius: var(--ds-radius-md); min-height: var(--ds-control-h); }
[data-ui="field"] :is(.tab-nav a, .btn-text, .account-btn) { min-height: var(--ds-control-h); }

/* Marketing uses the same scale and components, retaining its editorial hero. */
[data-ui="marketing"] {
  --ds-font: var(--sans);
  --ds-primary: var(--ds-brand-hover);
  --ds-hero-bg: #071210;
  --ds-hero-accent: #8fe8d4;
  --ds-primary-text: var(--ds-inverse);
  --ds-text-display: clamp(2rem, 6vw, 4rem);
}
[data-ui="marketing"] .wrap { width: min(1100px, calc(100% - var(--ds-space-8))); }
[data-ui="marketing"] .wrap.narrow { width: min(640px, calc(100% - var(--ds-space-8))); }
[data-ui="marketing"] :is(.section, .case-hero) { padding-block: var(--ds-space-12); }
[data-ui="marketing"] .section-title { margin-top: 0; font-size: var(--ds-text-title); line-height: 1.2; letter-spacing: -.035em; margin-bottom: var(--ds-space-4); }
[data-ui="marketing"] :is(.section-lead, .case-lead) { font-size: var(--ds-text-lg); line-height: 1.6; }
[data-ui="marketing"] .topbar {
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  padding: calc(var(--ds-space-5) + env(safe-area-inset-top, 0px)) max(var(--ds-space-4), env(safe-area-inset-right, 0px)) 0 max(var(--ds-space-4), env(safe-area-inset-left, 0px));
}
[data-ui="marketing"] .topbar-page { padding-bottom: var(--ds-space-5); }
[data-ui="marketing"] :is(.topbar nav, .site-footer) { gap: var(--ds-space-2); flex-wrap: wrap; }
[data-ui="marketing"] :is(.topbar a, .site-footer a, .case-more-link, .case-hero .kicker a) { min-width: var(--ds-control-h); min-height: var(--ds-control-h); display: inline-flex; align-items: center; justify-content: center; }
[data-ui="marketing"] .topbar nav a { padding: var(--ds-space-2); }
[data-ui="marketing"] .topbar nav a.cta { border-radius: var(--ds-radius-md); padding-inline: var(--ds-space-3); }
/* Product identity is shared by landing cards and case-study media. */
[data-ui="marketing"] :is(.card, .case)[data-product="forksy"] { --ds-product-accent: #198875; --ds-product-glow: var(--ds-hero-accent); }
[data-ui="marketing"] :is(.card, .case)[data-product="dartleague"] { --ds-product-accent: #c9a227; --ds-product-glow: #f3d27a; }
[data-ui="marketing"] :is(.card, .case)[data-product="syndifly"] { --ds-product-accent: #5b94f0; --ds-product-glow: #8eb8ff; }
[data-ui="marketing"] :is(.card, .case)[data-product="eventcove"] { --ds-product-accent: #c4a494; --ds-product-glow: #f0d2c6; }
[data-ui="marketing"] .card { padding: 0; margin: 0; }
[data-ui="marketing"] .card-body { padding: var(--ds-space-5); }
[data-ui="marketing"] .card-head { gap: var(--ds-space-3); flex-wrap: wrap; }
[data-ui="marketing"] .card h3 { font-size: var(--ds-text-xl); }
[data-ui="marketing"] .card p { font-size: var(--ds-text-md); line-height: 1.6; }
[data-ui="marketing"] :is(.card-live, .case-live) { border-radius: var(--ds-radius-pill); font-size: var(--ds-text-xs); }
[data-ui="marketing"] .studio-tile {
  --ds-surface: color-mix(in srgb, var(--ds-inverse) 4%, transparent);
  --ds-line: color-mix(in srgb, var(--ds-inverse) 10%, transparent);
  padding: var(--ds-space-5);
  margin: 0;
}
[data-ui="marketing"] .studio-tile--lead { --ds-surface: linear-gradient(135deg, color-mix(in srgb, var(--ds-brand) 22%, transparent), color-mix(in srgb, var(--ds-inverse) 4%, transparent)); }
[data-ui="marketing"] .studio-tile--note { --ds-surface: color-mix(in srgb, var(--ds-inverse) 6%, transparent); }
[data-ui="marketing"] :is(.studio-bento, .products, .engage-grid) { gap: var(--ds-space-4); }
[data-ui="marketing"] :is(.studio-bento, .products, .engage-grid, .case-grid) > * { min-width: 0; }
[data-ui="marketing"] .product-logo--dartleague { width: 5.2rem; height: 1.85rem; object-fit: contain; }
[data-ui="marketing"] :is(.contact-form, .form-grid > *) { min-width: 0; }
[data-ui="marketing"] .contact-form > .btn { width: 100%; }
[data-ui="marketing"] .flash { border-radius: var(--ds-radius-md); padding: var(--ds-space-3) var(--ds-space-4); }
[data-ui="marketing"] .flash.ok { color: var(--ds-success); background: color-mix(in srgb, var(--ds-success) 10%, var(--ds-surface)); }
[data-ui="marketing"] .flash.err { color: var(--ds-danger); background: color-mix(in srgb, var(--ds-danger) 10%, var(--ds-surface)); }
[data-ui="marketing"] .case-more-link { border-radius: var(--ds-radius-md); padding: var(--ds-space-3) var(--ds-space-4); }
[data-ui="marketing"] .case-aside { padding: var(--ds-space-5); margin: 0; }
[data-ui="marketing"] .site-footer { padding-bottom: calc(var(--ds-space-6) + env(safe-area-inset-bottom)); }
[data-ui="marketing"] :is(.card, .case-body, .case-aside, .section-lead) { overflow-wrap: anywhere; }
[data-ui="marketing"] .topbar nav a:not(.cta) { font-size: var(--ds-text-xs); padding-inline: var(--ds-space-1); }
[data-ui="marketing"] .topbar .mark img { height: var(--ds-space-4); }
@media (min-width: 600px) {
  [data-ui="marketing"] :is(.section, .case-hero) { padding-block: calc(var(--ds-space-12) * 1.5); }
  [data-ui="marketing"] .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-ui="marketing"] .topbar nav { gap: var(--ds-space-4); }
  [data-ui="marketing"] .topbar nav a:not(.cta) { font-size: var(--ds-text-sm); padding-inline: var(--ds-space-2); }
  [data-ui="marketing"] .topbar .mark img { height: var(--ds-space-5); }
  [data-ui="marketing"] .contact-form > .btn { width: auto; align-self: flex-start; }
}
/* Email and code steps share an accessible, calm sign-in surface. */
[data-ui="studio"] body.is-login .wrap { width: 100%; padding: var(--ds-space-8) var(--ds-space-4) 0; }
[data-ui="studio"] body.is-login .brand { min-width: var(--ds-control-h); }
[data-ui="studio"] body.is-login .theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ds-control-h);
  min-height: var(--ds-control-h);
  padding: var(--ds-space-2) var(--ds-space-3);
}
[data-ui="studio"] .login-card { padding: var(--ds-space-6); margin-top: var(--ds-space-4); }
[data-ui="studio"] .login-card .ds-page-title { font-size: var(--ds-text-xl); text-transform: none; letter-spacing: -.035em; }
[data-ui="studio"] .login-form { gap: var(--ds-space-3); }
[data-ui="studio"] .login-form :is(.ds-label, .ds-input) { margin: 0; }
[data-ui="studio"] .login-form .login-actions { margin-top: var(--ds-space-2); }
[data-ui="studio"] .login-actions button { width: 100%; }
[data-ui="studio"] #otp { font-size: var(--ds-text-xl); letter-spacing: .3em; font-variant-numeric: tabular-nums; }
[data-ui="studio"] .login-resend-btn { min-height: var(--ds-control-h); text-align: left; }
[data-ui="embed"] { --ds-font: system-ui, -apple-system, sans-serif; }
[data-ui="embed"] body { padding: max(var(--ds-space-4), env(safe-area-inset-top)) max(var(--ds-space-4), env(safe-area-inset-right)) max(var(--ds-space-4), env(safe-area-inset-bottom)) max(var(--ds-space-4), env(safe-area-inset-left)); }
[data-ui="embed"] .wrap { width: 100%; max-width: 32rem; padding: var(--ds-space-5); }
[data-ui="embed"] :is(input, select, textarea) { min-width: 0; width: 100%; min-height: var(--ds-control-h); border-color: var(--ds-line); border-radius: var(--ds-radius-md); font-size: var(--ds-text-md); }
[data-ui="studio"] .wrap > header .brand { min-height: var(--ds-control-h); }

.ds-disabled { opacity: .5; cursor: not-allowed; }
[data-ui="studio"] .powered-by a { min-height: var(--ds-control-h); display: inline-flex; align-items: center; }
@media (max-width: 900px) {
  [data-ui="studio"] :is(.notify-panel, .account-panel, .help-panel, .ai-usage-panel) {
    position: fixed;
    top: calc(var(--admin-header-h) + var(--ds-space-2) + env(safe-area-inset-top, 0px));
    left: max(var(--ds-space-4), env(safe-area-inset-left));
    right: max(var(--ds-space-4), env(safe-area-inset-right));
    width: auto;
    max-height: calc(100dvh - var(--admin-header-h) - var(--ds-space-8) - env(safe-area-inset-bottom));
    overflow-y: auto;
  }
}