:root {
  color-scheme: light;

  /* Shadcn-style aliases backed by official Material 3 system roles. */
  --background: var(--md-sys-color-background);
  --foreground: var(--md-sys-color-on-background);
  --card: var(--md-sys-color-surface);
  --card-foreground: var(--md-sys-color-on-surface);
  --popover: var(--md-sys-color-surface-container-lowest);
  --popover-foreground: var(--md-sys-color-on-surface);
  --primary: var(--md-sys-color-primary);
  --primary-foreground: var(--md-sys-color-on-primary);
  --primary-strong: #0842a0;
  --primary-container: var(--md-sys-color-primary-container);
  --on-primary-container: var(--md-sys-color-on-primary-container);
  --secondary: var(--md-sys-color-secondary);
  --secondary-foreground: var(--md-sys-color-on-secondary);
  --secondary-container: var(--md-sys-color-secondary-container);
  --on-secondary-container: var(--md-sys-color-on-secondary-container);
  --muted-surface: var(--md-sys-color-surface-container);
  --muted: var(--md-sys-color-on-surface-variant);
  --muted-foreground: var(--md-sys-color-on-surface-variant);
  --accent: var(--md-sys-color-secondary-container);
  --accent-foreground: var(--md-sys-color-on-secondary-container);
  --destructive: var(--md-sys-color-error);
  --destructive-foreground: var(--md-sys-color-on-error);
  --danger: var(--md-sys-color-error);
  --danger-container: var(--md-sys-color-error-container);
  --warn: var(--md-sys-color-warning);
  --warn-container: var(--md-sys-color-warning-container);
  --ok: var(--md-sys-color-success);
  --ok-container: var(--md-sys-color-success-container);
  --blue: var(--md-sys-color-primary);
  --border: var(--md-sys-color-outline-variant);
  --input: var(--md-sys-color-outline-variant);
  --ring: var(--md-sys-color-primary);

  --bg: var(--background);
  --surface: var(--card);
  --surface-container-low: var(--md-sys-color-surface-container-low);
  --surface-container: var(--md-sys-color-surface-container);
  --surface-container-high: var(--md-sys-color-surface-container-high);
  --surface-variant: var(--md-sys-color-surface-variant);
  --ink: var(--foreground);
  --line: var(--border);
  --line-strong: var(--md-sys-color-outline);
  --tertiary: var(--md-sys-color-tertiary);
  --tertiary-container: var(--md-sys-color-tertiary-container);

  --radius: var(--md-sys-shape-corner-medium);
  --radius-sm: var(--md-sys-shape-corner-small);
  --radius-lg: var(--md-sys-shape-corner-large);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --shadow: var(--md-sys-elevation-level1);
  --shadow-md: var(--md-sys-elevation-level2);
  --shadow-lg: var(--md-sys-elevation-level3);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--md-ref-typeface-plain);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  font-weight: var(--md-sys-typescale-body-medium-weight);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-container-low));
  color: var(--ink);
  border-right: 1px solid var(--line);
  box-shadow: 1px 0 0 rgba(21, 25, 31, 0.02);
}

.brand-block {
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(152, 241, 236, 0.24), rgba(255, 255, 255, 0));
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-weight: 800;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  box-shadow: var(--shadow);
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--primary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

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

h1 {
  font-family: var(--md-sys-typescale-title-large-font);
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: var(--md-sys-typescale-title-large-weight);
  letter-spacing: 0;
}

h2 {
  font-family: var(--md-sys-typescale-title-large-font);
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: var(--md-sys-typescale-title-large-weight);
  letter-spacing: 0;
}

h3 {
  font-family: var(--md-sys-typescale-title-small-font);
  font-size: var(--md-sys-typescale-title-small-size);
  line-height: var(--md-sys-typescale-title-small-line-height);
  font-weight: var(--md-sys-typescale-title-small-weight);
  letter-spacing: 0;
}

.side-nav {
  display: grid;
  gap: 4px;
  padding: 14px 10px;
}

.nav-item {
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius);
  box-shadow: none;
  gap: 8px;
}

.nav-item:hover,
.nav-item.active {
  background: color-mix(in srgb, var(--primary-container) 46%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--on-primary-container);
}

.nav-item.active {
  box-shadow: inset 3px 0 0 var(--primary);
}

.nav-count {
  margin-left: auto;
  min-width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--warn-container);
  color: var(--warn);
  font-size: 12px;
  font-weight: 800;
}

.nav-count.is-empty {
  background: var(--surface-container-high);
  color: var(--muted);
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px;
  color: var(--muted);
  font-size: 13px;
  border-top: 1px solid var(--line);
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #22c55e;
}

.workspace {
  min-width: 0;
  padding: 22px 26px 40px;
}

.topbar {
  min-height: 74px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid transparent;
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--foreground);
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 650;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 1px 1px rgba(21, 25, 31, 0.03);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 120ms ease;
}

button:hover {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  background: var(--surface-container-low);
}

button:active {
  transform: translateY(1px);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.ref-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ring) 64%, transparent);
  outline-offset: 2px;
}

button:disabled {
  cursor: wait;
  opacity: 0.58;
  transform: none;
}

button.primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
  box-shadow: 0 2px 5px rgba(0, 108, 103, 0.18);
}

button.primary:hover {
  background: var(--primary-strong);
}

button.tonal {
  border-color: color-mix(in srgb, var(--secondary) 13%, transparent);
  background: var(--secondary-container);
  color: #0c211f;
}

button.tonal:hover {
  border-color: transparent;
  background: #b8d4cf;
}

button.text-btn {
  border-color: transparent;
  background: transparent;
  color: var(--primary);
  box-shadow: none;
}

button.text-btn:hover {
  background: var(--surface-container-high);
}

.icon-button {
  width: 40px;
  min-width: 40px;
  padding: 0;
  border-color: transparent;
  border-radius: var(--radius);
}

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

.department-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.department-switcher select {
  max-width: 260px;
  min-height: 28px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
}

.status-line {
  min-height: 42px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  padding: 4px 0 12px;
}

.status-line.error {
  margin: 10px 0;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid var(--danger-container);
  border-left: 4px solid var(--danger);
  border-radius: var(--radius);
  background: #fff8f7;
  color: var(--danger);
  font-weight: 650;
}

.status-line.working {
  color: var(--blue);
}

.view.is-hidden {
  display: none !important;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(8, minmax(112px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.metric {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  position: relative;
  overflow: hidden;
}

.metric::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--blue));
  opacity: 0.72;
}

.metric .value {
  display: block;
  font-size: 25px;
  font-weight: 800;
  margin-bottom: 3px;
}

.metric .label {
  color: var(--muted);
  font-size: 12px;
}

.cockpit-grid {
  grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr);
  align-items: start;
}

.overview-landing {
  display: grid;
  gap: 16px;
}

.overview-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.overview-hero-copy {
  max-width: 780px;
  display: grid;
  gap: 8px;
}

.overview-hero-copy h1 {
  font-size: 34px;
  line-height: 1.12;
}

.overview-hero-copy p:not(.eyebrow) {
  color: var(--muted);
  max-width: 720px;
}

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

.overview-tabbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  overflow-x: auto;
}

.overview-tab {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.overview-tab:hover,
.overview-tab.active {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.overview-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

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

.overview-section-head p {
  margin-top: 4px;
  color: var(--muted);
}

.overview-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.overview-info-card {
  display: grid;
  gap: 8px;
  min-height: 122px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-container-low);
}

.overview-info-card span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.overview-info-card strong {
  font-size: 20px;
  line-height: 1.2;
}

.overview-info-card p,
.overview-narrative p,
.overview-step p {
  color: var(--muted);
}

.department-home-grid,
.runtime-grid,
.operating-rule-grid,
.visibility-grid,
.operating-model-grid {
  display: grid;
  gap: 12px;
}

.department-home-grid,
.visibility-grid {
  grid-template-columns: repeat(2, minmax(240px, 1fr));
}

.runtime-grid,
.operating-rule-grid {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.operating-model-grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  align-items: start;
}

.department-home-panel,
.runtime-card,
.operating-rule-card,
.visibility-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-container-low);
}

.departments-workspace {
  display: grid;
  gap: 16px;
}

.department-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.department-list-filter,
.department-home-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.department-list-filter {
  justify-content: flex-start;
}

.department-card-button {
  display: grid;
  gap: 10px;
  min-height: 128px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
  color: var(--text);
}

.department-card-button:hover,
.department-card-button.selected,
.department-card-button.is-active-department {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary-container) 36%, var(--surface-container-lowest));
}

.department-card-select {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.department-card-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--surface-container);
  color: var(--primary);
}

.department-card-icon svg {
  width: 21px;
  height: 21px;
}

.department-card-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.department-card-main strong,
.department-card-main small {
  display: block;
}

.department-card-main small,
.department-card-meta small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.department-card-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 96px;
}

.department-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.departments-home-view {
  display: grid;
  gap: 16px;
}

.departments-home-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-container-lowest);
}

.departments-home-hero p:not(.eyebrow) {
  margin-top: 6px;
  color: var(--muted);
  max-width: 760px;
  line-height: 1.45;
}

.department-home-list {
  margin-top: 0;
}

.department-index-card {
  min-height: 178px;
}

.department-index-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}

.department-index-card.is-active-department .department-card-icon {
  background: var(--ok-container);
  color: var(--ok);
}

.department-workspace-only {
  display: block;
}

.department-workspace-card .ui-card-content {
  display: grid;
  gap: 14px;
}

.department-workspace-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.department-workspace-tab {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.department-workspace-tab.active {
  border-color: var(--primary);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.department-workspace-panel {
  display: grid;
  gap: 14px;
}

.seo-stage-workspace-shell {
  --seo-stage-ink: #1f2933;
  --seo-stage-muted: #5f6978;
  --seo-stage-line: #d8dee8;
  --seo-stage-blue: #0b57d0;
  display: grid;
  gap: 16px;
  color: var(--seo-stage-ink);
}

.seo-stage-banner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--seo-stage-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.seo-stage-banner h2 {
  margin: 2px 0 6px;
  color: var(--seo-stage-ink);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 550;
}

.seo-stage-banner p:not(.eyebrow) {
  max-width: 840px;
  margin: 0;
  color: var(--seo-stage-muted);
  line-height: 1.5;
}

.seo-stage-banner-actions,
.seo-stage-add-row,
.seo-stage-tab-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.seo-stage-banner-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.seo-stage-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--seo-stage-muted);
  font-size: 12px;
  font-weight: 650;
}

.seo-stage-meta-row span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  background: #eef2f7;
}

.seo-stage-meta-row .warn {
  background: #fff1cf;
  color: #9a5b00;
}

.seo-stage-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.seo-stage-rail,
.seo-stage-main-panel {
  min-width: 0;
  border: 1px solid var(--seo-stage-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.seo-stage-rail {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.seo-stage-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 4px;
}

.seo-stage-rail-head span {
  color: var(--seo-stage-muted);
  font-size: 13px;
}

.seo-stage-rail-list {
  display: grid;
  gap: 8px;
}

.seo-stage-row {
  min-height: 86px;
  display: grid;
  gap: 6px;
  border: 1px solid var(--seo-stage-line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  color: var(--seo-stage-ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.seo-stage-row:hover,
.seo-stage-row.active {
  border-color: var(--seo-stage-blue);
  background: #f5f9ff;
}

.seo-stage-row > span {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.seo-stage-row strong {
  font-size: 14px;
  line-height: 1.3;
}

.seo-stage-row small {
  color: var(--seo-stage-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.seo-stage-tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--seo-stage-line);
  padding: 0 14px;
}

.seo-stage-tab {
  min-height: 50px;
  flex: 0 0 auto;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 14px;
  background: transparent;
  color: var(--seo-stage-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.seo-stage-tab:hover,
.seo-stage-tab.active {
  border-bottom-color: var(--seo-stage-blue);
  color: var(--seo-stage-blue);
}

.seo-stage-panel {
  padding: 18px;
}

.seo-stage-workspace-grid,
.seo-stage-script-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 18px;
}

.seo-stage-form-stack,
.seo-stage-side-stack,
.seo-stage-table-stack {
  display: grid;
  gap: 14px;
  align-content: start;
}

.seo-stage-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.seo-stage-info-panel,
.seo-stage-skill-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--seo-stage-line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcff;
}

.seo-stage-info-panel h3 {
  margin: 0;
  color: var(--seo-stage-ink);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 550;
}

.seo-stage-info-panel > p:not(.eyebrow),
.seo-stage-skill-card p,
.seo-stage-tab-head p {
  margin: 0;
  color: var(--seo-stage-muted);
  line-height: 1.45;
}

.seo-stage-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.seo-stage-chip {
  max-width: 100%;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--seo-stage-line);
  border-radius: 999px;
  padding: 4px 8px 4px 10px;
  background: #fff;
  color: var(--seo-stage-ink);
  font-size: 12px;
  font-weight: 650;
}

.seo-stage-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-stage-chip button {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--seo-stage-muted);
  cursor: pointer;
}

.seo-stage-chip button:hover {
  background: #eef2f7;
  color: var(--seo-stage-ink);
}

.seo-stage-chip .ui-icon {
  width: 14px;
  height: 14px;
}

.seo-stage-add-row {
  align-items: stretch;
}

.seo-stage-add-row .ui-input,
.seo-stage-add-row .ui-select {
  min-width: 0;
}

.seo-stage-tab-head {
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}

.seo-stage-tab-head h3 {
  margin: 0 0 4px;
  color: var(--seo-stage-ink);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 550;
}

.seo-stage-table-wrap {
  overflow-x: auto;
}

.seo-stage-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.seo-stage-table th,
.seo-stage-table td {
  border-bottom: 1px solid #e7ebf2;
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
}

.seo-stage-table th {
  color: var(--seo-stage-muted);
  font-size: 12px;
  font-weight: 750;
}

.seo-stage-table td {
  color: var(--seo-stage-ink);
}

.seo-stage-table small {
  display: block;
  margin-top: 2px;
  color: var(--seo-stage-muted);
  overflow-wrap: anywhere;
}

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

.seo-stage-skill-card {
  background: #fff;
}

.seo-stage-skill-card small {
  display: block;
  margin-top: 3px;
  color: var(--seo-stage-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.seo-stage-note-box {
  display: grid;
  gap: 6px;
  border: 1px solid var(--seo-stage-line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.seo-stage-note-box p {
  margin: 0;
  color: var(--seo-stage-muted);
}

.seo-stage-json-preview {
  max-height: 360px;
  margin: 0;
  overflow: auto;
  border-radius: 8px;
  padding: 12px;
  background: #111827;
  color: #d1fae5;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .seo-stage-layout,
  .seo-stage-workspace-grid,
  .seo-stage-script-grid {
    grid-template-columns: 1fr;
  }

  .seo-stage-rail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .seo-stage-banner,
  .seo-stage-tab-head {
    align-items: stretch;
    flex-direction: column;
  }

  .seo-stage-banner-actions,
  .seo-stage-add-row {
    justify-content: stretch;
  }

  .seo-stage-banner-actions .ui-button,
  .seo-stage-add-row .ui-button {
    width: 100%;
  }

  .seo-stage-rail-list,
  .seo-stage-two-col,
  .seo-stage-skill-grid {
    grid-template-columns: 1fr;
  }

  .seo-stage-panel,
  .seo-stage-banner {
    padding: 14px;
  }
}

.department-focus-hub {
  display: grid;
  gap: 14px;
}

.department-focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.department-focus-card {
  min-height: 118px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.department-focus-card:hover,
.department-focus-card:focus-visible {
  border-color: var(--primary);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  outline: none;
}

.department-focus-icon {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-container-low);
  color: var(--primary);
}

.department-focus-card strong {
  font-size: 15px;
}

.department-focus-card small {
  color: var(--muted);
  line-height: 1.4;
}

.department-tools-panel {
  display: grid;
  gap: 16px;
}

.automation-orchestration-panel {
  display: grid;
  gap: 14px;
}

.automation-orchestration-panel.compact .activity-binding-strip,
.automation-orchestration-panel.compact .activity-run-list {
  display: none;
}

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

.automation-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.activity-binding-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.activity-binding-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
}

.activity-binding-card strong,
.activity-binding-card p,
.activity-run-row p {
  margin: 0;
}

.activity-binding-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.activity-binding-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

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

.activity-run-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
}

.activity-run-row strong,
.activity-run-row small {
  display: block;
}

.activity-run-row small,
.activity-run-note {
  color: var(--muted);
  font-size: 12px;
}

.activity-run-note {
  grid-column: 1 / -1;
}

.wordpress-return-summary {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.wordpress-return-summary span,
.wordpress-return-summary a {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-container);
}

.wordpress-return-summary a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

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

.tool-setup-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
}

.tool-setup-hero h3,
.tool-setup-hero p {
  margin: 0;
}

.tool-setup-hero h3 {
  font-size: 20px;
  line-height: 26px;
}

.tool-setup-hero p:not(.eyebrow) {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.tool-setup-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(86px, 1fr));
  gap: 8px;
}

.tool-setup-stats article {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.tool-setup-stats span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.tool-setup-stats strong {
  color: var(--ink);
  font-size: 20px;
}

.department-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.department-data-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
}

.department-data-card strong,
.department-data-card small {
  display: block;
}

.department-data-card small,
.department-data-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.department-data-card p {
  margin: 0;
}

.tool-console-section {
  display: grid;
  gap: 14px;
}

.tool-console-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-container-lowest);
}

.tool-console-right-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-dropdown {
  min-height: 42px;
  min-width: 210px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.filter-dropdown span {
  white-space: nowrap;
}

.filter-dropdown select {
  flex: 1;
  min-width: 140px;
  min-height: 30px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
}

.tool-search-field {
  min-height: 38px;
  min-width: 260px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
}

.tool-search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  outline: none;
}

.segmented-control {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.segmented-control button {
  min-height: 30px;
  padding: 0 11px;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
}

.segmented-control button.active {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.tool-console-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.tool-console-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-container-lowest);
}

.tool-console-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 14%, transparent);
}

.tool-console-card-head {
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.tool-console-card-head:hover {
  background: transparent;
}

.tool-kind-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-container);
  color: var(--primary);
}

.tool-console-card strong,
.tool-console-card small {
  display: block;
}

.tool-console-card small,
.tool-console-card p,
.tool-console-meta small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.tool-console-card p {
  margin: 0;
}

.tool-console-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.tool-console-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-container-lowest);
}

.tool-console-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.tool-console-table th,
.tool-console-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

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

.tool-console-table tr {
  cursor: pointer;
}

.tool-console-table tr.active,
.tool-console-table tr:hover {
  background: var(--surface-container-low);
}

.tool-console-table td small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.tool-detail-pane {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-container-lowest);
}

.tool-detail-pane.focused {
  min-height: 360px;
}

.tool-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.department-cases-panel {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
}

.department-cases-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.department-cases-head p {
  margin-top: 4px;
  color: var(--muted);
}

.department-workflow-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.department-workflow-step {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
}

.department-workflow-step > span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 12px;
  font-weight: 800;
}

.department-workflow-step p {
  color: var(--muted);
  font-size: 13px;
}

.department-home-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.department-home-head h3,
.visibility-card h3,
.operating-rule-card strong,
.runtime-card strong {
  font-size: 15px;
  line-height: 1.25;
}

.department-home-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.department-home-row:hover {
  border-color: var(--primary);
  background: var(--surface-container);
}

.department-home-row strong,
.department-home-row small {
  display: block;
}

.department-home-row small,
.department-home-empty,
.runtime-card p,
.operating-rule-card p,
.visibility-card p {
  color: var(--muted);
}

.department-home-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.department-home-empty {
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.runtime-card span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.visibility-card.compact {
  margin-bottom: 10px;
  background: var(--surface-container-lowest);
}

.control-plane-grid,
.skill-scope-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.skill-scope-grid.detailed {
  grid-template-columns: repeat(2, minmax(280px, 1fr));
}

.control-plane-card,
.skill-scope-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-container-low);
}

.control-plane-card ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.skill-scope-card > span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.skill-scope-card p {
  color: var(--muted);
}

.skill-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skill-chip {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.skill-chip.locked {
  border: 1px solid var(--line);
}

.workspace-profile-panel,
.scoped-skills-panel {
  display: grid;
  gap: 14px;
}

.resolution-order {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.resolution-order span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-container);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.resolution-order strong {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary-container);
  color: var(--on-primary-container);
}

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

.skill-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.skill-list-row p {
  margin-top: 3px;
  color: var(--muted);
}

.platform-admin-view,
.email-alpha-view {
  display: grid;
  gap: 16px;
}

.platform-catalog-grid {
  grid-template-columns: repeat(3, minmax(240px, 1fr));
}

.create-department-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.create-department-wide,
.create-department-actions {
  grid-column: 1 / -1;
}

.create-department-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.department-wizard {
  display: grid;
  gap: 16px;
}

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

.wizard-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 2px 8px;
  min-height: 76px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
  color: var(--muted);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.wizard-step strong,
.wizard-step small {
  display: block;
  color: inherit;
}

.wizard-step small {
  grid-column: 2;
  font-size: 12px;
}

.wizard-step-number {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-container);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.wizard-step.active {
  border-color: var(--primary);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.wizard-step.active .wizard-step-number {
  background: var(--primary);
  color: var(--primary-foreground);
}

.wizard-step.complete {
  border-color: var(--ok);
}

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

.wizard-grid .wide {
  grid-column: 1 / -1;
}

.wizard-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.wizard-summary-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
}

.wizard-summary-card p {
  margin-top: 4px;
}

.wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

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

.installed-department-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
}

.installed-department-row strong,
.installed-department-row small {
  display: block;
}

.installed-department-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.admin-table-manager .ui-card-content {
  display: grid;
  gap: 12px;
}

.admin-data-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
}

.admin-data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.admin-data-table th,
.admin-data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 13px;
  vertical-align: top;
}

.admin-data-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  background: var(--surface-container-low);
}

.admin-data-table tbody tr {
  cursor: pointer;
}

.admin-data-table tbody tr:hover,
.admin-data-table tbody tr.selected {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.admin-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.staff-template-admin .ui-card-content {
  display: grid;
  gap: 14px;
}

.staff-template-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.p4-library-layout {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.p4-library-single {
  display: grid;
  gap: 14px;
}

.catalog-json-editor {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-low);
}

.catalog-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.catalog-json-editor textarea {
  width: 100%;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
}

.schema-editor {
  background: var(--surface-container-lowest);
}

.schema-editor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.schema-editor-tab {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-low);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.schema-editor-tab.active {
  border-color: var(--primary);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.schema-form {
  display: grid;
  gap: 14px;
}

.schema-form-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-low);
}

.schema-form-section h4 {
  margin: 0;
  font-size: 13px;
}

.schema-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  align-items: start;
}

.schema-field-wide {
  grid-column: 1 / -1;
}

.schema-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
  font-size: 13px;
}

.schema-checkbox input {
  width: 16px;
  height: 16px;
}

.schema-checkbox .field-help {
  margin-left: auto;
}

.schema-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.schema-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.schema-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
}

.schema-chip button {
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  cursor: pointer;
}

.schema-chip small {
  max-width: 220px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.schema-chip-remove {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--danger, #b3261e) !important;
}

.schema-child-table {
  display: grid;
  gap: 10px;
}

.schema-child-head,
.schema-child-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.schema-child-head h4 {
  margin: 0;
}

.schema-child-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
}

.field-help {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

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

.catalog-reference-row {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.catalog-reference-row:hover {
  border-color: var(--primary);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.catalog-reference-row strong {
  font-size: 13px;
}

.catalog-reference-row small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.catalog-reference-row:hover small,
.catalog-reference-row:hover p {
  color: color-mix(in srgb, var(--on-primary-container) 72%, transparent);
}

.catalog-reference-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.staff-template-list,
.staff-template-detail,
.p4-library-list,
.p4-library-detail {
  min-width: 0;
}

.staff-template-list,
.p4-library-list {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 12px;
}

.staff-template-cards,
.p4-library-cards {
  display: grid;
  gap: 8px;
  max-height: 720px;
  overflow: auto;
  padding-right: 2px;
}

.staff-template-card,
.p4-library-card {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.staff-template-card.active,
.p4-library-card.active {
  border-color: var(--primary);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.staff-card-topline,
.staff-card-footer,
.staff-detail-head,
.staff-detail-badges,
.staff-tool-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.staff-card-topline strong {
  min-width: 0;
  font-size: 14px;
}

.staff-template-card small,
.p4-library-card small,
.staff-card-meta,
.staff-card-footer {
  color: var(--muted);
  font-size: 12px;
}

.staff-template-card.active small,
.p4-library-card.active small,
.staff-template-card.active .staff-card-meta,
.p4-library-card.active .staff-card-meta,
.staff-template-card.active .staff-card-footer {
  color: color-mix(in srgb, var(--on-primary-container) 72%, transparent);
}

.staff-template-detail,
.p4-library-detail {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
}

.staff-detail-head {
  align-items: flex-start;
}

.staff-detail-head h3 {
  margin: 0;
  font-size: 22px;
  line-height: 28px;
}

.staff-detail-head p:not(.eyebrow) {
  margin-top: 4px;
  color: var(--muted);
}

.staff-detail-badges {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.staff-detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.staff-detail-tab {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.staff-detail-tab.active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

.staff-detail-body {
  min-height: 360px;
}

.staff-tab-grid,
.staff-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}

.staff-wide {
  grid-column: 1 / -1;
}

.staff-info-panel,
.staff-impact-panel,
.instruction-layer-row,
.staff-tool-row {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.staff-info-panel h4,
.staff-impact-panel h4,
.staff-contract-panel h4 {
  margin: 0 0 8px;
  font-size: 14px;
}

.staff-info-panel ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
}

.staff-info-panel p,
.staff-impact-panel p,
.instruction-layer-row p,
.staff-tool-row p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

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

.staff-tool-row {
  align-items: flex-start;
  flex-wrap: wrap;
}

.staff-tool-row > div {
  min-width: min(260px, 100%);
  display: grid;
  gap: 3px;
}

.staff-tool-row small {
  color: var(--muted);
}

.instruction-layer-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.instruction-layer-row > div {
  min-width: 0;
}

.manifest-preview.compact {
  max-height: 430px;
  margin-top: 0;
}

.p4-readiness-panel {
  display: grid;
  gap: 16px;
}

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

.p4-readiness-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
}

.p4-readiness-row.needs-attention {
  border-color: var(--md-sys-color-warning);
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}

.p4-readiness-row strong,
.p4-readiness-row small {
  display: block;
}

.p4-readiness-row small,
.p4-readiness-row p {
  color: var(--muted);
  font-size: 13px;
}

.scenario-explorer-panel {
  display: grid;
  gap: 14px;
}

.department-context-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.department-context-bar h2,
.department-context-bar p {
  margin: 0;
}

.department-context-bar h2 {
  font-size: 20px;
  line-height: 26px;
}

.department-context-bar small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.department-context-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.department-context-actions select {
  min-width: min(360px, 48vw);
}

.scenario-summary-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.scenario-summary-band h2,
.scenario-summary-band p {
  margin: 0;
}

.scenario-summary-band h2 {
  font-size: 24px;
}

.scenario-summary-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 8px;
}

.scenario-summary-counts span {
  display: grid;
  gap: 2px;
  min-height: 68px;
  align-content: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.scenario-summary-counts strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.scenario-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 14px;
  align-items: start;
}

.scenario-main,
.scenario-stage-map,
.scenario-detail-panel {
  display: grid;
  gap: 12px;
}

.scenario-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.scenario-stage-card,
.scenario-node-card {
  width: 100%;
  min-height: 108px;
  display: grid;
  gap: 8px;
  text-align: left;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.scenario-stage-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.scenario-stage-card .ui-badge {
  grid-column: 2;
  width: fit-content;
}

.scenario-stage-card:hover,
.scenario-node-card:hover,
.scenario-stage-card.active,
.scenario-node-card.active {
  border-color: var(--primary);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.scenario-stage-number {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-container-low);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.scenario-stage-card strong,
.scenario-node-card strong {
  display: block;
  line-height: 1.2;
}

.scenario-stage-card small,
.scenario-node-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.scenario-stage-heading,
.scenario-detail-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.scenario-stage-heading h3,
.scenario-detail-header h3 {
  margin: 0;
}

.scenario-connected-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.scenario-node-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.scenario-requirements,
.scenario-detail-panel {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.scenario-requirements {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scenario-requirements strong {
  width: 100%;
}

.scenario-requirements span {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  font-size: 12px;
  font-weight: 700;
}

.scenario-requirements.ready span {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

.scenario-detail-section {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.scenario-detail-section h4,
.scenario-detail-section p {
  margin: 0;
}

.scenario-detail-section h4 {
  font-size: 13px;
}

.scenario-detail-section p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.workflow-canvas-shell {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

body.workflow-builder-mode .workspace {
  gap: 0;
  padding-top: 0;
}

body.workflow-builder-mode .topbar,
body.workflow-builder-mode .status-line {
  display: none;
}

.workflow-shell-active {
  margin: -1px 0 0;
}

.workflow-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 12px 16px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
}

.workflow-title-block {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.workflow-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.workflow-title-row span {
  color: var(--muted);
  font-weight: 750;
}

.workflow-header h2,
.workflow-header p {
  margin: 0;
}

.workflow-header h2 {
  font-size: 17px;
  line-height: 1.25;
}

.workflow-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.workflow-builder-tabs {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  min-height: 42px;
  align-items: end;
}

.workflow-builder-tabs button {
  position: relative;
  min-height: 40px;
  border: 0;
  padding: 0 0 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.workflow-builder-tabs button.active {
  color: var(--primary);
  font-weight: 800;
}

.workflow-builder-tabs button.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--primary);
}

.workflow-layout {
  display: grid;
  grid-template-columns: minmax(670px, 1fr) minmax(330px, 360px);
  gap: 0;
  align-items: start;
}

.workflow-canvas {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  padding: 14px;
  border: 0;
  border-radius: 0;
  border-right: 1px solid var(--line);
  background-color: var(--surface-container-lowest);
  background-image: radial-gradient(color-mix(in srgb, var(--muted) 24%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
}

.workflow-canvas-topline {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.workflow-quick-jump {
  display: grid;
  grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.workflow-quick-jump label {
  min-height: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.workflow-quick-jump input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.workflow-quick-jump > div {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.workflow-quick-jump button {
  min-height: 32px;
  flex: 0 0 auto;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.workflow-quick-jump button:hover,
.workflow-quick-jump button.active {
  border-color: var(--primary);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.workflow-toolbar {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.workflow-toolbar.secondary {
  margin-left: 8px;
}

.workflow-toolbar button {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.workflow-toolbar button:hover {
  background: var(--surface-container-low);
}

.workflow-toolbar span {
  padding: 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.workflow-legend {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  box-shadow: var(--shadow-sm);
}

.workflow-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.workflow-legend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.workflow-legend i.ready {
  background: var(--ok);
}

.workflow-legend i.warn {
  background: var(--warn);
}

.workflow-legend i.danger {
  background: var(--danger);
}

.workflow-legend i.neutral {
  background: var(--muted);
}

.workflow-manager-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin: 0 auto 16px;
}

.workflow-person-chip {
  display: grid;
  gap: 6px;
  min-width: 210px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.workflow-person-chip:hover {
  border-color: var(--primary);
  background: var(--md-sys-color-primary-container);
}

.workflow-person-chip small {
  color: var(--muted);
  font-size: 12px;
}

.workflow-arrow {
  color: var(--muted);
  font-weight: 850;
}

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

.workflow-node-condition {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workflow-stage-node {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.workflow-stage-node::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 12px;
  border-top: 2px solid var(--ink);
  opacity: 0.68;
}

.workflow-stage-node:nth-child(3n)::after,
.workflow-stage-node:last-child::after {
  display: none;
}

.workflow-stage-node.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 24%, transparent);
}

.workflow-stage-node p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.workflow-node-staff {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 2px 0 5px;
  border-bottom: 1px solid var(--line);
}

.workflow-node-staff .staff-avatar {
  width: 32px;
  height: 32px;
}

.workflow-node-staff span {
  display: grid;
  min-width: 0;
}

.workflow-node-staff strong {
  font-size: 12px;
}

.workflow-node-staff small {
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-node-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.workflow-node-title > span {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-container-low);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.workflow-stage-node.active .workflow-node-title > span {
  background: var(--primary);
  color: var(--primary-foreground);
}

.workflow-node-sections {
  display: grid;
  gap: 6px;
}

.workflow-section-button {
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(72px, 0.58fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.workflow-section-button:hover,
.workflow-section-button.active {
  border-top-color: var(--line);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.workflow-section-button span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.workflow-section-button strong {
  min-width: 0;
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-section-button small {
  color: var(--muted);
  font-size: 0;
}

.workflow-section-button small::after {
  content: ">";
  font-size: 13px;
  font-weight: 850;
}

.workflow-detail-panel {
  position: sticky;
  top: 0;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 120px);
  overflow: auto;
  padding: 14px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.workflow-detail-panel::before {
  content: "";
  position: sticky;
  top: -14px;
  display: block;
  height: 0;
}

.workflow-detail-head {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.workflow-detail-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workflow-detail-head h3,
.workflow-detail-head p {
  margin: 0;
}

.workflow-detail-head h3 {
  font-size: 20px;
}

.workflow-detail-head code {
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workflow-active-section {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-container-low);
}

.workflow-active-section + .workflow-inspector-stack {
  opacity: 0.96;
}

.workflow-active-section button {
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.workflow-detail-stack,
.workflow-detail-list {
  display: grid;
  gap: 10px;
}

.workflow-detail-list span {
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.workflow-inspector-stack {
  display: grid;
  gap: 8px;
}

.workflow-inspector-section {
  width: 100%;
  min-height: 74px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: start;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.workflow-inspector-section:hover,
.workflow-inspector-section.active {
  border-color: var(--primary);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.workflow-inspector-icon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-container-low);
}

.workflow-inspector-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.workflow-inspector-body strong {
  font-size: 13px;
}

.workflow-inspector-body small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.workflow-inspector-chevron {
  color: var(--muted);
  font-size: 16px;
  font-weight: 850;
}

.workflow-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workflow-minimap {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: grid;
  gap: 8px;
  width: 188px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-sm);
}

.workflow-minimap strong {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.workflow-minimap div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.workflow-minimap button {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface-container-low);
  cursor: pointer;
}

.workflow-minimap button:nth-child(odd) {
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-container-low));
}

.workflow-minimap button.active {
  border-color: var(--primary);
  background: var(--primary);
}

@media (max-width: 1050px) {
  .scenario-layout,
  .scenario-summary-band,
  .workflow-layout,
  .workflow-header {
    grid-template-columns: 1fr;
  }

  .workflow-detail-panel {
    position: static;
    max-height: none;
  }

  .workflow-canvas {
    overflow: auto;
  }
}

@media (max-width: 720px) {
  .scenario-summary-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scenario-stage-card {
    grid-template-columns: 1fr;
  }

  .scenario-stage-card .ui-badge {
    grid-column: auto;
  }

  .workflow-stage-track {
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .workflow-node-sections {
    grid-template-columns: 1fr;
  }

  .workflow-manager-row {
    align-items: stretch;
    flex-direction: column;
  }
}

.p4-readiness-row.needs-attention small,
.p4-readiness-row.needs-attention p {
  color: color-mix(in srgb, var(--md-sys-color-on-warning-container) 72%, transparent);
}

.p4-readiness-row p,
.p4-readiness-row .overview-meta-row {
  grid-column: 1 / -1;
  margin: 0;
}

.manifest-preview {
  max-height: 520px;
  overflow: auto;
  margin: 14px 0 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 980px) {
  .staff-template-layout,
  .p4-library-layout {
    grid-template-columns: 1fr;
  }

  .staff-template-list,
  .p4-library-list {
    position: static;
  }

  .staff-template-cards,
  .p4-library-cards {
    max-height: none;
  }

  .staff-tab-grid,
  .staff-info-grid {
    grid-template-columns: 1fr;
  }
}

.workspace-profile-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}

.workspace-profile-form .wide {
  grid-column: 1 / -1;
}

.runtime-section-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.runtime-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
}

.runtime-section-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-container-low);
}

.runtime-section-card p {
  color: var(--muted);
}

.email-alpha-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 16px;
  align-items: start;
}

.email-side-stack {
  display: grid;
  gap: 16px;
}

.email-row-preview.selected {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.email-approval-screen {
  position: sticky;
  top: 84px;
}

.email-body-preview {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
}

.email-body-preview span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.email-body-preview pre {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--on-surface);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
}

.email-gate-grid,
.email-evidence-grid {
  display: grid;
  gap: 10px;
}

.email-gate-grid {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.email-gate-card,
.email-evidence-grid article {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.email-gate-card.ok {
  border-color: #74a36b;
}

.email-gate-card.blocked {
  border-color: #c34a4a;
  background: #fff5f5;
}

.email-gate-card p,
.email-evidence-grid p,
.email-evidence-grid small {
  color: var(--muted);
}

.email-evidence-grid small {
  display: block;
  word-break: break-word;
}

.danger-text {
  color: #9f2d2d !important;
}

.project-workflow-card {
  margin-bottom: 16px;
}

.project-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 12px;
}

.project-plan-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-container-low);
}

.project-plan-card.warn {
  border-color: #d49a00;
  background: #fffaf0;
}

.project-plan-card.danger {
  border-color: #c34a4a;
  background: #fff5f5;
}

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

.project-step-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(150px, auto);
  align-items: start;
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.project-step-row.warn {
  border-color: #d49a00;
}

.project-step-row.danger {
  border-color: #c34a4a;
}

.project-step-index {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-size: 12px;
  font-weight: 800;
}

.project-step-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.project-step-main small,
.project-step-main p {
  color: var(--muted);
}

.project-step-titleline,
.project-step-actions,
.project-step-owner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.project-step-titleline {
  justify-content: space-between;
}

.project-step-output {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
}

.project-step-output span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.project-step-output.safety {
  background: var(--surface-container-low);
}

.project-step-blocker {
  padding: 8px;
  border-left: 3px solid #d49a00;
  border-radius: var(--radius-sm);
  background: #fffaf0;
}

.project-step-owner {
  justify-content: flex-end;
  align-content: start;
}

.project-step-owner small {
  width: 100%;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
  word-break: break-word;
}

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

.readiness-blocker-row {
  display: grid;
  grid-template-columns: auto minmax(0, 0.65fr) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.readiness-blocker-row span,
.readiness-blocker-row small {
  min-width: 0;
}

.readiness-blocker-row small {
  color: var(--muted);
}

.worker-command-preview {
  max-height: 140px;
  margin-top: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.project-output-dialog {
  width: min(920px, calc(100vw - 32px));
}

.project-output-dialog .designer-summary-strip {
  margin-bottom: 12px;
}

@media (max-width: 1100px) {
  .overview-info-grid,
  .runtime-grid,
  .operating-rule-grid,
  .operating-model-grid,
  .control-plane-grid,
  .skill-scope-grid,
  .skill-scope-grid.detailed,
  .platform-catalog-grid,
  .runtime-section-grid,
  .email-alpha-grid,
  .project-plan-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 760px) {
  .department-home-grid,
  .visibility-grid,
  .overview-info-grid,
  .runtime-grid,
  .operating-rule-grid,
  .operating-model-grid,
  .control-plane-grid,
  .skill-scope-grid,
  .skill-scope-grid.detailed,
  .platform-catalog-grid,
  .runtime-section-grid,
  .email-alpha-grid,
  .email-gate-grid,
  .project-plan-grid,
  .workspace-profile-form {
    grid-template-columns: 1fr;
  }

  .email-approval-screen {
    position: static;
  }
}

.overview-narrative {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
}

.overview-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.overview-meta-row span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-container);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.overview-step-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}

.overview-step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-container-low);
}

.overview-step > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-weight: 900;
}

.overview-step h3 {
  margin-bottom: 4px;
}

.overview-inline-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.overview-org-mini {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.overview-org-line {
  width: 2px;
  height: 28px;
  background: var(--line);
}

.overview-org-staff {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
  padding-top: 16px;
  border-top: 2px solid var(--line);
}

.overview-org-node {
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-container-low);
}

.overview-org-node.owner,
.overview-org-node.manager {
  min-width: min(100%, 520px);
  background: var(--surface);
}

.overview-org-node span:not(.staff-avatar):not(.avatar-initials) {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.wiki-page {
  display: grid;
  gap: 16px;
}

.wiki-hero {
  min-height: auto;
}

.wiki-hero .ui-card-header {
  align-items: center;
  border-bottom: 0;
}

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

.wiki-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
  gap: 16px;
  align-items: start;
}

.wiki-panel {
  min-height: 100%;
}

.wiki-menu-panel,
.wiki-process {
  grid-row: span 2;
}

.wiki-steps {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.wiki-steps li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-container-low);
}

.wiki-steps li > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-weight: 900;
}

.wiki-steps h3,
.wiki-menu-list h3 {
  margin-bottom: 4px;
}

.wiki-steps p,
.wiki-menu-list p,
.wiki-menu-list span,
.wiki-bullets,
.wiki-note,
.wiki-routine p,
.wiki-callout p {
  color: var(--muted);
}

.wiki-example {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--surface-container-low);
  border: 1px solid var(--line);
}

.wiki-example > p {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.wiki-example blockquote {
  margin: 0;
  padding-left: 14px;
  border-left: 4px solid var(--primary);
  color: var(--ink);
  font-weight: 700;
}

.wiki-note,
.wiki-callout {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.wiki-callout p {
  color: var(--on-primary-container);
  margin-top: 4px;
}

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

.wiki-menu-list article {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-container-low);
}

.wiki-bullets {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.wiki-routine {
  display: grid;
  gap: 8px;
  counter-reset: routine;
}

.wiki-routine p {
  position: relative;
  margin: 0;
  padding: 10px 10px 10px 42px;
  border-radius: var(--radius);
  background: var(--surface-container-low);
}

.wiki-routine p::before {
  counter-increment: routine;
  content: counter(routine);
  position: absolute;
  left: 10px;
  top: 9px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  padding: 14px;
}

.kpi-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface);
  box-shadow: 0 1px 1px rgba(21, 25, 31, 0.03);
}

.kpi-card.ok {
  border-left-color: var(--ok);
}

.kpi-card.warn {
  border-left-color: var(--warn);
}

.kpi-card.danger {
  border-left-color: var(--danger);
}

.kpi-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.kpi-card-head p,
.kpi-foot {
  color: var(--muted);
  font-size: 12px;
}

.kpi-card-head strong {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--ink);
}

.progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-container-high);
}

.progress-track span {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--blue));
}

.kpi-card.ok .progress-track span {
  background: var(--ok);
}

.kpi-card.warn .progress-track span {
  background: var(--warn);
}

.kpi-card.danger .progress-track span {
  background: var(--danger);
}

.kpi-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.kpi-score.ok {
  background: var(--ok-container);
  color: var(--ok);
}

.kpi-score.warn {
  background: var(--warn-container);
  color: var(--warn);
}

.kpi-score.danger {
  background: var(--danger-container);
  color: var(--danger);
}

.operating-report {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.operating-report.embedded {
  gap: 14px;
}

.department-report-scope {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.department-report-scope h2,
.department-report-scope p {
  margin: 0;
}

.department-report-scope h2 {
  font-size: 21px;
  line-height: 28px;
}

.department-report-scope > div:first-child p:not(.eyebrow) {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.department-report-scope-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.department-report-scope-grid article {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-container-low);
}

.department-report-scope-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.department-report-scope-grid strong {
  color: var(--ink);
  font-size: 15px;
}

.report-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  padding: 24px;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  background: #fff;
}

.report-hero > *,
.report-period-control > *,
.report-command-tile > *,
.report-kpi-card > *,
.report-panel > *,
.blocker-card > * {
  min-width: 0;
}

.report-hero.warn {
  background: linear-gradient(135deg, #fff 0%, var(--warn-container) 100%);
}

.report-hero.danger {
  background: linear-gradient(135deg, #fff 0%, var(--danger-container) 100%);
}

.report-hero h1 {
  margin: 2px 0 8px;
  color: #1f1f1f;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.04;
  font-weight: 650;
  letter-spacing: 0;
}

.report-hero-subtitle {
  max-width: 820px;
  margin: 0;
  color: #444746;
  font-size: 15px;
  line-height: 1.55;
}

.report-executive-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 8px;
  max-width: 960px;
  margin: 14px 0 0;
}

.report-executive-summary article {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--surface-container-low);
  color: #1f1f1f;
  font-size: 14px;
  line-height: 1.55;
}

.report-executive-summary strong {
  color: #444746;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.report-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.report-hero-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-container);
  color: #444746;
  font-size: 12px;
  font-weight: 600;
}

.report-hero-status {
  display: grid;
  justify-items: end;
  gap: 12px;
}

.report-period-control {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 16px;
  align-items: end;
  padding: 16px;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  background: #fff;
}

.report-period-control h2 {
  margin: 0;
  color: #1f1f1f;
  font-size: 20px;
  font-weight: 600;
}

.report-period-control p {
  margin: 4px 0 0;
  color: #5f6368;
  font-size: 13px;
}

.period-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: end;
}

.period-actions .ui-field {
  width: 118px;
}

.report-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #dadce0;
  border-radius: 999px;
  color: #444746;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.report-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.period-actions .ui-field > span,
.period-custom-range .ui-field > span {
  font-size: 11px;
}

.period-custom-range {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  grid-column: 1 / -1;
}

.report-command-section,
.report-detail-area {
  display: grid;
  gap: 12px;
}

.report-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
}

.report-section-head h2 {
  margin: 0;
  color: #1f1f1f;
  font-size: 22px;
  font-weight: 600;
}

.report-section-head p {
  margin: 4px 0 0;
  color: #5f6368;
  font-size: 13px;
}

.report-command-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(178px, 1fr));
  gap: 12px;
}

.report-command-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 104px;
  padding: 16px;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  background: #fff;
  color: #1f1f1f;
  text-align: left;
  cursor: pointer;
}

.report-command-tile:hover,
.report-command-tile.active {
  border-color: var(--primary);
  background: var(--primary-container);
}

.report-command-tile.warn {
  background: linear-gradient(180deg, #fff 0%, var(--warn-container) 170%);
}

.report-command-tile.danger {
  background: linear-gradient(180deg, #fff 0%, var(--danger-container) 170%);
}

.report-command-tile.ok {
  background: linear-gradient(180deg, #fff 0%, var(--ok-container) 170%);
}

.report-command-tile.active.warn,
.report-command-tile.active.danger,
.report-command-tile.active.ok {
  border-color: var(--primary);
}

.report-command-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--surface-container);
  color: var(--primary);
}

.report-command-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.report-command-copy strong {
  font-size: 16px;
  font-weight: 650;
}

.report-command-copy small {
  color: #5f6368;
  font-size: 12px;
  line-height: 1.35;
}

.report-command-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff;
  color: #1f1f1f;
  font-weight: 700;
}

.report-command-visual {
  grid-column: 1 / -1;
  min-height: 38px;
}

.report-donut {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  color: var(--primary);
}

.report-donut svg {
  width: 58px;
  height: 58px;
  transform: rotate(-90deg);
}

.report-donut circle {
  fill: none;
  stroke-width: 6;
}

.report-donut .donut-track {
  stroke: rgba(60, 64, 67, 0.16);
}

.report-donut .donut-value {
  stroke: currentColor;
  stroke-linecap: round;
}

.report-donut strong {
  position: absolute;
  color: #1f1f1f;
  font-size: 13px;
  font-weight: 750;
}

.report-donut.ok {
  color: var(--ok);
}

.report-donut.warn {
  color: var(--warn);
}

.report-donut.danger {
  color: var(--danger);
}

.report-trend-chart {
  width: 100%;
  max-width: 120px;
  height: 38px;
  color: var(--primary);
}

.report-trend-chart polyline {
  stroke: currentColor;
}

.report-trend-chart circle {
  fill: currentColor;
}

.report-trend-chart.ok {
  color: var(--ok);
}

.report-trend-chart.warn {
  color: var(--warn);
}

.report-trend-chart.danger {
  color: var(--danger);
}

.report-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
}

.report-kpi-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  min-height: 118px;
  padding: 16px;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  background: #fff;
}

.report-kpi-card.ok {
  background: linear-gradient(180deg, #fff 0%, var(--ok-container) 160%);
}

.report-kpi-card.warn {
  background: linear-gradient(180deg, #fff 0%, var(--warn-container) 160%);
}

.report-kpi-card.danger {
  background: linear-gradient(180deg, #fff 0%, var(--danger-container) 160%);
}

.report-kpi-value {
  display: block;
  color: #1f1f1f;
  font-size: 34px;
  line-height: 1;
  font-weight: 650;
}

.report-kpi-card p,
.report-kpi-card small,
.report-kpi-side span {
  margin: 6px 0 0;
  color: #5f6368;
  font-size: 12px;
  font-weight: 600;
}

.report-kpi-card small {
  display: inline-flex;
  margin-top: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-container);
  color: #444746;
}

.report-kpi-side {
  display: grid;
  justify-items: end;
  gap: 8px;
  max-width: 120px;
  text-align: right;
}

.report-sparkline {
  display: inline-flex;
  align-items: end;
  gap: 3px;
  width: 66px;
  height: 30px;
}

.report-sparkline span {
  flex: 1;
  min-width: 4px;
  border-radius: 999px 999px 0 0;
  background: color-mix(in srgb, var(--primary) 72%, white);
}

.report-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.2fr) minmax(340px, 0.8fr);
  gap: 16px;
  align-items: start;
}

.report-panel {
  min-width: 0;
}

.pipeline-overview,
.live-activity-panel,
.live-staff-panel,
.blockers-panel,
.followup-report-panel,
.email-safety-panel,
.system-health-panel,
.learning-panel,
.daily-targets-panel {
  overflow: hidden;
}

.pipeline-bars,
.activity-stream,
.agent-status-list,
.blocker-list,
.followup-timeline,
.learning-list,
.mini-list,
.target-list {
  display: grid;
  gap: 10px;
}

.target-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  background: #fff;
}

.target-card.ok {
  background: var(--ok-container);
}

.target-card.warn {
  background: var(--warn-container);
}

.target-card.danger {
  background: var(--danger-container);
}

.target-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.target-summary,
.system-health-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.target-summary article,
.system-health-summary article,
.report-nested-section {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  background: var(--surface-container-low);
}

.target-summary strong,
.system-health-summary strong {
  color: #1f1f1f;
  font-size: 14px;
  line-height: 1.45;
}

.target-summary span,
.system-health-summary span {
  color: #5f6368;
  font-size: 12px;
}

.report-stacked-bar {
  display: flex;
  width: 100%;
  height: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(60, 64, 67, 0.12);
  margin-bottom: 12px;
}

.report-stacked-bar span {
  display: block;
  min-width: 4px;
  background: var(--primary-container);
}

.report-stacked-bar span.ok {
  background: var(--ok);
}

.report-stacked-bar span.warn {
  background: var(--warn);
}

.report-stacked-bar span.danger {
  background: var(--danger);
}

.report-stacked-bar .empty {
  background: rgba(60, 64, 67, 0.14);
}

.deadline-risk-chart {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 12px;
}

.mini-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.mini-panel-head strong {
  color: #1f1f1f;
  font-size: 14px;
  font-weight: 700;
}

.mini-panel-head span {
  color: #5f6368;
  font-size: 12px;
}

.deadline-risk-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(100px, 1.2fr) auto;
  gap: 10px;
  align-items: center;
}

.deadline-risk-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(60, 64, 67, 0.14);
}

.deadline-risk-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.deadline-risk-row.warn .deadline-risk-track span {
  background: var(--warn);
}

.deadline-risk-row.danger .deadline-risk-track span {
  background: var(--danger);
}

.pipeline-bar-row {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  background: var(--surface-container-low);
}

.pipeline-bar-row.warn {
  background: var(--warn-container);
}

.pipeline-bar-row.danger {
  background: var(--danger-container);
}

.pipeline-bar-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #1f1f1f;
}

.pipeline-bar-label span,
.pipeline-bar-row p {
  margin: 0;
  color: #5f6368;
  font-size: 12px;
}

.pipeline-app-list {
  display: grid;
  gap: 6px;
}

.pipeline-app-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  padding-top: 6px;
  border-top: 1px solid rgba(60, 64, 67, 0.12);
}

.pipeline-app-row > span {
  color: #5f6368;
  font-size: 12px;
  white-space: nowrap;
}

.pipeline-bar-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(60, 64, 67, 0.14);
}

.pipeline-bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.activity-stream-item {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  background: #fff;
}

.activity-stream-item.warn {
  background: var(--warn-container);
}

.activity-stream-item.danger {
  background: var(--danger-container);
}

.activity-time {
  display: grid;
  gap: 4px;
  color: #5f6368;
  font-size: 12px;
}

.activity-stream-item h3,
.agent-status-card h3,
.blocker-card h3,
.followup-timeline-item h3,
.learning-card h3 {
  margin: 0;
  color: #1f1f1f;
  font-size: 15px;
  font-weight: 650;
}

.activity-stream-item p,
.agent-current-work,
.followup-timeline-item p {
  margin: 4px 0 0;
  color: #444746;
  font-size: 13px;
  line-height: 1.45;
}

.agent-status-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  background: #fff;
}

.staff-workload-chart {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 12px;
}

.staff-workload-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(160px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.staff-workload-track {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(60, 64, 67, 0.12);
}

.staff-workload-track span {
  display: block;
  min-width: 0;
}

.staff-workload-track .tasks {
  background: var(--primary);
}

.staff-workload-track .followups {
  background: color-mix(in srgb, var(--primary) 46%, white);
}

.staff-workload-track .late {
  background: var(--danger);
}

.staff-workload-count {
  color: #5f6368;
  font-size: 12px;
  white-space: nowrap;
}

.agent-status-card.warn {
  background: var(--warn-container);
}

.agent-status-card.danger {
  background: var(--danger-container);
}

.agent-status-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.agent-status-head p {
  margin: 2px 0 0;
  color: #5f6368;
  font-size: 12px;
}

.agent-status-meta,
.report-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.report-panel-actions {
  margin-top: 4px;
}

.blocker-card,
.learning-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  background: #fff;
}

.blocker-card.warn {
  background: var(--warn-container);
}

.blocker-card.danger {
  background: var(--danger-container);
}

.followup-timeline {
  position: relative;
}

.followup-timeline-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  position: relative;
  padding: 8px 0 12px;
}

.followup-timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 24px;
  bottom: -2px;
  width: 2px;
  background: #e8eaed;
}

.followup-timeline-item.danger .timeline-dot {
  background: var(--danger);
}

.followup-ref {
  margin-top: 8px;
}

.system-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 10px;
}

.system-health-grid.compact {
  grid-template-columns: repeat(4, minmax(90px, 1fr));
}

.system-health-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.activity-stream.compact .activity-stream-item {
  grid-template-columns: 96px minmax(0, 1fr);
}

.learning-list.compact .learning-card {
  background: #fff;
}

.system-health-card {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-height: 76px;
  padding: 12px;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  background: #fff;
}

.system-health-card.ok {
  background: var(--ok-container);
}

.system-health-card.warn {
  background: var(--warn-container);
}

.system-health-card.danger {
  background: var(--danger-container);
}

.system-health-card strong {
  display: block;
  color: #1f1f1f;
  font-size: 18px;
  font-weight: 650;
}

.system-health-card span,
.mini-row span {
  color: #5f6368;
  font-size: 12px;
  line-height: 1.35;
}

.mini-row {
  display: grid;
  gap: 3px;
  padding: 10px 0;
  border-top: 1px solid #e8eaed;
}

.mini-row:first-child {
  border-top: 0;
}

.timeline {
  display: grid;
  gap: 0;
  padding: 12px 14px 14px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  position: relative;
  padding: 8px 0 12px;
}

.timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 24px;
  bottom: -2px;
  width: 2px;
  background: var(--line);
}

.timeline-dot {
  width: 14px;
  height: 14px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--blue);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  z-index: 1;
}

.timeline-item.ok .timeline-dot {
  background: var(--ok);
}

.timeline-item.warn .timeline-dot {
  background: var(--warn);
}

.timeline-item.danger .timeline-dot {
  background: var(--danger);
}

.timeline-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.timeline-head span {
  font-weight: 800;
  color: var(--primary);
}

.timeline-item h3 {
  margin-top: 2px;
}

.timeline-item p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.autopilot-panel {
  margin-bottom: 16px;
}

.autopilot-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
  gap: 12px;
  padding: 14px;
}

.autopilot-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.autopilot-card.ok {
  border-left: 4px solid var(--ok);
}

.autopilot-card.warn {
  border-left: 4px solid var(--warn);
}

.autopilot-card.danger {
  border-left: 4px solid var(--danger);
}

.layout {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.layout.two {
  grid-template-columns: minmax(360px, 0.9fr) minmax(560px, 1.1fr);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 180px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.panel:hover {
  border-color: color-mix(in srgb, var(--primary) 12%, var(--line));
}

.pipeline-panel {
  margin-bottom: 14px;
}

.staff-flow-panel {
  margin-bottom: 16px;
}

.staff-flow {
  display: flex;
  gap: 8px;
  align-items: stretch;
  padding: 14px;
  overflow-x: auto;
}

.flow-node {
  min-width: 190px;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface);
  box-shadow: 0 1px 1px rgba(21, 25, 31, 0.03);
}

.flow-node.ok {
  border-top-color: var(--ok);
}

.flow-node.warn {
  border-top-color: var(--warn);
}

.flow-node.danger {
  border-top-color: var(--danger);
}

.flow-stage {
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.flow-person {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.flow-person p,
.flow-work,
.flow-meta {
  color: var(--muted);
  font-size: 12px;
}

.flow-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.flow-work {
  line-height: 1.35;
}

.flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--muted);
  font-weight: 800;
}

.pipeline {
  display: grid;
  grid-template-columns: repeat(7, minmax(220px, 1fr));
  gap: 10px;
  padding: 14px;
  overflow-x: auto;
}

.embedded-pipeline {
  min-width: 0;
}

.stage-column {
  min-width: 220px;
  background: var(--surface-container);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
}

.stage-column h3 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.app-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px;
  margin-bottom: 8px;
  box-shadow: 0 1px 1px rgba(21, 25, 31, 0.03);
}

.app-card p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.35;
}

.panel.attention {
  border-color: color-mix(in srgb, var(--warn) 34%, var(--line));
}

.panel-head {
  min-height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-container-low), color-mix(in srgb, var(--surface-container-low) 70%, var(--surface)));
}

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

.application-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(170px, 220px) minmax(190px, 260px) auto auto;
  gap: 12px;
  align-items: end;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.application-toolbar label {
  min-width: 0;
}

.application-toolbar .search-field {
  min-width: 240px;
}

.view-toggle {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-container);
}

.icon-toggle {
  width: 40px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.icon-toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-toggle:hover {
  background: color-mix(in srgb, var(--primary-container) 45%, transparent);
  color: var(--primary);
}

.icon-toggle.active {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow);
}

.toolbar-count {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-container-low);
  color: var(--muted);
  font-weight: 750;
  white-space: nowrap;
}

.panel-subtitle {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.muted {
  color: var(--muted);
  font-size: 12px;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--radius);
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-weight: 800;
  font-size: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

.stack.compact {
  gap: 8px;
}

.notice {
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface);
  box-shadow: 0 1px 1px rgba(21, 25, 31, 0.03);
}

.notice.warn {
  border-left-color: var(--warn);
}

.notice.danger {
  border-left-color: var(--danger);
}

.notice.ok {
  border-left-color: var(--ok);
}

.notice p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.linked-work-card {
  display: grid;
  gap: 8px;
}

.linked-work-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.linked-work-head h3 {
  margin: 0;
}

.linked-work-kind {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.linked-work-latest {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 170px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

.linked-work-latest span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.linked-work-times {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.linked-work-times span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface-variant);
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.linked-work-times strong {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

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

.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 10px;
  padding: 14px;
}

.staff {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface);
  box-shadow: 0 1px 1px rgba(21, 25, 31, 0.03);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.staff:hover {
  border-color: color-mix(in srgb, var(--primary) 20%, var(--line));
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.staff-heading {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.staff .role {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.staff-avatar {
  --avatar-bg: var(--secondary-container);
  --avatar-fg: #05201e;
  position: relative;
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  border: 2px solid color-mix(in srgb, var(--avatar-bg) 70%, #fff);
  flex: 0 0 auto;
}

.staff-avatar.compact {
  width: 28px;
  height: 28px;
  border-width: 1px;
}

.staff-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}

.staff-avatar.ai-avatar {
  background: var(--md-sys-color-surface-container-high);
}

.staff-avatar.manager {
  --avatar-bg: #d8e2ff;
  --avatar-fg: #001a41;
}

.staff-avatar.hunter {
  --avatar-bg: #c8e6c9;
  --avatar-fg: #12351c;
}

.staff-avatar.fit {
  --avatar-bg: #ffe0b2;
  --avatar-fg: #3b2200;
}

.staff-avatar.research {
  --avatar-bg: #e8def8;
  --avatar-fg: #25123d;
}

.staff-avatar.maker {
  --avatar-bg: #cde7ff;
  --avatar-fg: #002f53;
}

.staff-avatar.sender {
  --avatar-bg: #ffd8e4;
  --avatar-fg: #3f001c;
}

.staff-avatar.follow {
  --avatar-bg: #f4e68a;
  --avatar-fg: #231b00;
}

.staff-avatar.crm {
  --avatar-bg: #d6e3ff;
  --avatar-fg: #102747;
}

.staff-avatar.human {
  --avatar-bg: var(--md-sys-color-primary-container);
  --avatar-fg: var(--md-sys-color-on-primary-container);
}

.role-icon {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.staff-avatar.compact .role-icon {
  width: 18px;
  height: 18px;
}

.avatar-initials {
  position: absolute;
  right: -3px;
  bottom: -3px;
  min-width: 22px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 5px;
  background: var(--surface);
  color: var(--avatar-fg);
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 800;
}

.staff-avatar.compact .avatar-initials {
  display: none;
}

.staff-avatar.ai-avatar.compact .avatar-initials {
  min-width: 18px;
  height: 15px;
  display: inline-grid;
  font-size: 9px;
  right: -5px;
  bottom: -5px;
}

.staff-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  color: var(--ink);
  font-weight: 650;
}

.staff-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 10px 0;
}

.mini {
  background: var(--surface-container);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px;
}

.mini strong {
  display: block;
  font-size: 16px;
}

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

.table-wrap {
  padding: 0;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

th, td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 11px 12px;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 12px;
  background: var(--surface-container-low);
  white-space: nowrap;
  font-weight: 750;
}

tbody tr {
  transition: background-color 120ms ease;
}

tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 48%, transparent);
}

td .sub {
  color: var(--muted);
  margin-top: 3px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--radius);
  background: var(--surface-container-high);
  color: #344255;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
}

.badge.high,
.badge.urgent,
.badge.critical,
.badge.blocked,
.badge.error,
.badge.needs {
  background: var(--danger-container);
  color: var(--danger);
}

.badge.sent,
.badge.done,
.badge.ok {
  background: var(--ok-container);
  color: var(--ok);
}

.badge.queued,
.badge.medium {
  background: #d7e3f8;
  color: #075985;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 10px;
  padding: 16px;
}

.command-dialog {
  width: min(560px, calc(100vw - 32px));
}

.compact-commands {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 16px 20px 20px;
}

.compact-commands button {
  min-height: 46px;
}

.ref-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: auto;
  padding: 0 2px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: transparent;
  color: var(--md-sys-color-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: none;
}

.ref-link.entity-ref {
  max-width: 100%;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  height: auto;
  min-height: auto;
  line-height: 1.35;
  padding-top: 0;
  padding-bottom: 0;
}

.ref-link:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
  color: var(--md-sys-color-primary);
}

.university-ref {
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
}

.ref-status {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  font-weight: 400;
}

.ref-status::before {
  content: "·";
  margin-right: 6px;
}

.anchor-ref {
  display: inline-flex;
  align-items: center;
}

label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

input, textarea, select {
  width: 100%;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 1px 1px rgba(21, 25, 31, 0.02);
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

input:focus, textarea:focus, select:focus {
  outline: 2px solid color-mix(in srgb, var(--ring) 28%, transparent);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-container) 38%, transparent);
}

textarea {
  resize: vertical;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: 420px;
  background: #111827;
  color: #fff;
  padding: 12px 14px;
  border-radius: var(--radius);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
  box-shadow: var(--shadow-lg);
}

.entity-list,
.work-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.task-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(190px, 0.8fr) minmax(190px, 0.8fr) minmax(160px, 0.7fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px 16px;
}

.task-table-content {
  overflow: hidden;
}

.task-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.task-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--md-sys-color-surface);
}

.task-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px 14px;
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
}

.task-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  vertical-align: top;
}

.task-row:hover td {
  background: color-mix(in srgb, var(--md-sys-color-primary) 4%, var(--md-sys-color-surface));
}

.task-row.is-human-task td:first-child {
  box-shadow: inset 3px 0 0 var(--md-sys-color-primary);
}

.task-main-cell {
  width: 34%;
}

.task-title-line {
  color: var(--md-sys-color-on-surface);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.task-subline,
.task-note {
  margin-top: 4px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.35;
}

.task-note {
  margin-bottom: 0;
}

.task-links {
  display: grid;
  gap: 4px;
  justify-items: start;
}

.task-actions-cell {
  min-width: 210px;
}

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

.task-actions .ui-button,
.task-actions md-filled-button.ui-button,
.task-actions md-filled-tonal-button.ui-button,
.task-actions md-outlined-button.ui-button,
.task-actions md-text-button.ui-button {
  min-height: 34px;
}

.late-text {
  color: var(--md-sys-color-error);
  font-weight: 500;
}

.avatar-badge-wrap {
  position: relative;
  display: inline-flex;
  width: max-content;
}

.avatar-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
  border: 2px solid var(--md-sys-color-surface);
  font-size: 11px;
  font-weight: 700;
}

.threads-card {
  overflow: hidden;
}

.thread-header-actions,
.thread-head-actions,
.thread-context-actions,
.composer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.thread-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(150px, 190px) minmax(170px, 220px) minmax(150px, 190px) minmax(180px, 240px) auto;
  gap: 12px;
  align-items: end;
  padding: 14px 16px;
}

.thread-toolbar.task-filter-bar {
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
}

.thread-list-controls {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  gap: 9px;
  padding: 12px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
}

.thread-list-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.thread-summary-title {
  min-width: 0;
}

.thread-list-titlebar h3 {
  margin: 0;
  color: #0f8f48;
  font-size: 18px;
  font-weight: 800;
}

.thread-summary-title p {
  margin: 2px 0 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 11px;
  font-weight: 600;
}

.thread-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.thread-title-actions .ui-button-icon {
  width: 34px;
  min-height: 34px;
  color: var(--md-sys-color-on-surface-variant);
}

.thread-search-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--md-sys-color-surface-container-low);
}

.thread-search-head .ui-input {
  min-height: 36px;
  padding-inline: 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.thread-search-icon {
  display: inline-grid;
  place-items: center;
  color: var(--md-sys-color-on-surface-variant);
}

.thread-search-icon .ui-icon {
  width: 16px;
  height: 16px;
}

.thread-list-controls .task-filter-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.thread-list-controls .task-filter-grid .ui-field:last-child {
  grid-column: 1 / -1;
}

.thread-list-controls .ui-label {
  font-size: 11px;
}

.thread-list-controls .ui-select,
.thread-list-controls .ui-input {
  min-height: 38px;
  font-size: 13px;
}

.thread-list-controls .toolbar-count {
  min-width: 30px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding-inline: 10px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  font-weight: 750;
}

.thread-filter-bar {
  display: flex;
  gap: 7px;
  align-items: center;
  padding-bottom: 2px;
  flex-wrap: wrap;
}

.filter-dropdown.compact {
  min-height: 34px;
  min-width: 160px;
}

.thread-filter-action {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--md-sys-color-surface);
  color: var(--primary);
  font-size: 18px;
  line-height: 1;
  box-shadow: none;
}

.thread-more-filters {
  border-top: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
  padding-top: 4px;
}

.thread-more-filters summary {
  width: fit-content;
  cursor: pointer;
  color: var(--md-sys-color-primary);
  font-size: 12px;
  font-weight: 700;
  list-style: none;
}

.thread-more-filters summary::-webkit-details-marker {
  display: none;
}

.thread-more-filters .task-filter-grid {
  margin-top: 8px;
}

.thread-list-count {
  padding: 10px 14px 4px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  font-weight: 650;
}

.task-filter-search-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.task-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  align-items: end;
}

.task-filter-grid .ui-field,
.task-filter-search-row .ui-field {
  min-width: 0;
}

.task-filter-search-row .search-field {
  min-width: 0;
}

.task-filter-bar .toolbar-count {
  min-height: 44px;
  align-self: end;
  padding-inline: 18px;
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}

.thread-notice {
  margin: 12px 16px 0;
  padding: 10px 12px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-size: 13px;
}

.staff-identity-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
  padding: 0 0 18px;
  background: var(--md-sys-color-surface-container-low);
}

.contact-info-head {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
}

.contact-info-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
}

.staff-identity-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 18px 10px;
  min-width: 0;
  text-align: center;
}

.staff-identity-main .avatar,
.staff-identity-main .staff-avatar {
  width: 92px;
  height: 92px;
}

.contact-title-block {
  display: grid;
  justify-items: center;
  gap: 5px;
}

.contact-title-block h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
}

.contact-title-block p {
  margin: 0;
}

.contact-info-section {
  margin: 0 16px;
  padding: 14px 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.contact-info-section p {
  margin: 4px 0 0;
  color: var(--md-sys-color-on-surface);
  font-size: 14px;
  line-height: 1.45;
}

.contact-info-section .section-label {
  margin: 0;
  color: var(--md-sys-color-primary);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}

.contact-info-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 16px;
}

.staff-identity-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

.thread-shell {
  display: grid;
  grid-template-columns: 96px minmax(300px, 390px) minmax(420px, 1fr);
  min-height: 0;
  height: 100%;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  overflow: hidden;
}

.thread-shell.has-contact-info {
  grid-template-columns: 96px minmax(300px, 370px) minmax(360px, 1fr) minmax(280px, 340px);
}

.thread-contact-info-pane {
  min-height: 0;
  overflow-y: auto;
  border-left: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low);
}

.thread-staff-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  padding: 12px 10px;
  background: var(--md-sys-color-surface-container-low);
  border-right: 1px solid var(--md-sys-color-outline-variant);
  overflow-y: auto;
  min-height: 0;
}

.thread-staff-tab {
  min-height: 68px;
  display: grid;
  justify-items: center;
  gap: 5px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-large);
  padding: 8px 6px;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font: inherit;
  font-size: 11px;
  line-height: 1.15;
  cursor: pointer;
}

.thread-staff-tab:hover,
.thread-staff-tab.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.all-avatar {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-size: 13px;
  font-weight: 700;
}

.thread-count-badge {
  min-width: 22px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 6px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-size: 11px;
  font-weight: 700;
}

.thread-staff-name {
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-list-pane {
  background: color-mix(in srgb, var(--md-sys-color-surface) 88%, var(--md-sys-color-surface-container-low));
  border-right: 1px solid var(--md-sys-color-outline-variant);
  overflow-y: auto;
  min-height: 0;
}

.thread-list-item {
  position: relative;
  width: calc(100% - 24px);
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 128px;
  margin: 8px 12px;
  padding: 12px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(60 64 67 / 8%);
}

.thread-list-item:hover,
.thread-list-item.active {
  border-color: color-mix(in srgb, #0f8f48 38%, var(--md-sys-color-outline-variant));
  background: color-mix(in srgb, #effbf2 54%, var(--md-sys-color-surface));
}

.thread-list-item.unread .thread-list-title {
  font-weight: 700;
}

.thread-list-avatar .staff-avatar {
  width: 44px;
  height: 44px;
}

.thread-list-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.thread-list-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
}

.thread-list-title {
  color: var(--md-sys-color-on-surface);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-list-time {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.thread-list-topic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 11px;
  font-weight: 700;
}

.thread-list-topic > span:not(.thread-reason-pill) {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--md-sys-color-primary-container) 44%, var(--md-sys-color-surface));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-reason-pill {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 999px;
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-reason-pill.warn {
  border-color: #d49a00;
  background: #fff6db;
}

.thread-reason-pill.ok {
  border-color: #4f9d69;
  background: #edf8ef;
}

.thread-reason-pill.neutral {
  background: var(--md-sys-color-surface-container);
}

.thread-list-preview {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.unread-dot {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #0b57d0;
}

.thread-conversation-pane {
  display: grid;
  grid-template-rows: auto auto minmax(260px, 1fr) auto auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #eef3f8;
}

.thread-conversation-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.thread-person {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
  flex: 1 1 auto;
}

.thread-person-button {
  border: 0;
  border-radius: var(--md-sys-shape-corner-large);
  padding: 4px 8px 4px 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.thread-person-button:hover,
.thread-person-button:focus-visible {
  background: var(--md-sys-color-surface-container-high);
  outline: none;
}

.thread-person-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.thread-person-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.thread-person h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.thread-person p {
  margin: 3px 0 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
}

.thread-head-actions-minimal {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.thread-meta {
  padding: 0;
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.thread-meta summary {
  min-height: 44px;
  padding: 12px 16px;
  cursor: pointer;
  color: var(--md-sys-color-primary);
  font-size: 13px;
  font-weight: 650;
  list-style-position: inside;
}

.thread-meta .detail-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
  gap: 6px 18px;
  padding: 0 16px 14px;
}

.thread-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 0 16px 16px;
}

.thread-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
}

.message-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.message-row.staff {
  justify-content: flex-start;
}

.message-row.human {
  justify-content: flex-end;
}

.message-row.system {
  justify-content: center;
}

.message-avatar {
  flex: 0 0 auto;
  margin-bottom: 2px;
}

.message-avatar .staff-avatar {
  width: 32px;
  height: 32px;
}

.message-avatar .avatar-initials {
  font-size: 9px;
}

.message-bubble {
  max-width: min(680px, 76%);
  border-radius: 18px 18px 18px 5px;
  padding: 10px 13px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border: 1px solid rgba(60, 64, 67, 0.08);
  box-shadow: 0 1px 1px rgba(60, 64, 67, 0.08);
}

.message-row.human .message-bubble {
  border-radius: 18px 18px 5px 18px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.message-row.system .message-bubble {
  max-width: 70%;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

.message-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 5px;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.75;
}

.message-head time {
  font-weight: 500;
  white-space: nowrap;
}

.message-bubble p {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.5;
}

.message-body {
  display: grid;
  gap: 9px;
}

.message-block {
  display: grid;
  gap: 3px;
}

.message-section-title {
  display: block;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.message-body ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 18px;
}

.message-body li {
  font-size: 14px;
  line-height: 1.45;
}

.message-row.human .message-section-title {
  color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 70%, transparent);
}

.thread-context-actions {
  padding: 12px 16px;
  background: var(--md-sys-color-surface);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.thread-composer {
  display: grid;
  gap: 8px;
  padding: 14px 16px 16px;
  background: var(--md-sys-color-surface);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  z-index: 2;
}

.thread-composer textarea {
  min-height: 92px;
}

.composer-actions {
  justify-content: space-between;
}

.composer-actions span {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
}

.entity-card,
.work-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface);
  box-shadow: 0 1px 1px rgba(21, 25, 31, 0.03);
}

.entity-card.warn,
.work-card.warn {
  border-left: 4px solid var(--warn);
}

.entity-card.danger,
.work-card.danger {
  border-left: 4px solid var(--danger);
}

.entity-card.ok,
.work-card.ok {
  border-left: 4px solid var(--ok);
}

.approval-card {
  border-left-width: 5px;
}

.human-task-card {
  border-left-color: var(--primary);
  background: color-mix(in srgb, #fff 92%, var(--primary-container));
}

.card-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.card-title {
  max-width: 780px;
  color: var(--md-sys-color-on-surface);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.card-title .ref-link {
  color: var(--md-sys-color-on-surface);
  font-size: inherit;
  font-weight: inherit;
}

.card-topline > .ui-badge {
  max-width: 320px;
  justify-content: center;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  padding-block: 4px;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.detail-list {
  display: grid;
  gap: 6px;
}

.detail-line {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 22px;
}

.detail-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.detail-value {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.card-body {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

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

.m3-dialog {
  width: min(760px, calc(100vw - 32px));
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  background: transparent;
}

.m3-dialog::backdrop {
  background: rgba(17, 24, 39, 0.42);
}

.dialog-card {
  display: grid;
  gap: 0;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.dialog-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-container-low);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 20px;
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line);
}

.dialog-help {
  margin: -4px 20px 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-size: 14px;
  line-height: 1.45;
}

.rule-list {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.rule-list div {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-container);
}

.rule-list span {
  color: var(--muted);
  font-size: 13px;
}

.detail-page-body {
  padding: 16px;
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(340px, 0.85fr) minmax(520px, 1.15fr);
  gap: 16px;
}

.detail-section {
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface);
}

.detail-section h3 {
  font-size: 16px;
}

.nested {
  padding: 0;
}

.detail-section .stack {
  padding: 0;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.react-shell .workspace {
  min-width: 0;
}

.ui-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 160px;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.ui-card.is-warn,
.ui-card.is-danger {
  border-color: color-mix(in srgb, var(--warn) 34%, var(--line));
}

.workspace:has(.threads-card) {
  height: 100vh;
  max-height: 100vh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  padding-bottom: 0;
}

.workspace:has(.threads-card) .status-line {
  min-height: 0;
}

.threads-card {
  height: calc(100vh - 156px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.workspace:has(.threads-card) .threads-card {
  height: 100%;
}

.threads-card > .ui-card-header,
.threads-card > .thread-notice {
  flex: 0 0 auto;
}

.threads-card > .thread-shell {
  flex: 1 1 auto;
}

.ui-card-header {
  min-height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-container-low), color-mix(in srgb, var(--surface-container-low) 70%, var(--surface)));
}

.ui-card-content {
  padding: 14px;
}

.ui-card-content.no-pad,
.entity-list.no-pad,
.work-list.no-pad {
  padding: 0;
}

.applications-content {
  padding: 0;
}

.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition:
    background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

md-filled-button.ui-button,
md-filled-tonal-button.ui-button,
md-outlined-button.ui-button,
md-text-button.ui-button {
  vertical-align: middle;
}

.material-web-enhanced md-filled-button.ui-button,
.material-web-enhanced md-filled-tonal-button.ui-button,
.material-web-enhanced md-outlined-button.ui-button,
.material-web-enhanced md-text-button.ui-button {
  min-height: 40px;
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-weight);
}

.ui-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.ui-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}

.ui-button-secondary {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.ui-button-outline {
  background: transparent;
  border-color: var(--line);
  color: var(--primary);
  box-shadow: none;
}

.ui-button-ghost {
  background: transparent;
  color: var(--primary);
  box-shadow: none;
}

.ui-button-icon {
  width: 42px;
  padding: 0;
}

.ui-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.lucide {
  pointer-events: none;
}

.ui-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--radius);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
}

.ui-badge.danger,
.ui-badge.blocked,
.ui-badge.error,
.ui-badge.needs {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.ui-badge.warn,
.ui-badge.queued,
.ui-badge.waiting {
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}

.ui-badge.ok,
.ui-badge.sent,
.ui-badge.done {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}

.ui-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.ui-input,
.ui-select,
.ui-textarea {
  width: 100%;
  border: 1px solid var(--input);
  border-radius: var(--md-outlined-text-field-container-shape, var(--radius-sm));
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: 0 1px 1px rgba(21, 25, 31, 0.02);
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--ring) 28%, transparent);
  border-color: var(--md-outlined-text-field-focus-outline-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-container) 38%, transparent);
}

.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(17, 24, 39, 0.42);
}

.react-dialog {
  width: min(820px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
}

.skeleton {
  opacity: 0.65;
}

/* Material 3 / Google Workspace visual pass. */
.app-shell {
  background: var(--background);
}

.sidebar {
  background: var(--background);
  border-right: 0;
  box-shadow: none;
}

.brand-block {
  min-height: 80px;
  padding: 18px 20px;
  border-bottom: 0;
  background: transparent;
}

.brand-mark {
  border: 0;
  border-radius: 8px;
  background: var(--primary-container);
  color: var(--primary);
  box-shadow: none;
}

.side-nav {
  gap: 3px;
  padding: 8px 12px;
}

.nav-item {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: #444746;
  font-weight: 600;
  box-shadow: none;
}

.nav-item:hover {
  background: #e9eef6;
  color: #1f1f1f;
}

.nav-item.active {
  background: var(--primary-container);
  color: var(--on-primary-container);
  box-shadow: none;
}

.nav-count {
  background: #fce8e6;
  color: var(--danger);
}

.sidebar-footer {
  border-top: 0;
  padding: 16px 22px;
}

.workspace {
  padding: 18px 28px 42px;
}

.topbar {
  min-height: 64px;
  padding-bottom: 14px;
}

.topbar h2 {
  font-size: 22px;
  font-weight: 500;
}

.eyebrow {
  color: #0b57d0;
  font-size: 11px;
  font-weight: 700;
}

.status-line {
  color: #5f6368;
  padding-bottom: 14px;
}

button,
.ui-button,
md-filled-button.ui-button,
md-filled-tonal-button.ui-button,
md-outlined-button.ui-button,
md-text-button.ui-button {
  min-height: 40px;
  border-radius: 999px;
  border-color: transparent;
  box-shadow: none;
}

button:hover,
.ui-button:hover,
md-filled-button.ui-button:hover,
md-filled-tonal-button.ui-button:hover,
md-outlined-button.ui-button:hover,
md-text-button.ui-button:hover {
  transform: none;
  box-shadow: none;
}

.ui-button.is-running,
button[aria-busy="true"],
md-filled-button.ui-button[aria-busy="true"],
md-filled-tonal-button.ui-button[aria-busy="true"],
md-outlined-button.ui-button[aria-busy="true"],
md-text-button.ui-button[aria-busy="true"],
md-filled-button.ui-button.is-running,
md-filled-tonal-button.ui-button.is-running,
md-outlined-button.ui-button.is-running,
md-text-button.ui-button.is-running {
  cursor: wait;
  opacity: 0.72;
  box-shadow: none;
  transform: none;
}

.ui-button.is-running,
button[aria-busy="true"],
md-filled-button.ui-button[aria-busy="true"],
md-filled-tonal-button.ui-button[aria-busy="true"],
md-outlined-button.ui-button[aria-busy="true"],
md-text-button.ui-button[aria-busy="true"],
md-filled-button.ui-button.is-running,
md-filled-tonal-button.ui-button.is-running,
md-outlined-button.ui-button.is-running,
md-text-button.ui-button.is-running {
  background: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
}

.button-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  flex: 0 0 auto;
  animation: button-spin 800ms linear infinite;
}

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

button.primary,
.ui-button-default {
  background: var(--md-filled-button-container-color);
  border-color: var(--md-filled-button-container-color);
  color: var(--md-filled-button-label-text-color);
}

button.tonal,
.ui-button-secondary {
  background: var(--md-filled-tonal-button-container-color);
  color: var(--md-filled-tonal-button-label-text-color);
}

.ui-button-outline {
  border-color: var(--md-outlined-button-outline-color);
  background: transparent;
  color: var(--md-outlined-button-label-text-color);
}

.ui-button-ghost {
  background: transparent;
  color: var(--md-text-button-label-text-color);
}

.metrics {
  gap: 12px;
}

.metric {
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  background: #fff;
  padding: 16px;
}

.metric::before {
  display: none;
}

.metric .value {
  color: #1f1f1f;
  font-size: 28px;
  font-weight: 500;
}

.metric .label {
  color: #5f6368;
  font-weight: 500;
}

.panel,
.ui-card,
.entity-card,
.work-card,
.notice,
.staff,
.kpi-card,
.autopilot-card,
.flow-node,
.detail-section,
.stage-column,
.app-card {
  border-radius: 8px;
  border-color: transparent;
  box-shadow: none;
  background: #fff;
}

.panel,
.ui-card {
  border: 0;
}

.panel-head,
.ui-card-header {
  min-height: 64px;
  background: #fff;
  border-bottom: 1px solid #e8eaed;
  padding: 16px 18px;
}

.panel-head h2,
.ui-card-header h2 {
  color: #1f1f1f;
  font-size: 18px;
  font-weight: 500;
}

.panel-subtitle {
  color: #5f6368;
}

.application-toolbar {
  background: #fff;
  border-bottom: 1px solid #e8eaed;
}

input,
textarea,
select,
.ui-input,
.ui-select,
.ui-textarea {
  min-height: 44px;
  border-radius: 8px;
  border-color: #dadce0;
  background: #fff;
  box-shadow: none;
}

input:focus,
textarea:focus,
select:focus,
.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
  border-color: var(--primary);
  outline: 2px solid color-mix(in srgb, var(--primary) 24%, transparent);
  box-shadow: none;
}

.view-toggle {
  min-height: 44px;
  border: 0;
  background: var(--surface-container);
}

.icon-toggle {
  color: #5f6368;
}

.icon-toggle.active {
  background: var(--primary-container);
  color: var(--on-primary-container);
  box-shadow: none;
}

.ui-badge,
.badge,
.pill,
.toolbar-count {
  border: 0;
  border-radius: 999px;
  background: var(--surface-container);
  color: #444746;
}

.kpi-card {
  background: var(--surface-container-low);
  border-left: 0;
}

.kpi-card.ok {
  background: var(--ok-container);
}

.kpi-card.warn {
  background: var(--warn-container);
}

.kpi-card.danger {
  background: var(--danger-container);
}

.progress-track {
  background: rgba(60, 64, 67, 0.16);
}

.progress-track span {
  background: var(--primary);
}

.entity-card,
.work-card,
.notice,
.staff,
.app-card {
  border: 1px solid #e8eaed;
}

.entity-card.warn,
.work-card.warn,
.notice.warn,
.entity-card.danger,
.work-card.danger,
.notice.danger,
.entity-card.ok,
.work-card.ok,
.notice.ok {
  border-left-width: 1px;
}

.detail-label {
  color: #5f6368;
}

.detail-value {
  color: #1f1f1f;
}

.ref-link {
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: transparent;
  color: var(--md-sys-color-primary);
}

.card-title .ref-link,
.university-ref {
  color: var(--md-sys-color-on-surface);
}

.timeline-dot {
  background: var(--primary);
  border-color: #fff;
}

.timeline-item:not(:last-child)::before {
  background: #e8eaed;
}

.dialog-overlay {
  background: rgba(32, 33, 36, 0.42);
}

.dialog-card {
  border: 0;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}

.dialog-head {
  background: #fff;
  border-bottom: 1px solid #e8eaed;
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    height: auto;
  }

  .side-nav {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .cockpit-grid {
    grid-template-columns: 1fr;
  }

  .overview-hero,
  .overview-section-head {
    flex-direction: column;
  }

  .overview-hero-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .overview-info-grid,
  .overview-step-list,
  .overview-org-staff,
  .wiki-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wiki-menu-panel,
  .wiki-process {
    grid-row: auto;
  }

  .overview-org-node {
    min-width: 0;
  }

  .report-hero,
  .report-grid,
  .report-period-control,
  .target-summary,
  .system-health-summary,
  .system-health-detail-grid {
    grid-template-columns: 1fr;
  }

  .report-command-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .report-executive-summary {
    grid-template-columns: 1fr;
  }

  .report-hero-status {
    justify-items: start;
  }

  .period-actions,
  .period-custom-range {
    justify-content: flex-start;
  }

  .report-kpi-strip {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .autopilot-grid {
    grid-template-columns: 1fr;
  }

  .pipeline {
    grid-template-columns: repeat(7, 220px);
  }

  .staff-flow {
    align-items: stretch;
  }

  .application-toolbar {
    grid-template-columns: minmax(220px, 1fr) minmax(170px, 1fr);
  }

  .task-toolbar {
    grid-template-columns: minmax(220px, 1fr) minmax(170px, 1fr);
  }

  .thread-toolbar {
    grid-template-columns: minmax(220px, 1fr) minmax(170px, 1fr);
  }

  .task-filter-search-row {
    grid-template-columns: 1fr;
  }

  .thread-shell {
    grid-template-columns: 80px minmax(240px, 0.9fr) minmax(340px, 1.1fr);
  }

  .thread-shell.has-contact-info {
    grid-template-columns: 80px minmax(230px, 0.8fr) minmax(320px, 1fr) minmax(260px, 0.85fr);
  }

  .thread-meta .detail-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  html,
  body,
  #root {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .app-shell,
  .app-shell.sidebar-collapsed {
    --sidebar-width: 72px;
    grid-template-columns: var(--sidebar-width) minmax(0, calc(100vw - var(--sidebar-width)));
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .sidebar {
    width: var(--sidebar-width);
    padding-inline: 8px;
  }

  .workspace {
    padding: 14px;
    min-width: 0;
    width: calc(100vw - var(--sidebar-width));
    max-width: calc(100vw - var(--sidebar-width));
    overflow-x: hidden;
  }

  .workspace > * {
    max-width: 100%;
  }

  .overview-hero,
  .overview-panel {
    padding: 14px;
  }

  .overview-hero-copy h1 {
    font-size: 25px;
  }

  .overview-info-grid,
  .overview-step-list,
  .overview-org-staff,
  .wiki-grid,
  .wiki-menu-list article {
    grid-template-columns: 1fr;
  }

  .wiki-hero-actions .btn {
    width: 100%;
  }

  .overview-tabbar {
    padding: 6px;
  }

  .overview-tab {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }

  .overview-hero-actions .btn,
  .overview-inline-actions .btn {
    width: 100%;
  }

  .topbar {
    display: grid;
  }

  .status-line {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .report-hero {
    width: 100%;
    max-width: 100%;
    padding: 16px;
    overflow: hidden;
  }

  .report-hero h1 {
    font-size: 22px;
    line-height: 1.08;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 20ch;
  }

  .report-hero-subtitle,
  .report-executive-summary article,
  .report-section-head p,
  .blocker-card,
  .detail-value {
    overflow-wrap: anywhere;
  }

  .report-hero-subtitle,
  .report-executive-summary,
  .report-hero-meta,
  .status-line {
    max-width: min(230px, calc(100vw - var(--sidebar-width) - 42px));
  }

  .report-hero-subtitle,
  .report-executive-summary article {
    word-break: normal;
  }

  .report-hero-status {
    width: 100%;
  }

  .report-period-control {
    padding: 14px;
  }

  .period-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .period-actions md-filled-button,
  .period-actions md-filled-tonal-button,
  .period-actions md-outlined-button,
  .period-actions .ui-field,
  .period-actions .report-toggle {
    width: 100%;
    min-width: 0;
  }

  .period-actions .report-toggle {
    grid-column: 1 / -1;
    justify-content: center;
    white-space: normal;
  }

  .side-nav {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .report-kpi-strip {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }

  .report-kpi-card {
    min-width: 220px;
    scroll-snap-align: start;
  }

  .activity-stream-item,
  .system-health-grid,
  .system-health-grid.compact,
  .deadline-risk-row,
  .staff-workload-row {
    grid-template-columns: 1fr;
  }

  .report-command-grid {
    max-width: 100%;
    grid-template-columns: 1fr;
  }

  .report-section-head {
    display: grid;
  }

  .pipeline-app-row {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .application-toolbar {
    grid-template-columns: 1fr;
  }

  .task-toolbar {
    grid-template-columns: 1fr;
  }

  .task-table {
    min-width: 880px;
  }

  .view-toggle {
    justify-self: start;
  }

  .card-topline {
    display: grid;
  }

  .detail-line {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Fixed Material-style application shell. */
.app-shell {
  --sidebar-width: 288px;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  background: #f8fafd;
  transition: grid-template-columns 180ms ease;
}

.app-shell.sidebar-collapsed {
  --sidebar-width: 88px;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--sidebar-width);
  height: 100vh;
  padding: 18px 10px;
  background: #f8fafd;
  border-right: 1px solid #edf0f7;
  transition: width 180ms ease;
}

.brand-block {
  min-height: 74px;
  padding: 6px 8px 20px;
  gap: 14px;
}

.brand-mark {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 10px;
  color: #0057d9;
  background: #dbe8ff;
  font-size: 18px;
  letter-spacing: 0;
}

.brand-copy {
  min-width: 0;
}

.brand-copy .eyebrow {
  color: #0057d9;
  font-size: 13px;
  line-height: 18px;
}

.brand-copy h1 {
  color: #111418;
  font-size: 28px;
  line-height: 36px;
  font-weight: 400;
}

.sidebar-toggle {
  margin-left: auto;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  color: #444746;
  opacity: 0.82;
}

.side-nav {
  gap: 10px;
  padding: 14px 0;
}

.nav-item {
  position: relative;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  color: #30343b;
  font-size: 16px;
  font-weight: 650;
  justify-content: flex-start;
}

.nav-icon {
  display: none;
  color: currentColor;
}

.nav-label {
  white-space: nowrap;
}

.nav-item.active {
  background: #d6e4ff;
  color: #001d35;
}

.nav-item:hover {
  background: #e7eefb;
}

.side-nav-separator {
  height: 1px;
  margin: 4px 16px;
  background: #dde3ef;
}

.side-department-context {
  display: grid;
  gap: 5px;
  margin: 2px 8px 4px;
  padding: 10px 12px;
  border: 1px solid #dde3ef;
  border-radius: 8px;
  background: #fff;
}

.side-department-context span {
  color: #5f6368;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.side-department-context strong {
  color: #1f1f1f;
  font-size: 13px;
  line-height: 1.25;
}

.nav-count {
  margin-left: auto;
  min-width: 30px;
  height: 30px;
  background: #fce8e6;
  color: #b3261e;
  font-size: 14px;
}

.sidebar-footer {
  padding: 18px 12px 4px;
  font-size: 16px;
  color: #30343b;
}

.status-dot {
  width: 11px;
  height: 11px;
  background: #20c463;
}

.workspace {
  grid-column: 2;
  min-width: 0;
  padding: 0 28px 42px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  min-height: 78px;
  margin: 0 -28px;
  padding: 14px 28px;
  background: color-mix(in srgb, #f8fafd 92%, white);
  border-bottom: 1px solid #e8eaed;
  backdrop-filter: blur(14px);
}

.topbar h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
}

.topbar-title-block {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.topbar-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: #0b57d0;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.breadcrumb-separator {
  color: #5f6368;
  font-weight: 500;
}

.topbar-title-block h2 {
  max-width: min(880px, 64vw);
  overflow: hidden;
  color: #111418;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.status-line {
  padding: 14px 0 16px;
}

.sidebar-collapsed .sidebar {
  padding: 16px 10px;
}

.sidebar-collapsed .brand-block {
  min-height: auto;
  display: grid;
  justify-items: center;
  padding: 0 0 18px;
  gap: 10px;
}

.sidebar-collapsed .brand-copy,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .side-department-context,
.sidebar-collapsed .sidebar-footer span:not(.status-dot) {
  display: none;
}

.sidebar-collapsed .brand-mark {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
}

.sidebar-collapsed .sidebar-toggle {
  margin-left: 0;
  background: #eef3fb;
}

.sidebar-collapsed .side-nav {
  align-items: center;
}

.sidebar-collapsed .nav-item {
  width: 56px;
  min-height: 56px;
  padding: 0;
  justify-content: center;
  border-radius: 18px;
}

.sidebar-collapsed .nav-icon {
  display: inline-grid;
}

.sidebar-collapsed .nav-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 22px;
  height: 22px;
  font-size: 12px;
}

.sidebar-collapsed .sidebar-footer {
  justify-content: center;
}

.settings-hero .ui-card-content {
  padding: 14px 18px 18px;
}

.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-tab {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #30343b;
  font-size: 14px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.settings-tab:hover {
  background: #eef3fb;
}

.settings-tab.active {
  background: #d6e4ff;
  color: #001d35;
}

.settings-tab small {
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  font-size: 12px;
  font-weight: 700;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

.settings-list {
  display: grid;
  gap: 14px;
}

.settings-card {
  border: 1px solid #e8eaed;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  display: grid;
  gap: 14px;
}

.settings-card h3 {
  margin: 0;
  color: #1f1f1f;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

.settings-card p {
  margin: 3px 0 0;
  color: #5f6368;
  line-height: 1.45;
}

.settings-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.solution-card {
  grid-column: 1 / -1;
}

.capability-title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

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

.settings-mini-grid > div {
  min-height: 72px;
  border-radius: 8px;
  background: #f8fafd;
  padding: 12px;
  display: grid;
  align-content: center;
  gap: 2px;
}

.settings-mini-grid strong {
  color: #1f1f1f;
  font-size: 22px;
  line-height: 26px;
  font-weight: 600;
}

.settings-mini-grid span {
  color: #5f6368;
  font-size: 13px;
}

.designer-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.designer-summary-strip span {
  min-height: 68px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 12px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  font-weight: 650;
}

.designer-summary-strip strong {
  color: var(--md-sys-color-on-surface);
  font-size: 22px;
  line-height: 1;
}

.designer-section-card .ui-card-content {
  display: grid;
  gap: 14px;
}

.designer-status {
  padding: 10px 12px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-size: 13px;
  font-weight: 650;
}

.designer-object-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.designer-object-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
}

.designer-object-card.is-locked {
  background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 88%, var(--md-sys-color-tertiary-container));
}

.designer-object-head,
.designer-object-actions,
.designer-editor-head,
.designer-editor-actions,
.version-row,
.backup-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.designer-object-head h3,
.designer-editor-head h3 {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
}

.designer-object-head small,
.version-row small,
.backup-row small {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
}

.designer-object-summary {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.45;
}

.designer-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.32);
}

.designer-editor {
  width: min(920px, calc(100vw - 40px));
  max-height: calc(100vh - 56px);
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface);
  box-shadow: var(--md-sys-elevation-level3);
  overflow: auto;
}

.designer-json-editor {
  min-height: 420px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  font: 13px/1.55 Consolas, "Courier New", monospace;
  resize: vertical;
}

.designer-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

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

.governance-list h3 {
  margin: 10px 0 0;
  font-size: 16px;
}

.governance-list p {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.45;
}

.version-list,
.backup-list {
  display: grid;
  gap: 10px;
}

.version-row,
.backup-row {
  padding: 14px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
}

.version-row strong,
.backup-row strong {
  display: block;
  margin-bottom: 4px;
  color: var(--md-sys-color-on-surface);
}

.version-row p,
.backup-row p {
  margin: 0 0 4px;
  color: var(--md-sys-color-on-surface-variant);
  word-break: break-word;
}

@media (max-width: 860px) {
  .designer-split {
    grid-template-columns: 1fr;
  }

  .designer-object-head,
  .designer-object-actions,
  .designer-editor-head,
  .designer-editor-actions,
  .version-row,
  .backup-row {
    align-items: stretch;
    flex-direction: column;
  }
}

.stage-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.stage-pill {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #eef3fb;
  color: #1f1f1f;
  font-size: 13px;
  font-weight: 650;
}

.stage-separator {
  color: #5f6368;
  font-weight: 700;
}

.lane-card {
  border-left: 4px solid #d6e4ff;
}

.recipe-card .staff-chip,
.lane-card .staff-chip {
  flex: 0 0 auto;
}

.department-hero .ui-card-content {
  display: grid;
  gap: 18px;
  padding: 14px 18px 18px;
}

.department-actions,
.department-leaders,
.level-row,
.learning-toolbar,
.staff-profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

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

.department-identity {
  min-height: 138px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
}

.department-identity strong {
  color: var(--md-sys-color-on-surface);
  font-size: 15px;
  line-height: 1.45;
}

.org-arrow {
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 700;
}

.level-badge {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-size: 12px;
  font-weight: 700;
}

.department-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.department-tab {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 14px;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.department-tab:hover,
.department-tab.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.department-overview {
  display: grid;
  gap: 14px;
}

.department-explorer-shell {
  display: grid;
  gap: 14px;
}

.department-main-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 4px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 999px;
  background: var(--md-sys-color-surface-container-low);
}

.department-main-tab {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.department-main-tab:hover {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
}

.department-main-tab.active {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  box-shadow: var(--md-sys-elevation-level1);
}

.department-settings-view {
  display: grid;
  gap: 14px;
}

.department-settings-card .ui-card-content {
  display: grid;
  gap: 16px;
}

.department-settings-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.department-settings-summary span {
  display: grid;
  gap: 3px;
  min-height: 70px;
  align-content: center;
  padding: 12px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  font-weight: 650;
}

.department-settings-summary strong {
  color: var(--md-sys-color-on-surface);
  font-size: 22px;
  line-height: 1;
}

.department-settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.department-setting-tab {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 999px;
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface-variant);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.department-setting-tab:hover {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
}

.department-setting-tab.active {
  border-color: transparent;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.department-chart-card .ui-card-content {
  padding: 20px 18px 24px;
  overflow-x: auto;
}

.department-staff-explorer {
  display: grid;
  gap: 12px;
}

.department-staff-explorer.workspace-profile-mode {
  min-width: 0;
}

.department-operations-explorer {
  display: grid;
  gap: 14px;
}

.department-single-view-panel {
  display: grid;
  gap: 14px;
}

.department-explorer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-container-lowest);
}

.department-explorer-toolbar h3,
.department-explorer-toolbar p {
  margin: 0;
}

.department-explorer-toolbar p:not(.eyebrow) {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.chart-enter,
.profile-only-view {
  animation: explorerFadeIn 180ms ease-out;
}

.profile-only-view {
  display: grid;
  gap: 12px;
}

.profile-return-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 8px 4px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 13px;
  font-weight: 650;
}

@keyframes explorerFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.department-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.department-stat {
  min-height: 94px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
  box-shadow: var(--md-sys-elevation-level1);
}

.department-stat strong {
  color: var(--md-sys-color-on-surface);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
}

.department-stat span {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 13px;
}

.department-capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.department-capability {
  min-height: 150px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.department-capability:hover,
.org-person:hover {
  border-color: color-mix(in srgb, var(--md-sys-color-primary) 42%, var(--md-sys-color-outline-variant));
  background: color-mix(in srgb, var(--md-sys-color-primary) 5%, var(--md-sys-color-surface));
}

.department-capability strong {
  font-size: 16px;
  line-height: 1.25;
}

.department-capability span:not(.staff-chip):not(.staff-avatar):not(.avatar-initials) {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.45;
}

.org-preview {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.org-preview-line {
  width: 2px;
  height: 28px;
  background: var(--md-sys-color-outline-variant);
}

.department-org-tree {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 4px 0 8px;
}

.org-level {
  width: min(520px, 100%);
  display: grid;
  justify-items: center;
  gap: 8px;
}

.org-level-root .org-person,
.org-level-manager .org-person {
  width: min(520px, 100%);
}

.org-level-label {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
}

.org-tree-line.vertical {
  width: 2px;
  height: 30px;
  background: var(--md-sys-color-outline-variant);
}

.org-tree-line.vertical.short {
  height: 22px;
}

.org-tree-branch {
  width: min(980px, 92%);
  display: grid;
  justify-items: center;
}

.org-tree-line.horizontal {
  width: 100%;
  height: 2px;
  background: var(--md-sys-color-outline-variant);
}

.org-level-team {
  width: 100%;
  gap: 12px;
  margin-top: 8px;
}

.org-team-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.org-team-row .org-person {
  height: 100%;
}

.org-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 18px;
}

.org-search {
  width: min(420px, 100%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 999px;
  background: var(--md-sys-color-surface-container-lowest);
}

.org-search .ui-icon {
  color: var(--md-sys-color-on-surface-variant);
}

.org-search input {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.org-search input:focus {
  outline: 0;
  box-shadow: none;
}

.org-roster,
.profile-roster {
  display: grid;
  gap: 8px;
  align-content: start;
}

.org-focus-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.org-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 13px;
}

.org-person {
  width: 100%;
  min-height: 94px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.org-person.compact {
  min-height: 96px;
}

.org-person.selected {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.org-person-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

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

.org-person-text strong {
  font-size: 17px;
  line-height: 22px;
}

.org-person-text span,
.org-person-text small {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.35;
}

.org-person.selected .org-person-text span,
.org-person.selected .org-person-text small {
  color: var(--md-sys-color-on-primary-container);
}

.org-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.org-report-grid.compact {
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.org-subsection {
  display: grid;
  gap: 10px;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  gap: 14px;
}

.profile-roster-card {
  align-self: start;
  position: sticky;
  top: 104px;
}

.staff-profile-panel .ui-card-content {
  display: grid;
  gap: 0;
  padding: 0;
}

.staff-profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 24px 28px 18px;
  border: 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 0;
  background: var(--md-sys-color-surface);
}

.staff-profile-main {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.staff-profile-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.staff-profile-avatar .staff-avatar {
  width: 112px;
  height: 112px;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.2);
}

.staff-profile-avatar .staff-avatar .ui-icon {
  width: 48px;
  height: 48px;
}

.staff-profile-avatar .avatar-initials {
  display: none;
}

.profile-presence {
  position: absolute;
  right: -6px;
  bottom: 8px;
  min-width: 38px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 3px solid var(--md-sys-color-surface);
  border-radius: 999px;
  padding: 0 8px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-size: 11px;
  font-weight: 800;
}

.staff-profile-main h2 {
  margin: 0;
  color: var(--md-sys-color-on-surface);
  font-size: 32px;
  line-height: 40px;
  font-weight: 500;
}

.staff-profile-main p {
  margin-top: 4px;
}

.profile-title-line {
  color: var(--md-sys-color-on-surface);
  font-size: 17px;
  line-height: 24px;
}

.staff-profile-actions {
  justify-content: flex-end;
}

.staff-profile-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.staff-profile-stats span {
  min-height: 60px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
}

.staff-profile-stats strong {
  color: var(--md-sys-color-on-surface);
  font-size: 22px;
  line-height: 1;
}

.profile-tabs {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  padding: 0 28px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
}

.profile-tab {
  position: relative;
  min-height: 54px;
  border: 0;
  border-radius: 0;
  padding: 0 1px;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.profile-tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: transparent;
}

.profile-tab:hover {
  color: var(--md-sys-color-primary);
}

.profile-tab.active {
  color: var(--md-sys-color-on-surface);
  font-weight: 700;
}

.profile-tab.active::after {
  background: var(--md-sys-color-primary);
}

.profile-stage-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.profile-stage-select {
  min-height: 112px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.profile-stage-select:hover,
.profile-stage-select.active {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.profile-stage-select strong,
.profile-stage-select small {
  display: block;
}

.profile-stage-select small {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.35;
}

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

.profile-scenario-card,
.profile-scenario-route-list {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-lowest);
}

.profile-scenario-card h4,
.profile-scenario-route-list h4 {
  margin: 0;
  font-size: 14px;
}

.profile-overview-tab {
  display: grid;
  gap: 18px;
  padding: 18px 28px 28px;
}

.profile-status-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 14px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface);
  box-shadow: var(--md-sys-elevation-level1);
}

.profile-status-card.accent {
  border-left: 5px solid var(--md-sys-color-primary);
}

.profile-status-card strong {
  display: block;
  color: var(--md-sys-color-on-surface);
  font-size: 15px;
}

.profile-status-card p {
  margin-top: 4px;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.45;
}

.profile-status-icon {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.profile-contact-section {
  display: grid;
  gap: 14px;
  padding: 0;
}

.profile-contact-section h3 {
  margin: 0;
  color: var(--md-sys-color-on-surface);
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}

.profile-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 28px;
}

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

.profile-contact-icon {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  color: var(--md-sys-color-on-surface-variant);
}

.profile-contact-item small {
  display: block;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  line-height: 18px;
}

.profile-contact-item strong {
  display: block;
  color: var(--md-sys-color-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.profile-summary-text {
  max-width: 880px;
}

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

.profile-section {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  margin: 18px 28px 28px;
  padding: 18px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface);
  box-shadow: var(--md-sys-elevation-level1);
}

.profile-section.works-with {
  min-height: auto;
}

.profile-section-head h3 {
  margin: 0;
  color: var(--md-sys-color-on-surface);
  font-size: 17px;
  line-height: 24px;
}

.profile-section-head p {
  margin: 2px 0 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 13px;
}

.profile-section-body {
  display: grid;
  gap: 9px;
}

.profile-list-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-low);
}

.profile-list-item strong {
  color: var(--md-sys-color-on-surface);
  font-size: 14px;
}

.profile-list-item p {
  margin-top: 3px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.4;
}

.profile-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-chip {
  max-width: 100%;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-stage-strip {
  margin-top: 4px;
}

.profile-message-note {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-low);
}

.profile-message-note p {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.45;
}

.profile-message-note strong {
  color: var(--md-sys-color-on-surface);
}

.tools-list,
.profile-settings-form,
.settings-lock-grid {
  display: grid;
  gap: 10px;
}

.skill-editor {
  display: grid;
  gap: 12px;
}

.skill-editor-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.skill-editor-mode-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.skill-editor-head strong {
  display: block;
  color: var(--md-sys-color-on-surface);
  font-size: 15px;
}

.skill-editor-head p {
  margin-top: 3px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.45;
}

.skill-editor-warning {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border-left: 4px solid var(--md-sys-color-tertiary);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

.skill-editor-warning strong {
  font-size: 13px;
}

.skill-editor-warning span {
  font-size: 13px;
  line-height: 1.45;
}

.skill-editor textarea {
  width: 100%;
  min-height: 440px;
  resize: vertical;
  padding: 14px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  font: 13px/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  outline: none;
}

.skill-editor textarea:focus {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent);
}

.markdown-viewer {
  display: grid;
  gap: 9px;
  padding: 16px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  line-height: 1.55;
}

.markdown-viewer h2,
.markdown-viewer h3,
.markdown-viewer h4,
.markdown-viewer p,
.markdown-viewer ul {
  margin: 0;
}

.markdown-viewer h2 {
  font-size: 22px;
  line-height: 30px;
  font-weight: 650;
}

.markdown-viewer h3 {
  padding-top: 8px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 650;
}

.markdown-viewer h4 {
  font-size: 15px;
  line-height: 22px;
  font-weight: 650;
}

.markdown-viewer p,
.markdown-viewer li {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 14px;
}

.markdown-viewer ul {
  display: grid;
  gap: 5px;
  padding-left: 22px;
}

.markdown-viewer code {
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
}

.markdown-viewer pre {
  margin: 0;
  padding: 12px;
  overflow: auto;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
}

.markdown-viewer pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}

.markdown-viewer a {
  color: var(--md-sys-color-primary);
}

.skill-markdown-view {
  min-height: 360px;
}

.skill-editor-meta,
.skill-editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.skill-editor-meta {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.skill-editor-actions {
  justify-content: flex-end;
}

.tool-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-lowest);
}

.tool-row.enabled {
  background: color-mix(in srgb, var(--md-sys-color-primary-container) 24%, var(--md-sys-color-surface));
}

.tool-row.locked {
  border-style: dashed;
}

.tool-row strong {
  color: var(--md-sys-color-on-surface);
  font-size: 14px;
}

.tool-row p {
  margin-top: 3px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.4;
}

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

.connection-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.connection-config-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-lowest);
}

.connection-config-card.compact {
  padding: 10px;
}

.connection-config-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 22px;
  background: color-mix(in srgb, #000 36%, transparent);
}

.connection-config-modal {
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface);
  box-shadow: 0 24px 70px color-mix(in srgb, #000 24%, transparent);
}

.connection-config-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.connection-config-modal-head h3,
.connection-config-modal-head p {
  margin: 0;
}

.connection-config-modal-head h3 {
  color: var(--md-sys-color-on-surface);
  font-size: 22px;
  line-height: 28px;
}

.connection-config-modal-head small {
  display: block;
  margin-top: 3px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
}

.connection-provider-guide {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-left: 4px solid var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.connection-provider-guide h4,
.connection-provider-guide p,
.connection-provider-guide ol {
  margin: 0;
}

.connection-provider-guide h4 {
  font-size: 15px;
}

.connection-provider-guide p,
.connection-provider-guide li,
.connection-provider-note {
  font-size: 13px;
  line-height: 1.45;
}

.connection-provider-guide ol {
  display: grid;
  gap: 4px;
  padding-left: 20px;
}

.connection-provider-note {
  display: grid;
  gap: 2px;
  padding: 9px;
  border-radius: var(--md-sys-shape-corner-small);
  background: color-mix(in srgb, var(--md-sys-color-surface) 72%, transparent);
}

.connection-config-head,
.connection-config-actions,
.connection-config-footer {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.connection-config-head h4 {
  margin: 2px 0 0;
  color: var(--md-sys-color-on-surface);
  font-size: 15px;
  line-height: 20px;
}

.connection-config-head small,
.connection-config-summary,
.connection-config-footer small {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.4;
}

.connection-config-summary {
  margin: 0;
}

.connection-setup-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.connection-setup-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  font-size: 12px;
  font-weight: 650;
}

.connection-setup-chip.ready {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

.connection-setup-chip svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.connection-config-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.connection-config-form .wide,
.connection-config-footer.wide {
  grid-column: 1 / -1;
}

.connection-config-footer {
  align-items: center;
}

.access-column {
  display: grid;
  align-content: start;
  gap: 9px;
}

.access-column h4 {
  margin: 0;
  color: var(--md-sys-color-on-surface);
  font-size: 14px;
  line-height: 20px;
}

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

.locked-field {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-low);
}

.locked-field small {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
}

.locked-field strong {
  color: var(--md-sys-color-on-surface);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.profile-settings-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 4px;
}

.profile-settings-form .wide {
  grid-column: 1 / -1;
}

.settings-avatar-actions,
.profile-settings-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.learning-library-card .ui-card-content {
  display: grid;
  gap: 16px;
}

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

.learned-skill-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
}

.learned-skill-card.compact {
  padding: 10px;
}

.learned-skill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.learned-rule {
  margin: 0;
  color: var(--md-sys-color-on-surface);
  font-size: 14px;
  line-height: 1.45;
}

.staff-chip-button,
.staff-learning-button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.staff-chip-button {
  padding: 0;
}

.staff-learning-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.staff-learning-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 999px;
  background: var(--md-sys-color-surface-container-lowest);
}

.staff-learning-button > span:last-child {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    --sidebar-width: 88px;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }

  .sidebar {
    position: fixed;
    height: 100vh;
  }

  .brand-copy,
  .nav-label,
  .sidebar-footer span:not(.status-dot) {
    display: none;
  }

  .brand-block {
    min-height: auto;
    display: grid;
    justify-items: center;
    padding: 0 0 18px;
    gap: 10px;
  }

  .side-nav {
    grid-template-columns: 1fr;
    align-items: center;
  }

  .nav-item {
    width: 56px;
    min-height: 56px;
    padding: 0;
    justify-content: center;
    border-radius: 18px;
  }

  .nav-icon {
    display: inline-grid;
  }

  .department-hero-grid,
  .department-stat-grid,
  .org-layout,
  .profile-layout,
  .profile-contact-grid,
  .profile-settings-form,
  .settings-lock-grid,
  .profile-section-grid {
    grid-template-columns: 1fr;
  }

  .profile-roster-card {
    position: static;
  }
}

@media (max-width: 720px) {
  html,
  body,
  #root {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .app-shell,
  .app-shell.sidebar-collapsed {
    --sidebar-width: 72px;
    grid-template-columns: var(--sidebar-width) minmax(0, calc(100vw - var(--sidebar-width)));
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .sidebar {
    width: var(--sidebar-width);
    padding-inline: 8px;
  }

  .workspace {
    padding: 0 14px 28px;
    width: calc(100vw - var(--sidebar-width)) !important;
    max-width: calc(100vw - var(--sidebar-width)) !important;
    overflow-x: hidden;
  }

  .topbar {
    margin: 0 -14px;
    padding: 12px 14px;
  }

  .department-actions,
  .staff-profile-actions,
  .learning-toolbar {
    width: 100%;
  }

  .department-actions .ui-button,
  .staff-profile-actions .ui-button {
    flex: 1 1 160px;
  }

  .staff-profile-hero {
    grid-template-columns: 1fr;
  }

  .staff-profile-main {
    align-items: flex-start;
  }

  .staff-profile-avatar .staff-avatar {
    width: 64px;
    height: 64px;
  }

  .staff-profile-avatar .staff-avatar .ui-icon {
    width: 30px;
    height: 30px;
  }

  .profile-presence {
    right: -10px;
    bottom: -4px;
    min-width: 32px;
    height: 28px;
    font-size: 10px;
  }

  .staff-profile-main h2 {
    font-size: 24px;
    line-height: 30px;
  }

  .staff-profile-stats {
    grid-template-columns: 1fr;
  }

  .profile-tabs {
    gap: 18px;
    padding: 0 16px;
  }

  .profile-overview-tab {
    padding: 16px;
  }

  .profile-section {
    margin: 16px;
  }

  .project-step-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .project-step-owner {
    grid-column: 2;
    justify-content: flex-start;
  }

  .project-step-owner small {
    text-align: left;
  }

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

.staff-skill-editor-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 16px;
  margin-top: 14px;
}

.staff-skill-list {
  display: grid;
  gap: 8px;
  align-content: start;
}

.staff-skill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.staff-skill-row.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}

.staff-skill-row span:last-child {
  display: grid;
  gap: 2px;
}

.staff-skill-row small {
  color: var(--muted);
  line-height: 1.3;
}

.staff-skill-detail {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
}

.staff-skill-form {
  margin-top: 12px;
}

.staff-skill-blueprint-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.staff-skill-blueprint-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.staff-skill-blueprint-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  margin-bottom: 4px;
}

.staff-skill-blueprint-grid strong {
  display: block;
  color: var(--text);
  margin-bottom: 4px;
}

.staff-skill-blueprint-grid p {
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

.assignment-checklist {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  display: grid;
  gap: 0;
  max-height: 320px;
  overflow: auto;
}

.assignment-check-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 12px;
}

.assignment-check-row:last-child {
  border-bottom: 0;
}

.assignment-check-row.selected {
  background: var(--primary-container);
}

.assignment-check-row.needs-setup:not(.selected) {
  cursor: not-allowed;
  opacity: 0.66;
}

.assignment-check-row strong,
.assignment-check-row small {
  display: block;
}

.assignment-check-row small,
.field-hint {
  color: var(--muted);
  font-size: 0.82rem;
}

@media (max-width: 900px) {
  .staff-skill-editor-layout {
    grid-template-columns: 1fr;
  }

  .staff-skill-blueprint-grid {
    grid-template-columns: 1fr;
  }

  .departments-home-hero,
  .department-explorer-toolbar,
  .tool-setup-hero,
  .tool-console-controls {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .departments-home-hero,
  .department-explorer-toolbar,
  .tool-console-controls {
    flex-direction: column;
  }

  .tool-console-right-controls,
  .filter-dropdown,
  .tool-search-field,
  .segmented-control {
    width: 100%;
  }

  .segmented-control button {
    flex: 1 1 0;
  }

  .tool-console-card-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .tool-console-card-head .ui-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }
}