/*
 * cRUD Morph Console styles (V2-12; since P3-37 a member of the cRUD product design family).
 *
 * The Console shares the family's light-first application shell: a softly tinted glass frame that brightens to mint and
 * aqua, a compact icon-led sidebar grouped by task, an integrated top bar, and one large rounded white canvas with
 * restrained borders and shadows. It shares the family's ink and dark-green actions, its mint information surfaces, its
 * type scale (14px body, 13px navigation, 22px page titles), its 4px spacing rhythm, its radii (6, 10, 12, 14, 20 and
 * 26px), its pill badges and its focus ring. cRUD Morph keeps its own name and mark (two morphing squares), its own
 * groups and sections, and a denser layout where technical detail needs it. The light scheme is the family's canonical
 * presentation and the only one: like the rest of the family, the Console does not switch to a dark scheme by itself.
 * Form controls keep a boundary of at least 3:1 against their surface, so that every field stays identifiable.
 *
 * Icons are drawn by this stylesheet alone, from borders and gradients in the current text colour: the page loads no
 * image or font, and every icon is hidden from assistive technology beside the text that names it.
 *
 * Design tokens: typography (--cm-font-*, --cm-tracking-*), spacing (--cm-space-*), layout (--cm-sidebar-*,
 * --cm-header-height, --cm-page-width), colour (--cm-color-*, --cm-shell-*), borders (--cm-border-*,
 * --cm-divider-color, --cm-radius*), elevation (--cm-shadow-*), motion (--cm-motion-*), focus (--cm-focus-*), status
 * (--cm-status-*, each with a surface and a border, and --cm-dot-*) and icons (--cm-icon-stroke). Breakpoints: narrow
 * below 768px (the section list behind a button and stacked tables), medium from 768px (a compact sidebar) and wide
 * from 1024px. Every status is also named in text, never by colour alone.
 */

:root {
  --cm-font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cm-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cm-font-size: 14px;
  --cm-font-size-small: 12px;
  --cm-font-size-nav: 13px;
  --cm-font-size-title: 14px;
  --cm-font-size-heading: 22px;
  --cm-font-size-figure: 22px;
  --cm-line-height: 1.5;
  --cm-tracking-tight: -0.01em;
  --cm-tracking-wide: 0.06em;
  --cm-space-1: 4px;
  --cm-space-2: 8px;
  --cm-space-3: 12px;
  --cm-space-4: 16px;
  --cm-space-5: 24px;
  --cm-space-6: 32px;
  --cm-space-7: 48px;
  --cm-sidebar-expanded: 240px;
  --cm-sidebar-collapsed: 72px;
  --cm-sidebar-width: var(--cm-sidebar-expanded);
  --cm-header-height: 64px;
  --cm-page-width: 88rem;
  --cm-icon-stroke: 1.6px;
  --cm-color-text: #081817;
  --cm-color-muted: #52606d;
  --cm-color-label: #3e4c59;
  --cm-color-disabled: #9aa5b1;
  --cm-color-surface: #ffffff;
  --cm-color-canvas: #ffffff;
  --cm-color-background: #f7fbfa;
  --cm-color-well: #f3f8f7;
  --cm-color-information: #d6e7e5;
  --cm-color-hover: #eef5f3;
  --cm-color-accent: #306f75;
  --cm-color-accent-text: #ffffff;
  --cm-color-identity: #306f75;
  --cm-color-icon: #0f302e;
  --cm-color-link-line: #9cc9c5;
  --cm-color-action: #0f302e;
  --cm-color-action-hover: #081817;
  --cm-color-action-text: #ffffff;
  --cm-navigation-surface: var(--cm-color-action);
  --cm-on-navigation: #ffffff;
  --cm-on-navigation-muted: rgba(255, 255, 255, 0.74);
  --cm-on-navigation-subtle: rgba(255, 255, 255, 0.62);
  --cm-navigation-hover: rgba(255, 255, 255, 0.09);
  --cm-navigation-selected: rgba(255, 255, 255, 0.15);
  --cm-navigation-border: rgba(255, 255, 255, 0.2);
  --cm-focus-on-navigation: #a9d3cc;
  /* The light canvas's edge on the dark frame: a crisp white line, a translucent white rim and a soft white glow. */
  --cm-canvas-divider: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 5px rgba(255, 255, 255, 0.14), 0 0 36px 2px rgba(255, 255, 255, 0.2);
  --cm-canvas-divider-narrow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.12);
  --cm-on-navigation-pill: rgba(255, 255, 255, 0.12);
  --cm-pill-height: 24px;
  --cm-pill-radius: 12px;
  --cm-pill-dot: 6px;
  --cm-color-danger: #b91c1c;
  --cm-color-danger-fill: #dc2626;
  --cm-color-danger-fill-hover: #b91c1c;
  --cm-color-danger-text: #ffffff;
  --cm-border-color: #d9e2ec;
  --cm-border-soft: #e4ebf2;
  --cm-border-strong: #7c8896;
  --cm-control-border: #8792a0;
  --cm-control-border-hover: #5c6672;
  --cm-divider-color: #e5eaf0;
  --cm-shell-border: #c3dad6;
  --cm-border-width: 1px;
  --cm-radius-sm: 6px;
  --cm-radius: 10px;
  --cm-radius-md: 12px;
  --cm-radius-lg: 14px;
  --cm-radius-xl: 20px;
  --cm-radius-2xl: 26px;
  --cm-focus-color: #306f75;
  --cm-focus-width: 2px;
  --cm-status-positive: #146c34;
  --cm-status-positive-surface: #e7f5ec;
  --cm-status-positive-border: #b7dfc5;
  --cm-status-notice: #245a5f;
  --cm-status-notice-surface: #e3f0ee;
  --cm-status-notice-border: #b5d6d2;
  --cm-status-warning: #8a5a00;
  --cm-status-warning-surface: #fdf3e1;
  --cm-status-warning-border: #f3d9a4;
  --cm-status-critical: #b91c1c;
  --cm-status-critical-surface: #fdecec;
  --cm-status-critical-border: #f5c2c2;
  --cm-status-synthetic: #5a2d82;
  --cm-status-synthetic-surface: #f2ecf8;
  --cm-status-synthetic-border: #d8c6ea;
  --cm-status-neutral: #52606d;
  --cm-status-neutral-surface: #f3f8f7;
  --cm-status-neutral-border: #d9e2ec;
  --cm-dot-positive: #16a34a;
  --cm-dot-notice: #306f75;
  --cm-dot-warning: #d97706;
  --cm-dot-critical: #dc2626;
  --cm-dot-neutral: #7c8896;
  --cm-shell-top: #ffffff;
  --cm-shell-mid: #f7fbfa;
  --cm-shell-mint: #d9ece8;
  --cm-shell-aqua: #a9d3cc;
  --cm-shell-glow: rgba(255, 240, 226, 0.7);
  --cm-nav-hover: rgba(255, 255, 255, 0.62);
  --cm-quiet-hover: rgba(8, 24, 23, 0.05);
  --cm-preview-stripe: #ebe2f5;
  --cm-overlay: rgba(8, 24, 23, 0.75);
  --cm-shadow-xs: 0 1px 2px rgba(8, 24, 23, 0.04);
  --cm-shadow-sm: 0 1px 3px rgba(8, 24, 23, 0.06), 0 1px 2px rgba(8, 24, 23, 0.04);
  --cm-shadow-md: 0 4px 12px rgba(8, 24, 23, 0.07);
  --cm-shadow-lg: 0 12px 32px rgba(8, 24, 23, 0.1);
  --cm-shadow-frame: 0 0 0 1px rgba(255, 255, 255, 0.96), -8px -4px 24px rgba(255, 255, 255, 0.34);
  --cm-shadow-dialog: 0 0 0 8px rgba(8, 24, 23, 0.05), 0 24px 64px rgba(8, 24, 23, 0.14);
  --cm-motion-fast: 120ms;
  --cm-motion-standard: 180ms;
  --cm-motion-enter: 240ms;
  --cm-motion-easing: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--cm-navigation-surface);
  color: var(--cm-color-text);
  font-family: var(--cm-font-family);
  line-height: var(--cm-line-height);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* The root keeps the browser's own size, so every rem width is the family's; the text itself is 14px. */
body { font-size: var(--cm-font-size); }

a {
  color: var(--cm-color-accent);
  text-decoration-color: var(--cm-color-link-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--cm-color-text); text-decoration-color: currentColor; }

:focus-visible {
  outline: var(--cm-focus-width) solid var(--cm-focus-color);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--cm-space-3);
  top: -64px;
  padding: var(--cm-space-2) var(--cm-space-4);
  background: var(--cm-color-action);
  color: var(--cm-color-action-text);
  border-radius: var(--cm-radius);
  box-shadow: var(--cm-shadow-md);
  font-weight: 500;
  z-index: 60;
}
.skip-link:focus { top: var(--cm-space-3); }

/*
 * The shell (since Build 3): a solid dark-green frame, the family's primary action colour, around one light canvas. On a
 * wide screen the application is exactly one viewport tall: the top bar stays, and the section list and the canvas each
 * scroll on their own, so the page itself never scrolls. A narrow screen scrolls as one page.
 */
.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--cm-navigation-surface);
  color: var(--cm-color-text);
}
@media (min-width: 768px) {
  .shell:has(> .layout) { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .shell:has(> .layout) > * { flex: 0 0 auto; }
  .shell:has(> .layout) > .layout { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  /* Each scroller is the containing block of its own visually hidden labels, so none of them can stretch the page. */
  .shell:has(> .layout) .navigation { position: relative; height: 100%; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
  .shell:has(> .layout) .main { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
}

/*
 * The local preview's development strip: development only, never part of the production page. One hatched line states
 * that everything is synthetic; its notice and controls open beneath it on request. Its monospace type, purple hatch
 * and dashed edges belong to no product control, so it can never be mistaken for one.
 */
.shell > .banner, .preview-strip {
  background: repeating-linear-gradient(-45deg, var(--cm-status-synthetic-surface) 0 10px, var(--cm-preview-stripe) 10px 20px);
  color: var(--cm-status-synthetic);
  border-bottom: var(--cm-border-width) dashed var(--cm-status-synthetic-border);
  font-family: var(--cm-font-mono);
  font-size: var(--cm-font-size-small);
}
.shell > .banner { padding: 6px var(--cm-space-5); font-weight: 600; }
.preview-strip-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--cm-space-3); min-height: 34px; margin: 0; padding: 3px var(--cm-space-5); }
.preview-strip-label { font-weight: 700; }
.preview-strip-text { min-width: 0; flex: 1 1 18rem; }
.preview-strip-bar [role="status"]:empty { display: none; }
.preview-strip .button { min-height: 26px; padding: 0 var(--cm-space-3); border-style: dashed; border-color: var(--cm-status-synthetic-border); background: var(--cm-status-synthetic-surface); color: var(--cm-status-synthetic); font-family: var(--cm-font-mono); font-size: var(--cm-font-size-small); box-shadow: none; }
.preview-toggle { margin-left: auto; }
.preview-toggle::after { content: "\25BE" / ""; }
.preview-toggle[aria-expanded="true"]::after { content: "\25B4" / ""; }
.preview-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cm-space-2) var(--cm-space-3);
  align-items: center;
  padding: var(--cm-space-2) var(--cm-space-5) 10px;
  border-top: var(--cm-border-width) dashed var(--cm-status-synthetic-border);
  background: var(--cm-status-synthetic-surface);
}
.preview-controls[hidden] { display: none; }
.preview-notice { flex: 1 1 100%; margin: 0; }
.preview-controls label { font-weight: 600; }
.preview-controls select { width: auto; min-width: 14rem; min-height: 28px; padding-block: 2px; font-family: var(--cm-font-mono); font-size: var(--cm-font-size-small); border-style: dashed; border-color: var(--cm-status-synthetic-border); }
.preview-identities {
  display: grid;
  gap: var(--cm-space-2);
  max-width: 28rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.preview-identities .button { width: 100%; justify-content: flex-start; text-align: left; }

/* The top bar: the product, the sidebar control, the organization, and the session's environment, role and account. */
.header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cm-space-2) var(--cm-space-3);
  min-height: var(--cm-header-height);
  padding: var(--cm-space-2) var(--cm-space-5) var(--cm-space-2) var(--cm-space-4);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  width: calc(var(--cm-sidebar-expanded) - var(--cm-space-4) - 48px);
  min-width: 0;
}
/* The approved cRUD mark from the company brand package (P3-38): its dark variant on the frame, its light variant on a card. */
.brand-mark {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background: url("/assets/brand/mark-dark-128.png") center / contain no-repeat;
}
.brand-mark-light { background-image: url("/assets/brand/mark-light-128.png"); }
.header, .header .product { color: var(--cm-on-navigation); }
.product { font-size: 15px; font-weight: 700; letter-spacing: var(--cm-tracking-tight); white-space: nowrap; }
.product-area { color: var(--cm-on-navigation-muted); font-size: var(--cm-font-size-nav); font-weight: 500; }
.navigation-collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-right: var(--cm-space-3);
  padding: 0;
  border: var(--cm-border-width) solid transparent;
  border-radius: var(--cm-radius-md);
  background: transparent;
  color: var(--cm-on-navigation);
  cursor: pointer;
  transition: background-color var(--cm-motion-fast) var(--cm-motion-easing);
}
.navigation-collapse:hover { background: var(--cm-navigation-hover); }
.organization {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: var(--cm-space-3);
  font-weight: 600;
}
.organization-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--cm-navigation-selected);
  box-shadow: inset 0 0 0 1px var(--cm-navigation-border);
  color: var(--cm-on-navigation);
  font-size: var(--cm-font-size-small);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.organization { flex: 1 1 auto; color: var(--cm-on-navigation); }
.organization-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session { display: flex; flex-wrap: wrap; gap: var(--cm-space-2); align-items: center; margin-left: auto; }
/*
 * Pills (since the Console UI Build 3 visual correction): one family for every environment, role, status, result,
 * ownership, availability, severity, access level, readiness and commercial state, and for every capability or event
 * label. Each is 24px tall with a 12px radius, a 1px border and 12px medium text in sentence case. A state shows a dot
 * of its tone before its words; a label (a role, a capability, an event type) shows none. The tones are positive,
 * notice for information, warning for pending, critical for failure, neutral, and synthetic for simulated facts. A long
 * label wraps inside its pill, whose corners stay rounded on every line.
 */
.badge, .environment, .role, .chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: var(--cm-pill-height);
  padding: 3px 10px;
  border: var(--cm-border-width) solid var(--cm-status-neutral-border);
  border-radius: var(--cm-pill-radius);
  background: var(--cm-status-neutral-surface);
  color: var(--cm-status-neutral);
  font-family: var(--cm-font-family);
  font-size: var(--cm-font-size-small);
  font-weight: 500;
  line-height: 16px;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: break-word;
}
.badge::before, .environment::before {
  content: "";
  flex: 0 0 auto;
  width: var(--cm-pill-dot);
  height: var(--cm-pill-dot);
  border-radius: 50%;
  background: currentColor;
}
.badge-sentence::first-letter { text-transform: uppercase; }
.environment {
  background: var(--cm-status-notice-surface);
  border-color: var(--cm-status-notice-border);
  color: var(--cm-status-notice);
}
/* Production is set apart by its own tone as well as its name. */
.environment-production {
  background: var(--cm-status-critical-surface);
  border-color: var(--cm-status-critical-border);
  color: var(--cm-status-critical);
}
.environment-staging {
  background: var(--cm-status-warning-surface);
  border-color: var(--cm-status-warning-border);
  color: var(--cm-status-warning);
}

.layout {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: var(--cm-sidebar-width) minmax(0, 1fr);
  min-height: calc(100vh - var(--cm-header-height));
}

/* The sidebar: the family's quiet, icon-led list, grouped by task, with a marker on the current row. */
.navigation {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  padding: var(--cm-space-1) var(--cm-space-3) var(--cm-space-5);
}
.navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* Since P3-20: on a narrow screen the section list opens from a button naming the current section; wider screens always show it. */
.navigation ul[hidden] { display: none; }
.navigation .navigation-groups { gap: var(--cm-space-3); }
.navigation .navigation-toggle { width: 100%; justify-content: flex-start; font-weight: 600; }
.navigation-toggle .icon { order: -1; color: var(--cm-color-icon); }
.navigation-toggle::after { content: "\25BE" / ""; margin-left: auto; }
.navigation-toggle[aria-expanded="true"]::after { content: "\25B4" / ""; }
.navigation-group-title {
  display: block;
  padding: 0 10px 4px;
  color: var(--cm-color-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--cm-tracking-wide);
  text-transform: uppercase;
}
.navigation a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 7px 10px 7px 6px;
  border-radius: var(--cm-radius-md);
  color: var(--cm-color-text);
  font-size: var(--cm-font-size-nav);
  text-decoration: none;
  transition: background-color var(--cm-motion-fast) var(--cm-motion-easing);
}
.navigation a .icon { color: var(--cm-color-icon); }
.navigation a:hover { background: var(--cm-color-hover); color: var(--cm-color-text); }
.navigation a[aria-current="page"] { font-weight: 600; }
.navigation a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--cm-space-3));
  top: 50%;
  width: 6px;
  height: 14.5px;
  transform: translateY(-50%);
  border-radius: 0 2px 2px 0;
  background: var(--cm-color-action);
}
.navigation-label { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .navigation .navigation-toggle { display: none; }
  .navigation ul[hidden] { display: flex; }
  .navigation-group-title { color: var(--cm-on-navigation-subtle); }
  .navigation a { color: var(--cm-on-navigation-muted); }
  .navigation a .icon { color: currentColor; }
  .navigation a:hover { background: var(--cm-navigation-hover); color: var(--cm-on-navigation); }
  .navigation a[aria-current="page"] { background: var(--cm-navigation-selected); box-shadow: inset 0 0 0 1px var(--cm-navigation-border); color: var(--cm-on-navigation); }
  .navigation a[aria-current="page"]::before { background: var(--cm-on-navigation); }
  /* A collapsed sidebar is a rail of icons: each link keeps its title as its name, shown beside it on hover and focus. */
  .shell-collapsed { --cm-sidebar-width: var(--cm-sidebar-collapsed); }
  .shell-collapsed .navigation-group-title, .shell-collapsed .navigation-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .shell-collapsed .navigation-group + .navigation-group { padding-top: var(--cm-space-3); border-top: var(--cm-border-width) solid var(--cm-navigation-border); }
  .shell-collapsed .navigation .navigation-groups { gap: var(--cm-space-2); }
  .shell-collapsed .navigation a { justify-content: center; width: 44px; padding: 8px; }
  /* The name beside a rail icon is placed against the viewport, so the scrolling rail never clips it. */
  .shell-collapsed .navigation a:hover::after, .shell-collapsed .navigation a:focus-visible::after {
    content: attr(data-label);
    position: fixed;
    left: calc(var(--cm-sidebar-collapsed) + 6px);
    padding: 4px 10px;
    border-radius: var(--cm-radius-sm);
    background: var(--cm-color-surface);
    color: var(--cm-color-text);
    box-shadow: var(--cm-shadow-md);
    font-size: var(--cm-font-size-small);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 30;
  }
}

/* The canvas: one large rounded white surface, raised from the frame. */
.main {
  min-width: 0;
  padding: 28px max(28px, calc((100% - var(--cm-page-width)) / 2)) var(--cm-space-7);
  background: var(--cm-color-canvas);
  border-top-left-radius: var(--cm-radius-2xl);
  box-shadow: var(--cm-canvas-divider);
}
.main:focus { outline: none; }
.shell > .main { margin: var(--cm-space-4) var(--cm-space-5) var(--cm-space-5); border-radius: var(--cm-radius-2xl); flex: 1 0 auto; }
h1 { font-size: var(--cm-font-size-heading); font-weight: 600; line-height: 1.2; letter-spacing: var(--cm-tracking-tight); margin: 0 0 var(--cm-space-2); }
h1:focus { outline: none; }
h2 { font-size: var(--cm-font-size-title); font-weight: 600; line-height: 1.35; margin: 0 0 var(--cm-space-3); }
h3 { font-size: 13px; font-weight: 600; margin: var(--cm-space-4) 0 var(--cm-space-2); }
p { margin: 0 0 var(--cm-space-3); }
p:last-child { margin-bottom: 0; }

/* The page header: an eyebrow, the title, one supporting sentence and the session's environment. */
.page-header { margin-bottom: var(--cm-space-5); }
.page-header h1 { margin: 0; }
.page-eyebrow { margin: 0 0 2px; color: var(--cm-color-identity); font-size: var(--cm-font-size-nav); font-weight: 600; }
.page-summary { margin: 6px 0 0; max-width: 60rem; color: var(--cm-color-muted); }
.environment-notice { margin: var(--cm-space-2) 0 0; color: var(--cm-color-muted); font-size: var(--cm-font-size-small); }
.environment-notice strong { font-weight: 500; }
.main > .environment-notice { margin-bottom: var(--cm-space-5); }

.stack { display: flex; flex-direction: column; gap: var(--cm-space-5); }
/* A group inside a card is tighter than the page's own sections, and its heading sits on its first line. */
.card .stack { gap: var(--cm-space-3); }
.card .stack > h3:first-child { margin: 0; }

/* Cards: white sections with a soft border, and quieter wells inside them. */
.card {
  background: var(--cm-color-surface);
  border: var(--cm-border-width) solid var(--cm-border-soft);
  border-radius: var(--cm-radius-lg);
  padding: var(--cm-space-4) 18px 18px;
  min-width: 0;
}
.card > h2:first-child { margin-bottom: var(--cm-space-3); }
/* One rhythm inside every card: each block starts at least 12px below the one before it, as adjacent margins collapse. */
.card:not(.card-feature) > * + :not(h2, h3) { margin-top: var(--cm-space-3); }
.card .card { background: var(--cm-color-well); border-color: transparent; }
.muted { color: var(--cm-color-muted); }
.notice { color: var(--cm-status-notice); }
.warning { color: var(--cm-status-warning); font-weight: 600; }

.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--cm-space-5); margin: 0 0 var(--cm-space-3); }
.facts:last-child { margin-bottom: 0; }
.facts dt { color: var(--cm-color-muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }

.badge-neutral { color: var(--cm-status-neutral); background: var(--cm-status-neutral-surface); border-color: var(--cm-status-neutral-border); }
.badge-positive { color: var(--cm-status-positive); background: var(--cm-status-positive-surface); border-color: var(--cm-status-positive-border); }
.badge-notice { color: var(--cm-status-notice); background: var(--cm-status-notice-surface); border-color: var(--cm-status-notice-border); }
.badge-warning { color: var(--cm-status-warning); background: var(--cm-status-warning-surface); border-color: var(--cm-status-warning-border); }
.badge-critical { color: var(--cm-status-critical); background: var(--cm-status-critical-surface); border-color: var(--cm-status-critical-border); }
.badge-synthetic { color: var(--cm-status-synthetic); background: var(--cm-status-synthetic-surface); border-color: var(--cm-status-synthetic-border); }

/* States: loading, empty, denied, unavailable, failed and every notice, each with its own tone and its own words. */
.state {
  padding: var(--cm-space-2) var(--cm-space-3);
  border-radius: var(--cm-radius);
  border: var(--cm-border-width) solid var(--cm-status-neutral-border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.state .button { margin-left: auto; }
.state-loading { background: var(--cm-status-neutral-surface); color: var(--cm-status-neutral); }
.state-empty {
  justify-content: center;
  padding: var(--cm-space-5) var(--cm-space-4);
  border-style: dashed;
  border-color: var(--cm-border-color);
  border-radius: var(--cm-radius-lg);
  background: var(--cm-color-well);
  color: var(--cm-color-muted);
  text-align: center;
}
.state-empty strong { color: var(--cm-color-text); }
.state-denied { background: var(--cm-status-warning-surface); border-color: var(--cm-status-warning-border); color: var(--cm-status-warning); }
.state-unavailable { background: var(--cm-status-neutral-surface); color: var(--cm-status-neutral); }
.state-retryable { background: var(--cm-status-notice-surface); border-color: var(--cm-status-notice-border); color: var(--cm-status-notice); }
.state-failed { background: var(--cm-status-critical-surface); border-color: var(--cm-status-critical-border); color: var(--cm-status-critical); }
/* Since P3-20: a change with the server, its retry and a refresh are notices; an earlier or partial answer is a warning. */
.state-in-progress, .state-retrying, .state-refreshing { background: var(--cm-status-notice-surface); border-color: var(--cm-status-notice-border); color: var(--cm-status-notice); }
.state-stale, .state-partial { background: var(--cm-status-warning-surface); border-color: var(--cm-status-warning-border); color: var(--cm-status-warning); }
.main > .state { margin-bottom: var(--cm-space-4); }

.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--cm-border-color);
  border-top-color: var(--cm-color-identity);
  animation: cm-spin 0.9s linear infinite;
}
@keyframes cm-spin { to { transform: rotate(360deg); } }

/* Buttons: dark-green primary, white secondary, quiet and danger; every one names its action in text. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cm-space-2);
  font: inherit;
  font-size: var(--cm-font-size-nav);
  font-weight: 500;
  line-height: 1.25;
  padding: 0 14px;
  border-radius: var(--cm-radius);
  border: var(--cm-border-width) solid var(--cm-border-color);
  background: var(--cm-color-surface);
  color: var(--cm-color-text);
  cursor: pointer;
  min-height: 36px;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--cm-motion-standard) var(--cm-motion-easing), border-color var(--cm-motion-standard) var(--cm-motion-easing), color var(--cm-motion-standard) var(--cm-motion-easing);
}
.button:not([disabled]):not([aria-disabled="true"]):hover { background: var(--cm-color-hover); border-color: var(--cm-border-strong); color: var(--cm-color-text); }
td .button { white-space: nowrap; }
.button-primary { background: var(--cm-color-action); color: var(--cm-color-action-text); border-color: var(--cm-color-action); box-shadow: var(--cm-shadow-xs); }
.button-primary:not([disabled]):not([aria-disabled="true"]):hover { background: var(--cm-color-action-hover); border-color: var(--cm-color-action-hover); color: var(--cm-color-action-text); }
.button-quiet { background: transparent; border-color: transparent; color: var(--cm-color-text); }
.button-quiet:not([disabled]):not([aria-disabled="true"]):hover { background: var(--cm-quiet-hover); border-color: transparent; }
.button-quiet .icon { color: var(--cm-color-icon); }
.button-danger { background: var(--cm-color-danger-fill); color: var(--cm-color-danger-text); border-color: var(--cm-color-danger-fill); }
.button-danger:not([disabled]):not([aria-disabled="true"]):hover { background: var(--cm-color-danger-fill-hover); border-color: var(--cm-color-danger-fill-hover); color: var(--cm-color-danger-text); }
/* A destructive action in a list row or beside a page's state stays quiet until it is used; its confirmation is the filled one. */
td .button-danger, .row-actions .button-danger, .feature-actions .button-danger {
  background: transparent;
  color: var(--cm-color-danger);
  border-color: var(--cm-status-critical-border);
}
td .button-danger:not([disabled]):not([aria-disabled="true"]):hover, .row-actions .button-danger:not([disabled]):not([aria-disabled="true"]):hover, .feature-actions .button-danger:not([disabled]):not([aria-disabled="true"]):hover {
  background: var(--cm-status-critical-surface);
  border-color: var(--cm-color-danger);
  color: var(--cm-color-danger);
}
.button[disabled], .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* Forms: labelled fields, hints, one error summary and an error under each field. */
.form { display: flex; flex-direction: column; gap: var(--cm-space-4); max-width: 36rem; }
.form > .actions { margin-top: var(--cm-space-1); }
/* A form of a few closed choices that filter a list reads as one row, like the family's filter bars. */
.form-inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--cm-space-2) var(--cm-space-3); max-width: none; }
.form-inline > .error-summary { flex: 1 1 100%; }
.form-inline > .field { flex: 0 1 13rem; min-width: 9.5rem; gap: var(--cm-space-1); }
.form-inline > .field > .label { color: var(--cm-color-muted); font-size: var(--cm-font-size-small); }
.form-inline select { min-height: 36px; padding-block: 6px; font-size: var(--cm-font-size-nav); }
.form-inline > .actions { margin-top: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-weight: 500; }
.hint { margin: 0; color: var(--cm-color-muted); font-size: var(--cm-font-size-small); }
input[type="text"], input[type="password"], input[type="number"], select {
  font: inherit;
  padding: var(--cm-space-2) var(--cm-space-3);
  border-radius: var(--cm-radius);
  border: var(--cm-border-width) solid var(--cm-control-border);
  background-color: var(--cm-color-surface);
  color: var(--cm-color-text);
  min-height: 40px;
  width: 100%;
  transition: border-color var(--cm-motion-fast) var(--cm-motion-easing);
}
input[type="text"]:hover, input[type="password"]:hover, input[type="number"]:hover, select:hover { border-color: var(--cm-control-border-hover); }
select {
  appearance: none;
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--cm-color-muted) 50%), linear-gradient(135deg, var(--cm-color-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
[aria-invalid="true"] { border-color: var(--cm-status-critical); box-shadow: 0 0 0 1px var(--cm-status-critical); }
.checkboxes { display: flex; flex-wrap: wrap; gap: var(--cm-space-2) var(--cm-space-4); }
.checkbox { display: inline-flex; gap: var(--cm-space-2); align-items: center; min-height: 24px; }
.checkbox input { width: 16px; height: 16px; margin: 0; accent-color: var(--cm-color-action); }
/* Since P3-20: a link in a list is a target of at least 24px, and a long identifier or badge wraps instead of overflowing. */
.main li > a { display: inline-block; min-height: 24px; padding-block: 2px; }
.actions, .row-actions { display: flex; flex-wrap: wrap; gap: var(--cm-space-2); align-items: center; }
.row-actions .form { max-width: 260px; }
.error-summary {
  border: var(--cm-border-width) solid var(--cm-status-critical-border);
  border-left: 4px solid var(--cm-status-critical);
  background: var(--cm-status-critical-surface);
  color: var(--cm-status-critical);
  border-radius: var(--cm-radius);
  padding: var(--cm-space-3) var(--cm-space-4);
}
.error-summary h3 { margin-top: 0; }
.field-error { margin: 0; color: var(--cm-status-critical); font-size: var(--cm-font-size-small); font-weight: 500; }

/* Tables: a bordered container, a quiet header row, dividers between rows. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: var(--cm-border-width) solid var(--cm-border-color);
  border-radius: var(--cm-radius-lg);
  background: var(--cm-color-surface);
}
table { width: 100%; border-collapse: collapse; }
caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  padding: var(--cm-space-3) var(--cm-space-4);
  border-bottom: var(--cm-border-width) solid var(--cm-divider-color);
}
th, td { text-align: left; padding: 10px var(--cm-space-4); border-bottom: var(--cm-border-width) solid var(--cm-divider-color); vertical-align: top; overflow-wrap: break-word; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--cm-color-well); }
code { font-family: var(--cm-font-mono); font-size: 0.9em; overflow-wrap: anywhere; padding: 1px 4px; border-radius: var(--cm-radius-sm); background: var(--cm-color-well); }
td code { overflow-wrap: break-word; }
th {
  padding-block: 9px;
  background: var(--cm-color-well);
  color: var(--cm-color-muted);
  font-size: var(--cm-font-size-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Lists of links read as the family's help index: one bordered row per entry. */
.link-list { display: grid; gap: var(--cm-space-2); margin: 0; padding: 0; list-style: none; }
.link-list li { margin: 0; }
.main .link-list li > a {
  display: block;
  min-height: 0;
  padding: var(--cm-space-3) var(--cm-space-4);
  border: var(--cm-border-width) solid var(--cm-border-color);
  border-radius: var(--cm-radius-lg);
  background: var(--cm-color-surface);
  color: var(--cm-color-text);
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--cm-motion-fast) var(--cm-motion-easing);
}
.main .link-list li > a:hover { border-color: var(--cm-color-identity); }
.channel-list, .role-list { margin: 0; padding-left: var(--cm-space-5); }
.channel-list li, .role-list li { margin-bottom: var(--cm-space-2); }
.secret code {
  display: block;
  padding: var(--cm-space-3);
  font-family: var(--cm-font-mono);
  background: var(--cm-status-warning-surface);
  border: var(--cm-border-width) dashed var(--cm-status-warning);
  border-radius: var(--cm-radius);
  overflow-wrap: anywhere;
}
.reveal { border: 2px solid var(--cm-status-warning); }

/*
 * Since V2-13: Production is set apart from the Sandbox by a labelled banner with its own border, never by colour alone.
 * Since the Console UI Build 3 visual correction its cards are the family's own: the banner alone carries Production's
 * tone, the lifecycle state leads the page, and the activation gates are laid out in columns.
 */
.production-banner {
  padding: var(--cm-space-3) var(--cm-space-4);
  border: var(--cm-border-width) solid var(--cm-status-critical-border);
  border-left: 4px solid var(--cm-status-critical);
  border-radius: var(--cm-radius-lg);
  background: var(--cm-status-critical-surface);
  color: var(--cm-color-text);
}
.production-banner strong { color: var(--cm-status-critical); }
.production-state .feature-mark { background: var(--cm-status-critical-surface); color: var(--cm-status-critical); }
.reveal-production { border-color: var(--cm-status-critical); }
.checklist-summary { color: var(--cm-color-muted); font-size: var(--cm-font-size-nav); }
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--cm-space-2); margin: 0; padding: 0; list-style: none; }
.gate { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-space-2); min-width: 0; min-height: 40px; padding: 6px 10px 6px var(--cm-space-3); border: var(--cm-border-width) solid transparent; border-radius: var(--cm-radius); background: var(--cm-color-well); }
.gate-name { min-width: 0; font-size: var(--cm-font-size-nav); overflow-wrap: break-word; }
.gate .badge { flex: 0 0 auto; }
.gate-pending { border-color: var(--cm-status-warning-border); background: var(--cm-color-surface); }
.gate-skipped .gate-name { color: var(--cm-color-muted); }

.live { position: sticky; bottom: 0; min-height: 0; padding: 0 var(--cm-space-4); z-index: 10; }
.live:not(:empty) {
  position: fixed;
  right: var(--cm-space-4);
  bottom: var(--cm-space-4);
  max-width: min(34rem, calc(100vw - 2 * var(--cm-space-4)));
  z-index: 45;
  color: var(--cm-color-text);
  margin: 0;
  padding: 10px var(--cm-space-4);
  background: var(--cm-color-surface);
  border: var(--cm-border-width) solid var(--cm-border-color);
  border-radius: var(--cm-radius);
  box-shadow: var(--cm-shadow-lg);
}
.live-positive:not(:empty) { color: var(--cm-status-positive); border-left: 4px solid var(--cm-status-positive); }
.live-critical:not(:empty) { color: var(--cm-status-critical); border-left: 4px solid var(--cm-status-critical); }

/* Dialogs: a dark scrim and one raised panel with a header and a footer. */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: var(--cm-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cm-space-4);
  z-index: 50;
}
.dialog {
  background: var(--cm-color-surface);
  color: var(--cm-color-text);
  border-radius: var(--cm-radius-2xl);
  padding: 0 var(--cm-space-5);
  max-width: 32rem;
  width: 100%;
  border: var(--cm-border-width) solid var(--cm-border-color);
  box-shadow: var(--cm-shadow-dialog);
  /* Since P3-20: a dialog never outgrows a short viewport; its own content scrolls instead. */
  max-height: calc(100vh - 2 * var(--cm-space-4));
  overflow-y: auto;
  overflow-wrap: anywhere;
  animation: cm-dialog-in var(--cm-motion-enter) var(--cm-motion-easing);
}
@keyframes cm-dialog-in { from { opacity: 0; transform: scale(0.98) translateY(4px); } }
.dialog > h2 { margin: 0 calc(-1 * var(--cm-space-5)) 20px; padding: 20px var(--cm-space-5); font-size: 16px; border-bottom: var(--cm-border-width) solid var(--cm-divider-color); }
.dialog > p { color: var(--cm-color-muted); line-height: 1.65; }
.dialog > .actions {
  justify-content: flex-end;
  gap: var(--cm-space-3);
  margin: var(--cm-space-5) calc(-1 * var(--cm-space-5)) 0;
  padding: 20px var(--cm-space-5);
  border-top: var(--cm-border-width) solid var(--cm-divider-color);
}
.dialog .button[aria-disabled="true"] { opacity: 0.5; }
.dialog .field { margin-bottom: var(--cm-space-4); }
.dialog-environment {
  padding: var(--cm-space-2) var(--cm-space-3);
  background: var(--cm-status-notice-surface);
  border: var(--cm-border-width) solid var(--cm-status-notice-border);
  border-radius: var(--cm-radius);
  color: var(--cm-color-text);
}
.dialog > p.dialog-environment { color: var(--cm-color-text); }

/* Signed out: one raised card on the glass frame, opened by the cRUD mark and the cRUD Morph name. */
.connect {
  max-width: 30rem;
  margin: var(--cm-space-7) auto;
  background: var(--cm-color-surface);
  padding: var(--cm-space-6);
  border-radius: var(--cm-radius-xl);
  border: var(--cm-border-width) solid var(--cm-border-soft);
  box-shadow: var(--cm-shadow-md);
}
.connect-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--cm-space-5); }
.connect-brand .brand-mark { width: 36px; height: 36px; }
.connect-brand .product { color: var(--cm-color-text); }
.connect .form { max-width: none; }
.shell-signed-out > .main { margin: 0; padding: var(--cm-space-4); background: transparent; border-radius: 0; box-shadow: none; }

/* The Overview: this session first, then a figure per area, then one card per area that links to its detail. */
.overview { gap: var(--cm-space-4); }
.overview .stack { gap: var(--cm-space-4); }
.card-feature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cm-space-4);
  padding: 20px;
  border-color: var(--cm-color-identity);
  box-shadow: var(--cm-shadow-sm);
}
.feature-body { display: flex; align-items: flex-start; gap: 14px; min-width: 0; flex: 1 1 22rem; }
.feature-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--cm-radius);
  background: var(--cm-color-information);
  color: var(--cm-color-icon);
}
.feature-text { min-width: 0; }
.feature-eyebrow { margin: 0 0 2px; color: var(--cm-color-identity); font-size: var(--cm-font-size-small); font-weight: 600; }
.card-feature h2 { margin: 0 0 4px; font-size: 16px; }
.feature-text > p.muted { margin: 0; max-width: 46rem; }
.feature-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--cm-space-3) 0 0; }
.feature-actions { flex: 0 1 auto; justify-content: flex-end; }
.glance { min-width: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--cm-space-3); margin: 0; padding: 0; list-style: none; }
.stats li { min-width: 0; }
.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 11px var(--cm-space-4) 12px;
  border-radius: var(--cm-radius-lg);
  background: var(--cm-color-well);
}
.main .stats li > a.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 11px var(--cm-space-4) 12px;
  border: var(--cm-border-width) solid transparent;
  border-radius: var(--cm-radius-lg);
  background: var(--cm-color-well);
  color: var(--cm-color-text);
  text-decoration: none;
  transition: border-color var(--cm-motion-fast) var(--cm-motion-easing), background-color var(--cm-motion-fast) var(--cm-motion-easing);
}
.main .stats li > a.stat:hover { border-color: var(--cm-border-color); background: var(--cm-color-surface); }
.stat-label { display: flex; align-items: center; gap: 6px; color: var(--cm-color-muted); font-size: var(--cm-font-size-small); font-weight: 500; }
.stat-label .icon { color: var(--cm-color-icon); }
.stat-figure { font-size: var(--cm-font-size-figure); font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.stat-meta { color: var(--cm-color-muted); font-size: var(--cm-font-size-small); }
.overview-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--cm-space-4); align-items: start; }
.wells { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--cm-space-3); }
.well { min-width: 0; padding: var(--cm-space-3) var(--cm-space-4) 10px; border-radius: var(--cm-radius-lg); background: var(--cm-color-well); }
.well h3 { margin: 0 0 6px; }
.tally { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.tally li { display: flex; align-items: center; gap: var(--cm-space-2); min-height: 28px; font-size: var(--cm-font-size-nav); }
.tally-label { flex: 1 1 auto; color: var(--cm-color-muted); }
.tally-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--cm-dot-neutral); }
.dot-positive { background: var(--cm-dot-positive); }
.dot-notice { background: var(--cm-dot-notice); }
.dot-warning { background: var(--cm-dot-warning); }
.dot-critical { background: var(--cm-dot-critical); }
.rows { margin: 0; padding: 0; list-style: none; }
.rows li { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-space-3); padding: 9px 0; border-bottom: var(--cm-border-width) solid var(--cm-divider-color); }
.rows li:first-child { padding-top: 0; }
.rows li:last-child { border-bottom: none; padding-bottom: 0; }
.row-title { display: flex; flex-direction: column; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.row-meta { color: var(--cm-color-muted); font-size: var(--cm-font-size-small); font-weight: 400; }
.row-figure { white-space: nowrap; font-variant-numeric: tabular-nums; }
.more { display: inline-block; margin-top: var(--cm-space-3); font-size: var(--cm-font-size-nav); font-weight: 500; }
.more-links { display: flex; flex-wrap: wrap; gap: var(--cm-space-1) var(--cm-space-4); margin: var(--cm-space-1) 0 0; }
.card > .muted { margin-top: var(--cm-space-3); font-size: var(--cm-font-size-small); }

/* The top bar and the section list on the dark frame: white text, translucent white states and a mint focus ring. */
.header :focus-visible, .navigation-collapse:focus-visible { outline-color: var(--cm-focus-on-navigation); }
@media (min-width: 768px) {
  .navigation :focus-visible { outline-color: var(--cm-focus-on-navigation); }
}
.header .environment, .header .role { white-space: nowrap; }
.header .role { background: var(--cm-on-navigation-pill); border-color: var(--cm-navigation-border); color: var(--cm-on-navigation); }
.header .sign-out { color: var(--cm-on-navigation); }
.header .sign-out .icon { color: currentColor; }
.header .sign-out:not([disabled]):not([aria-disabled="true"]):hover { background: var(--cm-navigation-hover); color: var(--cm-on-navigation); }
.shell > .banner-support { margin-top: 0; }
/* The environment list: this session's environment, and every other one with whether its own Console can be opened. */
.environment-switch { position: relative; flex: 0 0 auto; }
.environment-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 2px; border: 0; border-radius: 9999px; background: transparent; color: var(--cm-on-navigation); font: inherit; cursor: pointer; }
.environment-trigger::after { content: "\25BE" / ""; font-size: 12px; }
.environment-trigger[aria-expanded="true"]::after { content: "\25B4" / ""; }
.environment-trigger:hover .environment { box-shadow: 0 0 0 2px var(--cm-navigation-border); }
.environment-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 19rem; max-width: calc(100vw - 2 * var(--cm-space-4)); margin: 0; padding: 6px; list-style: none; background: var(--cm-color-surface); color: var(--cm-color-text); border: var(--cm-border-width) solid var(--cm-border-soft); border-radius: var(--cm-radius-lg); box-shadow: var(--cm-shadow-lg); }
.environment-menu[hidden] { display: none; }
.environment-option { margin: 0; }
.environment-option-current, .environment-option-unavailable, .environment-option-open { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 8px 10px; border-radius: var(--cm-radius); text-align: left; }
.environment-option-current { background: var(--cm-status-notice-surface); }
.environment-option-open { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.environment-option-open:hover { background: var(--cm-color-hover); }
.environment-option-open:focus-visible { outline-color: var(--cm-focus-color); }
.environment-option-name { font-size: var(--cm-font-size-nav); font-weight: 600; }
.environment-option-unavailable .environment-option-name { color: var(--cm-color-muted); }
.environment-option-note { color: var(--cm-color-muted); font-size: var(--cm-font-size-small); }
.environment-option-current .environment-option-note { color: var(--cm-status-notice); font-weight: 500; }
.log-more { margin-top: var(--cm-space-3); }
.audit-log .cell-primary { white-space: normal; }
.audit-log .cell-secondary { overflow-wrap: break-word; }
.audit-log td[data-label="Reference"], .audit-log td[data-label="Time"] { white-space: nowrap; }

/* Pages: a summary row, cards with a header and their own actions, a form opened in place, filters and grids. */
.card[hidden], .create-region[hidden] { display: none; }
.card-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--cm-space-3) var(--cm-space-4); margin-bottom: 14px; }
.card-heading { flex: 1 1 18rem; min-width: 0; }
.card-heading h2 { margin: 0; }
.card-description { margin: 2px 0 0; max-width: 72ch; color: var(--cm-color-muted); font-size: var(--cm-font-size-nav); }
.card-actions { display: flex; flex-wrap: wrap; gap: var(--cm-space-2); align-items: center; }
.card-callout { background: var(--cm-color-well); border-color: transparent; }
.card-callout .card-header { margin-bottom: 6px; }
.card-create { border-color: var(--cm-color-identity); box-shadow: var(--cm-shadow-sm); }
.disclosure::after { content: "\25BE" / ""; font-size: 0.85em; }
.disclosure[aria-expanded="true"]::after { content: "\25B4" / ""; }
.create-region { margin-bottom: var(--cm-space-4); }
.create-panel { padding: var(--cm-space-4) 18px 18px; border: var(--cm-border-width) solid var(--cm-border-color); border-radius: var(--cm-radius-lg); background: var(--cm-color-well); }
.create-panel h3 { margin-top: 0; }
.create-panel input[type="text"], .create-panel select { background-color: var(--cm-color-surface); }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--cm-space-2) var(--cm-space-3); margin: 0 0 var(--cm-space-3); }
.filter { display: flex; flex-direction: column; gap: var(--cm-space-1); min-width: 9.5rem; }
.filter-search { flex: 1 1 16rem; max-width: 26rem; }
.filter-label { color: var(--cm-color-muted); font-size: var(--cm-font-size-small); font-weight: 500; }
.filter select, .filter input[type="text"] { min-height: 36px; padding-block: 6px; font-size: var(--cm-font-size-nav); }
.filter-input { position: relative; display: block; }
.filter-input .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--cm-color-muted); pointer-events: none; }
.filter-input input[type="text"] { padding-left: 34px; }
.filter-count { margin: 0 0 var(--cm-space-2) auto; color: var(--cm-color-muted); font-size: var(--cm-font-size-small); white-space: nowrap; }
.cell-stack { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cell-primary { font-weight: 500; overflow-wrap: anywhere; }
/* A card's header already names its table: the caption stays for assistive technology, except the inspector's own. */
.card-header ~ .table-wrap caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.segmented ~ .table-wrap caption { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
/* A row's own change submits as a quiet button, so the page keeps one primary action. */
td .form .button-primary { background: var(--cm-color-surface); color: var(--cm-color-text); border-color: var(--cm-border-color); box-shadow: none; }
td .form .button-primary:not([disabled]):not([aria-disabled="true"]):hover { background: var(--cm-color-hover); color: var(--cm-color-text); border-color: var(--cm-border-strong); }
@media (min-width: 768px) {
  .cell-primary { white-space: nowrap; }
}
.cell-secondary { color: var(--cm-color-muted); font-size: var(--cm-font-size-small); overflow-wrap: anywhere; }
.page-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--cm-space-4); align-items: start; }
.feature-initials { color: var(--cm-color-action-text); background: var(--cm-color-action); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.environment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--cm-space-4); align-items: stretch; }
.environment-grid > .card { display: flex; flex-direction: column; }
/* A flex card keeps its own spacing: its margins do not collapse. */
.environment-grid > .card > * + :not(h2, h3) { margin-top: 0; }
.environment-marks { display: flex; align-items: center; gap: var(--cm-space-2); margin: 0 0 var(--cm-space-3); }
.environment-route, .environment-grid > .card > .environment-route { margin-top: auto; padding-top: var(--cm-space-3); }
.environment-route .button { margin-top: var(--cm-space-2); }
.ownership-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--cm-space-3); }
.ownership { min-width: 0; padding: 14px var(--cm-space-4); border-radius: var(--cm-radius-lg); background: var(--cm-color-well); }
.ownership-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cm-space-2); margin: 0 0 6px; }
.ownership-count { margin: var(--cm-space-2) 0 0; font-size: var(--cm-font-size-nav); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: var(--cm-space-1); margin: 0; padding: 0; list-style: none; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--cm-space-3); padding: 0; list-style: none; }
.role-grid li { margin: 0; }
.role-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cm-space-1); padding: var(--cm-space-3) 14px; border: var(--cm-border-width) solid transparent; border-radius: var(--cm-radius-lg); background: var(--cm-color-well); }
.role-card > span:last-child { color: var(--cm-color-muted); font-size: var(--cm-font-size-nav); }
.role-current { border-color: var(--cm-status-notice-border); }
.capabilities summary { cursor: pointer; color: var(--cm-color-accent); font-weight: 500; }
.capabilities ul { margin: var(--cm-space-1) 0 0; padding-left: var(--cm-space-4); font-family: var(--cm-font-mono); font-size: var(--cm-font-size-small); }
.limit-row { flex-wrap: wrap; }
.meter { display: block; flex: 0 0 auto; width: 96px; height: 6px; overflow: hidden; border-radius: 9999px; background: var(--cm-color-well); box-shadow: inset 0 0 0 1px var(--cm-border-soft); }
.meter-fill { display: block; height: 100%; background: var(--cm-color-identity); }
.meter-0 { width: 0; }
.meter-1 { width: 10%; }
.meter-2 { width: 20%; }
.meter-3 { width: 30%; }
.meter-4 { width: 40%; }
.meter-5 { width: 50%; }
.meter-6 { width: 60%; }
.meter-7 { width: 70%; }
.meter-8 { width: 80%; background: var(--cm-dot-warning); }
.meter-9 { width: 90%; background: var(--cm-dot-warning); }
.meter-10 { width: 100%; background: var(--cm-dot-critical); }
/* Row actions stay compact beside dense data: small buttons, and a role change as one inline control. */
td .button { min-height: 32px; padding: 0 10px; }
td .row-actions { gap: 6px; }
td .row-actions .form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 6px; max-width: none; }
td .row-actions .form .field { gap: 2px; }
td .row-actions .form .label { color: var(--cm-color-muted); font-size: var(--cm-font-size-small); }
td .row-actions .form select { width: auto; min-height: 32px; padding-block: 4px; font-size: var(--cm-font-size-nav); }
td .row-actions .form > .actions { margin-top: 0; }
td > .row-actions > p.muted { margin: 0; font-size: var(--cm-font-size-small); }

/* Icons: one 18px outline set, drawn from borders and gradients in the current text colour. */
.icon {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
}
.icon::before, .icon::after { content: ""; position: absolute; box-sizing: border-box; }
.icon-overview::before { left: 3.5px; top: 8px; width: 11px; height: 8.5px; border: var(--cm-icon-stroke) solid; border-top: 0; border-radius: 0 0 2px 2px; }
.icon-overview::after { left: 4.6px; top: 3.4px; width: 8.8px; height: 8.8px; border-left: var(--cm-icon-stroke) solid; border-top: var(--cm-icon-stroke) solid; border-radius: 2px 0 0 0; transform: rotate(45deg); }
.icon-organization { background-image: linear-gradient(currentColor, currentColor); background-position: 7.9px 12.4px; background-size: 2.2px 3.6px; }
.icon-organization::before { left: 3.5px; top: 2px; width: 11px; height: 14.5px; border: var(--cm-icon-stroke) solid; border-radius: 2px; }
.icon-organization::after { left: 6.3px; top: 5px; width: 1.8px; height: 1.8px; border-radius: 0.4px; background: currentColor; box-shadow: 3.6px 0 0 currentColor, 0 3.4px 0 currentColor, 3.6px 3.4px 0 currentColor; }
.icon-team { background-image: radial-gradient(circle at 12.9px 6px, transparent 1.9px, currentColor 2px, currentColor 3.5px, transparent 3.6px), radial-gradient(circle at 14.6px 17.4px, transparent 3.3px, currentColor 3.4px, currentColor 4.9px, transparent 5px); }
.icon-team::before { left: 2.8px; top: 2.4px; width: 6.6px; height: 6.6px; border: var(--cm-icon-stroke) solid; border-radius: 50%; }
.icon-team::after { left: 1.2px; top: 10.6px; width: 9.8px; height: 6px; border: var(--cm-icon-stroke) solid; border-bottom: 0; border-radius: 5px 5px 0 0; }
.icon-environments { background-image: radial-gradient(circle at 5.6px 5.4px, currentColor 1px, transparent 1.2px), radial-gradient(circle at 5.6px 12.6px, currentColor 1px, transparent 1.2px); }
.icon-environments::before { left: 2.5px; top: 2.5px; width: 13px; height: 5.8px; border: var(--cm-icon-stroke) solid; border-radius: 2px; }
.icon-environments::after { left: 2.5px; top: 9.7px; width: 13px; height: 5.8px; border: var(--cm-icon-stroke) solid; border-radius: 2px; }
.icon-credentials { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-position: 12px 9.6px, 14.6px 9.6px; background-size: 1.6px 3.4px, 1.6px 2.6px; }
.icon-credentials::before { left: 1.8px; top: 5.6px; width: 7px; height: 7px; border: var(--cm-icon-stroke) solid; border-radius: 50%; }
.icon-credentials::after { left: 8.6px; top: 8.3px; width: 7.8px; height: var(--cm-icon-stroke); border-radius: 1px; background: currentColor; }
.icon-providers { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-position: 6.3px 2px, 10.1px 2px; background-size: 1.6px 4px, 1.6px 4px; }
.icon-providers::before { left: 4.4px; top: 5.6px; width: 9.2px; height: 6.8px; border: var(--cm-icon-stroke) solid; border-radius: 1.5px 1.5px 4.6px 4.6px; }
.icon-providers::after { left: 8.2px; top: 12.2px; width: var(--cm-icon-stroke); height: 4.3px; background: currentColor; }
.icon-webhooks { background-image: linear-gradient(currentColor, currentColor); background-position: 5.6px 8.2px; background-size: 6.8px 1.6px; }
.icon-webhooks::before, .icon-webhooks::after { top: 5px; width: 6.8px; height: 8px; border: var(--cm-icon-stroke) solid; }
.icon-webhooks::before { left: 1.4px; border-right: 0; border-radius: 4px 0 0 4px; }
.icon-webhooks::after { left: 9.8px; border-left: 0; border-radius: 0 4px 4px 0; }
.icon-sandbox { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-position: 2.6px 2.2px, 5.6px 10px; background-size: 12.8px 1.6px, 6.8px 1.6px; }
.icon-sandbox::before { left: 4px; top: 3px; width: 10px; height: 13px; border: var(--cm-icon-stroke) solid; border-top: 0; border-radius: 0 0 3px 3px; }
.icon-journey::before { left: 2px; top: 2px; width: 14px; height: 14px; border: var(--cm-icon-stroke) solid; border-radius: 50%; }
.icon-journey::after { left: 6.6px; top: 6.6px; width: 4.8px; height: 4.8px; border: var(--cm-icon-stroke) solid; border-radius: 1px; transform: rotate(45deg); }
.icon-optimization {
  background-image: radial-gradient(circle at 6px 5px, currentColor 2.1px, transparent 2.3px), radial-gradient(circle at 12px 9px, currentColor 2.1px, transparent 2.3px), radial-gradient(circle at 8px 13px, currentColor 2.1px, transparent 2.3px), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-position: 0 0, 0 0, 0 0, 2px 4.2px, 2px 8.2px, 2px 12.2px;
  background-size: auto, auto, auto, 14px 1.6px, 14px 1.6px, 14px 1.6px;
}
.icon-usage { background-image: linear-gradient(currentColor, currentColor); background-position: 12.9px 8px; background-size: 1.8px 7.5px; }
.icon-usage::before, .icon-usage::after { bottom: 2.5px; width: 1.8px; border-radius: 1px; background: currentColor; }
.icon-usage::before { left: 3.3px; height: 6px; }
.icon-usage::after { left: 8.1px; height: 11.5px; }
.icon-quality { background-image: radial-gradient(circle at 9px 12.4px, currentColor 1.5px, transparent 1.7px); }
.icon-quality::before { left: 2px; top: 4.6px; width: 14px; height: 8.4px; border: var(--cm-icon-stroke) solid; border-bottom: 0; border-radius: 7px 7px 0 0; }
.icon-quality::after { left: 8.2px; top: 6.6px; width: var(--cm-icon-stroke); height: 5.8px; border-radius: 1px; background: currentColor; transform: rotate(40deg); transform-origin: 50% 100%; }
.icon-audit {
  background-image: radial-gradient(circle at 3.8px 5px, currentColor 1.1px, transparent 1.3px), radial-gradient(circle at 3.8px 9px, currentColor 1.1px, transparent 1.3px), radial-gradient(circle at 3.8px 13px, currentColor 1.1px, transparent 1.3px), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-position: 0 0, 0 0, 0 0, 7px 4.2px, 7px 8.2px, 7px 12.2px;
  background-size: auto, auto, auto, 9px 1.6px, 9px 1.6px, 9px 1.6px;
}
.icon-alerts { background-image: linear-gradient(currentColor, currentColor), radial-gradient(circle at 9px 15.6px, currentColor 1.5px, transparent 1.7px); background-position: 2.4px 12.6px, 0 0; background-size: 13.2px 1.6px, auto; }
.icon-alerts::before { left: 4.2px; top: 2.6px; width: 9.6px; height: 10.6px; border: var(--cm-icon-stroke) solid; border-bottom: 0; border-radius: 4.8px 4.8px 1px 1px; }
.icon-operations { background-image: radial-gradient(circle at 9px 9px, currentColor 1.8px, transparent 2px, transparent 4.1px, currentColor 4.2px, currentColor 5.7px, transparent 5.9px, transparent 7.1px, currentColor 7.2px, currentColor 8.7px, transparent 8.9px); }
.icon-evidence::before { left: 2px; top: 2px; width: 14px; height: 14px; border: var(--cm-icon-stroke) solid; border-radius: 50%; }
.icon-evidence::after { left: 7px; top: 4.6px; width: 4px; height: 7.2px; border-right: var(--cm-icon-stroke) solid; border-bottom: var(--cm-icon-stroke) solid; transform: rotate(45deg); }
.icon-documentation { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-position: 4.2px 6.8px, 4.2px 9.8px, 10.8px 6.8px, 10.8px 9.8px; background-size: 3px 1.4px, 3px 1.4px, 3px 1.4px, 3px 1.4px; }
.icon-documentation::before { left: 2px; top: 3.5px; width: 7.4px; height: 11.5px; border: var(--cm-icon-stroke) solid; border-radius: 2px 0 0 2px; }
.icon-documentation::after { left: 8.6px; top: 3.5px; width: 7.4px; height: 11.5px; border: var(--cm-icon-stroke) solid; border-radius: 0 2px 2px 0; }
.icon-support::before { left: 2px; top: 2.8px; width: 14px; height: 10.2px; border: var(--cm-icon-stroke) solid; border-radius: 3px; }
.icon-support::after { left: 4.6px; top: 10.6px; width: 4.4px; height: 4.4px; border-right: var(--cm-icon-stroke) solid; border-bottom: var(--cm-icon-stroke) solid; transform: rotate(45deg); }
.icon-access::before { left: 3.5px; top: 8px; width: 11px; height: 8.5px; border: var(--cm-icon-stroke) solid; border-radius: 2px; }
.icon-access::after { left: 5.8px; top: 2.4px; width: 6.4px; height: 7px; border: var(--cm-icon-stroke) solid; border-bottom: 0; border-radius: 3.2px 3.2px 0 0; }
.icon-commercial { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-position: 6px 6px, 6px 9px, 6px 12px; background-size: 6px 1.6px, 6px 1.6px, 4px 1.6px; }
.icon-commercial::before { left: 3.5px; top: 2px; width: 11px; height: 14px; border: var(--cm-icon-stroke) solid; border-radius: 2px; }
.icon-production::before { left: 3.4px; top: 2px; width: var(--cm-icon-stroke); height: 14.5px; border-radius: 1px; background: currentColor; }
.icon-production::after { left: 4.2px; top: 2.6px; width: 10.6px; height: 7.4px; border: var(--cm-icon-stroke) solid; border-left: 0; border-radius: 0 2px 2px 0; }
.icon-collapse::before { left: 2px; top: 3px; width: 14px; height: 12px; border: var(--cm-icon-stroke) solid; border-radius: 2.5px; }
.icon-collapse::after { left: 6.4px; top: 3px; width: var(--cm-icon-stroke); height: 12px; background: currentColor; }
.icon-menu { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-position: 2.5px 4.2px, 2.5px 8.2px, 2.5px 12.2px; background-size: 13px 1.6px, 13px 1.6px, 13px 1.6px; }
.icon-sign-out { background-image: linear-gradient(currentColor, currentColor); background-position: 6.5px 8.2px; background-size: 9px 1.6px; }
.icon-sign-out::before { left: 2px; top: 2.8px; width: 7.5px; height: 12.4px; border: var(--cm-icon-stroke) solid; border-right: 0; border-radius: 2px 0 0 2px; }
.icon-search::before { left: 2.5px; top: 2.5px; width: 10px; height: 10px; border: var(--cm-icon-stroke) solid; border-radius: 50%; }
.icon-search::after { left: 11.6px; top: 10.6px; width: var(--cm-icon-stroke); height: 5.4px; border-radius: 1px; background: currentColor; transform: rotate(-45deg); }
.icon-sign-out::after { left: 10px; top: 6.4px; width: 5.2px; height: 5.2px; border-top: var(--cm-icon-stroke) solid; border-right: var(--cm-icon-stroke) solid; transform: rotate(45deg); }

@media (min-width: 768px) and (max-width: 1023px) {
  :root { --cm-sidebar-expanded: 216px; }
  .product-area { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* From 768px the top bar is one row: the organization's name gives way before the session's context wraps. */
@media (min-width: 768px) {
  .header { flex-wrap: nowrap; }
  .organization { flex: 1 1 0; }
  .session { flex: 0 0 auto; flex-wrap: nowrap; }
}
/* Below 1024px the top bar shows an environment's short name; its full label stays readable to assistive technology. */
@media (max-width: 1023px) {
  .environment-detail { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1199px) {
  .overview-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .header { gap: var(--cm-space-2); padding: 10px var(--cm-space-4); }
  .brand { width: auto; flex: 1 1 auto; }
  .navigation-collapse { display: none; }
  /* The account control stays beside the product; the organization, environment and role follow on their own rows. */
  .session { display: contents; }
  .sign-out { order: 2; margin-left: auto; }
  /* The organization needs room for its name, so it starts the second row, beside the environment and role. */
  .organization { order: 3; flex: 1 1 96px; min-width: 0; padding-left: 0; }
  .organization-mark { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
  .environment-switch, .session > .environment { order: 4; }
  /* On a narrow screen the environment list spans the top bar instead of hanging from its button. */
  .header { position: relative; }
  .environment-switch { position: static; }
  .environment-menu { top: calc(100% - 4px); left: var(--cm-space-4); right: var(--cm-space-4); min-width: 0; max-width: none; }
  .role { order: 5; }
  .layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .navigation { position: static; max-height: none; overflow: visible; padding: 0 var(--cm-space-4) var(--cm-space-3); }
  .navigation .navigation-toggle { background: var(--cm-color-surface); }
  .navigation .navigation-groups:not([hidden]) {
    margin-top: var(--cm-space-2);
    padding: var(--cm-space-3) var(--cm-space-3) var(--cm-space-2);
    border: var(--cm-border-width) solid var(--cm-border-soft);
    border-radius: var(--cm-radius-lg);
    background: var(--cm-color-surface);
    box-shadow: var(--cm-shadow-md);
  }
  .navigation a { min-height: 40px; }
  .navigation a[aria-current="page"] { background: var(--cm-color-well); }
  .navigation a[aria-current="page"]::before { left: calc(-1 * var(--cm-space-3)); }
  .main { padding: var(--cm-space-5) var(--cm-space-4) var(--cm-space-6); border-top-left-radius: var(--cm-radius-xl); border-top-right-radius: var(--cm-radius-xl); box-shadow: var(--cm-canvas-divider-narrow); }
  .shell > .main { margin: var(--cm-space-3); }
  .card { padding: var(--cm-space-4); }
  .card-feature { padding: var(--cm-space-4); }
  .feature-actions { justify-content: flex-start; }
  .feature-actions .button { flex: 1 1 auto; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dd { margin-bottom: var(--cm-space-2); }
  .dialog { border-radius: var(--cm-radius-xl); }
  .dialog > .actions { flex-direction: column-reverse; align-items: stretch; }
  .connect { margin: var(--cm-space-5) auto; padding: var(--cm-space-5); }
  .shell > .banner, .preview-strip-bar, .preview-controls { padding-inline: var(--cm-space-4); }
  .preview-strip-text { flex-basis: 100%; order: 3; }
  .filter { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .filter-search { flex: 1 1 100%; max-width: none; }
  .form-inline > .field { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .stats > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .summary .stat-figure { font-size: 19px; }
  .filter-count { margin-left: 0; }
  .card-actions { flex: 1 1 100%; }
  .card-actions .disclosure { flex: 1 1 auto; }
}
/*
 * Since the cRUD product family pages: a canvas narrower than 820px stacks each table row as a card with its column
 * labels, on a phone and beside a tablet's sidebar alike, so no column or row action is ever out of reach.
 */
.main { container: console-main / inline-size; }
@container console-main (max-width: 820px) {
  .table-wrap { border: none; border-radius: 0; background: transparent; overflow-x: visible; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  tr { border: var(--cm-border-width) solid var(--cm-border-color); border-radius: var(--cm-radius-lg); margin-bottom: var(--cm-space-3); padding: var(--cm-space-3); background: var(--cm-color-surface); }
  tbody tr:hover { background: var(--cm-color-surface); }
  td { border-bottom: none; padding: var(--cm-space-1) 0; }
  td::before { content: attr(data-label); display: block; font-size: var(--cm-font-size-small); color: var(--cm-color-muted); font-weight: 600; }
  caption { display: block; padding: 0 0 var(--cm-space-2); border-bottom: none; }
  .cell-primary { white-space: normal; }
}
/* A narrow canvas shows a summary of four figures as two rows of two, and stretches a figure left alone in its row. */
/* A wide canvas keeps a status in a table on one line; a narrower one lets it wrap inside its pill rather than overflow. */
@container console-main (min-width: 1080px) {
  td .badge { white-space: nowrap; }
}
@container console-main (max-width: 800px) {
  .summary .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary .stats > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 379px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
}

/* Since P3-20: touch screens get 44px targets; forced colours keep every border, state and focus ring visible. */
@media (pointer: coarse) {
  .button, td .button, .preview-strip .button, input[type="text"], input[type="password"], input[type="number"], select, .filter select, .filter input[type="text"], .form-inline select, td .row-actions .form select, .navigation a, .navigation-collapse { min-height: 44px; }
  .navigation-collapse { min-width: 44px; }
  .checkbox { min-height: 44px; }
}
@media (forced-colors: active) {
  .badge, .chips li, .state, .environment, .role, .card, .dialog, .table-wrap, .button, .main, .stat, .well, .gate, .navigation-collapse { border: 1px solid CanvasText; }
  .navigation a[aria-current="page"] { outline: 2px solid Highlight; }
  .navigation a[aria-current="page"]::before, .environment::before, .badge::before, .organization-mark, .dot { background: CanvasText; forced-color-adjust: none; }
  select { appearance: auto; background-image: none; padding-right: var(--cm-space-3); }
  :focus-visible { outline-color: Highlight; }
}

/* Since P3-14: a support identity's session is always visibly distinguished from a member's. */
.banner-support {
  margin: 0 var(--cm-space-5) var(--cm-space-3);
  padding: var(--cm-space-2) var(--cm-space-4);
  border: var(--cm-border-width) solid var(--cm-status-notice-border);
  border-left: 4px solid var(--cm-status-notice);
  border-radius: var(--cm-radius);
  background: var(--cm-status-notice-surface);
  color: var(--cm-status-notice);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}