/*
 * BOS Design System v1
 * Shared by the public site and authenticated application.
 * Light mode only. Breakpoints: 680px, 900px, 1180px.
 */

:root {
  color-scheme: light;

  /* Color */
  --bos-color-canvas: #f7f7f4;
  --bos-color-surface: #ffffff;
  --bos-color-surface-subtle: #f0f1ee;
  --bos-color-surface-raised: #fbfbf9;
  --bos-color-text: #172033;
  --bos-color-text-secondary: #5d6677;
  --bos-color-text-tertiary: #7c8492;
  --bos-color-border: #dcdedb;
  --bos-color-border-strong: #bfc3c9;
  --bos-color-accent: #2457d6;
  --bos-color-accent-hover: #173eac;
  --bos-color-accent-soft: #edf2ff;
  --bos-color-success: #347259;
  --bos-color-success-soft: #edf6f1;
  --bos-color-warning: #946218;
  --bos-color-warning-soft: #fff6e6;
  --bos-color-danger: #a04444;
  --bos-color-danger-hover: #833333;
  --bos-color-danger-soft: #faeeee;
  --bos-color-focus: #184fc9;
  --bos-color-on-accent: #ffffff;

  /* Semantic operating status -- the restrained vocabulary every business,
     agent, and system panel reports through. Blue (--bos-color-accent) is
     reserved for BOS identity/navigation/actions and never doubles as a
     status color. */
  --bos-status-operating: #347259;
  --bos-status-operating-soft: #edf6f1;
  --bos-status-attention: #946218;
  --bos-status-attention-soft: #fff6e6;
  --bos-status-blocked: #a0522d;
  --bos-status-blocked-soft: #faede4;
  --bos-status-failed: #a04444;
  --bos-status-failed-soft: #faeeee;
  --bos-status-awaiting-review: #5b4fc4;
  --bos-status-awaiting-review-soft: #eeecfb;
  --bos-status-experimental: #7d3f8f;
  --bos-status-experimental-soft: #f5eaf8;
  --bos-status-inactive: #7c8492;
  --bos-status-inactive-soft: #f0f1ee;

  /* Typography */
  --bos-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --bos-font-display: Georgia, "Times New Roman", serif;
  --bos-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  --bos-text-xs: .75rem;
  --bos-text-sm: .875rem;
  --bos-text-base: 1rem;
  --bos-text-lg: 1.125rem;
  --bos-text-xl: 1.25rem;
  --bos-text-2xl: 1.5rem;
  --bos-text-3xl: 2rem;
  --bos-text-4xl: 2.75rem;
  --bos-text-5xl: 4rem;
  --bos-text-6xl: 5.25rem;
  --bos-leading-tight: 1.08;
  --bos-leading-heading: 1.2;
  --bos-leading-body: 1.6;
  --bos-tracking-tight: -.03em;
  --bos-tracking-wide: .1em;

  /* Spacing */
  --bos-space-0: 0;
  --bos-space-1: .25rem;
  --bos-space-2: .5rem;
  --bos-space-3: .75rem;
  --bos-space-4: 1rem;
  --bos-space-5: 1.25rem;
  --bos-space-6: 1.5rem;
  --bos-space-8: 2rem;
  --bos-space-10: 2.5rem;
  --bos-space-12: 3rem;
  --bos-space-16: 4rem;
  --bos-space-20: 5rem;
  --bos-space-24: 6rem;
  --bos-space-28: 7rem;
  --bos-space-32: 8rem;

  /* Shape */
  --bos-radius-none: 0;
  --bos-radius-sm: 3px;
  --bos-radius-md: 5px;
  --bos-radius-lg: 8px;
  --bos-radius-pill: 999px;
  --bos-border-width: 1px;

  /* Elevation */
  --bos-shadow-none: none;
  --bos-shadow-sm: 0 1px 2px rgba(23, 32, 51, .05);
  --bos-shadow-md: 0 8px 24px rgba(23, 32, 51, .08);
  --bos-shadow-lg: 0 18px 45px rgba(23, 32, 51, .1);

  /* Layout */
  --bos-container-sm: 680px;
  --bos-container-md: 900px;
  --bos-container-lg: 1180px;
  --bos-container-xl: 1440px;
  --bos-page-gutter: clamp(18px, 3vw, 32px);
  --bos-grid-gap: var(--bos-space-4);

  /* Motion */
  --bos-duration-fast: 120ms;
  --bos-duration-standard: 180ms;
  --bos-duration-slow: 260ms;
  --bos-ease-standard: cubic-bezier(.2, 0, 0, 1);

  /* Icons */
  --bos-icon-sm: 16px;
  --bos-icon-md: 20px;
  --bos-icon-lg: 24px;
  --bos-icon-xl: 32px;

  /* App shell */
  --bos-sidebar-width: 240px;
  --bos-sidebar-width-collapsed: 64px;
  --bos-topbar-height: 58px;
  --bos-z-topbar: 40;
  --bos-z-sidebar: 35;
  --bos-z-overlay: 60;
}

/* Dark theme: same tokens, re-themed. Applies by OS preference, or by an
   explicit override via data-theme so a manual toggle always wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bos-color-canvas: #14161a;
    --bos-color-surface: #1c1f24;
    --bos-color-surface-subtle: #232629;
    --bos-color-surface-raised: #262a2f;
    --bos-color-text: #e8e9ec;
    --bos-color-text-secondary: #a8adb8;
    --bos-color-text-tertiary: #8b909c;
    --bos-color-border: #33363c;
    --bos-color-border-strong: #464a52;
    --bos-color-accent: #6d93ff;
    --bos-color-accent-hover: #8aa6ff;
    --bos-color-accent-soft: #1c2540;
    --bos-color-success: #6fbb95;
    --bos-color-success-soft: #16261e;
    --bos-color-warning: #d9a54a;
    --bos-color-warning-soft: #2b2211;
    --bos-color-danger: #e08080;
    --bos-color-danger-hover: #eb9999;
    --bos-color-danger-soft: #2e1a1a;
    --bos-color-focus: #6d93ff;
    --bos-color-on-accent: #0d1117;
    --bos-status-operating: #6fbb95;
    --bos-status-operating-soft: #16261e;
    --bos-status-attention: #d9a54a;
    --bos-status-attention-soft: #2b2211;
    --bos-status-blocked: #d38a5f;
    --bos-status-blocked-soft: #2c2015;
    --bos-status-failed: #e08080;
    --bos-status-failed-soft: #2e1a1a;
    --bos-status-awaiting-review: #9d94e8;
    --bos-status-awaiting-review-soft: #221f38;
    --bos-status-experimental: #c98fd9;
    --bos-status-experimental-soft: #2b1e2f;
    --bos-status-inactive: #8b909c;
    --bos-status-inactive-soft: #232629;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bos-color-canvas: #14161a;
  --bos-color-surface: #1c1f24;
  --bos-color-surface-subtle: #232629;
  --bos-color-surface-raised: #262a2f;
  --bos-color-text: #e8e9ec;
  --bos-color-text-secondary: #a8adb8;
  --bos-color-text-tertiary: #8b909c;
  --bos-color-border: #33363c;
  --bos-color-border-strong: #464a52;
  --bos-color-accent: #6d93ff;
  --bos-color-accent-hover: #8aa6ff;
  --bos-color-accent-soft: #1c2540;
  --bos-color-success: #6fbb95;
  --bos-color-success-soft: #16261e;
  --bos-color-warning: #d9a54a;
  --bos-color-warning-soft: #2b2211;
  --bos-color-danger: #e08080;
  --bos-color-danger-hover: #eb9999;
  --bos-color-danger-soft: #2e1a1a;
  --bos-color-focus: #6d93ff;
  --bos-color-on-accent: #0d1117;
  --bos-status-operating: #6fbb95;
  --bos-status-operating-soft: #16261e;
  --bos-status-attention: #d9a54a;
  --bos-status-attention-soft: #2b2211;
  --bos-status-blocked: #d38a5f;
  --bos-status-blocked-soft: #2c2015;
  --bos-status-failed: #e08080;
  --bos-status-failed-soft: #2e1a1a;
  --bos-status-awaiting-review: #9d94e8;
  --bos-status-awaiting-review-soft: #221f38;
  --bos-status-experimental: #c98fd9;
  --bos-status-experimental-soft: #2b1e2f;
  --bos-status-inactive: #8b909c;
  --bos-status-inactive-soft: #232629;
}

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

html { background: var(--bos-color-canvas); }

body {
  background: var(--bos-color-canvas);
  color: var(--bos-color-text);
  font-family: var(--bos-font-sans);
  font-size: var(--bos-text-base);
  line-height: var(--bos-leading-body);
  margin: 0;
  text-rendering: optimizeLegibility;
}

img,
svg { display: block; max-width: 100%; }

button,
input,
select,
textarea { font: inherit; }

a {
  color: var(--bos-color-accent);
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

a:hover { color: var(--bos-color-accent-hover); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--bos-color-focus);
  outline-offset: 3px;
}

.skip-link {
  background: var(--bos-color-surface);
  border: 1px solid var(--bos-color-border-strong);
  border-radius: var(--bos-radius-sm);
  color: var(--bos-color-text);
  left: var(--bos-space-4);
  padding: var(--bos-space-2) var(--bos-space-3);
  position: fixed;
  top: -100px;
  z-index: 100;
}

.skip-link:focus { top: var(--bos-space-4); }

/* Typography */
.ds-display,
.ds-h1,
.ds-h2,
.ds-h3,
.ds-h4,
.ds-h5,
.ds-h6 {
  color: var(--bos-color-text);
  font-family: var(--bos-font-display);
  font-weight: 500;
  letter-spacing: var(--bos-tracking-tight);
  margin: 0;
  text-wrap: balance;
}

.ds-display { font-size: clamp(var(--bos-text-4xl), 7vw, var(--bos-text-6xl)); line-height: .99; }
.ds-h1 { font-size: clamp(var(--bos-text-4xl), 5vw, var(--bos-text-5xl)); line-height: 1.02; }
.ds-h2 { font-size: clamp(2.25rem, 4vw, 3.7rem); line-height: 1.05; }
.ds-h3 { font-size: var(--bos-text-2xl); line-height: var(--bos-leading-heading); }
.ds-h4 { font-size: var(--bos-text-xl); line-height: var(--bos-leading-heading); }
.ds-h5 { font-family: var(--bos-font-sans); font-size: var(--bos-text-base); font-weight: 700; letter-spacing: -.01em; }
.ds-h6 { font-family: var(--bos-font-sans); font-size: var(--bos-text-sm); font-weight: 700; letter-spacing: 0; }
.ds-body-lg { color: var(--bos-color-text-secondary); font-size: var(--bos-text-lg); }
.ds-body { color: var(--bos-color-text-secondary); font-size: var(--bos-text-base); }
.ds-body-sm { color: var(--bos-color-text-secondary); font-size: var(--bos-text-sm); }
.ds-caption { color: var(--bos-color-text-tertiary); font-size: var(--bos-text-xs); }
.ds-eyebrow {
  color: var(--bos-color-accent);
  font-size: var(--bos-text-xs);
  font-weight: 750;
  letter-spacing: var(--bos-tracking-wide);
  margin: 0;
  text-transform: uppercase;
}
.ds-code,
code,
pre {
  font-family: var(--bos-font-mono);
  font-size: .875em;
}
code {
  background: var(--bos-color-surface-subtle);
  border-radius: var(--bos-radius-sm);
  padding: .12em .32em;
}
pre {
  background: var(--bos-color-text);
  border-radius: var(--bos-radius-md);
  color: #eef1f6;
  overflow: auto;
  padding: var(--bos-space-4);
}
.ds-link {
  color: var(--bos-color-text);
  font-weight: 700;
  text-decoration: none;
}
.ds-link:hover { color: var(--bos-color-accent); }
.ds-link-arrow { color: var(--bos-color-accent); margin-left: var(--bos-space-1); }

/* Containers, sections, and grids */
.ds-container {
  margin-inline: auto;
  max-width: var(--bos-container-lg);
  padding-inline: var(--bos-page-gutter);
  width: 100%;
}
.ds-container--sm { max-width: var(--bos-container-sm); }
.ds-container--md { max-width: var(--bos-container-md); }
.ds-container--xl { max-width: var(--bos-container-xl); }
.ds-section { padding-block: var(--bos-space-24); }
.ds-section--compact { padding-block: var(--bos-space-16); }
.ds-section--bordered { border-top: 1px solid var(--bos-color-border); }
.ds-grid {
  display: grid;
  gap: var(--bos-grid-gap);
  min-width: 0;
}
.ds-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ds-stack { display: flex; flex-direction: column; gap: var(--bos-space-4); }
.ds-cluster { align-items: center; display: flex; flex-wrap: wrap; gap: var(--bos-space-3); }

/* Button
   ------
   Structure (border width, padding, sizing, layout) and the primary/blue
   default color are both set here, on deliberately LOW-specificity
   selectors: a bare .ds-button/.button/[class*="ds-button--"]/<button>
   match. Every variant below it (.ds-button--secondary, --ghost,
   --danger, --icon, --row) is a single class selector of equal-or-
   greater specificity that always wins the color properties it sets,
   in source order -- so a template only ever needs to write the one
   variant class it means (e.g. class="ds-button--secondary" alone) and
   still gets a fully structured, correctly colored button. This is
   deliberate: an earlier version required BOTH "ds-button" and
   "ds-button--<variant>" together, and dozens of templates across the
   app had only ever written the variant class -- silently degrading to
   an unstyled, structure-less link. */
.ds-button,
.button,
[class*="ds-button--"],
button {
  align-items: center;
  appearance: none;
  background: var(--bos-color-accent);
  border: 1px solid var(--bos-color-accent);
  border-radius: var(--bos-radius-md);
  color: var(--bos-color-on-accent);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--bos-text-sm);
  font-weight: 700;
  gap: var(--bos-space-2);
  justify-content: center;
  min-height: 42px;
  padding: .6rem 1rem;
  text-decoration: none;
  transition: background-color var(--bos-duration-fast) var(--bos-ease-standard),
    border-color var(--bos-duration-fast) var(--bos-ease-standard);
  width: fit-content;
}
.ds-button:hover,
.button:hover,
[class*="ds-button--"]:hover,
button:hover {
  background: var(--bos-color-accent-hover);
  border-color: var(--bos-color-accent-hover);
  color: var(--bos-color-on-accent);
}
.ds-button:active,
.button:active,
[class*="ds-button--"]:active,
button:active {
  background: var(--bos-color-accent-hover);
  border-color: var(--bos-color-accent-hover);
  transform: translateY(1px);
}
/* Chrome/utility controls (sidebar toggles, nav-group headers, ...) and
   plain link-styled buttons opt out of the default structure/color
   entirely -- they define their own complete look below. */
.op-chrome-button,
.link-button {
  background: transparent;
  border-color: transparent;
  border-width: 0;
  color: inherit;
  min-height: 0;
  padding: 0;
}
.op-chrome-button:hover,
.link-button:hover,
.op-chrome-button:active,
.link-button:active { background: transparent; border-color: transparent; transform: none; }
.ds-button--secondary,
.button.secondary {
  background: var(--bos-color-surface);
  border-color: var(--bos-color-border-strong);
  color: var(--bos-color-text);
}
.ds-button--secondary:hover,
.button.secondary:hover {
  background: var(--bos-color-surface-subtle);
  border-color: #a9aeb6;
  color: var(--bos-color-text);
}
.ds-button--secondary:active,
.button.secondary:active { background: var(--bos-color-surface-subtle); transform: translateY(1px); }
.ds-button--ghost,
.link-button {
  background: transparent;
  border-color: transparent;
  color: var(--bos-color-text);
}
.ds-button--ghost:hover,
.link-button:hover { background: var(--bos-color-surface-subtle); color: var(--bos-color-text); }
.ds-button--ghost:active,
.link-button:active { background: var(--bos-color-surface-subtle); transform: translateY(1px); }
.ds-button--danger,
.danger-button {
  background: var(--bos-color-danger);
  border-color: var(--bos-color-danger);
}
.ds-button--danger:hover,
.danger-button:hover {
  background: var(--bos-color-danger-hover);
  border-color: var(--bos-color-danger-hover);
}
.ds-button--danger:active,
.danger-button:active { background: var(--bos-color-danger-hover); transform: translateY(1px); }
.ds-button--sm { min-height: 34px; padding: .38rem .7rem; }

/* Icon button -- square, no visible label, used for compact chrome
   actions (close, collapse, overflow menu, ...). Always pair with an
   aria-label since there is no text content for assistive tech. */
.ds-button--icon {
  background: transparent;
  border-color: var(--bos-color-border);
  color: var(--bos-color-text-secondary);
  min-height: 34px;
  min-width: 34px;
  padding: 0;
  width: 34px;
}
.ds-button--icon:hover {
  background: var(--bos-color-surface-subtle);
  border-color: var(--bos-color-border-strong);
  color: var(--bos-color-text);
}
.ds-button--icon:active { background: var(--bos-color-surface-subtle); transform: translateY(1px); }

/* Compact row action -- for table rows, record-list items, and other
   dense-list contexts where a full-height button would overwhelm the
   row. Deliberately smaller than --sm and never the sole way to reach
   a page (the row itself, or its primary link, remains navigable). */
.ds-button--row {
  background: transparent;
  border-color: var(--bos-color-border);
  color: var(--bos-color-text-secondary);
  font-size: var(--bos-text-xs);
  min-height: 28px;
  padding: .25rem .55rem;
}
.ds-button--row:hover {
  background: var(--bos-color-surface-subtle);
  border-color: var(--bos-color-border-strong);
  color: var(--bos-color-text);
}
.ds-button--row:active { background: var(--bos-color-surface-subtle); transform: translateY(1px); }

.ds-button[disabled],
button[disabled] { cursor: not-allowed; opacity: .52; }

/* Cards */
.ds-card,
.card,
.review-card,
.login-card,
.error-card {
  background: var(--bos-color-surface);
  border: 1px solid var(--bos-color-border);
  border-radius: var(--bos-radius-md);
  color: var(--bos-color-text);
  padding: var(--bos-space-6);
}
.ds-card--feature { min-height: 210px; }
.ds-card--workflow { border-radius: 0; border-width: 1px 0; min-height: 230px; }
.ds-card--status { min-height: 360px; }
.ds-card--raised { box-shadow: var(--bos-shadow-md); }
.ds-card__eyebrow { margin-bottom: var(--bos-space-8); }
.ds-card__title { margin-bottom: var(--bos-space-3); }
.ds-card__body { color: var(--bos-color-text-secondary); font-size: var(--bos-text-sm); }
.ds-card__footer { border-top: 1px solid var(--bos-color-border); margin-top: var(--bos-space-5); padding-top: var(--bos-space-4); }

/* Hero */
.ds-hero {
  align-items: center;
  display: grid;
  gap: clamp(var(--bos-space-10), 7vw, var(--bos-space-24));
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  padding-block: clamp(var(--bos-space-20), 9vw, var(--bos-space-32));
}
.ds-hero--single { display: block; max-width: 820px; }
.ds-hero__copy { max-width: 660px; }
.ds-hero__lede { margin: var(--bos-space-6) 0 0; max-width: 640px; }
.ds-hero__actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--bos-space-6); margin-top: var(--bos-space-8); }

/* Navbar and footer */
.ds-navbar {
  align-items: center;
  background: rgba(247, 247, 244, .97);
  border-bottom: 1px solid var(--bos-color-border);
  display: flex;
  justify-content: space-between;
  min-height: 72px;
}
.ds-navbar__inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-inline: auto;
  max-width: var(--bos-container-lg);
  padding-inline: var(--bos-page-gutter);
  width: 100%;
}
.ds-navbar__links { align-items: center; display: flex; flex-wrap: wrap; gap: var(--bos-space-1); }
.ds-navbar__links > a:not(.ds-button) {
  border-radius: var(--bos-radius-sm);
  color: var(--bos-color-text-secondary);
  font-size: var(--bos-text-sm);
  font-weight: 650;
  padding: .5rem .7rem;
  text-decoration: none;
}
.ds-navbar__links > a:not(.ds-button):hover {
  background: var(--bos-color-surface-subtle);
  color: var(--bos-color-text);
}
.ds-navbar__link {
  border-radius: var(--bos-radius-sm);
  color: var(--bos-color-text-secondary);
  font-size: var(--bos-text-sm);
  font-weight: 650;
  padding: .5rem .7rem;
  text-decoration: none;
}
.ds-navbar__link:hover { background: var(--bos-color-surface-subtle); color: var(--bos-color-text); }
.ds-footer { border-top: 1px solid var(--bos-color-border); padding-block: var(--bos-space-12) var(--bos-space-8); }
.ds-footer__inner {
  display: grid;
  gap: var(--bos-space-12);
  grid-template-columns: minmax(220px, 1fr) 2fr;
  margin-inline: auto;
  max-width: var(--bos-container-lg);
  padding-inline: var(--bos-page-gutter);
  width: 100%;
}
.ds-footer__grid { display: grid; gap: var(--bos-space-12); grid-template-columns: minmax(220px, 1fr) 2fr; }
.ds-footer__links { display: grid; gap: var(--bos-space-6); grid-template-columns: repeat(3, 1fr); }
.ds-footer__links nav strong { display: block; font-size: var(--bos-text-xs); margin-bottom: var(--bos-space-3); }
.ds-footer__links nav a {
  color: var(--bos-color-text-secondary);
  display: block;
  font-size: var(--bos-text-xs);
  padding-block: var(--bos-space-1);
  text-decoration: none;
}
.ds-footer__links nav a:hover { color: var(--bos-color-accent); }
.ds-footer__nav strong { display: block; font-size: var(--bos-text-xs); margin-bottom: var(--bos-space-3); }
.ds-footer__nav a { color: var(--bos-color-text-secondary); display: block; font-size: var(--bos-text-xs); padding-block: var(--bos-space-1); text-decoration: none; }
.ds-footer__nav a:hover { color: var(--bos-color-accent); }
.ds-footer__legal { border-top: 1px solid var(--bos-color-border); color: var(--bos-color-text-tertiary); font-size: var(--bos-text-xs); grid-column: 1 / -1; margin: var(--bos-space-4) 0 0; padding-top: var(--bos-space-5); }

/* Badges and status */
.ds-badge,
.status {
  align-items: center;
  background: var(--bos-color-surface-subtle);
  border: 1px solid var(--bos-color-border);
  border-radius: var(--bos-radius-pill);
  color: var(--bos-color-text-secondary);
  display: inline-flex;
  font-size: .7rem;
  font-weight: 750;
  gap: var(--bos-space-2);
  letter-spacing: .05em;
  line-height: 1;
  padding: .4rem .62rem;
  text-transform: uppercase;
  width: fit-content;
}
.ds-badge::before,
.ds-badge--dot::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  height: 6px;
  width: 6px;
}
.ds-badge--neutral::before,
.ds-badge--coming-soon::before { display: none; }
.ds-badge--success,
.status.safe { background: var(--bos-color-success-soft); border-color: #c9e0d3; color: var(--bos-color-success); }
.ds-badge--warning { background: var(--bos-color-warning-soft); border-color: #ead4a8; color: var(--bos-color-warning); }
.ds-badge--danger,
.status.danger { background: var(--bos-color-danger-soft); border-color: #e7c8c8; color: var(--bos-color-danger); }
.ds-badge--roadmap { background: var(--bos-color-accent-soft); border-color: #ced9fb; color: var(--bos-color-accent); }
.ds-badge--coming-soon { background: var(--bos-color-surface-subtle); color: var(--bos-color-text-secondary); }

/* Semantic operating-status badges -- the restrained vocabulary used by
   Overview, the business division pages, and Command Center: operating,
   attention, blocked, failed, awaiting-review, experimental, inactive.
   Distinct from --bos-color-accent (BOS identity/navigation/actions). */
.ds-badge--operating { background: var(--bos-status-operating-soft); border-color: var(--bos-status-operating); color: var(--bos-status-operating); }
.ds-badge--attention { background: var(--bos-status-attention-soft); border-color: var(--bos-status-attention); color: var(--bos-status-attention); }
.ds-badge--blocked { background: var(--bos-status-blocked-soft); border-color: var(--bos-status-blocked); color: var(--bos-status-blocked); }
.ds-badge--failed { background: var(--bos-status-failed-soft); border-color: var(--bos-status-failed); color: var(--bos-status-failed); }
.ds-badge--awaiting-review { background: var(--bos-status-awaiting-review-soft); border-color: var(--bos-status-awaiting-review); color: var(--bos-status-awaiting-review); }
.ds-badge--experimental { background: var(--bos-status-experimental-soft); border-color: var(--bos-status-experimental); color: var(--bos-status-experimental); }
.ds-badge--inactive { background: var(--bos-status-inactive-soft); border-color: var(--bos-status-inactive); color: var(--bos-status-inactive); }

/* Tables */
.ds-table-wrap,
.table-wrap {
  background: var(--bos-color-surface);
  border: 1px solid var(--bos-color-border);
  border-radius: var(--bos-radius-md);
  overflow-x: auto;
}
table { border-collapse: collapse; width: 100%; }
th,
td {
  border-bottom: 1px solid var(--bos-color-border);
  padding: .78rem;
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--bos-color-surface-subtle);
  color: var(--bos-color-text-secondary);
  font-size: var(--bos-text-xs);
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bos-color-surface-raised); }

/* Forms and inputs */
form { display: grid; gap: var(--bos-space-3); }
label { color: var(--bos-color-text); font-size: var(--bos-text-sm); font-weight: 650; }
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background: var(--bos-color-surface);
  border: 1px solid var(--bos-color-border-strong);
  border-radius: var(--bos-radius-md);
  color: var(--bos-color-text);
  min-height: 42px;
  padding: .58rem .7rem;
  width: 100%;
}
textarea { min-height: 9rem; resize: vertical; }
input::placeholder,
textarea::placeholder { color: var(--bos-color-text-tertiary); opacity: 1; }
input:disabled,
select:disabled,
textarea:disabled { background: var(--bos-color-surface-subtle); color: var(--bos-color-text-tertiary); }
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible { border-color: var(--bos-color-accent); }
/* Checkboxes and radios keep their native control (best accessibility,
   no risk of a mis-built custom widget) but pick up BOS's accent color
   and a consistent, comfortable click target instead of the raw
   OS-default appearance. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--bos-color-accent);
  height: 18px;
  margin: 0;
  width: 18px;
}
.ds-field { display: grid; gap: var(--bos-space-2); }
.ds-field__hint { color: var(--bos-color-text-tertiary); font-size: var(--bos-text-xs); }
.ds-field__error { color: var(--bos-color-danger); font-size: var(--bos-text-xs); }
.ds-field--check {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: var(--bos-space-2);
}
.ds-field--check label { font-weight: 500; }
.governed-form,
.filter-form { background: var(--bos-color-surface); border: 1px solid var(--bos-color-border); border-radius: var(--bos-radius-md); max-width: var(--bos-container-sm); padding: var(--bos-space-5); }

/* Alerts and empty states */
.warning,
.ds-alert {
  background: var(--bos-color-warning-soft);
  border: 1px solid #ead4a8;
  border-left: 3px solid var(--bos-color-warning);
  border-radius: var(--bos-radius-sm);
  color: #684813;
  padding: var(--bos-space-3) var(--bos-space-4);
}
.ds-alert--danger { background: var(--bos-color-danger-soft); border-color: #e7c8c8; border-left-color: var(--bos-color-danger); color: #793636; }
.ds-alert--success { background: var(--bos-color-success-soft); border-color: #c9e0d3; border-left-color: var(--bos-color-success); color: #285c47; }
.ds-empty,
.empty {
  align-items: center;
  background: var(--bos-color-surface);
  border: 1px dashed var(--bos-color-border-strong);
  border-radius: var(--bos-radius-md);
  color: var(--bos-color-text-secondary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 180px;
  padding: var(--bos-space-8);
  text-align: center;
}

/* Timeline, workflow, and audit timeline */
.ds-timeline,
.ds-audit-timeline,
.ds-workflow {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ds-timeline__item,
.ds-audit-timeline__item {
  border-left: 1px solid var(--bos-color-border-strong);
  margin-left: 7px;
  padding: 0 0 var(--bos-space-6) var(--bos-space-6);
  position: relative;
}
.ds-timeline__item::before,
.ds-audit-timeline__item::before {
  background: var(--bos-color-surface);
  border: 2px solid var(--bos-color-accent);
  border-radius: 50%;
  content: "";
  height: 14px;
  left: -8px;
  position: absolute;
  top: 4px;
  width: 14px;
}
.ds-audit-timeline__meta { color: var(--bos-color-text-tertiary); font-family: var(--bos-font-mono); font-size: var(--bos-text-xs); }
.ds-workflow { display: grid; grid-template-columns: repeat(4, 1fr); }
.ds-workflow__step {
  border-bottom: 1px solid var(--bos-color-border);
  border-top: 1px solid var(--bos-color-border);
  min-height: 230px;
  padding: var(--bos-space-6);
}
.ds-workflow__step + .ds-workflow__step { border-left: 1px solid var(--bos-color-border); }
.ds-workflow__number { color: var(--bos-color-accent); display: block; font-family: var(--bos-font-mono); font-size: var(--bos-text-xs); margin-bottom: var(--bos-space-10); }
.ds-workflow__title { display: block; font-family: var(--bos-font-display); font-size: var(--bos-text-2xl); font-weight: 500; }
.ds-workflow__body { color: var(--bos-color-text-secondary); font-size: var(--bos-text-sm); margin: var(--bos-space-3) 0 0; }

/* Icon box */
.ds-icon { height: var(--bos-icon-md); width: var(--bos-icon-md); }
.ds-icon--sm { height: var(--bos-icon-sm); width: var(--bos-icon-sm); }
.ds-icon--lg { height: var(--bos-icon-lg); width: var(--bos-icon-lg); }
.ds-icon--xl { height: var(--bos-icon-xl); width: var(--bos-icon-xl); }

@media (max-width: 900px) {
  .ds-hero { grid-template-columns: 1fr; }
  .ds-grid--3,
  .ds-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-workflow { grid-template-columns: repeat(2, 1fr); }
  .ds-workflow__step:nth-child(3) { border-left: 0; }
}

@media (max-width: 680px) {
  .ds-section { padding-block: var(--bos-space-16); }
  .ds-grid--2,
  .ds-grid--3,
  .ds-grid--4 { grid-template-columns: 1fr; }
  .ds-navbar { padding-block: var(--bos-space-4); }
  .ds-navbar__inner { align-items: flex-start; flex-direction: column; gap: var(--bos-space-3); }
  .ds-navbar__links { width: 100%; }
  .ds-navbar__links .ds-button { margin-left: auto; }
  .ds-footer__inner,
  .ds-footer__grid { grid-template-columns: 1fr; }
  .ds-footer__links { grid-template-columns: repeat(2, 1fr); }
  .ds-workflow { grid-template-columns: 1fr; }
  .ds-workflow__step,
  .ds-workflow__step + .ds-workflow__step { border-left: 0; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}