/*
 * Trajectory design system v2
 * Isolated foundation for future role-based workspaces.
 * Scope every rendered workspace with .v2-app.
 */

@layer reset, tokens, base, layout, components, patterns, utilities;

@layer reset {
  :where(.v2-app),
  :where(.v2-app *, .v2-app *::before, .v2-app *::after) {
    box-sizing: border-box;
  }

  :where(.v2-app) {
    margin: 0;
  }

  :where(.v2-app h1, .v2-app h2, .v2-app h3, .v2-app h4, .v2-app p, .v2-app ul, .v2-app ol, .v2-app dl, .v2-app dd, .v2-app figure, .v2-app blockquote) {
    margin: 0;
  }

  :where(.v2-app ul, .v2-app ol)[class] {
    padding: 0;
    list-style: none;
  }

  :where(.v2-app img, .v2-app svg, .v2-app video, .v2-app canvas) {
    display: block;
    max-inline-size: 100%;
  }

  :where(.v2-app button, .v2-app input, .v2-app textarea, .v2-app select) {
    margin: 0;
    color: inherit;
    font: inherit;
  }

  :where(.v2-app button, .v2-app [role="button"]) {
    -webkit-tap-highlight-color: transparent;
  }
}

@layer tokens {
  .v2-app,
  [data-v2-theme] {
    color-scheme: light;

    /* Font families */
    --v2-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --v2-font-display: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --v2-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    /* Type scale. No informational text below 12px. */
    --v2-text-xs: 0.75rem;
    --v2-text-sm: 0.8125rem;
    --v2-text-md: 0.9375rem;
    --v2-text-lg: 1.0625rem;
    --v2-text-xl: 1.25rem;
    --v2-text-2xl: clamp(1.5rem, 2vw, 1.875rem);
    --v2-text-3xl: clamp(1.875rem, 3vw, 2.5rem);
    --v2-leading-tight: 1.18;
    --v2-leading-copy: 1.55;
    --v2-leading-relaxed: 1.68;
    --v2-weight-regular: 430;
    --v2-weight-medium: 560;
    --v2-weight-semibold: 650;
    --v2-weight-bold: 730;
    --v2-tracking-tight: -0.025em;
    --v2-tracking-label: 0.045em;

    /* Spacing */
    --v2-space-0: 0;
    --v2-space-1: 0.25rem;
    --v2-space-2: 0.5rem;
    --v2-space-3: 0.75rem;
    --v2-space-4: 1rem;
    --v2-space-5: 1.25rem;
    --v2-space-6: 1.5rem;
    --v2-space-7: 2rem;
    --v2-space-8: 2.5rem;
    --v2-space-9: 3rem;
    --v2-space-10: 4rem;
    --v2-space-11: 5rem;

    /* Shape */
    --v2-radius-xs: 0.375rem;
    --v2-radius-sm: 0.625rem;
    --v2-radius-md: 0.875rem;
    --v2-radius-lg: 1.25rem;
    --v2-radius-xl: 1.75rem;
    --v2-radius-pill: 999px;
    --v2-border-width: 1px;
    --v2-control-size: 2.5rem;
    --v2-control-size-lg: 2.75rem;
    --v2-icon-size: 1.125rem;

    /* Layout */
    --v2-rail-width: 15.5rem;
    --v2-topbar-height: 4.25rem;
    --v2-content-max: 78rem;
    --v2-reading-max: 45rem;
    --v2-page-gutter: clamp(1rem, 3vw, 3rem);

    /* Motion */
    --v2-duration-fast: 120ms;
    --v2-duration-base: 200ms;
    --v2-duration-slow: 320ms;
    --v2-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --v2-ease-standard: cubic-bezier(0.2, 0, 0, 1);

    /* Elevation and layering */
    --v2-shadow-xs: 0 1px 2px rgb(26 42 38 / 0.06);
    --v2-shadow-sm: 0 8px 24px rgb(26 42 38 / 0.08);
    --v2-shadow-md: 0 18px 52px rgb(26 42 38 / 0.14);
    --v2-z-sticky: 20;
    --v2-z-drawer: 50;
    --v2-z-dialog: 60;
    --v2-z-toast: 80;

    /* Calm, warm light theme */
    --v2-canvas: #f4f3ef;
    --v2-surface: #fbfaf7;
    --v2-surface-raised: #ffffff;
    --v2-surface-subtle: #efeee9;
    --v2-surface-inset: #e9ebe6;
    --v2-ink: #192621;
    --v2-ink-muted: #52605a;
    --v2-ink-faint: #637069;
    --v2-line: #d9ddd7;
    --v2-line-strong: #bdc6bf;
    --v2-brand: #285e53;
    --v2-brand-hover: #1f5147;
    --v2-brand-active: #19463d;
    --v2-brand-soft: #e2ece8;
    --v2-on-brand: #ffffff;
    --v2-accent: #a66443;
    --v2-accent-soft: #f3e7df;
    --v2-success: #287554;
    --v2-success-soft: #e2f0e8;
    --v2-warning: #905f0a;
    --v2-warning-soft: #f7ecd1;
    --v2-danger: #a14343;
    --v2-danger-soft: #f6e2e1;
    --v2-info: #38698a;
    --v2-info-soft: #e2edf4;
    --v2-focus: #3a7468;
    --v2-scrim: rgb(16 29 25 / 0.54);
    --v2-selection: #cfe2dc;
  }

  .v2-app[data-theme="dark"],
  [data-v2-theme][data-theme="dark"] {
    color-scheme: dark;
    --v2-canvas: #151b19;
    --v2-surface: #1b2320;
    --v2-surface-raised: #222c28;
    --v2-surface-subtle: #28312e;
    --v2-surface-inset: #121816;
    --v2-ink: #edf2ef;
    --v2-ink-muted: #b0bbb5;
    --v2-ink-faint: #8f9c96;
    --v2-line: #35413c;
    --v2-line-strong: #4a5a53;
    --v2-brand: #78b7a7;
    --v2-brand-hover: #91c7ba;
    --v2-brand-active: #a8d6cb;
    --v2-brand-soft: #253d36;
    --v2-on-brand: #10211c;
    --v2-accent: #d69a77;
    --v2-accent-soft: #432e24;
    --v2-success: #7cc5a0;
    --v2-success-soft: #203a2d;
    --v2-warning: #e2ba64;
    --v2-warning-soft: #3e341f;
    --v2-danger: #e49b98;
    --v2-danger-soft: #432827;
    --v2-info: #8ebbd6;
    --v2-info-soft: #223746;
    --v2-focus: #9bd0c3;
    --v2-scrim: rgb(3 8 6 / 0.72);
    --v2-selection: #34584e;
    --v2-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.24);
    --v2-shadow-sm: 0 8px 24px rgb(0 0 0 / 0.28);
    --v2-shadow-md: 0 18px 52px rgb(0 0 0 / 0.42);
  }

  @media (prefers-color-scheme: dark) {
    .v2-app[data-theme="system"],
    [data-v2-theme][data-theme="system"] {
      color-scheme: dark;
      --v2-canvas: #151b19;
      --v2-surface: #1b2320;
      --v2-surface-raised: #222c28;
      --v2-surface-subtle: #28312e;
      --v2-surface-inset: #121816;
      --v2-ink: #edf2ef;
      --v2-ink-muted: #b0bbb5;
      --v2-ink-faint: #8f9c96;
      --v2-line: #35413c;
      --v2-line-strong: #4a5a53;
      --v2-brand: #78b7a7;
      --v2-brand-hover: #91c7ba;
      --v2-brand-active: #a8d6cb;
      --v2-brand-soft: #253d36;
      --v2-on-brand: #10211c;
      --v2-accent: #d69a77;
      --v2-accent-soft: #432e24;
      --v2-success: #7cc5a0;
      --v2-success-soft: #203a2d;
      --v2-warning: #e2ba64;
      --v2-warning-soft: #3e341f;
      --v2-danger: #e49b98;
      --v2-danger-soft: #432827;
      --v2-info: #8ebbd6;
      --v2-info-soft: #223746;
      --v2-focus: #9bd0c3;
      --v2-scrim: rgb(3 8 6 / 0.72);
      --v2-selection: #34584e;
      --v2-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.24);
      --v2-shadow-sm: 0 8px 24px rgb(0 0 0 / 0.28);
      --v2-shadow-md: 0 18px 52px rgb(0 0 0 / 0.42);
    }
  }
}

@layer base {
  .v2-app {
    min-block-size: 100%;
    background: var(--v2-canvas);
    color: var(--v2-ink);
    font-family: var(--v2-font-sans);
    font-size: var(--v2-text-md);
    font-weight: var(--v2-weight-regular);
    line-height: var(--v2-leading-copy);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  .v2-app ::selection {
    background: var(--v2-selection);
  }

  :where(.v2-app h1, .v2-app h2, .v2-app h3, .v2-app h4) {
    color: var(--v2-ink);
    font-weight: var(--v2-weight-semibold);
    line-height: var(--v2-leading-tight);
    letter-spacing: var(--v2-tracking-tight);
    text-wrap: balance;
  }

  .v2-app h1 { font-size: var(--v2-text-3xl); }
  .v2-app h2 { font-size: var(--v2-text-2xl); }
  .v2-app h3 { font-size: var(--v2-text-xl); }
  .v2-app h4 { font-size: var(--v2-text-lg); }

  :where(.v2-app p, .v2-app li, .v2-app dd) {
    max-inline-size: var(--v2-reading-max);
    text-wrap: pretty;
  }

  .v2-app a {
    color: var(--v2-brand);
    text-decoration-color: color-mix(in srgb, var(--v2-brand) 48%, transparent);
    text-underline-offset: 0.18em;
  }

  .v2-app a:hover {
    text-decoration-color: currentColor;
  }

  :where(.v2-app a, .v2-app button, .v2-app input, .v2-app textarea, .v2-app select, .v2-app summary, .v2-app [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--v2-focus) 54%, transparent);
    outline-offset: 2px;
  }

  .v2-app code,
  .v2-app kbd,
  .v2-app samp {
    font-family: var(--v2-font-mono);
    font-size: 0.9em;
  }

  .v2-app hr {
    border: 0;
    border-block-start: var(--v2-border-width) solid var(--v2-line);
    margin-block: var(--v2-space-7);
  }
}

@layer layout {
  .v2-shell {
    display: grid;
    min-block-size: 100dvh;
    grid-template:
      "rail topbar" var(--v2-topbar-height)
      "rail main" minmax(0, 1fr)
      / var(--v2-rail-width) minmax(0, 1fr);
  }

  .v2-shell__rail {
    grid-area: rail;
    position: sticky;
    inset-block-start: 0;
    z-index: var(--v2-z-sticky);
    block-size: 100dvh;
    overflow-y: auto;
    border-inline-end: var(--v2-border-width) solid var(--v2-line);
    background: var(--v2-surface);
  }

  .v2-shell__rail-layout {
    display: grid;
    min-block-size: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .v2-shell__rail-header,
  .v2-shell__rail-body,
  .v2-shell__rail-footer {
    padding-inline: var(--v2-space-4);
  }

  .v2-shell__rail-header {
    display: flex;
    min-block-size: var(--v2-topbar-height);
    align-items: center;
    border-block-end: var(--v2-border-width) solid var(--v2-line);
  }

  .v2-shell__rail-body {
    padding-block: var(--v2-space-3) var(--v2-space-6);
  }

  .v2-shell__rail-footer {
    padding-block: var(--v2-space-4);
    border-block-start: var(--v2-border-width) solid var(--v2-line);
  }

  .v2-shell__topbar {
    grid-area: topbar;
    position: sticky;
    inset-block-start: 0;
    z-index: var(--v2-z-sticky);
    display: flex;
    align-items: center;
    min-inline-size: 0;
    padding-inline: var(--v2-page-gutter);
    border-block-end: var(--v2-border-width) solid color-mix(in srgb, var(--v2-line) 80%, transparent);
    background: color-mix(in srgb, var(--v2-canvas) 88%, transparent);
    backdrop-filter: blur(16px);
  }

  .v2-shell__topbar-inner {
    display: flex;
    inline-size: min(100%, var(--v2-content-max));
    min-inline-size: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-space-4);
    margin-inline: auto;
  }

  .v2-shell__main {
    grid-area: main;
    min-inline-size: 0;
  }

  .v2-page {
    inline-size: min(100%, calc(var(--v2-content-max) + (2 * var(--v2-page-gutter))));
    margin-inline: auto;
    padding: var(--v2-space-8) var(--v2-page-gutter) var(--v2-space-11);
  }

  .v2-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--v2-space-6);
    margin-block-end: var(--v2-space-8);
  }

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

  .v2-page__eyebrow {
    color: var(--v2-ink-muted);
    font-size: var(--v2-text-xs);
    font-weight: var(--v2-weight-semibold);
    letter-spacing: var(--v2-tracking-label);
    text-transform: uppercase;
  }

  .v2-page__lede {
    color: var(--v2-ink-muted);
    font-size: var(--v2-text-lg);
    line-height: var(--v2-leading-copy);
  }

  .v2-flow {
    display: grid;
    gap: var(--v2-flow-space, var(--v2-space-6));
  }

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

  .v2-cluster--between {
    justify-content: space-between;
  }

  .v2-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.58fr);
    align-items: start;
    gap: clamp(var(--v2-space-6), 4vw, var(--v2-space-9));
  }

  .v2-reading-column {
    inline-size: min(100%, var(--v2-reading-max));
  }

  .v2-action-bar {
    position: sticky;
    inset-block-end: var(--v2-space-4);
    z-index: calc(var(--v2-z-sticky) - 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-space-4);
    margin-block-start: var(--v2-space-7);
    padding: var(--v2-space-3) var(--v2-space-4);
    border: var(--v2-border-width) solid color-mix(in srgb, var(--v2-line-strong) 72%, transparent);
    border-radius: var(--v2-radius-lg);
    background: color-mix(in srgb, var(--v2-surface-raised) 94%, transparent);
    box-shadow: var(--v2-shadow-sm);
    backdrop-filter: blur(18px);
  }

  @media (max-width: 64rem) {
    .v2-shell {
      grid-template:
        "topbar" var(--v2-topbar-height)
        "main" minmax(0, 1fr)
        / minmax(0, 1fr);
    }

    .v2-shell__rail {
      display: none;
    }

    .v2-split {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 40rem) {
    .v2-page {
      padding-block-start: var(--v2-space-6);
      padding-block-end: calc(var(--v2-space-11) + env(safe-area-inset-bottom));
    }

    .v2-page__header,
    .v2-action-bar {
      align-items: stretch;
      flex-direction: column;
    }

    .v2-action-bar {
      inset-block-end: calc(var(--v2-space-3) + env(safe-area-inset-bottom));
    }

    .v2-shell__topbar {
      padding-inline: var(--v2-space-4);
    }
  }
}

@layer components {
  /* Buttons */
  .v2-button {
    appearance: none;
    display: inline-flex;
    min-block-size: var(--v2-control-size);
    align-items: center;
    justify-content: center;
    gap: var(--v2-space-2);
    padding: 0.5rem 1rem;
    border: var(--v2-border-width) solid transparent;
    border-radius: var(--v2-radius-sm);
    background: var(--v2-brand);
    color: var(--v2-on-brand);
    font-size: var(--v2-text-sm);
    font-weight: var(--v2-weight-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--v2-duration-fast) var(--v2-ease-standard),
      border-color var(--v2-duration-fast) var(--v2-ease-standard),
      color var(--v2-duration-fast) var(--v2-ease-standard),
      transform var(--v2-duration-fast) var(--v2-ease-out),
      box-shadow var(--v2-duration-fast) var(--v2-ease-standard);
  }

  .v2-button:hover:not(:disabled, [aria-disabled="true"]) {
    background: var(--v2-brand-hover);
  }

  .v2-button:active:not(:disabled, [aria-disabled="true"]) {
    background: var(--v2-brand-active);
    transform: translateY(1px);
  }

  .v2-button:disabled,
  .v2-button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .v2-button--secondary {
    border-color: var(--v2-line-strong);
    background: var(--v2-surface-raised);
    color: var(--v2-ink);
    box-shadow: var(--v2-shadow-xs);
  }

  .v2-button--secondary:hover:not(:disabled, [aria-disabled="true"]) {
    border-color: var(--v2-brand);
    background: var(--v2-brand-soft);
    color: var(--v2-brand);
  }

  .v2-button--quiet {
    background: transparent;
    color: var(--v2-ink-muted);
  }

  .v2-button--quiet:hover:not(:disabled, [aria-disabled="true"]) {
    background: var(--v2-surface-subtle);
    color: var(--v2-ink);
  }

  .v2-button--danger {
    background: var(--v2-danger);
    color: #fff;
  }

  .v2-button--danger:hover:not(:disabled, [aria-disabled="true"]) {
    background: color-mix(in srgb, var(--v2-danger) 86%, #000);
  }

  .v2-button--loading {
    cursor: progress;
  }

  .v2-button--wide { inline-size: 100%; }

  .v2-icon-button {
    inline-size: var(--v2-control-size);
    padding-inline: 0;
  }

  .v2-button svg,
  .v2-icon-button svg {
    inline-size: var(--v2-icon-size);
    block-size: var(--v2-icon-size);
    flex: 0 0 auto;
  }

  .v2-icon {
    inline-size: var(--v2-icon-size);
    block-size: var(--v2-icon-size);
    flex: 0 0 auto;
  }

  /* Brand and account primitives for role workspaces. */
  .v2-brand {
    display: inline-flex;
    min-inline-size: 0;
    align-items: center;
    gap: var(--v2-space-3);
    color: var(--v2-ink);
    text-decoration: none;
  }

  .v2-brand__mark {
    display: grid;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--v2-radius-sm);
    background: var(--v2-brand);
    color: var(--v2-on-brand);
    font-size: var(--v2-text-sm);
    font-weight: var(--v2-weight-bold);
    letter-spacing: -0.05em;
  }

  .v2-brand__copy {
    display: grid;
    min-inline-size: 0;
    line-height: 1.18;
  }

  .v2-brand__name {
    font-size: var(--v2-text-md);
    font-weight: var(--v2-weight-semibold);
  }

  .v2-brand__descriptor {
    margin-block-start: 0.16rem;
    color: var(--v2-ink-faint);
    font-size: var(--v2-text-xs);
  }

  .v2-user-summary {
    display: flex;
    min-inline-size: 0;
    align-items: center;
    gap: var(--v2-space-3);
  }

  .v2-avatar {
    display: grid;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    place-items: center;
    border: var(--v2-border-width) solid color-mix(in srgb, var(--v2-brand) 24%, var(--v2-line));
    border-radius: 50%;
    background: var(--v2-brand-soft);
    color: var(--v2-brand);
    font-size: var(--v2-text-sm);
    font-weight: var(--v2-weight-bold);
  }

  .v2-user-summary__copy {
    display: grid;
    min-inline-size: 0;
    line-height: 1.28;
  }

  .v2-user-summary__name {
    overflow: hidden;
    font-size: var(--v2-text-sm);
    font-weight: var(--v2-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v2-user-summary__meta {
    overflow: hidden;
    color: var(--v2-ink-faint);
    font-size: var(--v2-text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Forms */
  .v2-field {
    display: grid;
    gap: var(--v2-space-2);
  }

  .v2-field__label {
    color: var(--v2-ink);
    font-size: var(--v2-text-sm);
    font-weight: var(--v2-weight-semibold);
  }

  .v2-field__optional,
  .v2-field__hint,
  .v2-field__counter {
    color: var(--v2-ink-muted);
    font-size: var(--v2-text-xs);
    line-height: 1.45;
  }

  .v2-field__counter {
    justify-self: end;
  }

  .v2-field__error {
    color: var(--v2-danger);
    font-size: var(--v2-text-xs);
    font-weight: var(--v2-weight-medium);
  }

  .v2-input,
  .v2-select,
  .v2-textarea {
    inline-size: 100%;
    min-block-size: var(--v2-control-size);
    border: var(--v2-border-width) solid var(--v2-line-strong);
    border-radius: var(--v2-radius-sm);
    background: var(--v2-surface-raised);
    color: var(--v2-ink);
    font-size: var(--v2-text-md);
    line-height: 1.4;
    transition:
      border-color var(--v2-duration-fast) var(--v2-ease-standard),
      box-shadow var(--v2-duration-fast) var(--v2-ease-standard),
      background-color var(--v2-duration-fast) var(--v2-ease-standard);
  }

  .v2-input,
  .v2-select {
    padding-inline: var(--v2-space-3);
  }

  .v2-textarea {
    min-block-size: 7.5rem;
    padding: var(--v2-space-3);
    resize: vertical;
  }

  :where(.v2-input, .v2-select, .v2-textarea)::placeholder {
    color: var(--v2-ink-faint);
    opacity: 1;
  }

  :where(.v2-input, .v2-select, .v2-textarea):hover:not(:disabled) {
    border-color: var(--v2-brand);
  }

  :where(.v2-input, .v2-select, .v2-textarea):focus-visible {
    border-color: var(--v2-focus);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-focus) 24%, transparent);
  }

  :where(.v2-input, .v2-select, .v2-textarea):disabled {
    background: var(--v2-surface-subtle);
    color: var(--v2-ink-faint);
    cursor: not-allowed;
  }

  .v2-field[data-invalid="true"] :where(.v2-input, .v2-select, .v2-textarea) {
    border-color: var(--v2-danger);
  }

  .v2-check {
    display: flex;
    align-items: flex-start;
    gap: var(--v2-space-3);
    min-block-size: var(--v2-control-size);
    padding-block: 0.55rem;
    color: var(--v2-ink);
    font-size: var(--v2-text-sm);
    cursor: pointer;
  }

  .v2-check input {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    flex: 0 0 auto;
    margin-block-start: 0.08rem;
    accent-color: var(--v2-brand);
  }

  /* Navigation */
  .v2-nav {
    display: grid;
    gap: var(--v2-space-1);
  }

  .v2-nav__section-label {
    margin: var(--v2-space-5) var(--v2-space-3) var(--v2-space-2);
    color: var(--v2-ink-faint);
    font-size: var(--v2-text-xs);
    font-weight: var(--v2-weight-semibold);
    letter-spacing: var(--v2-tracking-label);
    text-transform: uppercase;
  }

  .v2-nav__item {
    appearance: none;
    position: relative;
    display: flex;
    inline-size: 100%;
    min-block-size: var(--v2-control-size);
    align-items: center;
    gap: var(--v2-space-3);
    padding: 0.55rem var(--v2-space-3);
    border: 0;
    border-radius: var(--v2-radius-sm);
    background: transparent;
    color: var(--v2-ink-muted);
    font-family: inherit;
    font-size: var(--v2-text-sm);
    font-weight: var(--v2-weight-medium);
    line-height: 1.35;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--v2-duration-fast) var(--v2-ease-standard),
      color var(--v2-duration-fast) var(--v2-ease-standard);
  }

  .v2-nav__item:hover {
    background: var(--v2-surface-subtle);
    color: var(--v2-ink);
  }

  .v2-nav__item[aria-current="page"] {
    background: var(--v2-brand-soft);
    color: var(--v2-brand);
  }

  .v2-nav__item[aria-current="page"]::before {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.2rem;
    inline-size: 0.22rem;
    block-size: 1.15rem;
    border-radius: var(--v2-radius-pill);
    background: currentColor;
    content: "";
    transform: translateY(-50%);
  }

  .v2-nav__meta {
    margin-inline-start: auto;
    color: var(--v2-ink-faint);
    font-size: var(--v2-text-xs);
    font-variant-numeric: tabular-nums;
  }

  /* Panels are structural regions, not decorative card tiles. */
  .v2-panel {
    overflow: clip;
    border: var(--v2-border-width) solid var(--v2-line);
    border-radius: var(--v2-radius-lg);
    background: var(--v2-surface);
  }

  .v2-panel--raised {
    border-color: color-mix(in srgb, var(--v2-line) 74%, transparent);
    background: var(--v2-surface-raised);
    box-shadow: var(--v2-shadow-sm);
  }

  .v2-panel__header,
  .v2-panel__body,
  .v2-panel__footer {
    padding: var(--v2-space-5) var(--v2-space-6);
  }

  .v2-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--v2-space-4);
  }

  .v2-panel__header + .v2-panel__body,
  .v2-panel__footer {
    border-block-start: var(--v2-border-width) solid var(--v2-line);
  }

  .v2-panel__title {
    font-size: var(--v2-text-lg);
  }

  .v2-panel__description {
    margin-block-start: var(--v2-space-2);
    color: var(--v2-ink-muted);
    font-size: var(--v2-text-sm);
  }

  .v2-section {
    padding-block: var(--v2-space-7);
    border-block-start: var(--v2-border-width) solid var(--v2-line);
  }

  .v2-section:first-child {
    padding-block-start: 0;
    border-block-start: 0;
  }

  /* Dialog and drawer */
  .v2-dialog,
  .v2-drawer {
    margin: auto;
    padding: 0;
    border: var(--v2-border-width) solid var(--v2-line);
    background: var(--v2-surface-raised);
    color: var(--v2-ink);
    box-shadow: var(--v2-shadow-md);
  }

  .v2-dialog {
    inline-size: min(calc(100% - 2rem), 36rem);
    max-block-size: min(48rem, calc(100dvh - 2rem));
    border-radius: var(--v2-radius-xl);
  }

  .v2-dialog[open] {
    display: grid;
  }

  .v2-dialog > form {
    display: grid;
    max-block-size: inherit;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .v2-dialog::backdrop,
  .v2-drawer::backdrop {
    background: var(--v2-scrim);
    backdrop-filter: blur(3px);
  }

  .v2-dialog__header,
  .v2-dialog__body,
  .v2-dialog__footer,
  .v2-drawer__header,
  .v2-drawer__body,
  .v2-drawer__footer {
    padding: var(--v2-space-5) var(--v2-space-6);
  }

  .v2-dialog__header,
  .v2-drawer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--v2-space-4);
    border-block-end: var(--v2-border-width) solid var(--v2-line);
  }

  .v2-dialog__body,
  .v2-drawer__body {
    overflow-y: auto;
  }

  .v2-dialog__footer,
  .v2-drawer__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--v2-space-3);
    border-block-start: var(--v2-border-width) solid var(--v2-line);
  }

  .v2-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    inline-size: min(100%, 30rem);
    max-block-size: none;
    block-size: 100dvh;
    border-block: 0;
    border-inline-end: 0;
    border-radius: var(--v2-radius-xl) 0 0 var(--v2-radius-xl);
  }

  .v2-drawer[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  /* Toasts */
  .v2-toast-region {
    position: fixed;
    inset-block-end: calc(var(--v2-space-5) + env(safe-area-inset-bottom));
    inset-inline-end: var(--v2-space-5);
    z-index: var(--v2-z-toast);
    display: grid;
    inline-size: min(calc(100% - 2rem), 24rem);
    gap: var(--v2-space-3);
    pointer-events: none;
  }

  .v2-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--v2-space-3);
    padding: var(--v2-space-4);
    border: var(--v2-border-width) solid var(--v2-line);
    border-radius: var(--v2-radius-md);
    background: var(--v2-surface-raised);
    box-shadow: var(--v2-shadow-md);
    pointer-events: auto;
  }

  .v2-toast__title {
    font-size: var(--v2-text-sm);
    font-weight: var(--v2-weight-semibold);
  }

  .v2-toast__message {
    margin-block-start: var(--v2-space-1);
    color: var(--v2-ink-muted);
    font-size: var(--v2-text-xs);
  }

  /* Small semantic primitives */
  .v2-status {
    display: inline-flex;
    min-block-size: 1.75rem;
    align-items: center;
    gap: var(--v2-space-2);
    padding-inline: var(--v2-space-3);
    border-radius: var(--v2-radius-pill);
    background: var(--v2-surface-subtle);
    color: var(--v2-ink-muted);
    font-size: var(--v2-text-xs);
    font-weight: var(--v2-weight-semibold);
    line-height: 1;
  }

  .v2-status::before {
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-radius: 50%;
    background: currentColor;
    content: "";
  }

  .v2-status--success { background: var(--v2-success-soft); color: var(--v2-success); }
  .v2-status--warning { background: var(--v2-warning-soft); color: var(--v2-warning); }
  .v2-status--danger { background: var(--v2-danger-soft); color: var(--v2-danger); }
  .v2-status--info { background: var(--v2-info-soft); color: var(--v2-info); }

  /* Native progress preserves value semantics for assistive technology. */
  .v2-progress {
    display: block;
    inline-size: 100%;
    block-size: 0.5rem;
    overflow: hidden;
    border: 0;
    border-radius: var(--v2-radius-pill);
    background: var(--v2-surface-inset);
    color: var(--v2-brand);
    accent-color: var(--v2-brand);
  }

  .v2-progress::-webkit-progress-bar {
    border-radius: inherit;
    background: var(--v2-surface-inset);
  }

  .v2-progress::-webkit-progress-value {
    border-radius: inherit;
    background: currentColor;
  }

  .v2-progress::-moz-progress-bar {
    border-radius: inherit;
    background: currentColor;
  }

  .v2-disclosure {
    border-block: var(--v2-border-width) solid var(--v2-line);
  }

  .v2-disclosure + .v2-disclosure {
    border-block-start: 0;
  }

  .v2-disclosure > summary {
    display: flex;
    min-block-size: var(--v2-control-size-lg);
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-space-4);
    padding-block: var(--v2-space-3);
    font-size: var(--v2-text-sm);
    font-weight: var(--v2-weight-semibold);
    cursor: pointer;
    list-style: none;
  }

  .v2-disclosure > summary::-webkit-details-marker {
    display: none;
  }

  .v2-disclosure > summary::after {
    inline-size: 0.55rem;
    block-size: 0.55rem;
    flex: 0 0 auto;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    content: "";
    transform: rotate(45deg) translateY(-0.15rem);
    transition: transform var(--v2-duration-fast) var(--v2-ease-out);
  }

  .v2-disclosure[open] > summary::after {
    transform: rotate(225deg) translate(-0.1rem, -0.1rem);
  }

  .v2-disclosure__content {
    padding: 0 0 var(--v2-space-5);
    color: var(--v2-ink-muted);
    font-size: var(--v2-text-sm);
  }
}

@layer patterns {
  /* State surfaces */
  .v2-state {
    display: grid;
    min-block-size: 14rem;
    place-items: center;
    padding: clamp(var(--v2-space-6), 5vw, var(--v2-space-9));
    border-block: var(--v2-border-width) solid var(--v2-line);
    text-align: center;
  }

  .v2-state__content {
    display: grid;
    justify-items: center;
    inline-size: min(100%, 34rem);
    gap: var(--v2-space-3);
  }

  .v2-state__icon {
    display: grid;
    inline-size: 3rem;
    block-size: 3rem;
    place-items: center;
    margin-block-end: var(--v2-space-2);
    border-radius: var(--v2-radius-md);
    background: var(--v2-brand-soft);
    color: var(--v2-brand);
  }

  .v2-state__title {
    font-size: var(--v2-text-xl);
  }

  .v2-state__message {
    color: var(--v2-ink-muted);
    font-size: var(--v2-text-sm);
  }

  .v2-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--v2-space-3);
    margin-block-start: var(--v2-space-3);
  }

  .v2-state--error .v2-state__icon {
    background: var(--v2-danger-soft);
    color: var(--v2-danger);
  }

  .v2-loading {
    display: grid;
    gap: var(--v2-space-3);
  }

  .v2-skeleton {
    position: relative;
    overflow: hidden;
    min-block-size: 1rem;
    border-radius: var(--v2-radius-xs);
    background: var(--v2-surface-subtle);
  }

  .v2-skeleton::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--v2-surface-raised) 72%, transparent), transparent);
    content: "";
    transform: translateX(-100%);
    animation: v2-shimmer 1.4s infinite var(--v2-ease-standard);
  }

  @keyframes v2-shimmer {
    to { transform: translateX(100%); }
  }

  .v2-spinner {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
    border-block-start-color: currentColor;
    border-radius: 50%;
    animation: v2-spin 700ms linear infinite;
  }

  @keyframes v2-spin {
    to { transform: rotate(1turn); }
  }

  /* AI change proposals always disclose cause and impact before apply. */
  .v2-change-preview {
    overflow: clip;
    border: var(--v2-border-width) solid var(--v2-line-strong);
    border-radius: var(--v2-radius-lg);
    background: var(--v2-surface-raised);
  }

  .v2-change-preview__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--v2-space-4);
    padding: var(--v2-space-5) var(--v2-space-6);
    background: var(--v2-brand-soft);
  }

  .v2-change-preview__label {
    color: var(--v2-brand);
    font-size: var(--v2-text-xs);
    font-weight: var(--v2-weight-semibold);
    letter-spacing: var(--v2-tracking-label);
    text-transform: uppercase;
  }

  .v2-change-preview__title {
    margin-block-start: var(--v2-space-1);
    font-size: var(--v2-text-lg);
  }

  .v2-change-preview__diff {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v2-change-preview__side {
    min-inline-size: 0;
    padding: var(--v2-space-5) var(--v2-space-6);
  }

  .v2-change-preview__side + .v2-change-preview__side {
    border-inline-start: var(--v2-border-width) solid var(--v2-line);
  }

  .v2-change-preview__side[data-kind="before"] {
    background: color-mix(in srgb, var(--v2-danger-soft) 54%, var(--v2-surface-raised));
  }

  .v2-change-preview__side[data-kind="after"] {
    background: color-mix(in srgb, var(--v2-success-soft) 54%, var(--v2-surface-raised));
  }

  .v2-change-preview__side-label {
    color: var(--v2-ink-muted);
    font-size: var(--v2-text-xs);
    font-weight: var(--v2-weight-semibold);
  }

  .v2-change-preview__value {
    margin-block-start: var(--v2-space-2);
    color: var(--v2-ink);
    font-size: var(--v2-text-sm);
  }

  .v2-change-preview__impact {
    padding: var(--v2-space-4) var(--v2-space-6);
    border-block-start: var(--v2-border-width) solid var(--v2-line);
    color: var(--v2-ink-muted);
    font-size: var(--v2-text-sm);
  }

  .v2-change-preview__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--v2-space-3);
    padding: var(--v2-space-4) var(--v2-space-6);
    border-block-start: var(--v2-border-width) solid var(--v2-line);
  }

  /* Evidence is readable source material, never decorative metadata. */
  .v2-evidence {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--v2-space-3);
    padding: var(--v2-space-4) 0;
    border-block-start: var(--v2-border-width) solid var(--v2-line);
  }

  .v2-evidence:first-child {
    padding-block-start: 0;
    border-block-start: 0;
  }

  .v2-evidence__marker {
    display: inline-flex;
    min-inline-size: 3.25rem;
    min-block-size: var(--v2-control-size);
    align-items: center;
    justify-content: center;
    padding-inline: var(--v2-space-2);
    border-radius: var(--v2-radius-pill);
    background: var(--v2-surface-subtle);
    color: var(--v2-ink-muted);
    font-family: var(--v2-font-mono);
    font-size: var(--v2-text-xs);
    font-variant-numeric: tabular-nums;
  }

  .v2-evidence__quote {
    color: var(--v2-ink);
    font-family: var(--v2-font-display);
    font-size: var(--v2-text-lg);
    line-height: var(--v2-leading-copy);
  }

  .v2-evidence__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v2-space-2) var(--v2-space-4);
    margin-block-start: var(--v2-space-2);
    color: var(--v2-ink-muted);
    font-size: var(--v2-text-xs);
  }

  @media (max-width: 40rem) {
    .v2-change-preview__diff {
      grid-template-columns: minmax(0, 1fr);
    }

    .v2-change-preview__side + .v2-change-preview__side {
      border-block-start: var(--v2-border-width) solid var(--v2-line);
      border-inline-start: 0;
    }

    .v2-evidence {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

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

  .v2-skip-link {
    position: fixed;
    inset-block-start: var(--v2-space-3);
    inset-inline-start: var(--v2-space-3);
    z-index: calc(var(--v2-z-toast) + 1);
    padding: var(--v2-space-3) var(--v2-space-4);
    border-radius: var(--v2-radius-sm);
    background: var(--v2-ink);
    color: var(--v2-surface-raised);
    font-size: var(--v2-text-sm);
    font-weight: var(--v2-weight-semibold);
    transform: translateY(-180%);
    transition: transform var(--v2-duration-fast) var(--v2-ease-out);
  }

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

  .v2-muted { color: var(--v2-ink-muted); }
  .v2-faint { color: var(--v2-ink-faint); }
  .v2-text-xs { font-size: var(--v2-text-xs); }
  .v2-text-sm { font-size: var(--v2-text-sm); }
  .v2-text-md { font-size: var(--v2-text-md); }
  .v2-tabular { font-variant-numeric: tabular-nums; }
  .v2-balance { text-wrap: balance; }
  .v2-pretty { text-wrap: pretty; }
  .v2-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .v2-full-width { inline-size: 100%; }
  .v2-no-scroll { overflow: hidden; }
  .v2-desktop-hidden { display: none !important; }

  @media (pointer: coarse) {
    .v2-app,
    [data-v2-theme] {
      --v2-control-size: 2.75rem;
    }
  }

  @media (max-width: 64rem) {
    .v2-desktop-hidden { display: inline-flex !important; }
    .v2-tablet-hidden { display: none !important; }
  }

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

  @media (forced-colors: active) {
    .v2-button,
    .v2-input,
    .v2-select,
    .v2-textarea,
    .v2-panel,
    .v2-dialog,
    .v2-drawer,
    .v2-toast,
    .v2-change-preview {
      border: 1px solid CanvasText;
    }

    .v2-status::before,
    .v2-nav__item[aria-current="page"]::before {
      background: CanvasText;
    }
  }
}