/*! Console design system 1.0.0 (2026-11-07). Licensed to Design Systems Library members, single user. */

/* ---- base ---- */
/* Console base: document defaults, zero-specificity resets inside .cn-page, type roles,
   layout helpers, density, the night scope and the specimen frame. Load after tokens.css. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--cn-nav-h) + var(--cn-space-4));
}

body {
  margin: 0;
  background: var(--cn-canvas);
  color: var(--cn-text);
  font-family: var(--cn-font-sans);
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
  font-weight: var(--cn-weight-regular);
  font-variant-numeric: tabular-nums;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Density: 36px rows by default, 32px when any ancestor (or <html>) says compact */
[data-density="compact"] {
  --cn-row: 32px;
  --cn-control-h: 32px;
  --cn-control-sm: 24px;
}

:where(.cn-page),
:where(.cn-page) *,
:where(.cn-page) *::before,
:where(.cn-page) *::after {
  box-sizing: border-box;
}

:where(.cn-page) {
  min-height: 100vh;
}

:where(.cn-page) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, dl, dd, pre, table, blockquote, fieldset) {
  margin: 0;
}

:where(.cn-page) :where(ul[role="list"], ol[role="list"]) {
  list-style: none;
  padding: 0;
}

:where(.cn-page) :where(fieldset) {
  border: 0;
  padding: 0;
  min-width: 0;
}

:where(.cn-page) :where(img, svg, video, canvas) {
  display: block;
  max-width: 100%;
}

:where(.cn-page) :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

:where(.cn-page) :where(button) {
  cursor: pointer;
}

:where(.cn-page) :where(h1, h2, h3, h4, h5, h6) {
  color: var(--cn-ink);
  font-weight: var(--cn-weight-semibold);
  text-wrap: balance;
}

:where(.cn-page) :where(h1) {
  font-size: var(--cn-fs-headline);
  line-height: var(--cn-lh-headline);
  letter-spacing: var(--cn-track-headline);
}

:where(.cn-page) :where(h2) {
  font-size: var(--cn-fs-subhead);
  line-height: var(--cn-lh-subhead);
}

:where(.cn-page) :where(h3) {
  font-size: var(--cn-fs-card);
  line-height: var(--cn-lh-body);
}

:where(.cn-page) :where(h4, h5, h6) {
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
}

/* A paragraph is reading text: 16px everywhere. Labels, hints and row meta are spans or divs. */
:where(.cn-page) :where(p) {
  font-size: var(--cn-fs-body);
  line-height: var(--cn-lh-body);
  text-wrap: pretty;
  hanging-punctuation: first;
}

:where(.cn-page) :where(li, dd) {
  text-wrap: pretty;
}

:where(.cn-page) :where(a) {
  color: var(--cn-accent-text);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: color var(--cn-dur) var(--cn-ease), text-decoration-color var(--cn-dur) var(--cn-ease);
}

:where(.cn-page) :where(a:hover) {
  color: var(--cn-ink);
  text-decoration-color: currentColor;
}

:where(.cn-page) :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cn-focus);
  outline-offset: 2px;
}

:where(.cn-page) :where(code, kbd, samp, pre) {
  font-family: var(--cn-font-mono);
}

:where(.cn-page) :where(code, samp) {
  font-size: 0.875em;
}

:where(.cn-page) :where(p code, li code, td code, dd code, span code) {
  background: var(--cn-code-bg);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-xs);
  padding: 0 4px;
  color: var(--cn-code-ink);
  overflow-wrap: anywhere;
}

:where(.cn-page) :where(strong, b) {
  color: var(--cn-ink);
  font-weight: var(--cn-weight-semibold);
}

:where(.cn-page) :where(hr) {
  border: 0;
  border-block-start: 1px solid var(--cn-line);
  margin: var(--cn-space-6) 0;
}

:where(.cn-page) ::selection {
  background: var(--cn-accent-soft);
  color: var(--cn-ink);
}

/* Native checkboxes and radios, drawn to the 4px grid (switches override this) */
:where(.cn-page) :where(input[type="checkbox"], input[type="radio"]) {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  margin: 0;
  border: 1px solid var(--cn-control);
  border-radius: var(--cn-radius-xs);
  background: var(--cn-panel);
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color var(--cn-dur-fast) var(--cn-ease), border-color var(--cn-dur-fast) var(--cn-ease);
}

:where(.cn-page) :where(input[type="radio"]) {
  border-radius: var(--cn-radius-round);
}

:where(.cn-page) :where(input[type="checkbox"], input[type="radio"]):hover {
  border-color: var(--cn-ink);
}

:where(.cn-page) :where(input[type="checkbox"]:checked, input[type="checkbox"]:indeterminate, input[type="radio"]:checked) {
  border-color: var(--cn-accent);
  background: var(--cn-accent);
}

:where(.cn-page) :where(input[type="checkbox"])::before {
  content: "";
  inline-size: 5px;
  block-size: 9px;
  border: solid var(--cn-on-accent);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg) scale(0);
  transition: transform var(--cn-dur-fast) var(--cn-ease);
}

:where(.cn-page) :where(input[type="checkbox"]:checked)::before {
  transform: translateY(-1px) rotate(45deg) scale(1);
}

:where(.cn-page) :where(input[type="checkbox"]:indeterminate)::before {
  inline-size: 8px;
  block-size: 0;
  border-width: 0 0 2px 0;
  transform: none;
}

:where(.cn-page) :where(input[type="radio"])::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--cn-radius-round);
  background: var(--cn-on-accent);
  transform: scale(0);
  transition: transform var(--cn-dur-fast) var(--cn-ease);
}

:where(.cn-page) :where(input[type="radio"]:checked)::before {
  transform: scale(1);
}

:where(.cn-page) :where(input[type="checkbox"], input[type="radio"]):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Site pages (Brightkeel's public pages) are roomier: 16px body instead of the 14px UI base */
.cn-page--site {
  font-size: var(--cn-fs-body);
  line-height: var(--cn-lh-body);
}

/* ---------- type roles ---------- */
.cn-display {
  font-size: var(--cn-fs-display);
  line-height: var(--cn-lh-display);
  letter-spacing: var(--cn-track-display);
  font-weight: var(--cn-weight-semibold);
  color: var(--cn-ink);
  text-wrap: balance;
}

.cn-title {
  font-size: var(--cn-fs-title);
  line-height: var(--cn-lh-title);
  letter-spacing: var(--cn-track-title);
  font-weight: var(--cn-weight-semibold);
  color: var(--cn-ink);
  text-wrap: balance;
}

.cn-headline {
  font-size: var(--cn-fs-headline);
  line-height: var(--cn-lh-headline);
  letter-spacing: var(--cn-track-headline);
  font-weight: var(--cn-weight-semibold);
  color: var(--cn-ink);
}

.cn-lede {
  font-size: var(--cn-fs-lede);
  line-height: var(--cn-lh-lede);
  color: var(--cn-muted);
}

.cn-body {
  font-size: var(--cn-fs-body);
  line-height: var(--cn-lh-body);
}

.cn-ui {
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
}

.cn-meta {
  font-size: var(--cn-fs-meta);
  line-height: var(--cn-lh-ui);
  color: var(--cn-muted);
}

.cn-caption {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-caption);
  line-height: var(--cn-lh-caption);
  letter-spacing: var(--cn-track-caption);
  color: var(--cn-muted);
}

.cn-mono {
  font-family: var(--cn-font-mono);
  font-size: 0.9286em;
}

.cn-num {
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

.cn-muted {
  color: var(--cn-muted);
}

.cn-ink {
  color: var(--cn-ink);
}

.cn-strong {
  color: var(--cn-ink);
  font-weight: var(--cn-weight-medium);
}

/* ---------- layout helpers ---------- */
.cn-container {
  inline-size: 100%;
  max-inline-size: calc(var(--cn-content) + 2 * var(--cn-gutter));
  margin-inline: auto;
  padding-inline: var(--cn-gutter);
}

.cn-container--narrow {
  max-inline-size: calc(var(--cn-narrow) + 2 * var(--cn-gutter));
}

.cn-stack {
  display: flex;
  flex-direction: column;
  gap: var(--cn-space-4);
  min-inline-size: 0;
}

.cn-stack > * {
  min-inline-size: 0;
}

.cn-stack--tight {
  gap: var(--cn-space-2);
}

.cn-stack--loose {
  gap: var(--cn-space-8);
}

.cn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-2);
}

.cn-row--between {
  justify-content: space-between;
}

.cn-row--end {
  justify-content: flex-end;
}

.cn-spacer {
  flex: 1 1 auto;
}

.cn-grid {
  display: grid;
  gap: var(--cn-space-4);
  grid-template-columns: minmax(0, 1fr);
}

.cn-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.cn-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cn-grid--aside {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

@media (max-width: 1099px) {
  .cn-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cn-grid--3,
  .cn-grid--aside {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 719px) {
  .cn-grid--2,
  .cn-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cn-sr {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cn-skip {
  position: absolute;
  inset-block-start: var(--cn-space-2);
  inset-inline-start: var(--cn-space-2);
  z-index: 100;
  padding: var(--cn-space-2) var(--cn-space-3);
  border-radius: var(--cn-radius-control);
  background: var(--cn-btn);
  color: var(--cn-btn-ink);
  font-weight: var(--cn-weight-medium);
  text-decoration: none;
  transform: translateY(-200%);
}

.cn-skip:focus {
  transform: none;
}

.cn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--cn-space-1);
  font-weight: var(--cn-weight-medium);
  text-decoration: none;
}

.cn-link svg {
  transition: transform var(--cn-dur) var(--cn-ease);
}

.cn-link:hover svg {
  transform: translateX(2px);
}

[dir="rtl"] .cn-link svg {
  transform: scaleX(-1);
}

[dir="rtl"] .cn-link:hover svg {
  transform: scaleX(-1) translateX(2px);
}

/* Directional icons (arrows) mirror in right-to-left pages */
[dir="rtl"] .cn-flip-rtl {
  transform: scaleX(-1);
}

.cn-icon {
  flex: none;
  color: var(--cn-muted);
}

/* ---------- night: an always-dark scope (hero screen, social card) ---------- */
.cn-night {
  color-scheme: dark;
  --cn-canvas: var(--cn-night-canvas);
  --cn-panel: var(--cn-night-panel);
  --cn-sidebar: var(--cn-night-sidebar);
  --cn-well: var(--cn-night-well);
  --cn-raised: var(--cn-night-raised);
  --cn-hover: var(--cn-night-hover);
  --cn-ink: var(--cn-night-ink);
  --cn-text: var(--cn-night-text);
  --cn-muted: var(--cn-night-muted);
  --cn-line: var(--cn-night-line);
  --cn-line-strong: var(--cn-night-line-strong);
  --cn-control: var(--cn-night-control);
  --cn-accent: var(--cn-night-accent);
  --cn-accent-text: var(--cn-night-accent-text);
  --cn-accent-soft: var(--cn-night-accent-soft);
  --cn-on-accent: var(--cn-night-on-accent);
  --cn-focus: var(--cn-night-focus);
  --cn-btn: var(--cn-night-btn);
  --cn-btn-hover: var(--cn-night-btn-hover);
  --cn-btn-ink: var(--cn-night-btn-ink);
  --cn-ok: var(--cn-night-ok);
  --cn-ok-soft: var(--cn-night-ok-soft);
  --cn-ok-dot: var(--cn-night-ok-dot);
  --cn-warn: var(--cn-night-warn);
  --cn-warn-soft: var(--cn-night-warn-soft);
  --cn-warn-dot: var(--cn-night-warn-dot);
  --cn-danger: var(--cn-night-danger);
  --cn-danger-soft: var(--cn-night-danger-soft);
  --cn-danger-dot: var(--cn-night-danger-dot);
  --cn-info: var(--cn-night-info);
  --cn-info-soft: var(--cn-night-info-soft);
  --cn-info-dot: var(--cn-night-info-dot);
  --cn-idle-dot: var(--cn-night-idle-dot);
  --cn-viz-1: var(--cn-night-viz-1);
  --cn-viz-2: var(--cn-night-viz-2);
  --cn-viz-3: var(--cn-night-viz-3);
  --cn-viz-4: var(--cn-night-viz-4);
  --cn-viz-5: var(--cn-night-viz-5);
  --cn-viz-6: var(--cn-night-viz-6);
  --cn-tip-bg: var(--cn-night-tip-bg);
  --cn-tip-ink: var(--cn-night-tip-ink);
  --cn-code-bg: var(--cn-night-well);
  --cn-code-ink: var(--cn-night-text);
  background: var(--cn-canvas);
  color: var(--cn-text);
}

/* ---------- social card (extras/og): a fixed 1200 x 630 frame ---------- */
.cn-og {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 500px;
  align-items: center;
  gap: var(--cn-space-12);
  inline-size: 1200px;
  block-size: 630px;
  padding: var(--cn-space-16);
  overflow: hidden;
}

.cn-og__copy {
  display: grid;
  align-content: space-between;
  block-size: 100%;
}

.cn-og__title {
  margin-block-start: var(--cn-space-10);
  font-size: 3.5rem;
  line-height: 1.08;
  letter-spacing: var(--cn-track-display);
  text-wrap: balance;
}

.cn-og__sub {
  margin-block-start: var(--cn-space-5);
  color: var(--cn-muted);
  font-size: var(--cn-fs-lede);
  line-height: var(--cn-lh-lede);
}

.cn-og__foot {
  display: flex;
  align-items: center;
  gap: var(--cn-space-3);
  color: var(--cn-muted);
  font-size: var(--cn-fs-ui);
}

.cn-og .cn-palette--inline {
  max-inline-size: none;
}

/* ---------- specimen frame (component pages and docs) ---------- */
.cn-sample {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cn-space-3) var(--cn-space-10);
  padding-block: var(--cn-space-5);
  border-block-start: 1px solid var(--cn-line);
}

.cn-sample__aside {
  display: grid;
  align-content: start;
  gap: var(--cn-space-2);
}

.cn-sample__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--cn-space-3);
  min-inline-size: 0;
}

.cn-sample__cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--cn-space-2);
  min-inline-size: 0;
}

.cn-sample__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cn-space-1) var(--cn-space-4);
}

.cn-sample__head h2 {
  font-size: var(--cn-fs-lede);
  line-height: var(--cn-lh-lede);
}

.cn-sample__summary {
  max-inline-size: 72ch;
  color: var(--cn-muted);
}

.cn-sample__name {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-caption);
  color: var(--cn-muted);
}

.cn-sample__label {
  margin-block-start: var(--cn-space-2);
  font-size: var(--cn-fs-meta);
  line-height: var(--cn-lh-ui);
  font-weight: var(--cn-weight-medium);
  color: var(--cn-muted);
}

.cn-sample__label,
.cn-sample__label:first-child {
  margin-block-start: 0;
}

.cn-sample__stage {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--cn-space-3);
  min-inline-size: 0;
}

.cn-sample__stage > * {
  min-inline-size: 0;
}

.cn-sample__stage--block {
  display: block;
}

/* Page-level components shown as specimens drop their page spacing */
.cn-sample :is(.cn-hero, .cn-hero--plain, .cn-section, .cn-section--tight) {
  padding-block: 0;
}

.cn-sample .cn-hero__screen {
  margin-block-start: var(--cn-space-8);
}

.cn-sample .cn-head {
  margin-block-end: var(--cn-space-6);
}

.cn-sample__stage--tip {
  padding-block-start: var(--cn-space-16);
}

.cn-sample__stage--well {
  padding: var(--cn-space-5);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-panel);
}

@media (min-width: 1100px) {
  .cn-sample {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .cn-sample__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cn-space-5) var(--cn-space-6);
  }

  .cn-sample__cell--wide {
    grid-column: 1 / -1;
  }

  .cn-sample__aside {
    align-self: start;
  }

  .cn-sample__head {
    display: grid;
    justify-content: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.cn-page) *,
  :where(.cn-page) *::before,
  :where(.cn-page) *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---- buttons ---- */
/* Buttons: 6px corners, 36px tall, 14px medium labels, flat fills, one primary per group.
   A kbd hint sits inside the primary action when it has a shortcut. */

.cn-btn {
  --cn-btn-pad: var(--cn-space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cn-space-2);
  min-block-size: var(--cn-control-h);
  padding: 0 var(--cn-btn-pad);
  border: 1px solid var(--cn-line-strong);
  border-radius: var(--cn-radius-control);
  background: var(--cn-panel);
  color: var(--cn-ink);
  font: inherit;
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
  font-weight: var(--cn-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--cn-dur-fast) var(--cn-ease),
    border-color var(--cn-dur-fast) var(--cn-ease),
    color var(--cn-dur-fast) var(--cn-ease);
}

.cn-btn:hover {
  border-color: var(--cn-control);
  background: var(--cn-hover);
  color: var(--cn-ink);
}

.cn-btn:active {
  background: var(--cn-well);
}

.cn-btn:focus-visible {
  outline: 2px solid var(--cn-focus);
  outline-offset: 2px;
}

.cn-btn svg {
  flex: none;
  color: var(--cn-muted);
}

.cn-btn:hover svg {
  color: var(--cn-ink);
}

.cn-btn--primary {
  border-color: var(--cn-btn);
  background: var(--cn-btn);
  color: var(--cn-btn-ink);
}

.cn-btn--primary svg,
.cn-btn--primary:hover svg {
  color: currentColor;
}

:is(.cn-btn--primary):hover {
  border-color: var(--cn-btn-hover);
  background: var(--cn-btn-hover);
  color: var(--cn-btn-ink);
}

:is(.cn-btn--primary):active {
  background: var(--cn-btn-hover);
}

.cn-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--cn-text);
}

:is(.cn-btn--ghost):hover {
  border-color: transparent;
  background: var(--cn-hover);
}

.cn-btn--danger {
  color: var(--cn-danger);
}

:is(.cn-btn--danger):hover {
  border-color: var(--cn-danger);
  background: var(--cn-danger-soft);
  color: var(--cn-danger);
}

.cn-btn--danger svg,
.cn-btn--danger:hover svg {
  color: currentColor;
}

.cn-btn--destructive {
  border-color: var(--cn-danger);
  background: var(--cn-danger);
  color: var(--cn-canvas);
}

.cn-btn--destructive svg,
.cn-btn--destructive:hover svg {
  color: currentColor;
}

:is(.cn-btn--destructive):hover {
  border-color: color-mix(in srgb, var(--cn-danger) 86%, var(--cn-ink));
  background: color-mix(in srgb, var(--cn-danger) 86%, var(--cn-ink));
  color: var(--cn-canvas);
}

.cn-btn--sm {
  --cn-btn-pad: var(--cn-space-2);
  min-block-size: var(--cn-control-sm);
  gap: 6px;
  font-size: var(--cn-fs-meta);
}

.cn-btn--lg {
  --cn-btn-pad: var(--cn-space-5);
  min-block-size: var(--cn-control-lg);
  font-size: var(--cn-fs-body);
}

.cn-btn--block {
  display: flex;
  inline-size: 100%;
}

.cn-btn--icon {
  --cn-btn-pad: 0;
  inline-size: var(--cn-control-h);
}

.cn-btn--icon.cn-btn--sm {
  inline-size: var(--cn-control-sm);
}

.cn-btn--icon.cn-btn--lg {
  inline-size: var(--cn-control-lg);
}

/* Shortcut hint inside a button */
.cn-btn__kbd {
  display: inline-flex;
  gap: 2px;
  margin-inline-start: var(--cn-space-1);
  margin-inline-end: -4px;
}

.cn-btn__kbd .cn-kbd {
  border-color: var(--cn-line);
  background: transparent;
  color: var(--cn-muted);
}

.cn-btn--primary .cn-btn__kbd .cn-kbd {
  border-color: color-mix(in srgb, var(--cn-btn-ink) 34%, transparent);
  background: color-mix(in srgb, var(--cn-btn-ink) 10%, transparent);
  color: var(--cn-btn-ink);
}

/* States */
.cn-btn[aria-disabled="true"],
.cn-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.cn-btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.cn-btn.is-loading > * {
  visibility: hidden;
}

.cn-btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 14px;
  block-size: 14px;
  border: 2px solid var(--cn-ink);
  border-inline-end-color: transparent;
  border-radius: var(--cn-radius-round);
  animation: cn-spin 700ms linear infinite;
}

.cn-btn--primary.is-loading::after {
  border-color: var(--cn-btn-ink);
  border-inline-end-color: transparent;
}

@keyframes cn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Action group: one primary, at most two quieter actions */
.cn-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-2);
}

.cn-actions--end {
  justify-content: flex-end;
}

@media (max-width: 479px) {
  .cn-actions--stack-sm {
    flex-direction: column;
    align-items: stretch;
    inline-size: 100%;
  }

  .cn-actions--stack-sm > .cn-btn {
    inline-size: 100%;
  }
}

@media (pointer: coarse) {
  .cn-btn {
    min-block-size: 44px;
  }

  .cn-btn--icon,
  .cn-btn--icon.cn-btn--sm {
    inline-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cn-btn {
    transition: none;
  }

  .cn-btn.is-loading::after {
    animation-duration: 2s;
  }
}

/* ---- kbd ---- */
/* Kbd: 4px keycaps in Plex Mono. Shortcut hints sit beside primary actions and menu items. */

.cn-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 20px;
  block-size: 20px;
  padding: 0 5px;
  border: 1px solid var(--cn-line-strong);
  border-radius: var(--cn-radius-xs);
  background: var(--cn-panel);
  color: var(--cn-text);
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-caption);
  font-weight: var(--cn-weight-medium);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.cn-kbd svg {
  inline-size: 12px;
  block-size: 12px;
}

.cn-kbd--lg {
  min-inline-size: 64px;
  block-size: 64px;
  padding: 0 var(--cn-space-4);
  border-radius: var(--cn-radius-panel);
  border-block-end-width: 3px;
  font-size: var(--cn-fs-headline);
  font-weight: var(--cn-weight-medium);
  color: var(--cn-ink);
}

.cn-kbd--lg svg {
  inline-size: 24px;
  block-size: 24px;
}

.cn-kbd--accent {
  border-color: var(--cn-accent);
  color: var(--cn-accent-text);
}

/* A chord (Ctrl K) or a sequence (G then D) */
.cn-keys {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--cn-muted);
  font-size: var(--cn-fs-caption);
  white-space: nowrap;
}

.cn-keys--lg {
  gap: var(--cn-space-2);
}

.cn-keys__then {
  padding-inline: 2px;
  font-size: var(--cn-fs-caption);
  color: var(--cn-muted);
}

/* Shortcut legend: key on the start side, what it does on the end side */
.cn-shortcuts {
  display: grid;
  gap: var(--cn-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cn-shortcuts__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-4);
  min-block-size: var(--cn-row);
  border-block-end: 1px solid var(--cn-line);
  font-size: var(--cn-fs-ui);
  color: var(--cn-text);
}

.cn-shortcuts__row:last-child {
  border-block-end: 0;
}

/* ---- badges ---- */
/* Badges: 4px corners, 20px tall, 12px labels, soft fills. Status, plan, version and counts. */

.cn-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  block-size: 20px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--cn-radius-xs);
  background: var(--cn-well);
  color: var(--cn-text);
  font-size: var(--cn-fs-caption);
  line-height: var(--cn-lh-caption);
  font-weight: var(--cn-weight-medium);
  white-space: nowrap;
  vertical-align: middle;
}

.cn-badge svg {
  inline-size: 12px;
  block-size: 12px;
  flex: none;
}

.cn-badge--outline {
  border-color: var(--cn-line-strong);
  background: transparent;
}

.cn-badge--accent {
  background: var(--cn-accent-soft);
  color: var(--cn-accent-text);
}

.cn-badge--ok {
  background: var(--cn-ok-soft);
  color: var(--cn-ok);
}

.cn-badge--warn {
  background: var(--cn-warn-soft);
  color: var(--cn-warn);
}

.cn-badge--danger {
  background: var(--cn-danger-soft);
  color: var(--cn-danger);
}

.cn-badge--info {
  background: var(--cn-info-soft);
  color: var(--cn-info);
}

.cn-badge--mono {
  font-family: var(--cn-font-mono);
  font-weight: var(--cn-weight-regular);
  letter-spacing: 0;
}

/* Count: a round-ended number beside a tab or nav item */
.cn-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 20px;
  block-size: 18px;
  padding: 0 5px;
  border-radius: var(--cn-radius-xs);
  background: var(--cn-well);
  color: var(--cn-muted);
  font-size: var(--cn-fs-caption);
  font-weight: var(--cn-weight-medium);
  line-height: 1;
}

.cn-count--accent {
  background: var(--cn-accent);
  color: var(--cn-on-accent);
}

/* Tag list */
.cn-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cn-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- status-dot ---- */
/* Status dots: 8px circles that always travel with a word. Live states pulse once a second. */

.cn-dot {
  position: relative;
  display: inline-block;
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--cn-radius-round);
  background: var(--cn-idle-dot);
  vertical-align: middle;
}

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

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

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

.cn-dot--info {
  background: var(--cn-info-dot);
}

.cn-dot--accent {
  background: var(--cn-accent);
}

.cn-dot--hollow {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--cn-idle-dot);
}

.cn-dot--live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: cn-dot-pulse 1.6s var(--cn-ease) infinite;
}

@keyframes cn-dot-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  70%,
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* Dot plus label */
.cn-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
  color: var(--cn-text);
  white-space: nowrap;
}

.cn-status--sm {
  font-size: var(--cn-fs-meta);
}

.cn-status__meta {
  color: var(--cn-muted);
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-caption);
}

@media (prefers-reduced-motion: reduce) {
  .cn-dot--live::after {
    animation: none;
    opacity: 0;
  }
}

/* ---- avatar ---- */
/* Avatars: initials only. People are round, workspaces and accounts are 6px squares. */

.cn-avatar {
  --cn-avatar: 28px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--cn-avatar);
  block-size: var(--cn-avatar);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-round);
  background: var(--cn-well);
  color: var(--cn-ink);
  font-size: var(--cn-fs-caption);
  font-weight: var(--cn-weight-semibold);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  user-select: none;
}

.cn-avatar svg {
  inline-size: 60%;
  block-size: 60%;
}

.cn-avatar--sm {
  --cn-avatar: 20px;
  font-size: var(--cn-fs-caption);
  letter-spacing: 0;
}

.cn-avatar--lg {
  --cn-avatar: 40px;
  font-size: var(--cn-fs-ui);
}

.cn-avatar--xl {
  --cn-avatar: 56px;
  font-size: var(--cn-fs-lede);
}

.cn-avatar--org {
  border-radius: var(--cn-radius-control);
}

.cn-avatar--sm.cn-avatar--org {
  border-radius: var(--cn-radius-xs);
}

.cn-avatar--teal {
  border-color: transparent;
  background: var(--cn-accent-soft);
  color: var(--cn-accent-text);
}

.cn-avatar--amber {
  border-color: transparent;
  background: var(--cn-warn-soft);
  color: var(--cn-warn);
}

.cn-avatar--blue {
  border-color: transparent;
  background: var(--cn-info-soft);
  color: var(--cn-info);
}

.cn-avatar--green {
  border-color: transparent;
  background: var(--cn-ok-soft);
  color: var(--cn-ok);
}

.cn-avatar--red {
  border-color: transparent;
  background: var(--cn-danger-soft);
  color: var(--cn-danger);
}

.cn-avatar__status {
  position: absolute;
  inset-block-end: -2px;
  inset-inline-end: -2px;
  inline-size: 10px;
  block-size: 10px;
  border: 2px solid var(--cn-panel);
  border-radius: var(--cn-radius-round);
  background: var(--cn-idle-dot);
}

.cn-avatar__status--ok {
  background: var(--cn-ok-dot);
}

.cn-avatar__status--warn {
  background: var(--cn-warn-dot);
}

/* Overlapping stack with a count */
.cn-avatars {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cn-avatars > * + * {
  margin-inline-start: -6px;
}

.cn-avatars .cn-avatar {
  outline: 2px solid var(--cn-panel);
}

/* Person: avatar, name and a second line */
.cn-person {
  display: inline-flex;
  align-items: center;
  gap: var(--cn-space-2);
  min-inline-size: 0;
}

.cn-person__text {
  display: grid;
  min-inline-size: 0;
  line-height: var(--cn-lh-ui);
}

.cn-person__name {
  overflow: hidden;
  color: var(--cn-ink);
  font-size: var(--cn-fs-ui);
  font-weight: var(--cn-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cn-person__meta {
  overflow: hidden;
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- tooltip ---- */
/* Tooltip: an inverted 12px bubble on hover and focus. It names or explains; it never holds
   the only copy of something a person needs. */

.cn-tip {
  position: relative;
  display: inline-flex;
}

.cn-tip__bubble {
  position: absolute;
  inset-block-end: calc(100% + 6px);
  inset-inline-start: 50%;
  z-index: var(--cn-z-pop);
  display: inline-flex;
  align-items: center;
  gap: var(--cn-space-2);
  inline-size: max-content;
  max-inline-size: 240px;
  padding: 4px 8px;
  border-radius: var(--cn-radius-xs);
  background: var(--cn-tip-bg);
  color: var(--cn-tip-ink);
  font-size: var(--cn-fs-caption);
  line-height: var(--cn-lh-caption);
  font-weight: var(--cn-weight-medium);
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 2px);
  transition:
    opacity var(--cn-dur-fast) var(--cn-ease),
    transform var(--cn-dur-fast) var(--cn-ease),
    visibility 0s linear var(--cn-dur-fast);
}

[dir="rtl"] .cn-tip__bubble {
  transform: translate(50%, 2px);
}

.cn-tip:hover .cn-tip__bubble,
.cn-tip:focus-within .cn-tip__bubble {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 300ms, 300ms, 0s;
}

[dir="rtl"] .cn-tip:hover .cn-tip__bubble,
[dir="rtl"] .cn-tip:focus-within .cn-tip__bubble {
  transform: translate(50%, 0);
}

.cn-tip:focus-within .cn-tip__bubble {
  transition-delay: 0s;
}

.cn-tip.is-dismissed .cn-tip__bubble {
  opacity: 0;
  visibility: hidden;
}

.cn-tip--below .cn-tip__bubble {
  inset-block-end: auto;
  inset-block-start: calc(100% + 6px);
}

.cn-tip--start .cn-tip__bubble {
  inset-inline-start: 0;
  transform: translate(0, 2px);
}

.cn-tip--start:hover .cn-tip__bubble,
.cn-tip--start:focus-within .cn-tip__bubble {
  transform: none;
}

.cn-tip__bubble .cn-kbd {
  min-inline-size: 18px;
  block-size: 18px;
  border-color: color-mix(in srgb, var(--cn-tip-ink) 30%, transparent);
  background: transparent;
  color: var(--cn-tip-ink);
}

/* Static display (component pages): shows the bubble without hover */
.cn-tip--open .cn-tip__bubble {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

[dir="rtl"] .cn-tip--open .cn-tip__bubble {
  transform: translate(50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .cn-tip__bubble {
    transition: none;
  }
}

/* ---- nav ---- */
/* Site nav: a 56px bar on the canvas, one hairline under it, a palette trigger that shows its
   shortcut, a theme toggle and one primary action. Collapses to a disclosure under 900px. */

.cn-nav {
  container: cn-nav / inline-size;
  position: sticky;
  inset-block-start: 0;
  z-index: var(--cn-z-nav);
  border-block-end: 1px solid var(--cn-line);
  background: var(--cn-canvas);
}

.cn-nav--static {
  position: relative;
  z-index: auto;
}

.cn-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--cn-space-6);
  block-size: var(--cn-nav-h);
  max-inline-size: calc(var(--cn-content) + 2 * var(--cn-gutter));
  margin-inline: auto;
  padding-inline: var(--cn-gutter);
}

.cn-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--cn-space-2);
  color: var(--cn-ink);
  font-size: var(--cn-fs-body);
  font-weight: var(--cn-weight-semibold);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.cn-brand:hover {
  color: var(--cn-ink);
}

.cn-brand__mark {
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--cn-radius-control);
  background: var(--cn-ink);
  color: var(--cn-canvas);
}

.cn-brand__mark svg {
  inline-size: 16px;
  block-size: 16px;
}

.cn-nav__menu {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-inline-size: 0;
}

.cn-nav__links {
  display: flex;
  align-items: center;
  gap: var(--cn-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cn-nav__link {
  display: inline-flex;
  align-items: center;
  block-size: 32px;
  padding: 0 var(--cn-space-3);
  border-radius: var(--cn-radius-control);
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
  font-weight: var(--cn-weight-medium);
  text-decoration: none;
  transition: background-color var(--cn-dur-fast) var(--cn-ease), color var(--cn-dur-fast) var(--cn-ease);
}

.cn-nav__link:hover {
  background: var(--cn-hover);
  color: var(--cn-ink);
}

.cn-nav__link[aria-current="page"] {
  color: var(--cn-ink);
  background: var(--cn-panel);
  box-shadow: inset 0 0 0 1px var(--cn-line);
}

.cn-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--cn-space-2);
  margin-inline-start: auto;
}

/* The palette trigger reads like a search field and shows its shortcut */
.cn-nav__search {
  display: inline-flex;
  align-items: center;
  gap: var(--cn-space-2);
  inline-size: 220px;
  block-size: 32px;
  padding: 0 6px 0 var(--cn-space-2);
  border: 1px solid var(--cn-line-strong);
  border-radius: var(--cn-radius-control);
  background: var(--cn-panel);
  color: var(--cn-muted);
  font-size: var(--cn-fs-ui);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--cn-dur-fast) var(--cn-ease);
}

.cn-nav__search:hover {
  border-color: var(--cn-control);
  color: var(--cn-text);
}

.cn-nav__search-label {
  flex: 1 1 auto;
}

.cn-theme-toggle__sun {
  display: none;
}

:root[data-theme="dark"] .cn-theme-toggle__sun {
  display: inline-flex;
}

:root[data-theme="dark"] .cn-theme-toggle__moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cn-theme-toggle__sun {
    display: inline-flex;
  }

  :root:not([data-theme="light"]) .cn-theme-toggle__moon {
    display: none;
  }
}

.cn-nav__toggle {
  display: none;
}

@container cn-nav (max-width: 1099px) {
  .cn-nav__search {
    inline-size: auto;
  }

  .cn-nav__search-label {
    display: none;
  }
}

@container cn-nav (max-width: 899px) {
  .cn-nav__inner {
    gap: var(--cn-space-3);
  }

  .cn-nav__toggle {
    display: inline-flex;
  }

  .cn-nav__menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    display: none;
    padding: var(--cn-space-2) var(--cn-gutter) var(--cn-space-4);
    border-block-end: 1px solid var(--cn-line);
    background: var(--cn-canvas);
  }

  .cn-nav.is-open .cn-nav__menu {
    display: block;
  }

  .cn-nav__links {
    flex-direction: column;
    align-items: stretch;
  }

  .cn-nav__link {
    block-size: 44px;
    font-size: var(--cn-fs-body);
  }

  .cn-nav__cta--secondary {
    display: none;
  }
}

@container cn-nav (max-width: 479px) {
  .cn-nav__search {
    display: none;
  }
}

/* ---- announcement-bar ---- */
/* Announcement bar: one line above the nav for a release or a scheduled change. */

.cn-announce {
  border-block-end: 1px solid var(--cn-line);
  background: var(--cn-panel);
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
}

.cn-announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cn-space-3);
  min-block-size: 40px;
  max-inline-size: calc(var(--cn-content) + 2 * var(--cn-gutter));
  margin-inline: auto;
  padding: var(--cn-space-2) var(--cn-gutter);
}

.cn-announce__text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-1) var(--cn-space-3);
  min-inline-size: 0;
}

.cn-announce__text a {
  font-weight: var(--cn-weight-medium);
  white-space: nowrap;
}

.cn-announce__close {
  margin-inline-start: auto;
}

.cn-announce--warn {
  background: var(--cn-warn-soft);
  color: var(--cn-ink);
}

.cn-announce[hidden] {
  display: none;
}

@media (max-width: 639px) {
  .cn-announce__inner {
    justify-content: flex-start;
  }
}

/* ---- breadcrumbs ---- */
/* Breadcrumbs: a path, separated by slashes like a file path. The last crumb is the page. */

.cn-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
  min-inline-size: 0;
}

.cn-crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--cn-space-1);
  min-inline-size: 0;
}

.cn-crumbs__item + .cn-crumbs__item::before {
  content: "/";
  color: var(--cn-line-strong);
  font-family: var(--cn-font-mono);
  padding-inline-end: 2px;
}

.cn-crumbs__link {
  color: var(--cn-muted);
  text-decoration: none;
  white-space: nowrap;
}

.cn-crumbs__link:hover {
  color: var(--cn-ink);
  text-decoration: underline;
}

.cn-crumbs__current {
  overflow: hidden;
  color: var(--cn-ink);
  font-weight: var(--cn-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 639px) {
  .cn-crumbs__item:not(:last-child):not(:nth-last-child(2)) {
    display: none;
  }
}

/* ---- sidebar-nav ---- */
/* Sidebar nav: grouped links with icons, counts and two-key shortcuts. The current page sits
   on a panel-colored chip with a hairline, like a tab resting on the sidebar. */

.cn-sidenav {
  display: grid;
  gap: var(--cn-space-5);
}

.cn-sidenav--panel {
  inline-size: 248px;
  max-inline-size: 100%;
  padding: var(--cn-space-3);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-sidebar);
}

.cn-sidenav--sticky {
  position: sticky;
  inset-block-start: calc(var(--cn-topbar-h) + var(--cn-space-6));
}

.cn-sidenav__group {
  display: grid;
  gap: 2px;
}

.cn-sidenav__label {
  padding: 0 var(--cn-space-2) var(--cn-space-1);
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
  font-weight: var(--cn-weight-medium);
}

.cn-sidenav__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cn-sidenav__link {
  display: flex;
  align-items: center;
  gap: var(--cn-space-2);
  min-block-size: 32px;
  padding: 0 var(--cn-space-2);
  border-radius: var(--cn-radius-control);
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
  font-weight: var(--cn-weight-medium);
  text-decoration: none;
  transition: background-color var(--cn-dur-fast) var(--cn-ease), color var(--cn-dur-fast) var(--cn-ease);
}

.cn-sidenav__link svg {
  flex: none;
  color: var(--cn-muted);
}

.cn-sidenav__link:hover {
  background: color-mix(in srgb, var(--cn-ink) 6%, transparent);
  color: var(--cn-ink);
}

.cn-sidenav__link[aria-current="page"] {
  background: var(--cn-panel);
  color: var(--cn-ink);
  box-shadow: inset 0 0 0 1px var(--cn-line);
}

.cn-sidenav__link[aria-current="page"] svg {
  color: var(--cn-accent);
}

.cn-sidenav__text {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cn-sidenav__end {
  display: inline-flex;
  align-items: center;
  gap: var(--cn-space-1);
  margin-inline-start: auto;
}

.cn-sidenav__end .cn-keys {
  opacity: 0;
  transition: opacity var(--cn-dur-fast) var(--cn-ease);
}

.cn-sidenav__link:hover .cn-keys,
.cn-sidenav__link:focus-visible .cn-keys {
  opacity: 1;
}

/* Show the shortcut legend permanently */
.cn-sidenav--keys .cn-sidenav__end .cn-keys {
  opacity: 1;
}

/* Sub-links (a section's pages) */
.cn-sidenav__sub {
  display: grid;
  gap: 2px;
  margin: 2px 0 var(--cn-space-1);
  padding: 0 0 0 var(--cn-space-6);
  list-style: none;
}

.cn-sidenav__sub .cn-sidenav__link {
  min-block-size: 28px;
  font-weight: var(--cn-weight-regular);
}

@media (pointer: coarse) {
  .cn-sidenav__link,
  .cn-sidenav__sub .cn-sidenav__link {
    min-block-size: 44px;
  }

  .cn-sidenav__end .cn-keys {
    display: none;
  }
}

/* ---- app-shell ---- */
/* App shell: sidebar + topbar + content. The sidebar is one shade darker than the canvas and
   collapses to an icon rail; under 900px it becomes a drawer. Chrome stays quiet so the data
   reads first. */

.cn-shell {
  position: relative;
  display: grid;
  grid-template-columns: var(--cn-sidebar-w) minmax(0, 1fr);
  min-block-size: 100vh;
  background: var(--cn-canvas);
}

/* The sidebar color runs the full height of the page behind the sticky sidebar */
.cn-shell::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--cn-sidebar-w);
  border-inline-end: 1px solid var(--cn-line);
  background: var(--cn-sidebar);
  pointer-events: none;
}

.cn-shell.is-collapsed::before {
  inline-size: var(--cn-sidebar-rail);
}

.cn-shell__sidebar {
  position: sticky;
  inset-block-start: 0;
  display: flex;
  flex-direction: column;
  block-size: 100vh;
  min-inline-size: 0;
  border-inline-end: 1px solid var(--cn-line);
  background: var(--cn-sidebar);
}

.cn-shell__head {
  display: flex;
  align-items: center;
  gap: var(--cn-space-2);
  block-size: var(--cn-topbar-h);
  padding: 0 var(--cn-space-3);
  flex: none;
}

.cn-shell__nav {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--cn-space-1) var(--cn-space-3) var(--cn-space-4);
  scrollbar-width: thin;
}

.cn-shell__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--cn-space-2);
  padding: var(--cn-space-3);
  border-block-start: 1px solid var(--cn-line);
}

/* Workspace switcher (a .cn-menu whose trigger is this button) */
.cn-workspace {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.cn-workspace__btn {
  display: flex;
  align-items: center;
  gap: var(--cn-space-2);
  inline-size: 100%;
  min-block-size: 36px;
  padding: 0 var(--cn-space-2) 0 var(--cn-space-1);
  border-radius: var(--cn-radius-control);
  color: var(--cn-ink);
  font-weight: var(--cn-weight-semibold);
  cursor: pointer;
}

.cn-workspace__btn:hover {
  background: color-mix(in srgb, var(--cn-ink) 6%, transparent);
}

.cn-workspace__name {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cn-workspace__btn svg {
  color: var(--cn-muted);
}

/* The palette trigger inside the sidebar */
.cn-shell__search {
  display: flex;
  align-items: center;
  gap: var(--cn-space-2);
  inline-size: 100%;
  block-size: 32px;
  margin-block-end: var(--cn-space-4);
  padding: 0 6px 0 var(--cn-space-2);
  border: 1px solid var(--cn-line-strong);
  border-radius: var(--cn-radius-control);
  background: var(--cn-panel);
  color: var(--cn-muted);
  font-size: var(--cn-fs-ui);
  text-align: start;
  cursor: pointer;
}

.cn-shell__search:hover {
  border-color: var(--cn-control);
  color: var(--cn-text);
}

.cn-shell__search-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cn-shell__body {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.cn-shell__topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--cn-z-sticky);
  display: flex;
  align-items: center;
  gap: var(--cn-space-2);
  block-size: var(--cn-topbar-h);
  padding: 0 var(--cn-space-6);
  border-block-end: 1px solid var(--cn-line);
  background: var(--cn-canvas);
}

.cn-shell__tools {
  display: flex;
  align-items: center;
  gap: var(--cn-space-1);
  margin-inline-start: auto;
}

.cn-shell__menu {
  display: none;
}

.cn-shell__main {
  flex: 1 1 auto;
  inline-size: 100%;
  max-inline-size: 1440px;
  padding: var(--cn-space-6);
}

.cn-shell__main--narrow {
  max-inline-size: calc(var(--cn-narrow) + 2 * var(--cn-space-6));
}

.cn-shell__scrim {
  display: none;
}

/* Collapsed rail */
.cn-shell.is-collapsed {
  grid-template-columns: var(--cn-sidebar-rail) minmax(0, 1fr);
}

.cn-shell.is-collapsed :is(.cn-sidenav__text, .cn-sidenav__end, .cn-sidenav__label, .cn-workspace__name, .cn-workspace__chev, .cn-shell__search-label, .cn-shell__search .cn-keys, .cn-shell__foot .cn-person__text, .cn-shell__foot-extra, .cn-sidenav__sub) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cn-shell.is-collapsed .cn-shell__nav,
.cn-shell.is-collapsed .cn-shell__head,
.cn-shell.is-collapsed .cn-shell__foot {
  padding-inline: var(--cn-space-2);
}

.cn-shell.is-collapsed :is(.cn-sidenav__link, .cn-shell__search, .cn-workspace__btn) {
  justify-content: center;
  padding-inline: 0;
}

.cn-shell.is-collapsed .cn-shell__foot {
  justify-content: center;
}

.cn-shell.is-collapsed .cn-sidenav {
  gap: var(--cn-space-3);
}

/* Contained: the whole shell inside a box (component pages, screenshots) */
.cn-shell--contained {
  min-block-size: 0;
  block-size: var(--cn-shell-h, 560px);
  overflow: hidden;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
}

.cn-shell--contained .cn-shell__sidebar {
  position: relative;
  block-size: 100%;
}

.cn-shell--contained .cn-shell__body {
  overflow: auto;
}

/* Page head: the h1 of an app screen, its meta and its actions */
.cn-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cn-space-4);
  margin-block-end: var(--cn-space-6);
}

.cn-pagehead__text {
  display: grid;
  gap: var(--cn-space-1);
  min-inline-size: 0;
}

.cn-pagehead__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-1) var(--cn-space-3);
  color: var(--cn-muted);
  font-size: var(--cn-fs-ui);
}

.cn-pagehead__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-2);
}

/* Sub-navigation beside content (settings, docs) */
.cn-subnav-layout {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  align-items: start;
  gap: var(--cn-space-8);
}

.cn-subnav-layout__nav {
  position: sticky;
  inset-block-start: calc(var(--cn-topbar-h) + var(--cn-space-6));
}

.cn-subnav-layout__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cn-space-6);
  min-inline-size: 0;
}

@media (max-width: 1023px) {
  .cn-subnav-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cn-space-4);
  }

  .cn-subnav-layout__nav {
    position: static;
  }
}

/* A titled block inside a screen */
.cn-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cn-space-3);
  margin-block-end: var(--cn-space-6);
}

.cn-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-2);
}

.cn-block__title {
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
  font-weight: var(--cn-weight-semibold);
  color: var(--cn-ink);
}

@media (max-width: 899px) {
  .cn-shell,
  .cn-shell.is-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .cn-shell::before {
    content: none;
  }

  .cn-shell__sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: var(--cn-z-drawer);
    inline-size: min(300px, 86vw);
    block-size: 100%;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform var(--cn-dur-slow) var(--cn-ease), visibility 0s linear var(--cn-dur-slow);
  }

  [dir="rtl"] .cn-shell__sidebar {
    transform: translateX(100%);
  }

  .cn-shell.is-open .cn-shell__sidebar {
    visibility: visible;
    transform: none;
    transition: transform var(--cn-dur-slow) var(--cn-ease), visibility 0s;
  }

  .cn-shell.is-open .cn-shell__scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--cn-z-drawer) - 1);
    display: block;
    background: var(--cn-scrim);
  }

  .cn-shell__menu {
    display: inline-flex;
  }

  .cn-shell__collapse {
    display: none;
  }

  .cn-shell__topbar {
    padding: 0 var(--cn-space-3);
  }

  .cn-shell__main {
    padding: var(--cn-space-4);
  }

  .cn-shell--contained .cn-shell__sidebar {
    position: fixed;
  }
}

@media (max-width: 639px) {
  .cn-shell__tools .cn-shell__hide-sm {
    display: none;
  }

  .cn-pagehead {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (pointer: coarse) {
  .cn-shell__search {
    block-size: 44px;
  }
}

/* ---- command-palette ---- */
/* Command palette: the hero interaction. Ctrl or Cmd K opens it on every page. Grouped
   results, recent items, a kbd hint on each row, arrow keys to move, Enter to run. */

.cn-palette {
  inline-size: min(640px, calc(100vw - 32px));
  max-inline-size: none;
  max-block-size: min(520px, calc(100vh - 96px));
  margin: 12vh auto auto;
  padding: 0;
  border: 1px solid var(--cn-line-strong);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-raised);
  color: var(--cn-text);
  box-shadow: var(--cn-shadow-dialog);
  overflow: hidden;
}

.cn-palette[open],
.cn-palette--inline {
  display: flex;
  flex-direction: column;
}

.cn-palette::backdrop {
  background: var(--cn-scrim);
}

.cn-palette[open] {
  animation: cn-palette-in var(--cn-dur) var(--cn-ease);
}

@keyframes cn-palette-in {
  from {
    opacity: 0;
    transform: scale(0.985) translateY(-4px);
  }
}

.cn-palette--inline {
  position: relative;
  inline-size: 100%;
  max-inline-size: 640px;
  max-block-size: none;
  margin: 0;
  box-shadow: var(--cn-shadow-pop);
}

.cn-palette__search {
  display: flex;
  align-items: center;
  gap: var(--cn-space-3);
  flex: none;
  block-size: 52px;
  padding: 0 var(--cn-space-3) 0 var(--cn-space-4);
  border-block-end: 1px solid var(--cn-line);
}

.cn-palette__search:focus-within {
  box-shadow: inset 0 -2px 0 var(--cn-focus);
}

.cn-palette__search svg {
  flex: none;
  color: var(--cn-muted);
}

.cn-palette__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cn-ink);
  font-size: var(--cn-fs-body);
}

.cn-palette__input::placeholder {
  color: var(--cn-muted);
  opacity: 1;
}

.cn-palette__input:focus,
.cn-palette__input:focus-visible {
  outline: none;
}

.cn-palette__list {
  position: relative;
  flex: 1 1 auto;
  margin: 0;
  padding: var(--cn-space-1) 6px var(--cn-space-2);
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}

.cn-palette--inline .cn-palette__list {
  max-block-size: 400px;
}

.cn-palette__group {
  padding: var(--cn-space-3) var(--cn-space-2) var(--cn-space-1);
  color: var(--cn-muted);
  font-size: var(--cn-fs-caption);
  line-height: var(--cn-lh-caption);
  font-weight: var(--cn-weight-medium);
}

.cn-palette__opt {
  display: flex;
  align-items: center;
  gap: var(--cn-space-3);
  min-block-size: var(--cn-row);
  padding: 0 var(--cn-space-2);
  border-radius: var(--cn-radius-control);
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
  cursor: pointer;
  user-select: none;
}

.cn-palette__opt > svg {
  flex: none;
  color: var(--cn-muted);
}

.cn-palette__opt:hover {
  background: var(--cn-hover);
}

.cn-palette__opt.is-active,
.cn-palette__opt[aria-selected="true"] {
  background: var(--cn-accent-soft);
  color: var(--cn-ink);
}

.cn-palette__opt.is-active > svg,
.cn-palette__opt[aria-selected="true"] > svg {
  color: var(--cn-accent-text);
}

.cn-palette__label {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cn-palette__label mark {
  background: none;
  color: var(--cn-ink);
  font-weight: var(--cn-weight-semibold);
}

.cn-palette__hint {
  flex: none;
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

.cn-palette__opt .cn-keys {
  flex: none;
}

.cn-palette__empty {
  display: none;
  padding: var(--cn-space-8) var(--cn-space-4);
  color: var(--cn-muted);
  font-size: var(--cn-fs-ui);
  text-align: center;
}

.cn-palette.is-empty .cn-palette__empty {
  display: block;
}

.cn-palette__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-1) var(--cn-space-4);
  flex: none;
  min-block-size: 40px;
  padding: var(--cn-space-2) var(--cn-space-3);
  border-block-start: 1px solid var(--cn-line);
  color: var(--cn-muted);
  font-size: var(--cn-fs-caption);
}

.cn-palette__legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cn-palette__foot-end {
  margin-inline-start: auto;
}

@media (max-width: 639px) {
  .cn-palette {
    margin-block-start: var(--cn-space-4);
  }

  .cn-palette__hint,
  .cn-palette__opt .cn-keys,
  .cn-palette__foot .cn-palette__legend:not(:first-child) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cn-palette[open] {
    animation: none;
  }
}

/* ---- menu ---- */
/* Menu: a dropdown built on <details>, so it opens without JS. Rows are 32px, every command
   shows its shortcut, destructive commands sit last in danger text. */

.cn-menu {
  position: relative;
  display: inline-block;
}

.cn-menu > summary {
  list-style: none;
}

.cn-menu > summary::-webkit-details-marker {
  display: none;
}

.cn-menu[open] > summary {
  background: var(--cn-hover);
  border-color: var(--cn-control);
}

.cn-menu__list {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  inset-inline-start: 0;
  z-index: var(--cn-z-pop);
  display: grid;
  gap: 1px;
  inline-size: max-content;
  min-inline-size: 208px;
  max-inline-size: min(320px, calc(100vw - 32px));
  margin: 0;
  padding: var(--cn-space-1);
  border: 1px solid var(--cn-line-strong);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-raised);
  box-shadow: var(--cn-shadow-pop);
  list-style: none;
}

.cn-menu--end .cn-menu__list {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.cn-menu--up .cn-menu__list {
  inset-block-start: auto;
  inset-block-end: calc(100% + 4px);
}

.cn-menu--block {
  display: block;
}

.cn-menu--block .cn-menu__list {
  inline-size: 100%;
}

.cn-menu__item {
  display: flex;
  align-items: center;
  gap: var(--cn-space-2);
  inline-size: 100%;
  min-block-size: 32px;
  padding: 0 var(--cn-space-2);
  border: 0;
  border-radius: var(--cn-radius-control);
  background: transparent;
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.cn-menu__item > svg {
  flex: none;
  color: var(--cn-muted);
}

.cn-menu__item:hover,
.cn-menu__item:focus-visible {
  background: var(--cn-hover);
  color: var(--cn-ink);
}

.cn-menu__item:focus-visible {
  outline: 2px solid var(--cn-focus);
  outline-offset: -2px;
}

.cn-menu__item .cn-keys,
.cn-menu__item .cn-menu__meta {
  margin-inline-start: auto;
  padding-inline-start: var(--cn-space-4);
}

.cn-menu__meta {
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

.cn-menu__item--danger,
.cn-menu__item--danger > svg {
  color: var(--cn-danger);
}

.cn-menu__item--danger:hover,
.cn-menu__item--danger:focus-visible {
  background: var(--cn-danger-soft);
  color: var(--cn-danger);
}

.cn-menu__item[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.cn-menu__check {
  visibility: hidden;
  color: var(--cn-accent);
}

.cn-menu__item[aria-checked="true"] .cn-menu__check {
  visibility: visible;
}

.cn-menu__item[aria-checked] > .cn-menu__check {
  color: var(--cn-accent-text);
}

.cn-menu__sep {
  block-size: 1px;
  margin: var(--cn-space-1) calc(-1 * var(--cn-space-1));
  background: var(--cn-line);
}

.cn-menu__label {
  padding: var(--cn-space-2) var(--cn-space-2) 2px;
  color: var(--cn-muted);
  font-size: var(--cn-fs-caption);
  line-height: var(--cn-lh-caption);
  font-weight: var(--cn-weight-medium);
}

/* A menu rendered in place (component pages): the list flows instead of floating */
.cn-menu--static .cn-menu__list {
  position: static;
  margin-block-start: var(--cn-space-1);
}

@media (pointer: coarse) {
  .cn-menu__item {
    min-block-size: 44px;
  }

  .cn-menu__item .cn-keys {
    display: none;
  }
}

/* ---- hero ---- */
/* Hero: left-aligned copy with one primary action and its shortcut, then the night screen: a
   dimmed app behind a live, typeable command palette. Inner pages use .cn-hero--plain. */

.cn-hero {
  padding-block: var(--cn-space-20) var(--cn-space-16);
}

.cn-hero__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: var(--cn-space-5);
  max-inline-size: 760px;
}

.cn-hero__title {
  font-size: var(--cn-fs-display);
  line-height: var(--cn-lh-display);
  letter-spacing: var(--cn-track-display);
}

.cn-hero__lede {
  max-inline-size: 60ch;
  color: var(--cn-muted);
  font-size: var(--cn-fs-lede);
  line-height: var(--cn-lh-lede);
}

.cn-hero__actions {
  margin-block-start: var(--cn-space-1);
}

.cn-hero__hint {
  color: var(--cn-muted);
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-body);
}

.cn-hero__hint .cn-keys {
  margin-inline-end: var(--cn-space-1);
  vertical-align: 1px;
}

.cn-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cn-space-2) var(--cn-space-6);
  margin: var(--cn-space-1) 0 0;
  padding: 0;
  list-style: none;
  color: var(--cn-muted);
  font-size: var(--cn-fs-ui);
}

.cn-hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: var(--cn-space-2);
}

.cn-hero__facts svg {
  color: var(--cn-accent-text);
}

/* The night screen */
.cn-hero__screen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: start;
  min-block-size: 560px;
  margin-block-start: var(--cn-space-12);
  padding: var(--cn-space-16) var(--cn-space-4) var(--cn-space-8);
  border: 1px solid var(--cn-night-line);
  border-radius: var(--cn-radius-panel);
  overflow: hidden;
  isolation: isolate;
}

.cn-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  user-select: none;
}

.cn-hero__backdrop .cn-shell--contained {
  block-size: 100%;
  border: 0;
  border-radius: 0;
}

.cn-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--cn-night-canvas) 58%, transparent);
}

.cn-hero__screen .cn-palette--inline {
  inline-size: min(600px, 100%);
}

/* Inner pages: title, lede and maybe actions, no screen */
.cn-hero--plain {
  padding-block: var(--cn-space-16) var(--cn-space-12);
}

.cn-hero--plain .cn-hero__title {
  font-size: var(--cn-fs-title);
  line-height: var(--cn-lh-title);
  letter-spacing: var(--cn-track-title);
}

.cn-hero--center .cn-hero__copy {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

@media (max-width: 759px) {
  .cn-hero {
    padding-block: var(--cn-space-12) var(--cn-space-10);
  }

  .cn-hero__screen {
    min-block-size: 0;
    margin-block-start: var(--cn-space-8);
    padding: var(--cn-space-3);
  }

  .cn-hero__backdrop {
    display: none;
  }

  .cn-hero__scrim {
    background: var(--cn-night-canvas);
  }
}

/* ---- section-header ---- */
/* Sections and their headers. Sections are separated by one hairline that spans the content
   width, never the viewport. The common layout puts the header in a 4-column aside and the
   content in 8 columns, like a settings page. */

.cn-section {
  padding-block: var(--cn-space-20);
}

.cn-section + .cn-section {
  padding-block-start: 0;
}

.cn-section + .cn-section > .cn-container {
  position: relative;
  padding-block-start: var(--cn-space-20);
}

.cn-section + .cn-section > .cn-container::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--cn-gutter);
  border-block-start: 1px solid var(--cn-line);
}

.cn-section--tight {
  padding-block: var(--cn-space-12);
}

.cn-section + .cn-section--tight > .cn-container {
  padding-block-start: var(--cn-space-12);
}

/* A full-bleed panel band, bordered top and bottom */
.cn-section--band {
  border-block: 1px solid var(--cn-line);
  background: var(--cn-panel);
}

.cn-section--band + .cn-section,
.cn-section + .cn-section--band {
  padding-block-start: var(--cn-space-20);
}

.cn-section--band + .cn-section > .cn-container,
.cn-section + .cn-section--band > .cn-container {
  padding-block-start: 0;
}

.cn-section--band + .cn-section > .cn-container::before,
.cn-section + .cn-section--band > .cn-container::before {
  content: none;
}

.cn-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--cn-space-12);
  align-items: start;
}

.cn-section__aside--sticky {
  position: sticky;
  inset-block-start: calc(var(--cn-nav-h) + var(--cn-space-8));
}

.cn-section__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cn-space-6);
  min-inline-size: 0;
}

.cn-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: var(--cn-space-3);
  max-inline-size: 640px;
  margin-block-end: var(--cn-space-10);
}

.cn-section__aside .cn-head {
  margin-block-end: 0;
}

.cn-section__aside .cn-head__title {
  font-size: var(--cn-fs-section);
  line-height: var(--cn-lh-title);
}

.cn-head__title {
  font-size: var(--cn-fs-title);
  line-height: var(--cn-lh-title);
  letter-spacing: var(--cn-track-title);
}

.cn-head__intro {
  color: var(--cn-muted);
}

.cn-head__actions {
  margin-block-start: var(--cn-space-2);
}

.cn-head__keys {
  inline-size: 100%;
  margin-block-start: var(--cn-space-3);
}

.cn-head--center {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.cn-head--wide {
  max-inline-size: 840px;
}

@media (max-width: 959px) {
  .cn-section__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cn-space-8);
  }

  .cn-section__aside--sticky {
    position: static;
  }
}

@media (max-width: 759px) {
  .cn-section {
    padding-block: var(--cn-space-12);
  }

  .cn-section + .cn-section > .cn-container,
  .cn-section--band + .cn-section,
  .cn-section + .cn-section--band {
    padding-block-start: var(--cn-space-12);
  }

  .cn-head {
    margin-block-end: var(--cn-space-8);
  }
}

/* ---- features ---- */
/* Features: a ruled grid. Cells share 1px lines like a spec table; each cell names one
   capability, says what it does in a sentence and, where it has one, shows its shortcut. */

.cn-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-line);
  list-style: none;
}

.cn-features--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cn-features--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cn-feature {
  display: flex;
  flex-direction: column;
  gap: var(--cn-space-2);
  min-inline-size: 0;
  padding: var(--cn-space-6);
  background: var(--cn-panel);
}

.cn-feature__icon {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  margin-block-end: var(--cn-space-2);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-control);
  background: var(--cn-well);
  color: var(--cn-accent-text);
}

.cn-feature__title {
  font-size: var(--cn-fs-card);
  line-height: var(--cn-lh-body);
  font-weight: var(--cn-weight-semibold);
  color: var(--cn-ink);
}

.cn-feature__text {
  color: var(--cn-muted);
}

.cn-feature__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-2);
  margin-block-start: auto;
  padding-block-start: var(--cn-space-3);
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

/* Check lists */
.cn-checks {
  display: grid;
  gap: var(--cn-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cn-checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--cn-space-2);
}

.cn-checks svg {
  flex: none;
  margin-block-start: 3px;
  color: var(--cn-accent-text);
}

.cn-checks--no svg {
  color: var(--cn-muted);
}

@media (max-width: 1099px) {
  .cn-features--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .cn-features {
    grid-template-columns: minmax(0, 1fr);
  }

  .cn-features--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 559px) {
  .cn-features--4,
  .cn-features--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .cn-feature {
    padding: var(--cn-space-5);
  }
}

/* ---- cards ---- */
/* Cards and panels: white on the canvas, one 1px line, 8px corners, no shadow, no colored
   edge. The head has no rule under it; space separates it from the body. */

.cn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-panel);
  color: var(--cn-text);
}

.cn-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-2) var(--cn-space-3);
  min-block-size: 52px;
  padding: var(--cn-space-3) var(--cn-space-4) 0;
}

.cn-card__heading {
  display: grid;
  gap: 2px;
  min-inline-size: 0;
}

.cn-card__title {
  margin: 0;
  color: var(--cn-ink);
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
  font-weight: var(--cn-weight-semibold);
}

.cn-card__meta {
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
  line-height: var(--cn-lh-ui);
}

.cn-card__actions {
  display: flex;
  align-items: center;
  gap: var(--cn-space-1);
  margin-inline-start: auto;
}

.cn-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--cn-space-3);
  flex: 1 1 auto;
  min-inline-size: 0;
  padding: var(--cn-space-4);
}

.cn-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-2);
  padding: var(--cn-space-3) var(--cn-space-4);
  border-block-start: 1px solid var(--cn-line);
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

.cn-card__foot--end {
  justify-content: flex-end;
}

.cn-card--flush > .cn-card__body {
  padding: 0;
}

.cn-card--flush > .cn-card__head {
  padding-block-end: var(--cn-space-3);
}

.cn-card--well {
  background: var(--cn-well);
}

.cn-card--roomy > .cn-card__head {
  padding: var(--cn-space-6) var(--cn-space-6) 0;
}

.cn-card--roomy > .cn-card__body {
  padding: var(--cn-space-6);
}

.cn-page--site .cn-card__title,
.cn-card--roomy .cn-card__title {
  font-size: var(--cn-fs-card);
  line-height: var(--cn-lh-body);
}

/* Whole card is a link through its title */
.cn-card--link {
  transition: border-color var(--cn-dur-fast) var(--cn-ease);
}

.cn-card--link:hover {
  border-color: var(--cn-control);
}

.cn-card--link :is(.cn-card__title, h2, h3) a {
  color: inherit;
  text-decoration: none;
}

.cn-card--link :is(.cn-card__title, h2, h3) a:hover {
  text-decoration: underline;
  text-decoration-color: var(--cn-line-strong);
}

.cn-card--link :is(.cn-card__title, h2, h3) a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.cn-card--link :is(.cn-card__title, h2, h3) a:focus-visible {
  outline: none;
}

.cn-card--link:has(a:focus-visible) {
  outline: 2px solid var(--cn-focus);
  outline-offset: 2px;
}

.cn-card--selected {
  border-color: var(--cn-accent);
  background: var(--cn-accent-soft);
}

/* ---- bento ---- */
/* Bento: a 6-column grid of cards whose top half is a coded mini screen built from real
   Console parts (rows, keys, dots, menus), never an image. */

.cn-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--cn-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cn-bento > li {
  display: flex;
  grid-column: span 2;
  min-inline-size: 0;
}

.cn-bento > .cn-bento__wide {
  grid-column: span 3;
}

.cn-bento > .cn-bento__xl {
  grid-column: span 4;
}

.cn-bento > .cn-bento__full {
  grid-column: 1 / -1;
}

.cn-bento .cn-card {
  inline-size: 100%;
  overflow: hidden;
}

.cn-bento__visual {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--cn-space-2);
  block-size: 200px;
  padding: var(--cn-space-5);
  overflow: hidden;
  border-block-end: 1px solid var(--cn-line);
  background: var(--cn-well);
  font-size: var(--cn-fs-ui);
}

.cn-bento__visual--center {
  justify-items: center;
}

.cn-bento__visual > * {
  min-inline-size: 0;
}

.cn-bento__body {
  display: grid;
  gap: var(--cn-space-2);
  padding: var(--cn-space-5);
}

.cn-bento__title {
  color: var(--cn-ink);
  font-size: var(--cn-fs-card);
  line-height: var(--cn-lh-body);
  font-weight: var(--cn-weight-semibold);
}

.cn-bento__text {
  color: var(--cn-muted);
}

/* Mini rows inside a visual */
.cn-mini {
  display: grid;
  inline-size: 100%;
  max-inline-size: 420px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-panel);
}

.cn-mini__row {
  display: flex;
  align-items: center;
  gap: var(--cn-space-2);
  min-block-size: 36px;
  padding: 0 var(--cn-space-3);
  border-block-end: 1px solid var(--cn-line);
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
  white-space: nowrap;
}

.cn-mini__row:last-child,
.cn-mini > li:last-child > .cn-mini__row {
  border-block-end: 0;
}

.cn-mini > li {
  display: block;
}

a.cn-mini__row {
  color: var(--cn-text);
  text-decoration: none;
}

a.cn-mini__row:hover {
  background: var(--cn-hover);
  color: var(--cn-ink);
}

a.cn-mini__row:focus-visible {
  outline: 2px solid var(--cn-focus);
  outline-offset: -2px;
}

.cn-mini__text {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cn-mini--flush {
  max-inline-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  list-style: none;
}

.cn-mini__row.is-active {
  background: var(--cn-accent-soft);
  color: var(--cn-ink);
}

.cn-mini__end {
  margin-inline-start: auto;
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

@media (max-width: 1099px) {
  .cn-bento > li,
  .cn-bento > .cn-bento__wide {
    grid-column: span 3;
  }

  .cn-bento > .cn-bento__xl {
    grid-column: 1 / -1;
  }
}

@media (max-width: 719px) {
  .cn-bento > li,
  .cn-bento > .cn-bento__wide,
  .cn-bento > .cn-bento__xl {
    grid-column: 1 / -1;
  }

  .cn-bento__visual {
    block-size: auto;
    min-block-size: 168px;
  }
}

/* ---- stats ---- */
/* Stats: a ruled row of checkable facts with units. Never customer counts or ratings. */

.cn-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-line);
  list-style: none;
}

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

.cn-stat {
  display: grid;
  align-content: start;
  gap: var(--cn-space-1);
  min-inline-size: 0;
  padding: var(--cn-space-5) var(--cn-space-6);
  background: var(--cn-panel);
}

.cn-stat__value {
  display: flex;
  align-items: baseline;
  gap: var(--cn-space-1);
  color: var(--cn-ink);
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: var(--cn-weight-semibold);
  letter-spacing: var(--cn-track-title);
  font-variant-numeric: tabular-nums;
}

.cn-stat__unit {
  color: var(--cn-muted);
  font-size: var(--cn-fs-body);
  font-weight: var(--cn-weight-regular);
  letter-spacing: 0;
}

.cn-stat__label {
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
}

.cn-stat__note {
  color: var(--cn-muted);
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-caption);
  line-height: var(--cn-lh-caption);
}

@media (max-width: 899px) {
  .cn-stats,
  .cn-stats--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .cn-stats,
  .cn-stats--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- stat-tile ---- */
/* Stat tile: label, a tabular value, the change against a stated period and a sparkline.
   The delta carries an arrow and a sign, so color is never the only signal. */

.cn-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--cn-space-4);
}

.cn-tiles--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cn-tiles--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1099px) {
  .cn-tiles--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 559px) {
  .cn-tiles--2,
  .cn-tiles--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cn-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--cn-space-1);
  min-inline-size: 0;
  padding: var(--cn-space-4);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-panel);
}

.cn-tile__label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
}

.cn-tile__label .cn-kbd,
.cn-tile__label .cn-tip {
  margin-inline-start: auto;
}

.cn-tile__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cn-space-1) var(--cn-space-2);
}

.cn-tile__value {
  color: var(--cn-ink);
  font-size: var(--cn-fs-headline);
  line-height: var(--cn-lh-headline);
  font-weight: var(--cn-weight-semibold);
  letter-spacing: var(--cn-track-headline);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cn-tile__unit {
  color: var(--cn-muted);
  font-size: var(--cn-fs-ui);
  font-weight: var(--cn-weight-regular);
  letter-spacing: 0;
}

.cn-tile__delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  block-size: 20px;
  padding: 0 5px 0 3px;
  border-radius: var(--cn-radius-xs);
  font-size: var(--cn-fs-caption);
  font-weight: var(--cn-weight-medium);
  white-space: nowrap;
}

/* Signed numbers keep their sign in front in right-to-left pages */
.cn-tile__delta,
.cn-tile__value {
  direction: ltr;
  unicode-bidi: isolate;
}

.cn-tile__delta svg {
  inline-size: 12px;
  block-size: 12px;
}

.cn-tile__delta--good {
  background: var(--cn-ok-soft);
  color: var(--cn-ok);
}

.cn-tile__delta--bad {
  background: var(--cn-danger-soft);
  color: var(--cn-danger);
}

.cn-tile__delta--flat {
  background: var(--cn-well);
  color: var(--cn-muted);
}

.cn-tile__meta {
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
  line-height: var(--cn-lh-ui);
}

/* Sparkline: an SVG stretched to the tile width; strokes stay 1.5px */
.cn-spark {
  display: block;
  inline-size: 100%;
  block-size: 36px;
  margin-block-start: var(--cn-space-2);
  overflow: visible;
}

.cn-spark__area {
  fill: color-mix(in srgb, var(--cn-viz-1) 13%, transparent);
}

.cn-spark__line {
  fill: none;
  stroke: var(--cn-viz-1);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.cn-spark__base {
  stroke: var(--cn-line);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
}

.cn-spark--bad .cn-spark__line {
  stroke: var(--cn-danger-dot);
}

.cn-spark--bad .cn-spark__area {
  fill: color-mix(in srgb, var(--cn-danger-dot) 12%, transparent);
}

.cn-spark--muted .cn-spark__line {
  stroke: var(--cn-idle-dot);
}

.cn-spark--muted .cn-spark__area {
  fill: var(--cn-well);
}

/* Loading state */
.cn-tile[aria-busy="true"] .cn-tile__value,
.cn-tile[aria-busy="true"] .cn-spark {
  visibility: hidden;
}

/* ---- chart ---- */
/* Chart: inline SVG marks that read only viz tokens, with HTML axes, direct labels and a data
   table behind a disclosure. Bars and lines stretch; text never scales with the SVG. */

.cn-chart {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cn-space-3);
  min-inline-size: 0;
  margin: 0;
}

.cn-chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cn-space-2) var(--cn-space-4);
}

/* Inside a titled card: the caption stays for assistive tech, the card head shows the title */
.cn-chart--bare .cn-chart__title {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cn-chart--bare .cn-chart__head {
  justify-content: flex-end;
}

.cn-chart__title {
  color: var(--cn-ink);
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
  font-weight: var(--cn-weight-semibold);
}

.cn-chart__sub {
  display: block;
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
  font-weight: var(--cn-weight-regular);
}

.cn-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cn-space-1) var(--cn-space-4);
  margin: 0;
  padding: 0;
  color: var(--cn-text);
  font-size: var(--cn-fs-meta);
  list-style: none;
}

.cn-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cn-legend__swatch {
  inline-size: 10px;
  block-size: 10px;
  flex: none;
  border-radius: 2px;
  background: var(--cn-viz-1);
}

.cn-legend__swatch--line {
  inline-size: 14px;
  block-size: 2px;
  border-radius: 0;
}

.cn-legend__swatch--dashed {
  inline-size: 14px;
  block-size: 0;
  border-block-start: 2px dashed var(--cn-viz-2);
  background: none;
}

.cn-legend__swatch--2 { background: var(--cn-viz-2); }
.cn-legend__swatch--3 { background: var(--cn-viz-3); }
.cn-legend__swatch--4 { background: var(--cn-viz-4); }
.cn-legend__swatch--5 { background: var(--cn-viz-5); }
.cn-legend__swatch--6 { background: var(--cn-viz-6); }

.cn-legend__value {
  color: var(--cn-ink);
  font-weight: var(--cn-weight-medium);
  font-variant-numeric: tabular-nums;
}

.cn-legend--stack {
  display: grid;
  gap: var(--cn-space-2);
}

.cn-legend--stack .cn-legend__item {
  display: flex;
}

.cn-legend--stack .cn-legend__value {
  margin-inline-start: auto;
}

/* Plot: y axis, canvas, x axis */
.cn-chart__plot {
  direction: ltr;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--cn-space-2);
  row-gap: var(--cn-space-1);
}

.cn-chart__y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  block-size: var(--cn-chart-h, 200px);
  margin: -8px 0;
  color: var(--cn-muted);
  font-size: var(--cn-fs-caption);
  line-height: var(--cn-lh-caption);
  text-align: end;
}

.cn-chart__canvas {
  position: relative;
  block-size: var(--cn-chart-h, 200px);
  min-inline-size: 0;
}

.cn-chart__canvas > svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.cn-chart__x {
  display: flex;
  grid-column: 2;
  justify-content: space-between;
  color: var(--cn-muted);
  font-size: var(--cn-fs-caption);
  line-height: var(--cn-lh-caption);
}

.cn-chart__x--bars {
  display: grid;
  grid-template-columns: repeat(var(--cn-n, 4), minmax(0, 1fr));
  text-align: center;
}

.cn-chart__grid {
  stroke: var(--cn-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.cn-chart__grid--base {
  stroke: var(--cn-line-strong);
}

.cn-chart__bar { fill: var(--cn-viz-1); }
.cn-chart__bar--2 { fill: var(--cn-viz-2); }
.cn-chart__bar--3 { fill: var(--cn-viz-3); }
.cn-chart__bar--4 { fill: var(--cn-viz-4); }
.cn-chart__bar--5 { fill: var(--cn-viz-5); }
.cn-chart__bar--6 { fill: var(--cn-viz-6); }

.cn-chart__bar--muted {
  fill: var(--cn-line-strong);
}

.cn-chart__line {
  fill: none;
  stroke: var(--cn-viz-1);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.cn-chart__line--2 {
  stroke: var(--cn-viz-2);
  stroke-dasharray: 5 4;
}

.cn-chart__line--3 {
  stroke: var(--cn-viz-3);
}

.cn-chart__area {
  fill: color-mix(in srgb, var(--cn-viz-1) 12%, transparent);
}

.cn-chart__marker {
  stroke: var(--cn-ink);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

/* Direct labels pinned to the end of a series (positioned with --cn-y as a percent) */
.cn-chart__tag {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: var(--cn-y, 0%);
  transform: translateY(-150%);
  padding: 0 4px;
  border-radius: var(--cn-radius-xs);
  background: var(--cn-panel);
  color: var(--cn-ink);
  font-size: var(--cn-fs-caption);
  line-height: var(--cn-lh-caption);
  font-weight: var(--cn-weight-medium);
  white-space: nowrap;
}

/* Donut */
.cn-donut {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  align-items: center;
  gap: var(--cn-space-6);
}

.cn-donut__ring {
  position: relative;
  inline-size: 152px;
  block-size: 152px;
}

.cn-donut__ring > svg {
  inline-size: 100%;
  block-size: 100%;
  transform: rotate(-90deg);
}

[dir="rtl"] .cn-donut__ring > svg {
  transform: rotate(-90deg) scaleY(-1);
}

.cn-donut__track {
  fill: none;
  stroke: var(--cn-well);
  stroke-width: 4;
}

.cn-donut__seg {
  fill: none;
  stroke: var(--cn-viz-1);
  stroke-width: 4;
}

.cn-donut__seg--2 { stroke: var(--cn-viz-2); }
.cn-donut__seg--3 { stroke: var(--cn-viz-3); }
.cn-donut__seg--4 { stroke: var(--cn-viz-4); }
.cn-donut__seg--5 { stroke: var(--cn-viz-5); }
.cn-donut__seg--6 { stroke: var(--cn-viz-6); }

.cn-donut__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.cn-donut__value {
  color: var(--cn-ink);
  font-size: var(--cn-fs-subhead);
  line-height: var(--cn-lh-subhead);
  font-weight: var(--cn-weight-semibold);
}

.cn-donut__label {
  color: var(--cn-muted);
  font-size: var(--cn-fs-caption);
  line-height: var(--cn-lh-caption);
}

/* Data table fallback */
.cn-chart__data > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--cn-space-1);
  color: var(--cn-accent-text);
  font-size: var(--cn-fs-meta);
  font-weight: var(--cn-weight-medium);
  cursor: pointer;
  list-style: none;
}

.cn-chart__data > summary::-webkit-details-marker {
  display: none;
}

.cn-chart__data[open] > summary {
  margin-block-end: var(--cn-space-2);
}

@media (max-width: 479px) {
  .cn-donut {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .cn-donut .cn-legend {
    inline-size: 100%;
  }
}

/* ---- logo-row ---- */
/* Logo row: invented geometric monograms in a ruled strip. Marks use currentColor and never
   represent a real company. */

.cn-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-line);
  list-style: none;
}

.cn-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cn-space-2);
  min-block-size: 72px;
  padding: var(--cn-space-4);
  background: var(--cn-panel);
  color: var(--cn-muted);
  font-size: var(--cn-fs-body);
  font-weight: var(--cn-weight-semibold);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.cn-logo svg {
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  color: var(--cn-text);
}

.cn-logo__role {
  display: block;
  color: var(--cn-muted);
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-caption);
  font-weight: var(--cn-weight-regular);
  letter-spacing: 0;
}

.cn-logo__text {
  display: grid;
  line-height: 1.25;
  color: var(--cn-ink);
}

.cn-logos--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 899px) {
  .cn-logos--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 559px) {
  .cn-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cn-logos__note {
  margin-block-end: var(--cn-space-4);
  color: var(--cn-muted);
}

/* ---- testimonial ---- */
/* Testimonial: a quote from the product's own team (a founder, a support lead), with who said
   it and where. No invented customers, no star ratings. */

.cn-quote {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cn-space-5);
  margin: 0;
  padding: var(--cn-space-6);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-panel);
}

.cn-quote__body {
  margin: 0;
}

.cn-quote__text {
  color: var(--cn-ink);
  font-size: var(--cn-fs-subhead);
  line-height: var(--cn-lh-subhead);
  letter-spacing: -0.005em;
  hanging-punctuation: first;
}

.cn-quote__text + .cn-quote__text {
  margin-block-start: var(--cn-space-3);
}

.cn-quote__by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-3);
}

.cn-quote__context {
  color: var(--cn-muted);
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-caption);
  line-height: var(--cn-lh-caption);
}

.cn-quote--plain {
  padding: 0;
  border: 0;
  background: none;
}

/* ---- pricing ---- */
/* Pricing: plans in equal columns, one featured by a 1px accent line. Real prices, the period
   in words, the monthly alternative under the annual price. */

.cn-pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cn-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cn-pricing--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cn-pricing > li {
  display: flex;
  min-inline-size: 0;
}

.cn-plan {
  display: flex;
  flex-direction: column;
  gap: var(--cn-space-4);
  inline-size: 100%;
  padding: var(--cn-space-6);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-panel);
}

/* Line plans up row by row (name, sentence, price, alternative, action, list) */
@supports (grid-template-rows: subgrid) {
  .cn-pricing > li {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .cn-plan {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: var(--cn-space-3);
  }

  .cn-plan__alt {
    margin-block-start: calc(-1 * var(--cn-space-2));
  }

  .cn-plan__desc {
    min-block-size: 0;
  }

  .cn-plan__top {
    align-self: start;
  }
}

.cn-plan--featured {
  border-color: var(--cn-accent);
}

.cn-plan__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-2);
}

.cn-plan__name {
  color: var(--cn-ink);
  font-size: var(--cn-fs-card);
  line-height: var(--cn-lh-body);
  font-weight: var(--cn-weight-semibold);
}

.cn-plan__desc {
  min-block-size: 48px;
  color: var(--cn-muted);
}

.cn-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cn-space-1) var(--cn-space-2);
}

.cn-plan__amount {
  color: var(--cn-ink);
  font-size: 2.5rem;
  line-height: 2.75rem;
  font-weight: var(--cn-weight-semibold);
  letter-spacing: var(--cn-track-title);
  font-variant-numeric: tabular-nums;
}

.cn-plan__term {
  color: var(--cn-muted);
  font-size: var(--cn-fs-ui);
}

.cn-plan__alt {
  margin-block-start: calc(-1 * var(--cn-space-3));
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

.cn-plan__list {
  display: grid;
  gap: var(--cn-space-2);
  margin: 0;
  padding: var(--cn-space-4) 0 0;
  border-block-start: 1px solid var(--cn-line);
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
  list-style: none;
}

.cn-plan__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--cn-space-2);
}

.cn-plan__list svg {
  flex: none;
  margin-block-start: 2px;
  color: var(--cn-accent-text);
}

.cn-plan__list .cn-plan__no svg {
  color: var(--cn-muted);
}

.cn-plan__list .cn-plan__no {
  color: var(--cn-muted);
}

.cn-pricing__note {
  margin-block-start: var(--cn-space-4);
  color: var(--cn-muted);
}

.cn-pricing__compare {
  margin-block-start: var(--cn-space-12);
}

@media (max-width: 1099px) {
  .cn-pricing--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .cn-pricing {
    grid-template-columns: minmax(0, 1fr);
  }

  .cn-plan__desc {
    min-block-size: 0;
  }

  .cn-plan__top {
    align-self: start;
  }
}

@media (max-width: 599px) {
  .cn-pricing--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- faq ---- */
/* FAQ: native details rows between hairlines. Real questions, answers in full sentences. */

.cn-faq {
  border-block-start: 1px solid var(--cn-line);
}

.cn-faq__item {
  border-block-end: 1px solid var(--cn-line);
}

.cn-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-4);
  min-block-size: 56px;
  padding: var(--cn-space-3) 0;
  color: var(--cn-ink);
  font-size: var(--cn-fs-body);
  line-height: var(--cn-lh-body);
  font-weight: var(--cn-weight-medium);
  list-style: none;
  cursor: pointer;
}

.cn-faq__q::-webkit-details-marker {
  display: none;
}

.cn-faq__q:hover {
  color: var(--cn-accent-text);
}

.cn-faq__icon {
  flex: none;
  color: var(--cn-muted);
  transition: transform var(--cn-dur) var(--cn-ease);
}

.cn-faq__item[open] .cn-faq__icon {
  transform: rotate(45deg);
}

.cn-faq__a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cn-space-3);
  max-inline-size: 68ch;
  padding-block-end: var(--cn-space-5);
  color: var(--cn-text);
}

.cn-faq__contact {
  margin-block-start: var(--cn-space-6);
  color: var(--cn-muted);
}

@media (prefers-reduced-motion: reduce) {
  .cn-faq__icon {
    transition: none;
  }
}

/* ---- cta ---- */
/* CTA close: one panel, the heading and the primary action on the start side, the palette
   shortcut drawn as big keycaps on the end side. */

.cn-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--cn-space-12);
  padding: var(--cn-space-10);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-panel);
}

.cn-cta__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: var(--cn-space-3);
  max-inline-size: 600px;
}

.cn-cta__title {
  font-size: var(--cn-fs-title);
  line-height: var(--cn-lh-title);
  letter-spacing: var(--cn-track-title);
}

.cn-cta__intro {
  color: var(--cn-muted);
}

.cn-cta__actions {
  margin-block-start: var(--cn-space-3);
}

.cn-cta__fine {
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

.cn-cta__keys {
  display: grid;
  justify-items: center;
  gap: var(--cn-space-3);
  padding-inline: var(--cn-space-6);
}

.cn-cta__keys-caption {
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

@media (max-width: 859px) {
  .cn-cta {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cn-space-8);
    padding: var(--cn-space-6);
  }

  .cn-cta__keys {
    justify-items: start;
    padding-inline: 0;
  }
}

/* ---- footer ---- */
/* Footer: link columns under a hairline, then a bar with the legal line, live status and the
   shortcut for the shortcut list. .cn-footer--slim is the one-line app version. */

.cn-footer {
  border-block-start: 1px solid var(--cn-line);
  background: var(--cn-canvas);
  font-size: var(--cn-fs-ui);
}

.cn-footer__inner {
  max-inline-size: calc(var(--cn-content) + 2 * var(--cn-gutter));
  margin-inline: auto;
  padding: var(--cn-space-12) var(--cn-gutter) var(--cn-space-6);
}

.cn-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: var(--cn-space-8);
}

.cn-footer__brand {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--cn-space-3);
}

.cn-footer__about {
  max-inline-size: 36ch;
  color: var(--cn-muted);
}

.cn-footer__title {
  margin-block-end: var(--cn-space-3);
  color: var(--cn-ink);
  font-size: var(--cn-fs-meta);
  line-height: var(--cn-lh-ui);
  font-weight: var(--cn-weight-semibold);
  letter-spacing: 0;
}

.cn-footer__links {
  display: grid;
  gap: var(--cn-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cn-footer__links a {
  color: var(--cn-text);
  text-decoration: none;
}

.cn-footer__links a:hover {
  color: var(--cn-ink);
  text-decoration: underline;
}

.cn-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-3) var(--cn-space-6);
  margin-block-start: var(--cn-space-10);
  padding-block-start: var(--cn-space-5);
  border-block-start: 1px solid var(--cn-line);
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

.cn-footer__bar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-2) var(--cn-space-5);
}

.cn-footer__bar a {
  color: var(--cn-text);
  text-decoration: none;
}

.cn-footer__bar a:hover {
  color: var(--cn-ink);
  text-decoration: underline;
}

.cn-footer--slim .cn-footer__inner {
  padding-block: var(--cn-space-4);
  max-inline-size: none;
  padding-inline: var(--cn-space-6);
}

.cn-footer--slim .cn-footer__bar {
  margin: 0;
  padding: 0;
  border: 0;
}

@media (max-width: 959px) {
  .cn-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cn-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 899px) {
  .cn-footer--slim .cn-footer__inner {
    padding-inline: var(--cn-space-4);
  }
}

@media (pointer: coarse) {
  .cn-footer__links a {
    display: inline-block;
    padding-block: 10px;
  }

  .cn-footer__links {
    gap: 0;
  }
}

/* ---- forms ---- */
/* Forms: 36px controls with 16px input text, labels above (or beside, in settings rows), a hint
   or an error under each field. Errors say what to do, link with aria-describedby and never rely
   on color alone. */

.cn-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cn-space-5);
}

.cn-form--card {
  padding: var(--cn-space-6);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-panel);
}

.cn-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cn-space-4);
}

.cn-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cn-space-2);
  padding-block-start: var(--cn-space-2);
}

.cn-form__foot--between {
  justify-content: space-between;
}

.cn-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 6px;
  min-inline-size: 0;
}

.cn-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cn-space-2);
  color: var(--cn-ink);
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
  font-weight: var(--cn-weight-medium);
}

.cn-label__opt {
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
  font-weight: var(--cn-weight-regular);
}

.cn-input,
.cn-select,
.cn-textarea {
  display: block;
  inline-size: 100%;
  min-block-size: var(--cn-control-h);
  padding: 0 var(--cn-space-3);
  border: 1px solid var(--cn-control);
  border-radius: var(--cn-radius-control);
  background: var(--cn-panel);
  color: var(--cn-ink);
  font-size: var(--cn-fs-body);
  line-height: var(--cn-lh-body);
  transition: border-color var(--cn-dur-fast) var(--cn-ease), box-shadow var(--cn-dur-fast) var(--cn-ease);
}

.cn-textarea {
  min-block-size: 96px;
  padding-block: 6px;
  resize: vertical;
}

.cn-select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: var(--cn-space-8);
  background-image: none;
  cursor: pointer;
}

.cn-select-wrap {
  position: relative;
  display: block;
}

.cn-select-wrap::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 14px;
  inline-size: 7px;
  block-size: 7px;
  border: solid var(--cn-muted);
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.cn-input::placeholder,
.cn-textarea::placeholder {
  color: var(--cn-muted);
  opacity: 1;
}

.cn-input:hover,
.cn-select:hover,
.cn-textarea:hover {
  border-color: var(--cn-ink);
}

.cn-input:focus-visible,
.cn-select:focus-visible,
.cn-textarea:focus-visible {
  border-color: var(--cn-focus);
  outline: 1px solid var(--cn-focus);
  outline-offset: 0;
}

.cn-input--mono {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-ui);
}

.cn-input--sm {
  min-block-size: var(--cn-control-sm);
}

.cn-input[readonly] {
  border-color: var(--cn-line-strong);
  background: var(--cn-well);
  color: var(--cn-text);
}

.cn-input:disabled,
.cn-select:disabled,
.cn-textarea:disabled {
  border-color: var(--cn-line-strong);
  background: var(--cn-well);
  color: var(--cn-muted);
  cursor: not-allowed;
}

.cn-input[aria-invalid="true"],
.cn-select[aria-invalid="true"],
.cn-textarea[aria-invalid="true"] {
  border-color: var(--cn-danger);
  outline: 1px solid var(--cn-danger);
  outline-offset: 0;
}

.cn-hint {
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
  line-height: var(--cn-lh-ui);
}

.cn-error,
.cn-valid {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--cn-fs-meta);
  line-height: var(--cn-lh-ui);
  font-weight: var(--cn-weight-medium);
}

.cn-error {
  color: var(--cn-danger);
}

.cn-valid {
  color: var(--cn-ok);
}

.cn-error svg,
.cn-valid svg {
  flex: none;
  margin-block-start: 3px;
}

/* Prefix and suffix addons */
.cn-input-group {
  display: flex;
  align-items: stretch;
  min-inline-size: 0;
  border: 1px solid var(--cn-control);
  border-radius: var(--cn-radius-control);
  background: var(--cn-panel);
}

.cn-input-group:hover {
  border-color: var(--cn-ink);
}

.cn-input-group:focus-within {
  border-color: var(--cn-focus);
  outline: 1px solid var(--cn-focus);
}

.cn-input-group .cn-input {
  min-inline-size: 0;
  border: 0;
  outline: none;
  background: transparent;
}

.cn-input-group__addon {
  display: flex;
  align-items: center;
  flex: none;
  padding: 0 var(--cn-space-3);
  background: var(--cn-well);
  color: var(--cn-muted);
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-meta);
}

.cn-input-group__addon:first-child {
  border-inline-end: 1px solid var(--cn-line);
  border-start-start-radius: inherit;
  border-end-start-radius: inherit;
}

.cn-input-group__addon:last-child {
  border-inline-start: 1px solid var(--cn-line);
  border-start-end-radius: inherit;
  border-end-end-radius: inherit;
}

/* Checkbox and radio rows */
.cn-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--cn-space-2);
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
  cursor: pointer;
}

.cn-check input {
  margin-block-start: 2px;
}

.cn-check__hint {
  display: block;
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

.cn-fieldset {
  display: grid;
  gap: var(--cn-space-2);
}

.cn-fieldset__legend {
  margin-block-end: var(--cn-space-1);
  padding: 0;
  color: var(--cn-ink);
  font-size: var(--cn-fs-ui);
  font-weight: var(--cn-weight-medium);
}

/* Settings row: label and description on the start side, the control on the end side */
.cn-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: start;
  gap: var(--cn-space-2) var(--cn-space-8);
  padding-block: var(--cn-space-5);
  border-block-end: 1px solid var(--cn-line);
}

.cn-setting:last-child {
  border-block-end: 0;
}

.cn-setting__text {
  display: grid;
  gap: 2px;
}

.cn-setting__title {
  color: var(--cn-ink);
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
  font-weight: var(--cn-weight-medium);
}

.cn-setting__desc {
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
  line-height: var(--cn-lh-ui);
}

.cn-setting__control {
  display: grid;
  gap: var(--cn-space-2);
  min-inline-size: 0;
}

.cn-setting__control > :is(.cn-btn, .cn-seg, .cn-tags, .cn-person, .cn-badge) {
  justify-self: start;
}

.cn-setting__control--end {
  justify-items: end;
}

.cn-setting__control--end > :is(.cn-btn, .cn-seg, .cn-tags, .cn-person, .cn-badge) {
  justify-self: end;
}

@media (max-width: 719px) {
  .cn-form__row,
  .cn-setting {
    grid-template-columns: minmax(0, 1fr);
  }

  .cn-setting__control--end,
  .cn-setting__control--end > :is(.cn-btn, .cn-seg, .cn-tags, .cn-person, .cn-badge) {
    justify-items: start;
    justify-self: start;
  }
}

@media (pointer: coarse) {
  .cn-input,
  .cn-select {
    min-block-size: 44px;
  }
}

/* ---- switch ---- */
/* Switch: a checkbox with role="switch" for settings that apply at once. 32 x 20 track; the
   label says what turns on, the state reads On or Off for assistive tech. */

.cn-switch {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--cn-space-3);
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
  cursor: pointer;
}

.cn-switch__input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  display: inline-block;
  inline-size: 32px;
  block-size: 20px;
  margin: 0;
  border: 1px solid var(--cn-control);
  border-radius: var(--cn-radius-round);
  background: var(--cn-well);
  cursor: pointer;
  transition: background-color var(--cn-dur) var(--cn-ease), border-color var(--cn-dur) var(--cn-ease);
}

.cn-switch__input::before {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 14px;
  block-size: 14px;
  border-radius: var(--cn-radius-round);
  background: var(--cn-control);
  transform: none;
  transition: transform var(--cn-dur) var(--cn-ease), background-color var(--cn-dur) var(--cn-ease);
}

.cn-switch__input:checked {
  border-color: var(--cn-accent);
  background: var(--cn-accent);
}

.cn-switch__input:checked::before {
  background: var(--cn-on-accent);
  transform: translateX(12px);
}

[dir="rtl"] .cn-switch__input:checked::before {
  transform: translateX(-12px);
}

.cn-switch__input:hover {
  border-color: var(--cn-ink);
}

.cn-switch__input:checked:hover {
  border-color: var(--cn-accent);
}

.cn-switch__input:focus-visible {
  outline: 2px solid var(--cn-focus);
  outline-offset: 2px;
}

.cn-switch__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cn-switch:has(.cn-switch__input:disabled) {
  cursor: not-allowed;
}

.cn-switch__text {
  display: grid;
  gap: 2px;
}

.cn-switch__label {
  color: var(--cn-ink);
  font-weight: var(--cn-weight-medium);
}

.cn-switch__desc {
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

.cn-switch__state {
  min-inline-size: 24px;
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

.cn-switch--end {
  justify-content: space-between;
  inline-size: 100%;
}

.cn-switch--end .cn-switch__input {
  order: 2;
}

.cn-setting > .cn-switch {
  grid-column: 1 / -1;
}

@media (pointer: coarse) {
  .cn-switch {
    min-block-size: 44px;
    align-items: center;
  }
}

/* ---- choice-cards ---- */
/* Choice cards: radio (or checkbox) options with a title, a line of detail and a value, for
   plans, regions and roles. The selected card takes the accent line and a soft fill. */

.cn-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--cn-space-3);
}

.cn-choices--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 479px) {
  .cn-choices--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cn-choices--stack {
  grid-template-columns: minmax(0, 1fr);
}

.cn-choices__legend {
  grid-column: 1 / -1;
  margin-block-end: var(--cn-space-1);
  padding: 0;
  color: var(--cn-ink);
  font-size: var(--cn-fs-ui);
  font-weight: var(--cn-weight-medium);
}

.cn-choice {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px var(--cn-space-3);
  padding: var(--cn-space-4);
  border: 1px solid var(--cn-line-strong);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-panel);
  cursor: pointer;
  transition: border-color var(--cn-dur-fast) var(--cn-ease), background-color var(--cn-dur-fast) var(--cn-ease);
}

.cn-choice:hover {
  border-color: var(--cn-control);
}

.cn-choice > input {
  grid-row: 1 / span 3;
  margin-block-start: 2px;
}

.cn-choice__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-2);
  color: var(--cn-ink);
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
  font-weight: var(--cn-weight-semibold);
}

.cn-choice__desc {
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
  line-height: var(--cn-lh-ui);
}

.cn-choice__value {
  margin-block-start: var(--cn-space-2);
  color: var(--cn-ink);
  font-size: var(--cn-fs-ui);
  font-weight: var(--cn-weight-medium);
  font-variant-numeric: tabular-nums;
}

.cn-choice:has(input:checked) {
  border-color: var(--cn-accent);
  background: var(--cn-accent-soft);
}

.cn-choice:has(input:focus-visible) {
  outline: 2px solid var(--cn-focus);
  outline-offset: 2px;
}

.cn-choice > input:focus-visible {
  outline: none;
}

.cn-choice:has(input:disabled) {
  border-color: var(--cn-line);
  background: var(--cn-well);
  cursor: not-allowed;
}

.cn-choice:has(input:disabled) .cn-choice__title,
.cn-choice:has(input:disabled) .cn-choice__value {
  color: var(--cn-muted);
}

/* ---- search-field ---- */
/* Search field: an icon, a 16px input, the "/" shortcut while empty and a clear button once
   there is a query. A spinner replaces the icon while results load. */

.cn-search {
  position: relative;
  display: flex;
  align-items: center;
  inline-size: 100%;
  min-inline-size: 0;
}

.cn-search__icon {
  position: absolute;
  inset-inline-start: 10px;
  color: var(--cn-muted);
  pointer-events: none;
}

.cn-search__input {
  inline-size: 100%;
  min-block-size: var(--cn-control-h);
  padding: 0 40px 0 34px;
  border: 1px solid var(--cn-control);
  border-radius: var(--cn-radius-control);
  background: var(--cn-panel);
  color: var(--cn-ink);
  font-size: var(--cn-fs-body);
  line-height: var(--cn-lh-body);
  transition: border-color var(--cn-dur-fast) var(--cn-ease);
}

.cn-search__input::placeholder {
  color: var(--cn-muted);
  opacity: 1;
}

.cn-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.cn-search__input:hover {
  border-color: var(--cn-ink);
}

.cn-search__input:focus-visible {
  border-color: var(--cn-focus);
  outline: 1px solid var(--cn-focus);
  outline-offset: 0;
}

.cn-search__input:disabled {
  border-color: var(--cn-line-strong);
  background: var(--cn-well);
  cursor: not-allowed;
}

.cn-search__kbd {
  position: absolute;
  inset-inline-end: 8px;
  pointer-events: none;
}

.cn-search__clear {
  position: absolute;
  inset-inline-end: 4px;
  display: none;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--cn-radius-control);
  background: transparent;
  color: var(--cn-muted);
  cursor: pointer;
}

.cn-search__clear:hover {
  background: var(--cn-hover);
  color: var(--cn-ink);
}

.cn-search__input:not(:placeholder-shown) ~ .cn-search__kbd {
  display: none;
}

.cn-search__input:not(:placeholder-shown) ~ .cn-search__clear {
  display: grid;
}

.cn-search--sm .cn-search__input {
  min-block-size: var(--cn-control-sm);
}

.cn-search--sm .cn-search__clear {
  inline-size: 24px;
  block-size: 24px;
}

.cn-search.is-loading .cn-search__icon {
  visibility: hidden;
}

.cn-search.is-loading::before {
  content: "";
  position: absolute;
  inset-inline-start: 11px;
  inline-size: 14px;
  block-size: 14px;
  border: 2px solid var(--cn-muted);
  border-inline-end-color: transparent;
  border-radius: var(--cn-radius-round);
  animation: cn-spin 700ms linear infinite;
}

.cn-search__status {
  margin-block-start: 6px;
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

@media (pointer: coarse) {
  .cn-search__input {
    min-block-size: 44px;
  }

  .cn-search__kbd {
    display: none;
  }

  .cn-search__clear {
    inline-size: 36px;
    block-size: 36px;
  }
}

/* ---- file-drop ---- */
/* File drop: a dashed zone that is also a real file input (keyboard and screen readers use the
   input), then a list of files with size, progress and an error line when one fails. */

.cn-drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--cn-space-2);
  padding: var(--cn-space-8) var(--cn-space-6);
  border: 1px dashed var(--cn-control);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-panel);
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--cn-dur-fast) var(--cn-ease), background-color var(--cn-dur-fast) var(--cn-ease);
}

.cn-drop:hover {
  border-color: var(--cn-ink);
}

.cn-drop:focus-within {
  outline: 2px solid var(--cn-focus);
  outline-offset: 2px;
}

.cn-drop.is-over {
  border-style: solid;
  border-color: var(--cn-accent);
  background: var(--cn-accent-soft);
}

.cn-drop.is-invalid {
  border-color: var(--cn-danger);
}

.cn-drop__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.cn-drop__icon {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-well);
  color: var(--cn-muted);
}

.cn-drop__title {
  color: var(--cn-ink);
  font-weight: var(--cn-weight-medium);
}

.cn-drop__title u {
  color: var(--cn-accent-text);
  text-underline-offset: 3px;
}

.cn-drop__meta {
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

.cn-files {
  display: grid;
  gap: 0;
  margin: var(--cn-space-3) 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-panel);
  list-style: none;
}

.cn-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px var(--cn-space-3);
  padding: var(--cn-space-3);
  border-block-end: 1px solid var(--cn-line);
  font-size: var(--cn-fs-ui);
}

.cn-file:last-child {
  border-block-end: 0;
}

.cn-file > svg {
  color: var(--cn-muted);
}

.cn-file__name {
  overflow: hidden;
  color: var(--cn-ink);
  font-weight: var(--cn-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cn-file__meta {
  color: var(--cn-muted);
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-caption);
}

.cn-file__bar {
  grid-column: 2 / -1;
}

.cn-file--error > svg,
.cn-file--error .cn-file__meta {
  color: var(--cn-danger);
}

/* ---- newsletter ---- */
/* Newsletter: one labelled email field and one button on a line, a sentence on what arrives
   and how often, and a polite confirmation in place of the form. */

.cn-newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cn-space-3);
  max-inline-size: 560px;
}

.cn-newsletter--panel {
  max-inline-size: none;
  padding: var(--cn-space-6);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-panel);
}

.cn-newsletter__title {
  color: var(--cn-ink);
  font-size: var(--cn-fs-card);
  line-height: var(--cn-lh-body);
  font-weight: var(--cn-weight-semibold);
}

.cn-newsletter__text {
  color: var(--cn-muted);
}

.cn-newsletter__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--cn-space-2);
}

.cn-newsletter__form .cn-field {
  min-inline-size: 0;
}

.cn-newsletter__fine {
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

.cn-newsletter__done {
  display: flex;
  align-items: center;
  gap: var(--cn-space-2);
  min-block-size: var(--cn-control-h);
  color: var(--cn-ok);
  font-size: var(--cn-fs-ui);
  font-weight: var(--cn-weight-medium);
}

.cn-newsletter__done[hidden] {
  display: none;
}

@media (max-width: 479px) {
  .cn-newsletter__form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- date-range ---- */
/* Date range: a trigger that states the range, then presets beside a two-month calendar.
   No date library: the calendar is a table of day buttons, the range is classes. */

.cn-daterange {
  position: relative;
  display: inline-block;
}

.cn-daterange > summary {
  list-style: none;
}

.cn-daterange > summary::-webkit-details-marker {
  display: none;
}

.cn-daterange__value {
  font-variant-numeric: tabular-nums;
}

.cn-daterange__panel {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  inset-inline-start: 0;
  z-index: var(--cn-z-pop);
  display: grid;
  grid-template-columns: 168px auto;
  inline-size: max-content;
  max-inline-size: calc(100vw - 32px);
  border: 1px solid var(--cn-line-strong);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-raised);
  box-shadow: var(--cn-shadow-pop);
}

.cn-daterange--end .cn-daterange__panel {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.cn-daterange--static .cn-daterange__panel {
  position: static;
  margin-block-start: var(--cn-space-1);
}

.cn-daterange__presets {
  display: grid;
  align-content: start;
  gap: 2px;
  margin: 0;
  padding: var(--cn-space-2);
  border-inline-end: 1px solid var(--cn-line);
  list-style: none;
}

.cn-daterange__preset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-2);
  inline-size: 100%;
  min-block-size: 32px;
  padding: 0 var(--cn-space-2);
  border: 0;
  border-radius: var(--cn-radius-control);
  background: transparent;
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
  text-align: start;
  cursor: pointer;
}

.cn-daterange__preset:hover {
  background: var(--cn-hover);
  color: var(--cn-ink);
}

.cn-daterange__preset[aria-pressed="true"] {
  background: var(--cn-accent-soft);
  color: var(--cn-ink);
  font-weight: var(--cn-weight-medium);
}

.cn-daterange__main {
  display: grid;
  gap: var(--cn-space-3);
  padding: var(--cn-space-3) var(--cn-space-4) var(--cn-space-4);
}

.cn-daterange__months {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: var(--cn-space-6);
}

.cn-daterange__inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cn-space-3);
}

.cn-daterange__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-2);
  padding-block-start: var(--cn-space-3);
  border-block-start: 1px solid var(--cn-line);
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

/* Calendar month */
.cn-cal {
  border-collapse: collapse;
  font-size: var(--cn-fs-ui);
}

.cn-cal caption {
  padding-block-end: var(--cn-space-2);
  color: var(--cn-ink);
  font-weight: var(--cn-weight-semibold);
  text-align: start;
}

.cn-cal th {
  block-size: 28px;
  color: var(--cn-muted);
  font-size: var(--cn-fs-caption);
  font-weight: var(--cn-weight-medium);
}

.cn-cal td {
  padding: 1px 0;
  text-align: center;
}

.cn-cal__day {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--cn-radius-control);
  background: transparent;
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.cn-cal__day:hover {
  background: var(--cn-hover);
  color: var(--cn-ink);
}

.cn-cal td.is-in-range {
  background: var(--cn-accent-soft);
}

.cn-cal td.is-in-range .cn-cal__day {
  color: var(--cn-ink);
}

.cn-cal td.is-start {
  background: var(--cn-accent-soft);
  border-start-start-radius: var(--cn-radius-control);
  border-end-start-radius: var(--cn-radius-control);
}

.cn-cal td.is-end {
  background: var(--cn-accent-soft);
  border-start-end-radius: var(--cn-radius-control);
  border-end-end-radius: var(--cn-radius-control);
}

.cn-cal td.is-start .cn-cal__day,
.cn-cal td.is-end .cn-cal__day {
  background: var(--cn-accent);
  color: var(--cn-on-accent);
  font-weight: var(--cn-weight-semibold);
}

.cn-cal__day.is-today {
  box-shadow: inset 0 0 0 1px var(--cn-control);
}

.cn-cal__day[aria-disabled="true"],
.cn-cal__day:disabled {
  color: var(--cn-muted);
  opacity: 0.55;
  cursor: not-allowed;
}

.cn-cal__day:disabled:hover {
  background: transparent;
}

@media (max-width: 719px) {
  .cn-daterange__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .cn-daterange__presets {
    display: flex;
    flex-wrap: wrap;
    border-inline-end: 0;
    border-block-end: 1px solid var(--cn-line);
  }

  .cn-daterange__presets li {
    flex: 0 0 auto;
  }

  .cn-daterange__months {
    grid-template-columns: minmax(0, 1fr);
  }

  .cn-daterange__months > .cn-cal:nth-child(2) {
    display: none;
  }

  .cn-cal__day {
    inline-size: 36px;
    block-size: 36px;
  }
}

/* ---- filter-bar ---- */
/* Filter bar: saved views on the first line; filter chips (field, operator, value) on the
   second, with an Add filter menu and Clear all. Chips are 28px and squared like controls. */

.cn-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cn-space-3);
}

.cn-filters__views {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-1);
}

.cn-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  block-size: 28px;
  padding: 0 var(--cn-space-2);
  border: 1px solid transparent;
  border-radius: var(--cn-radius-control);
  background: transparent;
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
  font-weight: var(--cn-weight-medium);
  text-decoration: none;
  cursor: pointer;
}

.cn-view:hover {
  background: var(--cn-hover);
  color: var(--cn-ink);
}

.cn-view[aria-current="true"],
.cn-view[aria-pressed="true"] {
  border-color: var(--cn-line-strong);
  background: var(--cn-panel);
  color: var(--cn-ink);
}

.cn-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-2);
}

.cn-filters__chips {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cn-filter {
  display: inline-flex;
  align-items: stretch;
  block-size: 28px;
  overflow: hidden;
  border: 1px solid var(--cn-line-strong);
  border-radius: var(--cn-radius-control);
  background: var(--cn-panel);
  font-size: var(--cn-fs-meta);
  white-space: nowrap;
}

.cn-filter__part {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--cn-space-2);
  border-inline-end: 1px solid var(--cn-line);
  color: var(--cn-muted);
}

.cn-filter__part svg {
  inline-size: 14px;
  block-size: 14px;
}

.cn-filter__op {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-caption);
}

.cn-filter__value {
  color: var(--cn-ink);
  font-weight: var(--cn-weight-medium);
}

.cn-filter__remove {
  display: grid;
  place-items: center;
  inline-size: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cn-muted);
  cursor: pointer;
}

.cn-filter__remove:hover {
  background: var(--cn-hover);
  color: var(--cn-ink);
}

.cn-filter__remove:focus-visible {
  outline: 2px solid var(--cn-focus);
  outline-offset: -2px;
}

.cn-filter--draft {
  border-style: dashed;
}

.cn-filters__end {
  display: flex;
  align-items: center;
  gap: var(--cn-space-2);
  margin-inline-start: auto;
}

.cn-filters__count {
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

@media (pointer: coarse) {
  .cn-filter,
  .cn-view {
    block-size: 36px;
  }

  .cn-filter__remove {
    inline-size: 36px;
  }
}

/* ---- tables ---- */
/* Tables: 36px rows (32px compact), 13px column labels in sentence case, 1px row lines, no
   zebra, no tinted header. Numbers right-aligned in tabular figures; IDs in Plex Mono. */

.cn-table-wrap {
  position: relative;
  inline-size: 100%;
  overflow-x: auto;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-panel);
  scrollbar-width: thin;
}

.cn-table-wrap--bare {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.cn-card .cn-table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.cn-table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
  font-variant-numeric: tabular-nums;
}

.cn-table caption {
  padding: var(--cn-space-3) var(--cn-space-4);
  color: var(--cn-ink);
  font-weight: var(--cn-weight-semibold);
  text-align: start;
}

.cn-table th,
.cn-table td {
  block-size: var(--cn-row);
  padding: 0 var(--cn-space-3);
  border-block-end: 1px solid var(--cn-line);
  text-align: start;
  vertical-align: middle;
}

.cn-table th:first-child,
.cn-table td:first-child {
  padding-inline-start: var(--cn-space-4);
}

.cn-table th:last-child,
.cn-table td:last-child {
  padding-inline-end: var(--cn-space-4);
}

.cn-table thead th {
  block-size: 36px;
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
  font-weight: var(--cn-weight-medium);
  white-space: nowrap;
}

.cn-table tbody th {
  color: var(--cn-ink);
  font-weight: var(--cn-weight-medium);
}

.cn-table tbody tr:last-child > * {
  border-block-end: 0;
}

.cn-table tbody tr:hover > * {
  background: var(--cn-hover);
}

.cn-table .cn-num {
  text-align: end;
}

.cn-table .cn-id {
  color: var(--cn-muted);
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-meta);
  white-space: nowrap;
}

.cn-table .cn-nowrap {
  white-space: nowrap;
}

.cn-table__sub {
  display: block;
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
  font-weight: var(--cn-weight-regular);
}

.cn-table tr.cn-table__group > * {
  block-size: 32px;
  background: var(--cn-well);
  color: var(--cn-ink);
  font-size: var(--cn-fs-meta);
  font-weight: var(--cn-weight-semibold);
}

.cn-table tfoot td,
.cn-table tfoot th {
  border-block-start: 1px solid var(--cn-line-strong);
  border-block-end: 0;
  color: var(--cn-ink);
  font-weight: var(--cn-weight-semibold);
}

.cn-yes,
.cn-no {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cn-yes svg {
  color: var(--cn-accent-text);
}

.cn-no {
  color: var(--cn-muted);
}

.cn-table--lined td + td,
.cn-table--lined th + th,
.cn-table--lined td + th,
.cn-table--lined th + td {
  border-inline-start: 1px solid var(--cn-line);
}

.cn-page--site .cn-table {
  font-size: var(--cn-fs-ui);
}

/* Under 640px, a stacked table turns each row into a labelled block */
@media (max-width: 639px) {
  .cn-table--stack thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .cn-table--stack,
  .cn-table--stack tbody,
  .cn-table--stack tr,
  .cn-table--stack th,
  .cn-table--stack td {
    display: block;
    inline-size: 100%;
  }

  .cn-table--stack tr {
    padding: var(--cn-space-2) 0;
    border-block-end: 1px solid var(--cn-line);
  }

  .cn-table--stack tbody tr:last-child {
    border-block-end: 0;
  }

  .cn-table--stack th,
  .cn-table--stack td {
    display: flex;
    justify-content: space-between;
    gap: var(--cn-space-4);
    block-size: auto;
    min-block-size: 32px;
    padding: 6px var(--cn-space-4);
    border: 0;
    text-align: end;
  }

  .cn-table--stack.cn-table--lined td + td,
  .cn-table--stack.cn-table--lined th + td {
    border-inline-start: 0;
  }

  .cn-table--stack tbody th {
    font-size: var(--cn-fs-body);
    text-align: start;
  }

  .cn-table--stack td[data-label]::before {
    content: attr(data-label);
    flex: none;
    color: var(--cn-muted);
    font-size: var(--cn-fs-meta);
    font-weight: var(--cn-weight-medium);
    text-align: start;
  }

  .cn-table--stack tr.cn-table__group {
    padding: 0;
  }

  .cn-table--stack tr.cn-table__group > * {
    padding-block: 8px;
  }

  .cn-table--stack tbody tr:hover > * {
    background: transparent;
  }
}

/* ---- data-table ---- */
/* Data table: the tables component plus a toolbar, sortable headers, row selection with a
   bulk-action bar, a column menu, row action menus, a sticky header and a density switch. */

.cn-dt {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-panel);
}

.cn-dt__toolbar,
.cn-dt__bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-2);
  min-block-size: 52px;
  padding: var(--cn-space-2) var(--cn-space-3);
  border-block-end: 1px solid var(--cn-line);
}

.cn-dt__toolbar .cn-search {
  inline-size: 260px;
  max-inline-size: 100%;
}

.cn-dt__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-2);
  margin-inline-start: auto;
}

.cn-dt__bulk {
  background: var(--cn-accent-soft);
  color: var(--cn-ink);
}

.cn-dt__bulk[hidden] {
  display: none;
}

.cn-dt__bulk-count {
  min-inline-size: 96px;
  font-weight: var(--cn-weight-semibold);
}

.cn-dt__bulk .cn-btn:not(.cn-btn--primary) {
  background: var(--cn-panel);
}

.cn-dt__scroll {
  position: relative;
  overflow-x: auto;
  scrollbar-width: thin;
}

.cn-dt--sticky .cn-dt__scroll {
  max-block-size: var(--cn-dt-h, 480px);
  overflow-y: auto;
}

.cn-dt--fill {
  block-size: 100%;
  min-block-size: 0;
  border: 0;
  border-radius: 0;
}

.cn-dt--fill .cn-dt__scroll {
  flex: 1 1 auto;
  min-block-size: 0;
  max-block-size: none;
  overflow: auto;
}

.cn-dt--sticky thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  background: var(--cn-panel);
  box-shadow: inset 0 -1px 0 var(--cn-line);
}

.cn-dt .cn-table tbody tr:last-child > * {
  border-block-end: 0;
}

.cn-dt__check {
  inline-size: 40px;
  padding-inline-end: 0 !important;
}

.cn-dt__check input {
  display: block;
}

.cn-dt__sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 -6px;
  padding: 4px 6px;
  border: 0;
  border-radius: var(--cn-radius-xs);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.cn-dt__sort:hover {
  background: var(--cn-hover);
  color: var(--cn-ink);
}

.cn-dt__sort svg {
  color: var(--cn-line-strong);
}

[aria-sort="ascending"] > .cn-dt__sort,
[aria-sort="descending"] > .cn-dt__sort {
  color: var(--cn-ink);
}

[aria-sort="ascending"] > .cn-dt__sort svg,
[aria-sort="descending"] > .cn-dt__sort svg {
  color: var(--cn-accent-text);
}

[aria-sort="descending"] > .cn-dt__sort svg {
  transform: rotate(180deg);
}

.cn-num > .cn-dt__sort {
  flex-direction: row-reverse;
}

.cn-dt tbody tr:has(.cn-dt__check input:checked) > *,
.cn-dt tbody tr.is-selected > * {
  background: var(--cn-accent-soft);
}

.cn-dt tbody tr:has(.cn-dt__check input:checked) > :first-child,
.cn-dt tbody tr.is-selected > :first-child {
  box-shadow: inset 2px 0 0 var(--cn-accent);
}

[dir="rtl"] .cn-dt tbody tr:has(.cn-dt__check input:checked) > :first-child,
[dir="rtl"] .cn-dt tbody tr.is-selected > :first-child {
  box-shadow: inset -2px 0 0 var(--cn-accent);
}

.cn-dt tbody tr.is-active > * {
  background: var(--cn-hover);
}

.cn-dt__name {
  display: flex;
  align-items: center;
  gap: var(--cn-space-2);
  min-inline-size: 0;
  color: var(--cn-ink);
  font-weight: var(--cn-weight-medium);
  white-space: nowrap;
}

.cn-dt__name a {
  color: inherit;
  text-decoration: none;
}

.cn-dt__name a:hover {
  text-decoration: underline;
}

.cn-dt__actions {
  inline-size: 48px;
  text-align: end;
}

.cn-dt [data-col][hidden] {
  display: none;
}

.cn-dt__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-2);
  padding: var(--cn-space-2) var(--cn-space-3);
  border-block-start: 1px solid var(--cn-line);
}

.cn-dt__foot .cn-pager {
  inline-size: 100%;
}

.cn-dt__live {
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

@media (max-width: 639px) {
  .cn-dt__toolbar .cn-search {
    inline-size: 100%;
  }

  .cn-dt__tools {
    margin-inline-start: 0;
  }
}

/* ---- pagination ---- */
/* Pagination: the range in words on the start side, rows per page and page buttons on the end
   side. Page numbers drop away on phones; Previous and Next stay. */

.cn-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-2) var(--cn-space-4);
  font-size: var(--cn-fs-ui);
}

.cn-pager__range {
  color: var(--cn-muted);
  font-variant-numeric: tabular-nums;
}

.cn-pager__range strong {
  font-weight: var(--cn-weight-medium);
}

.cn-pager__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-1);
}

.cn-pager__size {
  display: inline-flex;
  align-items: center;
  gap: var(--cn-space-2);
  margin-inline-end: var(--cn-space-3);
  color: var(--cn-muted);
}

.cn-pager__size .cn-select {
  inline-size: auto;
  min-block-size: var(--cn-control-sm);
  padding-inline: var(--cn-space-2) var(--cn-space-6);
  font-size: var(--cn-fs-ui);
}

.cn-pager__size .cn-select-wrap::after {
  inset-inline-end: 10px;
}

.cn-pager__pages {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cn-pager__page {
  display: inline-grid;
  place-items: center;
  min-inline-size: 28px;
  block-size: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--cn-radius-control);
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.cn-pager__page:hover {
  background: var(--cn-hover);
  color: var(--cn-ink);
}

.cn-pager__page[aria-current="page"] {
  border-color: var(--cn-line-strong);
  background: var(--cn-panel);
  color: var(--cn-ink);
  font-weight: var(--cn-weight-semibold);
}

.cn-pager__gap {
  padding: 0 4px;
  color: var(--cn-muted);
}

.cn-pager [dir="rtl"] svg,
[dir="rtl"] .cn-pager__step svg {
  transform: scaleX(-1);
}

@media (max-width: 639px) {
  .cn-pager__pages,
  .cn-pager__size {
    display: none;
  }
}

@media (pointer: coarse) {
  .cn-pager__page {
    min-inline-size: 44px;
    block-size: 44px;
  }
}

/* ---- description-list ---- */
/* Description list: key and value rows split by hairlines, for record details, plans and the
   inspector. Keys are muted, values ink; IDs and hashes in Plex Mono. */

.cn-dl {
  display: grid;
  grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1fr);
  margin: 0;
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
}

.cn-dl__row {
  display: contents;
}

.cn-dl dt,
.cn-dl dd {
  margin: 0;
  padding: var(--cn-space-2) 0;
  border-block-end: 1px solid var(--cn-line);
}

.cn-dl dt {
  padding-inline-end: var(--cn-space-4);
  color: var(--cn-muted);
}

.cn-dl dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-1) var(--cn-space-2);
  min-inline-size: 0;
  color: var(--cn-ink);
  overflow-wrap: anywhere;
}

.cn-dl__row:last-child dt,
.cn-dl__row:last-child dd {
  border-block-end: 0;
}

.cn-dl__mono {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-meta);
}

.cn-dl--stacked {
  grid-template-columns: minmax(0, 1fr);
}

.cn-dl--stacked dt {
  padding-block-end: 0;
  border-block-end: 0;
  font-size: var(--cn-fs-meta);
}

.cn-dl--stacked dd {
  padding-block-start: 2px;
}

.cn-dl--grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--cn-space-4);
}

.cn-dl--grid .cn-dl__row {
  display: grid;
  gap: 2px;
}

.cn-dl--grid dt,
.cn-dl--grid dd {
  padding: 0;
  border: 0;
}

.cn-dl--grid dt {
  font-size: var(--cn-fs-meta);
}

@media (max-width: 479px) {
  .cn-dl:not(.cn-dl--grid) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cn-dl:not(.cn-dl--grid) dt {
    padding-block-end: 0;
    border-block-end: 0;
    font-size: var(--cn-fs-meta);
  }

  .cn-dl:not(.cn-dl--grid) dd {
    padding-block-start: 2px;
  }
}

/* ---- split-pane ---- */
/* Split pane: two panes and a draggable divider. The divider is a focusable separator: arrow
   keys move it 4% at a time, Home and End snap to the limits. Panes stack under 760px. */

.cn-split {
  --cn-split: 42%;
  display: grid;
  grid-template-columns: minmax(0, var(--cn-split)) 9px minmax(0, 1fr);
  block-size: var(--cn-split-h, 560px);
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-panel);
}

.cn-split__pane {
  position: relative;
  min-inline-size: 0;
  min-block-size: 0;
  overflow: auto;
  scrollbar-width: thin;
}

.cn-split__pane--well {
  background: var(--cn-canvas);
}

.cn-split__handle {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 9px;
  margin: 0 -4px;
  z-index: 1;
  cursor: col-resize;
  touch-action: none;
}

.cn-split__handle::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 4px;
  inline-size: 1px;
  background: var(--cn-line);
  transition: background-color var(--cn-dur-fast) var(--cn-ease);
}

.cn-split__grip {
  position: relative;
  inline-size: 5px;
  block-size: 28px;
  border: 1px solid var(--cn-line-strong);
  border-radius: var(--cn-radius-round);
  background: var(--cn-panel);
  transition: border-color var(--cn-dur-fast) var(--cn-ease), background-color var(--cn-dur-fast) var(--cn-ease);
}

.cn-split__handle:hover::before,
.cn-split__handle:focus-visible::before,
.cn-split.is-dragging .cn-split__handle::before {
  inline-size: 2px;
  inset-inline-start: 3.5px;
  background: var(--cn-accent);
}

.cn-split__handle:hover .cn-split__grip,
.cn-split__handle:focus-visible .cn-split__grip,
.cn-split.is-dragging .cn-split__grip {
  border-color: var(--cn-accent);
  background: var(--cn-accent);
}

.cn-split__handle:focus-visible {
  outline: none;
}

.cn-split.is-dragging {
  cursor: col-resize;
  user-select: none;
}

.cn-split--auto {
  block-size: auto;
}

@media (max-width: 759px) {
  .cn-split {
    grid-template-columns: minmax(0, 1fr);
    block-size: auto;
  }

  .cn-split__handle {
    display: none;
  }

  .cn-split__pane + .cn-split__handle + .cn-split__pane {
    border-block-start: 1px solid var(--cn-line);
  }
}

/* ---- inspector ---- */
/* Inspector: a key-value drawer that slides in from the inline end over a scrim (native
   <dialog>), or sits inline inside a split pane. Head, scrolling body, sticky foot. */

.cn-inspector {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  background: var(--cn-panel);
  color: var(--cn-text);
}

dialog.cn-inspector {
  position: fixed;
  inset-block: 0;
  inset-inline-start: auto;
  inset-inline-end: 0;
  inline-size: min(440px, 100vw);
  max-inline-size: none;
  block-size: 100%;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-inline-start: 1px solid var(--cn-line-strong);
  background: var(--cn-raised);
  box-shadow: var(--cn-shadow-dialog);
}

dialog.cn-inspector:not([open]) {
  display: none;
}

dialog.cn-inspector[open] {
  animation: cn-inspector-in var(--cn-dur-slow) var(--cn-ease);
}

[dir="rtl"] dialog.cn-inspector[open] {
  animation-name: cn-inspector-in-rtl;
}

@keyframes cn-inspector-in {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}

@keyframes cn-inspector-in-rtl {
  from {
    transform: translateX(-24px);
    opacity: 0;
  }
}

dialog.cn-inspector::backdrop {
  background: var(--cn-scrim);
}

.cn-inspector__head {
  display: flex;
  align-items: flex-start;
  gap: var(--cn-space-3);
  flex: none;
  padding: var(--cn-space-4);
  border-block-end: 1px solid var(--cn-line);
}

.cn-inspector__heading {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.cn-inspector__title {
  color: var(--cn-ink);
  font-size: var(--cn-fs-card);
  line-height: var(--cn-lh-body);
  font-weight: var(--cn-weight-semibold);
}

.cn-inspector__id {
  color: var(--cn-muted);
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-caption);
}

.cn-inspector__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--cn-space-6);
  flex: 1 1 auto;
  padding: var(--cn-space-4);
  overflow-y: auto;
}

.cn-inspector__section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cn-space-2);
}

.cn-inspector__label {
  color: var(--cn-ink);
  font-size: var(--cn-fs-meta);
  line-height: var(--cn-lh-ui);
  font-weight: var(--cn-weight-semibold);
}

.cn-inspector__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cn-space-2);
  flex: none;
  padding: var(--cn-space-3) var(--cn-space-4);
  border-block-start: 1px solid var(--cn-line);
  background: var(--cn-well);
}

.cn-inspector--inline {
  block-size: 100%;
}

@media (prefers-reduced-motion: reduce) {
  dialog.cn-inspector[open] {
    animation: none;
  }
}

/* ---- activity-feed ---- */
/* Activity feed: an audit trail. Who did what to which record, when (in mono), grouped by day
   on a 1px timeline. Details such as a plan change sit in a quiet well under the line. */

.cn-feed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cn-feed__day {
  padding: var(--cn-space-4) 0 var(--cn-space-2);
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
  font-weight: var(--cn-weight-semibold);
}

.cn-feed__day:first-child {
  padding-block-start: 0;
}

.cn-feed__item {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--cn-space-3);
  padding-block-end: var(--cn-space-4);
}

.cn-feed__item::before {
  content: "";
  position: absolute;
  inset-block: 32px 4px;
  inset-inline-start: 13.5px;
  inline-size: 1px;
  background: var(--cn-line);
}

.cn-feed__item:last-child::before,
.cn-feed__item:has(+ .cn-feed__day)::before {
  display: none;
}

.cn-feed__marker {
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-round);
  background: var(--cn-panel);
  color: var(--cn-muted);
}

.cn-feed__marker--ok {
  color: var(--cn-ok);
}

.cn-feed__marker--warn {
  color: var(--cn-warn);
}

.cn-feed__marker--danger {
  color: var(--cn-danger);
}

.cn-feed__marker--accent {
  color: var(--cn-accent-text);
}

.cn-feed__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cn-space-1);
  min-inline-size: 0;
  padding-block-start: 4px;
}

.cn-feed__line {
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
}

.cn-feed__line strong {
  font-weight: var(--cn-weight-medium);
}

.cn-feed__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-1) var(--cn-space-2);
  color: var(--cn-muted);
  font-size: var(--cn-fs-caption);
  line-height: var(--cn-lh-caption);
}

.cn-feed__time {
  font-family: var(--cn-font-mono);
}

.cn-feed__detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-2);
  margin-block-start: var(--cn-space-1);
  padding: var(--cn-space-2) var(--cn-space-3);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-control);
  background: var(--cn-well);
  color: var(--cn-text);
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-meta);
}

.cn-feed__detail svg {
  color: var(--cn-muted);
}

[dir="rtl"] .cn-feed__detail svg {
  transform: scaleX(-1);
}

.cn-feed--compact .cn-feed__item {
  padding-block-end: var(--cn-space-3);
}

/* ---- tabs ---- */
/* Tabs: an underlined tab row for views of one thing, and a segmented control (.cn-seg) for
   two to four mutually exclusive settings such as density or billing period. */

.cn-tabs {
  min-inline-size: 0;
}

.cn-tabs__list {
  position: relative;
  display: flex;
  gap: var(--cn-space-1);
  overflow-x: auto;
  border-block-end: 1px solid var(--cn-line);
  scrollbar-width: none;
}

.cn-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  block-size: 40px;
  padding: 0 var(--cn-space-3);
  border: 0;
  background: transparent;
  color: var(--cn-muted);
  font-size: var(--cn-fs-ui);
  font-weight: var(--cn-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.cn-tab:hover {
  color: var(--cn-ink);
}

.cn-tab::after {
  content: "";
  position: absolute;
  inset-inline: var(--cn-space-3);
  inset-block-end: -1px;
  block-size: 2px;
  background: transparent;
}

.cn-tab[aria-selected="true"],
.cn-tab[aria-current="page"] {
  color: var(--cn-ink);
}

.cn-tab[aria-selected="true"]::after,
.cn-tab[aria-current="page"]::after {
  background: var(--cn-accent);
}

.cn-tab:focus-visible {
  outline: 2px solid var(--cn-focus);
  outline-offset: -4px;
  border-radius: var(--cn-radius-control);
}

.cn-tab[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.cn-tabs__panel {
  padding-block-start: var(--cn-space-5);
}

.cn-tabs__panel[hidden] {
  display: none;
}

.cn-tabs__label {
  margin-block-end: var(--cn-space-2);
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
  font-weight: var(--cn-weight-medium);
}

.cn-tabs.is-ready .cn-tabs__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Segmented control */
.cn-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-control);
  background: var(--cn-well);
}

.cn-seg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  block-size: 26px;
  padding: 0 var(--cn-space-2);
  border: 1px solid transparent;
  border-radius: var(--cn-radius-xs);
  background: transparent;
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
  font-weight: var(--cn-weight-medium);
  white-space: nowrap;
  cursor: pointer;
}

.cn-seg__btn:hover {
  color: var(--cn-ink);
}

.cn-seg__btn[aria-pressed="true"],
.cn-seg__btn[aria-selected="true"] {
  border-color: var(--cn-line-strong);
  background: var(--cn-panel);
  color: var(--cn-ink);
}

.cn-seg__btn:focus-visible {
  outline: 2px solid var(--cn-focus);
  outline-offset: 1px;
}

.cn-seg--block {
  display: flex;
}

.cn-seg--block .cn-seg__btn {
  flex: 1 1 0;
}

.cn-seg--lg .cn-seg__btn {
  block-size: 32px;
  font-size: var(--cn-fs-ui);
}

/* A tab list styled as segments */
.cn-tabs--seg .cn-tabs__list {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-control);
  background: var(--cn-well);
}

.cn-tabs--seg .cn-tab {
  block-size: 30px;
  border: 1px solid transparent;
  border-radius: var(--cn-radius-xs);
}

.cn-tabs--seg .cn-tab::after {
  content: none;
}

.cn-tabs--seg .cn-tab[aria-selected="true"] {
  border-color: var(--cn-line-strong);
  background: var(--cn-panel);
}

.cn-tabs--seg.cn-tabs--block .cn-tabs__list {
  display: flex;
}

.cn-tabs--seg.cn-tabs--block .cn-tab {
  flex: 1 1 0;
  justify-content: center;
}

@media (pointer: coarse) {
  .cn-tab {
    block-size: 44px;
  }

  .cn-seg__btn {
    block-size: 40px;
  }
}

/* ---- alert ---- */
/* Alert: an inline message about the screen you are on, with an icon, a title, one sentence and
   at most two actions. Soft status fill, hairline border, never a colored edge. */

.cn-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--cn-space-1) var(--cn-space-3);
  padding: var(--cn-space-3) var(--cn-space-4);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-panel);
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
}

.cn-alert__icon {
  margin-block-start: 2px;
  color: var(--cn-muted);
}

.cn-alert__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  min-inline-size: 0;
}

.cn-alert__title {
  color: var(--cn-ink);
  font-weight: var(--cn-weight-semibold);
}

.cn-alert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cn-space-2);
  margin-block-start: var(--cn-space-2);
}

.cn-alert__close {
  margin: -4px -8px -4px 0;
}

.cn-alert--info {
  background: var(--cn-info-soft);
}

.cn-alert--info .cn-alert__icon {
  color: var(--cn-info);
}

.cn-alert--ok {
  background: var(--cn-ok-soft);
}

.cn-alert--ok .cn-alert__icon {
  color: var(--cn-ok);
}

.cn-alert--warn {
  background: var(--cn-warn-soft);
}

.cn-alert--warn .cn-alert__icon {
  color: var(--cn-warn);
}

.cn-alert--danger {
  background: var(--cn-danger-soft);
}

.cn-alert--danger .cn-alert__icon {
  color: var(--cn-danger);
}

.cn-alert .cn-btn:not(.cn-btn--primary) {
  background: var(--cn-panel);
}

.cn-alert--banner {
  border-inline: 0;
  border-radius: 0;
}

.cn-alert[hidden] {
  display: none;
}

/* ---- toast ---- */
/* Toast: short confirmations in a polite live region at the inline-end bottom corner. They
   stay 6 seconds, pause while hovered or focused, and offer Undo when it exists. */

.cn-toasts {
  position: fixed;
  inset-block-end: var(--cn-space-4);
  inset-inline-end: var(--cn-space-4);
  z-index: var(--cn-z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--cn-space-2);
  inline-size: min(380px, calc(100vw - 32px));
  margin: 0;
  padding: 0;
  pointer-events: none;
  list-style: none;
}

.cn-toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--cn-space-3);
  min-block-size: 48px;
  padding: var(--cn-space-2) var(--cn-space-2) var(--cn-space-2) var(--cn-space-3);
  border: 1px solid var(--cn-line-strong);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-raised);
  color: var(--cn-ink);
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
  box-shadow: var(--cn-shadow-pop);
  pointer-events: auto;
  animation: cn-toast-in var(--cn-dur-slow) var(--cn-ease);
}

@keyframes cn-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.cn-toast.is-leaving {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--cn-dur) var(--cn-ease), transform var(--cn-dur) var(--cn-ease);
}

.cn-toast__icon {
  color: var(--cn-ok);
}

.cn-toast--danger .cn-toast__icon {
  color: var(--cn-danger);
}

.cn-toast--info .cn-toast__icon {
  color: var(--cn-info);
}

.cn-toast__text {
  min-inline-size: 0;
}

.cn-toast__meta {
  display: block;
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

.cn-toast__actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* In-flow toasts (component pages) */
.cn-toasts--static {
  position: static;
  inline-size: 100%;
  max-inline-size: 380px;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .cn-toast {
    animation: none;
  }

  .cn-toast.is-leaving {
    transition: none;
  }
}

/* ---- dialog ---- */
/* Dialog: native <dialog> on a scrim. Title, one or two sentences, actions on the end side with
   their keys (Esc to cancel, Cmd/Ctrl Enter to confirm). Destructive dialogs ask for the name. */

.cn-dialog {
  inline-size: min(480px, calc(100vw - 32px));
  max-inline-size: none;
  max-block-size: calc(100vh - 64px);
  padding: 0;
  border: 1px solid var(--cn-line-strong);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-raised);
  color: var(--cn-text);
  box-shadow: var(--cn-shadow-dialog);
}

.cn-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: cn-dialog-in var(--cn-dur) var(--cn-ease);
}

@keyframes cn-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
}

.cn-dialog::backdrop {
  background: var(--cn-scrim);
}

.cn-dialog--wide {
  inline-size: min(640px, calc(100vw - 32px));
}

.cn-dialog__head {
  display: flex;
  align-items: flex-start;
  gap: var(--cn-space-3);
  padding: var(--cn-space-5) var(--cn-space-5) 0;
}

.cn-dialog__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--cn-radius-control);
  background: var(--cn-well);
  color: var(--cn-muted);
}

.cn-dialog--danger .cn-dialog__icon {
  background: var(--cn-danger-soft);
  color: var(--cn-danger);
}

.cn-dialog__title {
  flex: 1 1 auto;
  padding-block-start: 2px;
  color: var(--cn-ink);
  font-size: var(--cn-fs-lede);
  line-height: var(--cn-lh-lede);
  font-weight: var(--cn-weight-semibold);
}

.cn-dialog__close {
  margin: -4px -8px 0 0;
}

.cn-dialog__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cn-space-4);
  padding: var(--cn-space-3) var(--cn-space-5) var(--cn-space-5);
  overflow-y: auto;
}

.cn-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cn-space-2);
  padding: var(--cn-space-3) var(--cn-space-5);
  border-block-start: 1px solid var(--cn-line);
  background: var(--cn-well);
  border-end-start-radius: var(--cn-radius-panel);
  border-end-end-radius: var(--cn-radius-panel);
}

.cn-dialog__foot-note {
  margin-inline-end: auto;
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

/* In-flow rendering for component pages */
.cn-dialog--static {
  position: static;
  display: flex;
  flex-direction: column;
  margin: 0;
  box-shadow: var(--cn-shadow-pop);
}

@media (prefers-reduced-motion: reduce) {
  .cn-dialog[open] {
    animation: none;
  }
}

/* ---- empty-state ---- */
/* Empty state: what is missing, and in one sentence what to do next, with the action and its
   shortcut. Calm, centered, no illustration beyond one icon tile. */

.cn-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--cn-space-2);
  padding: var(--cn-space-12) var(--cn-space-6);
  text-align: center;
}

.cn-empty__icon {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  margin-block-end: var(--cn-space-2);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-well);
  color: var(--cn-muted);
}

.cn-empty__title {
  color: var(--cn-ink);
  font-size: var(--cn-fs-card);
  line-height: var(--cn-lh-body);
  font-weight: var(--cn-weight-semibold);
}

.cn-empty__text {
  max-inline-size: 46ch;
  color: var(--cn-muted);
}

.cn-empty__actions {
  justify-content: center;
  margin-block-start: var(--cn-space-3);
}

.cn-empty__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--cn-space-2);
  margin-block-start: var(--cn-space-1);
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

.cn-empty--compact {
  padding: var(--cn-space-8) var(--cn-space-4);
}

.cn-empty--bordered {
  border: 1px dashed var(--cn-line-strong);
  border-radius: var(--cn-radius-panel);
}

/* ---- skeleton ---- */
/* Skeleton: gray blocks in the shape of the content that is loading. They pulse in opacity,
   sit inside an aria-busy region and come with a hidden sentence for screen readers. */

.cn-skel {
  display: block;
  inline-size: 100%;
  block-size: 12px;
  border-radius: var(--cn-radius-xs);
  background: var(--cn-well);
  animation: cn-skel 1.4s ease-in-out infinite;
}

@keyframes cn-skel {
  50% {
    opacity: 0.5;
  }
}

.cn-skel--title {
  block-size: 20px;
}

.cn-skel--value {
  block-size: 28px;
  inline-size: 60%;
}

.cn-skel--avatar {
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--cn-radius-round);
}

.cn-skel--box {
  block-size: 120px;
  border-radius: var(--cn-radius-panel);
}

.cn-skel--w25 { inline-size: 25%; }
.cn-skel--w40 { inline-size: 40%; }
.cn-skel--w60 { inline-size: 60%; }
.cn-skel--w80 { inline-size: 80%; }

.cn-skel-row {
  display: flex;
  align-items: center;
  gap: var(--cn-space-3);
  block-size: var(--cn-row);
}

.cn-skel-stack {
  display: grid;
  gap: var(--cn-space-2);
}

@media (prefers-reduced-motion: reduce) {
  .cn-skel {
    animation: none;
  }
}

/* ---- progress ---- */
/* Progress and meters: a 6px track with a label and the exact number. Meters show usage against
   a limit with a marker at the warning threshold. Width comes from --cn-value on the element. */

.cn-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-inline-size: 0;
}

.cn-progress__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cn-space-1) var(--cn-space-3);
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
}

.cn-progress__label {
  color: var(--cn-ink);
  font-weight: var(--cn-weight-medium);
}

.cn-progress__value {
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
  font-variant-numeric: tabular-nums;
}

.cn-progress__track {
  position: relative;
  block-size: 6px;
  overflow: hidden;
  border-radius: var(--cn-radius-round);
  background: var(--cn-well);
  box-shadow: inset 0 0 0 1px var(--cn-line);
}

.cn-progress__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--cn-value, 0%);
  border-radius: inherit;
  background: var(--cn-accent);
}

.cn-progress--ok .cn-progress__fill {
  background: var(--cn-ok-dot);
}

.cn-progress--warn .cn-progress__fill {
  background: var(--cn-warn-dot);
}

.cn-progress--danger .cn-progress__fill {
  background: var(--cn-danger-dot);
}

.cn-progress--thin .cn-progress__track {
  block-size: 4px;
}

.cn-progress__note {
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

.cn-progress--warn .cn-progress__note {
  color: var(--cn-warn);
}

.cn-progress--danger .cn-progress__note {
  color: var(--cn-danger);
}

/* Threshold marker on meters */
.cn-progress__mark {
  position: absolute;
  inset-block: -1px;
  inset-inline-start: var(--cn-mark, 80%);
  inline-size: 2px;
  background: var(--cn-panel);
}

/* Indeterminate */
.cn-progress--busy .cn-progress__fill {
  inline-size: 32%;
  animation: cn-progress-busy 1.3s var(--cn-ease) infinite;
}

@keyframes cn-progress-busy {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(320%);
  }
}

[dir="rtl"] .cn-progress--busy .cn-progress__fill {
  animation-name: cn-progress-busy-rtl;
}

@keyframes cn-progress-busy-rtl {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-320%);
  }
}

/* Ring: a small circular progress for checklists */
.cn-ring {
  --cn-value: 0;
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  flex: none;
}

.cn-ring svg {
  inline-size: 100%;
  block-size: 100%;
  transform: rotate(-90deg);
}

.cn-ring__track {
  fill: none;
  stroke: var(--cn-well);
  stroke-width: 3.5;
}

.cn-ring__fill {
  fill: none;
  stroke: var(--cn-accent);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.cn-ring__text {
  position: absolute;
  color: var(--cn-ink);
  font-size: var(--cn-fs-caption);
  font-weight: var(--cn-weight-semibold);
}

@media (prefers-reduced-motion: reduce) {
  .cn-progress--busy .cn-progress__fill {
    animation: none;
    inline-size: 100%;
    opacity: 0.4;
  }
}

/* ---- checklist ---- */
/* Checklist: onboarding steps with a done count and a ring. Done steps collapse to one line,
   the current step is open with its action and shortcut, later steps wait in muted text. */

.cn-checklist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-panel);
}

.cn-checklist__head {
  display: flex;
  align-items: center;
  gap: var(--cn-space-4);
  padding: var(--cn-space-5);
  border-block-end: 1px solid var(--cn-line);
}

.cn-checklist__heading {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.cn-checklist__title {
  color: var(--cn-ink);
  font-size: var(--cn-fs-card);
  line-height: var(--cn-lh-body);
  font-weight: var(--cn-weight-semibold);
}

.cn-checklist__meta {
  color: var(--cn-muted);
  font-size: var(--cn-fs-ui);
}

.cn-checklist__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cn-checklist__item {
  border-block-end: 1px solid var(--cn-line);
}

.cn-checklist__item:last-child {
  border-block-end: 0;
}

.cn-checklist__summary {
  display: flex;
  align-items: center;
  gap: var(--cn-space-3);
  min-block-size: 52px;
  padding: var(--cn-space-2) var(--cn-space-5);
  color: var(--cn-ink);
  font-size: var(--cn-fs-ui);
  font-weight: var(--cn-weight-medium);
  list-style: none;
  cursor: pointer;
}

.cn-checklist__summary::-webkit-details-marker {
  display: none;
}

.cn-checklist__summary:hover {
  background: var(--cn-hover);
}

.cn-checklist__mark {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  border: 1.5px dashed var(--cn-control);
  border-radius: var(--cn-radius-round);
  color: var(--cn-on-accent);
}

.cn-checklist__mark svg {
  inline-size: 12px;
  block-size: 12px;
  visibility: hidden;
}

.cn-checklist__item.is-done .cn-checklist__mark {
  border: 0;
  background: var(--cn-accent);
}

.cn-checklist__item.is-done .cn-checklist__mark svg {
  visibility: visible;
}

.cn-checklist__item.is-current .cn-checklist__mark {
  border: 2px solid var(--cn-accent);
}

.cn-checklist__item.is-done .cn-checklist__name {
  color: var(--cn-muted);
  font-weight: var(--cn-weight-regular);
}

.cn-checklist__name {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.cn-checklist__end {
  display: inline-flex;
  align-items: center;
  gap: var(--cn-space-2);
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
  font-weight: var(--cn-weight-regular);
}

.cn-checklist__chev {
  color: var(--cn-muted);
  transition: transform var(--cn-dur) var(--cn-ease);
}

.cn-checklist__item[open] .cn-checklist__chev {
  transform: rotate(180deg);
}

.cn-checklist__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cn-space-3);
  padding: 0 var(--cn-space-5) var(--cn-space-5) calc(var(--cn-space-5) + 20px + var(--cn-space-3));
  color: var(--cn-text);
}

.cn-checklist__body p {
  max-inline-size: 60ch;
  color: var(--cn-muted);
}

@media (max-width: 559px) {
  .cn-checklist__body {
    padding-inline-start: var(--cn-space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cn-checklist__chev {
    transition: none;
  }
}

/* ---- auth ---- */
/* Auth: sign-in, SSO and magic-link screens. One narrow card on the canvas, an aside that teaches
   the first shortcuts on wide screens. */

.cn-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-block-size: calc(100vh - var(--cn-nav-h));
}

.cn-auth__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  padding: var(--cn-space-12) var(--cn-gutter);
}

.cn-auth__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cn-space-5);
  inline-size: 100%;
  max-inline-size: 400px;
}

.cn-auth__head {
  display: grid;
  gap: var(--cn-space-2);
}

.cn-auth__title {
  font-size: var(--cn-fs-headline);
  line-height: var(--cn-lh-headline);
  letter-spacing: var(--cn-track-headline);
}

.cn-auth__text {
  color: var(--cn-muted);
}

.cn-auth__or {
  display: flex;
  align-items: center;
  gap: var(--cn-space-3);
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

.cn-auth__or::before,
.cn-auth__or::after {
  content: "";
  flex: 1 1 auto;
  border-block-start: 1px solid var(--cn-line);
}

.cn-auth__foot {
  color: var(--cn-muted);
}

.cn-auth__sent {
  display: grid;
  justify-items: start;
  gap: var(--cn-space-3);
  padding: var(--cn-space-5);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-panel);
}

.cn-auth__aside {
  display: grid;
  align-content: center;
  gap: var(--cn-space-6);
  padding: var(--cn-space-16) var(--cn-space-12);
  border-inline-start: 1px solid var(--cn-line);
}

.cn-auth__aside-title {
  color: var(--cn-ink);
  font-size: var(--cn-fs-subhead);
  line-height: var(--cn-lh-subhead);
  font-weight: var(--cn-weight-semibold);
}

.cn-auth__aside .cn-shortcuts {
  max-inline-size: 420px;
}

@media (max-width: 959px) {
  .cn-auth {
    grid-template-columns: minmax(0, 1fr);
  }

  .cn-auth__aside {
    padding: var(--cn-space-10) var(--cn-gutter);
    border-inline-start: 0;
    border-block-start: 1px solid var(--cn-line);
  }
}

/* ---- prose ---- */
/* Prose: long-form reading. 16px on 28px, a 680px measure, headings with scroll margins under
   the sticky nav, and tables, code and keys in the system's own idiom. */

.cn-prose {
  min-inline-size: 0;
  max-inline-size: var(--cn-measure);
  color: var(--cn-text);
  font-size: var(--cn-fs-body);
  line-height: var(--cn-lh-prose);
}

.cn-prose > * + * {
  margin-block-start: var(--cn-space-5);
}

.cn-prose p {
  line-height: var(--cn-lh-prose);
}

.cn-prose h2 {
  margin-block-start: var(--cn-space-12);
  color: var(--cn-ink);
  font-size: var(--cn-fs-headline);
  line-height: var(--cn-lh-headline);
  letter-spacing: var(--cn-track-headline);
  scroll-margin-block-start: calc(var(--cn-nav-h) + var(--cn-space-6));
}

.cn-prose h3 {
  margin-block-start: var(--cn-space-8);
  color: var(--cn-ink);
  font-size: var(--cn-fs-subhead);
  line-height: var(--cn-lh-subhead);
  scroll-margin-block-start: calc(var(--cn-nav-h) + var(--cn-space-6));
}

.cn-prose h4 {
  margin-block-start: var(--cn-space-6);
  color: var(--cn-ink);
  font-size: var(--cn-fs-body);
  line-height: var(--cn-lh-body);
}

.cn-prose h2 + *,
.cn-prose h3 + *,
.cn-prose h4 + * {
  margin-block-start: var(--cn-space-3);
}

.cn-prose ul,
.cn-prose ol {
  display: grid;
  gap: var(--cn-space-2);
  padding-inline-start: var(--cn-space-6);
}

.cn-prose li::marker {
  color: var(--cn-muted);
}

.cn-prose ol li::marker {
  font-variant-numeric: tabular-nums;
}

.cn-prose a {
  font-weight: var(--cn-weight-medium);
}

.cn-prose blockquote {
  padding-inline-start: var(--cn-space-5);
  border-inline-start: 2px solid var(--cn-line-strong);
  color: var(--cn-ink);
  font-size: var(--cn-fs-lede);
  line-height: var(--cn-lh-lede);
}

.cn-prose blockquote p {
  font-size: inherit;
  line-height: inherit;
}

.cn-prose pre {
  position: relative;
  overflow-x: auto;
  padding: var(--cn-space-4);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-code-bg);
  color: var(--cn-code-ink);
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
  tab-size: 2;
}

.cn-prose pre code {
  font-size: inherit;
}

.cn-prose kbd {
  display: inline-flex;
  align-items: center;
  min-inline-size: 20px;
  block-size: 20px;
  padding: 0 5px;
  border: 1px solid var(--cn-line-strong);
  border-radius: var(--cn-radius-xs);
  background: var(--cn-panel);
  color: var(--cn-text);
  font-size: var(--cn-fs-caption);
  font-weight: var(--cn-weight-medium);
  line-height: 1;
  vertical-align: 2px;
}

.cn-prose figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cn-space-2);
  margin-block: var(--cn-space-8);
}

.cn-prose figcaption {
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
  line-height: var(--cn-lh-ui);
}

.cn-prose table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
  font-variant-numeric: tabular-nums;
}

.cn-prose th,
.cn-prose td {
  block-size: var(--cn-row);
  padding: 0 var(--cn-space-3);
  border-block-end: 1px solid var(--cn-line);
  text-align: start;
}

.cn-prose thead th {
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
  font-weight: var(--cn-weight-medium);
  border-block-end-color: var(--cn-line-strong);
}

.cn-prose th:first-child,
.cn-prose td:first-child {
  padding-inline-start: 0;
}

.cn-prose .cn-table-wrap {
  border: 0;
  background: transparent;
}

.cn-prose hr {
  margin-block: var(--cn-space-12);
}

.cn-prose .cn-prose__lead {
  color: var(--cn-ink);
  font-size: var(--cn-fs-lede);
  line-height: var(--cn-lh-lede);
}

.cn-prose--wide {
  max-inline-size: none;
}

/* ---- callout ---- */
/* Callout: an aside inside reading content (note, tip, caution, warning). Icon, a short bold
   lead and the sentence. Soft fill, hairline, no colored edge. */

.cn-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--cn-space-3);
  padding: var(--cn-space-4);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-panel);
  background: var(--cn-well);
  color: var(--cn-text);
}

.cn-callout__icon {
  margin-block-start: 4px;
  color: var(--cn-muted);
}

.cn-callout__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cn-space-1);
  min-inline-size: 0;
}

.cn-callout__title {
  color: var(--cn-ink);
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
  font-weight: var(--cn-weight-semibold);
}

.cn-callout__body p {
  margin: 0;
  font-size: var(--cn-fs-body);
  line-height: var(--cn-lh-body);
}

.cn-callout--tip {
  background: var(--cn-accent-soft);
}

.cn-callout--tip .cn-callout__icon {
  color: var(--cn-accent-text);
}

.cn-callout--info {
  background: var(--cn-info-soft);
}

.cn-callout--info .cn-callout__icon {
  color: var(--cn-info);
}

.cn-callout--warn {
  background: var(--cn-warn-soft);
}

.cn-callout--warn .cn-callout__icon {
  color: var(--cn-warn);
}

.cn-callout--danger {
  background: var(--cn-danger-soft);
}

.cn-callout--danger .cn-callout__icon {
  color: var(--cn-danger);
}

.cn-prose .cn-callout + * {
  margin-block-start: var(--cn-space-5);
}

/* ---- toc ---- */
/* Table of contents: the sections of a long page, a 1px line on the inline-start side and an
   accent tick on the section you are reading. Sticky beside the article on wide screens. */

.cn-toc {
  display: grid;
  gap: var(--cn-space-3);
  font-size: var(--cn-fs-ui);
  line-height: var(--cn-lh-ui);
}

.cn-toc__title {
  color: var(--cn-ink);
  font-size: var(--cn-fs-meta);
  font-weight: var(--cn-weight-semibold);
}

.cn-toc__list {
  display: grid;
  margin: 0;
  padding: 0;
  border-inline-start: 1px solid var(--cn-line);
  list-style: none;
}

.cn-toc__link {
  position: relative;
  display: block;
  padding: 6px 0 6px var(--cn-space-3);
  color: var(--cn-muted);
  text-decoration: none;
}

.cn-toc__link:hover {
  color: var(--cn-ink);
}

.cn-toc__link[aria-current="true"],
.cn-toc__link[aria-current="location"] {
  color: var(--cn-ink);
  font-weight: var(--cn-weight-medium);
}

.cn-toc__link[aria-current="true"]::before,
.cn-toc__link[aria-current="location"]::before {
  content: "";
  position: absolute;
  inset-block: 4px;
  inset-inline-start: -1px;
  inline-size: 2px;
  background: var(--cn-accent);
}

.cn-toc__sub .cn-toc__link {
  padding-inline-start: var(--cn-space-6);
  font-size: var(--cn-fs-meta);
}

.cn-toc--sticky {
  position: sticky;
  inset-block-start: calc(var(--cn-nav-h) + var(--cn-space-8));
}

.cn-toc__foot {
  display: grid;
  gap: var(--cn-space-2);
  padding-block-start: var(--cn-space-3);
  border-block-start: 1px solid var(--cn-line);
  color: var(--cn-muted);
  font-size: var(--cn-fs-meta);
}

/* ---- byline ---- */
/* Byline: who wrote it, their role, when, and how long it takes to read. */

.cn-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-2) var(--cn-space-5);
  color: var(--cn-muted);
  font-size: var(--cn-fs-ui);
}

.cn-byline__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-1) var(--cn-space-3);
  font-size: var(--cn-fs-meta);
}

.cn-byline__meta > * + *::before {
  content: "";
  display: inline-block;
  inline-size: 3px;
  block-size: 3px;
  margin-inline-end: var(--cn-space-3);
  border-radius: var(--cn-radius-round);
  background: var(--cn-line-strong);
  vertical-align: middle;
}

.cn-byline time {
  font-variant-numeric: tabular-nums;
}

.cn-byline--rule {
  padding-block: var(--cn-space-4);
  border-block: 1px solid var(--cn-line);
}

/* ---- timeline ---- */
/* Timeline: changelog and roadmap entries. The date in mono on the start side, a dot on a 1px
   line, the entry on the end side. Status badges say shipped, in progress or planned. */

.cn-timeline {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cn-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 136px 17px minmax(0, 1fr);
  column-gap: var(--cn-space-4);
  padding-block-end: var(--cn-space-10);
}

.cn-timeline__item:last-child {
  padding-block-end: 0;
}

.cn-timeline__when {
  padding-block-start: 2px;
  color: var(--cn-muted);
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-meta);
  line-height: var(--cn-lh-ui);
  text-align: end;
}

.cn-timeline__rail {
  position: relative;
  display: flex;
  justify-content: center;
}

.cn-timeline__rail::after {
  content: "";
  position: absolute;
  inset-block: 18px calc(-1 * var(--cn-space-10));
  inline-size: 1px;
  background: var(--cn-line);
}

.cn-timeline__item:last-child .cn-timeline__rail::after {
  display: none;
}

.cn-timeline__dot {
  position: relative;
  z-index: 1;
  inline-size: 11px;
  block-size: 11px;
  margin-block-start: 5px;
  border: 2px solid var(--cn-panel);
  border-radius: var(--cn-radius-round);
  background: var(--cn-accent);
  box-shadow: 0 0 0 1px var(--cn-accent);
}

.cn-timeline__dot--planned {
  background: var(--cn-panel);
  box-shadow: 0 0 0 1px var(--cn-control);
}

.cn-timeline__dot--progress {
  background: var(--cn-warn-dot);
  box-shadow: 0 0 0 1px var(--cn-warn-dot);
}

.cn-timeline__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cn-space-2);
  min-inline-size: 0;
}

.cn-timeline__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-2);
}

.cn-timeline__title {
  color: var(--cn-ink);
  font-size: var(--cn-fs-card);
  line-height: var(--cn-lh-body);
  font-weight: var(--cn-weight-semibold);
}

.cn-timeline__text {
  color: var(--cn-text);
}

.cn-timeline__list {
  display: grid;
  gap: var(--cn-space-1);
  margin: 0;
  padding-inline-start: var(--cn-space-5);
  color: var(--cn-text);
  font-size: var(--cn-fs-ui);
}

@media (max-width: 639px) {
  .cn-timeline__item {
    grid-template-columns: 17px minmax(0, 1fr);
  }

  .cn-timeline__when {
    grid-column: 2;
    grid-row: 1;
    text-align: start;
  }

  .cn-timeline__rail {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .cn-timeline__body {
    grid-column: 2;
    grid-row: 2;
  }
}