/* rAIvisor component layer (M06_5, 0build idiom).
 *
 * 0build doctrine: named classes in a low cascade layer; utilities only as
 * one-off escape hatch. Every recurring chat structure is a named class
 * here, so views carry zero style="--…" pairs. Spacing values use the kit's
 * --spacing scale; colors use kit theme tokens so dark mode stays free.
 */

@layer components {
  /* Page container */
  .chat {
    max-width: 48rem;
    margin-inline: auto;
    padding: calc(var(--spacing) * 4);
  }

  .chat-header {
    margin-block-end: calc(var(--spacing) * 4);
  }

  .chat-title {
    font-size: var(--font-size-xl);
    line-height: var(--font-size-xl--line-height);
    font-weight: 600;
  }

  /* Turn list */
  .turns {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }

  .empty {
    text-align: center;
    color: var(--z-muted-f);
    opacity: 0.8;
  }

  /* Turn card content (the card chrome itself is .z-card) */
  .question {
    margin-block-end: calc(var(--spacing) * 1);
    font-weight: 600;
  }

  .status {
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
    font-style: italic;
    opacity: 0.6;
  }

  /* Grounded answer markers and per-turn source panels. */
  .turn-row,
  .turn,
  .turn-sources,
  .answer-markdown {
    min-width: 0;
  }

  .turn-sources {
    margin-block-start: calc(var(--spacing) * 2);
  }

  .source-marker {
    appearance: none;
    border: 0;
    padding: 0 calc(var(--spacing) * 0.5);
    background: transparent;
    color: var(--z-primary);
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1;
    vertical-align: super;
    cursor: pointer;
  }

  .source-marker:hover {
    text-decoration: underline;
  }

  .source-marker:focus-visible,
  .source-panel-summary:focus-visible,
  .source-card-summary:focus-visible {
    border-radius: var(--z-global-radius-small);
    outline: 2px solid var(--z-focus);
    outline-offset: 2px;
  }

  .source-panel,
  .source-card {
    border: 1px solid var(--z-border);
    border-radius: var(--z-global-radius-small);
    background: var(--z-card);
    color: var(--z-muted-f);
  }

  .source-panel-summary,
  .source-card-summary {
    cursor: pointer;
  }

  .source-panel-summary {
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
    font-size: var(--font-size-xs);
    line-height: var(--font-size-xs--line-height);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .source-card-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
    border-block-start: 1px solid var(--z-border);
    padding: calc(var(--spacing) * 2);
  }

  .source-card-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: calc(var(--spacing) * 1) calc(var(--spacing) * 1.5);
    align-items: center;
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
    font-size: var(--font-size-xs);
    line-height: var(--font-size-xs--line-height);
  }

  .source-card-name {
    overflow-wrap: anywhere;
    color: var(--z-bg-f);
  }

  .source-card-locator {
    grid-column: 2 / -1;
    overflow-wrap: anywhere;
    font-family: var(--font-family-mono);
  }

  .source-card-evidence {
    border-block-start: 1px solid var(--z-border);
    padding: calc(var(--spacing) * 2);
    color: var(--z-bg-f);
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
  }

  /* Alerts keep kit classes (z-alert z-alert-*); only spacing is ours */
  .unverified,
  .cost,
  .notice {
    margin-block-start: calc(var(--spacing) * 2);
  }

  .missing-references {
    margin-block-start: calc(var(--spacing) * 1);
    font-size: var(--font-size-xs);
    line-height: var(--font-size-xs--line-height);
    color: var(--z-muted-f);
    opacity: 0.9;
  }

  .notice {
    margin-block-start: 0;
    margin-block-end: calc(var(--spacing) * 2);
  }

  .cost-warning {
    color: var(--z-danger);
  }

  /* Cost ledger line */
  .ledger {
    margin-block-start: calc(var(--spacing) * 3);
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
    opacity: 0.7;
  }

  /* Input row */
  .chat-form {
    margin-block-start: calc(var(--spacing) * 3);
  }

  .ask-row {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }

  .question-input {
    flex-grow: 1;
  }

  /* In-app chat tabs: kit chrome with rAIvisor overflow/close behavior. */
  .chat-tabs {
    display: flex;
    gap: calc(var(--spacing) * 2);
    align-items: center;
    min-width: 0;
    margin-block-end: calc(var(--spacing) * 3);
  }

  .chat-tabs .z-tab {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: calc(100% - 3.5rem);
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .chat-tab {
    display: flex;
    align-items: center;
    min-width: 8rem;
    max-width: 18rem;
  }

  .z-tab > .chat-tab > .chat-tab-link {
    min-width: 0;
    padding-inline-end: calc(var(--spacing) * 8);
  }

  .chat-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chat-tab-activity {
    color: var(--z-primary);
    margin-inline-start: calc(var(--spacing) * 1.5);
    font-size: 0.625rem;
  }

  .chat-tab-close {
    appearance: none;
    position: absolute;
    z-index: 1;
    inset-block-start: 50%;
    inset-inline-end: calc(var(--spacing) * 1.25);
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    transform: translateY(-50%);
    border: 0;
    border-radius: var(--z-global-radius-small);
    padding: 0;
    background: transparent;
    color: var(--z-muted-f);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
  }

  .chat-tab-close:hover,
  .chat-tab-close:focus-visible {
    background: color-mix(in srgb, var(--z-muted) 12%, transparent);
    color: var(--z-bg-f);
    outline: 2px dotted var(--z-focus);
  }

  .chat-tab-new {
    flex: none;
    min-width: 2.5rem;
  }

  .chat-panes,
  .chat-pane {
    min-width: 0;
  }

  .chat-pane-stub {
    padding: calc(var(--spacing) * 4);
    color: var(--z-muted-f);
  }

  @media (min-width: 72rem) {
    .chat {
      max-width: 72rem;
    }

    .chat-tabs,
    .chat-form,
    .ledger,
    .notice,
    .empty {
      max-width: 40rem;
      margin-inline-end: auto;
    }

    .turn-row {
      display: grid;
      grid-template-columns: minmax(0, 48rem) minmax(14rem, 24rem);
      gap: calc(var(--spacing) * 4);
      justify-content: end;
      align-items: start;
    }

    .turn {
      grid-column: 1;
      grid-row: 1;
    }

    .turn-sources {
      grid-column: 2;
      grid-row: 1;
      margin-block-start: 0;
    }
  }
}

/* M09 application chrome and cursus pages.
 *
 * Penpot palette (design record only — layout/hierarchy source, no pixel
 * fidelity) is encoded once here and mapped onto 0build theme tokens; every
 * component below consumes kit tokens, so light and dark modes stay legible.
 * Inter stays a Penpot record: no font asset is loaded, the system stack
 * carries the recorded size/weight hierarchy.
 */

:root {
  --rai-page-bg: #0b1220;
  --rai-card-bg: #0f1a2e;
  --rai-card-bg-alt: #0c1424;
  --rai-border: #1b2452;
  --rai-border-strong: #334166;
  --rai-indigo: #4f46e5;
  --rai-indigo-soft: #818cf8;
  --rai-emerald: #10b981;
  --rai-text: #f1f5f9;
  --rai-text-muted: #8a99b8;
}

/* Source-row badge legibility in light mode (M10h review): the kit draws
 * every badge as its accent at 100% text over a 4% tint of the same hue --
 * 2.7-3.8:1 on white, below WCAG AA for the small Source-row badges. The
 * fix is scoped to the row the finding belongs to (no global token
 * redefinition): each accent is mixed 45% toward the foreground token,
 * lifting the Source badge above AA while keeping the hue. The kit default
 * is restored under .dark, whose accents are calibrated for dark surfaces. */
.summary-source-toggle .z-badge-info {
  --z-badge-color: color-mix(in srgb, var(--z-info) 55%, var(--z-bg-f));
}
.summary-source-toggle .z-badge-success {
  --z-badge-color: color-mix(in srgb, var(--z-success) 55%, var(--z-bg-f));
}
.summary-source-toggle .z-badge-warning {
  --z-badge-color: color-mix(in srgb, var(--z-warning) 55%, var(--z-bg-f));
}
.summary-source-toggle .z-badge-danger {
  --z-badge-color: color-mix(in srgb, var(--z-danger) 55%, var(--z-bg-f));
}
.dark .summary-source-toggle .z-badge-info {
  --z-badge-color: var(--z-info);
}
.dark .summary-source-toggle .z-badge-success {
  --z-badge-color: var(--z-success);
}
.dark .summary-source-toggle .z-badge-warning {
  --z-badge-color: var(--z-warning);
}
.dark .summary-source-toggle .z-badge-danger {
  --z-badge-color: var(--z-danger);
}

/* Dark mode adopts the Penpot surfaces through kit tokens. */
.dark {
  --z-bg: var(--rai-page-bg);
  --z-bg-f: var(--rai-text);
  --z-card: var(--rai-card-bg);
  --z-border: var(--rai-border-strong);
  --z-border-o: 100%;
  --z-muted-f: var(--rai-text-muted);
  --z-accent: var(--rai-indigo);
}

@layer components {
  /* -- Application frame ---------------------------------------------------- */

  .app {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }

  .app-skip-link {
    position: absolute;
    inset-block-start: var(--spacing);
    inset-inline-start: var(--spacing);
    transform: translateY(-300%);
    z-index: 20;
    background: var(--z-card);
    color: var(--z-bg-f);
    border: 1px solid var(--z-border);
    border-radius: var(--z-global-radius-small);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    text-decoration: none;
  }

  .app-skip-link:focus-visible {
    transform: none;
  }

  .app-header {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    min-height: 64px;
    padding-inline: calc(var(--spacing) * 4);
    border-block-end: 1px solid var(--z-border);
    background: var(--z-bg);
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
  }

  .app-wordmark {
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--z-bg-f);
    text-decoration: none;
    white-space: nowrap;
  }

  .app-breadcrumb {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
  }

  .app-nav-link {
    color: var(--z-muted-f);
    text-decoration: none;
    font-weight: 500;
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    border-radius: var(--z-global-radius-small);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .app-nav-link:hover {
    color: var(--z-bg-f);
    background: color-mix(in oklab, var(--z-muted) 8%, transparent);
  }

  .app-nav-link-active {
    color: var(--z-bg-f);
    font-weight: 600;
  }

  /* Theme toggle (M10h review follow-up): one button in the header nav;
   * the visible label always names the *active* mode so the control reads
   * as state, not as an ambiguous action. */
  .app-theme-toggle {
    color: var(--z-muted-f);
    font: inherit;
    font-weight: 500;
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    border: 1px solid var(--z-border);
    border-radius: var(--z-global-radius-small);
    background: transparent;
    cursor: pointer;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .app-theme-toggle:hover {
    color: var(--z-bg-f);
    background: color-mix(in oklab, var(--z-muted) 8%, transparent);
  }

  .app-theme-toggle:focus-visible {
    outline: 2px solid var(--z-focus);
    outline-offset: 2px;
  }

  /* The visible label names the *active* mode: hide the dark label by
   * default (light mode shows "Light"), show it under .dark. */
  .app-theme-toggle-dark {
    display: none;
  }

  .dark .app-theme-toggle-dark {
    display: inline;
  }

  .dark .app-theme-toggle-light {
    display: none;
  }

  .app-main {
    flex: 1;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding: calc(var(--spacing) * 5) calc(var(--spacing) * 4);
    outline: none;
  }

  .app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    min-height: 36px;
    padding-inline: calc(var(--spacing) * 4);
    border-block-start: 1px solid var(--z-border);
    color: var(--z-muted-f);
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
  }

  .app-footer-sep {
    opacity: 0.6;
  }

  /* -- Pages 1–3 shared vocabulary ------------------------------------------ */

  .cursus-page-title {
    font-size: var(--font-size-xl);
    line-height: var(--font-size-xl--line-height);
    font-weight: 700;
    margin-block-end: calc(var(--spacing) * 4);
  }

  .cursus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: calc(var(--spacing) * 3);
  }

  .cursus-card:hover {
    border-color: var(--rai-indigo-soft);
  }

  .cursus-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }

  .cursus-card-title {
    font-size: var(--z-card-title-font-size);
    font-weight: var(--z-card-title-weight);
    margin: 0;
    min-width: 0;
  }

  .cursus-card-title a {
    color: var(--z-bg-f);
    text-decoration: none;
  }

  .cursus-card-title a:hover {
    color: var(--rai-indigo-soft);
  }

  .cursus-card-id {
    margin-block-start: var(--spacing);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
    color: var(--z-muted-f);
    overflow-wrap: anywhere;
  }

  .cursus-card-description {
    margin-block-start: var(--spacing);
    color: var(--z-muted-f);
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
  }

  .cursus-card-meta {
    margin-block-start: calc(var(--spacing) * 2);
    color: var(--z-muted-f);
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
  }

  /* Inert progress placeholder: reserves the Penpot layout slot without any
   * value, role, or fake percentage. */
  .cursus-progress-track {
    margin-block-start: calc(var(--spacing) * 3);
    height: 6px;
    border-radius: 9999px;
    background: color-mix(in oklab, var(--z-border) 55%, transparent);
    overflow: hidden;
  }

  .cursus-progress-fill {
    height: 100%;
    width: 0;
  }

  .cursus-error-card {
    border-color: color-mix(in oklab, var(--z-warning) 55%, transparent);
  }

  .cursus-error-detail {
    margin-block-start: var(--spacing);
    color: var(--z-muted-f);
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
    overflow-wrap: anywhere;
  }

  .cursus-metadata-banner {
    margin-block-end: calc(var(--spacing) * 4);
  }

  .cursus-empty {
    border: 1px dashed var(--z-border);
    border-radius: var(--z-global-radius);
    padding: calc(var(--spacing) * 8) calc(var(--spacing) * 4);
    text-align: center;
  }

  .cursus-empty-title {
    font-weight: 600;
    color: var(--z-bg-f);
    margin-block-end: var(--spacing);
  }

  .cursus-empty-detail {
    color: var(--z-muted-f);
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
  }

  /* -- Page 3 disclosures ----------------------------------------------------- */

  .cursus-parts {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }

  .cursus-part {
    background: var(--z-card);
    border: 1px solid var(--z-border);
    border-radius: var(--z-global-radius);
  }

  .cursus-part-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 3);
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
  }

  .cursus-part-summary::-webkit-details-marker {
    display: none;
  }

  .cursus-part-summary::before {
    content: "▸";
    color: var(--z-muted-f);
  }

  .cursus-part[open] > .cursus-part-summary::before {
    content: "▾";
  }

  .cursus-part-summary:focus-visible {
    outline: 2px solid var(--z-focus);
    outline-offset: -2px;
    border-radius: var(--z-global-radius);
  }

  .cursus-part-title {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .cursus-part-date {
    color: var(--z-muted-f);
    font-weight: 400;
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
  }

  .cursus-part-count {
    margin-inline-start: auto;
    color: var(--z-muted-f);
    font-weight: 400;
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
  }

  .cursus-documents {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    padding: 0 calc(var(--spacing) * 3) calc(var(--spacing) * 3);
  }

  .cursus-document-row a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 2);
    min-height: 44px;
    border-radius: var(--z-global-radius-small);
    color: var(--z-bg-f);
    text-decoration: none;
  }

  .cursus-document-row a:hover {
    background: color-mix(in oklab, var(--z-muted) 8%, transparent);
  }

  .cursus-document-description {
    flex-basis: 100%;
    color: var(--z-muted-f);
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
  }

  /* -- Page 4 workspace --------------------------------------------------------- */

  .workspace {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }

  .workspace-warnings {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }

  .workspace-columns {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: calc(var(--spacing) * 4);
    align-items: start;
  }

  .workspace-plan {
    position: sticky;
    inset-block-start: calc(64px + var(--spacing) * 5);
    max-height: calc(100dvh - 64px - var(--spacing) * 10);
    overflow-y: auto;
    min-width: 0;
  }

  .workspace-plan-header {
    margin-block-end: calc(var(--spacing) * 3);
  }

  .workspace-document-title {
    font-size: var(--font-size-lg);
    line-height: 1.3;
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
  }

  .workspace-document-source {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    margin-block-start: var(--spacing);
    color: var(--z-muted-f);
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
    overflow-wrap: anywhere;
  }

  .workspace-rail-heading {
    font-size: var(--font-size-xs);
    line-height: var(--font-size-xs--line-height);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--z-muted-f);
    margin: 0 0 calc(var(--spacing) * 2);
  }

  .workspace-switcher {
    margin-block-end: calc(var(--spacing) * 3);
  }

  .workspace-switcher-note {
    margin-block-end: calc(var(--spacing) * 3);
    color: var(--z-muted-f);
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
  }

  .workspace-switcher-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
  }

  .workspace-switcher-item a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 2);
    min-height: 44px;
    border-radius: var(--z-global-radius-small);
    color: var(--z-bg-f);
    text-decoration: none;
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
  }

  .workspace-switcher-item a:hover {
    background: color-mix(in oklab, var(--z-muted) 8%, transparent);
  }

  .workspace-switcher-current a {
    background: color-mix(in oklab, var(--rai-indigo) 18%, transparent);
  }

  .workspace-plan-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
  }

  .plan-link a {
    display: block;
    padding: var(--spacing) calc(var(--spacing) * 2);
    border-inline-start: 2px solid transparent;
    border-radius: var(--z-global-radius-small);
    color: var(--z-muted-f);
    text-decoration: none;
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
  }

  .plan-link a:hover {
    color: var(--z-bg-f);
    border-inline-start-color: var(--rai-indigo-soft);
  }

  .plan-link-depth-1 a {
    padding-inline-start: calc(var(--spacing) * 4);
  }

  .plan-link-depth-2 a {
    padding-inline-start: calc(var(--spacing) * 6);
  }

  .plan-link-depth-3 a {
    padding-inline-start: calc(var(--spacing) * 8);
  }

  .workspace-plan-empty,
  .workspace-summary-state {
    border: 1px dashed var(--z-border);
    border-radius: var(--z-global-radius);
    padding: calc(var(--spacing) * 4);
    color: var(--z-muted-f);
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
  }

  .workspace-summaries {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    min-width: 0;
  }

  .summary-card {
    background: var(--z-card);
    border: 1px solid var(--z-border);
    border-radius: var(--z-global-radius);
    padding: calc(var(--spacing) * 4);
    scroll-margin-top: calc(64px + var(--spacing) * 4);
  }

  .summary-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    margin-block-end: calc(var(--spacing) * 2);
  }

  .summary-card-title {
    font-size: var(--font-size-lg);
    line-height: 1.35;
    font-weight: 600;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Rendered Markdown flow (common/markdown.py output). */
  :is(.summary-text, .cursus-card-description, .markdown-body) > :first-child {
    margin-block-start: 0;
  }

  :is(.summary-text, .cursus-card-description, .markdown-body) > :last-child {
    margin-block-end: 0;
  }

  :is(.summary-text, .cursus-card-description, .markdown-body)
    :is(p, ul, ol, blockquote, pre, table) {
    margin-block: 0 calc(var(--spacing) * 2);
  }

  /* The kit base resets `menu,ol,ul{list-style:none}`; rendered Markdown
   * lists are content, not navigation — restore markers and indentation. */
  :is(.summary-text, .cursus-card-description, .markdown-body) ul {
    list-style: disc;
    padding-inline-start: calc(var(--spacing) * 6);
  }

  :is(.summary-text, .cursus-card-description, .markdown-body) ol {
    list-style: decimal;
    padding-inline-start: calc(var(--spacing) * 6);
  }

  :is(.summary-text, .cursus-card-description, .markdown-body)
    :is(ul, ol)
    :is(ul, ol) {
    margin-block: calc(var(--spacing) * 1);
  }

  :is(.summary-text, .cursus-card-description, .markdown-body) ul ul {
    list-style: circle;
  }

  :is(.summary-text, .cursus-card-description, .markdown-body) ul ul ul {
    list-style: square;
  }

  :is(.summary-text, .cursus-card-description, .markdown-body) :is(h4, h5, h6) {
    margin-block: calc(var(--spacing) * 3) var(--spacing);
    font-size: var(--font-size-base);
    font-weight: 600;
  }

  :is(.summary-text, .cursus-card-description, .markdown-body) blockquote {
    border-inline-start: 3px solid var(--z-border);
    padding-inline-start: calc(var(--spacing) * 3);
    color: var(--z-muted-f);
  }

  :is(.summary-text, .cursus-card-description, .markdown-body)
    :is(p, li, blockquote, td, th) {
    overflow-wrap: anywhere;
  }

  :is(.summary-text, .cursus-card-description, .markdown-body) table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
  }

  :is(.summary-text, .cursus-card-description, .markdown-body) :is(th, td) {
    border: 1px solid var(--z-border);
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
    text-align: start;
    vertical-align: top;
  }

  :is(.summary-text, .cursus-card-description, .markdown-body) th {
    background: color-mix(in srgb, var(--z-muted) 10%, transparent);
    font-weight: 600;
  }

  .summary-unavailable {
    color: var(--z-muted-f);
    font-style: italic;
  }

  /* Canonical source provenance folded under each summary title (M10h). */
  .summary-source {
    margin-block: calc(var(--spacing) * 2);
    border: 1px solid var(--z-border);
    border-radius: var(--z-global-radius-small);
    color: var(--z-muted-f);
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
  }

  .summary-source-toggle {
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
    cursor: pointer;
  }

  .summary-source-toggle::marker {
    color: var(--z-muted-f);
  }

  .summary-source-toggle:focus-visible {
    outline: 2px solid var(--z-focus);
    outline-offset: -2px;
    border-radius: var(--z-global-radius-small);
  }

  .summary-source-label {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--font-size-xs);
    line-height: var(--font-size-xs--line-height);
  }

  .summary-source-locator {
    border-block-start: 1px solid var(--z-border);
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
    font-family: var(--font-family-mono);
    overflow-wrap: anywhere;
  }

  .reference-rail {
    position: sticky;
    inset-block-start: calc(64px + var(--spacing) * 5);
    min-width: 0;
  }

  .reference-card-head {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    margin-block-end: calc(var(--spacing) * 2);
  }

  .reference-section-title {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .reference-text {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
    overflow-wrap: anywhere;
  }

  .reference-empty {
    border: 1px dashed var(--z-border);
    border-radius: var(--z-global-radius);
    padding: calc(var(--spacing) * 4);
    color: var(--z-muted-f);
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm--line-height);
  }

  /* -- Responsive breakpoints ---------------------------------------------------- */

  @media (max-width: 1100px) {
    .workspace-columns {
      grid-template-columns: 260px minmax(0, 1fr);
    }
  }

  @media (max-width: 760px) {
    .app-header {
      flex-wrap: wrap;
      gap: calc(var(--spacing) * 2);
      padding-block: var(--spacing);
    }

    .app-main {
      padding: calc(var(--spacing) * 3);
    }

    .app-footer {
      flex-direction: column;
      align-items: flex-start;
      padding-block: calc(var(--spacing) * 2);
    }

    .workspace-columns {
      grid-template-columns: 1fr;
    }

    .workspace-plan {
      position: static;
      max-height: none;
      overflow-y: visible;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cursus-part,
    .cursus-part-summary,
    .cursus-card,
    .app-nav-link {
      transition: none;
    }
  }
}