/* Self-hosted webfonts. Newsreader (serif, the coach's voice) and Instrument
   Sans (interface + coachee), both SIL Open Font License 1.1, retrieved from
   Google Fonts. Variable axes preserved: one file per subset covers every
   weight the design uses. Nothing reaches an external origin. */

/* Instrument Sans — italic, latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Sans — italic, latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Sans — normal, latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Sans — normal, latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Newsreader — italic, vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/newsreader-italic-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Newsreader — italic, latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/newsreader-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader — italic, latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/newsreader-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Newsreader — normal, vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/newsreader-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Newsreader — normal, latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/newsreader-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader — normal, latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/newsreader-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Cognel palette — a warm paper system with ink text and restrained,
   meaning-bearing accents. Light only; there is no dark mode. These primitives
   are authoritative. Nothing outside this file writes a raw hex; components
   consume the primitives or the semantic aliases below. */

:root {
  color-scheme: light;

  /* ---- Surfaces ---- */
  --cn-paper: #f4f2ed;          /* page background */
  --cn-surface: #fdfcfa;        /* cards, bars, controls */
  --cn-surface-hover: #fbfaf6;  /* row hover */

  /* ---- Text, dark to light ---- */
  --cn-ink: #23282e;    /* headings and primary text */
  --cn-body: #33373d;   /* long-form body */
  --cn-muted: #5c5a52;  /* control labels and meta */
  --cn-faint: #9a958a;  /* hints and timestamps */
  --cn-ghost: #b5b0a2;  /* placeholders and disabled */
  --cn-nav-rest: #7a766b; /* the top bar's resting nav link (shell only) */

  /* ---- Lines, light to dark ---- */
  --cn-line-inner: #f0ede3;    /* hairlines inside cards */
  --cn-line-mid: #e9e5da;      /* row separators */
  --cn-line: #e5e1d6;          /* card and bar borders */
  --cn-line-control: #ddd8ca;  /* input, select, tab borders */
  --cn-line-strong: #c9c4b6;   /* ghost button borders */

  /* ---- Accents. Each carries meaning; never interchangeable. ---- */
  --cn-terracotta: #b04a28;  /* THE accent: links, hovers, current, brief reply */
  --cn-navy: #2c3a4e;        /* primary actions, full reply, tooltips */
  --cn-ochre: #a07a28;       /* set reply; draft, invited, in-session status */
  --cn-moss: #5a6b52;        /* published, active, completed status */
  --cn-records: #8a8578;     /* notes-only reply; archived status */
  --cn-danger: #a84e5e;      /* destructive menu items only */
  --cn-info: #3e6f8a;        /* org-limited tags, capability chrome, focus ring */

  /* ---- Reaction tints. Back the dot strip and builder chips. The moss tint
     is the one the design does not define; it is mixed so no new hex enters. */
  --cn-brief-bg: #f5e6de;
  --cn-full-bg: #e3e7ed;
  --cn-set-bg: #f1e9d4;
  --cn-records-bg: #ece8de;
  --cn-moss-bg: color-mix(in srgb, var(--cn-moss) 13%, var(--cn-paper));

  /* ---- Scenario letters A–G, from the Scenario Map ---- */
  --cn-scenario-a: #2c3a4e;
  --cn-scenario-b: #a07a28;
  --cn-scenario-c: #3e6b5b;
  --cn-scenario-d: #7d5ba6;
  --cn-scenario-e: #a84e5e;
  --cn-scenario-f: #3e6f8a;
  --cn-scenario-g: #6e6e3e;

  /* ---- Semantic surface aliases ---- */
  --cn-surface-page: var(--cn-paper);
  --cn-surface-subtle: var(--cn-paper);
  --cn-surface-raised: var(--cn-surface);
  --cn-surface-warm: var(--cn-line-inner);
  --cn-surface-selected: var(--cn-line-inner);
  --cn-surface-warning: var(--cn-set-bg);
  --cn-surface-danger: var(--cn-brief-bg);

  /* ---- Semantic text aliases ---- */
  --cn-text-primary: var(--cn-ink);
  --cn-text-secondary: var(--cn-body);
  --cn-text-muted: var(--cn-muted);
  --cn-text-faint: var(--cn-faint);
  --cn-text-inverse: var(--cn-surface);

  /* ---- Semantic border aliases ---- */
  --cn-border-subtle: var(--cn-line);
  --cn-border-strong: var(--cn-line-control);
  --cn-border-selected: var(--cn-navy);

  /* ---- Semantic action aliases ---- */
  --cn-action-primary: var(--cn-navy);
  --cn-action-primary-hover: var(--cn-terracotta);
  --cn-action-secondary: var(--cn-terracotta);
  --cn-action-secondary-hover: var(--cn-navy);
  --cn-action-danger: var(--cn-danger);

  /* ---- Message-tint pairs. Ochre and the danger rose fall under 4.5:1 on
     their own tints, so the text-on-tint variants are darkened. ---- */
  --cn-status-success-bg: var(--cn-moss-bg);
  --cn-status-success-text: var(--cn-moss);
  --cn-status-warning-bg: var(--cn-set-bg);
  --cn-status-warning-text: #6f5416;
  --cn-status-info-bg: var(--cn-full-bg);
  --cn-status-info-text: var(--cn-info);
  --cn-status-danger-bg: var(--cn-brief-bg);
  --cn-status-danger-text: #8f3f4d;

  /* ---- Legacy palette aliases kept for the shipped Session and Scenario Map,
     which still reference the pre-design primitive names. ---- */
  --cn-color-ink-100: var(--cn-line-inner);
  --cn-color-ink-300: var(--cn-ghost);
  --cn-color-ink-500: var(--cn-faint);
  --cn-color-ink-700: var(--cn-body);
  --cn-color-sage-200: var(--cn-moss-bg);
  --cn-color-clay-200: var(--cn-brief-bg);
  --cn-color-clay-700: var(--cn-terracotta);
  --cn-color-gold-200: var(--cn-set-bg);
  --cn-color-gold-600: var(--cn-ochre);
  --cn-color-gold-700: var(--cn-ochre);
  --cn-color-blue-100: var(--cn-full-bg);
  --cn-color-blue-600: var(--cn-info);
  --cn-color-blue-700: var(--cn-info);
  --cn-color-red-100: var(--cn-brief-bg);
  --cn-color-red-600: var(--cn-danger);
}


/* Cognel typography tokens. Two faces carry the product: Newsreader is the
   coach's voice (headings, prompts, reflective asides); Instrument Sans is the
   interface and the coachee's own words. Families are declared here and at the
   documented shared sites only (see primitives.css font policy) — never on a
   component class. Do not use negative letter spacing, do not scale sizes from
   viewport width, do not bold words inside a paragraph. */

:root {
  /* ---- Families ---- */
  --cn-serif: "Newsreader", Georgia, "Times New Roman", serif; /* @kind font */
  --cn-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* @kind font */
  --cn-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* @kind font */

  /* ---- Role aliases ---- */
  --cn-font-serif: var(--cn-serif);
  --cn-font-sans: var(--cn-sans);
  --cn-font-mono: var(--cn-mono);
  --cn-font-coach: var(--cn-serif);      /* guide prompts, coach reactions, headings */
  --cn-font-coachee: var(--cn-sans);     /* user-authored answers and artifacts */
  --cn-font-interface: var(--cn-sans);   /* nav, forms, labels, buttons, tables */

  /* ---- Size roles ---- */
  --cn-font-size-xs: 0.75rem;    /* 12px — meta, timestamps */
  --cn-font-size-sm: 0.875rem;   /* 14px — body, controls */
  --cn-font-size-base: 1rem;     /* 16px */
  --cn-font-size-md: 1.125rem;   /* 18px */
  --cn-font-size-lg: 1.25rem;    /* 20px */
  --cn-font-size-xl: 1.5rem;     /* 24px */
  --cn-font-size-2xl: 2rem;      /* 32px */
  --cn-font-size-3xl: 2.5rem;    /* 40px */

  /* ---- Line heights ---- */
  --cn-line-tight: 1.2; /* @kind other */
  --cn-line-snug: 1.35; /* @kind other */
  --cn-line-normal: 1.55; /* @kind other */
  --cn-line-relaxed: 1.75; /* @kind other */

  /* ---- Weights. Newsreader headings use medium; body uses regular. ---- */
  --cn-font-regular: 400;
  --cn-font-medium: 500;
  --cn-font-semibold: 600;
  --cn-font-bold: 700;
}


/* Cognel geometry, elevation, spacing, and interaction tokens. */

:root {
  /* ---- Spacing scale, 0–24 ---- */
  --cn-space-0: 0;
  --cn-space-1: 0.25rem;
  --cn-space-2: 0.5rem;
  --cn-space-3: 0.75rem;
  --cn-space-4: 1rem;
  --cn-space-5: 1.25rem;
  --cn-space-6: 1.5rem;
  --cn-space-8: 2rem;
  --cn-space-10: 2.5rem;
  --cn-space-12: 3rem;
  --cn-space-16: 4rem;
  --cn-space-20: 5rem;
  --cn-space-24: 6rem;

  /* ---- Radius. Rounded rectangles, never pills. Circles are 50%. ---- */
  --cn-r-control: 9px;   /* buttons, inputs, tabs, menus, tooltips */
  --cn-r-card: 12px;     /* cards and modals */
  --cn-r-inner: 7px;     /* items nested inside a 9px container */

  --cn-radius-xs: var(--cn-r-inner);
  --cn-radius-sm: var(--cn-r-inner);
  --cn-radius-md: var(--cn-r-control);
  --cn-radius-lg: var(--cn-r-card);
  --cn-radius-xl: var(--cn-r-card);
  --cn-radius-pill: 999px;      /* message-tint family only */
  --cn-radius-circle: 50%;      /* avatars, monograms, dots only */

  /* ---- Elevation. Use sparingly: menus, modals, toasts, raised cards. ---- */
  --cn-shadow-card: 0 1px 3px rgb(40 35 20 / 5%);
  --cn-shadow-menu: 0 12px 30px rgb(40 35 20 / 16%);
  --cn-shadow-modal: 0 30px 80px rgb(0 0 0 / 30%);
  --cn-shadow-sm: var(--cn-shadow-card);
  --cn-shadow-md: var(--cn-shadow-menu);
  --cn-shadow-lg: var(--cn-shadow-modal);

  /* ---- Interaction ---- */
  --cn-focus-color: var(--cn-info);
  --cn-focus-width: 3px;
  --cn-focus-offset: 2px;
  --cn-target-min: 24px;
  --cn-target-comfortable: 44px;
  --cn-sticky-offset: 72px;
  --cn-transition-fast: 120ms ease; /* @kind other */
  --cn-transition-base: 180ms ease; /* @kind other */
}


html {
  scroll-padding-top: var(--cn-sticky-offset);
}

/* Font policy, shared site 1 of 5: the root default. The margin reset matters
   for the SPA, which loads no Tailwind preflight to supply one. */
body {
  background: var(--cn-surface-page);
  color: var(--cn-text-primary);
  font-family: var(--cn-font-interface);
  line-height: var(--cn-line-normal);
  margin: 0;
}

/* Font policy, shared site 2 of 5: form controls do not inherit the document
   font from the user agent, so one rule makes them inherit it. Without this,
   a control class would have to declare a family and would then silently
   override any voice utility placed on it. */
:where(input, select, textarea, button) {
  font-family: inherit;
}

/* Font policy, shared site 3 of 5: the voice utilities. The type scale belongs
   here too. A heading is the coach's voice, not a component that happens to be
   serif, and declaring the family on `.cn-h1` in the component layer would put
   it exactly where a control class could override it. */
.cn-serif,
.cn-coach-voice,
.cn-quote,
.cn-h1,
.cn-h2,
.cn-h3,
.cn-serif-note,
.cn-modal-sub {
  font-family: var(--cn-font-serif);
}

.cn-coachee-voice,
.cn-interface-text {
  font-family: var(--cn-font-sans);
}

.cn-quote {
  font-style: italic;
}

/* Font policy, shared site 4 of 5: the monospace utility, and the elements that
   are monospace by nature. Site 5 is the `--cn-serif` / `--cn-sans` /
   `--cn-mono` variable declarations in tokens.css, and `@font-face` in
   vendor.css. Nothing else may declare a font family. */
.cn-mono,
code,
kbd,
samp,
pre {
  font-family: var(--cn-font-mono);
}


html:not(.js-enhanced) .cn-js-app {
  display: none !important;
}

.js-enhanced .cn-js-fallback {
  display: none !important;
}


:focus-visible { outline: var(--cn-focus-width) solid var(--cn-focus-color); outline-offset: var(--cn-focus-offset); }

/* Visually hidden, still announced. Live regions and skip targets rely on it,
   so it belongs with the accessibility primitives rather than the compat
   utilities the SPA never loads. */
.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.cn-skip-link {
  position: absolute;
  left: var(--cn-space-4);
  top: var(--cn-space-4);
  z-index: 100;
  transform: translateY(-150%);
  border-radius: var(--cn-radius-sm);
  background: var(--cn-action-primary);
  color: var(--cn-text-inverse);
  padding: var(--cn-space-2) var(--cn-space-3);
  font-weight: var(--cn-font-semibold);
  transition: transform var(--cn-transition-fast);
}

.cn-skip-link:focus-visible { transform: translateY(0); }

.cn-shell {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgb(255 253 248 / 94%), rgb(251 246 236 / 82%)),
    var(--cn-surface-page);
  color: var(--cn-text-primary);
  display: flex;
  flex-direction: column;
}

.cn-shell-header {
  background: rgb(255 253 248 / 92%);
  border-bottom: 1px solid var(--cn-border-subtle);
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(16px);
}

.cn-shell-main {
  flex: 1;
  width: 100%;
}

.cn-shell-footer {
  border-top: 1px solid var(--cn-border-subtle);
  background: var(--cn-surface-subtle);
  color: var(--cn-text-muted);
}

.cn-container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.cn-surface-page {
  background: var(--cn-surface-page);
}

.cn-surface-subtle {
  background: var(--cn-surface-subtle);
}

.cn-surface-raised {
  background: var(--cn-surface-raised);
}

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

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

/* The family comes from the voice-utility rule at the top of this file. */
.cn-coach-voice {
  font-size: var(--cn-font-size-lg);
  line-height: var(--cn-line-relaxed);
}


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


/* lint-ignore: max-lines -- one component layer mirroring one upstream design file (cognel.css); the classes compose constantly (a modal holds buttons, fields and a custom select; a card holds rows, status words and a dot strip), so a control-versus-surface split would scatter one cohesive system across a seam the reader crosses on nearly every rule. */

/* The Cognel 3 component classes, extracted from the approved design system
   (`cognel.css` in the "Cognel 3 Design" project) rather than invented. They
   consume tokens only. Two rules the design states and this file keeps:
   9px radius on controls and 12px on cards, never a pill; and statuses are
   plain colored words, never badge boxes or dots.

   No rule here declares a font-family. The families come from the root
   default, the voice utilities, and the form-control inherit rule, all in
   primitives.css. A control class declaring its own family would silently
   override a voice utility placed beside it. */

/* `.cn-button*` are the established repository names for the design's `.cn-btn*`
   family. They are the same component: one definition, two selectors, so
   existing markup and lifted design markup render identically. */
.cn-btn,
.cn-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--cn-r-control);
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-size: 13.5px;
  font-weight: var(--cn-font-semibold);
  gap: var(--cn-space-2);
  justify-content: center;
  line-height: var(--cn-line-tight);
  min-width: var(--cn-target-min);
  padding: 10px 18px;
  text-decoration: none;
  transition: background-color var(--cn-transition-fast), border-color var(--cn-transition-fast), color var(--cn-transition-fast);
  white-space: nowrap;
}

.cn-btn[disabled],
.cn-btn[aria-disabled="true"],
.cn-button[disabled],
.cn-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
}

.cn-btn-primary,
.cn-button-primary {
  background: var(--cn-navy);
  border-color: var(--cn-navy);
  color: var(--cn-surface);
}

.cn-btn-primary:hover:not([disabled]):not([aria-disabled="true"]),
.cn-button-primary:hover:not([disabled]):not([aria-disabled="true"]) {
  background: var(--cn-terracotta);
  border-color: var(--cn-terracotta);
}

.cn-btn-ghost,
.cn-button-secondary {
  background: transparent;
  border-color: var(--cn-line-strong);
  color: var(--cn-muted);
}

.cn-btn-ghost:hover:not([disabled]):not([aria-disabled="true"]),
.cn-button-secondary:hover:not([disabled]):not([aria-disabled="true"]) {
  border-color: var(--cn-navy);
  color: var(--cn-navy);
}

/* The one warm call to action per page. */
.cn-btn-cta {
  background: var(--cn-terracotta);
  border-color: var(--cn-terracotta);
  color: var(--cn-surface);
}

.cn-btn-cta:hover:not([disabled]):not([aria-disabled="true"]) {
  background: var(--cn-navy);
  border-color: var(--cn-navy);
}

.cn-button-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--cn-muted);
}

.cn-button-quiet:hover:not([disabled]):not([aria-disabled="true"]) {
  color: var(--cn-navy);
}

.cn-link {
  background: none;
  border: none;
  color: var(--cn-terracotta);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: var(--cn-font-semibold);
  padding: 0;
}

.cn-link:hover {
  color: var(--cn-navy);
}

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

.cn-label {
  color: var(--cn-text-primary);
  font-size: var(--cn-font-size-sm);
  font-weight: var(--cn-font-semibold);
}

.cn-input,
.cn-textarea {
  background: var(--cn-surface);
  border: 1px solid var(--cn-line-control);
  border-radius: var(--cn-r-control);
  box-sizing: border-box;
  color: var(--cn-ink);
  font-size: var(--cn-font-size-sm);
  outline: none;
  padding: 10px 13px;
  transition: border-color var(--cn-transition-fast);
}

.cn-input:focus,
.cn-textarea:focus {
  border-color: var(--cn-navy);
}

.cn-textarea {
  line-height: var(--cn-line-normal);
  resize: none;
}

.cn-input::placeholder,
.cn-textarea::placeholder {
  color: var(--cn-ghost);
}

/* The custom select. A native select is never used: its popup cannot be styled
   and the design has no native browser controls anywhere. This is the button
   that opens `.cn-selmenu`. */
.cn-selwrap {
  position: relative;
}

.cn-select {
  background: var(--cn-surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239A958A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center;
  border: 1px solid var(--cn-line-control);
  border-radius: var(--cn-r-control);
  box-sizing: border-box;
  color: var(--cn-ink);
  cursor: pointer;
  font-size: var(--cn-font-size-sm);
  padding: 10px 34px 10px 13px;
  text-align: left;
  width: 100%;
}

.cn-select:hover {
  border-color: var(--cn-line-strong);
}

.cn-select.open,
.cn-select:focus {
  border-color: var(--cn-navy);
  outline: none;
}

.cn-selmenu {
  background: var(--cn-surface);
  border: 1px solid var(--cn-line-control);
  border-radius: var(--cn-r-control);
  box-shadow: var(--cn-shadow-menu);
  display: flex;
  flex-direction: column;
  left: 0;
  padding: 5px;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 25;
}

.cn-selopt {
  align-items: center;
  background: none;
  border: none;
  border-radius: var(--cn-r-inner);
  color: var(--cn-body);
  cursor: pointer;
  display: flex;
  font-size: 13.5px;
  gap: var(--cn-space-2);
  padding: 9px 12px;
  text-align: left;
}

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

.cn-selopt.on {
  color: var(--cn-ink);
  font-weight: var(--cn-font-semibold);
}

.cn-input[aria-invalid="true"],
.cn-select[aria-invalid="true"],
.cn-textarea[aria-invalid="true"] {
  border-color: var(--cn-action-danger);
}

.cn-help-text {
  color: var(--cn-text-muted);
  font-size: var(--cn-font-size-sm);
}

.cn-error-text {
  color: var(--cn-status-danger-text);
  font-size: var(--cn-font-size-sm);
  font-weight: var(--cn-font-medium);
}

/* The design's card carries no padding: its interior rhythm comes from
   `.cn-cardhead` and `.cn-row`, or from the consuming component. */
.cn-card {
  background: var(--cn-surface);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-r-card);
  box-shadow: var(--cn-shadow-card);
  color: var(--cn-ink);
}

.cn-cardhead {
  align-items: center;
  border-bottom: 1px solid var(--cn-line-inner);
  display: flex;
  gap: var(--cn-space-2);
  padding: 10px 18px;
}

.cn-row {
  align-items: center;
  border-bottom: 1px solid var(--cn-line-inner);
  display: flex;
  gap: 14px;
  padding: 12px 22px;
}

.cn-row:last-child {
  border-bottom: none;
}

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

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

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

.cn-card-emphasis {
  background: linear-gradient(180deg, var(--cn-surface-raised), var(--cn-surface-warm));
  border-color: var(--cn-border-strong);
  box-shadow: var(--cn-shadow-md);
}

/* Statuses and capability flags are plain colored words. Never a badge box,
   never a dot. */
.cn-status {
  font-size: 10.5px;
  font-weight: var(--cn-font-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cn-status.published,
.cn-status.active,
.cn-status.completed {
  color: var(--cn-moss);
}

.cn-status.draft,
.cn-status.invited,
.cn-status.insession {
  color: var(--cn-ochre);
}

.cn-status.archived,
.cn-status.resting {
  color: var(--cn-faint);
}

/* Capability flags read as muted words appended to the role. */
.cn-flagtxt {
  color: var(--cn-faint);
}

/* The tinted message family the design does not define. It carries transient
   and inline notices, which the design's plain status word cannot express. */
.cn-badge,
.cn-notice,
.cn-toast {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--cn-radius-pill);
  display: inline-flex;
  font-size: var(--cn-font-size-sm);
  font-weight: var(--cn-font-semibold);
  gap: var(--cn-space-2);
  line-height: var(--cn-line-tight);
}

.cn-badge {
  padding: var(--cn-space-1) var(--cn-space-2);
}

.cn-notice,
.cn-toast {
  padding: var(--cn-space-2) var(--cn-space-3);
}

.cn-notice-success {
  background: var(--cn-status-success-bg);
  color: var(--cn-status-success-text);
}

.cn-notice-warning {
  background: var(--cn-status-warning-bg);
  color: var(--cn-status-warning-text);
}

.cn-notice-info {
  background: var(--cn-status-info-bg);
  color: var(--cn-status-info-text);
}

.cn-notice-danger {
  background: var(--cn-status-danger-bg);
  color: var(--cn-status-danger-text);
}

/* ---------- page ---------- */
.cn-page {
  background: var(--cn-paper);
  color: var(--cn-ink);
  min-height: 100vh;
}

.cn-page a {
  color: var(--cn-terracotta);
}

.cn-page a:hover {
  color: var(--cn-navy);
}

/* ---------- type scale ---------- */
.cn-h1 {
  font-size: 42px;
  font-weight: var(--cn-font-medium);
  line-height: 1.15;
  margin: 0;
}

.cn-h2 {
  font-size: 23px;
  font-weight: var(--cn-font-medium);
  margin: 0;
}

.cn-h3 {
  font-size: 17px;
  font-weight: var(--cn-font-medium);
}

.cn-body {
  color: var(--cn-body);
  font-size: var(--cn-font-size-sm);
  line-height: var(--cn-line-normal);
}

.cn-meta {
  color: var(--cn-faint);
  font-size: var(--cn-font-size-xs);
}

.cn-seclabel {
  color: var(--cn-terracotta);
  font-size: 11px;
  font-weight: var(--cn-font-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Empty states and asides speak in the coach's voice. */
.cn-serif-note {
  color: var(--cn-records);
  font-size: 15px;
  font-style: italic;
}

/* ---------- tabs (the filter row) ---------- */
.cn-tab {
  background: var(--cn-surface);
  border: 1px solid var(--cn-line-control);
  border-radius: var(--cn-r-control);
  color: var(--cn-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--cn-font-semibold);
  padding: 8px 14px;
  white-space: nowrap;
}

.cn-tab:hover {
  border-color: var(--cn-faint);
}

.cn-tab.on {
  background: var(--cn-navy);
  border-color: var(--cn-navy);
  color: var(--cn-surface);
}

.cn-tab .cn-count {
  font-weight: var(--cn-font-medium);
  margin-left: var(--cn-space-1);
  opacity: 0.65;
}

/* ---------- context menu ---------- */
.cn-menu {
  background: var(--cn-surface);
  border: 1px solid var(--cn-line-control);
  border-radius: var(--cn-r-control);
  box-shadow: var(--cn-shadow-menu);
  display: flex;
  flex-direction: column;
  min-width: 210px;
  padding: 5px;
  position: absolute;
  z-index: 20;
}

.cn-mi {
  background: none;
  border: none;
  border-radius: var(--cn-r-inner);
  color: var(--cn-body);
  cursor: pointer;
  font-size: 13.5px;
  padding: 9px 12px;
  text-align: left;
}

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

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

.cn-mi:disabled {
  color: var(--cn-ghost);
  cursor: default;
}

.cn-mihint {
  color: var(--cn-ghost);
  font-size: 11px;
  padding: 2px 12px 7px;
}

/* ---------- tooltip. Never the native `title` attribute. ---------- */
.cn-tip {
  background: var(--cn-navy);
  border-radius: var(--cn-r-control);
  box-shadow: var(--cn-shadow-menu);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 13px;
  pointer-events: none;
  position: absolute;
  white-space: nowrap;
  z-index: 40;
}

.cn-tipname {
  color: var(--cn-surface);
  font-size: 12.5px;
  font-weight: var(--cn-font-semibold);
}

.cn-tipsub {
  color: rgb(253 252 250 / 72%);
  font-size: 10px;
  font-weight: var(--cn-font-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cn-tiparrow {
  background: inherit;
  height: 9px;
  position: absolute;
  transform: rotate(45deg);
  width: 9px;
}

/* ---------- dot strip: one dot per question, colored by reply type ----------
   The strip never wraps, shrinks, or truncates. Neighbours yield instead. */
.cn-strip {
  align-items: center;
  display: flex;
  gap: 3.5px;
}

.cn-dot {
  border-radius: var(--cn-radius-circle);
  flex: 0 0 auto;
  height: 7px;
  width: 7px;
}

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

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

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

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

/* ---------- avatar ---------- */
.cn-avatar {
  align-items: center;
  background: var(--cn-navy);
  border-radius: var(--cn-radius-circle);
  color: var(--cn-surface);
  display: flex;
  font-size: 11.5px;
  font-weight: var(--cn-font-bold);
  height: 32px;
  justify-content: center;
  letter-spacing: 0.03em;
  width: 32px;
}

/* ---------- modal ---------- */
.cn-overlay {
  align-items: center;
  background: rgb(35 40 46 / 38%);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 50;
}

.cn-modal {
  background: var(--cn-surface);
  border-radius: 14px;
  box-shadow: var(--cn-shadow-modal);
  padding: 28px 30px;
}

.cn-modal-sub {
  color: var(--cn-records);
  font-size: 13.5px;
  font-style: italic;
  line-height: var(--cn-line-normal);
  margin: 0 0 var(--cn-space-2);
}

.cn-form-label {
  color: var(--cn-muted);
  font-size: 12.5px;
  font-weight: var(--cn-font-semibold);
  margin: 16px 0 6px;
}

.cn-form-grid2 {
  display: grid;
  gap: 0 14px;
  grid-template-columns: 1fr 1fr;
}

.cn-modal-btns {
  display: flex;
  gap: var(--cn-space-3);
  justify-content: flex-end;
  margin-top: 22px;
}

.cn-fieldnote {
  color: var(--cn-faint);
  font-size: var(--cn-font-size-xs);
  line-height: var(--cn-line-normal);
  margin-top: var(--cn-space-2);
}

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

/* ---------- toggle ---------- */
.cn-toggle {
  border: none;
  border-radius: 10px;
  cursor: pointer;
  height: 20px;
  padding: 0;
  position: relative;
  width: 34px;
}

.cn-toggle.on {
  background: var(--cn-navy);
}

.cn-toggle.off {
  background: var(--cn-line-strong);
}

.cn-toggle::after {
  background: var(--cn-surface);
  border-radius: var(--cn-radius-circle);
  content: "";
  height: 14px;
  position: absolute;
  top: 3px;
  width: 14px;
}

.cn-toggle.on::after {
  right: 3px;
}

.cn-toggle.off::after {
  left: 3px;
}

/* ---------- segmented option row: the answer to radio groups ---------- */
.cn-seg {
  display: flex;
  gap: var(--cn-space-2);
}

.cn-seg-opt {
  background: var(--cn-surface);
  border: 1px solid var(--cn-line-control);
  border-radius: var(--cn-r-control);
  color: var(--cn-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--cn-font-semibold);
  padding: 9px 16px;
}

.cn-seg-opt.on {
  background: var(--cn-navy);
  border-color: var(--cn-navy);
  color: var(--cn-surface);
}

.cn-seg-opt:disabled {
  cursor: default;
  opacity: 0.4;
}

/* ---------- writing-line input, threshold pages only ----------
   Working forms inside the app use the boxed `.cn-input`. The letterhead
   underline is reserved for the ceremonial moments at the door. */
.cn-line-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--cn-line-strong);
  border-radius: 0;
  box-sizing: border-box;
  color: var(--cn-ink);
  font-size: 16px;
  outline: none;
  padding: 9px 1px;
  width: 100%;
}

.cn-line-input:focus {
  border-bottom-color: var(--cn-navy);
  box-shadow: 0 1px 0 var(--cn-navy);
}

.cn-line-input::placeholder {
  color: var(--cn-ghost);
}

/* ---------- danger button: the confirm-dialog family (spec 13) ----------
   The destructive verb in a confirm dialog (delete guide, delete person,
   clear old logs). Same `.cn-btn` base as every other button; only the fill
   changes to the danger rose. Reversible verbs (Retire) keep the navy ghost. */
.cn-btn-danger,
.cn-button-danger {
  background: var(--cn-danger);
  border-color: var(--cn-danger);
  color: var(--cn-surface);
}

.cn-btn-danger:hover:not([disabled]):not([aria-disabled="true"]),
.cn-button-danger:hover:not([disabled]):not([aria-disabled="true"]) {
  background: var(--cn-status-danger-text);
  border-color: var(--cn-status-danger-text);
}

/* ---------- blank / loading / error sweep (spec 13, REQ-I12) ----------
   One centered quiet block for never-had-content, load failure, and long
   loads. `.cn-blank` is the block; `.cn-dots` is the three pulsing dots a long
   load shows. Filter-empty is deliberately NOT this pattern - it stays a
   one-line note that clears the filter. */
.cn-blank {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--cn-space-2);
  padding: 80px 20px;
  text-align: center;
}

.cn-blank-line {
  color: var(--cn-ink);
  font-size: 20px;
  margin: 0;
}

.cn-blank-sub {
  color: var(--cn-faint);
  font-size: 14px;
  font-style: italic;
  margin: 0;
}

.cn-dots {
  display: inline-flex;
  gap: 6px;
}

.cn-dots > span {
  animation: cn-dots-pulse 1.2s ease-in-out infinite;
  background: var(--cn-ghost);
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

.cn-dots > span:nth-child(2) {
  animation-delay: 0.2s;
}

.cn-dots > span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes cn-dots-pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* The visually-hidden live region every audited surface uses to announce
   loading, success and failure to a screen reader without a visual change. */
.cn-sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}


.cn-session-support {
  background:
    radial-gradient(circle at 18% 12%, rgb(232 240 230 / 72%), transparent 28rem),
    linear-gradient(180deg, var(--cn-surface-page), var(--cn-surface-subtle));
  padding: var(--cn-space-10) 0 var(--cn-space-16);
}

.cn-session-support-grid {
  align-items: stretch;
  display: grid;
  gap: var(--cn-space-6);
  grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.72fr);
}

.cn-session-panel,
.cn-action-panel {
  background: rgb(255 253 248 / 86%);
  border: 1px solid var(--cn-border-subtle);
  border-radius: var(--cn-radius-lg);
  box-shadow: var(--cn-shadow-sm);
}

.cn-session-panel {
  display: grid;
  min-height: 32rem;
  padding: var(--cn-space-8);
}

.cn-action-panel {
  align-self: start;
  background: var(--cn-surface-raised);
  padding: var(--cn-space-6);
}

.cn-session-kicker {
  align-items: center;
  color: var(--cn-text-muted);
  display: inline-flex;
  font-size: var(--cn-font-size-xs);
  font-weight: var(--cn-font-semibold);
  gap: var(--cn-space-2);
  letter-spacing: 0;
  text-transform: uppercase;
}

.cn-session-orbit {
  display: inline-grid;
  gap: 0.18rem;
  grid-template-columns: repeat(3, 0.5rem);
  margin-right: var(--cn-space-1);
}

.cn-session-orbit i {
  background: #f59f00;
  border-radius: var(--cn-radius-pill);
  display: block;
  height: 0.5rem;
  width: 0.5rem;
}

.cn-session-orbit i:first-child { grid-column: 2; }
.cn-session-orbit i:nth-child(2) { grid-column: 1; }
.cn-session-orbit i:nth-child(3) { grid-column: 3; }

.cn-session-title {
  color: var(--cn-text-primary);
  font-size: 4.35rem;
  font-weight: var(--cn-font-bold);
  line-height: 0.96;
  margin: var(--cn-space-8) 0 var(--cn-space-5);
}

.cn-session-copy {
  color: var(--cn-text-secondary);
  font-size: var(--cn-font-size-lg);
  line-height: var(--cn-line-relaxed);
  max-width: 38rem;
}

.cn-session-steps {
  align-self: end;
  display: grid;
  gap: var(--cn-space-3);
  margin-top: var(--cn-space-10);
}

.cn-session-step {
  align-items: center;
  background: var(--cn-surface-raised);
  border: 1px solid var(--cn-border-subtle);
  border-radius: var(--cn-radius-md);
  color: var(--cn-text-secondary);
  display: flex;
  gap: var(--cn-space-3);
  padding: var(--cn-space-3);
}

.cn-session-step b {
  align-items: center;
  background: var(--cn-surface-selected);
  border-radius: var(--cn-radius-pill);
  color: var(--cn-action-primary);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--cn-font-size-xs);
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

.cn-action-title {
  color: var(--cn-text-primary);
  font-size: var(--cn-font-size-2xl);
  font-weight: var(--cn-font-bold);
  line-height: var(--cn-line-tight);
  margin: 0 0 var(--cn-space-2);
}

.cn-action-copy {
  color: var(--cn-text-muted);
  margin: 0 0 var(--cn-space-6);
}

.cn-support-footer {
  color: var(--cn-text-muted);
  padding: var(--cn-space-6) 0;
  text-align: center;
}

.cn-home-controls {
  align-items: center;
  display: flex;
  gap: var(--cn-space-3);
}

.cn-home-control {
  min-width: 0;
}

@media (max-width: 760px) {
  .cn-session-support {
    padding-block: var(--cn-space-6) var(--cn-space-10);
  }

  .cn-session-support-grid {
    grid-template-columns: 1fr;
  }

  .cn-session-panel,
  .cn-action-panel {
    padding: var(--cn-space-5);
  }

  .cn-session-panel {
    min-height: auto;
  }

  .cn-session-title {
    font-size: 2.55rem;
  }

  .cn-session-copy {
    font-size: var(--cn-font-size-base);
  }

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

  .cn-home-control,
  .cn-home-control .cn-button {
    width: 100%;
  }
}