/* Site-owned. Ported 2026-09-19 from the Claude Design handoff
 * (design_handoff_cognatype_system). Every visual value on the personal-interface routes comes from here. */

/* ============================================================
   CognaType design system
   Authority: the accepted light and dark page mocks.
   Plain CSS custom properties. No build step, no framework.

   Typography choices
   ------------------
   --ct-font-display: "Sigmar" (the Google Fonts family named exactly
   Sigmar; owner ruling 2026-09-19 replaced the handoff's two-word
   family name). The page titles
   in the mocks are heavy, geometric and slightly rounded, with wide
   even letterforms and soft terminals. Sigmar is a single-weight display face
   with exactly that build: thick geometric strokes, softened
   corners, generous counters. It carries the title voice at 46px
   and still holds at 21px for section headings. It ships one weight
   (400), so display type never varies weight, only size.

   --ct-font-body: "Lexend". A geometric sans designed for reading
   ease, with open counters, unambiguous letterforms and slightly
   loose default spacing. It reads calmly at 15px over long
   explanatory lines, sits under a heavy display face without
   competing, and carries the 11px uppercase eyebrow labels cleanly.
   Every title other than the page title uses it, so Sigmar
   stays reserved for the loudest line on a page.

   Icons: Material Symbols Rounded (outlined fill 0), matching the
   line weight and rounded joins drawn in the mocks.
   ============================================================ */

/* ---------- 1. Mode independent primitives ---------- */

:root {
  /* Type families */
  --ct-font-display: "Sigmar", "Trebuchet MS", sans-serif;
  --ct-font-body: "Lexend", "Segoe UI", sans-serif;

  /* Type sizes */
  --ct-text-2xs: 0.6875rem;  /* 11px  eyebrow, micro label */
  --ct-text-xs: 0.75rem;     /* 12px  meta, table label */
  --ct-text-sm: 0.8125rem;   /* 13px  dense support text */
  --ct-text-base: 0.9375rem; /* 15px  body */
  --ct-text-md: 1rem;        /* 16px  emphasised body, row heading */
  --ct-text-lg: 1.125rem;    /* 18px  card heading */
  --ct-text-xl: 1.3125rem;   /* 21px  section heading */
  --ct-text-2xl: 1.625rem;   /* 26px  sub page title */
  --ct-text-3xl: 2.125rem;   /* 34px  page title, small screens */
  --ct-text-4xl: 2.875rem;   /* 46px  page title */

  /* Weights */
  --ct-weight-regular: 400;
  --ct-weight-medium: 500;
  --ct-weight-semibold: 600;
  --ct-weight-bold: 700;

  /* Line heights */
  --ct-leading-tight: 1.1;
  --ct-leading-snug: 1.3;
  --ct-leading-normal: 1.5;
  --ct-leading-relaxed: 1.65;

  /* Letter spacing */
  --ct-tracking-tight: -0.01em;
  --ct-tracking-normal: 0;
  --ct-tracking-wide: 0.04em;
  --ct-tracking-eyebrow: 0.09em;

  /* Spacing scale */
  --ct-space-0: 0;
  --ct-space-1: 4px;
  --ct-space-2: 8px;
  --ct-space-3: 12px;
  --ct-space-4: 16px;
  --ct-space-5: 20px;
  --ct-space-6: 24px;
  --ct-space-7: 32px;
  --ct-space-8: 40px;
  --ct-space-9: 48px;
  --ct-space-10: 64px;

  /* Radii */
  --ct-radius-xs: 4px;
  --ct-radius-sm: 6px;
  --ct-radius-md: 10px;
  --ct-radius-lg: 14px;
  --ct-radius-xl: 20px;
  --ct-radius-pill: 999px;

  /* Borders */
  --ct-border-width: 1px;
  --ct-border-width-thick: 2px;

  /* Layout metrics */
  --ct-topbar-height: 56px;
  --ct-rail-width: 184px;
  --ct-context-width: 268px;
  --ct-content-max: 1000px;
  --ct-gutter: 16px;
  --ct-hero-ratio: 2.32;

  /* Motion */
  --ct-motion-fast: 120ms;
  --ct-motion-base: 200ms;
  --ct-motion-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ---------- 2. Light values ---------- */

:root,
html[data-mode="light"] {
  color-scheme: light;

  /* Surfaces */
  --ct-bg-canvas: #eef4fa;         /* pale blue page field */
  --ct-bg-surface: #ffffff;
  --ct-bg-surface-sunken: #e6eef7;
  --ct-bg-paper: #faf6ef;          /* warm paper */
  --ct-bg-subtle: #f4f8fc;
  --ct-bg-topbar: #1c3a5e;         /* deep ink navy bar */
  --ct-bg-rail: #f4f8fc;
  --ct-bg-selected: #dbe9fa;
  --ct-bg-hover: #e8f0f9;
  --ct-bg-scrim: rgba(16, 34, 56, 0.44);

  /* Ink */
  --ct-text-primary: #10294a;
  --ct-text-secondary: #3d5878;
  --ct-text-muted: #64799a;
  --ct-text-inverse: #f6fafe;
  --ct-text-inverse-muted: #c2d3e8;
  --ct-text-link: #1f5fad;
  --ct-text-link-hover: #14447f;

  /* Lines */
  --ct-border-subtle: #dde7f2;
  --ct-border-default: #c8d8e9;
  --ct-border-strong: #9db3cd;

  /* Action */
  --ct-action-bg: #2f6cbc;
  --ct-action-bg-hover: #24589e;
  --ct-action-text: #ffffff;
  --ct-action-quiet-bg: #e2ecf9;
  --ct-action-quiet-text: #1b4d8c;

  /* Accents: muted, never electric */
  --ct-accent-blue: #3a6ba8;
  --ct-accent-blue-tint: #dce8f6;
  --ct-accent-blue-ink: #1b4577;

  --ct-accent-periwinkle: #6f7fc4;
  --ct-accent-periwinkle-tint: #e2e5f7;
  --ct-accent-periwinkle-ink: #414c85;

  --ct-accent-sage: #6d9578;
  --ct-accent-sage-tint: #dcead9;
  --ct-accent-sage-ink: #3d5d47;

  --ct-accent-amber: #b98a3c;
  --ct-accent-amber-tint: #f6e7c6;
  --ct-accent-amber-ink: #71521c;

  --ct-accent-coral: #c07461;
  --ct-accent-coral-tint: #f8ddd6;
  --ct-accent-coral-ink: #7f4234;

  --ct-accent-lavender: #8878b8;
  --ct-accent-lavender-tint: #e7e2f5;
  --ct-accent-lavender-ink: #55467f;

  /* Semantic states: paired with an icon or a word, never colour alone */
  --ct-state-danger: #a3342b;
  --ct-state-danger-tint: #fae1de;
  --ct-state-danger-border: #dda49c;
  --ct-state-success: #3d6d4c;
  --ct-state-success-tint: #dcebdf;
  --ct-state-caution: #8a6218;
  --ct-state-caution-tint: #f7e8c8;
  --ct-state-info: #1f5fad;
  --ct-state-info-tint: #dfeaf8;

  /* Capacity levels */
  --ct-capacity-low: #b5493c;
  --ct-capacity-steady: #c08b32;
  --ct-capacity-full: #4a8156;

  /* Focus */
  --ct-focus-ring: #12447f;
  --ct-focus-ring-offset: #ffffff;

  /* Shadows */
  --ct-shadow-1: 0 1px 2px rgba(19, 41, 68, 0.07);
  --ct-shadow-2: 0 2px 8px rgba(19, 41, 68, 0.09);
  --ct-shadow-3: 0 14px 38px rgba(19, 41, 68, 0.18);
}

/* ---------- 3. Dark values ---------- */

html[data-mode="dark"] {
  color-scheme: dark;

  --ct-bg-canvas: #0b1d33;
  --ct-bg-surface: #13293f;
  --ct-bg-surface-sunken: #0e2237;
  --ct-bg-paper: #182c40;
  --ct-bg-subtle: #11253a;
  --ct-bg-topbar: #0d2034;
  --ct-bg-rail: #0d2136;
  --ct-bg-selected: #1c3b5c;
  --ct-bg-hover: #17304a;
  --ct-bg-scrim: rgba(4, 12, 22, 0.62);

  --ct-text-primary: #f2f6fb;
  --ct-text-secondary: #bed0e4;
  --ct-text-muted: #94abc5;
  --ct-text-inverse: #f6fafe;
  --ct-text-inverse-muted: #bed0e4;
  --ct-text-link: #8cb8ee;
  --ct-text-link-hover: #b3d2f7;

  --ct-border-subtle: #1e3a58;
  --ct-border-default: #2a4d72;
  --ct-border-strong: #43678e;

  --ct-action-bg: #4183d9;
  --ct-action-bg-hover: #5a95e2;
  --ct-action-text: #04101c;
  --ct-action-quiet-bg: #1c3a5a;
  --ct-action-quiet-text: #bad5f3;

  --ct-accent-blue: #7dabe0;
  --ct-accent-blue-tint: #1a3552;
  --ct-accent-blue-ink: #bcd6f2;

  --ct-accent-periwinkle: #9ba6de;
  --ct-accent-periwinkle-tint: #232f52;
  --ct-accent-periwinkle-ink: #ccd2f2;

  --ct-accent-sage: #93bf9d;
  --ct-accent-sage-tint: #1e3a2c;
  --ct-accent-sage-ink: #c7e2cd;

  --ct-accent-amber: #dcb76e;
  --ct-accent-amber-tint: #3a2f16;
  --ct-accent-amber-ink: #f0dcae;

  --ct-accent-coral: #e09c8a;
  --ct-accent-coral-tint: #3f2620;
  --ct-accent-coral-ink: #f4cdc2;

  --ct-accent-lavender: #b0a3e0;
  --ct-accent-lavender-tint: #2b2545;
  --ct-accent-lavender-ink: #ddd5f4;

  --ct-state-danger: #f08d80;
  --ct-state-danger-tint: #3d1c18;
  --ct-state-danger-border: #8a4038;
  --ct-state-success: #8fc89e;
  --ct-state-success-tint: #17331f;
  --ct-state-caution: #e2bd76;
  --ct-state-caution-tint: #35290f;
  --ct-state-info: #8cb8ee;
  --ct-state-info-tint: #152f4c;

  --ct-capacity-low: #e3776a;
  --ct-capacity-steady: #dfae5c;
  --ct-capacity-full: #7fbd8c;

  --ct-focus-ring: #9ec9ff;
  --ct-focus-ring-offset: #0b1d33;

  --ct-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ct-shadow-2: 0 2px 10px rgba(0, 0, 0, 0.45);
  --ct-shadow-3: 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* System preference applies only when no explicit mode is set. */
@media (prefers-color-scheme: dark) {
  html[data-mode="system"],
  html:not([data-mode]) {
    color-scheme: dark;

    --ct-bg-canvas: #0b1d33;
    --ct-bg-surface: #13293f;
    --ct-bg-surface-sunken: #0e2237;
    --ct-bg-paper: #182c40;
    --ct-bg-subtle: #11253a;
    --ct-bg-topbar: #0d2034;
    --ct-bg-rail: #0d2136;
    --ct-bg-selected: #1c3b5c;
    --ct-bg-hover: #17304a;
    --ct-bg-scrim: rgba(4, 12, 22, 0.62);

    --ct-text-primary: #f2f6fb;
    --ct-text-secondary: #bed0e4;
    --ct-text-muted: #94abc5;
    --ct-text-inverse: #f6fafe;
    --ct-text-inverse-muted: #bed0e4;
    --ct-text-link: #8cb8ee;
    --ct-text-link-hover: #b3d2f7;

    --ct-border-subtle: #1e3a58;
    --ct-border-default: #2a4d72;
    --ct-border-strong: #43678e;

    --ct-action-bg: #4183d9;
    --ct-action-bg-hover: #5a95e2;
    --ct-action-text: #04101c;
    --ct-action-quiet-bg: #1c3a5a;
    --ct-action-quiet-text: #bad5f3;

    --ct-accent-blue: #7dabe0;
    --ct-accent-blue-tint: #1a3552;
    --ct-accent-blue-ink: #bcd6f2;
    --ct-accent-periwinkle: #9ba6de;
    --ct-accent-periwinkle-tint: #232f52;
    --ct-accent-periwinkle-ink: #ccd2f2;
    --ct-accent-sage: #93bf9d;
    --ct-accent-sage-tint: #1e3a2c;
    --ct-accent-sage-ink: #c7e2cd;
    --ct-accent-amber: #dcb76e;
    --ct-accent-amber-tint: #3a2f16;
    --ct-accent-amber-ink: #f0dcae;
    --ct-accent-coral: #e09c8a;
    --ct-accent-coral-tint: #3f2620;
    --ct-accent-coral-ink: #f4cdc2;
    --ct-accent-lavender: #b0a3e0;
    --ct-accent-lavender-tint: #2b2545;
    --ct-accent-lavender-ink: #ddd5f4;

    --ct-state-danger: #f08d80;
    --ct-state-danger-tint: #3d1c18;
    --ct-state-danger-border: #8a4038;
    --ct-state-success: #8fc89e;
    --ct-state-success-tint: #17331f;
    --ct-state-caution: #e2bd76;
    --ct-state-caution-tint: #35290f;
    --ct-state-info: #8cb8ee;
    --ct-state-info-tint: #152f4c;

    --ct-capacity-low: #e3776a;
    --ct-capacity-steady: #dfae5c;
    --ct-capacity-full: #7fbd8c;

    --ct-focus-ring: #9ec9ff;
    --ct-focus-ring-offset: #0b1d33;

    --ct-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ct-shadow-2: 0 2px 10px rgba(0, 0, 0, 0.45);
    --ct-shadow-3: 0 16px 40px rgba(0, 0, 0, 0.6);
  }
}

/* ---------- 4. Base ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ct-bg-canvas);
  color: var(--ct-text-primary);
  font-family: var(--ct-font-body);
  font-size: var(--ct-text-base);
  line-height: var(--ct-leading-normal);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ct-text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--ct-text-link-hover); }

:focus-visible {
  outline: var(--ct-border-width-thick) solid var(--ct-focus-ring);
  outline-offset: 2px;
  border-radius: var(--ct-radius-xs);
}

.material-symbols-rounded {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  line-height: 1;
  user-select: none;
}

/* The hidden attribute must win over component display rules */
[hidden] { display: none !important; }

.ct-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

/* ---------- 5. Type styles (every text style is a token) ---------- */

.ct-page-title {
  margin: 0;
  font-family: var(--ct-font-display);
  font-size: var(--ct-text-4xl);
  font-weight: var(--ct-weight-regular);
  line-height: var(--ct-leading-tight);
  letter-spacing: var(--ct-tracking-tight);
  color: var(--ct-text-primary);
}
.ct-page-title--compact { font-size: var(--ct-text-3xl); }

.ct-section-title {
  margin: 0;
  font-family: var(--ct-font-body);
  font-size: var(--ct-text-xl);
  font-weight: var(--ct-weight-semibold);
  line-height: var(--ct-leading-snug);
  color: var(--ct-text-primary);
}

.ct-card-title {
  margin: 0;
  font-family: var(--ct-font-body);
  font-size: var(--ct-text-md);
  font-weight: var(--ct-weight-semibold);
  line-height: var(--ct-leading-snug);
  color: var(--ct-text-primary);
}

.ct-eyebrow {
  margin: 0;
  font-size: var(--ct-text-2xs);
  font-weight: var(--ct-weight-bold);
  letter-spacing: var(--ct-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ct-text-link);
}
.ct-eyebrow--quiet { color: var(--ct-text-muted); }
/* Card level eyebrow: a heading for a card, so it sits above the micro label size */
.ct-eyebrow--card { font-size: var(--ct-text-sm); letter-spacing: 0.06em; color: var(--ct-text-primary); }

.ct-lede {
  margin: 0;
  font-size: var(--ct-text-lg);
  line-height: var(--ct-leading-relaxed);
  color: var(--ct-text-secondary);
}

.ct-body { margin: 0; font-size: var(--ct-text-base); line-height: var(--ct-leading-relaxed); }
.ct-body-strong { font-size: var(--ct-text-base); font-weight: var(--ct-weight-semibold); }
.ct-support { margin: 0; font-size: var(--ct-text-sm); line-height: var(--ct-leading-normal); color: var(--ct-text-secondary); }
.ct-meta { margin: 0; font-size: var(--ct-text-xs); color: var(--ct-text-muted); }
.ct-label {
  display: block;
  font-size: var(--ct-text-xs);
  font-weight: var(--ct-weight-semibold);
  color: var(--ct-text-muted);
  margin-bottom: var(--ct-space-1);
}
.ct-value { font-size: var(--ct-text-base); font-weight: var(--ct-weight-semibold); color: var(--ct-text-primary); }

/* Arrow link */
.ct-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-2);
  font-size: var(--ct-text-sm);
  font-weight: var(--ct-weight-semibold);
}
/* A link that carries a symbol reads as a link already, so it drops the
   underline entirely. Underlines stay for links inside running text. */
a:has(.material-symbols-rounded),
.ct-btn--text:has(.material-symbols-rounded),
.ct-link-arrow { text-decoration: none; }
a:has(.material-symbols-rounded):hover,
.ct-btn--text:has(.material-symbols-rounded):hover,
.ct-link-arrow:hover { color: var(--ct-text-link-hover); }
.ct-link-arrow .material-symbols-rounded { transition: transform var(--ct-motion-fast) var(--ct-motion-ease); }
.ct-link-arrow:hover .material-symbols-rounded { transform: translateX(2px); }

/* ---------- 6. Buttons ---------- */

.ct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ct-space-2);
  min-height: 40px;
  padding: 0 var(--ct-space-5);
  border: var(--ct-border-width) solid transparent;
  border-radius: var(--ct-radius-sm);
  font-family: var(--ct-font-body);
  font-size: var(--ct-text-base);
  font-weight: var(--ct-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  background: none;
  transition: background-color var(--ct-motion-fast) var(--ct-motion-ease),
              border-color var(--ct-motion-fast) var(--ct-motion-ease),
              color var(--ct-motion-fast) var(--ct-motion-ease);
}
.ct-btn .material-symbols-rounded { font-size: 1.25em; color: inherit; }
/* Icons inside text buttons and inline links sit at text size, take the link
   colour and step outside the underline. */
.ct-btn--text .material-symbols-rounded,
.ct-link-arrow .material-symbols-rounded,
a .material-symbols-rounded { display: inline-block; text-decoration: none; font-size: 1.15em; color: inherit; }
.ct-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ct-btn--filled { background: var(--ct-action-bg); color: var(--ct-action-text); }
.ct-btn--filled:hover:not(:disabled) { background: var(--ct-action-bg-hover); }

.ct-btn--outline {
  background: var(--ct-bg-surface);
  color: var(--ct-text-link);
  border-color: var(--ct-border-strong);
}
.ct-btn--outline:hover:not(:disabled) { background: var(--ct-bg-hover); border-color: var(--ct-text-link); }

.ct-btn--text {
  background: none;
  color: var(--ct-text-link);
  padding: 0 var(--ct-space-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ct-btn--text:hover:not(:disabled) { color: var(--ct-text-link-hover); }

.ct-btn--danger { background: var(--ct-state-danger); color: var(--ct-bg-surface); }
html[data-mode="dark"] .ct-btn--danger { color: #21100d; }
.ct-btn--danger-outline {
  background: var(--ct-bg-surface);
  color: var(--ct-state-danger);
  border-color: var(--ct-state-danger-border);
}
.ct-btn--danger-outline:hover:not(:disabled) { background: var(--ct-state-danger-tint); }

.ct-btn--sm { min-height: 32px; padding: 0 var(--ct-space-3); font-size: var(--ct-text-sm); }
.ct-btn--block { width: 100%; }

/* ---------- 7. Chips ---------- */

.ct-chip {
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-2);
  min-height: 36px;
  padding: 0 var(--ct-space-4);
  border: var(--ct-border-width) solid var(--ct-border-default);
  border-radius: var(--ct-radius-pill);
  background: var(--ct-bg-surface);
  color: var(--ct-text-secondary);
  font: inherit;
  font-size: var(--ct-text-sm);
  cursor: pointer;
  transition: background-color var(--ct-motion-fast) var(--ct-motion-ease);
}
.ct-chip:hover { background: var(--ct-bg-hover); }
.ct-chip[aria-pressed="true"] {
  background: var(--ct-bg-selected);
  border-color: var(--ct-action-bg);
  color: var(--ct-text-primary);
  font-weight: var(--ct-weight-semibold);
}
.ct-chip[aria-pressed="true"]::before {
  content: "check";
  font-family: "Material Symbols Rounded";
  font-size: 16px;
  color: var(--ct-text-link);
}
.ct-chip-group { display: flex; flex-wrap: wrap; gap: var(--ct-space-2); }

/* ---------- 8. Segmented control ---------- */

.ct-segmented {
  display: inline-flex;
  padding: 0;
  border: var(--ct-border-width) solid var(--ct-border-default);
  border-radius: var(--ct-radius-sm);
  background: var(--ct-bg-surface);
  overflow: hidden;
}
.ct-segmented > button {
  min-height: 34px;
  padding: 0 var(--ct-space-4);
  border: 0;
  border-right: var(--ct-border-width) solid var(--ct-border-subtle);
  background: none;
  font: inherit;
  font-size: var(--ct-text-sm);
  color: var(--ct-text-secondary);
  cursor: pointer;
}
.ct-segmented > button:last-child { border-right: 0; }
.ct-segmented > button:hover { background: var(--ct-bg-hover); }
.ct-segmented > button[aria-pressed="true"] {
  background: var(--ct-action-bg);
  color: var(--ct-action-text);
  font-weight: var(--ct-weight-semibold);
}
.ct-field-inline { display: flex; align-items: center; gap: var(--ct-space-3); flex-wrap: wrap; }

/* ---------- 9. Toggle switch ---------- */

.ct-switch { display: inline-flex; align-items: center; gap: var(--ct-space-3); cursor: pointer; }
.ct-switch input {
  position: absolute;
  opacity: 0;
  width: 46px; height: 26px;
  margin: 0;
  cursor: pointer;
}
.ct-switch-track {
  position: relative;
  width: 46px; height: 26px;
  flex: none;
  border-radius: var(--ct-radius-pill);
  background: var(--ct-bg-surface-sunken);
  border: var(--ct-border-width) solid var(--ct-border-strong);
  transition: background-color var(--ct-motion-base) var(--ct-motion-ease);
}
.ct-switch-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ct-bg-surface);
  box-shadow: var(--ct-shadow-1);
  transition: transform var(--ct-motion-base) var(--ct-motion-ease);
}
.ct-switch input:checked + .ct-switch-track {
  background: var(--ct-action-bg);
  border-color: var(--ct-action-bg);
}
.ct-switch input:checked + .ct-switch-track::after { transform: translateX(20px); background: #ffffff; }
.ct-switch input:focus-visible + .ct-switch-track {
  outline: var(--ct-border-width-thick) solid var(--ct-focus-ring);
  outline-offset: 2px;
}
.ct-switch-label { font-size: var(--ct-text-sm); font-weight: var(--ct-weight-semibold); color: var(--ct-text-secondary); }

/* Checkbox */
.ct-check { display: flex; gap: var(--ct-space-3); align-items: flex-start; cursor: pointer; }
.ct-check input {
  appearance: none;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  flex: none;
  border: var(--ct-border-width-thick) solid var(--ct-border-strong);
  border-radius: var(--ct-radius-xs);
  background: var(--ct-bg-surface);
  cursor: pointer;
}
.ct-check input:checked {
  background: var(--ct-action-bg);
  border-color: var(--ct-action-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Select */
.ct-select {
  appearance: none;
  min-height: 36px;
  padding: 0 var(--ct-space-7) 0 var(--ct-space-3);
  border: var(--ct-border-width) solid var(--ct-border-default);
  border-radius: var(--ct-radius-sm);
  background-color: var(--ct-bg-surface);
  color: var(--ct-text-primary);
  font: inherit;
  font-size: var(--ct-text-sm);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='%2364799a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

/* ---------- 10. Card ---------- */

.ct-card {
  background: var(--ct-bg-surface);
  border: var(--ct-border-width) solid var(--ct-border-subtle);
  border-radius: var(--ct-radius-md);
  padding: var(--ct-space-5);
  box-shadow: var(--ct-shadow-1);
}
.ct-card--quiet { background: var(--ct-bg-subtle); box-shadow: none; }
.ct-card--paper { background: var(--ct-bg-paper); }
.ct-card-head {
  display: flex;
  align-items: center;
  gap: var(--ct-space-3);
  margin-bottom: var(--ct-space-4);
}
.ct-card-head .ct-eyebrow { color: var(--ct-text-primary); }

/* Note block, used for calm inline information */
.ct-note {
  display: flex;
  gap: var(--ct-space-3);
  padding: var(--ct-space-4);
  border-radius: var(--ct-radius-md);
  background: var(--ct-state-info-tint);
  color: var(--ct-text-secondary);
  font-size: var(--ct-text-sm);
}
.ct-note .material-symbols-rounded { color: var(--ct-text-link); font-size: 20px; flex: none; }
.ct-note--danger { background: var(--ct-state-danger-tint); }
.ct-note--danger .material-symbols-rounded { color: var(--ct-state-danger); }

/* ---------- 11. Section row: icon + heading + subtitle + right action ---------- */

.ct-row {
  display: grid;
  grid-template-columns: 32px minmax(200px, 280px) minmax(0, 1fr) minmax(0, auto);
  gap: var(--ct-space-5);
  align-items: start;
  padding: var(--ct-space-6) 0;
  border-top: var(--ct-border-width) solid var(--ct-border-subtle);
}
.ct-row-body:not(:empty) {
  border-left: var(--ct-border-width) solid var(--ct-border-subtle);
  padding-left: var(--ct-space-5);
}
.ct-row:first-child { border-top: 0; }
.ct-row-icon { color: var(--ct-text-primary); font-size: 26px; margin-top: 2px; }
.ct-row-title { margin: 0 0 var(--ct-space-1); font-size: var(--ct-text-md); font-weight: var(--ct-weight-semibold); font-family: var(--ct-font-body); }
.ct-row-sub { margin: 0; font-size: var(--ct-text-sm); color: var(--ct-text-secondary); }
.ct-row-body { display: flex; flex-wrap: wrap; gap: var(--ct-space-6); align-items: flex-start; }
.ct-row-action { display: flex; gap: var(--ct-space-3); align-items: flex-start; justify-self: end; }
.ct-row--danger .ct-row-title { color: var(--ct-state-danger); }
.ct-row--danger .ct-row-icon { color: var(--ct-state-danger); }

.ct-rows { display: block; }

/* ---------- 12. Battery capacity card ---------- */

.ct-capacity-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--ct-space-3);
}
.ct-capacity {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ct-space-1);
  padding: var(--ct-space-4) var(--ct-space-3);
  border: var(--ct-border-width) solid var(--ct-border-default);
  border-radius: var(--ct-radius-md);
  background: var(--ct-bg-surface);
  font: inherit;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--ct-motion-fast) var(--ct-motion-ease);
}
.ct-capacity:hover { background: var(--ct-bg-hover); }
.ct-capacity[aria-pressed="true"] {
  border-color: var(--ct-action-bg);
  border-width: var(--ct-border-width-thick);
  background: var(--ct-bg-selected);
  padding: calc(var(--ct-space-4) - 1px) calc(var(--ct-space-3) - 1px);
}
.ct-capacity[aria-pressed="true"]::after {
  content: "check_circle";
  font-family: "Material Symbols Rounded";
  font-variation-settings: "FILL" 1;
  position: absolute;
  top: 6px; right: 6px;
  font-size: 18px;
  color: var(--ct-action-bg);
}
.ct-capacity-name { font-size: var(--ct-text-md); font-weight: var(--ct-weight-bold); color: var(--ct-text-primary); }
.ct-capacity-note { font-size: var(--ct-text-xs); color: var(--ct-text-secondary); }

/* Battery glyph, built from simple rectangles */
.ct-battery {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 42px; height: 22px;
  padding: 3px;
  border: var(--ct-border-width-thick) solid var(--ct-text-muted);
  border-radius: 4px;
  position: relative;
}
.ct-battery::after {
  content: "";
  position: absolute;
  right: -5px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 8px;
  border-radius: 0 2px 2px 0;
  background: var(--ct-text-muted);
}
.ct-battery i { display: block; flex: 1; height: 100%; border-radius: 1px; background: transparent; }
.ct-battery--low i:nth-child(1) { background: var(--ct-capacity-low); }
.ct-battery--steady i:nth-child(1),
.ct-battery--steady i:nth-child(2) { background: var(--ct-capacity-steady); }
.ct-battery--full i { background: var(--ct-capacity-full); }

/* ---------- 13. Tinted icon circle ---------- */

.ct-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--ct-accent-blue-tint);
  color: var(--ct-accent-blue-ink);
}
.ct-icon-circle .material-symbols-rounded { font-size: 24px; }
.ct-icon-circle--sm { width: 34px; height: 34px; }
.ct-icon-circle--sm .material-symbols-rounded { font-size: 20px; }
.ct-icon-circle--periwinkle { background: var(--ct-accent-periwinkle-tint); color: var(--ct-accent-periwinkle-ink); }
.ct-icon-circle--sage { background: var(--ct-accent-sage-tint); color: var(--ct-accent-sage-ink); }
.ct-icon-circle--amber { background: var(--ct-accent-amber-tint); color: var(--ct-accent-amber-ink); }
.ct-icon-circle--coral { background: var(--ct-accent-coral-tint); color: var(--ct-accent-coral-ink); }
.ct-icon-circle--lavender { background: var(--ct-accent-lavender-tint); color: var(--ct-accent-lavender-ink); }

/* ---------- 14. On this page rail ---------- */

.ct-onthispage { font-size: var(--ct-text-sm); }
.ct-onthispage h2 {
  margin: 0 0 var(--ct-space-3);
  padding-bottom: var(--ct-space-2);
  border-bottom: var(--ct-border-width) solid var(--ct-border-default);
  font-size: var(--ct-text-2xs);
  font-weight: var(--ct-weight-bold);
  letter-spacing: var(--ct-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ct-text-link);
}
.ct-onthispage ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ct-onthispage a {
  display: block;
  padding: var(--ct-space-2) var(--ct-space-3);
  border-left: var(--ct-border-width-thick) solid transparent;
  color: var(--ct-text-secondary);
  text-decoration: none;
}
.ct-onthispage a:hover { color: var(--ct-text-link); }
.ct-onthispage a[aria-current="true"] {
  border-left-color: var(--ct-text-link);
  color: var(--ct-text-primary);
  font-weight: var(--ct-weight-semibold);
}

/* ---------- 15. Sprout note ---------- */

.ct-sprout-note {
  display: flex;
  gap: var(--ct-space-3);
  padding: var(--ct-space-4);
  border-radius: var(--ct-radius-md);
  background: var(--ct-accent-blue-tint);
  color: var(--ct-text-secondary);
  font-size: var(--ct-text-sm);
  line-height: var(--ct-leading-relaxed);
}
.ct-sprout-note .material-symbols-rounded { font-size: 22px; color: var(--ct-accent-blue-ink); flex: none; }
.ct-sprout-note--plain { background: none; padding: 0; }

/* ---------- 16. Image placeholder slot ---------- */

.ct-image-slot {
  position: relative;
  display: flex;
  align-items: flex-end;
  border-radius: var(--ct-radius-md);
  overflow: hidden;
  background-color: var(--ct-bg-paper);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 9px,
    rgba(100, 121, 154, 0.14) 9px 10px
  );
  border: var(--ct-border-width) solid var(--ct-border-subtle);
  aspect-ratio: var(--ct-hero-ratio);
}
.ct-image-slot span {
  margin: var(--ct-space-3);
  padding: var(--ct-space-1) var(--ct-space-2);
  border-radius: var(--ct-radius-xs);
  background: var(--ct-bg-surface);
  color: var(--ct-text-muted);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--ct-text-2xs);
}
.ct-image-slot--wide { aspect-ratio: 2.6; }
.ct-image-slot--card { aspect-ratio: 1.55; }
.ct-image-slot--thumb { aspect-ratio: 1.85; }

/* ---------- 17. Timeline of energy windows ---------- */

/* T45 (owner feedback pass 2, 2026-09-20): a single 24 hour track, not a wrapping row of
   equal-width cells -- lib/day-shape.js's windowGeometry places each .ct-window with an
   inline left/width percent of the day, so .ct-windows only has to hold the line steady and
   never wrap it. overflow:hidden keeps a rounding sliver from a piece's right edge poking
   past the track's own rounded corner. */
.ct-windows { position: relative; height: var(--ct-space-10); border-radius: var(--ct-radius-sm); overflow: hidden; background: var(--ct-bg-surface-sunken); }
.ct-window {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ct-space-1);
  padding: 0 var(--ct-space-1);
  overflow: hidden;
  text-align: center;
  font-size: var(--ct-text-sm);
  color: var(--ct-text-primary);
  border-right: var(--ct-border-width) solid var(--ct-bg-surface);
  /* Lets the narrow-block rule below ask "how wide is THIS block", in CSS, with no JS
     measuring: a container query on the block reads its own placed width, which the name
     alone (not the icon) drops out of once there is no room left for it. */
  container-type: inline-size;
}
.ct-window .material-symbols-rounded { display: block; font-size: 20px; }
.ct-window b { display: block; font-weight: var(--ct-weight-semibold); font-size: var(--ct-text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Narrow blocks: symbol only. The name never disappears from assistive tech (windowPieceHtml
   puts it in `title` and `aria-label` on the block itself, which this rule never touches). */
@container (max-width: 56px) {
  .ct-window b { display: none; }
}
.ct-window--quieter { background: var(--ct-accent-periwinkle-tint); }
.ct-window--quieter .material-symbols-rounded { color: var(--ct-accent-periwinkle-ink); }
.ct-window--optimal { background: var(--ct-accent-sage-tint); }
.ct-window--optimal .material-symbols-rounded { color: var(--ct-accent-sage-ink); }
.ct-window--steady { background: var(--ct-accent-amber-tint); }
.ct-window--steady .material-symbols-rounded { color: var(--ct-accent-amber-ink); }
.ct-window--creative { background: var(--ct-accent-coral-tint); }
.ct-window--creative .material-symbols-rounded { color: var(--ct-accent-coral-ink); }
.ct-window--wind { background: var(--ct-accent-lavender-tint); }
.ct-window--wind .material-symbols-rounded { color: var(--ct-accent-lavender-ink); }
.ct-window--distracted { background: var(--ct-accent-blue-tint); }
.ct-window--distracted .material-symbols-rounded { color: var(--ct-accent-blue-ink); }

/* FR-061 (Jody, 2026-09-21): an Offline window (lib/day-shape.js's windowPieceHtml gives it
   this class instead of a feel tint) renders condensed, not as a full window, so a long
   overnight span (22:00 to 05:00, say) does not fill the day view the way an equally long
   waking window would. It keeps the same left/width placement -- its real hours are not
   hidden -- but takes none of the track's vertical fill (a thin strip against the bottom of
   the track, not top:0/bottom:0) and, because its icon and label sit side by side rather
   than stacked, needs far less width than a normal window to keep both visible: the
   container query that hides a normal window's label at 56px only has to hide this one's at
   22px. Still a real element with the same title/aria-label full name; never display:none. */
.ct-window--offline {
  top: auto;
  bottom: 0;
  height: 40%;
  flex-direction: row;
  gap: var(--ct-space-1);
  background: var(--ct-bg-surface-sunken);
  border-top: var(--ct-border-width) solid var(--ct-border-default);
}
.ct-window--offline .material-symbols-rounded { font-size: 14px; color: var(--ct-text-muted); }
.ct-window--offline b { font-size: var(--ct-text-xs); font-weight: var(--ct-weight-medium); color: var(--ct-text-muted); }
@container (max-width: 22px) {
  .ct-window--offline b { display: none; }
}
.ct-windows-scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: var(--ct-space-2);
  font-size: var(--ct-text-xs);
  color: var(--ct-text-muted);
}

/* ---------- 18. Small utilities ---------- */

.ct-stack { display: flex; flex-direction: column; }
.ct-stack-1 { gap: var(--ct-space-1); }
.ct-stack-2 { gap: var(--ct-space-2); }
.ct-stack-3 { gap: var(--ct-space-3); }
.ct-stack-4 { gap: var(--ct-space-4); }
.ct-stack-6 { gap: var(--ct-space-6); }
.ct-inline { display: flex; align-items: center; gap: var(--ct-space-3); flex-wrap: wrap; }
.ct-divider { height: var(--ct-border-width); background: var(--ct-border-subtle); border: 0; margin: var(--ct-space-6) 0; }
.ct-vdivider { width: var(--ct-border-width); align-self: stretch; background: var(--ct-border-subtle); }

/* ---------- 19. Photography in image slots ---------- */

.ct-image-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ct-image-slot:has(img) span { display: none; }
html[data-mode="dark"] .ct-image-slot img { filter: brightness(0.82) saturate(0.94); }

/* ---------- 20. Dialog ---------- */

dialog.ct-dialog {
  width: min(560px, calc(100vw - 32px));
  padding: var(--ct-space-6);
  border: var(--ct-border-width) solid var(--ct-border-subtle);
  border-radius: var(--ct-radius-lg);
  background: var(--ct-bg-surface);
  color: var(--ct-text-primary);
  box-shadow: var(--ct-shadow-3);
}
dialog.ct-dialog::backdrop { background: var(--ct-bg-scrim); }
.ct-dialog-head { display: flex; gap: var(--ct-space-4); align-items: flex-start; margin-bottom: var(--ct-space-4); }
.ct-dialog-head .ct-section-title { flex: 1; }
.ct-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ct-space-3);
  align-items: center;
  margin-top: var(--ct-space-6);
}
.ct-dialog-actions .ct-spacer { flex: 1; }

/* ---------- 21. Editor table ---------- */

.ct-table { width: 100%; border-collapse: collapse; font-size: var(--ct-text-sm); }
.ct-table th {
  text-align: left;
  padding: var(--ct-space-2) var(--ct-space-3);
  border-bottom: var(--ct-border-width) solid var(--ct-border-default);
  font-size: var(--ct-text-xs);
  font-weight: var(--ct-weight-semibold);
  color: var(--ct-text-muted);
}
.ct-table td {
  padding: var(--ct-space-2) var(--ct-space-3);
  border-bottom: var(--ct-border-width) solid var(--ct-border-subtle);
  vertical-align: middle;
}
.ct-input {
  width: 100%;
  min-height: 36px;
  padding: 0 var(--ct-space-3);
  border: var(--ct-border-width) solid var(--ct-border-default);
  border-radius: var(--ct-radius-sm);
  background: var(--ct-bg-surface);
  color: var(--ct-text-primary);
  font: inherit;
  font-size: var(--ct-text-sm);
}
textarea.ct-input { min-height: 78px; padding: var(--ct-space-2) var(--ct-space-3); line-height: var(--ct-leading-normal); }
.ct-iconbtn-quiet {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 0; border-radius: var(--ct-radius-sm);
  background: none; color: var(--ct-text-secondary); cursor: pointer;
}
.ct-iconbtn-quiet:hover { background: var(--ct-bg-hover); color: var(--ct-state-danger); }
.ct-panel { border-top: var(--ct-border-width) solid var(--ct-border-subtle); padding-top: var(--ct-space-5); margin-top: var(--ct-space-5); }

/* ---------- 22. Accent glyphs (colour belongs to the symbol) ---------- */

.ct-glyph { font-size: 30px; color: var(--ct-accent-blue-ink); }
.ct-glyph--sm { font-size: 24px; }
.ct-glyph--periwinkle { color: var(--ct-accent-periwinkle-ink); }
.ct-glyph--sage { color: var(--ct-accent-sage-ink); }
.ct-glyph--amber { color: var(--ct-accent-amber-ink); }
.ct-glyph--coral { color: var(--ct-accent-coral-ink); }
.ct-glyph--lavender { color: var(--ct-accent-lavender-ink); }

/* ---------- 23. Accordion group ---------- */

.ct-accordion { border-top: var(--ct-border-width) solid var(--ct-border-subtle); }
.ct-accordion-trigger {
  display: flex;
  align-items: center;
  gap: var(--ct-space-3);
  width: 100%;
  padding: var(--ct-space-4) 0;
  border: 0;
  background: none;
  color: var(--ct-text-primary);
  font: inherit;
  font-size: var(--ct-text-base);
  font-weight: var(--ct-weight-semibold);
  text-align: left;
  cursor: pointer;
}
.ct-accordion-trigger .ct-accordion-chevron { margin-left: auto; color: var(--ct-text-muted); transition: transform var(--ct-motion-base) var(--ct-motion-ease); }
.ct-accordion-trigger[aria-expanded="true"] .ct-accordion-chevron { transform: rotate(180deg); }
.ct-accordion-body { padding: 0 0 var(--ct-space-4) var(--ct-space-8); }

/* ---------- 24. Selection list ---------- */

.ct-selection-list { list-style: none; margin: var(--ct-space-3) 0 0; padding: 0; }
.ct-selection-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ct-space-3);
  padding: var(--ct-space-3);
  border-bottom: var(--ct-border-width) solid var(--ct-border-subtle);
  background: var(--ct-bg-subtle);
  font-size: var(--ct-text-sm);
}

/* Search field */
.ct-searchfield { display: flex; align-items: center; gap: var(--ct-space-2); border: var(--ct-border-width) solid var(--ct-border-default); border-radius: var(--ct-radius-sm); padding: 0 var(--ct-space-3); background: var(--ct-bg-surface); }
.ct-searchfield .material-symbols-rounded { color: var(--ct-text-muted); }
.ct-searchfield input { flex: 1; min-height: 42px; border: 0; background: none; color: var(--ct-text-primary); font: inherit; font-size: var(--ct-text-base); }
.ct-searchfield input:focus { outline: none; }
.ct-searchfield:focus-within { outline: var(--ct-border-width-thick) solid var(--ct-focus-ring); outline-offset: 2px; }

/* ---------- 25. Typical feel tints ---------- */

.ct-select--feel { font-weight: var(--ct-weight-semibold); }
.ct-select--recovering { background-color: var(--ct-accent-periwinkle-tint); border-color: var(--ct-accent-periwinkle); color: var(--ct-accent-periwinkle-ink); }
.ct-select--energized { background-color: var(--ct-accent-sage-tint); border-color: var(--ct-accent-sage); color: var(--ct-accent-sage-ink); }
.ct-select--steady { background-color: var(--ct-accent-amber-tint); border-color: var(--ct-accent-amber); color: var(--ct-accent-amber-ink); }
.ct-select--creative { background-color: var(--ct-accent-coral-tint); border-color: var(--ct-accent-coral); color: var(--ct-accent-coral-ink); }
.ct-select--drained { background-color: var(--ct-accent-lavender-tint); border-color: var(--ct-accent-lavender); color: var(--ct-accent-lavender-ink); }
/* T47 (owner feedback pass 2): distracted was the sixth feel with only five tint modifiers,
   so its select rendered with no color of its own. --ct-accent-blue is the one accent no
   window or select modifier used yet. */
.ct-select--distracted { background-color: var(--ct-accent-blue-tint); border-color: var(--ct-accent-blue); color: var(--ct-accent-blue-ink); }

/* ---------- 26. Symbol picker ---------- */

.ct-symbol-picker { position: relative; display: inline-block; }
.ct-symbol-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 52px; height: 40px;
  padding: 0;
  border: var(--ct-border-width) solid var(--ct-border-default);
  border-radius: var(--ct-radius-sm);
  background: var(--ct-bg-surface);
  color: var(--ct-text-primary);
  cursor: pointer;
}
.ct-symbol-trigger:hover { background: var(--ct-bg-hover); }
.ct-symbol-trigger .ct-symbol-current { font-size: 22px; }
.ct-symbol-trigger .ct-symbol-caret { font-size: 16px; color: var(--ct-text-muted); }
.ct-symbol-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, 40px);
  gap: var(--ct-space-1);
  padding: var(--ct-space-2);
  border: var(--ct-border-width) solid var(--ct-border-subtle);
  border-radius: var(--ct-radius-md);
  background: var(--ct-bg-surface);
  box-shadow: var(--ct-shadow-3);
}
.ct-symbol-menu[hidden] { display: none; }
.ct-symbol-menu button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: var(--ct-radius-sm);
  background: none;
  color: var(--ct-text-primary);
  cursor: pointer;
}
.ct-symbol-menu button:hover { background: var(--ct-bg-hover); }
.ct-symbol-menu button[aria-pressed="true"] { background: var(--ct-bg-selected); color: var(--ct-text-link); }

/* ---------- 27. Symbol, heading and text rhythm ---------- */

/* Any block of symbol + heading + supporting text uses one column width and
   one set of gaps, so headings line up down a page and across pages. */
.ct-media {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--ct-space-1) var(--ct-space-4);
  align-items: start;
}
.ct-media > .material-symbols-rounded { font-size: 26px; line-height: 1; margin-top: 2px; }
.ct-media-text > * + * { margin-top: var(--ct-space-1); }
.ct-media-text > .ct-link-arrow { margin-top: var(--ct-space-2); }