:root,
[data-theme="light"] {
  --hdk-surface-page: #f5f7fb;
  --hdk-surface-panel: #ffffff;
  --hdk-surface-panel-strong: #f0f4fa;
  --hdk-surface-raised: #fbfcff;
  --hdk-text-primary: #111827;
  --hdk-text-secondary: #4b5563;
  --hdk-text-muted: #7b8494;
  --hdk-border-subtle: #dfe5ee;
  --hdk-accent: #245bff;
  --hdk-accent-2: #15a37f;
  --hdk-accent-3: #f59e0b;
  --hdk-accent-4: #ef4444;
  --hdk-success: #15803d;
  --hdk-success-soft: #e9f8ef;
  --hdk-warning: #b45309;
  --hdk-warning-soft: #fff4df;
  --hdk-critical: #b91c1c;
  --hdk-critical-soft: #fff0f0;
  --hdk-chart-grid: #e5ebf3;
  --hdk-chart-axis: #667085;
  --hdk-chart-line: #245bff;
  --hdk-chart-fill: rgba(36, 91, 255, 0.16);
  --hdk-series-blue: #245bff;
  --hdk-series-green: #15a37f;
  --hdk-series-red: #ef4444;
  --hdk-series-amber: #f59e0b;
  --hdk-shadow: 0 18px 54px rgba(15, 23, 42, 0.10);
  --hdk-space-1: 4px;
  --hdk-space-2: 8px;
  --hdk-space-3: 12px;
  --hdk-space-4: 16px;
  --hdk-space-5: 20px;
  --hdk-space-6: 24px;
  --hdk-space-8: 32px;
  --hdk-space-page-x: clamp(20px, 3vw, 40px);
  --hdk-space-page-y: clamp(20px, 2.6vw, 36px);
  --hdk-space-section: var(--hdk-space-5);
  --hdk-space-card: var(--hdk-space-4);
  --hdk-space-grid: var(--hdk-space-3);
  --hdk-radius-card: 8px;
  --hdk-radius-control: 8px;
  --hdk-max-content: 1480px;
  --hdk-sidebar-width: 264px;
  --hdk-sidebar-collapsed-width: 78px;
  --hdk-sidebar-padding: 14px;
  --hdk-sidebar-group-gap: 14px;
  --hdk-sidebar-item-height: 38px;
  --hdk-sidebar-item-gap: 6px;
  --hdk-sidebar-z: 20;
}

[data-theme="dark"] {
  --hdk-surface-page: #0b1016;
  --hdk-surface-panel: #111821;
  --hdk-surface-panel-strong: #172231;
  --hdk-surface-raised: #131c28;
  --hdk-text-primary: #f8fafc;
  --hdk-text-secondary: #cbd5e1;
  --hdk-text-muted: #94a3b8;
  --hdk-border-subtle: #273244;
  --hdk-chart-grid: #263244;
  --hdk-chart-axis: #aab6c7;
  --hdk-chart-line: #8fb2ff;
  --hdk-chart-fill: rgba(143, 178, 255, 0.18);
  --hdk-series-blue: #8fb2ff;
  --hdk-series-green: #65d98b;
  --hdk-series-red: #ff8a8a;
  --hdk-series-amber: #f8c36a;
  --hdk-success: #65d98b;
  --hdk-success-soft: rgba(101, 217, 139, 0.14);
  --hdk-warning: #f8c36a;
  --hdk-warning-soft: rgba(248, 195, 106, 0.14);
  --hdk-critical: #ff8a8a;
  --hdk-critical-soft: rgba(255, 138, 138, 0.14);
  --hdk-shadow: 0 22px 64px rgba(0, 0, 0, 0.32);
}

.hdk-shell,
.hdk-shell * {
  box-sizing: border-box;
}

.hdk-shell {
  display: grid;
  grid-template-columns: minmax(232px, var(--hdk-sidebar-width)) minmax(0, 1fr);
  height: 100dvh;
  max-height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--hdk-surface-page);
  color: var(--hdk-text-primary);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  transition: grid-template-columns 180ms ease;
}

.hdk-shell.sidebar-collapsed {
  grid-template-columns: var(--hdk-sidebar-collapsed-width) minmax(0, 1fr);
}

.hdk-sidebar {
  position: sticky;
  top: 0;
  z-index: var(--hdk-sidebar-z);
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: 20px var(--hdk-sidebar-padding);
  background: color-mix(in srgb, var(--hdk-surface-panel) 92%, transparent);
  border-right: 1px solid var(--hdk-border-subtle);
  backdrop-filter: blur(18px);
}

.hdk-sidebar-rail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.hdk-brand {
  display: grid;
  align-items: start;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-width: 0;
  margin-bottom: 26px;
}

.hdk-brand__mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--hdk-accent);
  color: #ffffff;
  font-weight: 900;
}

.hdk-brand strong,
.hdk-brand small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdk-brand small {
  margin-top: 2px;
  color: var(--hdk-text-muted);
}

.hdk-nav {
  display: grid;
  align-content: start;
  gap: var(--hdk-sidebar-group-gap);
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.hdk-nav-group {
  display: grid;
  gap: var(--hdk-sidebar-item-gap);
  min-width: 0;
}

.hdk-nav-group-title {
  margin: 0 0 2px;
  padding: 0 4px;
  color: var(--hdk-text-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hdk-nav-item {
  min-height: var(--hdk-sidebar-item-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hdk-text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  font-family: inherit;
  text-decoration: none;
  text-align: left;
}

.hdk-sidebar-toggle {
  width: 30px;
  min-height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel-strong);
  color: var(--hdk-text-primary);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.hdk-sidebar-toggle:hover,
.hdk-sidebar-toggle:focus-visible {
  background: var(--hdk-surface-raised);
  outline: 2px solid var(--hdk-accent);
  outline-offset: 2px;
}

.hdk-shell.sidebar-collapsed .hdk-sidebar {
  padding: 12px 10px;
}

.hdk-shell.sidebar-collapsed .hdk-brand {
  grid-template-columns: 1fr;
  justify-items: center;
}

.hdk-shell.sidebar-collapsed .hdk-brand span:not(.hdk-brand__mark),
.hdk-shell.sidebar-collapsed .hdk-nav-group-title,
.hdk-shell.sidebar-collapsed .hdk-nav-item > span,
.hdk-shell.sidebar-collapsed .hdk-sidebar-footer {
  display: none;
}

.hdk-shell.sidebar-collapsed .hdk-nav-item {
  aspect-ratio: 1;
  color: transparent;
  font-size: 0;
  justify-content: center;
  min-height: 46px;
  padding: 0;
}

.hdk-shell.sidebar-collapsed .hdk-nav-item::before {
  color: var(--hdk-text-primary);
  content: attr(data-short);
  font-size: 12px;
  font-weight: 900;
}

.hdk-nav-item:hover,
.hdk-nav-item:focus-visible,
.hdk-nav-item.is-active,
.hdk-nav-item[aria-current="page"] {
  background: var(--hdk-surface-panel-strong);
  color: var(--hdk-text-primary);
  outline: 0;
}

.hdk-nav span {
  color: var(--hdk-text-muted);
  font-size: 11px;
}

.hdk-sidebar-status {
  margin-bottom: 10px;
  padding: 9px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-inset);
  color: var(--hdk-text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.hdk-main {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: var(--hdk-space-page-y) var(--hdk-space-page-x);
  scroll-behavior: smooth;
}

.hdk-main > :not(.hdk-header) {
  width: min(100%, var(--hdk-max-content));
  margin-inline: auto;
}

.hdk-main > :not(.hdk-header) + :not(.hdk-header) {
  margin-top: var(--hdk-space-section);
}

.hdk-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  width: min(100%, var(--hdk-max-content));
  margin: 0 auto var(--hdk-space-section);
}

.hdk-header h1 {
  margin: 0;
  font-size: clamp(30px, 5vw, 58px);
  line-height: 0.96;
  letter-spacing: 0;
}

.hdk-header p,
.hdk-card__header p,
.hdk-state p,
.hdk-proof p,
.hdk-metric p {
  margin: 8px 0 0;
  color: var(--hdk-text-secondary);
}

.hdk-page-frame,
.hdk-page,
.hdk-route,
.hdk-query-boundary {
  width: min(100%, var(--hdk-max-content));
  margin-inline: auto;
}

.hdk-page,
.hdk-route,
.hdk-section-stack,
.hdk-query-boundary {
  display: grid;
  gap: var(--hdk-space-section);
  align-content: start;
}

.hdk-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--hdk-space-grid);
  align-items: stretch;
}

.hdk-section-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hdk-section-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hdk-section-full,
.hdk-card-full {
  grid-column: 1 / -1;
}

.hdk-page-section,
.hdk-section {
  min-width: 0;
}

.hdk-page-section > .hdk-card,
.hdk-section > .hdk-card {
  height: 100%;
}

.hdk-query-boundary > * + *,
.hdk-page-frame > * + *,
.hdk-page > * + *,
.hdk-route > * + * {
  margin-top: var(--hdk-space-section);
}

.hdk-eyebrow {
  margin: 0 0 8px;
  color: var(--hdk-text-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.hdk-header__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.hdk-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-control);
  background: var(--hdk-surface-panel);
  color: var(--hdk-text-primary);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.hdk-button-primary {
  border-color: var(--hdk-accent);
  background: var(--hdk-accent);
  color: #fff;
}

.hdk-card {
  min-width: 0;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-card);
  background: var(--hdk-surface-panel);
  box-shadow: var(--hdk-shadow);
  overflow-wrap: anywhere;
}

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

/*
  Compatibility layer for legacy dashboards.

  These selectors intentionally apply shared dashboard-kit rhythm to older
  project-owned names while route markup is decomposed into real kit
  components. They are not an excuse to mark a project component-native:
  audits still flag local primitives until the rendered route is migrated.
*/
 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.workspace, .layout, .meal-content, .view, .meal-page, .dashboard-view, .page, .route),
:where(.hdk-page-frame, .hdk-page, .hdk-route, .hdk-query-boundary) {
  min-width: 0;
  overflow-wrap: anywhere;
}

 :where(.hdk-main, [data-component="DashboardShell"]) :where(.workspace, .meal-content, .view, .meal-page, .dashboard-view, .page, .route),
 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.hdk-section-stack, .panel-grid, .metric-strip, .metric-row, .proof-grid, .card-grid, .dashboard-grid, .two-column, .research-grid, .mbo-grid) {
  display: grid;
  gap: var(--hdk-space-section);
  align-content: start;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.panel-grid, .metric-strip, .metric-row, .proof-grid, .card-grid, .dashboard-grid, .two-column, .research-grid, .mbo-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.span-2, .span-3, .wide, .full-width, .hdk-section-full) {
  grid-column: 1 / -1;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.panel, .card, .mbo-card, .state-card, .metric, .dashboard-row, .meal-section, .row, .table-wrap, .graph-canvas, .report, .ops-result):not(.hdk-nav):not(.hdk-sidebar):not(.hdk-main) {
  min-width: 0;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-card);
  background: var(--hdk-surface-panel);
  box-shadow: var(--hdk-shadow);
  color: var(--hdk-text-primary);
  overflow-wrap: anywhere;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.panel, .card, .mbo-card, .state-card, .metric, .dashboard-row, .meal-section, .row):not(.hdk-card) {
  padding: var(--hdk-space-card);
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.panel-header, .card-header, .section-head, .topbar, .metric-header, .table-header) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hdk-space-3);
  min-width: 0;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.panel-header, .card-header, .section-head, .metric-header, .table-header) + * {
  margin-top: var(--hdk-space-3);
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.panel, .card, .mbo-card, .state-card, .meal-section, .hdk-card) :where(h2, h3, p) {
  overflow-wrap: anywhere;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.panel, .card, .mbo-card, .state-card, .meal-section, .hdk-card) :where(h2, h3) {
  margin-block-start: 0;
  letter-spacing: 0;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(.muted, .helper, .helper-text, .eyebrow, small) {
  color: var(--hdk-text-muted);
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(table) {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(th, td) {
  padding: 12px 10px;
  border-bottom: 1px solid var(--hdk-border-subtle);
  text-align: left;
  vertical-align: top;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(th) {
  color: var(--hdk-text-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(input, select, textarea) {
  max-width: 100%;
  min-height: 36px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-control);
  background: var(--hdk-surface-panel);
  color: var(--hdk-text-primary);
  font: inherit;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(button, .button, .secondary) {
  border-radius: var(--hdk-radius-control);
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(form, .input-row, .toolbar, .dcf-grid, .meal-form-grid, .topbar-actions, .button-row) {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--hdk-space-3);
  align-items: center;
}

 :where(.hdk-shell, [data-component="DashboardShell"]) :where(textarea) {
  min-height: 96px;
  resize: vertical;
}

.hdk-gallery-hero {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hdk-space-grid);
  margin-bottom: var(--hdk-space-section);
}

.hdk-gallery-section,
.hdk-component-intake {
  margin-top: var(--hdk-space-section);
}

.hdk-gallery-status-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--hdk-space-2);
}

.hdk-gallery-status,
.hdk-pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 999px;
  background: var(--hdk-surface-panel-strong);
  color: var(--hdk-text-secondary);
  font-size: 12px;
  font-weight: 850;
}

.hdk-gallery-status strong {
  color: var(--hdk-text-primary);
}

.hdk-gallery-status-approved {
  border-color: color-mix(in srgb, var(--hdk-success) 34%, var(--hdk-border-subtle));
  background: var(--hdk-success-soft);
}

.hdk-gallery-status-reviewing {
  border-color: color-mix(in srgb, var(--hdk-warning) 42%, var(--hdk-border-subtle));
  background: var(--hdk-warning-soft);
}

.hdk-gallery-status-draft,
.hdk-gallery-status-needs-redesign,
.hdk-gallery-status-deprecated {
  background: var(--hdk-surface-panel-strong);
}

.hdk-reference-family-grid,
.hdk-component-intake__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hdk-space-grid);
}

.hdk-reference-family,
.hdk-component-card {
  min-width: 0;
  padding: var(--hdk-space-card);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-raised);
}

.hdk-reference-family span,
.hdk-component-card header span {
  display: block;
  color: var(--hdk-text-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hdk-reference-family strong {
  display: block;
  margin-top: 8px;
  color: var(--hdk-text-primary);
  font-size: 14px;
  line-height: 1.35;
}

.hdk-reference-family p,
.hdk-component-card p,
.hdk-component-card dd {
  color: var(--hdk-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.hdk-component-card {
  display: grid;
  gap: var(--hdk-space-3);
  border-top: 4px solid var(--hdk-border-subtle);
}

.hdk-component-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hdk-space-3);
}

.hdk-component-card header strong {
  flex: 0 0 auto;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--hdk-text-primary);
  font-size: 11px;
  text-transform: uppercase;
}

.hdk-component-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hdk-component-card__chips span {
  max-width: 100%;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--hdk-surface-panel);
  color: var(--hdk-text-secondary);
  font-size: 11px;
  font-weight: 800;
}

.hdk-component-card dl {
  display: grid;
  gap: var(--hdk-space-2);
  margin: 0;
}

.hdk-component-card dt {
  margin: 0 0 2px;
  color: var(--hdk-text-muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.hdk-component-card dd {
  margin: 0;
}

.hdk-gallery-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--hdk-space-grid);
}

.hdk-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 0;
}

.hdk-card__header h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: 0;
}

.hdk-metric {
  padding: 16px;
  box-shadow: none;
}

.hdk-metric span,
.hdk-proof span,
.hdk-state span {
  color: var(--hdk-text-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hdk-metric strong {
  display: block;
  margin-top: 10px;
  font-size: 28px;
  line-height: 1;
}

.hdk-proof-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.hdk-proof {
  padding: 13px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
}

.hdk-data-freshness-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.hdk-freshness {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
}

.hdk-freshness strong {
  display: block;
  margin-top: 6px;
}

.hdk-freshness p {
  margin: 6px 0 0;
  color: var(--hdk-text-muted);
  font-size: 12px;
}

.hdk-proof strong {
  display: block;
  margin-top: 6px;
}

.hdk-tone-success {
  --hdk-tone: #15803d;
}

.hdk-tone-warning {
  --hdk-tone: #b45309;
}

.hdk-tone-danger {
  --hdk-tone: #b91c1c;
}

.hdk-tone-info {
  --hdk-tone: #2563eb;
}

.hdk-tone-success,
.hdk-tone-warning,
.hdk-tone-danger,
.hdk-tone-info {
  border-color: color-mix(in srgb, var(--hdk-tone) 28%, var(--hdk-border-subtle));
}

.hdk-tone-success strong,
.hdk-tone-warning strong,
.hdk-tone-danger strong,
.hdk-tone-info strong {
  color: var(--hdk-tone);
}

.hdk-chart-card {
  overflow: hidden;
}

.hdk-chart {
  width: 100%;
  display: block;
  padding: 10px 12px 14px;
}

.hdk-chart__grid {
  stroke: var(--hdk-chart-grid);
  stroke-width: 1;
}

.hdk-chart__axis,
.hdk-chart__label {
  fill: var(--hdk-chart-axis);
  font-size: 12px;
  font-weight: 700;
}

.hdk-chart__label {
  font-size: 11px;
  text-transform: uppercase;
}

.hdk-chart__line {
  fill: none;
  stroke: var(--hdk-series-color, var(--hdk-chart-line));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hdk-chart__area {
  fill: var(--hdk-chart-fill);
}

.hdk-chart__point,
.hdk-chart__bar {
  fill: var(--hdk-series-color, var(--hdk-chart-line));
}

.hdk-sparkline {
  width: 100%;
  height: 64px;
}

.hdk-donut-layout {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.hdk-donut {
  width: 100%;
  transform: rotate(-90deg);
}

.hdk-donut__track {
  stroke: var(--hdk-surface-panel-strong);
}

.hdk-donut__segment {
  stroke-linecap: round;
}

.hdk-fill-0 { stroke: #245bff; background: #245bff; }
.hdk-fill-1 { stroke: #15a37f; background: #15a37f; }
.hdk-fill-2 { stroke: #f59e0b; background: #f59e0b; }
.hdk-fill-3 { stroke: #ef4444; background: #ef4444; }
.hdk-fill-4 { stroke: #8b5cf6; background: #8b5cf6; }
.hdk-fill-5 { stroke: #06b6d4; background: #06b6d4; }
.hdk-fill-6 { stroke: #84cc16; background: #84cc16; }
.hdk-fill-7 { stroke: #f97316; background: #f97316; }

.hdk-legend {
  display: grid;
  gap: 9px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.hdk-legend li,
.hdk-legend span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--hdk-text-secondary);
  font-size: 13px;
}

.hdk-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--hdk-series-color, var(--hdk-chart-line));
}

.hdk-heatmap {
  display: grid;
  grid-template-columns: minmax(88px, 0.6fr) repeat(var(--hdk-heatmap-cols), minmax(84px, 1fr));
  gap: 6px;
  padding: 18px;
  overflow-x: auto;
}

.hdk-heatmap b,
.hdk-heatmap__cell {
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 8px;
  font-size: 12px;
}

.hdk-heatmap b {
  color: var(--hdk-text-muted);
}

.hdk-heatmap__cell {
  background: color-mix(in srgb, var(--hdk-accent) calc(var(--hdk-heat) * 72%), var(--hdk-surface-panel-strong));
  color: var(--hdk-text-primary);
  font-weight: 800;
}

.hdk-table-card {
  overflow: hidden;
}

.hdk-table-toolbar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--hdk-space-2);
  align-items: center;
  justify-content: flex-end;
}

.hdk-table-toolbar label {
  display: inline-flex;
  gap: var(--hdk-space-2);
  align-items: center;
  color: var(--hdk-text-muted);
  font-size: 12px;
  font-weight: 750;
}

.hdk-table-toolbar select {
  min-height: 32px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-control);
  background: var(--hdk-surface-panel);
  color: var(--hdk-text-primary);
  font: inherit;
  padding: 5px 28px 5px 10px;
}

.hdk-table-wrap {
  width: 100%;
  overflow-x: auto;
  padding: 14px 18px 0;
}

.hdk-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
}

.hdk-table th,
.hdk-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--hdk-border-subtle);
  text-align: left;
  vertical-align: top;
}

.hdk-table th {
  color: var(--hdk-text-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hdk-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px 18px;
  color: var(--hdk-text-muted);
  font-size: 12px;
}

.hdk-pagination button,
.hdk-pagination select,
.hdk-segmented button,
.hdk-drawer button {
  min-height: 32px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
  color: var(--hdk-text-primary);
  font-weight: 800;
}

.hdk-pagination label {
  display: inline-flex;
  align-items: center;
  gap: var(--hdk-space-2);
}

.hdk-help {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
}

.hdk-help__trigger,
.hdk-info-popover summary {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 999px;
  background: var(--hdk-surface-panel);
  color: var(--hdk-text-muted);
  cursor: help;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.hdk-help__trigger:hover,
.hdk-help__trigger:focus-visible,
.hdk-info-popover summary:hover,
.hdk-info-popover summary:focus-visible {
  border-color: var(--hdk-accent);
  color: var(--hdk-accent);
  outline: 2px solid color-mix(in srgb, var(--hdk-accent) 18%, transparent);
  outline-offset: 2px;
}

.hdk-help__bubble {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  left: 50%;
  width: max-content;
  max-width: min(320px, 70vw);
  transform: translate(-50%, -4px);
  opacity: 0;
  pointer-events: none;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--hdk-text-primary);
  box-shadow: var(--hdk-shadow);
  color: var(--hdk-surface-panel);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: normal;
}

.hdk-help__trigger:hover + .hdk-help__bubble,
.hdk-help__trigger:focus-visible + .hdk-help__bubble {
  opacity: 1;
  transform: translate(-50%, 0);
}

.hdk-info-popover {
  position: relative;
  display: inline-flex;
}

.hdk-info-popover summary {
  list-style: none;
}

.hdk-info-popover summary::-webkit-details-marker {
  display: none;
}

.hdk-info-popover__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, 80vw);
  padding: var(--hdk-space-3);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
  box-shadow: var(--hdk-shadow);
  color: var(--hdk-text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.hdk-info-popover__panel strong {
  display: block;
  color: var(--hdk-text-primary);
  margin-bottom: var(--hdk-space-1);
}

.hdk-info-popover__panel p {
  margin: 0;
}

.hdk-ai-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--hdk-space-card);
  align-items: center;
}

.hdk-ai-panel__body {
  min-width: 0;
}

.hdk-ai-panel__body h3,
.hdk-entity-card h3 {
  margin: 0;
  color: var(--hdk-text-primary);
  font-size: 18px;
  line-height: 1.16;
  text-wrap: balance;
}

.hdk-ai-panel__body p,
.hdk-entity-card p,
.hdk-muted {
  color: var(--hdk-text-secondary);
  font-size: 13px;
  line-height: 1.42;
}

.hdk-ai-panel details {
  margin-top: var(--hdk-space-3);
}

.hdk-ai-panel summary {
  cursor: pointer;
  color: var(--hdk-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.hdk-ai-panel pre {
  max-height: 180px;
  overflow: auto;
  margin: var(--hdk-space-2) 0 0;
  padding: var(--hdk-space-3);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-control);
  background: var(--hdk-surface-panel-strong);
  color: var(--hdk-text-primary);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
}

.hdk-ai-panel__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--hdk-space-2);
  justify-content: flex-end;
}

.hdk-entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--hdk-space-grid);
}

.hdk-entity-card {
  display: grid;
  gap: var(--hdk-space-3);
  min-width: 0;
  overflow-wrap: anywhere;
}

.hdk-entity-card__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--hdk-space-3);
  align-items: start;
}

.hdk-entity-card__header p {
  margin: 4px 0 0;
  color: var(--hdk-text-muted);
}

.hdk-segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 10px;
  background: var(--hdk-surface-panel-strong);
}

.hdk-segmented button {
  border: 0;
  background: transparent;
  color: var(--hdk-text-secondary);
}

.hdk-segmented button.is-active {
  background: var(--hdk-surface-panel);
  color: var(--hdk-text-primary);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.hdk-state {
  padding: 18px;
  box-shadow: none;
}

.hdk-loading-shell,
.hdk-query-boundary {
  min-width: 0;
}

.hdk-loading-shell {
  padding: 18px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
  box-shadow: var(--hdk-shadow);
}

.hdk-loading-shell__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.hdk-loading-shell__header h2 {
  margin: 0;
  font-size: 17px;
}

.hdk-loading-shell__header p {
  margin: 5px 0 0;
  color: var(--hdk-text-secondary);
}

.hdk-loading-shell__spinner {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--hdk-border-subtle);
  border-top-color: var(--hdk-accent);
  border-radius: 999px;
  animation: hdk-spin 820ms linear infinite;
}

.hdk-skeleton-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hdk-skeleton-card {
  min-height: 118px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
}

.hdk-skeleton-card span,
.hdk-skeleton-card strong,
.hdk-skeleton-card p,
.hdk-skeleton-card div {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hdk-surface-panel-strong), var(--hdk-surface-raised), var(--hdk-surface-panel-strong));
  background-size: 220% 100%;
  animation: hdk-shimmer 1.2s ease-in-out infinite;
}

.hdk-skeleton-card span {
  width: 42%;
  height: 12px;
}

.hdk-skeleton-card strong {
  width: 70%;
  height: 28px;
  margin-top: 18px;
}

.hdk-skeleton-card p {
  width: 55%;
  height: 10px;
  margin-top: 14px;
}

.hdk-skeleton-chart {
  grid-column: span 2;
  min-height: 260px;
}

.hdk-skeleton-chart div {
  width: 100%;
  height: 190px;
  margin-top: 18px;
  border-radius: 8px;
}

.hdk-skeleton-table {
  min-height: 260px;
}

.hdk-skeleton-table span {
  width: 100%;
  height: 16px;
  margin-bottom: 16px;
}

.hdk-partial-banner,
.hdk-stale-inline,
.hdk-stale-badge {
  border: 1px solid color-mix(in srgb, #b45309 28%, var(--hdk-border-subtle));
  background: color-mix(in srgb, #f59e0b 12%, var(--hdk-surface-panel));
  color: var(--hdk-text-primary);
}

.hdk-partial-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 8px;
}

.hdk-partial-banner strong {
  display: block;
}

.hdk-partial-banner p {
  margin: 4px 0 0;
  color: var(--hdk-text-secondary);
}

.hdk-stale-inline {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--hdk-text-secondary);
  font-size: 13px;
  font-weight: 750;
}

.hdk-stale-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}

.hdk-state h2 {
  margin: 6px 0 0;
}

.hdk-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(520px, 100vw);
  padding: 18px;
  background: var(--hdk-surface-panel);
  border-left: 1px solid var(--hdk-border-subtle);
  box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18);
  transform: translateX(105%);
  transition: transform 160ms ease;
  z-index: 50;
}

.hdk-drawer.is-open {
  transform: translateX(0);
}

.hdk-drawer header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.hdk-action-queue,
.hdk-alert-queue,
.hdk-content-package,
.hdk-brand-portfolio,
.hdk-channel-matrix,
.hdk-operations-funnel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
  box-shadow: var(--hdk-shadow);
}

.hdk-action-list,
.hdk-alert-list,
.hdk-funnel,
.hdk-brand-grid {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.hdk-action-row,
.hdk-alert-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--hdk-tone, var(--hdk-border-subtle)) 22%, var(--hdk-border-subtle));
  border-radius: 8px;
  background: var(--hdk-surface-raised);
}

.hdk-action-row h3,
.hdk-alert-row h3,
.hdk-brand-card h3,
.hdk-package-copy h3 {
  margin: 5px 0 0;
  color: var(--hdk-text-primary);
  font-size: 15px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.hdk-action-row p,
.hdk-alert-row p,
.hdk-brand-card p,
.hdk-package-copy p {
  margin: 7px 0 0;
  color: var(--hdk-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.hdk-action-row__priority,
.hdk-alert-row__severity {
  display: inline-flex;
  color: var(--hdk-tone, var(--hdk-text-muted));
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hdk-action-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  color: var(--hdk-text-muted);
  font-size: 12px;
}

.hdk-action-row__meta span,
.hdk-package-assets a {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 999px;
  background: var(--hdk-surface-panel);
}

.hdk-action-row__status,
.hdk-alert-row__actions {
  display: grid;
  justify-items: end;
  gap: 8px;
  color: var(--hdk-text-secondary);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.hdk-action-row button,
.hdk-alert-row button {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
  color: var(--hdk-text-primary);
  font-weight: 850;
}

.hdk-content-package__grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
  gap: 16px;
  padding: 18px;
}

.hdk-package-preview {
  min-height: 180px;
  overflow: hidden;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel-strong);
}

.hdk-package-preview img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  display: block;
}

.hdk-package-detail {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.hdk-package-status,
.hdk-postability {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--hdk-tone, var(--hdk-border-subtle)) 28%, var(--hdk-border-subtle));
  border-radius: 999px;
  color: var(--hdk-tone, var(--hdk-text-secondary));
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hdk-package-link,
.hdk-package-assets a {
  color: var(--hdk-accent);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.hdk-package-copy {
  padding: 12px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-raised);
}

.hdk-package-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hdk-fact-grid,
.hdk-mini-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.hdk-fact-grid div,
.hdk-mini-metrics div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-raised);
}

.hdk-fact-grid dt,
.hdk-mini-metrics dt {
  color: var(--hdk-text-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hdk-fact-grid dd,
.hdk-mini-metrics dd {
  margin: 5px 0 0;
  color: var(--hdk-text-primary);
  font-size: 15px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.hdk-brand-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.hdk-brand-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--hdk-tone, var(--hdk-border-subtle)) 22%, var(--hdk-border-subtle));
  border-radius: 8px;
  background: var(--hdk-surface-raised);
}

.hdk-brand-card__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.hdk-brand-card__head strong {
  color: var(--hdk-tone, var(--hdk-text-secondary));
  font-size: 11px;
  text-transform: uppercase;
}

.hdk-brand-card__blocker {
  padding: 9px;
  border-radius: 8px;
  background: color-mix(in srgb, #f59e0b 12%, var(--hdk-surface-panel));
}

.hdk-channel-matrix__scroll {
  overflow-x: auto;
  padding: 18px;
}

.hdk-channel-table small {
  display: block;
  margin-top: 5px;
  color: var(--hdk-text-muted);
  font-size: 12px;
}

.hdk-funnel-stage {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.hdk-funnel-stage div {
  width: var(--hdk-funnel-width);
  min-width: 190px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--hdk-tone, var(--hdk-accent)) 28%, var(--hdk-border-subtle));
  border-radius: 8px;
  background: color-mix(in srgb, var(--hdk-tone, var(--hdk-accent)) 10%, var(--hdk-surface-raised));
}

.hdk-funnel-stage span {
  color: var(--hdk-text-secondary);
  font-size: 12px;
  font-weight: 850;
}

.hdk-funnel-stage strong {
  color: var(--hdk-tone, var(--hdk-text-primary));
  font-size: 22px;
}

.hdk-funnel-stage p {
  margin: 0;
  color: var(--hdk-text-muted);
  font-size: 12px;
}

.hdk-operational-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
  box-shadow: var(--hdk-shadow);
}

.hdk-panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.hdk-panel-actions button {
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  background: var(--hdk-surface-panel);
  color: var(--hdk-text-primary);
  font-weight: 850;
}

.hdk-panel-metrics {
  padding: 18px 18px 0;
}

.hdk-operational-list {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.hdk-operational-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--hdk-tone, var(--hdk-border-subtle)) 22%, var(--hdk-border-subtle));
  border-radius: 8px;
  background: var(--hdk-surface-raised);
}

.hdk-operational-row span {
  color: var(--hdk-tone, var(--hdk-text-muted));
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hdk-operational-row h3 {
  margin: 5px 0 0;
  color: var(--hdk-text-primary);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.hdk-operational-row p {
  margin: 7px 0 0;
  color: var(--hdk-text-secondary);
  font-size: 13px;
}

.hdk-operational-row strong {
  color: var(--hdk-text-primary);
  white-space: nowrap;
}

.hdk-advanced-viz {
  min-height: 220px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(72px, 1fr);
  align-items: end;
  gap: 10px;
  padding: 18px;
  border-top: 1px solid var(--hdk-border-subtle);
}

.hdk-advanced-viz span {
  min-width: 0;
  display: grid;
  align-content: end;
  gap: 8px;
  height: 190px;
}

.hdk-advanced-viz b,
.hdk-advanced-viz strong {
  overflow: hidden;
  color: var(--hdk-text-muted);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdk-advanced-viz i {
  display: block;
  min-height: 18px;
  height: var(--hdk-viz-value);
  border-radius: 8px 8px 3px 3px;
  background: color-mix(in srgb, var(--hdk-accent) calc(52% + var(--hdk-viz-index) * 7%), var(--hdk-surface-panel-strong));
}

.hdk-market-explorer-page {
  display: grid;
  gap: var(--hdk-space-section, 16px);
  min-width: 0;
}

.hdk-market-explorer {
  display: grid;
  gap: var(--hdk-space-section, 16px);
  grid-template-columns: minmax(220px, 280px) minmax(460px, 1.25fr) minmax(360px, .9fr);
  min-height: min(820px, calc(100dvh - 140px));
}

.hdk-browser-pane,
.hdk-browser-results,
.hdk-market-detail-panel {
  min-width: 0;
}

.hdk-browser-pane {
  align-content: start;
  display: grid;
  gap: 14px;
  position: sticky;
  top: 14px;
}

.hdk-card__header-row {
  align-items: center;
}

.hdk-status-badge {
  align-self: start;
  background: var(--hdk-surface-panel-strong);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 999px;
  color: var(--hdk-text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  padding: 5px 8px;
  white-space: nowrap;
}

.hdk-browser-category-list,
.hdk-browser-movers,
.hdk-browser-results {
  align-content: start;
  display: grid;
  gap: 10px;
}

.hdk-browser-category {
  align-items: center;
  background: var(--hdk-surface-panel);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 10px;
  color: var(--hdk-text-primary);
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 11px;
  text-align: left;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.hdk-browser-category:hover {
  border-color: color-mix(in srgb, var(--hdk-accent) 38%, var(--hdk-border-subtle));
  transform: translateY(-1px);
}

.hdk-browser-category.is-active {
  background: var(--hdk-text-primary);
  border-color: var(--hdk-text-primary);
  color: var(--hdk-surface-page);
}

.hdk-browser-category span {
  min-width: 0;
  overflow: hidden;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdk-browser-category strong {
  background: color-mix(in srgb, var(--hdk-accent) 12%, transparent);
  border-radius: 999px;
  color: var(--hdk-accent-strong, var(--hdk-accent));
  flex: 0 0 auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 4px 8px;
}

.hdk-browser-category.is-active strong {
  background: color-mix(in srgb, var(--hdk-surface-page) 16%, transparent);
  color: color-mix(in srgb, var(--hdk-surface-page) 82%, white);
}

.hdk-browser-movers {
  border-top: 1px solid var(--hdk-border-subtle);
  padding-top: 12px;
}

.hdk-section-kicker {
  color: var(--hdk-text-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
  margin: 0;
  text-transform: uppercase;
}

.hdk-browser-mover {
  align-items: center;
  background: var(--hdk-surface-panel-strong);
  border: 0;
  border-radius: 9px;
  color: var(--hdk-text-primary);
  cursor: pointer;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px;
  text-align: left;
}

.hdk-browser-mover:hover {
  background: color-mix(in srgb, var(--hdk-accent) 9%, var(--hdk-surface-panel-strong));
}

.hdk-browser-mover span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdk-positive {
  color: var(--hdk-status-success);
}

.hdk-negative {
  color: var(--hdk-status-error);
}

.hdk-muted-note {
  color: var(--hdk-text-muted);
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

.hdk-search {
  display: grid;
  gap: 6px;
}

.hdk-search span {
  color: var(--hdk-text-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.hdk-search input {
  background: var(--hdk-surface-panel);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 10px;
  color: var(--hdk-text-primary);
  font: inherit;
  min-height: 42px;
  padding: 9px 11px;
}

.hdk-topic-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hdk-topic-chip {
  background: var(--hdk-surface-panel);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 999px;
  color: var(--hdk-text-primary);
  cursor: pointer;
  font-weight: 760;
  min-height: 34px;
  padding: 7px 11px;
}

.hdk-topic-chip.is-active {
  background: var(--hdk-text-primary);
  border-color: var(--hdk-text-primary);
  color: var(--hdk-surface-page);
}

.hdk-market-detail-panel {
  align-self: start;
  background:
    radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--hdk-accent) 24%, transparent), transparent 18rem),
    var(--hdk-surface-inverse, #101412);
  border: 1px solid color-mix(in srgb, white 14%, transparent);
  border-radius: var(--hdk-radius-lg, 12px);
  color: var(--hdk-text-inverse, #fff);
  min-height: 520px;
  overflow: hidden;
  padding: 16px;
  position: sticky;
  top: 14px;
}

.hdk-market-detail-panel .hdk-state {
  background: color-mix(in srgb, white 7%, transparent);
  border-color: color-mix(in srgb, white 14%, transparent);
  color: inherit;
}

.hdk-market-detail-panel .hdk-state p,
.hdk-market-detail-panel .hdk-state span {
  color: color-mix(in srgb, white 66%, transparent);
}

.hdk-quality-graph,
.hdk-premium-chart,
.hdk-premium-market-browser > *,
.hdk-premium-media-workspace,
.hdk-premium-planner > *,
.hdk-premium-drilldown > * {
  background: var(--hdk-surface-panel);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-lg, 12px);
  box-shadow: var(--hdk-shadow-sm, 0 1px 2px rgb(15 23 42 / 0.06));
}

.hdk-quality-graph,
.hdk-premium-chart,
.hdk-premium-media-workspace {
  padding: 16px;
}

.hdk-quality-graph__rows {
  display: grid;
  gap: 10px;
}

.hdk-quality-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, 0.32fr) minmax(160px, 1fr) 40px;
}

.hdk-quality-row strong,
.hdk-premium-media-workspace h3,
.hdk-premium-planner__drawer h2,
.hdk-premium-drilldown__drawer h2 {
  color: var(--hdk-text-primary);
}

.hdk-quality-row span {
  color: var(--hdk-text-muted);
  display: block;
  font-size: 0.78rem;
  margin-top: 2px;
}

.hdk-quality-row b {
  color: var(--hdk-text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.hdk-quality-row__bar {
  background: var(--hdk-surface-muted);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.hdk-quality-row__bar i {
  background: linear-gradient(90deg, var(--hdk-accent), color-mix(in srgb, var(--hdk-accent) 48%, var(--hdk-text-primary)));
  border-radius: inherit;
  display: block;
  height: 100%;
}

.hdk-chart-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.hdk-chart-toolbar label {
  align-items: center;
  color: var(--hdk-text-muted);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 720;
  gap: 8px;
  text-transform: uppercase;
}

.hdk-chart-toolbar select,
.hdk-premium-planner__drawer input,
.hdk-premium-planner__drawer textarea {
  background: var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  color: var(--hdk-text-primary);
  min-height: 34px;
  padding: 7px 10px;
}

.hdk-premium-chart__svg {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--hdk-accent) 5%, transparent), transparent 44%),
    var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-lg, 12px);
  min-height: 280px;
  width: 100%;
}

.hdk-premium-chart .hdk-chart__line {
  fill: none;
  stroke: var(--hdk-series-color, var(--hdk-accent));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.5;
}

.hdk-premium-market-browser {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(190px, 0.58fr) minmax(360px, 1.1fr) minmax(320px, 0.9fr);
}

.hdk-premium-market-browser > * {
  min-width: 0;
  padding: 14px;
}

.hdk-premium-market-browser__categories {
  align-self: start;
  display: grid;
  gap: 8px;
}

.hdk-premium-market-browser__tape .hdk-market-tape-body {
  gap: 8px;
}

.hdk-premium-market-browser__tape .hdk-market-tape-row {
  background: var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1.4fr) repeat(5, minmax(70px, 0.45fr));
  padding: 11px 12px;
}

.hdk-premium-market-browser__tape .hdk-market-tape-row.is-active {
  border-color: color-mix(in srgb, var(--hdk-accent) 42%, var(--hdk-border-subtle));
  box-shadow: inset 3px 0 0 var(--hdk-accent);
}

.hdk-premium-market-browser__detail {
  align-self: start;
  position: sticky;
  top: 12px;
}

.hdk-premium-market-browser__detail .hdk-premium-chart {
  box-shadow: none;
  margin-top: 12px;
  padding: 12px;
}

.hdk-premium-media-workspace__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(260px, 0.8fr) minmax(300px, 1fr) minmax(240px, 0.7fr);
}

.hdk-premium-media-workspace__grid > article {
  background: var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-md, 10px);
  min-width: 0;
  padding: 14px;
}

.hdk-premium-media-workspace__checklist {
  grid-column: 1 / -1;
}

.hdk-thumbnail-placeholder {
  align-items: center;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 72% 24%, color-mix(in srgb, var(--hdk-accent) 24%, transparent), transparent 26%),
    linear-gradient(135deg, var(--hdk-surface-muted), var(--hdk-surface-panel));
  border: 1px solid var(--hdk-border-subtle);
  border-radius: var(--hdk-radius-md, 10px);
  color: var(--hdk-text-muted);
  display: flex;
  font-weight: 800;
  justify-content: center;
  margin-bottom: 12px;
}

.hdk-state-line {
  align-items: center;
  border-bottom: 1px solid var(--hdk-border-subtle);
  color: var(--hdk-text-muted);
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 10px 0;
}

.hdk-state-line strong {
  color: var(--hdk-text-primary);
}

.hdk-premium-planner {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(420px, 1fr) minmax(300px, 0.38fr);
}

.hdk-premium-planner > * {
  min-width: 0;
  padding: 14px;
}

.hdk-calendar-weekdays,
.hdk-calendar-month-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.hdk-calendar-weekdays {
  color: var(--hdk-text-muted);
  font-size: 0.75rem;
  font-weight: 760;
  margin: 12px 0 6px;
  text-align: center;
  text-transform: uppercase;
}

.hdk-calendar-day {
  aspect-ratio: 1 / 0.86;
  background: var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 10px;
  color: var(--hdk-text-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 9px;
  text-align: left;
}

.hdk-calendar-day strong {
  color: var(--hdk-text-primary);
  font-size: 0.95rem;
}

.hdk-calendar-day span {
  font-size: 0.74rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdk-calendar-day.is-selected {
  background: color-mix(in srgb, var(--hdk-accent) 12%, var(--hdk-surface-panel));
  border-color: color-mix(in srgb, var(--hdk-accent) 50%, var(--hdk-border-subtle));
}

.hdk-premium-planner__drawer {
  align-self: start;
  display: grid;
  gap: 12px;
  position: sticky;
  top: 12px;
}

.hdk-premium-planner__drawer label {
  color: var(--hdk-text-muted);
  display: grid;
  font-size: 0.78rem;
  font-weight: 740;
  gap: 6px;
  text-transform: uppercase;
}

.hdk-premium-planner__drawer button,
.hdk-panel-actions button {
  background: var(--hdk-text-primary);
  border: 1px solid var(--hdk-text-primary);
  border-radius: 8px;
  color: var(--hdk-surface-page);
  cursor: pointer;
  font-weight: 780;
  min-height: 36px;
  padding: 8px 12px;
}

.hdk-panel-actions button + button {
  background: var(--hdk-surface-page);
  border-color: var(--hdk-border-subtle);
  color: var(--hdk-text-primary);
}

.hdk-premium-drilldown {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(360px, 1fr) minmax(340px, 0.52fr);
}

.hdk-premium-drilldown > * {
  min-width: 0;
  padding: 14px;
}

.hdk-premium-drilldown__drawer {
  align-self: start;
  display: grid;
  gap: 12px;
  position: sticky;
  top: 12px;
}

.hdk-research-desk {
  display: grid;
  gap: var(--hdk-space-section);
  min-width: 0;
}

.hdk-research-rundown {
  --rd-bg: #14181a;
  --rd-panel: #1b2023;
  --rd-raised: #202629;
  --rd-border: #2a3033;
  --rd-text: #f5f1e7;
  --rd-secondary: #d8d5c8;
  --rd-muted: #8b8f86;
  --rd-faint: #6b6f68;
  --rd-gold: #e8a33d;
  --rd-green: #6fa287;
  --rd-red: #c1553d;
  background:
    radial-gradient(circle at 20% 0%, rgba(232, 163, 61, 0.09), transparent 30%),
    linear-gradient(180deg, #171c1e 0%, var(--rd-bg) 48%, #111416 100%);
  border-radius: 10px;
  color: var(--rd-text);
  padding: var(--hdk-space-5);
}

.hdk-research-rundown .hdk-card,
.hdk-research-rundown .hdk-metric {
  background: var(--rd-panel);
  border-color: var(--rd-border);
  box-shadow: none;
  color: var(--rd-text);
}

.hdk-research-rundown .hdk-section-kicker {
  color: var(--rd-gold);
}

.hdk-research-rundown__hero {
  align-items: start;
  display: grid;
  gap: var(--hdk-space-5);
  grid-template-columns: minmax(280px, 0.75fr) minmax(360px, 1fr);
}

.hdk-research-rundown__hero h2 {
  color: var(--rd-text);
  font-family: Georgia, "Source Serif 4", serif;
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 0.95;
  margin: 0;
  text-wrap: balance;
}

.hdk-research-rundown__hero p:not(.hdk-section-kicker) {
  color: var(--rd-muted);
  margin-bottom: 0;
  max-width: 68ch;
}

.hdk-research-rundown__metrics .hdk-metric {
  min-height: 96px;
}

.hdk-research-rundown__shell {
  align-items: start;
  display: grid;
  gap: var(--hdk-space-section);
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(250px, 300px);
}

.hdk-research-rundown__main {
  display: grid;
  gap: var(--hdk-space-section);
  min-width: 0;
}

.hdk-research-rundown .hdk-research-navigator,
.hdk-research-rundown .hdk-research-inspector {
  align-self: start;
  display: grid;
  gap: var(--hdk-space-3);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.hdk-research-rundown .hdk-research-project-list,
.hdk-research-rundown .hdk-research-filter-stack,
.hdk-research-rundown .hdk-research-inspector-stack {
  grid-template-columns: minmax(0, 1fr);
}

.hdk-research-rundown .hdk-research-filter-row,
.hdk-research-rundown .hdk-research-stack-item {
  min-width: 0;
}

.hdk-research-rundown .hdk-research-filter-row span,
.hdk-research-rundown .hdk-research-filter-row strong {
  color: var(--rd-secondary);
}

.hdk-research-rundown .hdk-research-stack-item {
  align-items: flex-start;
}

.hdk-research-rundown .hdk-research-stack-item b,
.hdk-research-rundown .hdk-metric__value {
  white-space: normal;
  overflow-wrap: anywhere;
}

.hdk-research-rundown .hdk-research-composer {
  background: rgba(27, 32, 35, 0.72);
}

.hdk-research-rundown-strip {
  display: grid;
  gap: 14px;
  padding: var(--hdk-space-4);
}

.hdk-research-rundown-strip__scroll {
  display: flex;
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}

.hdk-research-rundown-strip__scroll::-webkit-scrollbar {
  height: 6px;
}

.hdk-research-rundown-strip__scroll::-webkit-scrollbar-thumb {
  background: #33393c;
  border-radius: 999px;
}

.hdk-rundown-stage {
  background: var(--rd-panel);
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  color: var(--rd-secondary);
  cursor: pointer;
  display: grid;
  flex: 0 0 150px;
  gap: 8px;
  min-height: 116px;
  padding: 12px;
  text-align: left;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.hdk-rundown-stage:hover,
.hdk-rundown-stage.is-selected {
  background: color-mix(in srgb, var(--rd-gold) 8%, var(--rd-panel));
  border-color: color-mix(in srgb, var(--rd-gold) 58%, var(--rd-border));
  transform: translateY(-2px);
}

.hdk-rundown-stage__top {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.hdk-rundown-stage__top b,
.hdk-rundown-stage small,
.hdk-rundown-source-meta span,
.hdk-rundown-source-meta b,
.hdk-rundown-field span {
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hdk-rundown-stage__top i {
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.hdk-rundown-stage em {
  color: var(--rd-muted);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 820;
}

.hdk-rundown-stage strong {
  color: var(--rd-secondary);
  font-size: 0.92rem;
}

.hdk-rundown-progress {
  background: var(--rd-border);
  border-radius: 999px;
  height: 4px;
  overflow: hidden;
}

.hdk-rundown-progress span {
  background: var(--rd-green);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 240ms ease;
}

.hdk-research-today {
  border-color: color-mix(in srgb, var(--rd-gold) 42%, var(--rd-border)) !important;
  display: grid;
  gap: var(--hdk-space-4);
  padding: var(--hdk-space-4);
}

.hdk-research-today h3 {
  color: var(--rd-text);
  margin: 4px 0 0;
}

.hdk-research-today__items {
  display: grid;
  gap: 8px;
}

.hdk-research-today__items button,
.hdk-rundown-row,
.hdk-rundown-source-row,
.hdk-rundown-evidence-card,
.hdk-rundown-claim-row,
.hdk-rundown-checklist button,
.hdk-rundown-field {
  background: transparent;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  color: var(--rd-secondary);
  cursor: pointer;
  min-width: 0;
  padding: 10px 12px;
  text-align: left;
}

.hdk-research-today__items button:hover,
.hdk-rundown-row:hover,
.hdk-rundown-source-row:hover,
.hdk-rundown-evidence-card:hover,
.hdk-rundown-claim-row:hover,
.hdk-rundown-checklist button:hover,
.hdk-rundown-field:hover {
  border-color: color-mix(in srgb, var(--rd-gold) 48%, var(--rd-border));
}

.hdk-research-today__items span {
  color: var(--rd-muted);
  display: block;
  font-size: 0.75rem;
  margin-bottom: 4px;
}

.hdk-research-today__items strong {
  color: var(--rd-secondary);
  overflow-wrap: anywhere;
}

.hdk-research-dossier {
  display: grid;
  gap: var(--hdk-space-4);
  padding: var(--hdk-space-5);
}

.hdk-research-dossier__head {
  align-items: center;
  display: flex;
  gap: var(--hdk-space-4);
  justify-content: space-between;
}

.hdk-research-dossier__head h2 {
  color: var(--rd-text);
  font-family: Georgia, "Source Serif 4", serif;
  font-size: 1.55rem;
  margin: 0;
}

.hdk-research-dossier__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.hdk-rundown-proof-strip {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}

.hdk-rundown-proof-strip div {
  background: rgba(20, 24, 26, 0.72);
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
}

.hdk-rundown-proof-strip span {
  color: var(--rd-faint);
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hdk-rundown-proof-strip strong {
  color: var(--rd-secondary);
  font-size: 0.88rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdk-rundown-field-grid,
.hdk-rundown-plan-grid,
.hdk-rundown-evidence-grid {
  display: grid;
  gap: var(--hdk-space-grid);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hdk-rundown-field,
.hdk-rundown-note,
.hdk-rundown-empty {
  display: grid;
  gap: 7px;
}

.hdk-rundown-field span,
.hdk-rundown-note span {
  color: var(--rd-faint);
}

.hdk-rundown-field strong,
.hdk-rundown-note strong {
  color: var(--rd-secondary);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.hdk-rundown-note {
  background: rgba(232, 163, 61, 0.06);
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  padding: var(--hdk-space-4);
}

.hdk-rundown-note p,
.hdk-rundown-source-row p,
.hdk-rundown-evidence-card p {
  color: var(--rd-muted);
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.hdk-rundown-stack {
  display: grid;
  gap: 8px;
}

.hdk-rundown-row {
  align-items: start;
  display: grid;
  gap: 4px;
  grid-template-columns: auto 1fr;
}

.hdk-rundown-row small {
  color: var(--rd-muted);
  grid-column: 2;
}

.hdk-rundown-row.is-selected {
  background: rgba(232, 163, 61, 0.08);
  border-color: rgba(232, 163, 61, 0.45);
}

.hdk-rundown-source-row {
  align-items: center;
  display: grid;
  gap: var(--hdk-space-3);
  grid-template-columns: minmax(0, 1fr) auto;
}

.hdk-rundown-source-row strong,
.hdk-rundown-source-row small,
.hdk-rundown-evidence-card strong,
.hdk-rundown-evidence-card span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdk-rundown-source-row small,
.hdk-rundown-evidence-card span {
  color: var(--rd-faint);
  font-size: 0.76rem;
}

.hdk-rundown-source-meta {
  align-items: end;
  display: grid;
  gap: 7px;
  justify-items: end;
  white-space: nowrap;
}

.hdk-rundown-evidence-card {
  display: grid;
  gap: 8px;
}

.hdk-rundown-evidence-card em {
  color: var(--rd-gold);
  font-size: 0.78rem;
  font-style: normal;
  overflow-wrap: anywhere;
}

.hdk-rundown-claim-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) minmax(120px, 0.5fr) auto;
}

.hdk-rundown-claim-row small {
  color: var(--rd-muted);
  overflow-wrap: anywhere;
}

.hdk-rundown-beats,
.hdk-rundown-checklist {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
}

.hdk-rundown-beats li,
.hdk-rundown-checklist button {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  list-style: none;
}

.hdk-rundown-beats span,
.hdk-rundown-checklist span {
  color: var(--rd-faint);
  font-size: 0.74rem;
}

.hdk-rundown-beats strong,
.hdk-rundown-checklist strong {
  color: var(--rd-secondary);
}

.hdk-rundown-checklist small {
  color: var(--rd-muted);
}

.hdk-rundown-handoff-queue {
  background: rgba(111, 162, 135, 0.08);
  border: 1px solid color-mix(in srgb, var(--rd-green) 34%, var(--rd-border));
  border-radius: 8px;
  display: grid;
  gap: 7px;
  padding: 12px;
}

.hdk-rundown-handoff-queue span {
  color: var(--rd-faint);
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hdk-rundown-handoff-queue strong {
  color: var(--rd-secondary);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.hdk-rundown-empty .hdk-button {
  justify-self: start;
}

.hdk-tone-success {
  color: var(--rd-green) !important;
}

.hdk-tone-warning {
  color: var(--rd-gold) !important;
}

.hdk-tone-critical {
  color: var(--rd-red) !important;
}

.hdk-tone-neutral {
  color: var(--rd-muted) !important;
}

i.hdk-tone-success {
  background: var(--rd-green);
}

i.hdk-tone-warning {
  background: var(--rd-gold);
  box-shadow: 0 0 0 3px rgba(232, 163, 61, 0.16);
}

i.hdk-tone-critical {
  background: var(--rd-red);
}

i.hdk-tone-neutral {
  background: #54595c;
}

.hdk-research-command {
  display: grid;
  gap: var(--hdk-space-5);
  grid-template-columns: minmax(260px, 0.7fr) minmax(420px, 1fr);
  padding: var(--hdk-space-5);
}

.hdk-research-command h2,
.hdk-research-active h2,
.hdk-research-workboards h2,
.hdk-research-composer h2,
.hdk-research-inspector h2 {
  margin: 0;
}

.hdk-research-command > div:first-child > p:last-child {
  margin-bottom: 0;
  max-width: 72ch;
}

.hdk-research-command__metrics {
  display: grid;
  gap: var(--hdk-space-grid);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hdk-research-command__metrics .hdk-metric,
.hdk-research-inspector-stack .hdk-metric {
  box-shadow: none;
}

.hdk-research-layout {
  align-items: start;
  display: grid;
  gap: var(--hdk-space-section);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.hdk-research-main,
.hdk-research-inspector {
  display: grid;
  gap: var(--hdk-space-section);
  min-width: 0;
}

.hdk-research-navigator,
.hdk-research-composer,
.hdk-research-active,
.hdk-research-workboards,
.hdk-research-inspector-card {
  min-width: 0;
  padding: var(--hdk-space-4);
}

.hdk-research-panel-head,
.hdk-research-active__head,
.hdk-research-active__actions,
.hdk-research-board-tabs,
.hdk-research-filter-row,
.hdk-research-stack-item {
  align-items: center;
  display: flex;
  gap: var(--hdk-space-3);
}

.hdk-research-panel-head,
.hdk-research-active__head,
.hdk-research-stack-item {
  justify-content: space-between;
}

.hdk-research-panel-head span,
.hdk-research-next-card span {
  color: var(--hdk-text-muted);
  font-size: 0.74rem;
  font-weight: 820;
  text-transform: uppercase;
}

.hdk-research-panel-head strong {
  display: block;
  margin-top: 3px;
}

.hdk-research-panel-head b {
  background: var(--hdk-surface-panel-strong);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 999px;
  color: var(--hdk-text-primary);
  font-size: 0.72rem;
  padding: 5px 8px;
  white-space: nowrap;
}

.hdk-research-project-list {
  display: grid;
  gap: var(--hdk-space-2);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--hdk-space-4);
  max-height: none;
  overflow: visible;
  padding-right: 2px;
}

.hdk-research-nav-project,
.hdk-research-filter-row,
.hdk-research-board-tabs button {
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  color: var(--hdk-text-primary);
  cursor: pointer;
}

.hdk-research-nav-project {
  background: var(--hdk-surface-raised);
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: var(--hdk-space-3);
  text-align: left;
}

.hdk-research-nav-project span,
.hdk-research-nav-project small,
.hdk-research-nav-project b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdk-research-nav-project small {
  color: var(--hdk-text-muted);
  font-size: 0.74rem;
}

.hdk-research-nav-project b {
  color: var(--hdk-text-secondary);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.hdk-research-nav-project.is-selected,
.hdk-research-nav-project:hover,
.hdk-research-board-tabs button.is-active {
  background: color-mix(in srgb, var(--hdk-accent) 10%, var(--hdk-surface-panel));
  border-color: color-mix(in srgb, var(--hdk-accent) 42%, var(--hdk-border-subtle));
}

.hdk-research-filter-stack {
  border-top: 1px solid var(--hdk-border-subtle);
  display: grid;
  gap: var(--hdk-space-2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--hdk-space-4);
  padding-top: var(--hdk-space-4);
}

.hdk-research-filter-row {
  background: transparent;
  justify-content: space-between;
  min-height: 36px;
  padding: 8px 10px;
}

.hdk-research-filter-row:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.hdk-research-project-form {
  display: grid;
  gap: var(--hdk-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.hdk-research-project-form label {
  color: var(--hdk-text-muted);
  display: grid;
  font-size: 0.74rem;
  font-weight: 780;
  gap: 6px;
  min-width: 0;
  text-transform: uppercase;
}

.hdk-research-project-form input {
  background: var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  color: var(--hdk-text-primary);
  min-height: 38px;
  min-width: 0;
  padding: 9px 10px;
}

.hdk-research-project-form button {
  align-self: end;
  justify-self: start;
}

.hdk-research-active__head {
  align-items: flex-start;
}

.hdk-research-active__head p {
  color: var(--hdk-text-secondary);
  margin: var(--hdk-space-2) 0 0;
  max-width: 78ch;
}

.hdk-research-active__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hdk-research-phase-stepper {
  display: grid;
  gap: var(--hdk-space-2);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: var(--hdk-space-4);
}

.hdk-research-phase-stepper button {
  background: var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  color: var(--hdk-text-muted);
  cursor: pointer;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: var(--hdk-space-2);
  text-align: left;
}

.hdk-research-phase-stepper button.is-active,
.hdk-research-phase-stepper button:hover {
  background: color-mix(in srgb, var(--hdk-accent) 10%, var(--hdk-surface-panel));
  color: var(--hdk-text-primary);
}

.hdk-research-phase-stepper b {
  color: var(--hdk-accent);
  font-size: 0.72rem;
}

.hdk-research-active__grid {
  display: grid;
  gap: var(--hdk-space-grid);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--hdk-space-4);
}

.hdk-research-next-card {
  background: var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: var(--hdk-space-3);
}

.hdk-research-next-card strong,
.hdk-research-next-card small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hdk-research-saved-plan {
  grid-column: 1 / -1;
}

.hdk-research-saved-plan em {
  color: var(--hdk-text-muted);
  font-size: 0.75rem;
  font-style: normal;
}

.hdk-research-next-card .hdk-button {
  justify-self: start;
  margin-top: var(--hdk-space-2);
}

.hdk-research-board-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hdk-space-2);
  margin-bottom: var(--hdk-space-3);
}

.hdk-research-board-tabs {
  border-bottom: 1px solid var(--hdk-border-subtle);
  flex-wrap: wrap;
  margin-top: var(--hdk-space-3);
  padding-bottom: var(--hdk-space-3);
}

.hdk-research-board-tabs button {
  background: var(--hdk-surface-raised);
  min-height: 34px;
  padding: 7px 10px;
}

.hdk-research-board-body {
  margin-top: var(--hdk-space-4);
  min-width: 0;
}

.hdk-research-stack {
  display: grid;
  gap: var(--hdk-space-2);
}

.hdk-research-stack-item {
  align-items: flex-start;
  background: var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  min-width: 0;
  padding: var(--hdk-space-3);
}

.hdk-research-stack-item div {
  min-width: 0;
}

.hdk-research-stack-item p {
  color: var(--hdk-text-secondary);
  margin: 5px 0 0;
  overflow-wrap: anywhere;
}

.hdk-research-stack-item b {
  color: var(--hdk-text-muted);
  font-size: 0.74rem;
  white-space: nowrap;
}

.hdk-research-mini-table {
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  max-width: 100%;
  overflow: auto;
}

.hdk-research-mini-table table {
  border-collapse: collapse;
  min-width: 560px;
  width: 100%;
}

.hdk-research-mini-table th,
.hdk-research-mini-table td {
  border-bottom: 1px solid var(--hdk-border-subtle);
  color: var(--hdk-text-secondary);
  font-size: 0.82rem;
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.hdk-research-mini-table th {
  color: var(--hdk-text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.hdk-research-inspector-stack {
  display: grid;
  gap: var(--hdk-space-2);
}

.hdk-research-inspector {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hdk-research-action-drawer {
  align-items: stretch;
  background: color-mix(in srgb, var(--hdk-surface-page) 48%, transparent);
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  left: 0;
  padding: var(--hdk-space-4);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 80;
}

.hdk-research-action-drawer__panel {
  box-shadow: var(--hdk-shadow);
  display: grid;
  grid-template-rows: auto 1fr;
  max-width: min(560px, 100%);
  overflow: auto;
  width: 100%;
}

.hdk-research-action-form {
  display: grid;
  gap: var(--hdk-space-3);
  padding-bottom: var(--hdk-space-2);
}

.hdk-research-action-form label {
  display: grid;
  gap: 7px;
}

.hdk-research-direction-flow {
  background: color-mix(in srgb, var(--hdk-accent) 5%, var(--hdk-surface-panel));
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 10px;
  display: grid;
  gap: var(--hdk-space-3);
  padding: var(--hdk-space-3);
}

.hdk-research-direction-flow h3,
.hdk-research-direction-flow p {
  margin: 0;
}

.hdk-research-direction-flow h3 {
  color: var(--hdk-text-primary);
  font-size: 1rem;
}

.hdk-research-direction-flow p {
  color: var(--hdk-text-secondary);
  font-size: 0.86rem;
}

.hdk-research-direction-grid {
  display: grid;
  gap: var(--hdk-space-2);
}

.hdk-research-direction-card {
  background: var(--hdk-surface-panel);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  gap: 6px;
  padding: var(--hdk-space-3);
}

.hdk-research-direction-card:has(input:checked),
.hdk-research-direction-card.is-selected {
  border-color: var(--hdk-accent);
  box-shadow: inset 3px 0 0 var(--hdk-accent);
}

.hdk-research-direction-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hdk-research-direction-card span {
  color: var(--hdk-accent);
}

.hdk-research-direction-card strong {
  color: var(--hdk-text-primary);
  overflow-wrap: anywhere;
}

.hdk-research-direction-card small {
  color: var(--hdk-text-secondary);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.hdk-research-action-form span {
  color: var(--hdk-text-muted);
  font-size: 0.72rem;
  font-weight: 760;
  text-transform: uppercase;
}

.hdk-research-action-form input,
.hdk-research-action-form select,
.hdk-research-action-form textarea {
  background: var(--hdk-surface-page);
  border: 1px solid var(--hdk-border-subtle);
  border-radius: 8px;
  color: var(--hdk-text-primary);
  font: inherit;
  min-width: 0;
  padding: 10px 11px;
  width: 100%;
}

.hdk-research-action-form textarea {
  min-height: 92px;
  resize: vertical;
}

.hdk-research-action-footer {
  background: var(--hdk-surface-panel);
  border-top: 1px solid var(--hdk-border-subtle);
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--hdk-space-2);
  justify-content: flex-end;
  margin: var(--hdk-space-2) calc(var(--hdk-space-4) * -1) calc(var(--hdk-space-4) * -1);
  padding: var(--hdk-space-3) max(var(--hdk-space-4), 112px) var(--hdk-space-3) var(--hdk-space-4);
  position: sticky;
}

@media (max-width: 760px) {
  .hdk-action-row,
  .hdk-alert-row,
  .hdk-content-package__grid,
  .hdk-premium-media-workspace__grid {
    grid-template-columns: 1fr;
  }

  .hdk-action-row__status,
  .hdk-alert-row__actions {
    justify-items: start;
  }
}

@media (max-width: 900px) {
  .hdk-shell,
  .hdk-shell.sidebar-collapsed {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
    min-height: 100vh;
    overflow: visible;
  }

  .hdk-market-explorer {
    grid-template-columns: 1fr;
  }

  .hdk-sidebar {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .hdk-shell.sidebar-collapsed .hdk-brand {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-items: initial;
  }

  .hdk-shell.sidebar-collapsed .hdk-brand span:not(.hdk-brand__mark),
  .hdk-shell.sidebar-collapsed .hdk-nav-group-title,
  .hdk-shell.sidebar-collapsed .hdk-nav-item > span,
  .hdk-shell.sidebar-collapsed .hdk-sidebar-footer {
    display: initial;
  }

  .hdk-shell.sidebar-collapsed .hdk-nav-item {
    aspect-ratio: auto;
    color: var(--hdk-text-secondary);
    font-size: 13px;
    justify-content: space-between;
    min-height: var(--hdk-sidebar-item-height);
    padding: 9px 11px;
  }

  .hdk-shell.sidebar-collapsed .hdk-nav-item::before {
    content: none;
  }

  .hdk-browser-pane,
  .hdk-market-detail-panel {
    position: static;
  }

  .hdk-main {
    overflow: visible;
    padding: 16px;
  }

  .hdk-header,
  .hdk-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .hdk-donut-layout {
    grid-template-columns: 1fr;
  }

  .hdk-skeleton-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .hdk-skeleton-chart {
    grid-column: auto;
  }

  .hdk-gallery-hero,
  .hdk-reference-family-grid,
  .hdk-component-intake__grid,
  .hdk-gallery-preview-grid {
    grid-template-columns: 1fr;
  }

  .hdk-quality-row,
  .hdk-premium-market-browser,
  .hdk-premium-planner,
  .hdk-premium-drilldown,
  .hdk-research-command,
  .hdk-research-layout,
  .hdk-research-project-form,
  .hdk-research-active__grid,
  .hdk-research-command__metrics {
    grid-template-columns: 1fr;
  }

  .hdk-premium-market-browser__detail,
  .hdk-premium-planner__drawer,
  .hdk-premium-drilldown__drawer,
  .hdk-research-navigator,
  .hdk-research-inspector {
    position: static;
  }

  .hdk-premium-market-browser__tape .hdk-market-tape-row {
    grid-template-columns: 1fr 1fr;
  }

  .hdk-research-active__head,
  .hdk-research-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .hdk-research-active__actions {
    justify-content: flex-start;
  }

  .hdk-research-phase-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@keyframes hdk-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes hdk-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* Media Business Operations HDK adoption extension */
:root {
  color-scheme: light;
  --mbo-bg: var(--hdk-bg, #f6f8fb);
  --mbo-sidebar-surface: color-mix(in srgb, var(--hdk-card, #fff) 96%, var(--hdk-primary, #256f8d));
  --mbo-panel: var(--hdk-card, #ffffff);
  --mbo-panel-2: var(--hdk-card-muted, #eef3f6);
  --mbo-panel-3: var(--hdk-inset, #f9fbfc);
  --mbo-line: var(--hdk-border, #dce4ea);
  --mbo-line-strong: var(--hdk-border-strong, #aebcc7);
  --text: var(--hdk-text, #141b23);
  --mbo-muted: var(--hdk-muted, #667684);
  --soft: var(--hdk-text-secondary, #40505d);
  --green: var(--hdk-success, #237a4b);
  --yellow: var(--hdk-warning, #9b6b18);
  --red: var(--hdk-critical, #ad3d32);
  --blue: var(--hdk-info, #256f8d);
  --mbo-accent: var(--hdk-accent, #0f9f8f);
  --shadow: 0 18px 44px rgba(22, 45, 35, .08);
  --shadow-soft: 0 1px 0 rgba(18, 32, 26, .04), 0 18px 36px rgba(18, 32, 26, .055);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--mbo-accent) 10%, transparent), transparent 32rem),
    linear-gradient(180deg, #fbfcfc 0%, var(--mbo-bg) 42%);
  color: var(--text);
}

button {
  font: inherit;
}

.mbo-shell {
  height: 100vh;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 304px minmax(0, 1fr);
  overflow: hidden;
  transition: grid-template-columns .24s ease;
}

.mbo-shell.mbo-sidebar-collapsed {
  grid-template-columns: 88px minmax(0, 1fr);
}

.mbo-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px 16px;
  border-right: 1px solid var(--mbo-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mbo-sidebar-surface) 96%, var(--mbo-accent)), var(--mbo-sidebar-surface));
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow: auto;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--mbo-line);
  padding-bottom: 14px;
}

.brand > div {
  min-width: 0;
}

.brand strong,
.brand small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mbo-sidebar-toggle {
  margin-left: auto;
  min-width: 34px;
  padding: 7px 9px;
  text-align: center;
}

.mbo-sidebar-collapsed .mbo-sidebar {
  padding-inline: 12px;
}

.mbo-sidebar-collapsed .brand {
  justify-content: center;
}

.mbo-sidebar-collapsed .brand > div,
.mbo-sidebar-collapsed .mbo-sidebar-title,
.mbo-sidebar-collapsed .dashboard-switcher,
.mbo-sidebar-collapsed .mbo-sidebar-note {
  display: none;
}

.mbo-sidebar-collapsed .mark {
  width: 42px;
  height: 42px;
}

.mbo-sidebar-collapsed nav {
  gap: 8px;
}

.mbo-sidebar-collapsed .nav-group {
  padding: 6px;
  gap: 5px;
}

.mbo-sidebar-collapsed nav button {
  display: grid;
  min-height: 42px;
  place-items: center;
  padding: 6px;
  text-align: center;
  font-size: 0;
}

.mbo-sidebar-collapsed nav button::before {
  content: attr(data-short);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .02em;
}

.mark {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--green);
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 12px 22px rgba(29, 122, 85, .22);
}

.brand strong,
.brand small {
  display: block;
}

.brand small {
  color: var(--mbo-muted);
}

nav {
  display: grid;
  gap: 14px;
}

.nav-group {
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--mbo-line) 74%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--mbo-panel) 72%, transparent);
  padding: 9px;
}

.nav-group .mbo-sidebar-title {
  margin: 0 0 2px;
}

nav button,
#refresh,
.segmented button,
.row-actions button {
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--mbo-muted);
  padding: 9px 11px;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

nav button.active,
nav button:hover,
.segmented button.active,
#refresh,
.row-actions button {
  background: color-mix(in srgb, var(--mbo-accent) 8%, var(--mbo-panel));
  border-color: var(--mbo-line);
  color: var(--text);
}

nav button.active {
  box-shadow: inset 3px 0 0 var(--mbo-accent), 0 8px 18px rgba(18, 32, 26, .06);
  font-weight: 800;
}

#refresh {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}

nav button:active,
#refresh:active,
.segmented button:active,
.row-actions button:active {
  transform: translateY(1px);
}

.mbo-sidebar-note {
  margin-top: auto;
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbfc;
}

.dashboard-switcher {
  display: grid;
  gap: 8px;
}

.mbo-sidebar-title {
  margin: 0;
  color: var(--mbo-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dashboard-list {
  display: grid;
  gap: 8px;
}

.dashboard-row {
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  padding: 9px;
  background: var(--mbo-panel-3);
  display: grid;
  gap: 8px;
}

.dashboard-row[data-current="true"] {
  border-color: rgba(66,211,146,.7);
}

.dashboard-name {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.dashboard-project {
  color: var(--mbo-muted);
  font-size: 12px;
  margin-top: 2px;
}

.dashboard-status {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--soft);
  flex: 0 0 auto;
}

.dashboard-status.running {
  background: var(--green);
}

.dashboard-status.stopped,
.dashboard-status.unhealthy {
  background: var(--red);
}

.dashboard-status.starting {
  background: var(--yellow);
}

.dashboard-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dashboard-action {
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  background: var(--mbo-panel-2);
  color: var(--text);
  padding: 6px 8px;
  cursor: pointer;
  font-size: 12px;
}

.dashboard-action:disabled {
  cursor: wait;
  opacity: .75;
}

.dashboard-empty,
.dashboard-error {
  color: var(--mbo-muted);
  font-size: 12px;
  line-height: 1.35;
}

.dashboard-error {
  color: var(--yellow);
}

.mbo-sidebar-note span,
.eyebrow,
small {
  color: var(--mbo-muted);
}

.mbo-sidebar-note p {
  color: var(--soft);
  margin: 6px 0 0;
  font-size: 13px;
}

main,
main.hdk-main {
  min-width: 0;
  height: 100vh;
  overflow: auto;
  padding: 0 28px 44px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--mbo-accent) 8%, transparent), transparent 30rem),
    linear-gradient(180deg, #fbfcfc 0%, var(--mbo-bg) 48%);
  scrollbar-gutter: stable;
}

.mbo-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--mbo-line) 78%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--mbo-bg) 96%, #fff);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 28px rgba(18, 32, 26, .055);
  margin: 0 -28px 18px;
  padding: 18px 28px 15px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 800;
  margin: 0 0 8px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1;
  margin-bottom: 0;
  letter-spacing: 0;
  text-wrap: balance;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 16px;
}

.controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.segmented {
  display: flex;
  flex-wrap: nowrap;
  min-width: max-content;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--mbo-line);
  background: var(--mbo-panel);
}

.segmented button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  white-space: nowrap;
  padding: 8px 13px;
  text-align: center;
}

.status {
  color: var(--mbo-muted);
  margin: 10px 0 18px;
}

.view-mbo-shell {
  display: grid;
  gap: 14px;
}

.view-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mbo-accent) 8%, transparent), transparent 34%),
    var(--mbo-panel);
  border-left: 4px solid var(--mbo-accent);
  box-shadow: var(--shadow-soft);
  padding: 16px 18px;
}

.view-toolbar h2 {
  margin: 0 0 5px;
  font-size: 22px;
}

.view-toolbar p {
  margin: 0;
  color: var(--mbo-muted);
  max-width: 76ch;
}

.mbo-proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.proof-card {
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--mbo-panel), var(--mbo-panel-3));
  padding: 12px;
  min-width: 0;
}

.proof-card span,
.proof-card small {
  display: block;
  color: var(--mbo-muted);
}

.proof-card strong {
  display: block;
  margin: 4px 0;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.grid {
  display: grid;
  gap: 12px;
}

.mbo-metrics {
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  margin-bottom: 0;
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--mbo-panel) 80%, transparent);
  box-shadow: var(--shadow-soft);
  padding: 8px;
}

.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.stacked-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.stacked-panels > .panel {
  width: 100%;
}

.briefing-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.briefing-panel {
  width: 100%;
}

.briefing-panel > p {
  max-width: 110ch;
}

.briefing-panel .mini-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.briefing-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.recap-columns {
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
  margin-top: 14px;
}

.briefing-section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.briefing-section h3 {
  margin: 0;
}

.briefing-section .list-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.briefing-section .hdk-pagination {
  display: none;
}

.mbo-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.panel,
.mbo-metric,
.mbo-card {
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  background: var(--mbo-panel);
  box-shadow: 0 1px 0 rgba(18, 32, 26, .03);
}

.panel {
  padding: 18px;
  min-width: 0;
  box-shadow: var(--shadow-soft);
}

.mbo-card {
  padding: 14px;
}

.brand-card {
  display: grid;
  gap: 12px;
  align-content: start;
}

.brand-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.brand-card h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.story-workspace {
  display: grid;
  gap: 12px;
}

.story-workspace-metrics {
  margin-bottom: 0;
}

.story-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  gap: 12px;
  align-items: stretch;
}

.story-command-panel,
.story-selected-panel {
  min-height: 100%;
}

.story-feed-health .panel-head {
  align-items: start;
}

.story-feed-health .panel-head p {
  margin: 5px 0 0;
  color: var(--mbo-muted);
}

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

.story-feed-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  background: var(--mbo-panel-3);
  padding: 12px;
}

.story-feed-card span {
  color: var(--mbo-muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.story-feed-card strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}

.story-feed-card small,
.story-feed-card p {
  color: var(--mbo-muted);
  line-height: 1.35;
}

.story-feed-card p {
  grid-column: 1 / -1;
  margin: 0;
}

.story-feed-card b {
  border: 1px solid var(--mbo-line);
  border-radius: 999px;
  align-self: start;
  padding: 4px 8px;
  font-size: 12px;
}

.story-feed-card b.good {
  background: color-mix(in srgb, var(--green) 10%, var(--mbo-panel));
}

.story-feed-card b.warning {
  background: color-mix(in srgb, var(--yellow) 16%, var(--mbo-panel));
}

.story-feed-card b.danger {
  background: color-mix(in srgb, var(--red) 10%, var(--mbo-panel));
}

.story-command-panel .panel-head,
.story-project-board .panel-head {
  align-items: start;
}

.story-command-panel .panel-head p,
.story-project-board .panel-head p,
.story-selected-panel p {
  margin: 5px 0 0;
  color: var(--mbo-muted);
  max-width: 72ch;
}

.story-action-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.story-action-strip.compact {
  margin: 12px 0;
}

.story-action-button {
  min-height: 38px;
}

.story-priority-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.story-priority-item,
.story-project-card {
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  background: var(--mbo-panel-3);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.story-priority-item {
  display: grid;
  gap: 5px;
  padding: 11px;
}

.story-priority-item span,
.story-notes-card span,
.story-tree-column span,
.story-gate-card span {
  color: var(--mbo-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.story-priority-item strong {
  font-size: 13px;
  line-height: 1.25;
}

.story-priority-item:hover,
.story-project-card:hover,
.story-project-card.selected {
  border-color: color-mix(in srgb, var(--mbo-accent) 58%, var(--mbo-line));
  background: color-mix(in srgb, var(--mbo-accent) 6%, var(--mbo-panel));
  box-shadow: 0 12px 26px rgba(18, 32, 26, .075);
  transform: translateY(-1px);
}

.selected-story-head {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.story-next-action,
.story-notes-card {
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--mbo-accent) 24%, var(--mbo-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--mbo-accent) 5%, var(--mbo-panel));
  padding: 12px;
  margin-top: 12px;
}

.story-next-action span {
  color: var(--mbo-muted);
  font-size: 12px;
  font-weight: 800;
}

.story-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.story-project-card {
  display: grid;
  gap: 10px;
  min-height: 212px;
  padding: 14px;
}

.story-project-card h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.story-project-card p {
  margin: 0;
  color: var(--soft);
  line-height: 1.38;
}

.story-project-card small {
  align-self: end;
  color: var(--mbo-muted);
  line-height: 1.35;
}

.story-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.story-card-stats span {
  display: grid;
  gap: 2px;
  border: 1px solid var(--mbo-line);
  border-radius: 7px;
  background: var(--mbo-panel);
  padding: 8px;
  color: var(--mbo-muted);
  font-size: 12px;
}

.story-card-stats strong {
  color: var(--text);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.story-card-review {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--mbo-accent) 18%, var(--mbo-line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--mbo-accent) 4%, var(--mbo-panel));
  padding: 7px 8px;
}

.story-card-review span {
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  color: var(--text);
}

.story-card-review small {
  color: var(--mbo-muted);
  font-size: 12px;
}

.story-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 80;
  width: min(720px, calc(100vw - 96px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border-left: 1px solid var(--mbo-line);
  background: color-mix(in srgb, var(--mbo-panel) 98%, var(--mbo-accent));
  box-shadow: -26px 0 60px rgba(18, 32, 26, .16);
  animation: drawerIn .18s ease-out;
}

@keyframes drawerIn {
  from {
    transform: translateX(28px);
    opacity: .7;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.story-drawer-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--mbo-line);
}

.story-drawer-head h2 {
  margin: 9px 0 6px;
  font-size: 27px;
  line-height: 1.04;
}

.story-drawer-head p {
  margin: 0;
  color: var(--mbo-muted);
  max-width: 62ch;
}

.story-drawer-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 12px 20px;
  border-bottom: 1px solid var(--mbo-line);
}

.story-drawer-tabs button {
  border: 1px solid var(--mbo-line);
  border-radius: 7px;
  background: var(--mbo-panel-3);
  color: var(--mbo-muted);
  cursor: pointer;
  padding: 8px 11px;
  white-space: nowrap;
}

.story-drawer-tabs button.active,
.story-drawer-tabs button:hover {
  background: color-mix(in srgb, var(--mbo-accent) 9%, var(--mbo-panel));
  color: var(--text);
  border-color: color-mix(in srgb, var(--mbo-accent) 50%, var(--mbo-line));
}

.story-drawer-body {
  overflow: auto;
  padding: 18px 20px 24px;
}

.story-drawer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 13px 20px;
  border-top: 1px solid var(--mbo-line);
  background: color-mix(in srgb, var(--mbo-panel) 96%, var(--mbo-accent));
}

.story-review-action.active {
  border-color: color-mix(in srgb, var(--mbo-accent) 64%, var(--mbo-line));
  background: color-mix(in srgb, var(--mbo-accent) 10%, var(--mbo-panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mbo-accent) 30%, transparent);
}

.story-gate-grid,
.story-tree-grid {
  display: grid;
  gap: 12px;
}

.story-gate-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.story-gate-card,
.story-tree-column,
.story-source-preview,
.story-review-item {
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  background: var(--mbo-panel-3);
  padding: 13px;
}

.story-gate-card {
  display: grid;
  gap: 7px;
}

.story-gate-card.good {
  border-color: color-mix(in srgb, var(--green) 35%, var(--mbo-line));
}

.story-gate-card.warning {
  border-color: color-mix(in srgb, var(--yellow) 42%, var(--mbo-line));
}

.story-gate-card.danger {
  border-color: color-mix(in srgb, var(--red) 42%, var(--mbo-line));
}

.story-gate-card strong {
  font-size: 18px;
}

.story-review-list {
  display: grid;
  gap: 10px;
}

.story-review-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.story-review-item p {
  color: var(--soft);
  margin: 5px 0;
  line-height: 1.4;
}

.story-tree-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.story-tree-column {
  display: grid;
  gap: 8px;
  align-content: start;
}

.story-tree-column p {
  margin: 0;
  color: var(--soft);
}

.story-source-preview {
  margin-top: 12px;
  display: grid;
  gap: 9px;
}

.story-source-row {
  display: grid;
  gap: 3px;
  border-top: 1px solid var(--mbo-line);
  padding-top: 9px;
}

.brand-next-action {
  margin: 0;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.35;
}

.brand-explain {
  border-top: 1px solid var(--mbo-line);
  padding-top: 10px;
}

.brand-explain summary {
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.brand-reasons {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.brand-reasons p {
  margin: 0;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.35;
}

.brand-checks {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.brand-check {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: center;
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  padding: 9px;
  background: var(--mbo-panel-3);
}

.brand-check span,
.brand-check small {
  min-width: 0;
}

.brand-check span {
  font-weight: 820;
}

.brand-check strong {
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  text-transform: uppercase;
}

.brand-check small {
  grid-column: 1 / -1;
  color: var(--mbo-muted);
}

.brand-check.pass strong {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}

.brand-check.warn strong {
  color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 12%, transparent);
}

.brand-check.fail strong {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

.mbo-metric {
  position: relative;
  padding: 14px 14px 13px;
  min-width: 0;
  background:
    linear-gradient(180deg, #ffffff 0%, var(--mbo-panel-3) 100%);
  border-color: transparent;
  box-shadow: none;
  overflow: hidden;
}

.mbo-metric::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--mbo-accent), color-mix(in srgb, var(--mbo-accent) 25%, transparent));
  opacity: .72;
}

.mini-grid {
  border: 0;
  box-shadow: none;
  padding: 0;
}

.mini-grid .mbo-metric {
  border-color: var(--mbo-line);
}

.mini-grid .mbo-metric::before {
  opacity: .42;
}

.mbo-metric span,
.mbo-metric small {
  display: block;
}

.mbo-metric strong {
  display: block;
  font-size: clamp(23px, 2.1vw, 30px);
  line-height: 1.05;
  margin: 8px 0 4px;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.mbo-metric.good strong {
  color: var(--green);
}

.mbo-metric.danger strong {
  color: var(--red);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--mbo-line) 76%, transparent);
  padding-bottom: 10px;
}

.panel-head h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: 0;
}

.panel-head h2 + p {
  color: var(--mbo-muted);
}

.pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid var(--mbo-line);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--mbo-muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.pill.good {
  color: var(--green);
  border-color: rgba(66, 211, 146, .45);
}

.pill.warning {
  color: var(--yellow);
  border-color: rgba(255, 209, 102, .45);
}

.pill.danger {
  color: var(--red);
  border-color: rgba(255, 107, 107, .45);
}

.mbo-table,
.list {
  display: grid;
  gap: 8px;
}

.mbo-table {
  overflow-x: auto;
  padding-bottom: 2px;
}

.mbo-table-row,
.list-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(120px, .7fr) minmax(100px, .6fr) minmax(90px, .4fr);
  gap: 12px;
  align-items: start;
  border: 1px solid color-mix(in srgb, var(--mbo-line) 78%, transparent);
  border-radius: 7px;
  background: var(--mbo-panel-3);
  padding: 10px;
  min-width: 720px;
}

.list-row {
  min-width: 0;
}

.mbo-table-row > *,
.list-row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mbo-table-row strong small {
  display: block;
  margin-top: 4px;
  font-weight: 500;
}

.source-table {
  gap: 6px;
}

.source-table .mbo-table-row {
  margin-top: 6px;
}

.source-detail {
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  padding: 10px;
  color: var(--mbo-muted);
  background: #f8fbfc;
}

.source-detail p {
  margin: 0 0 4px;
}

.list-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.mbo-table-head {
  color: var(--mbo-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--mbo-panel-2);
  border-color: var(--mbo-line);
}

.list-row p {
  color: var(--mbo-muted);
  margin: 6px 0 0;
}

.row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.row-actions button {
  padding: 7px 9px;
  font-size: 12px;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mini-grid .mbo-metric strong {
  font-size: 20px;
}

.funnel {
  display: grid;
  gap: 8px;
}

.funnel div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  background: #f8fbfc;
  padding: 10px;
}

.funnel span {
  color: var(--mbo-muted);
}

.funnel strong {
  font-size: 20px;
}

.empty {
  color: var(--mbo-muted);
  border: 1px dashed var(--mbo-line);
  border-radius: 8px;
  padding: 18px;
}

.cockpit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
  gap: 12px;
  margin-bottom: 12px;
}

.mbo-chart-panel {
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  background: var(--mbo-panel);
  padding: 16px;
  min-width: 0;
  box-shadow: var(--shadow-soft);
}

.mbo-chart-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.mbo-chart-head h2,
.mbo-chart-head h3 {
  margin: 0 0 4px;
}

.mbo-chart-head p {
  margin: 0;
  color: var(--mbo-muted);
}

.mbo-chart-frame {
  position: relative;
  min-height: 260px;
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(29, 122, 85, .06), transparent 46%),
    radial-gradient(circle at 15% 0%, rgba(15, 143, 111, .08), transparent 18rem),
    var(--mbo-panel-3);
  overflow: hidden;
}

.mbo-chart-svg {
  width: 100%;
  height: 260px;
  display: block;
}

.mbo-chart-grid-line {
  stroke: rgba(100, 118, 110, .22);
  stroke-width: 1;
}

.mbo-chart-axis {
  stroke: rgba(61, 81, 72, .5);
  stroke-width: 1.4;
}

.mbo-chart-line {
  fill: none;
  stroke: var(--mbo-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mbo-chart-area {
  fill: rgba(15, 143, 111, .12);
}

.mbo-chart-dot {
  fill: #ffffff;
  stroke: var(--mbo-accent);
  stroke-width: 2;
}

.mbo-chart-label,
.chart-tick {
  fill: var(--mbo-muted);
  font-size: 11px;
  font-weight: 700;
}

.mbo-chart-y-label {
  fill: var(--soft);
  font-size: 11px;
  font-weight: 800;
}

.bar-list {
  display: grid;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(120px, .45fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.bar-row span,
.bar-row b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bar-track {
  height: 9px;
  border-radius: 999px;
  background: var(--mbo-panel-2);
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mbo-accent), #63b58d);
}

.donut-layout {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.donut {
  position: relative;
  width: 164px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--donut-gradient, var(--mbo-accent) 0% 100%));
  box-shadow: inset 0 0 0 1px rgba(18, 32, 26, .08), 0 18px 34px rgba(18, 32, 26, .08);
}

.donut::after {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: inherit;
  background: var(--mbo-panel);
  box-shadow: inset 0 0 0 1px var(--mbo-line);
}

.donut span {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.donut small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 800;
  color: var(--mbo-muted);
}

.legend-list {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.legend-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--mbo-line) 70%, transparent);
  padding-bottom: 8px;
}

.legend-row i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.legend-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legend-row b,
.bar-row b {
  font-variant-numeric: tabular-nums;
}

.state-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.state-card {
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  background: var(--mbo-panel-3);
  padding: 12px;
}

.state-card strong,
.state-card span {
  display: block;
}

.state-card span {
  color: var(--mbo-muted);
  margin-top: 4px;
}

.draft pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  background: #f8fbfc;
  color: var(--text);
  padding: 12px;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.tab-panel {
  margin-bottom: 12px;
}

.mbo-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
  gap: 8px;
}

.tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tab-label {
  cursor: pointer;
  border: 1px solid var(--mbo-line);
  border-radius: 999px;
  background: var(--mbo-panel-3);
  color: var(--mbo-muted);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 900;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.tab-input:checked + .tab-label {
  border-color: color-mix(in srgb, var(--mbo-accent) 50%, var(--mbo-line));
  background: color-mix(in srgb, var(--mbo-accent) 10%, var(--mbo-panel));
  color: var(--text);
}

.tab-content {
  display: none;
  grid-column: 1 / -1;
  min-width: 0;
}

.tab-input:checked + .tab-label + .tab-content {
  display: block;
}

.view-mbo-shell .hdk-proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.view-mbo-shell .hdk-proof {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 252, 0.96)),
    var(--mbo-panel);
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
  min-width: 0;
  padding: 12px;
}

.view-mbo-shell .hdk-proof span,
.view-mbo-shell .hdk-proof p {
  color: var(--mbo-muted);
  display: block;
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
}

.view-mbo-shell .hdk-proof strong {
  color: var(--text);
  display: block;
  font-size: 18px;
  line-height: 1.15;
  margin: 4px 0 4px;
}

.view-mbo-shell .hdk-tone-good {
  border-left: 4px solid var(--good);
}

.view-mbo-shell .hdk-tone-warning {
  border-left: 4px solid var(--warn);
}

.view-mbo-shell .hdk-tone-danger {
  border-left: 4px solid var(--danger);
}

.view-mbo-shell .hdk-chart-card {
  background:
    radial-gradient(circle at 16px 12px, rgba(20, 184, 166, 0.09), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 252, 0.98));
  border: 1px solid var(--mbo-line);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
  min-width: 0;
  overflow: hidden;
  padding: 14px;
}

.view-mbo-shell .hdk-chart-card h2,
.view-mbo-shell .hdk-chart-card h3 {
  color: var(--text);
  font-size: 18px;
  line-height: 1.15;
  margin: 0;
}

.view-mbo-shell .hdk-chart-card p {
  color: var(--mbo-muted);
  font-size: 13px;
  margin: 6px 0 12px;
}

.view-mbo-shell .hdk-chart {
  display: block;
  height: auto;
  max-height: 300px;
  overflow: visible;
  width: 100%;
}

.view-mbo-shell .hdk-chart__grid {
  stroke: rgba(100, 116, 139, 0.22);
  stroke-width: 1;
}

.view-mbo-shell .hdk-chart__axis,
.view-mbo-shell .hdk-chart__label {
  fill: var(--mbo-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  stroke: none;
}

.view-mbo-shell .hdk-chart__line {
  fill: none;
  stroke: #0f766e;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.view-mbo-shell .hdk-chart__area {
  fill: rgba(20, 184, 166, 0.12);
}

.view-mbo-shell .hdk-chart__point {
  fill: #ffffff;
  stroke: #0f766e;
  stroke-width: 2.5;
}

.view-mbo-shell .hdk-chart__bar {
  fill: #0f766e;
  rx: 7px;
}

.view-mbo-shell .hdk-chart__bar,
.view-mbo-shell .hdk-donut__segment {
  stroke-linecap: round;
}

.view-mbo-shell .hdk-donut {
  display: block;
  max-width: 190px;
  overflow: visible;
  transform: rotate(-90deg);
  width: 100%;
}

.view-mbo-shell .hdk-donut__track {
  stroke: rgba(148, 163, 184, 0.22);
}

.view-mbo-shell .hdk-donut__segment {
  stroke: #0f766e;
}

.view-mbo-shell .hdk-fill-1 {
  stroke: #2563eb;
  background: #2563eb;
}

.view-mbo-shell .hdk-fill-2 {
  stroke: #f59e0b;
  background: #f59e0b;
}

.view-mbo-shell .hdk-fill-3 {
  stroke: #7c3aed;
  background: #7c3aed;
}

.view-mbo-shell .hdk-fill-4 {
  stroke: #dc2626;
  background: #dc2626;
}

.view-mbo-shell .hdk-fill-5 {
  stroke: #0891b2;
  background: #0891b2;
}

.view-mbo-shell .hdk-legend {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.view-mbo-shell .hdk-legend li,
.kit-value-legend span {
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  color: var(--mbo-muted);
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
  min-width: 0;
  padding: 5px 8px;
}

.view-mbo-shell .hdk-legend strong,
.kit-value-legend b {
  color: var(--text);
}

.view-mbo-shell .hdk-swatch {
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.kit-value-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.view-mbo-shell .hdk-table-tabs {
  min-width: 0;
}

.view-mbo-shell .hdk-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.view-mbo-shell .hdk-tab {
  background: var(--mbo-panel-3);
  border: 1px solid var(--mbo-line);
  border-radius: 999px;
  color: var(--mbo-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 7px 11px;
}

.view-mbo-shell .hdk-tab.is-active {
  background: color-mix(in srgb, var(--mbo-accent) 11%, var(--mbo-panel));
  border-color: color-mix(in srgb, var(--mbo-accent) 52%, var(--mbo-line));
  color: var(--text);
}

.view-mbo-shell .hdk-tab-panel {
  display: none;
}

.view-mbo-shell .hdk-tab-panel.is-active {
  display: block;
}

@media (max-width: 980px) {
  .mbo-shell {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }

  .mbo-sidebar {
    position: static;
    height: auto;
  }

  nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mbo-sidebar-collapsed nav {
    grid-template-columns: 1fr;
  }

  .mbo-sidebar-collapsed .nav-group {
    padding: 5px;
  }

  .mbo-metrics,
  .two,
  .briefing-columns,
  .recap-columns,
  .mbo-cards,
  .cockpit-grid,
  .mbo-proof-strip,
  .view-mbo-shell .hdk-proof-strip,
  .state-grid,
	  .story-command-grid,
	  .story-feed-grid,
	  .story-tree-grid {
	    grid-template-columns: 1fr;
	  }

  .story-drawer {
    width: min(100vw, 720px);
  }

  .mbo-table-row {
    grid-template-columns: 1fr;
  }

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

  .mbo-topbar {
    position: static;
    display: block;
    margin-inline: 0;
    padding-inline: 18px;
  }

  .controls {
    margin-top: 16px;
    justify-content: flex-start;
  }

  .donut-layout {
    grid-template-columns: 1fr;
  }

  .donut {
    width: min(164px, 70vw);
  }

  main {
    height: auto;
    overflow: visible;
    padding: 0 18px 34px;
  }
}

@media (max-width: 560px) {
  .mbo-topbar {
    padding: 14px 0;
  }

  .controls {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .segmented {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-width: 0;
    width: 100%;
  }

  .segmented button {
    min-width: 0;
    padding: 8px 6px;
  }

  #refresh {
    width: fit-content;
  }
}

/* Media Business Operations React component-native shell */
.mbo-react-app {
  --mbo-page: #eef4ef;
  --mbo-panel: rgba(255, 255, 255, 0.94);
  --mbo-panel-strong: #ffffff;
  --mbo-border: rgba(28, 45, 37, 0.12);
  --mbo-text: #111827;
  --mbo-muted: #617067;
  --mbo-green: #1f6f4a;
  --mbo-green-soft: #e4f1e9;
  --mbo-blue: #2559c7;
  --mbo-amber: #a76612;
  --mbo-red: #b42318;
  background:
    radial-gradient(circle at 12% 0%, rgba(56, 118, 84, 0.12), transparent 26rem),
    linear-gradient(180deg, #f8fbf8 0%, var(--mbo-page) 100%);
  color: var(--mbo-text);
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  min-height: 100dvh;
}

.mbo-react-app.sidebar-collapsed {
  grid-template-columns: 74px minmax(0, 1fr);
}

.mbo-react-sidebar {
  background: rgba(246, 250, 247, 0.86);
  border-right: 1px solid var(--mbo-border);
  min-height: 100dvh;
  padding: 18px 14px;
  position: sticky;
  top: 0;
}

.mbo-react-brand {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 22px;
}

.mbo-sidebar-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid var(--mbo-border);
  border-radius: 10px;
  color: var(--mbo-muted);
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  margin-left: auto;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
  width: 34px;
}

.mbo-sidebar-toggle:hover {
  background: var(--mbo-panel-strong);
  color: var(--mbo-text);
}

.mbo-react-brand > span {
  align-items: center;
  background: #102016;
  border-radius: 12px;
  color: #fff;
  display: grid;
  font-weight: 800;
  height: 42px;
  place-items: center;
  width: 42px;
}

.mbo-react-brand strong,
.mbo-react-brand small {
  display: block;
}

.mbo-react-brand small,
.mbo-sidebar-note p,
.mbo-react-header p,
.mbo-react-metric small,
.mbo-react-list span,
.mbo-react-pill,
.mbo-react-mini-metric span {
  color: var(--mbo-muted);
}

.mbo-react-sidebar .nav-group {
  margin: 0 0 18px;
}

.mbo-sidebar-title,
.mbo-react-header .eyebrow,
.mbo-react-panel .eyebrow,
.mbo-react-metric span,
.mbo-react-mini-metric span {
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mbo-react-sidebar .hdk-nav-item {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #1e2b24;
  cursor: pointer;
  display: flex;
  gap: 10px;
  margin: 4px 0;
  padding: 10px 11px;
  text-align: left;
  width: 100%;
}

.mbo-react-app.sidebar-collapsed .mbo-react-sidebar {
  padding-inline: 10px;
}

.mbo-react-app.sidebar-collapsed .mbo-react-brand {
  justify-content: center;
  margin-bottom: 18px;
}

.mbo-react-app.sidebar-collapsed .mbo-react-brand > div,
.mbo-react-app.sidebar-collapsed .mbo-sidebar-title,
.mbo-react-app.sidebar-collapsed .mbo-sidebar-note,
.mbo-react-app.sidebar-collapsed .mbo-react-sidebar .hdk-nav-item span {
  display: none;
}

.mbo-react-app.sidebar-collapsed .mbo-react-brand > span {
  height: 38px;
  width: 38px;
}

.mbo-react-app.sidebar-collapsed .mbo-sidebar-toggle {
  left: 50%;
  margin: 8px 0 0;
  position: absolute;
  top: 56px;
  transform: translateX(-50%);
}

.mbo-react-app.sidebar-collapsed .mbo-react-sidebar nav {
  margin-top: 54px;
}

.mbo-react-app.sidebar-collapsed .mbo-react-sidebar .nav-group {
  margin-bottom: 10px;
}

.mbo-react-app.sidebar-collapsed .mbo-react-sidebar .hdk-nav-item {
  justify-content: center;
  min-height: 42px;
  padding: 10px;
}

.mbo-react-sidebar .hdk-nav-item.active,
.mbo-react-sidebar .hdk-nav-item:hover {
  background: var(--mbo-panel-strong);
  border-color: var(--mbo-border);
  box-shadow: 0 10px 26px rgba(32, 54, 40, 0.08);
}

.mbo-sidebar-note {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--mbo-border);
  border-radius: 14px;
  margin-top: 22px;
  padding: 12px;
}

.mbo-react-main {
  min-width: 0;
  padding: 34px clamp(18px, 3vw, 42px) 46px;
}

.mbo-react-app.is-research-rundown-shell {
  background: #14181A;
  color-scheme: dark;
  --hdk-surface-page: #14181A;
  --hdk-surface-panel: #1B2023;
  --hdk-surface-panel-strong: #202629;
  --hdk-surface-raised: #101416;
  --hdk-text-primary: #EDE7DA;
  --hdk-text-secondary: #C9C6B9;
  --hdk-text-muted: #8B8F86;
  --hdk-border-subtle: #2A3033;
  --mbo-page: #14181A;
  --mbo-panel: #1B2023;
  --mbo-panel-strong: #202629;
  --mbo-panel-2: #171C1F;
  --mbo-panel-3: #101416;
  --mbo-text: #EDE7DA;
  --mbo-border: rgba(237, 231, 218, 0.12);
  --mbo-line: #2A3033;
  --mbo-muted: #8B8F86;
  min-height: 100dvh;
  overflow: auto;
}

.mbo-react-app.is-research-rundown-shell .mbo-react-sidebar {
  background: #101416 !important;
  border-right-color: #2A3033 !important;
  color: #EDE7DA;
}

.mbo-react-app.is-research-rundown-shell .mbo-react-brand > span {
  background: #E8A33D;
  color: #1B1500;
}

.mbo-react-app.is-research-rundown-shell .mbo-react-brand strong,
.mbo-react-app.is-research-rundown-shell .mbo-react-sidebar .hdk-nav-item {
  color: #EDE7DA;
}

.mbo-react-app.is-research-rundown-shell .mbo-react-brand small,
.mbo-react-app.is-research-rundown-shell .mbo-sidebar-title,
.mbo-react-app.is-research-rundown-shell .hdk-sidebar-title {
  color: #8B8F86 !important;
}

.mbo-react-app.is-research-rundown-shell .mbo-react-sidebar .nav-group {
  background: #14181A !important;
  border-color: #2A3033 !important;
  box-shadow: none !important;
}

.mbo-react-app.is-research-rundown-shell .mbo-react-sidebar nav button,
.mbo-react-app.is-research-rundown-shell .mbo-react-sidebar .hdk-nav-item {
  background: transparent !important;
  border-color: transparent !important;
  color: #A9A79C !important;
  box-shadow: none !important;
}

.mbo-react-app.is-research-rundown-shell .mbo-react-sidebar .hdk-nav-item.active,
.mbo-react-app.is-research-rundown-shell .mbo-react-sidebar .hdk-nav-item[aria-current="page"],
.mbo-react-app.is-research-rundown-shell .mbo-react-sidebar .hdk-nav-item:hover {
  background: #1B2023 !important;
  border-color: #2A3033 !important;
  color: #F5F1E7 !important;
  box-shadow: none !important;
}

.mbo-react-app.is-research-rundown-shell .mbo-sidebar-toggle {
  background: #14181A;
  border-color: #2A3033;
  color: #A9A79C;
}

.mbo-react-app.is-research-rundown-shell .mbo-sidebar-toggle:hover {
  background: #1B2023;
  color: #F5F1E7;
}

.mbo-react-app.is-research-rundown-shell .mbo-sidebar-note {
  background: #14181A !important;
  border-color: #2A3033 !important;
  color: #A9A79C !important;
  box-shadow: none !important;
}

.mbo-react-main.is-research-rundown-page {
  background: #14181A;
  color: #EDE7DA;
  min-height: 100dvh;
  overflow: visible;
  padding: 0;
}

.mbo-react-main.is-research-rundown-page #view {
  background: #14181A;
  color: #EDE7DA;
  gap: 0;
  min-height: 100dvh;
  position: relative;
}

.mbo-react-main.is-research-rundown-page .research-rundown-page,
.mbo-react-main.is-research-rundown-page .rd-shell,
.mbo-react-main.is-research-rundown-page .rd-center {
  background: #14181A;
  color: #EDE7DA;
}

.mbo-react-main.is-research-rundown-page .mbo-react-proof-boundary {
  left: 0;
  position: absolute;
  top: 0;
}

.mbo-react-header {
  align-items: flex-start;
  background: transparent;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 0 0 18px;
}

.mbo-react-header h1 {
  font-size: clamp(1.65rem, 2.1vw, 2.45rem);
  line-height: 1.05;
  margin: 4px 0 7px;
  text-wrap: balance;
}

.mbo-react-header p {
  margin: 0;
  max-width: 66ch;
}

.mbo-react-header .controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.mbo-react-header .segmented {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--mbo-border);
  border-radius: 12px;
  display: flex;
  gap: 3px;
  padding: 4px;
}

.mbo-react-header button,
.mbo-react-action-row button,
.mbo-react-create-form button,
.mbo-react-action-form button {
  border-radius: 10px;
  cursor: pointer;
  font-weight: 750;
}

.mbo-react-header .segmented button,
.mbo-react-refresh,
.mbo-react-tab-row button,
.mbo-react-action-row button {
  background: #fff;
  border: 1px solid transparent;
  color: #17231c;
  padding: 9px 11px;
}

.mbo-react-header .segmented button.active,
.mbo-react-refresh,
.mbo-react-action-row button:hover,
.mbo-react-tab-row button:hover {
  background: var(--mbo-green);
  color: #fff;
}

.mbo-react-refresh {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

#view,
.mbo-react-stack {
  display: grid;
  gap: 18px;
}

.mbo-react-proof-boundary {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  width: 1px;
}

.hdk-data-freshness-strip,
.mbo-react-proof,
.mbo-react-metric-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hdk-freshness,
.mbo-react-proof article,
.mbo-react-metric,
.mbo-react-mini-metric,
.mbo-react-panel,
.mbo-react-state,
.mbo-react-skeleton {
  background: var(--mbo-panel);
  border: 1px solid var(--mbo-border);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(28, 48, 37, 0.07);
}

.hdk-freshness,
.mbo-react-proof article,
.mbo-react-mini-metric {
  padding: 14px;
}

.hdk-freshness span,
.mbo-react-proof span {
  color: var(--mbo-muted);
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
}

.hdk-freshness strong,
.mbo-react-proof strong {
  display: block;
  font-size: 0.95rem;
  margin-top: 5px;
}

.mbo-react-metric-grid.columns-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mbo-react-metric {
  min-height: 126px;
  padding: 18px;
}

.mbo-react-metric > div {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.mbo-react-metric strong {
  display: block;
  font-size: clamp(1.45rem, 2vw, 2.15rem);
  line-height: 1;
  margin: 18px 0 8px;
}

.mbo-react-metric.tone-good {
  border-left: 4px solid var(--mbo-green);
}

.mbo-react-metric.tone-warning {
  border-left: 4px solid var(--mbo-amber);
}

.mbo-react-metric.tone-danger {
  border-left: 4px solid var(--mbo-red);
}

.mbo-react-metric.tone-info {
  border-left: 4px solid var(--mbo-blue);
}

.mbo-react-grid.two-column {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mbo-react-panel {
  min-width: 0;
  padding: 18px;
}

.mbo-react-panel > header,
.mbo-react-action-form header {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.mbo-react-panel h2,
.mbo-react-action-form h2 {
  font-size: 1.04rem;
  margin: 4px 0 0;
}

.mbo-react-score strong {
  display: block;
  font-size: 3rem;
  line-height: 1;
}

.mbo-react-bars {
  display: grid;
  gap: 12px;
}

.mbo-react-bar-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(100px, 0.75fr) minmax(120px, 1.3fr) 72px;
}

.mbo-react-bar-row span,
.mbo-react-bar-row strong {
  font-size: 0.86rem;
}

.mbo-react-bar-row div {
  background: #edf2ee;
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.mbo-react-bar-row i {
  background: linear-gradient(90deg, var(--mbo-green), #54a076);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.mbo-react-table-wrap {
  border: 1px solid var(--mbo-border);
  border-radius: 12px;
  overflow-x: auto;
}

.mbo-react-table-wrap table {
  border-collapse: collapse;
  min-width: 760px;
  width: 100%;
}

.mbo-react-table-wrap th,
.mbo-react-table-wrap td {
  border-bottom: 1px solid rgba(28, 45, 37, 0.09);
  padding: 12px 13px;
  text-align: left;
  vertical-align: top;
}

.mbo-react-table-wrap th {
  background: #f4f8f5;
  color: var(--mbo-muted);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mbo-react-pagination,
.mbo-react-empty {
  color: var(--mbo-muted);
  font-size: 0.88rem;
  margin-top: 12px;
}

.mbo-react-research {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
}

.mbo-react-project-list,
.mbo-react-list,
.mbo-react-create-form,
.mbo-react-action-form {
  display: grid;
  gap: 10px;
}

.mbo-react-project-list button,
.mbo-react-list article {
  background: #f7faf7;
  border: 1px solid var(--mbo-border);
  border-radius: 12px;
  padding: 12px;
  text-align: left;
}

.mbo-react-project-list button.is-selected {
  background: var(--mbo-green-soft);
  border-color: rgba(31, 111, 74, 0.28);
}

.mbo-react-create-form input,
.mbo-react-create-form textarea,
.mbo-react-action-form input,
.mbo-react-action-form textarea {
  background: #fff;
  border: 1px solid var(--mbo-border);
  border-radius: 10px;
  color: var(--mbo-text);
  font: inherit;
  min-width: 0;
  padding: 10px 11px;
  resize: vertical;
}

.mbo-react-create-form button,
.mbo-react-action-form button[type="submit"] {
  background: var(--mbo-green);
  border: 0;
  color: #fff;
  padding: 11px 13px;
}

.mbo-react-research-main {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.mbo-react-callout,
.mbo-react-stage-proof {
  background: #f4f8f5;
  border: 1px solid var(--mbo-border);
  border-radius: 12px;
  margin-top: 14px;
  padding: 14px;
}

.mbo-react-stage-proof,
.mbo-react-tab-row,
.mbo-react-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mbo-react-help {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.mbo-react-help small {
  align-items: center;
  background: #fff;
  border: 1px solid var(--mbo-border);
  border-radius: 999px;
  display: inline-grid;
  height: 22px;
  place-items: center;
  width: 22px;
}

.mbo-react-drawer {
  background: rgba(8, 17, 12, 0.2);
  inset: 0;
  position: fixed;
  z-index: 30;
}

.mbo-react-action-form {
  background: #fff;
  border-left: 1px solid var(--mbo-border);
  box-shadow: -24px 0 60px rgba(23, 35, 28, 0.18);
  height: 100%;
  margin-left: auto;
  max-width: 520px;
  overflow-y: auto;
  padding: 24px;
  width: min(92vw, 520px);
}

.mbo-react-action-form label {
  color: #26352c;
  display: grid;
  font-size: 0.82rem;
  font-weight: 750;
  gap: 7px;
}

.mbo-react-direction-flow {
  border: 1px solid var(--mbo-border);
  border-radius: 12px;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
}

.mbo-react-direction-flow legend {
  color: var(--mbo-muted);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0 4px;
}

.mbo-react-direction-flow label {
  align-items: flex-start;
  background: #f7faf7;
  border-radius: 10px;
  display: flex;
  gap: 10px;
  padding: 10px;
}

.mbo-react-direction-flow small {
  color: var(--mbo-muted);
  display: block;
  font-weight: 500;
  margin-top: 2px;
}

.mbo-react-action-form textarea {
  min-height: 84px;
}

.mbo-react-state {
  padding: 16px;
}

.mbo-react-skeleton {
  height: 126px;
  overflow: hidden;
  position: relative;
}

.mbo-react-skeleton::after {
  animation: mboSkeleton 1.2s infinite;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  content: "";
  inset: 0;
  position: absolute;
  transform: translateX(-100%);
}

@keyframes mboSkeleton {
  to {
    transform: translateX(100%);
  }
}

@media (max-width: 1120px) {
  .mbo-react-app {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .mbo-react-brand div,
  .mbo-react-sidebar .hdk-nav-item span,
  .mbo-sidebar-title,
  .mbo-sidebar-note {
    display: none;
  }

  .mbo-react-sidebar .hdk-nav-item {
    justify-content: center;
  }

  .mbo-react-research,
  .mbo-react-grid.two-column {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .mbo-react-app {
    display: block;
  }

  .mbo-react-sidebar {
    display: flex;
    gap: 8px;
    min-height: auto;
    overflow-x: auto;
    padding: 10px;
    position: static;
  }

  .mbo-react-sidebar nav,
  .mbo-react-sidebar .nav-group {
    display: contents;
  }

  .mbo-react-main {
    padding: 18px 14px 32px;
  }

  .mbo-react-header,
  .mbo-react-header .controls {
    display: grid;
    justify-content: stretch;
  }

  .hdk-data-freshness-strip,
  .mbo-react-proof,
  .mbo-react-metric-grid,
  .mbo-react-metric-grid.columns-3 {
    grid-template-columns: 1fr;
  }

  .mbo-react-bar-row {
    grid-template-columns: 1fr;
  }
}