/* SSME shared UI foundation 2026.10.18.1.
   UI Director implementation standard after owner consistency correction.
   Product owners vendor this exact file and map their existing shell/controls.
   Opt in at <html data-ssme-ui="2026-10">. Not owner aesthetic approval. */
:root {
  --ssme-ui-version: "2026.10.18.1";
  --ssme-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ssme-font-body: 15px;
  --ssme-font-control: 14px;
  --ssme-font-data: 14px;
  --ssme-font-meta: 13px;
  --ssme-font-title: 28px;
  --ssme-font-section: 20px;
  --ssme-leading-body: 1.5;
  --ssme-leading-title: 1.2;
  --ssme-weight-body: 400;
  --ssme-weight-label: 600;
  --ssme-weight-heading: 700;
  --ssme-brand: #cc0000;
  --ssme-brand-hover: #a90000;
  --ssme-ink: #24272b;
  --ssme-muted: #60656c;
  --ssme-canvas: #f3f4f5;
  --ssme-surface: #ffffff;
  --ssme-line: #dfe2e5;
  --ssme-control-line: #aeb4bb;
  --ssme-focus: #b21f28;
  --ssme-radius: 6px;
  --ssme-space-1: 4px;
  --ssme-space-2: 8px;
  --ssme-space-3: 12px;
  --ssme-space-4: 16px;
  --ssme-space-5: 24px;
  --ssme-space-6: 32px;
  --ssme-header-height: 56px;
  --ssme-logo-height: 28px;
  --ssme-control-height: 44px;
  --ssme-page-gutter: 24px;
  --ssme-page-max: 1440px;
}
html[data-ssme-ui="2026-10"] { color-scheme: light; }
html[data-ssme-ui="2026-10"] body {
  margin: 0;
  font-family: var(--ssme-font-sans);
  font-size: var(--ssme-font-body);
  font-weight: var(--ssme-weight-body);
  line-height: var(--ssme-leading-body);
  color: var(--ssme-ink);
  background: var(--ssme-canvas);
}
html[data-ssme-ui="2026-10"] :where(button, input, select, textarea) {
  font-family: var(--ssme-font-sans);
}
html[data-ssme-ui="2026-10"] :where(.ssme-app-header, .ssme-page, .ssme-toolbar, .ssme-button, .ssme-field) {
  box-sizing: border-box;
}
.ssme-app-header {
  min-height: var(--ssme-header-height);
  display: flex;
  align-items: center;
  gap: var(--ssme-space-3);
  padding: 0 var(--ssme-page-gutter);
  color: var(--ssme-ink);
  background: var(--ssme-surface);
  border-bottom: 1px solid var(--ssme-line);
}
.ssme-brand-logo { display: block; height: var(--ssme-logo-height); width: auto; flex-shrink: 0; }
.ssme-brand-fallback { color: var(--ssme-brand); font-size: 24px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; }
.ssme-workspace-name { min-width: 0; font-size: 16px; line-height: 1.25; font-weight: 600; }
.ssme-header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ssme-app-nav { font-family: var(--ssme-font-sans); font-size: 14px; font-weight: 600; }
.ssme-app-nav :where(a, button) { min-height: 44px; box-sizing: border-box; }
.ssme-page {
  width: 100%;
  max-width: var(--ssme-page-max);
  margin: 0 auto;
  padding: var(--ssme-space-5) var(--ssme-page-gutter);
  min-width: 0;
}
.ssme-page--wide { max-width: none; }
.ssme-page-title { margin: 0; color: var(--ssme-ink); font: 700 var(--ssme-font-title)/var(--ssme-leading-title) var(--ssme-font-sans); letter-spacing: -0.025em; }
.ssme-section-title { margin: 0; color: var(--ssme-ink); font: 700 var(--ssme-font-section)/1.3 var(--ssme-font-sans); letter-spacing: -0.015em; }
.ssme-page-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ssme-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; min-width: 0; }
.ssme-work-surface { min-width: 0; background: var(--ssme-surface); }
.ssme-field-label { display: block; margin-bottom: 6px; font-size: 13px; line-height: 1.4; font-weight: 600; }
.ssme-field {
  min-width: 0;
  max-width: 100%;
  min-height: var(--ssme-control-height);
  padding: 8px 12px;
  border: 1px solid var(--ssme-control-line);
  border-radius: var(--ssme-radius);
  color: var(--ssme-ink);
  background: var(--ssme-surface);
  font: 400 var(--ssme-font-control)/1.4 var(--ssme-font-sans);
}
.ssme-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: var(--ssme-control-height);
  padding: 8px 14px;
  border: 1px solid var(--ssme-control-line);
  border-radius: var(--ssme-radius);
  color: var(--ssme-ink);
  background: var(--ssme-surface);
  font: 600 var(--ssme-font-control)/1.4 var(--ssme-font-sans);
  text-decoration: none;
  cursor: pointer;
}
.ssme-button--primary { background: var(--ssme-brand); border-color: var(--ssme-brand); color: #fff; }
.ssme-button--primary:hover { background: var(--ssme-brand-hover); border-color: var(--ssme-brand-hover); }
.ssme-button:disabled { opacity: .6; cursor: not-allowed; }
.ssme-button:focus-visible, .ssme-field:focus-visible, .ssme-app-nav :where(a, button):focus-visible {
  outline: 2px solid var(--ssme-focus);
  outline-offset: 2px;
}
.ssme-data { font-size: var(--ssme-font-data); line-height: 1.45; }
.ssme-meta { font-size: var(--ssme-font-meta); line-height: 1.45; color: var(--ssme-muted); }
.ssme-numeric { font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  :root { --ssme-font-title: 24px; --ssme-page-gutter: 16px; }
  .ssme-page { padding-top: 16px; padding-bottom: 16px; }
  .ssme-app-header { gap: 8px; }
}