.bdd {
  --bdd-canvas: #fafbf8;
  --bdd-surface: #ffffff;
  --bdd-soft: #f4f6f1;
  --bdd-ink: #253d33;
  --bdd-muted: #617269;
  --bdd-line: #dfe6dc;
  --bdd-line-strong: #c3d2c5;
  --bdd-green: #155c47;
  --bdd-green-hover: #104735;
  --bdd-good-bg: #edf4ee;
  --bdd-warn: #805515;
  --bdd-warn-bg: #fbf4e7;
  --bdd-bad: #9d3536;
  --bdd-bad-bg: #fbefec;
  --bdd-info: #325e7b;
  --bdd-info-bg: #edf3f7;
  --bdd-radius: 16px;
  color-scheme: light;
  container-type: inline-size;
  container-name: business-dashboard;
  display: grid;
  gap: 24px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  color: var(--bdd-ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.bdd *,
.bdd *::before,
.bdd *::after {
  box-sizing: border-box;
}

.bdd :where(h1, h2, h3, h4, p, dl, dd, figure) { margin: 0; }
.bdd :where(button, input, select, textarea) { font: inherit; }
.bdd :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #2e785d;
  outline-offset: 3px;
}
.bdd [hidden] { display: none !important; }

.bdd .bdd-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 28px;
  min-width: 0;
}
.bdd .bdd-header > :first-child { flex: 1 1 320px; min-width: 0; }
.bdd .bdd-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--bdd-green);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: .085em;
  text-transform: uppercase;
}
.bdd .bdd-heading {
  color: var(--bdd-ink);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.bdd .bdd-description {
  max-width: 68ch;
  margin-top: 10px;
  color: var(--bdd-muted);
  font-size: 14px;
  line-height: 1.75;
}
.bdd .bdd-toolbar,
.bdd .bdd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}
.bdd .bdd-toolbar { justify-content: flex-end; }
.bdd .bdd-header > .bdd-toolbar { flex: 0 1 auto; padding-top: 3px; }
.bdd .bdd-meta { color: var(--bdd-muted); font-size: 12px; }
.bdd .bdd-description + .bdd-meta { margin-top: 14px; }
.bdd .bdd-meta > * { min-width: 0; max-width: 100%; }

.bdd .bdd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid var(--bdd-line);
  border-radius: 999px;
  background: var(--bdd-soft);
  color: var(--bdd-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}
.bdd .bdd-pill[data-tone="good"] { border-color: #d4e5d7; background: var(--bdd-good-bg); color: var(--bdd-green); }
.bdd .bdd-pill[data-tone="warn"] { border-color: #e9d9b8; background: var(--bdd-warn-bg); color: var(--bdd-warn); }
.bdd .bdd-pill[data-tone="bad"] { border-color: #efd5ce; background: var(--bdd-bad-bg); color: var(--bdd-bad); }
.bdd .bdd-pill[data-tone="info"] { border-color: #d5e3ed; background: var(--bdd-info-bg); color: var(--bdd-info); }
.bdd .bdd-pill[data-tone="muted"] { border-color: var(--bdd-line); background: var(--bdd-soft); color: var(--bdd-muted); }
.bdd .bdd-pill svg { flex: 0 0 13px; width: 13px; height: 13px; }

.bdd .bdd-notice {
  min-width: 0;
  padding: 15px 18px;
  border: 1px solid var(--bdd-line);
  border-radius: 12px;
  background: var(--bdd-soft);
  color: var(--bdd-muted);
  font-size: 13px;
  line-height: 1.7;
}
.bdd .bdd-notice > * + * { margin-top: 6px; }
.bdd .bdd-notice[data-tone="good"] { border-color: #d4e5d7; background: var(--bdd-good-bg); color: var(--bdd-green); }
.bdd .bdd-notice[data-tone="warn"] { border-color: #e9d9b8; background: var(--bdd-warn-bg); color: var(--bdd-warn); }
.bdd .bdd-notice[data-tone="bad"] { border-color: #efd5ce; background: var(--bdd-bad-bg); color: var(--bdd-bad); }
.bdd .bdd-notice[data-tone="info"] { border-color: #d5e3ed; background: var(--bdd-info-bg); color: var(--bdd-info); }
.bdd .bdd-notice a { color: inherit; text-underline-offset: 3px; }

.bdd .bdd-recovery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  min-width: 0;
  padding: 17px 20px;
  border: 1px solid #e9d9b8;
  border-radius: 12px;
  background: var(--bdd-warn-bg);
}
.bdd .bdd-recovery > div { flex: 1 1 300px; min-width: 0; }
.bdd .bdd-recovery-heading { color: var(--bdd-warn); font-size: 14px; font-weight: 600; }
.bdd .bdd-recovery-description { margin-top: 4px; color: var(--bdd-muted); font-size: 13px; line-height: 1.65; }
.bdd .bdd-recovery > .bdd-button { flex: 0 1 auto; }

.bdd .bdd-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  min-width: 0;
}
.bdd .bdd-card {
  display: flex;
  flex-direction: column;
  grid-column: span 4;
  gap: 20px;
  min-width: 0;
  max-width: 100%;
  padding: 24px;
  border: 1px solid var(--bdd-line);
  border-radius: var(--bdd-radius);
  background: var(--bdd-surface);
  box-shadow: 0 2px 8px #233d2804;
}
.bdd .bdd-card[data-card-type="metric"],
.bdd .bdd-card[data-card-type="status"] { grid-column: span 4; }
.bdd .bdd-card[data-card-type="trend"] { grid-column: span 8; }
.bdd .bdd-card[data-card-type="table"] { grid-column: span 12; }
.bdd .bdd-card[data-card-type="findings"],
.bdd .bdd-card[data-card-type="action"] { grid-column: span 6; }
.bdd .bdd-card[data-state="stale"] { border-color: #ddceb0; }
.bdd .bdd-card[data-state="unavailable"] { background: var(--bdd-canvas); }
.bdd .bdd-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  min-width: 0;
}
.bdd .bdd-card-title {
  flex: 1 1 140px;
  min-width: 0;
  color: var(--bdd-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.015em;
}
.bdd .bdd-card-header > .bdd-pill { flex: 0 1 auto; }
.bdd .bdd-card-body { min-width: 0; }
.bdd .bdd-card-body > * + * { margin-top: 12px; }
.bdd .bdd-value {
  display: block;
  color: var(--bdd-ink);
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 550;
  line-height: 1.08;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums lining-nums;
}
.bdd .bdd-unit {
  display: inline;
  margin-inline-start: 5px;
  color: var(--bdd-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}
.bdd .bdd-change {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  max-width: 100%;
  color: var(--bdd-muted);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.bdd :is(.bdd-change, .bdd-status-value)[data-tone="good"] { color: var(--bdd-green); }
.bdd :is(.bdd-change, .bdd-status-value)[data-tone="warn"] { color: var(--bdd-warn); }
.bdd :is(.bdd-change, .bdd-status-value)[data-tone="bad"] { color: var(--bdd-bad); }
.bdd :is(.bdd-change, .bdd-status-value)[data-tone="info"] { color: var(--bdd-info); }
.bdd :is(.bdd-change, .bdd-status-value)[data-tone="muted"] { color: var(--bdd-muted); }
.bdd .bdd-status-value {
  color: var(--bdd-ink);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 550;
  line-height: 1.25;
  letter-spacing: -.03em;
}
.bdd .bdd-reason {
  color: var(--bdd-muted);
  font-size: 13px;
  line-height: 1.75;
}
.bdd .bdd-uncertainty {
  padding-inline-start: 11px;
  border-inline-start: 2px solid #d7bd85;
  color: var(--bdd-warn);
  font-size: 12px;
  line-height: 1.7;
}
.bdd .bdd-footnote,
.bdd .bdd-asof {
  color: var(--bdd-muted);
  font-size: 11px;
  line-height: 1.7;
}
.bdd .bdd-asof { font-variant-numeric: tabular-nums; }
.bdd .bdd-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--bdd-line);
}
.bdd .bdd-card-footer > * { min-width: 0; max-width: 100%; }
.bdd .bdd-card-footer > .bdd-asof { margin-inline-start: auto; }

.bdd .bdd-citations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bdd .bdd-citations > li { min-width: 0; max-width: 100%; }
.bdd .bdd-citation,
.bdd .bdd-source-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid var(--bdd-line);
  border-radius: 7px;
  background: var(--bdd-canvas);
  color: var(--bdd-green);
  font-size: 11px;
  font-weight: 550;
  line-height: 1.5;
  text-align: start;
  text-decoration: none;
}
.bdd :is(button, a).bdd-citation,
.bdd .bdd-source-button { cursor: pointer; }
.bdd :is(button, a).bdd-citation:hover:not(:disabled):not([aria-disabled="true"]),
.bdd .bdd-source-button:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--bdd-line-strong); background: var(--bdd-good-bg); }
.bdd .bdd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  max-width: 100%;
  padding: 9px 15px;
  border: 1px solid var(--bdd-green);
  border-radius: 9px;
  background: var(--bdd-green);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.bdd .bdd-button:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--bdd-green-hover); background: var(--bdd-green-hover); }
.bdd :is(.bdd-button, .bdd-source-button, .bdd-citation) { white-space: normal; overflow-wrap: anywhere; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
.bdd :is(.bdd-button, .bdd-source-button, .bdd-citation) svg { flex: 0 0 16px; width: 16px; height: 16px; }
.bdd :is(.bdd-button, .bdd-source-button, .bdd-citation):disabled,
.bdd :is(.bdd-button, .bdd-source-button, .bdd-citation)[aria-disabled="true"] {
  border-color: var(--bdd-line);
  background: var(--bdd-soft);
  color: var(--bdd-muted);
  cursor: not-allowed;
}

.bdd .bdd-trend { min-width: 0; width: 100%; }
.bdd .bdd-trend svg { display: block; width: 100%; max-width: 100%; height: auto; }
.bdd .bdd-trend svg text { fill: var(--bdd-muted); font-family: inherit; font-size: 11px; font-variant-numeric: tabular-nums; }
.bdd .bdd-chart-line { fill: none; stroke: var(--bdd-green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bdd .bdd-chart-area { fill: var(--bdd-good-bg); stroke: none; }
.bdd .bdd-table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--bdd-line);
  border-radius: 10px;
  scrollbar-color: var(--bdd-line-strong) var(--bdd-canvas);
  scrollbar-width: thin;
}
.bdd .bdd-table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  color: var(--bdd-ink);
  font-size: 12px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  text-align: start;
}
.bdd .bdd-table caption { padding: 12px 14px; color: var(--bdd-muted); font-size: 12px; text-align: start; }
.bdd .bdd-table :is(th, td) { padding: 13px 15px; border-bottom: 1px solid var(--bdd-line); vertical-align: top; text-align: start; }
.bdd .bdd-table th { background: var(--bdd-soft); color: var(--bdd-muted); font-size: 11px; font-weight: 600; }
.bdd .bdd-table tbody tr:last-child > * { border-bottom: 0; }
.bdd .bdd-table tbody tr:hover { background: var(--bdd-canvas); }
.bdd .bdd-table [data-numeric="true"] { text-align: end; }
.bdd .bdd-table .bdd-pill { font-size: 10px; }
.bdd .bdd-findings { display: grid; gap: 16px; min-width: 0; margin: 0; padding-inline-start: 20px; }
.bdd .bdd-findings > li { padding-inline-start: 4px; color: var(--bdd-ink); font-size: 13px; line-height: 1.75; }
.bdd .bdd-findings > li::marker { color: var(--bdd-green); }
.bdd .bdd-findings > li > * + * { margin-top: 7px; }
.bdd .bdd-details { min-width: 0; color: var(--bdd-muted); font-size: 12px; line-height: 1.7; }
.bdd .bdd-details summary { width: fit-content; max-width: 100%; padding: 5px 0; border-radius: 3px; color: var(--bdd-green); font-weight: 550; cursor: pointer; }
.bdd .bdd-details[open] summary { margin-bottom: 9px; }
.bdd .bdd-details pre { max-width: 100%; padding: 12px; overflow-x: auto; border: 1px solid var(--bdd-line); border-radius: 8px; background: var(--bdd-soft); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bdd .bdd-empty {
  display: grid;
  justify-items: start;
  gap: 12px;
  min-width: 0;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--bdd-line);
  border-radius: var(--bdd-radius);
  background: var(--bdd-canvas);
  color: var(--bdd-muted);
  font-size: 14px;
  line-height: 1.75;
}
.bdd .bdd-empty :is(h2, h3) { color: var(--bdd-ink); font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -.025em; }
.bdd .bdd-empty p { max-width: 62ch; }
.bdd .bdd-empty .bdd-button { margin-top: 4px; }

@container business-dashboard (max-width: 1100px) {
  .bdd .bdd-grid { gap: 16px; }
  .bdd .bdd-card { padding: 21px; }
  .bdd .bdd-card[data-card-type="metric"],
  .bdd .bdd-card[data-card-type="status"] { grid-column: span 6; }
  .bdd .bdd-card[data-card-type="trend"] { grid-column: span 12; }
}

@container business-dashboard (max-width: 680px) {
  .bdd .bdd-header { gap: 16px; }
  .bdd .bdd-header > :first-child { flex-basis: 100%; }
  .bdd .bdd-header > .bdd-toolbar { width: 100%; padding-top: 0; }
  .bdd .bdd-toolbar { justify-content: flex-start; }
  .bdd .bdd-heading { font-size: 28px; }
  .bdd .bdd-grid { gap: 14px; }
  .bdd .bdd-grid > .bdd-card { grid-column: 1 / -1; gap: 18px; padding: 20px; }
  .bdd .bdd-value { font-size: 38px; }
  .bdd .bdd-notice { padding: 14px 16px; }
  .bdd .bdd-card-footer { gap: 10px; }
  .bdd .bdd-card-footer > .bdd-asof { flex-basis: 100%; margin-inline-start: 0; }
  .bdd :is(.bdd-button, .bdd-source-button, button.bdd-citation, a.bdd-citation) { min-height: 44px; }
  .bdd .bdd-details summary { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .bdd .bdd-table :is(th, td) { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .bdd :is(.bdd-button, .bdd-source-button, .bdd-citation) { transition: none; }
}

@media (forced-colors: active) {
  .bdd .bdd-card { box-shadow: none; }
  .bdd .bdd-chart-line { stroke: CanvasText; }
  .bdd .bdd-chart-area { fill: Canvas; }
  .bdd .bdd-trend svg text { fill: CanvasText; }
  .bdd :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: Highlight; }
}
